# 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">
</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

## 📄 License

MIT License