duqing026/visual-lowcode-chinese

1---2title: 可视化低代码平台3emoji: 🎨4colorFrom: blue5colorTo: purple6sdk: docker7pinned: false8short_description: 极简可视化低代码平台，支持组件拖放、属性编辑及移动端适配。9---10 11# 极简可视化低代码平台 (Visual Low-Code Platform)12 13本项目是一个功能齐全的低代码可视化编辑器，旨在展示如何快速构建一个具备主流平台特性的可视化工具。14 15## ✨ 特性16 17- 🚀 **可视化设计**: 通过简单的点击操作即可在画布上添加和排列组件。18- 📱 **多端适配**: 一键切换桌面端和移动端预览，确保布局在不同设备上表现正常。19- 🛠️ **实时编辑**: 右侧属性面板支持实时修改组件内容、样式、字号、颜色等。20- 📦 **组件库**: 预设文本、按钮、输入框、卡片和复选框等常用组件。21- 🎨 **现代 UI**: 基于 Tailwind CSS 和 Lucide Icons 打造，界面美观、交互流畅。22- 🐳 **Docker 支持**: 已配置 Dockerfile，可轻松部署至 Hugging Face Spaces 或任何容器环境。23 24## 🛠️ 技术栈25 26- **Frontend**: React 18, TypeScript, Vite27- **Styling**: Tailwind CSS28- **Icons**: Lucide React29- **Animations**: Framer Motion30- **Deployment**: Docker + Nginx31 32## 🚀 快速开始33 34### 本地开发35 361. 安装依赖:37   ```bash38   npm install39   ```40 412. 启动开发服务器:42   ```bash43   npm run dev44   ```45 463. 访问 `http://localhost:3000` 即可开始设计。47 48### Docker 部署49 50```bash51docker build -t visual-lowcode .52docker run -p 8080:80 visual-lowcode53```54 55## 📝 开发说明56 57本项目完全采用中文显示和代码注释，方便中文开发者学习和扩展。核心代码位于 `src/App.tsx`，包含了所有的逻辑处理和组件渲染。58 59## 📜 许可证60 61MIT62