common_agent/docs/superpowers/plans/2026-05-19-vue3-frontend-framework.md

Vue3 Frontend Framework Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: 在当前仓库根目录下新增 frontend/ Vue3 前端工程，形成可独立运行的前后端分离管理台骨架。

Architecture: 前端采用 Vite + Vue 3 + TypeScript + Vue Router + Pinia + Axios，以 frontend/ 作为独立工程目录。页面层按“管理台主布局 + 模块页面”组织，接口请求按模块拆到 api/，统一解析后端 RequestResult<T> 返回体，并通过开发代理转发到 Spring Boot 后端。

Tech Stack: Vue 3、TypeScript、Vite、Vue Router、Pinia、Axios、CSS Variables

---

Task 1: 初始化前端工程目录和基础依赖

Files:

• Create: frontend/package.json

• Create: frontend/tsconfig.json

• Create: frontend/tsconfig.node.json

• Create: frontend/vite.config.ts

• Create: frontend/index.html

• Create: frontend/.gitignore

• 建立前端工程元数据、脚本和 Vite 配置

• 配置开发服务器代理到后端 /api

• 固定 TypeScript 和构建入口

Task 2: 建立应用入口与全局框架

Files:

• Create: frontend/src/main.ts

• Create: frontend/src/App.vue

• Create: frontend/src/styles/reset.css

• Create: frontend/src/styles/theme.css

• Create: frontend/src/styles/global.css

• 注册 Router 与 Pinia

• 建立全局样式、主题变量和基础页面容器

• 保证桌面与移动端都能正常加载

Task 3: 建立路由、布局和导航骨架

Files:

• Create: frontend/src/router/index.ts

• Create: frontend/src/layouts/AdminLayout.vue

• Create: frontend/src/components/app/AppSidebar.vue

• Create: frontend/src/components/app/AppHeader.vue

• Create: frontend/src/components/app/AppShellCard.vue

• 建立管理台布局

• 配置仪表盘、系统枚举、附件管理、RAG知识库、RAG文档路由

• 建立侧边导航和顶部栏

Task 4: 建立接口层与通用类型

Files:

• Create: frontend/src/types/http.ts

• Create: frontend/src/types/sys-enum.ts

• Create: frontend/src/types/attachment.ts

• Create: frontend/src/types/rag.ts

• Create: frontend/src/api/http.ts

• Create: frontend/src/api/sys-enum.ts

• Create: frontend/src/api/attachment.ts

• Create: frontend/src/api/rag.ts

• 建立 RequestResult<T> 前端类型

• 建立 Axios 实例和统一响应解包

• 按模块拆分 API 请求方法

Task 5: 建立页面骨架与基础交互

Files:

• Create: frontend/src/views/dashboard/DashboardView.vue

• Create: frontend/src/views/sys-enum/SysEnumView.vue

• Create: frontend/src/views/attachment/AttachmentView.vue

• Create: frontend/src/views/rag-store/RagStoreView.vue

• Create: frontend/src/views/rag-document/RagDocumentView.vue

• Create: frontend/src/components/common/PageSection.vue

• Create: frontend/src/components/common/EmptyState.vue

• 建立四个业务页面的查询区、状态卡片和表格占位

• 系统枚举、RAG 页面接入真实查询请求

• 附件页面预留上传表单和结果展示

Task 6: 补充工程说明与验证

Files:

• Modify: README.md

• Create: frontend/README.md

• 追加前端启动说明

• 记录 Node 版本、运行命令和代理约定

• 执行 npm install、npm run build 做基础验证