README.md

---
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. 安装依赖:
   ```bash
   npm install
   ```

2. 启动开发服务器:
   ```bash
   npm run dev
   ```

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

### Docker 部署

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

## 📝 开发说明

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

## 📜 许可证

MIT