wfz/fauto-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ai牛逼

Browse Source
This commit is contained in:
wfz
2026-01-20 22:07:05 +08:00
parent bfa4e3107f
commit 842a132ec6
5 changed files with 1301 additions and 535 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
README.md
View File

@@ -1,166 +1,192 @@
# 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">
<img src="https://img.shields.io/badge/Vue-3.5-4FC08D?style=flat-square&logo=vue.js" alt="Vue 3.5">
<img src="https://img.shields.io/badge/TypeScript-5.0-3178C6?style=flat-square&logo=typescript" alt="TypeScript">
<img src="https://img.shields.io/badge/Vite-7.3-646CFF?style=flat-square&logo=vite" alt="Vite">
<img src="https://img.shields.io/badge/Element%20Plus-Latest-409EFF?style=flat-square" alt="Element Plus">
</p>
<p align="center">
<strong>🤖 本项目完全由 Qoder AI 开发，所有代码均为 AI 生成</strong>
</p>
## 📖 简介
---
**Fauto Design** 是一个基于 Vue3 的可视化页面设计器，通过拖拽操作直接编辑真实的Vue源文件，实现**所见即所得**的低代码开发体验。
## 📖 项目简介
### ✨ 特性
**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)
```
---
- 🎯 **源码级编辑** - 拖拽操作直接修改Vue文件，支持热更新
- 🔧 **非侵入式设计** - 无需修改业务页面代码即可实现可视化编辑
- 🎨 **智能层级选择** - 键盘方向键精准切换嵌套元素层级
- 📝 **元数据编辑** - 可视化修改组件属性（宽度、颜色、尺寸等）
- 🌳 **结构树视图** - 清晰展示页面el-row/el-col结构
- 🔄 **多视图联动** - 设计中心、结构树、属性面板实时同步
## 🚀 快速开始
### 环境要求
- Node.js >= 18.x
- npm >= 9.x
- Node.js >= 18
- npm >= 9
### 安装依赖
### 安装与运行
```bash
# 前端
# 克隆项目
git clone <repository-url>
cd fauto-design
# 启动前端
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
npm install
node src/index.js
```
### 访问
### 访问设计器
打开浏览器访问：**http://localhost:5173/draggable**
```
http://localhost:5173/draggable
```
---
## 📸 功能演示
### 基本操作流程
1. **选择页面** - 在左侧"页面管理"中选择要编辑的Vue文件
2. **拖拽组件** - 从"设计组件列表"拖拽组件到设计区域
3. **调整位置** - 使用↑↓键切换层级，选择放置方向
4. **编辑属性** - 点击组件，在"元数据"面板编辑属性
5. **删除元素** - 右键菜单、Del键或点击删除图标
### 键盘快捷键
| 快捷键 | 功能 |
|--------|------|
| ↑ | 选择父级元素 |
| ↓ | 选择子级元素 |
| Delete | 删除选中元素 |
| Esc | 取消拖拽操作 |
## 📁 项目结构
```
fauto-design/
├── 项目上下文.md # AI 协作上下文文档
├── 项目设计文档.md # 详细技术设计文档
├── README.md # 本文件
│
├── draggable-panels/ # 前端项目
│ └── src/
│ ├── fauto/ # 设计器核心
│ │ ├── components/ # UI组件
│ │ ├── materials/ # 物料组件
│ │ ├── plugins/ # 核心插件 (dragStore等)
│ │ └── stores/ # 状态管理
│ └── views/ # 示例页面
│ ├── src/
│ │ ├── fauto/ # 设计器核心
│ │ │ ├── components/ # UI组件
│ │ │ ├── materials/ # 物料组件
│ │ │ ├── designComponents/ # 设计组件库
│ │ │ ├── plugins/ # 插件系统
│ │ │ └── stores/ # 状态管理
│ │ └── views/ # 示例页面
│ └── vite.config.ts
│
└── vue-template-service/ # 后端服务
└── src/
├── index.js # API入口
└── services/
└── templateService.js # Vue模板解析修改
└── templateService.js # 模板解析
```
---
## 🔌 设计组件
## 🎮 使用方法
内置设计组件：
1. **选择页面** - 在左侧面板选择要编辑的 Vue 页面
2. **开始拖拽** - 点击页面中的 el-row 或 el-col 元素
3. **选择源层级** - 按 ↑↓ 键切换要移动的层级
4. **移动到目标** - 拖动到目标元素上
5. **选择目标层级** - 按 ↑↓ 键切换目标层级
6. **确认位置** - 松开鼠标，选择放置方向（上/下/左/右/内部）
7. **自动保存** - 源文件自动更新，页面热刷新
| 组件 | 描述 |
|------|------|
| 输入框 (TextInput) | 文本输入表单组件 |
| 单选器 (RadioSelect) | 单选按钮组组件 |
| 表格 (GridTable) | 数据表格组件 |
---
### 添加自定义设计组件
## 🤖 关于 AI 开发
1. 在 `draggable-panels/src/fauto/designComponents/` 创建目录
2. 添加配置文件 `index.json`：
```json
{
"id": "MyComponent",
"name": "我的组件",
"icon": "🎯",
"description": "组件描述",
"defaultSpan": 12,
"metadata": {
"span": {
"label": "宽度",
"type": "number",
"min": 1,
"max": 24,
"target": "el-col",
"attr": ":span"
}
}
}
```
本项目是一个 **AI 驱动开发**的实验性项目：
3. 添加模板文件 `template.html`：
```html
<el-col :span="12">
<div class="design-component" data-component="我的组件">
<!-- 组件内容 -->
</div>
</el-col>
```
- **开发工具**：Qoder AI（AI 编程助手）
- **代码生成**：100% 由 AI 生成
- **人工参与**：需求描述、测试反馈、方向指导
## 📋 Vue页面规范
这证明了 AI 辅助开发在复杂前端项目中的可行性，包括：
- 状态管理设计
- 拖拽交互实现
- AST 解析与修改
- 多阶段工作流
设计器要求Vue页面遵循以下结构：
---
```vue
<template>
<!-- 第一层级必须且只能有一个el-row -->
<el-row :gutter="20">
<el-col :span="12">
<!-- 设计组件需要data-component属性 -->
<div class="design-component" data-component="组件名">
<!-- 内容 -->
</div>
</el-col>
</el-row>
</template>
```
## 📄 相关文档
## 🔗 API文档
- [项目上下文.md](./项目上下文.md) - AI 协作快速恢复上下文
- [项目设计文档.md](./项目设计文档.md) - 详细技术设计
后端服务运行在 `http://localhost:3001`
---
| 端点 | 方法 | 功能 |
|------|------|------|
| `/api/move-element` | POST | 移动元素 |
| `/api/insert-element` | POST | 插入新元素 |
| `/api/delete-element` | POST | 删除元素 |
| `/api/element-tree` | GET | 获取页面结构 |
| `/api/component-props` | GET | 获取组件属性 |
| `/api/update-props` | POST | 更新组件属性 |
## 📜 License
## 📚 文档
- [项目上下文](./项目上下文.md) - AI协作上下文
- [项目设计文档](./项目设计文档.md) - 详细技术设计
- [开发指南](./DEVELOPMENT.md) - 开发规范与扩展指南
## 🛠️ 技术栈
**前端**
- Vue 3.5 (Composition API)
- TypeScript
- Vite 7.3
- Pinia 3.0
- Element Plus
**后端**
- Node.js
- Express
- @vue/compiler-sfc
- @vue/compiler-dom
## 📄 License
MIT License
---
<p align="center">
<strong>🚀 Powered by Qoder AI</strong>
</p>