README.md

metadata

title: 可视化低代码平台
emoji: 🎨
colorFrom: blue
colorTo: purple
sdk: docker
pinned: false
short_description: 极简可视化低代码平台，支持组件拖放、属性编辑及移动端适配。

极简可视化低代码平台 (Visual Low-Code Platform)

本项目是一个功能齐全的低代码可视化编辑器，旨在展示如何快速构建一个具备主流平台特性的可视化工具。

✨ 特性

• 🚀 可视化设计: 通过简单的点击操作即可在画布上添加和排列组件。
• 📱 多端适配: 一键切换桌面端和移动端预览，确保布局在不同设备上表现正常。
• 🛠️ 实时编辑: 右侧属性面板支持实时修改组件内容、样式、字号、颜色等。
• 📦 组件库: 预设文本、按钮、输入框、卡片和复选框等常用组件。
• 🎨 现代 UI: 基于 Tailwind CSS 和 Lucide Icons 打造，界面美观、交互流畅。
• 🐳 Docker 支持: 已配置 Dockerfile，可轻松部署至 Hugging Face Spaces 或任何容器环境。

🛠️ 技术栈

• Frontend: React 18, TypeScript, Vite
• Styling: Tailwind CSS
• Icons: Lucide React
• Animations: Framer Motion
• Deployment: Docker + Nginx

🚀 快速开始

本地开发

1. 安装依赖:

   npm install
   

2. 启动开发服务器:

   npm run dev
   

3. 访问 http://localhost:3000 即可开始设计。

Docker 部署

docker build -t visual-lowcode .
docker run -p 8080:80 visual-lowcode

📝 开发说明

本项目完全采用中文显示和代码注释，方便中文开发者学习和扩展。核心代码位于 src/App.tsx，包含了所有的逻辑处理和组件渲染。

📜 许可证

MIT