🤖 本项目完全由 Qoder AI 开发，所有代码均为 AI 生成
--- ## 📖 项目简介 **Fauto Design** 是一个基于 Vue3 的**可视化页面设计器**，通过拖拽操作直接编辑真实的 Vue 源文件。与传统低代码平台不同，本项目直接操作 `.vue` 文件，生成的代码即是最终代码。 ### ✨ 核心特性 - 🎯 **直接编辑源码** - 拖拽操作实时修改 Vue 文件，所见即所得 - 🖱️ **智能拖拽交互** - 两阶段拖拽：先选源元素层级，再选目标位置 - ⌨️ **键盘层级选择** - ↑↓ 键切换嵌套元素层级，精准定位 - 🔄 **跨类型拖放** - 支持 el-row/el-col 之间的灵活布局调整 - 📝 **保持代码格式** - AST 解析 + 智能缩进，保持源码整洁 --- ## 🏗️ 技术架构 ``` ┌─────────────────────────────────────────────────┐ │ 前端 (Vue3 + Vite) │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────┐ │ │ │ PageManager │ │DesignCenter│ │DropZone │ │ │ └─────────────┘ └─────────────┘ └─────────┘ │ │ ↓ ↓ ↓ │ │ ┌──────────────────────────────────────────┐ │ │ │ dragStore (Pinia) │ │ │ │ 两阶段拖拽 | 层级选择 | 跨类型判断 │ │ │ └──────────────────────────────────────────┘ │ └─────────────────────────────────────────────────┘ │ HTTP ▼ ┌─────────────────────────────────────────────────┐ │ 后端 (Node.js + Express) │ │ ┌──────────────────────────────────────────┐ │ │ │ templateService.js │ │ │ │ @vue/compiler-sfc | AST解析 | 元素移动 │ │ │ └──────────────────────────────────────────┘ │ └─────────────────────────────────────────────────┘ │ ▼ Vue 源文件 (*.vue) ``` --- ## 🚀 快速开始 ### 环境要求 - Node.js >= 18.x - npm >= 9.x ### 安装依赖 ```bash # 前端 cd draggable-panels npm install # 后端 cd vue-template-service npm install ``` ### 启动服务 ```bash # 终端1 - 启动前端 (端口 5173) cd draggable-panels npm run dev # 终端2 - 启动后端 (端口 3001) cd vue-template-service node src/index.js ``` ### 访问 打开浏览器访问：**http://localhost:5173/draggable** --- ## 📁 项目结构 ``` fauto-design/ ├── 项目上下文.md # AI 协作上下文文档 ├── 项目设计文档.md # 详细技术设计文档 ├── README.md # 本文件 │ ├── draggable-panels/ # 前端项目 │ └── src/ │ ├── fauto/ # 设计器核心 │ │ ├── components/ # UI组件 │ │ ├── materials/ # 物料组件 │ │ ├── plugins/ # 核心插件 (dragStore等) │ │ └── stores/ # 状态管理 │ └── views/ # 示例页面 │ └── vue-template-service/ # 后端服务 └── src/ └── services/ └── templateService.js # Vue模板解析修改 ``` --- ## 🎮 使用方法 1. **选择页面** - 在左侧面板选择要编辑的 Vue 页面 2. **开始拖拽** - 点击页面中的 el-row 或 el-col 元素 3. **选择源层级** - 按 ↑↓ 键切换要移动的层级 4. **移动到目标** - 拖动到目标元素上 5. **选择目标层级** - 按 ↑↓ 键切换目标层级 6. **确认位置** - 松开鼠标，选择放置方向（上/下/左/右/内部） 7. **自动保存** - 源文件自动更新，页面热刷新 --- ## 🤖 关于 AI 开发 本项目是一个 **AI 驱动开发**的实验性项目： - **开发工具**：Qoder AI（AI 编程助手） - **代码生成**：100% 由 AI 生成 - **人工参与**：需求描述、测试反馈、方向指导 这证明了 AI 辅助开发在复杂前端项目中的可行性，包括： - 状态管理设计 - 拖拽交互实现 - AST 解析与修改 - 多阶段工作流 --- ## 📄 相关文档 - [项目上下文.md](./项目上下文.md) - AI 协作快速恢复上下文 - [项目设计文档.md](./项目设计文档.md) - 详细技术设计 --- ## 📜 License MIT License ---🚀 Powered by Qoder AI