---

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