---
name: "vue3-admin"
description: "生成并规范化一个基于 Vue3 + TypeScript 的后台管理系统工程结构与基础模块。"
---

## 📝 代码规范

完整的 TypeScript 类型定义
代码符合 ESLint + Prettier 规范
.vscode/settings.json实现保存自动格式化

## 技术栈

Vue 3.4 + TypeScript 5
Vite 5 构建工具
Pinia 状态管理
Vue Router 4 路由
Element Plus UI
Axios 请求封装

## 功能模块

用户登录/登出（JWT 认证）
仪表盘（数据统计卡片、图表）
用户管理（增删改查、分页）
角色管理（权限分配）
菜单管理（动态路由）
系统设置
页面结构
顶部导航栏（用户信息、通知、设置）
左侧侧边栏（可折叠菜单）
主内容区（支持多标签页）
底部版权信息
额外要求
响应式布局，支持移动端
深色/浅色主题切换
路由权限控制
请求拦截和响应拦截
实现性能优化
支持本地node服务请求数据

### 功能细则

1 路由权限控制:
    1.1菜单权限：
        菜单权限控制，即用户登录后，只能看到自己权限范围内的菜单，不能看到其他菜单。给单个路由的meta添加roles属性，roles是一个数组，数组元素是角色名。比如[radmin','user']，菜单权限控制只对动态菜单有效。菜单由静态菜单+动态菜单组合生成最后的菜单。动态菜单根据用户角色权限进行过滤。至少有3个页面用来区分
        不同角色登录后显示不同菜单效果
    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