ai牛逼

2026-01-20 21:53:09 +08:00
parent 4a90340ab3
commit bfa4e3107f
23 changed files with 2154 additions and 592 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,166 @@
+# 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>