4.6 KiB
| name | description |
|---|---|
| vue3-admin | 生成并规范化一个基于 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