wfz/fauto-design

Fork 0

Files

wfz 842a132ec6 ai牛逼

2026-01-20 22:07:05 +08:00

4.9 KiB

Raw Blame History

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

📖 简介

Fauto Design 是一个基于 Vue3 的可视化页面设计器，通过拖拽操作直接编辑真实的Vue源文件，实现所见即所得的低代码开发体验。

✨ 特性

🎯 源码级编辑 - 拖拽操作直接修改Vue文件，支持热更新
🔧 非侵入式设计 - 无需修改业务页面代码即可实现可视化编辑
🎨 智能层级选择 - 键盘方向键精准切换嵌套元素层级
📝 元数据编辑 - 可视化修改组件属性（宽度、颜色、尺寸等）
🌳 结构树视图 - 清晰展示页面el-row/el-col结构
🔄 多视图联动 - 设计中心、结构树、属性面板实时同步

🚀 快速开始

环境要求

Node.js >= 18
npm >= 9

安装与运行

# 克隆项目
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

📸 功能演示

基本操作流程

选择页面 - 在左侧"页面管理"中选择要编辑的Vue文件
拖拽组件 - 从"设计组件列表"拖拽组件到设计区域
调整位置 - 使用↑↓键切换层级，选择放置方向
编辑属性 - 点击组件，在"元数据"面板编辑属性
删除元素 - 右键菜单、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)	数据表格组件

添加自定义设计组件

在 draggable-panels/src/fauto/designComponents/ 创建目录
添加配置文件 index.json：

{
  "id": "MyComponent",
  "name": "我的组件",
  "icon": "🎯",
  "description": "组件描述",
  "defaultSpan": 12,
  "metadata": {
    "span": {
      "label": "宽度",
      "type": "number",
      "min": 1,
      "max": 24,
      "target": "el-col",
      "attr": ":span"
    }
  }
}

添加模板文件 template.html：

<el-col :span="12">
  <div class="design-component" data-component="我的组件">
    <!-- 组件内容 -->
  </div>
</el-col>

📋 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	更新组件属性

📚 文档

项目上下文 - AI协作上下文
项目设计文档 - 详细技术设计
开发指南 - 开发规范与扩展指南

🛠️ 技术栈

前端

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

4.9 KiB Raw Blame History Unescape Escape