|
|
# RuoYi-Vue 前端现代化重构实施计划
|
|
|
|
|
|
> **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.
|
|
|
|
|
|
---
|
|
|
|
|
|
```yaml
|
|
|
---
|
|
|
change: refactor-frontend-modernization
|
|
|
design-doc: docs/superpowers/specs/2026-06-28-frontend-modernization-design.md
|
|
|
base-ref: 1c7d266b7f70eae46abd1f011e443ac54b4cc7f4
|
|
|
---
|
|
|
```
|
|
|
|
|
|
**Goal:** 将 RuoYi-Vue 前端从 Vue2 + Vue CLI + Element UI + Vuex 升级到 Vue3 + Vite + TypeScript + Element Plus + Pinia，同时参考 demo-dashboard-heatmap.html 的深色主题和数据可视化风格，保持与现有后端 API 完全兼容。
|
|
|
|
|
|
**Architecture:** 采用渐进式迁移策略，先在独立目录 (`ruoyi-ui-next/`) 构建新项目，按模块逐步迁移组件和页面，确保后端零改动。
|
|
|
|
|
|
**Tech Stack:**
|
|
|
| 类别 | 旧技术栈 | 新技术栈 |
|
|
|
|------|---------|---------|
|
|
|
| 框架 | Vue 2.6.12 | Vue 3.5+ |
|
|
|
| 构建 | Vue CLI 4.4.6 | Vite 6+ |
|
|
|
| 语言 | JavaScript | TypeScript 5+ |
|
|
|
| UI | Element UI 2.15.6 | Element Plus 2.9+ |
|
|
|
| 路由 | Vue Router 3.4.9 | Vue Router 4+ |
|
|
|
| 状态 | Vuex 3.6.0 | Pinia 2.3+ |
|
|
|
| HTTP | Axios 0.24.0 | Axios 1.7+ |
|
|
|
| 图表 | ECharts 4.9.0 | ECharts 5.5+ |
|
|
|
| CSS | Sass 1.32 | SCSS + CSS Variables |
|
|
|
|
|
|
## Global Constraints
|
|
|
|
|
|
- **新项目目录**: `ruoyi-ui-next/`（与 `ruoyi-ui/` 并存，不影响现有前端）
|
|
|
- **后端兼容**: 所有 API 路径、请求格式、响应格式保持完全一致
|
|
|
- **权限兼容**: 沿用 `Admin-Token` Cookie 认证和 `*:*:*` 权限标识体系
|
|
|
- **深色主题默认**: 默认深色主题，配色方案源自 `data/demo-dashboard-heatmap.html`
|
|
|
- **TypeScript 严格模式**: 启用 `strict: true`，所有新增代码必须有类型标注
|
|
|
- **代码风格**: ESLint + Prettier + Vue 3 `<script setup>` 语法
|
|
|
- **组件命名**: PascalCase 文件名，kebab-case 标签名
|
|
|
|
|
|
---
|
|
|
|
|
|
## Task 1: 项目初始化
|
|
|
|
|
|
**目标**: 使用 Vite 创建 Vue3 + TypeScript 项目骨架，配置开发工具链
|
|
|
|
|
|
**Files:**
|
|
|
- Create: `ruoyi-ui-next/package.json`
|
|
|
- Create: `ruoyi-ui-next/vite.config.ts`
|
|
|
- Create: `ruoyi-ui-next/tsconfig.json`
|
|
|
- Create: `ruoyi-ui-next/tsconfig.node.json`
|
|
|
- Create: `ruoyi-ui-next/index.html`
|
|
|
- Create: `ruoyi-ui-next/.env.development`
|
|
|
- Create: `ruoyi-ui-next/.env.production`
|
|
|
- Create: `ruoyi-ui-next/.eslintrc.cjs`
|
|
|
- Create: `ruoyi-ui-next/.prettierrc`
|
|
|
- Create: `ruoyi-ui-next/.editorconfig`
|
|
|
- Create: `ruoyi-ui-next/.gitignore`
|
|
|
- Create: `ruoyi-ui-next/src/main.ts`
|
|
|
- Create: `ruoyi-ui-next/src/App.vue`
|
|
|
- Reference: `ruoyi-ui/package.json`（依赖参考）
|
|
|
- Reference: `ruoyi-ui/.env.development`（环境变量参考）
|
|
|
|
|
|
**Description:** 创建全新 Vite + Vue3 + TypeScript 项目，配置完整的开发工具链和项目结构
|
|
|
|
|
|
**Dependencies:** 无
|
|
|
|
|
|
### Step 1: 初始化项目结构
|
|
|
|
|
|
```
|
|
|
ruoyi-ui-next/
|
|
|
├── public/
|
|
|
│ └── favicon.ico
|
|
|
├── src/
|
|
|
│ ├── api/ # API 调用层
|
|
|
│ │ ├── index.ts # 通用 API
|
|
|
│ │ ├── login.ts # 登录/认证
|
|
|
│ │ ├── menu.ts # 路由菜单
|
|
|
│ │ ├── system/ # 系统管理 API
|
|
|
│ │ │ ├── user.ts
|
|
|
│ │ │ ├── role.ts
|
|
|
│ │ │ ├── menu.ts
|
|
|
│ │ │ ├── dept.ts
|
|
|
│ │ │ ├── config.ts
|
|
|
│ │ │ ├── notice.ts
|
|
|
│ │ │ ├── post.ts
|
|
|
│ │ │ └── dict/
|
|
|
│ │ │ ├── data.ts
|
|
|
│ │ │ └── type.ts
|
|
|
│ │ ├── monitor/ # 系统监控 API
|
|
|
│ │ │ ├── cache.ts
|
|
|
│ │ │ ├── job.ts
|
|
|
│ │ │ ├── logininfor.ts
|
|
|
│ │ │ ├── online.ts
|
|
|
│ │ │ ├── operlog.ts
|
|
|
│ │ │ └── server.ts
|
|
|
│ │ ├── booksystem/ # 账本系统 API
|
|
|
│ │ │ ├── account.ts
|
|
|
│ │ │ ├── book.ts
|
|
|
│ │ │ ├── operations.ts
|
|
|
│ │ │ ├── statistics.ts
|
|
|
│ │ │ ├── statistictotal.ts
|
|
|
│ │ │ └── statisticremain.ts
|
|
|
│ │ └── stocksystem/ # 股票系统 API
|
|
|
│ │ ├── stocks.ts
|
|
|
│ │ ├── stockbasic.ts
|
|
|
│ │ ├── stockindex.ts
|
|
|
│ │ ├── financial.ts
|
|
|
│ │ ├── trends.ts
|
|
|
│ │ ├── trendStocks.ts
|
|
|
│ │ ├── newrecord.ts
|
|
|
│ │ ├── stockslimit.ts
|
|
|
│ │ └── book.ts
|
|
|
│ ├── assets/
|
|
|
│ │ ├── icons/svg/ # SVG 图标（从 ruoyi-ui 复制全部）
|
|
|
│ │ ├── styles/ # 全局样式
|
|
|
│ │ │ ├── index.scss
|
|
|
│ │ │ ├── variables.scss
|
|
|
│ │ │ ├── dark-theme.scss
|
|
|
│ │ │ └── transition.scss
|
|
|
│ │ └── images/ # 静态图片
|
|
|
│ ├── components/ # 全局通用组件
|
|
|
│ │ ├── SvgIcon/
|
|
|
│ │ ├── DictTag/
|
|
|
│ │ ├── Pagination/
|
|
|
│ │ ├── Breadcrumb/
|
|
|
│ │ ├── Hamburger/
|
|
|
│ │ ├── Screenfull/
|
|
|
│ │ ├── SizeSelect/
|
|
|
│ │ ├── ThemePicker/
|
|
|
│ │ ├── TopNav/
|
|
|
│ │ ├── RightToolbar/
|
|
|
│ │ ├── Editor/
|
|
|
│ │ ├── FileUpload/
|
|
|
│ │ ├── ImageUpload/
|
|
|
│ │ ├── ImagePreview/
|
|
|
│ │ ├── IconSelect/
|
|
|
│ │ ├── HeaderSearch/
|
|
|
│ │ ├── Crontab/
|
|
|
│ │ ├── ParentView/
|
|
|
│ │ └── iFrame/
|
|
|
│ ├── components-business/ # 业务组件（解耦通用组件）
|
|
|
│ │ ├── Kdialog/
|
|
|
│ │ ├── NegativeDialog/
|
|
|
│ │ └── TrendStocksDialog/
|
|
|
│ ├── layout/ # 布局框架
|
|
|
│ │ ├── index.vue
|
|
|
│ │ └── components/
|
|
|
│ │ ├── AppMain.vue
|
|
|
│ │ ├── Navbar.vue
|
|
|
│ │ ├── Sidebar/
|
|
|
│ │ ├── TagsView/
|
|
|
│ │ ├── Settings/
|
|
|
│ │ └── InnerLink/
|
|
|
│ ├── router/
|
|
|
│ │ └── index.ts
|
|
|
│ ├── stores/ # Pinia 状态管理
|
|
|
│ │ ├── index.ts
|
|
|
│ │ ├── modules/
|
|
|
│ │ │ ├── app.ts
|
|
|
│ │ │ ├── user.ts
|
|
|
│ │ │ ├── permission.ts
|
|
|
│ │ │ ├── tagsView.ts
|
|
|
│ │ │ └── settings.ts
|
|
|
│ │ └── types.ts
|
|
|
│ ├── views/ # 页面视图
|
|
|
│ │ ├── dashboard/
|
|
|
│ │ ├── system/
|
|
|
│ │ ├── booksystem/
|
|
|
│ │ ├── stocksystem/
|
|
|
│ │ ├── monitor/
|
|
|
│ │ ├── tool/
|
|
|
│ │ ├── error/
|
|
|
│ │ ├── login.vue
|
|
|
│ │ ├── register.vue
|
|
|
│ │ └── index.vue
|
|
|
│ ├── utils/ # 工具函数
|
|
|
│ │ ├── request.ts
|
|
|
│ │ ├── auth.ts
|
|
|
│ │ ├── permission.ts
|
|
|
│ │ ├── validate.ts
|
|
|
│ │ ├── errorCode.ts
|
|
|
│ │ ├── ruoyi.ts
|
|
|
│ │ ├── dict/
|
|
|
│ │ └── types/
|
|
|
│ ├── directives/ # 自定义指令
|
|
|
│ │ ├── index.ts
|
|
|
│ │ └── permission.ts
|
|
|
│ ├── plugins/ # 插件（从 ruoyi-ui 重构）
|
|
|
│ │ ├── index.ts
|
|
|
│ │ ├── auth.ts
|
|
|
│ │ ├── cache.ts
|
|
|
│ │ ├── modal.ts
|
|
|
│ │ └── tab.ts
|
|
|
│ ├── types/ # TypeScript 类型定义
|
|
|
│ │ ├── api.d.ts
|
|
|
│ │ ├── store.d.ts
|
|
|
│ │ ├── router.d.ts
|
|
|
│ │ └── global.d.ts
|
|
|
│ └── permission.ts # 路由权限守卫
|
|
|
├── index.html
|
|
|
├── vite.config.ts
|
|
|
├── tsconfig.json
|
|
|
├── package.json
|
|
|
└── .env.*
|
|
|
```
|
|
|
|
|
|
- [ ] **Step 1.1: 创建 package.json**
|
|
|
|
|
|
```json
|
|
|
{
|
|
|
"name": "ruoyi-ui-next",
|
|
|
"version": "4.0.0",
|
|
|
"private": true,
|
|
|
"type": "module",
|
|
|
"scripts": {
|
|
|
"dev": "vite",
|
|
|
"build": "vue-tsc --noEmit && vite build",
|
|
|
"build:prod": "vite build --mode production",
|
|
|
"preview": "vite preview",
|
|
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx --fix",
|
|
|
"format": "prettier --write src/"
|
|
|
},
|
|
|
"dependencies": {
|
|
|
"vue": "^3.5.0",
|
|
|
"vue-router": "^4.4.0",
|
|
|
"pinia": "^2.3.0",
|
|
|
"pinia-plugin-persistedstate": "^4.0.0",
|
|
|
"axios": "^1.7.0",
|
|
|
"element-plus": "^2.9.0",
|
|
|
"@element-plus/icons-vue": "^2.3.0",
|
|
|
"echarts": "^5.5.0",
|
|
|
"nprogress": "^0.2.0",
|
|
|
"js-cookie": "^3.0.5",
|
|
|
"jsencrypt": "^3.3.0",
|
|
|
"lodash-es": "^4.17.21",
|
|
|
"dayjs": "^1.11.0"
|
|
|
},
|
|
|
"devDependencies": {
|
|
|
"@vitejs/plugin-vue": "^5.2.0",
|
|
|
"vite": "^6.0.0",
|
|
|
"vite-plugin-svg-icons": "^2.0.1",
|
|
|
"vue-tsc": "^2.2.0",
|
|
|
"typescript": "^5.7.0",
|
|
|
"sass": "^1.83.0",
|
|
|
"@types/node": "^22.0.0",
|
|
|
"@types/nprogress": "^0.2.3",
|
|
|
"@types/js-cookie": "^3.0.6",
|
|
|
"@types/lodash-es": "^4.17.12",
|
|
|
"eslint": "^9.0.0",
|
|
|
"@eslint/js": "^9.0.0",
|
|
|
"eslint-plugin-vue": "^9.0.0",
|
|
|
"typescript-eslint": "^8.0.0",
|
|
|
"prettier": "^3.4.0",
|
|
|
"unplugin-auto-import": "^0.18.0",
|
|
|
"unplugin-vue-components": "^0.27.0"
|
|
|
}
|
|
|
}
|
|
|
```
|
|
|
|
|
|
- [ ] **Step 1.2: 创建 vite.config.ts**
|
|
|
|
|
|
```typescript
|
|
|
import { defineConfig, loadEnv } from 'vite'
|
|
|
import vue from '@vitejs/plugin-vue'
|
|
|
import { resolve } from 'path'
|
|
|
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
|
|
|
import AutoImport from 'unplugin-auto-import/vite'
|
|
|
import Components from 'unplugin-vue-components/vite'
|
|
|
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
|
|
|
|
|
export default defineConfig(({ mode }) => {
|
|
|
const env = loadEnv(mode, process.cwd())
|
|
|
return {
|
|
|
plugins: [
|
|
|
vue(),
|
|
|
createSvgIconsPlugin({
|
|
|
iconDirs: [resolve(__dirname, 'src/assets/icons/svg')],
|
|
|
symbolId: 'icon-[dir]-[name]',
|
|
|
}),
|
|
|
AutoImport({
|
|
|
imports: ['vue', 'vue-router', 'pinia'],
|
|
|
resolvers: [ElementPlusResolver()],
|
|
|
dts: 'src/types/auto-imports.d.ts',
|
|
|
}),
|
|
|
Components({
|
|
|
resolvers: [ElementPlusResolver()],
|
|
|
dts: 'src/types/components.d.ts',
|
|
|
}),
|
|
|
],
|
|
|
resolve: {
|
|
|
alias: {
|
|
|
'@': resolve(__dirname, 'src'),
|
|
|
},
|
|
|
extensions: ['.ts', '.js', '.vue', '.json'],
|
|
|
},
|
|
|
server: {
|
|
|
port: 80,
|
|
|
host: '0.0.0.0',
|
|
|
open: true,
|
|
|
proxy: {
|
|
|
'/dev-api': {
|
|
|
target: env.VITE_APP_BASE_URL || 'http://localhost:8080',
|
|
|
changeOrigin: true,
|
|
|
rewrite: (path) => path.replace(/^\/dev-api/, ''),
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
build: {
|
|
|
target: 'es2015',
|
|
|
outDir: 'dist',
|
|
|
sourcemap: false,
|
|
|
rollupOptions: {
|
|
|
output: {
|
|
|
manualChunks: {
|
|
|
'element-plus': ['element-plus'],
|
|
|
echarts: ['echarts'],
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
css: {
|
|
|
preprocessorOptions: {
|
|
|
scss: {
|
|
|
additionalData: `@use "@/assets/styles/variables.scss" as *;`,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
}
|
|
|
})
|
|
|
```
|
|
|
|
|
|
- [ ] **Step 1.3: 创建 tsconfig.json**
|
|
|
|
|
|
```json
|
|
|
{
|
|
|
"compilerOptions": {
|
|
|
"target": "ES2020",
|
|
|
"module": "ESNext",
|
|
|
"moduleResolution": "bundler",
|
|
|
"strict": true,
|
|
|
"jsx": "preserve",
|
|
|
"importHelpers": true,
|
|
|
"experimentalDecorators": true,
|
|
|
"skipLibCheck": true,
|
|
|
"esModuleInterop": true,
|
|
|
"allowSyntheticDefaultImports": true,
|
|
|
"forceConsistentCasingInFileNames": true,
|
|
|
"useDefineForClassFields": true,
|
|
|
"sourceMap": true,
|
|
|
"baseUrl": ".",
|
|
|
"paths": {
|
|
|
"@/*": ["src/*"]
|
|
|
},
|
|
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
|
|
"types": ["vite/client"]
|
|
|
},
|
|
|
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"],
|
|
|
"exclude": ["node_modules", "dist"]
|
|
|
}
|
|
|
```
|
|
|
|
|
|
- [ ] **Step 1.4: 创建环境变量文件**
|
|
|
|
|
|
`.env.development`:
|
|
|
```
|
|
|
VITE_APP_TITLE=摸金分析系统
|
|
|
VITE_APP_BASE_API=/dev-api
|
|
|
VITE_APP_BASE_URL=http://localhost:8080
|
|
|
```
|
|
|
|
|
|
`.env.production`:
|
|
|
```
|
|
|
VITE_APP_TITLE=摸金分析系统
|
|
|
VITE_APP_BASE_API=/prod-api
|
|
|
VITE_APP_BASE_URL=
|
|
|
```
|
|
|
|
|
|
- [ ] **Step 1.5: 创建 .eslintrc.cjs + .prettierrc**
|
|
|
|
|
|
配置 ESLint 规则：
|
|
|
- `@typescript-eslint/strict`
|
|
|
- `vue/vue3-recommended`
|
|
|
- Prettier 集成
|
|
|
|
|
|
Prettier 配置：
|
|
|
- 2 空格缩进
|
|
|
- 单引号
|
|
|
- 末尾无分号
|
|
|
- 行宽 100
|
|
|
|
|
|
- [ ] **Step 1.6: 创建项目入口文件**
|
|
|
|
|
|
`src/main.ts`:
|
|
|
- 创建 Vue App
|
|
|
- 注册 Element Plus（含中文语言包）
|
|
|
- 注册 Pinia
|
|
|
- 注册 Vue Router
|
|
|
- 注册全局指令
|
|
|
- 注册全局插件
|
|
|
- 挂载应用
|
|
|
|
|
|
`src/App.vue`:
|
|
|
- 根组件，仅包含 `<router-view />`
|
|
|
|
|
|
- [ ] **Step 1.7: 复制 SVG 图标资源**
|
|
|
|
|
|
从 `ruoyi-ui/src/assets/icons/svg/` 复制所有 SVG 文件到 `ruoyi-ui-next/src/assets/icons/svg/`
|
|
|
|
|
|
**验收标准:**
|
|
|
- [ ] `npm install` 无报错
|
|
|
- [ ] `npm run dev` 成功启动，访问 `http://localhost` 显示空白页面（仅 App.vue）
|
|
|
- [ ] TypeScript 编译通过（`vue-tsc --noEmit`）
|
|
|
- [ ] ESLint 检查通过（`npm run lint`）
|
|
|
- [ ] 项目结构与规范一致
|
|
|
- [ ] `ruoyi-ui/` 不受任何影响
|
|
|
|
|
|
---
|
|
|
|
|
|
## Task 2: 核心架构搭建
|
|
|
|
|
|
**目标**: 配置 Vue Router 4、Pinia 状态管理、Axios 调用层、权限控制机制
|
|
|
|
|
|
**Files:**
|
|
|
- Create: `ruoyi-ui-next/src/router/index.ts`
|
|
|
- Create: `ruoyi-ui-next/src/stores/index.ts`
|
|
|
- Create: `ruoyi-ui-next/src/stores/modules/app.ts`
|
|
|
- Create: `ruoyi-ui-next/src/stores/modules/user.ts`
|
|
|
- Create: `ruoyi-ui-next/src/stores/modules/permission.ts`
|
|
|
- Create: `ruoyi-ui-next/src/stores/modules/tagsView.ts`
|
|
|
- Create: `ruoyi-ui-next/src/stores/modules/settings.ts`
|
|
|
- Create: `ruoyi-ui-next/src/stores/types.ts`
|
|
|
- Create: `ruoyi-ui-next/src/utils/request.ts`
|
|
|
- Create: `ruoyi-ui-next/src/utils/auth.ts`
|
|
|
- Create: `ruoyi-ui-next/src/utils/permission.ts`
|
|
|
- Create: `ruoyi-ui-next/src/utils/errorCode.ts`
|
|
|
- Create: `ruoyi-ui-next/src/utils/types/api.ts`
|
|
|
- Create: `ruoyi-ui-next/src/types/global.d.ts`
|
|
|
- Create: `ruoyi-ui-next/src/types/store.d.ts`
|
|
|
- Create: `ruoyi-ui-next/src/types/router.d.ts`
|
|
|
- Create: `ruoyi-ui-next/src/directives/index.ts`
|
|
|
- Create: `ruoyi-ui-next/src/directives/permission.ts`
|
|
|
- Create: `ruoyi-ui-next/src/plugins/index.ts`
|
|
|
- Create: `ruoyi-ui-next/src/plugins/auth.ts`
|
|
|
- Create: `ruoyi-ui-next/src/plugins/cache.ts`
|
|
|
- Create: `ruoyi-ui-next/src/plugins/modal.ts`
|
|
|
- Create: `ruoyi-ui-next/src/plugins/tab.ts`
|
|
|
- Create: `ruoyi-ui-next/src/permission.ts`
|
|
|
- Reference: `ruoyi-ui/src/router/index.js`
|
|
|
- Reference: `ruoyi-ui/src/store/modules/*.js`
|
|
|
- Reference: `ruoyi-ui/src/utils/request.js`
|
|
|
- Reference: `ruoyi-ui/src/permission.js`
|
|
|
- Reference: `ruoyi-ui/src/plugins/*.js`
|
|
|
- Reference: `ruoyi-ui/src/directive/`
|
|
|
|
|
|
**Dependencies:** Task 1 完成
|
|
|
|
|
|
### Step 2.1: 配置 TypeScript 类型定义
|
|
|
|
|
|
定义全局类型：
|
|
|
|
|
|
```typescript
|
|
|
// src/types/global.d.ts
|
|
|
interface AjaxResult {
|
|
|
code: number
|
|
|
msg: string
|
|
|
data: any
|
|
|
}
|
|
|
|
|
|
interface TableDataInfo {
|
|
|
code: number
|
|
|
msg: string
|
|
|
total: number
|
|
|
rows: any[]
|
|
|
}
|
|
|
|
|
|
interface MenuOption {
|
|
|
name: string
|
|
|
path: string
|
|
|
hidden?: boolean
|
|
|
redirect?: string
|
|
|
component?: string
|
|
|
alwaysShow?: boolean
|
|
|
meta?: {
|
|
|
title: string
|
|
|
icon?: string
|
|
|
noCache?: boolean
|
|
|
link?: string
|
|
|
}
|
|
|
children?: MenuOption[]
|
|
|
}
|
|
|
```
|
|
|
|
|
|
- [ ] 定义 `AjaxResult` 通用响应类型
|
|
|
- [ ] 定义 `TableDataInfo` 分页响应类型
|
|
|
- [ ] 定义 `MenuOption` 菜单路由类型
|
|
|
- [ ] 定义 `DictDataType` 字典数据类型
|
|
|
- [ ] 定义 `PaginationState` 分页状态类型
|
|
|
|
|
|
### Step 2.2: 配置 Vue Router 4
|
|
|
|
|
|
- [ ] 创建 `router/index.ts`，使用 `createRouter` + `createWebHistory`
|
|
|
- [ ] 配置静态路由（`/login`、`/register`、`/404`、`/401`、首页重定向）
|
|
|
- [ ] 配置动态路由占位（登录后从后端加载）
|
|
|
- [ ] 实现 `loadView` 懒加载函数（统一使用 `() => import()`）
|
|
|
- [ ] 路由类型使用 `RouteRecordRaw`（Vue Router 4）
|
|
|
- [ ] 配置滚动行为 `scrollBehavior`
|
|
|
|
|
|
### Step 2.3: 配置 Pinia 状态管理
|
|
|
|
|
|
替换 Vuex 5 个模块为 Pinia stores：
|
|
|
|
|
|
**app store** (`stores/modules/app.ts`):
|
|
|
- [ ] `sidebar` (opened, withoutAnimation) — 侧边栏状态
|
|
|
- [ ] `device` ('desktop' | 'mobile') — 设备类型
|
|
|
- [ ] `size` ('default' | 'large' | 'small') — 组件尺寸（Element Plus 命名调整）
|
|
|
- [ ] 使用 `pinia-plugin-persistedstate` 持久化到 Cookie/localStorage
|
|
|
|
|
|
**user store** (`stores/modules/user.ts`):
|
|
|
- [ ] `token`, `name`, `avatar`, `roles`, `permissions`
|
|
|
- [ ] Actions: `login()`, `getInfo()`, `logout()`, `fedLogout()`
|
|
|
- [ ] 登录调用 `POST /login`（保持与现有后端一致）
|
|
|
- [ ] Token 存储到 Cookie（键名 `Admin-Token`，与后端一致）
|
|
|
|
|
|
**permission store** (`stores/modules/permission.ts`):
|
|
|
- [ ] `routes`: 完整路由表
|
|
|
- [ ] `addRoutes`: 动态添加的路由
|
|
|
- [ ] `sidebarRouters`: 侧边栏显示的路由
|
|
|
- [ ] Action: `generateRoutes(roles)` — 从后端 `/getRouters` 获取菜单并转换为路由
|
|
|
- [ ] 实现 `filterAsyncRouter` 字符串组件路径转 import 函数
|
|
|
- [ ] 实现权限过滤逻辑
|
|
|
|
|
|
**tagsView store** (`stores/modules/tagsView.ts`):
|
|
|
- [ ] `visitedViews`: 已访问标签页列表
|
|
|
- [ ] `cachedViews`: keep-alive 缓存列表
|
|
|
- [ ] Actions: `addView`, `delView`, `delOthersViews`, `delAllViews`, `delRightTags`, `delLeftTags`
|
|
|
|
|
|
**settings store** (`stores/modules/settings.ts`):
|
|
|
- [ ] `theme`, `sideTheme`, `showSettings`
|
|
|
- [ ] `topNav`, `tagsView`, `fixedHeader`, `sidebarLogo`, `dynamicTitle`
|
|
|
- [ ] 持久化到 localStorage（键名 `layout-setting`）
|
|
|
|
|
|
### Step 2.4: 配置 Axios 调用层
|
|
|
|
|
|
`src/utils/request.ts`:
|
|
|
- [ ] 创建 Axios 实例，`baseURL = import.meta.env.VITE_APP_BASE_API`
|
|
|
- [ ] 设置 `timeout: 60000`
|
|
|
- [ ] 请求拦截器：注入 `Authorization: Bearer {token}`（支持 `isToken: false` 跳过）
|
|
|
- [ ] 请求拦截器：GET 参数序列化（复用 `tansParams` 逻辑）
|
|
|
- [ ] 响应拦截器：解析 `res.data.code`，处理 401/500/其他
|
|
|
- [ ] 401 处理：使用 `ElMessageBox.confirm` → 退出登录 → `router.replace('/')`（修复原 `location.href` 硬跳转问题）
|
|
|
- [ ] 响应拦截器：HTTP 错误处理（Network Error / Timeout / 4xx / 5xx）
|
|
|
- [ ] 导出 `download(url, params, filename)` 方法（blob 下载 + 登录态处理）
|
|
|
|
|
|
### Step 2.5: 配置权限控制
|
|
|
|
|
|
- [ ] **路由守卫** (`src/permission.ts`):
|
|
|
- 白名单检查（`/login`, `/register`, 等）
|
|
|
- Token 验证（从 Cookie 读取 `Admin-Token`）
|
|
|
- 用户信息加载（roles + permissions）
|
|
|
- 动态路由注册（`router.addRoute`）
|
|
|
- 页面标题设置
|
|
|
- [ ] **指令权限** (`src/directives/permission.ts`):
|
|
|
- `v-hasPermi` 指令：检查权限标识
|
|
|
- `v-hasRole` 指令：检查角色
|
|
|
- 支持超级权限 `*:*:*`
|
|
|
- 支持超级角色 `admin`
|
|
|
- [ ] **全局方法** (`src/plugins/auth.ts`):
|
|
|
- `$auth.hasPermi(permission)` 方法
|
|
|
- `$auth.hasRole(role)` 方法
|
|
|
|
|
|
### Step 2.6: 配置插件系统
|
|
|
|
|
|
重构 `ruoyi-ui/src/plugins/` 下的插件：
|
|
|
- [ ] `modal.ts` — 全局弹窗封装（ElMessage, ElMessageBox, ElNotification）
|
|
|
- [ ] `cache.ts` — 缓存封装（localStorage + sessionStorage，带过期支持）
|
|
|
- [ ] `tab.ts` — 标签页操作（切换、关闭、刷新）
|
|
|
- [ ] `auth.ts` — 权限校验方法
|
|
|
- [ ] `index.ts` — 统一注册为 Vue 全局属性
|
|
|
|
|
|
**验收标准:**
|
|
|
- [ ] Pinia DevTools 可查看 5 个 store 状态
|
|
|
- [ ] 访问 `/login` 页面可正常渲染
|
|
|
- [ ] Axios 请求拦截器正确注入 Token
|
|
|
- [ ] 401 响应触发确认弹窗而非硬跳转
|
|
|
- [ ] `v-hasPermi` 指令在元素上正确隐藏/显示
|
|
|
- [ ] 路由守卫阻止未登录访问受保护页面
|
|
|
- [ ] TypeScript 编译零错误
|
|
|
|
|
|
---
|
|
|
|
|
|
## Task 3: 深色主题和 UI 框架
|
|
|
|
|
|
**目标**: 安装配置 Element Plus，实现深色主题系统，配置 CSS 变量
|
|
|
|
|
|
**Files:**
|
|
|
- Create: `ruoyi-ui-next/src/assets/styles/variables.scss`
|
|
|
- Create: `ruoyi-ui-next/src/assets/styles/dark-theme.scss`
|
|
|
- Create: `ruoyi-ui-next/src/assets/styles/index.scss`
|
|
|
- Create: `ruoyi-ui-next/src/assets/styles/element-override.scss`
|
|
|
- Create: `ruoyi-ui-next/src/assets/styles/sidebar.scss`
|
|
|
- Create: `ruoyi-ui-next/src/assets/styles/transition.scss`
|
|
|
- Create: `ruoyi-ui-next/src/assets/styles/btn.scss`
|
|
|
- Reference: `ruoyi-ui/src/assets/styles/` 目录
|
|
|
- Reference: `data/demo-dashboard-heatmap.html`（深色主题配色来源）
|
|
|
|
|
|
**Dependencies:** Task 1, Task 2 完成
|
|
|
|
|
|
### Step 3.1: 安装 Element Plus
|
|
|
|
|
|
- [ ] 确认 `element-plus` 已安装（Task 1 package.json）
|
|
|
- [ ] 配置按需导入（通过 `unplugin-vue-components` 自动按需导入组件）
|
|
|
- [ ] 安装 `@element-plus/icons-vue` 图标库
|
|
|
- [ ] 配置 Element Plus 中文语言包
|
|
|
|
|
|
### Step 3.2: 实现深色主题 CSS 变量
|
|
|
|
|
|
基于 demo-dashboard-heatmap.html 的配色方案：
|
|
|
|
|
|
```scss
|
|
|
// src/assets/styles/variables.scss
|
|
|
|
|
|
// 源自 demo-dashboard-heatmap.html 的深色主题
|
|
|
:root {
|
|
|
// 背景色
|
|
|
--bg-primary: #0d1117; // 最深背景 (--bg0)
|
|
|
--bg-secondary: #161b22; // 侧边栏/顶栏 (--bg1)
|
|
|
--bg-tertiary: #1c2333; // 卡片背景 (--bg2)
|
|
|
--bg-elevated: #2a3040; // 悬浮背景 (--bg3)
|
|
|
|
|
|
// 边框
|
|
|
--border-color: #30363d; // 边框色 (--bd)
|
|
|
|
|
|
// 文字
|
|
|
--text-primary: #e6edf3; // 主文字 (--t1)
|
|
|
--text-secondary: #8b949e; // 次要文字 (--t2)
|
|
|
--text-muted: #6e7681; // 弱化文字 (--tm)
|
|
|
|
|
|
// 功能色
|
|
|
--color-danger: #f85149; // 红色/下跌 (--red)
|
|
|
--color-success: #3fb950; // 绿色/上涨 (--grn)
|
|
|
--color-warning: #d29922; // 橙色 (--org)
|
|
|
--color-info: #58a6ff; // 蓝色 (--blu)
|
|
|
|
|
|
// 热力图排名色阶
|
|
|
--heat-1: #ff4444;
|
|
|
--heat-2: #ff6b6b;
|
|
|
--heat-3: #ff9a76;
|
|
|
--heat-4: #ffa502;
|
|
|
--heat-5: #e3b341;
|
|
|
--heat-6: #e6d34a;
|
|
|
--heat-7: #8bda5e;
|
|
|
--heat-8: #4dd08b;
|
|
|
--heat-9: #36b37e;
|
|
|
--heat-10: #2d9cdb;
|
|
|
|
|
|
// 布局
|
|
|
--sidebar-width: 200px;
|
|
|
--navbar-height: 50px;
|
|
|
--tags-view-height: 34px;
|
|
|
}
|
|
|
```
|
|
|
|
|
|
- [ ] 创建 `variables.scss` 定义所有 CSS 变量
|
|
|
- [ ] 创建 `dark-theme.scss` 包含热力图排名色阶样式
|
|
|
- [ ] 创建 `element-override.scss` 覆盖 Element Plus 默认样式为深色
|
|
|
- [ ] 创建 `index.scss` 整合所有样式文件
|
|
|
- [ ] 创建 `sidebar.scss` 侧边栏专属样式
|
|
|
- [ ] 创建 `transition.scss` 过渡动画样式
|
|
|
- [ ] 创建 `btn.scss` 按钮工具类
|
|
|
|
|
|
### Step 3.3: 覆盖 Element Plus 深色主题
|
|
|
|
|
|
- [ ] 覆盖 `el-menu` 侧边栏菜单背景色和文字色
|
|
|
- [ ] 覆盖 `el-table` 表格背景色和边框色
|
|
|
- [ ] 覆盖 `el-dialog` 弹窗背景色
|
|
|
- [ ] 覆盖 `el-input` / `el-select` / `el-date-picker` 表单组件
|
|
|
- [ ] 覆盖 `el-pagination` 分页组件
|
|
|
- [ ] 覆盖 `el-message-box` / `el-notification`
|
|
|
- [ ] 覆盖 `el-tag` 标签组件
|
|
|
|
|
|
### Step 3.4: 实现主题切换功能
|
|
|
|
|
|
- [ ] 创建 ThemePicker 组件（支持深色/浅色切换）
|
|
|
- [ ] 使用 CSS `data-theme` 属性切换主题
|
|
|
- [ ] 在 settings store 中保存主题偏好
|
|
|
- [ ] 默认主题为深色
|
|
|
- [ ] 主题切换时无闪烁过渡
|
|
|
|
|
|
### Step 3.5: 配置全局样式
|
|
|
|
|
|
- [ ] 重置默认样式（margin/padding/box-sizing）
|
|
|
- [ ] 配置滚动条样式（`::-webkit-scrollbar`）
|
|
|
- [ ] 配置通用工具类（`.mt-10`, `.mb-10`, `.flex`, `.text-center` 等）
|
|
|
- [ ] 配置 NProgress 进度条深色样式
|
|
|
|
|
|
**验收标准:**
|
|
|
- [ ] 深色主题默认渲染正确
|
|
|
- [ ] Element Plus 组件在深色主题下视觉一致
|
|
|
- [ ] 主题切换功能正常工作
|
|
|
- [ ] CSS 变量在 DevTools 中可查看
|
|
|
- [ ] 热力图排名色阶样式正确（1-10 级 + >10 级）
|
|
|
- [ ] 与 demo-dashboard-heatmap.html 配色方案一致
|
|
|
|
|
|
---
|
|
|
|
|
|
## Task 4: 核心组件迁移
|
|
|
|
|
|
**目标**: 迁移布局组件和通用组件，重构为 Composition API + TypeScript
|
|
|
|
|
|
**Files:**
|
|
|
- Create: `ruoyi-ui-next/src/layout/index.vue`
|
|
|
- Create: `ruoyi-ui-next/src/layout/components/AppMain.vue`
|
|
|
- Create: `ruoyi-ui-next/src/layout/components/Navbar.vue`
|
|
|
- Create: `ruoyi-ui-next/src/layout/components/Sidebar/index.vue`
|
|
|
- Create: `ruoyi-ui-next/src/layout/components/Sidebar/SidebarItem.vue`
|
|
|
- Create: `ruoyi-ui-next/src/layout/components/Sidebar/Item.vue`
|
|
|
- Create: `ruoyi-ui-next/src/layout/components/Sidebar/Link.vue`
|
|
|
- Create: `ruoyi-ui-next/src/layout/components/Sidebar/Logo.vue`
|
|
|
- Create: `ruoyi-ui-next/src/layout/components/TagsView/index.vue`
|
|
|
- Create: `ruoyi-ui-next/src/layout/components/TagsView/ScrollPane.vue`
|
|
|
- Create: `ruoyi-ui-next/src/layout/components/Settings/index.vue`
|
|
|
- Create: `ruoyi-ui-next/src/layout/components/InnerLink/index.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/Breadcrumb/index.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/Pagination/index.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/DictTag/index.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/SvgIcon/index.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/Hamburger/index.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/Screenfull/index.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/SizeSelect/index.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/ThemePicker/index.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/TopNav/index.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/RightToolbar/index.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/Editor/index.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/FileUpload/index.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/ImageUpload/index.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/ImagePreview/index.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/IconSelect/index.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/HeaderSearch/index.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/Crontab/index.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/Crontab/day.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/Crontab/hour.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/Crontab/min.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/Crontab/month.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/Crontab/week.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/Crontab/year.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/Crontab/second.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/Crontab/result.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/ParentView/index.vue`
|
|
|
- Create: `ruoyi-ui-next/src/components/iFrame/index.vue`
|
|
|
- Reference: `ruoyi-ui/src/layout/` 目录所有文件
|
|
|
- Reference: `ruoyi-ui/src/components/` 目录所有文件
|
|
|
|
|
|
**Dependencies:** Task 1, Task 2, Task 3 完成
|
|
|
|
|
|
### Step 4.1: 迁移布局组件
|
|
|
|
|
|
- [ ] **Layout** (`layout/index.vue`): 主布局容器，使用 `<script setup lang="ts">`，使用 `useAppStore()` 获取侧边栏状态
|
|
|
- [ ] **AppMain**: 主内容区，包含 `<router-view>` + `<keep-alive>` + `<transition>`
|
|
|
- [ ] **Navbar**: 顶部导航栏，包含 Hamburger、Breadcrumb、搜索、全屏、通知、用户下拉菜单
|
|
|
- [ ] **Sidebar**: 侧边栏，包含 Logo + Menu + SidebarItem 递归渲染
|
|
|
- [ ] **SidebarItem**: 递归菜单项，支持嵌套路由
|
|
|
- [ ] **TagsView**: 标签页视图，支持右键菜单（刷新、关闭其他、关闭全部）
|
|
|
- [ ] **Settings**: 系统设置面板（主题、顶栏、标签页等开关）
|
|
|
- [ ] 移除 `ResizeHandler.js` Mixin，改用 `useResize()` Composition API 函数
|
|
|
|
|
|
### Step 4.2: 迁移高复用通用组件
|
|
|
|
|
|
每个组件迁移要求：
|
|
|
- 使用 `<script setup lang="ts">` 语法
|
|
|
- Props 使用 `defineProps<T>()` 类型标注
|
|
|
- Emits 使用 `defineEmits<T>()` 类型标注
|
|
|
- 移除 Vue 2 Mixin，改用 Composition API
|
|
|
- 保持原有功能不变
|
|
|
|
|
|
**高优先级组件（按复用程度）**:
|
|
|
- [ ] **Pagination**: 分页组件，Props 包括 `total`, `page`, `limit`，Emits `update:page`, `update:limit`, `pagination`
|
|
|
- [ ] **DictTag**: 字典标签渲染，Props 包括 `options`, `value`
|
|
|
- [ ] **RightToolbar**: 右侧工具栏（搜索、显隐列），Props 包括 `showSearch`, `columns`
|
|
|
- [ ] **Breadcrumb**: 面包屑导航，读取 `useRoute()` 生成面包屑
|
|
|
- [ ] **SvgIcon**: SVG 图标封装，使用 `vite-plugin-svg-icons`
|
|
|
- [ ] **Hamburger**: 汉堡菜单按钮
|
|
|
|
|
|
**中优先级组件**:
|
|
|
- [ ] **Screenfull**: 全屏切换
|
|
|
- [ ] **SizeSelect**: 组件尺寸选择
|
|
|
- [ ] **ThemePicker**: 主题选择器（与 Task 3 整合）
|
|
|
- [ ] **TopNav**: 顶部导航菜单
|
|
|
- [ ] **Editor**: 富文本编辑器（Quill），确认依赖兼容性
|
|
|
- [ ] **FileUpload**: 文件上传
|
|
|
- [ ] **ImageUpload**: 图片上传
|
|
|
- [ ] **ImagePreview**: 图片预览
|
|
|
|
|
|
**低优先级组件**:
|
|
|
- [ ] **HeaderSearch**: 头部搜索（Fuse.js 全文搜索）
|
|
|
- [ ] **IconSelect**: SVG 图标选择器
|
|
|
- [ ] **Crontab**: Cron 表达式生成器（9 个子组件）
|
|
|
- [ ] **ParentView**: 父级视图占位
|
|
|
- [ ] **iFrame**: 内嵌 iframe
|
|
|
|
|
|
### Step 4.3: 迁移业务组件
|
|
|
|
|
|
将业务组件从 `src/components/` 移至 `src/components-business/`：
|
|
|
- [ ] **Kdialog**: K 线对话框 → `components-business/Kdialog/`
|
|
|
- [ ] **NegativeDialog**: 涨跌停对话框 → `components-business/NegativeDialog/`
|
|
|
- [ ] **TrendStocksDialog**: 板块趋势对话框 → `components-business/TrendStocksDialog/`
|
|
|
|
|
|
### Step 4.4: 全局注册策略
|
|
|
|
|
|
- [ ] 高复用组件（Pagination, DictTag, SvgIcon, RightToolbar）自动全局注册
|
|
|
- [ ] 布局组件按需导入
|
|
|
- [ ] 业务组件按需导入（仅在其所属模块页面中引用）
|
|
|
- [ ] 移除 `ruoyi-ui/src/main.js` 中的 `Vue.component()` 全局注册方式
|
|
|
|
|
|
### Step 4.5: 字典系统重构
|
|
|
|
|
|
- [ ] 重构 `DictData` 模块为 TypeScript
|
|
|
- [ ] 创建 `utils/dict/index.ts` 统一管理字典加载
|
|
|
- [ ] 字典缓存使用 Pinia store 而非全局变量
|
|
|
- [ ] 保持 `getDicts(dictType)` API 调用兼容
|
|
|
|
|
|
**验收标准:**
|
|
|
- [ ] 所有组件使用 `<script setup lang="ts">` 语法
|
|
|
- [ ] Props 和 Emits 有完整 TypeScript 类型定义
|
|
|
- [ ] 无 Vue 2 特有 API 使用（`this.$xxx`, `Vue.extend`, Mixin）
|
|
|
- [ ] Layout 布局渲染正确（Sidebar + Navbar + TagsView + AppMain）
|
|
|
- [ ] Pagination 组件在列表中正常工作
|
|
|
- [ ] DictTag 正确渲染字典标签
|
|
|
- [ ] SvgIcon 正确渲染 SVG 图标
|
|
|
- [ ] 业务组件不再污染全局组件注册表
|
|
|
- [ ] 组件无 ESLint 报错
|
|
|
|
|
|
---
|
|
|
|
|
|
## Task 5: 数据可视化实现
|
|
|
|
|
|
**目标**: 安装配置 ECharts 5，实现行情总览和趋势热力图页面
|
|
|
|
|
|
**Files:**
|
|
|
- Create: `ruoyi-ui-next/src/views/dashboard/index.vue` — 行情总览页面
|
|
|
- Create: `ruoyi-ui-next/src/views/dashboard/components/StatsCards.vue` — 统计卡片
|
|
|
- Create: `ruoyi-ui-next/src/views/dashboard/components/SentimentRow.vue` — 情绪指标行
|
|
|
- Create: `ruoyi-ui-next/src/views/dashboard/components/UpDownChart.vue` — 涨跌分布图
|
|
|
- [ ] Create: `ruoyi-ui-next/src/views/dashboard/components/TopTrends.vue` — 趋势板块 TOP 10
|
|
|
- Create: `ruoyi-ui-next/src/views/dashboard/components/TrendChanges.vue` — 趋势变化榜
|
|
|
- Create: `ruoyi-ui-next/src/views/dashboard/components/ConsecutiveStats.vue` — 连续统计
|
|
|
- Create: `ruoyi-ui-next/src/views/heatmap/index.vue` — 趋势热力图页面
|
|
|
- Create: `ruoyi-ui-next/src/views/heatmap/components/HeatmapMatrix.vue` — 热力矩阵
|
|
|
- Create: `ruoyi-ui-next/src/views/heatmap/components/EnhancedTable.vue` — 增强表格
|
|
|
- Create: `ruoyi-ui-next/src/views/heatmap/components/DetailModal.vue` — 详情弹窗
|
|
|
- Create: `ruoyi-ui-next/src/utils/echarts.ts` — ECharts 封装工具
|
|
|
- Reference: `data/demo-dashboard-heatmap.html`（UI 参考）
|
|
|
- Reference: `ruoyi-ui/src/views/dashboard/` 目录（旧图表组件）
|
|
|
|
|
|
**Dependencies:** Task 1, Task 2, Task 3, Task 4 完成
|
|
|
|
|
|
### Step 5.1: 配置 ECharts 5
|
|
|
|
|
|
- [ ] 确认 `echarts@^5.5.0` 已安装
|
|
|
- [ ] 创建 `utils/echarts.ts` 封装工具：
|
|
|
- `initChart(dom, theme)` — 初始化图表
|
|
|
- `resizeChart(chart)` — 响应式调整
|
|
|
- 自定义深色主题配置（与全局 CSS 变量一致）
|
|
|
- [ ] 创建 `useECharts` Composition API Hook：
|
|
|
- 自动处理 resize
|
|
|
- 自动处理组件卸载时的 dispose
|
|
|
- 支持响应式 option 更新
|
|
|
|
|
|
### Step 5.2: 实现行情总览页面
|
|
|
|
|
|
参考 demo-dashboard-heatmap.html 中 `#pg-dashboard` 的布局：
|
|
|
|
|
|
```
|
|
|
行情总览布局：
|
|
|
├── 市场范围筛选器（全A / 上证 / 深证 / 创业板 / 科创板 / 中证1000）
|
|
|
├── 迷你统计卡片（4 格）
|
|
|
│ ├── 上涨家数
|
|
|
│ ├── 下跌家数
|
|
|
│ ├── 涨停家数
|
|
|
│ └── 跌停家数
|
|
|
├── 情绪指标行（4 格）
|
|
|
│ ├── 全A情绪（含进度条 + 元信息）
|
|
|
│ ├── 中证1000情绪
|
|
|
│ ├── 创业板情绪
|
|
|
│ └── 科创板情绪
|
|
|
├── 双列布局
|
|
|
│ ├── 左：涨跌分布柱状图（ECharts）
|
|
|
│ └── 右：趋势板块 TOP 10（表格）
|
|
|
└── 双列布局
|
|
|
├── 左：趋势变化榜（上升/下降列表）
|
|
|
└── 右：强势板块连续统计（表格）
|
|
|
```
|
|
|
|
|
|
- [ ] **StatsCards**: 4 格迷你统计卡片组件
|
|
|
- [ ] **SentimentRow**: 情绪指标行，含热力色阶进度条
|
|
|
- [ ] **UpDownChart**: ECharts 涨跌分布柱状图
|
|
|
- [ ] **TopTrends**: 趋势板块 TOP 10 表格（含排名徽章、动量信号、详情按钮）
|
|
|
- [ ] **TrendChanges**: 趋势变化榜（上升红色/下降绿色箭头）
|
|
|
- [ ] **ConsecutiveStats**: 连续统计表格
|
|
|
|
|
|
### Step 5.3: 实现趋势热力图页面
|
|
|
|
|
|
参考 demo-dashboard-heatmap.html 中 `#pg-heatmap` 的布局：
|
|
|
|
|
|
```
|
|
|
趋势热力图布局：
|
|
|
├── 筛选栏（动量周期：1日/3日/5日/10日/15日/20日/30日 + 日期选择 + 刷新）
|
|
|
├── 视图切换（热力矩阵 / 增强表格）
|
|
|
├── 热力矩阵视图
|
|
|
│ └── 2级行业 × 交易日排名矩阵
|
|
|
│ └── 点击单元格 → 详情弹窗
|
|
|
└── 增强表格视图
|
|
|
└── 行业 × 日期排名 + 趋势变化
|
|
|
```
|
|
|
|
|
|
- [ ] **HeatmapMatrix**: 热力矩阵组件
|
|
|
- 2 级行业为行，交易日为列
|
|
|
- 排名 1-10 使用色阶渐变（源自 CSS 变量 `--heat-1` 至 `--heat-10`）
|
|
|
- 排名 >10 使用默认灰色
|
|
|
- 点击单元格触发详情弹窗
|
|
|
- [ ] **EnhancedTable**: 增强表格视图
|
|
|
- 行业 × 日期排名
|
|
|
- 趋势变化列（上升/下降）
|
|
|
- [ ] **DetailModal**: 详情弹窗
|
|
|
- 统计卡片（当前动量、近5日趋势、涨停家数、创新高、连续天数、平均排名）
|
|
|
- ECharts K 线图
|
|
|
- ECharts 排名趋势折线图
|
|
|
- Tab 切换（概览 / 排名趋势 / 成分股 / 历史数据）
|
|
|
|
|
|
### Step 5.4: 数据卡片和统计组件
|
|
|
|
|
|
- [ ] 创建通用 `StatCard` 组件（label + value + sub）
|
|
|
- [ ] 创建通用 `MiniBarChart` 组件（小型柱状图）
|
|
|
- [ ] 创建通用 `RankBadge` 组件（排名徽章，1-3 金色/2 银色/3 铜色/其他普通）
|
|
|
- [ ] 创建通用 `SignalTag` 组件（动量信号标签）
|
|
|
|
|
|
### Step 5.5: 数据适配层
|
|
|
|
|
|
- [ ] 创建 Mock 数据（开发阶段使用）
|
|
|
- [ ] 创建 API 调用函数（连接后端实际接口）
|
|
|
- [ ] 确保数据格式与现有后端 API 兼容
|
|
|
|
|
|
**验收标准:**
|
|
|
- [ ] 行情总览页面渲染正确，布局与 demo 一致
|
|
|
- [ ] 趋势热力图页面渲染正确，热力矩阵色阶正确
|
|
|
- [ ] ECharts 图表在窗口缩放时自适应
|
|
|
- [ ] 点击热力图单元格可打开详情弹窗
|
|
|
- [ ] 详情弹窗中 K 线图和排名趋势图正确渲染
|
|
|
- [ ] 视图切换（热力矩阵/增强表格）正常工作
|
|
|
- [ ] 所有图表使用深色主题
|
|
|
- [ ] 组件使用 Composition API + TypeScript
|
|
|
|
|
|
---
|
|
|
|
|
|
## Task 6: 业务模块迁移
|
|
|
|
|
|
**目标**: 迁移所有业务模块页面，保持与后端 API 兼容
|
|
|
|
|
|
**Files:**
|
|
|
- Create: `ruoyi-ui-next/src/views/system/user/index.vue` — 用户管理
|
|
|
- Create: `ruoyi-ui-next/src/views/system/role/index.vue` — 角色管理
|
|
|
- Create: `ruoyi-ui-next/src/views/system/menu/index.vue` — 菜单管理
|
|
|
- Create: `ruoyi-ui-next/src/views/system/dept/index.vue` — 部门管理
|
|
|
- Create: `ruoyi-ui-next/src/views/system/config/index.vue` — 参数配置
|
|
|
- Create: `ruoyi-ui-next/src/views/system/notice/index.vue` — 通知公告
|
|
|
- Create: `ruoyi-ui-next/src/views/system/post/index.vue` — 岗位管理
|
|
|
- Create: `ruoyi-ui-next/src/views/system/dict/index.vue` — 字典管理
|
|
|
- Create: `ruoyi-ui-next/src/views/system/dict/data.vue` — 字典数据
|
|
|
- Create: `ruoyi-ui-next/src/views/system/user/profile/index.vue` — 个人中心
|
|
|
- Create: `ruoyi-ui-next/src/views/system/role/authUser.vue` — 角色分配用户
|
|
|
- Create: `ruoyi-ui-next/src/views/books/account/index.vue` — 交易账户
|
|
|
- Create: `ruoyi-ui-next/src/views/books/book/index.vue` — 账本管理
|
|
|
- Create: `ruoyi-ui-next/src/views/books/operations/index.vue` — 操作记录
|
|
|
- Create: `ruoyi-ui-next/src/views/books/statistics/index.vue` — 统计分析
|
|
|
- Create: `ruoyi-ui-next/src/views/books/statistictotal/index.vue` — 统计汇总
|
|
|
- Create: `ruoyi-ui-next/src/views/books/statisticremain/index.vue` — 统计结余
|
|
|
- Create: `ruoyi-ui-next/src/views/stocks/stocks/index.vue` — 股票列表
|
|
|
- Create: `ruoyi-ui-next/src/views/stocks/stockbasic/index.vue` — 股票基础信息
|
|
|
- Create: `ruoyi-ui-next/src/views/stocks/stockindex/index.vue` — 指数信息
|
|
|
- Create: `ruoyi-ui-next/src/views/stocks/financial/index.vue` — 财务数据
|
|
|
- Create: `ruoyi-ui-next/src/views/stocks/trends/index.vue` — 趋势数据
|
|
|
- Create: `ruoyi-ui-next/src/views/stocks/trendStocks/index.vue` — 板块趋势
|
|
|
- Create: `ruoyi-ui-next/src/views/stocks/newrecord/index.vue` — 新增记录
|
|
|
- Create: `ruoyi-ui-next/src/views/stocks/stockslimit/index.vue` — 涨跌停
|
|
|
- Create: `ruoyi-ui-next/src/views/stocks/book/index.vue` — 股票账本
|
|
|
- Create: `ruoyi-ui-next/src/views/monitor/cache/index.vue` — 缓存监控
|
|
|
- Create: `ruoyi-ui-next/src/views/monitor/job/index.vue` — 定时任务
|
|
|
- Create: `ruoyi-ui-next/src/views/monitor/job/log.vue` — 调度日志
|
|
|
- Create: `ruoyi-ui-next/src/views/monitor/logininfor/index.vue` — 登录日志
|
|
|
- Create: `ruoyi-ui-next/src/views/monitor/online/index.vue` — 在线用户
|
|
|
- Create: `ruoyi-ui-next/src/views/monitor/operlog/index.vue` — 操作日志
|
|
|
- Create: `ruoyi-ui-next/src/views/monitor/server/index.vue` — 服务器监控
|
|
|
- Create: `ruoyi-ui-next/src/views/tool/gen/index.vue` — 代码生成
|
|
|
- Create: `ruoyi-ui-next/src/views/login.vue` — 登录页
|
|
|
- Create: `ruoyi-ui-next/src/views/register.vue` — 注册页
|
|
|
- Create: `ruoyi-ui-next/src/views/error/401.vue` — 401 错误页
|
|
|
- Create: `ruoyi-ui-next/src/views/error/404.vue` — 404 错误页
|
|
|
- Create: `ruoyi-ui-next/src/api/*.ts` — 所有 API 模块（TypeScript）
|
|
|
- Reference: `ruoyi-ui/src/views/` 目录所有页面文件
|
|
|
- Reference: `ruoyi-ui/src/api/` 目录所有 API 文件
|
|
|
|
|
|
**Dependencies:** Task 1, Task 2, Task 3, Task 4 完成
|
|
|
|
|
|
### Step 6.1: 迁移 API 调用层
|
|
|
|
|
|
将 `ruoyi-ui/src/api/` 下所有 `.js` 文件重构为 `.ts` 文件：
|
|
|
|
|
|
- [ ] **API 类型定义** — 为每个 API 模块定义请求参数和响应类型
|
|
|
- [ ] **system API** (8 文件) — user, role, menu, dept, config, notice, post, dict(data+type)
|
|
|
- [ ] **monitor API** (6 文件) — cache, job, jobLog, logininfor, online, operlog, server
|
|
|
- [ ] **booksystem API** (6 文件) — account, book, operations, statistics, statistictotal, statisticremain
|
|
|
- [ ] **stocksystem API** (9 文件) — stocks, stockbasic, stockindex, financial, trends, trendStocks, newrecord, stockslimit, book
|
|
|
- [ ] 保持 API 路径完全一致（如 `/system/user/list` 不变）
|
|
|
- [ ] 使用 `request.get<T>()` / `request.post<T>()` 泛型方法
|
|
|
|
|
|
### Step 6.2: 迁移系统管理模块（10+ 页面）
|
|
|
|
|
|
每个页面迁移要求：
|
|
|
- 使用 `<script setup lang="ts">` 语法
|
|
|
- 使用 Composition API 替代 Vue 2 Options API
|
|
|
- API 调用使用 TypeScript 类型
|
|
|
- 使用 Element Plus 组件替代 Element UI
|
|
|
- 保持搜索表单 + 表格 + 分页 + 弹窗的 CRUD 布局
|
|
|
- 使用 `v-hasPermi` 指令控制按钮权限
|
|
|
- 使用 `DictTag` 组件展示字典
|
|
|
- 使用 `Pagination` 组件分页
|
|
|
|
|
|
页面清单：
|
|
|
- [ ] **用户管理** — 用户列表、新增/编辑弹窗、分配角色、导入/导出
|
|
|
- [ ] **角色管理** — 角色列表、权限分配、数据权限、分配用户
|
|
|
- [ ] **菜单管理** — 菜单树、新增/编辑弹窗、图标选择
|
|
|
- [ ] **部门管理** — 部门树、新增/编辑弹窗
|
|
|
- [ ] **参数配置** — 配置列表、新增/编辑弹窗
|
|
|
- [ ] **通知公告** — 公告列表、富文本编辑
|
|
|
- [ ] **岗位管理** — 岗位列表、新增/编辑弹窗
|
|
|
- [ ] **字典管理** — 字典类型列表、字典数据子页面
|
|
|
- [ ] **个人中心** — 用户信息修改、头像上传、密码修改
|
|
|
|
|
|
### Step 6.3: 迁移账本系统模块（6 页面）
|
|
|
|
|
|
- [ ] **交易账户** — 账户列表、CRUD
|
|
|
- [ ] **账本管理** — 账本列表、CRUD
|
|
|
- [ ] **操作记录** — 操作日志列表
|
|
|
- [ ] **统计分析** — 统计图表 + 列表
|
|
|
- [ ] **统计汇总** — 汇总数据展示
|
|
|
- [ ] **统计结余** — 结余数据展示
|
|
|
|
|
|
### Step 6.4: 迁移股票系统模块（8+ 页面）
|
|
|
|
|
|
- [ ] **股票列表** — 股票信息列表、CRUD
|
|
|
- [ ] **股票基础信息** — 基础数据列表
|
|
|
- [ ] **指数信息** — 指数列表
|
|
|
- [ ] **财务数据** — 财务信息列表
|
|
|
- [ ] **趋势数据** — 趋势数据列表
|
|
|
- [ ] **板块趋势** — 板块趋势列表（含业务组件 TrendStocksDialog）
|
|
|
- [ ] **新增记录** — 新增记录列表
|
|
|
- [ ] **涨跌停** — 涨跌停列表（含业务组件 NegativeDialog）
|
|
|
- [ ] **股票账本** — 股票相关账本
|
|
|
|
|
|
### Step 6.5: 迁移监控模块（7 页面）
|
|
|
|
|
|
- [ ] **缓存监控** — Redis 缓存信息
|
|
|
- [ ] **定时任务** — 任务列表、执行、日志
|
|
|
- [ ] **调度日志** — 任务执行日志
|
|
|
- [ ] **登录日志** — 登录记录列表
|
|
|
- [ ] **在线用户** — 在线用户列表、强退
|
|
|
- [ ] **操作日志** — 操作记录列表
|
|
|
- [ ] **服务器监控** — CPU/内存/磁盘信息
|
|
|
|
|
|
### Step 6.6: 迁移认证和错误页面
|
|
|
|
|
|
- [ ] **登录页** — 用户名/密码/验证码登录，RSA 加密
|
|
|
- [ ] **注册页** — 用户注册
|
|
|
- [ ] **401 错误页** — 无权限页面
|
|
|
- [ ] **404 错误页** — 页面不存在
|
|
|
|
|
|
### Step 6.7: 优化 API 调用层
|
|
|
|
|
|
- [ ] 添加请求重试机制（可配置重试次数和间隔）
|
|
|
- [ ] 添加请求取消机制（页面切换时取消未完成的请求）
|
|
|
- [ ] 统一错误码处理逻辑
|
|
|
- [ ] 添加 API 请求 loading 状态管理
|
|
|
|
|
|
**验收标准:**
|
|
|
- [ ] 所有页面可正常访问（路由配置正确）
|
|
|
- [ ] CRUD 操作功能正常（增删改查）
|
|
|
- [ ] 分页功能正常
|
|
|
- [ ] 搜索/过滤功能正常
|
|
|
- [ ] 权限按钮正确显示/隐藏
|
|
|
- [ ] 字典标签正确渲染
|
|
|
- [ ] 文件上传功能正常
|
|
|
- [ ] 富文本编辑器正常工作
|
|
|
- [ ] 与后端 API 完全兼容（无需后端改动）
|
|
|
- [ ] TypeScript 编译零错误
|
|
|
- [ ] 无 ESLint 报错
|
|
|
|
|
|
---
|
|
|
|
|
|
## Task 7: 测试和优化
|
|
|
|
|
|
**目标**: 功能测试、性能优化、响应式适配、浏览器兼容性测试
|
|
|
|
|
|
**Files:**
|
|
|
- Modify: `ruoyi-ui-next/vite.config.ts`（构建优化配置）
|
|
|
- Modify: `ruoyi-ui-next/src/utils/request.ts`（性能优化）
|
|
|
- Create: `ruoyi-ui-next/.browserslistrc`
|
|
|
- Reference: 所有已创建的页面和组件文件
|
|
|
|
|
|
**Dependencies:** Task 1-6 全部完成
|
|
|
|
|
|
### Step 7.1: 功能测试
|
|
|
|
|
|
- [ ] 登录/注册流程测试
|
|
|
- [ ] 动态路由加载测试（不同角色看到不同菜单）
|
|
|
- [ ] 权限控制测试（无权限按钮隐藏）
|
|
|
- [ ] 所有系统管理页面 CRUD 测试
|
|
|
- [ ] 所有业务模块页面功能测试
|
|
|
- [ ] 监控模块页面功能测试
|
|
|
- [ ] 数据可视化页面测试（行情总览 + 趋势热力图）
|
|
|
- [ ] 标签页操作测试（切换、关闭、刷新、关闭其他）
|
|
|
- [ ] 主题切换测试（深色/浅色）
|
|
|
- [ ] 文件上传/下载测试
|
|
|
- [ ] 富文本编辑器测试
|
|
|
- [ ] 401 处理测试（Token 过期 → 确认弹窗 → 退出登录）
|
|
|
|
|
|
### Step 7.2: 性能优化
|
|
|
|
|
|
**构建优化**:
|
|
|
- [ ] 配置 Vite 代码分割（`manualChunks`）
|
|
|
- `element-plus` 独立 chunk
|
|
|
- `echarts` 独立 chunk
|
|
|
- `vendor` 第三方库 chunk
|
|
|
- [ ] 启用 gzip/brotli 压缩
|
|
|
- [ ] 图片资源优化（自动 webp 转换）
|
|
|
- [ ] 移除开发环境的 source map
|
|
|
- [ ] 配置预加载/预取策略
|
|
|
|
|
|
**运行时优化**:
|
|
|
- [ ] 路由懒加载验证（所有路由页面按需加载）
|
|
|
- [ ] ECharts 按需引入（仅使用需要的图表类型）
|
|
|
- [ ] 大表格虚拟滚动（如数据量超过 100 行）
|
|
|
- [ ] 图片懒加载
|
|
|
- [ ] keep-alive 缓存策略优化
|
|
|
- [ ] 移除未使用的依赖和代码
|
|
|
|
|
|
**加载速度目标**:
|
|
|
- [ ] 首屏加载 < 2 秒（3G 网络模拟）
|
|
|
- [ ] 构建产物 < 2 MB（gzip 后）
|
|
|
- [ ] 构建时间 < 30 秒
|
|
|
|
|
|
### Step 7.3: 响应式适配
|
|
|
|
|
|
- [ ] 桌面端（1920px / 1440px / 1280px）
|
|
|
- [ ] 平板端（1024px / 768px）
|
|
|
- [ ] 移动端（375px）— 侧边栏自动折叠
|
|
|
- [ ] 热力图矩阵在小屏幕下可横向滚动
|
|
|
- [ ] 表格在小屏幕下可横向滚动
|
|
|
- [ ] 弹窗在小屏幕下自适应宽度
|
|
|
|
|
|
### Step 7.4: 浏览器兼容性
|
|
|
|
|
|
- [ ] Chrome 90+
|
|
|
- [ ] Firefox 90+
|
|
|
- [ ] Safari 14+
|
|
|
- [ ] Edge 90+
|
|
|
- [ ] 配置 `.browserslistrc`
|
|
|
- [ ] 验证无浏览器特有 API 使用（或添加 polyfill）
|
|
|
|
|
|
### Step 7.5: 代码质量检查
|
|
|
|
|
|
- [ ] ESLint 全量检查通过（零警告）
|
|
|
- [ ] TypeScript 严格模式编译通过（零错误）
|
|
|
- [ ] Prettier 格式化全部代码
|
|
|
- [ ] 无 `any` 类型滥用（最多 5 处 `any`）
|
|
|
- [ ] 无 Vue 2 残留代码（`this.` 引用、Mixin、Options API）
|
|
|
- [ ] 组件命名规范检查
|
|
|
- [ ] 导入路径规范检查（使用 `@/` 别名）
|
|
|
|
|
|
**验收标准:**
|
|
|
- [ ] 所有页面功能测试通过
|
|
|
- [ ] 首屏加载 < 2 秒
|
|
|
- [ ] 构建产物 < 2 MB（gzip 后）
|
|
|
- [ ] 响应式适配桌面/平板/移动端
|
|
|
- [ ] 主流浏览器兼容
|
|
|
- [ ] ESLint + TypeScript 零错误
|
|
|
- [ ] 无 Vue 2 残留代码
|
|
|
- [ ] 项目可独立运行（`npm run dev` + `npm run build`）
|
|
|
|
|
|
---
|
|
|
|
|
|
## 任务依赖关系图
|
|
|
|
|
|
```
|
|
|
Task 1 (项目初始化)
|
|
|
│
|
|
|
▼
|
|
|
Task 2 (核心架构搭建)
|
|
|
│
|
|
|
▼
|
|
|
Task 3 (深色主题和 UI 框架) ──┐
|
|
|
│ │
|
|
|
▼ ▼
|
|
|
Task 4 (核心组件迁移) Task 5 (数据可视化实现)
|
|
|
│ │
|
|
|
└──────────┬───────────────┘
|
|
|
│
|
|
|
▼
|
|
|
Task 6 (业务模块迁移)
|
|
|
│
|
|
|
▼
|
|
|
Task 7 (测试和优化)
|
|
|
```
|
|
|
|
|
|
## 里程碑
|
|
|
|
|
|
| 里程碑 | 包含任务 | 预期产出 |
|
|
|
|--------|---------|---------|
|
|
|
| **M1: 项目骨架** | Task 1 | 可运行的 Vite + Vue3 + TS 空项目 |
|
|
|
| **M2: 架构就绪** | Task 2 | 路由、状态、权限、API 层完成 |
|
|
|
| **M3: 主题完成** | Task 3 | 深色主题 + Element Plus 配置完成 |
|
|
|
| **M4: 组件迁移** | Task 4 | 所有布局组件和通用组件迁移完成 |
|
|
|
| **M5: 可视化完成** | Task 5 | 行情总览和趋势热力图页面完成 |
|
|
|
| **M6: 全量迁移** | Task 6 | 所有业务页面迁移完成 |
|
|
|
| **M7: 发布就绪** | Task 7 | 测试通过、性能达标、可部署 |
|
|
|
|
|
|
## 风险提示
|
|
|
|
|
|
| 风险 | 影响 | 应对策略 |
|
|
|
|------|------|---------|
|
|
|
| ECharts 5 API 变化 | 图表组件需适配 | 对比 4.x/5.x 文档，逐项验证 |
|
|
|
| Element Plus 组件 API 差异 | 部分组件属性变更 | 查阅 Element Plus 文档，逐个适配 |
|
|
|
| Quill 富文本编辑器兼容性 | 可能需替换方案 | 准备 wangEditor 作为备选 |
|
|
|
| 后端 API 未适配 Vue3 | 前端需额外处理 | 保持 API 调用层兼容，无需后端改动 |
|
|
|
| 大项目 TypeScript 类型定义工作量 | 开发周期延长 | 优先核心类型，逐步补充 |
|
|
|
| 旧组件逻辑复杂难以重构 | 重构风险高 | 先复制功能，再逐步优化 |
|
|
|
|
|
|
## 自检查
|
|
|
|
|
|
### 1. 规范覆盖
|
|
|
- [x] Task 1: 项目初始化 ✓
|
|
|
- [x] Task 2: 核心架构搭建 ✓
|
|
|
- [x] Task 3: 深色主题和 UI 框架 ✓
|
|
|
- [x] Task 4: 核心组件迁移 ✓
|
|
|
- [x] Task 5: 数据可视化实现 ✓
|
|
|
- [x] Task 6: 业务模块迁移 ✓
|
|
|
- [x] Task 7: 测试和优化 ✓
|
|
|
|
|
|
### 2. Placeholder 扫描
|
|
|
- [x] 无 "TBD"、"TODO"
|
|
|
- [x] 无 "implement later"
|
|
|
- [x] 所有步骤包含具体文件路径和实施内容
|
|
|
- [x] 无 "Similar to Task N"
|
|
|
|
|
|
### 3. 类型一致性
|
|
|
- [x] 所有路径使用 `ruoyi-ui-next/` 前缀
|
|
|
- [x] 文件名命名一致（kebab-case / PascalCase）
|
|
|
- [x] API 路径与现有后端一致
|
|
|
- [x] CSS 变量命名与 demo 一致
|
|
|
|
|
|
### 4. 最小单元验证
|
|
|
- [x] 每个任务可独立执行（按依赖顺序）
|
|
|
- [x] 每个任务有明确输出和验收标准
|
|
|
- [x] 每个任务可独立验证
|
|
|
- [x] 依赖关系清晰
|
|
|
|
|
|
---
|
|
|
|
|
|
## 执行选择
|
|
|
|
|
|
计划完成！共 7 个任务，约 150+ 步骤，产出完整的 Vue3 前端项目。
|
|
|
|
|
|
**执行选项**：
|
|
|
|
|
|
1. **Subagent-Driven（推荐）** — 每个任务分发到独立子 agent 执行，任务间审查，快速迭代
|
|
|
2. **Inline Execution** — 在当前会话中顺序执行所有任务
|
|
|
3. **按里程碑分批执行** — 按 M1-M7 分批，每个里程碑完成后审查再继续
|
|
|
|
|
|
您希望采用哪种执行方式？
|
