|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
name: "vue3-admin"
|
|
|
|
|
|
|
|
|
|
|
|
description: "生成并规范化一个基于 Vue3 + TypeScript 的后台管理系统工程结构与基础模块。"
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
## 📝 代码规范
|
|
|
|
|
|
|
|
|
|
|
|
完整的 TypeScript 类型定义
|
|
|
|
|
|
|
|
|
|
|
|
代码符合 ESLint + Prettier 规范
|
|
|
|
|
|
|
|
|
|
|
|
.vscode/settings.json实现保存自动格式化
|
|
|
|
|
|
|
|
|
|
|
|
## 设计规范（与 HTML 原型一致）
|
|
|
|
|
|
|
|
|
|
|
|
管理端视觉以 **主色 `#B11E23`**、深红悬停 `**#8B1519**` 为准，与后端仓库内静态原型 `public/slake/frontend/prototype/css/prototype.css` 及《UI 原型说明》一致。Vue 工程主题集中在 `**src/assets/theme-slake.css**`（Element Plus 主色链 + `--slake-*` 变量），请勿在业务页随意引入与品牌冲突的强调色。
|
|
|
|
|
|
|
|
|
|
|
|
**全站列表页与操作区样式**（页头布局、筛选区、14px/12px 字号、状态色、操作列描边按钮等）以 **`docs/管理后台UI规范.md`** 为准；课程管理为首个落地样例（`src/views/operations/courses/index.vue`）。
|
|
|
|
|
|
|
|
|
|
|
|
## 技术栈
|
|
|
|
|
|
|
|
|
|
|
|
Vue 3.4 + TypeScript 5
|
|
|
|
|
|
|
|
|
|
|
|
Vite 5 构建工具
|
|
|
|
|
|
|
|
|
|
|
|
Pinia 状态管理
|
|
|
|
|
|
|
|
|
|
|
|
Vue Router 4 路由
|
|
|
|
|
|
|
|
|
|
|
|
Element Plus UI
|
|
|
|
|
|
|
|
|
|
|
|
Axios 请求封装
|
|
|
|
|
|
|
|
|
|
|
|
## 功能模块
|
|
|
|
|
|
|
|
|
|
|
|
用户登录/登出（Token 认证）
|
|
|
|
|
|
|
|
|
|
|
|
角色管理（**首期仅菜单分配**；接口级 permission 二期扩展）
|
|
|
|
|
|
|
|
|
|
|
|
菜单管理（动态路由）
|
|
|
|
|
|
|
|
|
|
|
|
数据字典（每一条字典下有多个值，多用于作为下拉选项）
|
|
|
|
|
|
|
|
|
|
|
|
操作日志（列表模式，包含（操作人、操作时间、接口、操作项）
|
|
|
|
|
|
|
|
|
|
|
|
系统设置
|
|
|
|
|
|
|
|
|
|
|
|
页面结构
|
|
|
|
|
|
|
|
|
|
|
|
顶部导航栏（左侧项目名称、右侧用户信息、退出登陆）
|
|
|
|
|
|
|
|
|
|
|
|
左侧侧边栏（多级菜单、可折叠菜单）
|
|
|
|
|
|
|
|
|
|
|
|
额外要求
|
|
|
|
|
|
|
|
|
|
|
|
响应式布局，支持移动端
|
|
|
|
|
|
|
|
|
|
|
|
深色/浅色主题切换
|
|
|
|
|
|
|
|
|
|
|
|
路由权限控制（首期：按角色菜单生成侧栏与动态路由）
|
|
|
|
|
|
|
|
|
|
|
|
请求拦截和响应拦截
|
|
|
|
|
|
|
|
|
|
|
|
实现性能优化
|
|
|
|
|
|
|
|
|
|
|
|
支持本地node服务请求数据
|
|
|
|
|
|
|
|
|
|
|
|
### 功能细则
|
|
|
|
|
|
|
|
|
|
|
|
1 路由权限控制:
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
1.1菜单权限：
|
|
|
|
|
|
|
|
|
|
|
|
菜单权限控制，即用户登录后，只能看到自己权限范围内的菜单，不能看到其他菜单。给单个路由的meta添加roles属性，roles是一个数组，数组元素是角色名。比如[radmin','user']，菜单权限控制只对动态菜单有效。菜单由静态菜单+动态菜单组合生成最后的菜单。动态菜单根据用户角色权限进行过滤。至少有3个页面用来区分
|
|
|
|
|
|
|
|
|
|
|
|
不同角色登录后显示不同菜单效果
|
|
|
|
|
|
|
|
|
|
|
|
首期建议：已实现「角色 → 菜单」即可；以下为二期增强（接口与按钮对齐 permission code）。
|
|
|
|
|
|
|
|
|
|
|
|
1.2按钮权限：
|
|
|
|
|
|
|
|
|
|
|
|
根据用户权限，对按钮进行权限控制。采用给按钮添加权限指令的方式.
|
|
|
|
|
|
|
|
|
|
|
|
要求实现两个指令，v-permission和v-role。
|
|
|
|
|
|
|
|
|
|
|
|
1.2.1 v-permissio按权限码（permission code）控制显示，
|
|
|
|
|
|
|
|
|
|
|
|
单个权限： v-permission="'settings:edit'"
|
|
|
|
|
|
|
|
|
|
|
|
多个权限（AND 关系，必须全部满足才显示）： v-permission="['user:create','user:delete']"
|
|
|
|
|
|
|
|
|
|
|
|
1.2.2 v-role按“角色”控制显示
|
|
|
|
|
|
|
|
|
|
|
|
v-role="'admin'" 或 v-role="['admin']"
|
|
|
|
|
|
|
|
|
|
|
|
1.3 理论上支持菜单无限极拓展
|
|
|
|
|
|
|
|
|
|
|
|
左侧菜单栏至少出现一个包含多级菜单的菜单（以三级菜单为例），用来模拟支持菜单无限极功能
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
2 http请求：
|
|
|
|
|
|
|
|
|
|
|
|
基于axios封装实现，考虑前端引入多个服务场景，支持多个服务联调。每个服务有自己的baseURL、timeout、headers等配置。
|
|
|
|
|
|
|
|
|
|
|
|
要求在vite.config.ts中proxy配置多个服务，通过请求本地node服务测试接口
|
|
|
|
|
|
|
|
|
|
|
|
3 性能优化：
|
|
|
|
|
|
|
|
|
|
|
|
打包工具与代码层面等多个组合实现高性能优化
|
|
|
|
|
|
|
|
|
|
|
|
4 本地node服务
|
|
|
|
|
|
|
|
|
|
|
|
本地生成node服务，mock数据实现本地联调，实现vite.config.ts中proxy代理和正常http请求;
|
|
|
|
|
|
|
|
|
|
|
|
需要至少生成两个node服务，提供前端进行真实请求，模拟多个服务场景，并提供mock数据
|
|
|
|
|
|
|
|
|
|
|
|
5 支持多环境打包
|
|
|
|
|
|
|
|
|
|
|
|
6 支持多语言拓展
|
|
|
|
|
|
|
|
|
|
|
|
### 组件规范
|
|
|
|
|
|
|
|
|
|
|
|
- ✅ 使用 `<script setup lang="ts">` 语法糖
|
|
|
|
|
|
- ✅ 组件命名采用 PascalCase（如：UserTable.vue）
|
|
|
|
|
|
- ✅ 优先使用 Composition API
|
|
|
|
|
|
- ✅ 所有 props 必须定义 TypeScript 类型
|
|
|
|
|
|
|
|
|
|
|
|
### 命名规范
|
|
|
|
|
|
|
|
|
|
|
|
- 组件：PascalCase（UserList.vue）
|
|
|
|
|
|
- 文件：kebab-case（user-list.vue）
|
|
|
|
|
|
- 变量/函数：camelCase（userInfo, getUserData）
|
|
|
|
|
|
- 常量：UPPER_SNAKE_CASE（MAX_RETRY_COUNT）
|
|
|
|
|
|
|
|
|
|
|
|
### 禁止行为
|
|
|
|
|
|
|
|
|
|
|
|
- ❌ 不要使用 Options API
|
|
|
|
|
|
- ❌ 不要使用 any 类型
|
|
|
|
|
|
- ❌ 不要直接操作 DOM
|
|
|
|
|
|
- ❌ 不要在组件内硬编码 API 地址
|
|
|
|
|
|
|
|
|
|
|
|
## 🎨 UI 规范
|
|
|
|
|
|
|
|
|
|
|
|
### Element Plus 使用
|
|
|
|
|
|
|
|
|
|
|
|
- 按需导入组件
|
|
|
|
|
|
- 使用 ElTable、ElForm 等标准组件
|
|
|
|
|
|
- 表单验证使用 async-validator
|
|
|
|
|
|
|
|
|
|
|
|
### 响应式布局
|
|
|
|
|
|
|
|
|
|
|
|
- 使用 ElContainer 布局
|
|
|
|
|
|
- 移动端适配使用 @media 查询
|
|
|
|
|
|
- 最小宽度 1200px
|
|
|
|
|
|
|
