67cfbeb572
AGENT.md、README.md、ARCHITECTURE.md、ROADMAP.md 已根据最新代码更新： - 补充 DTO 层、统一返回体、全局异常处理、审计自动填充等已完成项 - 更新前端控制台架构描述与页面实现状态 - 调整 RAG 模块状态描述（元数据层已完成，业务闭环待建设） - 移除 docs 目录的 .gitignore 排除规则 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
93 lines
3.5 KiB
Markdown
93 lines
3.5 KiB
Markdown
# 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` 做基础验证
|