213 lines
5.4 KiB
Markdown
213 lines
5.4 KiB
Markdown
# Fauto Design - Vue页面可视化设计器
|
||
|
||
<p align="center">
|
||
<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">
|
||
<img src="https://img.shields.io/badge/License-MIT-yellow?style=flat-square" alt="MIT License">
|
||
</p>
|
||
|
||
## 📖 简介
|
||
|
||
**Fauto Design** 是一个基于 Vue3 的可视化页面设计器，通过拖拽操作直接编辑真实的Vue源文件，实现**所见即所得**的低代码开发体验。
|
||
|
||
### ✨ 特性
|
||
|
||
- 🎯 **源码级编辑** - 拖拽操作直接修改Vue文件，支持热更新
|
||
- 🔧 **非侵入式设计** - 无需修改业务页面代码即可实现可视化编辑
|
||
- 🎨 **智能层级选择** - 键盘方向键精准切换嵌套元素层级
|
||
- 📝 **元数据编辑** - 可视化修改组件属性（宽度、颜色、尺寸等）
|
||
- 🌳 **结构树视图** - 清晰展示页面el-row/el-col结构
|
||
- 🔄 **多视图联动** - 设计中心、结构树、属性面板实时同步
|
||
|
||
## 🚀 快速开始
|
||
|
||
### 环境要求
|
||
|
||
- Node.js >= 18
|
||
- npm >= 9
|
||
|
||
### 安装与运行
|
||
|
||
```bash
|
||
# 克隆项目
|
||
git clone <repository-url>
|
||
cd fauto-design
|
||
|
||
# 启动前端
|
||
cd draggable-panels
|
||
npm install
|
||
npm run dev
|
||
|
||
# 新开终端，启动后端
|
||
cd vue-template-service
|
||
npm install
|
||
node src/index.js
|
||
```
|
||
|
||
### 访问设计器
|
||
|
||
```
|
||
http://localhost:5173/draggable
|
||
```
|
||
|
||
## 📸 功能演示
|
||
|
||
### 基本操作流程
|
||
|
||
1. **选择页面** - 在左侧"页面管理"中选择要编辑的Vue文件
|
||
2. **拖拽组件** - 从"设计组件列表"拖拽组件到设计区域
|
||
3. **调整位置** - 使用↑↓键切换层级，选择放置方向
|
||
4. **编辑属性** - 点击组件，在"元数据"面板编辑属性
|
||
5. **删除元素** - 右键菜单、Del键或点击删除图标
|
||
|
||
### 键盘快捷键
|
||
|
||
| 快捷键 | 功能 |
|
||
|--------|------|
|
||
| ↑ | 选择父级元素 |
|
||
| ↓ | 选择子级元素 |
|
||
| Delete | 删除选中元素 |
|
||
| Esc | 取消拖拽操作 |
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
fauto-design/
|
||
├── draggable-panels/ # 前端项目
|
||
│ ├── src/
|
||
│ │ ├── fauto/ # 设计器核心
|
||
│ │ │ ├── components/ # UI组件
|
||
│ │ │ ├── materials/ # 物料组件
|
||
│ │ │ ├── designComponents/ # 设计组件库
|
||
│ │ │ ├── plugins/ # 插件系统
|
||
│ │ │ └── stores/ # 状态管理
|
||
│ │ └── views/ # 示例页面
|
||
│ └── vite.config.ts
|
||
│
|
||
└── vue-template-service/ # 后端服务
|
||
└── src/
|
||
├── index.js # API入口
|
||
└── services/
|
||
└── templateService.js # 模板解析
|
||
```
|
||
|
||
## 🔌 设计组件
|
||
|
||
内置设计组件：
|
||
|
||
| 组件 | 描述 |
|
||
|------|------|
|
||
| 输入框 (TextInput) | 文本输入表单组件 |
|
||
| 单选器 (RadioSelect) | 单选按钮组组件 |
|
||
| 表格 (GridTable) | 数据表格组件 |
|
||
|
||
### 添加自定义设计组件
|
||
|
||
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"
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
3. 添加模板文件 `template.html`：
|
||
```html
|
||
<el-col :span="12">
|
||
<div class="design-component" data-component="我的组件">
|
||
<!-- 组件内容 -->
|
||
</div>
|
||
</el-col>
|
||
```
|
||
|
||
## 📋 Vue页面规范
|
||
|
||
设计器要求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文档
|
||
|
||
后端服务运行在 `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 | 更新组件属性 |
|
||
|
||
## 📚 文档
|
||
|
||
- [项目上下文](./项目上下文.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
|
||
|
||
## 👤 作者
|
||
|
||
- **QQ**: 1040079213
|
||
|
||
欢迎交流讨论！如有问题或建议，请通过QQ联系我。
|
||
|
||
## 🤝 致谢
|
||
|
||
本项目代码由 **Qoder (AI Assistant)** 编写实现，基于作者的创意设计和需求规范。
|
||
|
||
这是一次人机协作的实践：
|
||
- 💡 **创意与架构**: 项目作者
|
||
- 💻 **代码实现**: Qoder
|
||
- 🔄 **迭代优化**: 共同完成
|
||
|
||
感谢AI时代让这种协作成为可能。
|
||
|
||
## 📄 License
|
||
|
||
[MIT License](./LICENSE)
|
||
|
||
Copyright (c) 2026 Fauto Design
|