Fauto Design - Vue页面可视化设计器

🤖 本项目完全由 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

安装依赖

# 前端
cd draggable-panels
npm install

# 后端
cd vue-template-service
npm install

启动服务

# 终端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模板解析修改

🎮 使用方法

选择页面 - 在左侧面板选择要编辑的 Vue 页面
开始拖拽 - 点击页面中的 el-row 或 el-col 元素
选择源层级 - 按 ↑↓ 键切换要移动的层级
移动到目标 - 拖动到目标元素上
选择目标层级 - 按 ↑↓ 键切换目标层级
确认位置 - 松开鼠标，选择放置方向（上/下/左/右/内部）
自动保存 - 源文件自动更新，页面热刷新

🤖 关于 AI 开发

本项目是一个 AI 驱动开发的实验性项目：

开发工具：Qoder AI（AI 编程助手）
代码生成：100% 由 AI 生成
人工参与：需求描述、测试反馈、方向指导

这证明了 AI 辅助开发在复杂前端项目中的可行性，包括：

状态管理设计
拖拽交互实现
AST 解析与修改
多阶段工作流

📄 相关文档

项目上下文.md - AI 协作快速恢复上下文
项目设计文档.md - 详细技术设计

📜 License

MIT License

5.8 KiB Raw Blame History Unescape Escape