docs: 添加 Vue Demo 前端开发参考说明

进度报告.md

@@ -555,7 +555,28 @@ python-services/
     └── requirements.txt
 
 frontend/
-└── 灵越智报_完整交互版.html  # 前端交互原型
+├── 灵越智报_完整交互版.html  # 前端交互原型（HTML 版）
+└── vue-demo/                 # Vue 3 前端 Demo（可作为正式前端参考）
+    ├── src/
+    │   ├── api/              # API 封装（axios）
+    │   │   └── index.js      # templateApi, authApi, generationApi 等
+    │   ├── assets/
+    │   │   └── main.scss     # 全局样式（变量高亮颜色等）
+    │   ├── router/
+    │   │   └── index.js      # 路由配置 + 登录守卫
+    │   ├── stores/
+    │   │   └── template.js   # Pinia 状态管理
+    │   └── views/
+    │       ├── Login.vue           # 登录页
+    │       ├── Register.vue        # 注册页
+    │       ├── Home.vue            # 首页（统计卡片）
+    │       ├── Templates.vue       # 模板列表
+    │       ├── TemplateDetail.vue  # 模板详情
+    │       ├── Editor.vue          # 模板编辑器（变量标记）
+    │       ├── Generations.vue     # 生成任务列表
+    │       └── GenerationDetail.vue # 生成任务详情
+    ├── vite.config.js        # Vite 配置（API 代理）
+    └── package.json          # 依赖配置
 
 database/
 └── migrations/             # 数据库迁移脚本
@@ -577,11 +598,87 @@ database/
 | OCR | PaddleOCR | ✅ |
 | 图数据库 | PostgreSQL + **Neo4j 4.4** | ✅ |
 | 文档解析 | Apache POI（Word 结构化）| ✅ |
-| 前端 | HTML 交互原型 | ✅ |
+| 前端原型 | HTML 交互原型 | ✅ |
+| 前端 Demo | **Vue 3 + Element Plus** | ✅ |
 | 前端框架 | Flutter Web（待开发）| ⏳ |
 
 ---
 
+## 🖥️ 前端开发参考（Vue Demo）
+
+虽然最终前端计划使用 Flutter Web，但 `frontend/vue-demo/` 可以作为前端开发的参考：
+
+### 技术栈
+- **Vue 3** + Composition API
+- **Vite** 构建工具
+- **Element Plus** UI 组件库
+- **Pinia** 状态管理
+- **Vue Router** 路由（含登录守卫）
+- **Axios** HTTP 客户端
+- **Sass** 样式预处理
+
+### 已实现功能
+| 页面 | 功能 | 文件 |
+|------|------|------|
+| 登录页 | 用户名/邮箱+密码登录、记住我 | `Login.vue` |
+| 注册页 | 用户名/邮箱/密码注册、表单验证 | `Register.vue` |
+| 首页 | 统计卡片（从API获取）、推荐模板 | `Home.vue` |
+| 模板列表 | 搜索筛选、创建/编辑/删除模板 | `Templates.vue` |
+| 模板详情 | 模板信息、变量列表、来源文件 | `TemplateDetail.vue` |
+| 编辑器 | 变量标记、分类管理、右键菜单 | `Editor.vue` |
+| 生成任务列表 | 任务状态、执行/确认/下载 | `Generations.vue` |
+| 生成任务详情 | 变量提取结果、编辑确认 | `GenerationDetail.vue` |
+
+### API 封装
+```javascript
+// 模板 API
+templateApi.list(page, size)
+templateApi.getById(id)
+templateApi.create(data)
+templateApi.update(id, data)
+templateApi.delete(id)
+templateApi.publish(id)
+templateApi.getStats()
+
+// 认证 API
+authApi.login({ usernameOrEmail, password })
+authApi.register({ username, email, password, confirmPassword })
+authApi.logout()
+authApi.getCurrentUser()
+
+// 变量 API
+variableApi.list(templateId)
+variableApi.listGrouped(templateId)
+variableApi.add(templateId, data)
+
+// 生成任务 API
+generationApi.list()
+generationApi.create(data)
+generationApi.execute(id)
+generationApi.confirm(id)
+```
+
+### 启动方式
+```bash
+cd frontend/vue-demo
+yarn install
+yarn dev
+
+# 连接远程服务器
+API_SERVER=http://47.101.133.94:18520 yarn dev
+```
+
+### 变量类别配色（与后端 Variable.category 对应）
+```scss
+.entity   { background: rgba(24, 144, 255, 0.15); }  // 蓝色 - 核心实体
+.concept  { background: rgba(114, 46, 209, 0.15); }  // 紫色 - 概念/技术
+.data     { background: rgba(82, 196, 26, 0.15); }   // 绿色 - 数据/指标
+.location { background: rgba(250, 173, 20, 0.15); }  // 橙色 - 地点/组织
+.asset    { background: rgba(235, 47, 150, 0.15); }  // 粉色 - 资源模板
+```
+
+---
+
 ## 📅 里程碑
 
 - **M1（2月10日）**：第一阶段完成，核心流程跑通