167 lines
5.8 KiB
Markdown
167 lines
5.8 KiB
Markdown
# Fauto Design - Vue页面可视化设计器
|
||
|
||
<p align="center">
|
||
<img src="https://img.shields.io/badge/Vue-3.5-4FC08D?logo=vue.js" alt="Vue 3">
|
||
<img src="https://img.shields.io/badge/TypeScript-5.x-3178C6?logo=typescript" alt="TypeScript">
|
||
<img src="https://img.shields.io/badge/Vite-7.3-646CFF?logo=vite" alt="Vite">
|
||
<img src="https://img.shields.io/badge/Element%20Plus-Latest-409EFF" alt="Element Plus">
|
||
<img src="https://img.shields.io/badge/Node.js-22.x-339933?logo=node.js" alt="Node.js">
|
||
</p>
|
||
|
||
<p align="center">
|
||
<strong>🤖 本项目完全由 Qoder AI 开发，所有代码均为 AI 生成</strong>
|
||
</p>
|
||
|
||
---
|
||
|
||
## 📖 项目简介
|
||
|
||
**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
|
||
|
||
---
|
||
|
||
<p align="center">
|
||
<strong>🚀 Powered by Qoder AI</strong>
|
||
</p>
|