使用 Zero-Config Code Flow 开发
简介：零配置，一键搞定 Claude Code & Codex 环境设置 - 支持中英文双语配置、智能代理系统和个性化 AI 助手具体安装可以移步对应的仓库地址，有具体的文档：https://github.com/UfoMiao/zcf/blob/main/README\_zh-CN.md 或者参考这篇文章：https://linux.do/t/topic/836692
使用 zcf:workflow 开发
Copy
# 先进入 claude 或者 codex
claude
# 使用工作流
/zcf:workflow 你想做什么
Copy
> 你好
⏺ 你好！我是 Claude Code，一个专业的编程助手。我可以帮助你：
- 📝 编写、阅读和修改代码
- 🔍 搜索和分析代码库
- 🐛 调试和修复问题
- 🏗️ 设计架构和实现功能
- 📦 管理项目和依赖
- 🔧 执行系统命令和工具
我会遵循软件工程最佳实践（SOLID、KISS、DRY、YAGNI），并在执行危险操作前征求你的确认。
当前工作目录是 /Users/wxvirus/AiProjects/goals。
请问有什么可以帮到你的？
output-style之后的回答，挺不错的。
好了，继续开发，我就想自己搞一个自己的前端后台，可以看到：https://github.com/UfoMiao/zcf/blob/main/templates/claude-code/zh-CN/workflow/sixStep/commands/workflow.md 这个使用方法就是
Copy
/zcf:workflow <任务描述>
Copy
/zcf:workflow 我想要开发一个vue3的一个后台管理系统，登录能够添加滑动验证码；布局有2种方式: 经典左侧菜单布局、左侧
双栏布局；可以切换主题色；可以全屏；可以切换暗色主体和亮色主体；可以设置左侧菜单的宽度；要有标签页管
理；系统的logo和名称以及title等SEO都是可配置的；最终再实现一个经典的权限管理，粒度到按钮级别，数据使
用mock数据；开发使用monorepo的管理方式，定制前端开发的规则和代码格式化和类型校验，使用typescript
Copy
> /zcf:workflow is running…
我想要开发一个vue3的一个后台管理系统，登录能够添加滑动验证码；布局有2种方式: 经典左侧菜单布局、左侧
双栏布局；可以切换主题色；可以全屏；可以切换暗色主体和亮色主体；可以设置左侧菜单的宽度；要有标签页管
理；系统的logo和名称以及title等SEO都是可配置的；最终再实现一个经典的权限管理，粒度到按钮级别，数据使
用mock数据；开发使用monorepo的管理方式，定制前端开发的规则和代码格式化和类型校验，使用typescript
⏺ [模式:研究] - 需求分析与完整性评估
📊 需求完整性评分
让我对您的需求进行系统性评估:
评分分析
| 维度 | 得分 | 说明 |
|-------|-----|------------------------------------|
| 目标明确性 | 3/3 | ✅ 目标清晰:开发Vue3后台管理系统,功能点明确 |
| 预期结果 | 2/3 | ⚠️ 基本明确功能列表,但缺少具体的业务场景和用户角色定义 |
| 边界范围 | 2/2 | ✅ 范围清晰:monorepo架构、使用mock数据、按钮级权限 |
| 约束条件 | 1/2 | ⚠️ 技术栈明确(Vue3+TS),但缺少性能指标、浏览器兼容性要求 |
总分: 8/10 ✅ 需求基本完整,可以进入下一阶段
---
🔍 需求解析
核心功能模块(已明确)
⏺ 1. 认证模块: 登录 + 滑动验证码
2. 布局系统: 经典左侧菜单布局、左侧双栏布局
3. 主题系统: 主题色切换、暗色/亮色模式、左侧菜单宽度配置
4. UI交互: 全屏功能、标签页管理
5. 系统配置: Logo、名称、Title等SEO可配置
6. 权限系统: 按钮级别RBAC权限控制
7. 数据层: Mock数据
8. 工程化: Monorepo + TypeScript + 代码规范
---
❓ 建议补充的细节(可选)
为了提供更精准的方案,建议补充以下信息:
1. 业务场景相关
- 用户角色: 需要几种角色?(建议:超级管理员、管理员、普通用户)
- 权限粒度: 按钮级权限的典型场景?(如:新增、编辑、删除、导出等)
- 菜单层级: 最多支持几级菜单?(建议:2-3级)
2. 技术约束相关
- 浏览器兼容: 需要支持哪些浏览器?(建议:Chrome/Edge/Firefox最新2个版本)
- 性能指标: 首屏加载时间要求?(建议:<2s)
- 包管理器: pnpm/yarn/npm?(monorepo推荐pnpm)
3. 开发规范相关
- UI组件库: 是否有偏好?(建议:Element Plus、Ant Design Vue、Naive UI)
- 状态管理: Pinia还是Vuex?(建议:Pinia,Vue3官方推荐)
- HTTP客户端: axios还是fetch?(建议:axios)
---
🎯 我的建议(基于最佳实践)
如果您不确定上述细节,我将基于以下假设继续:
| 项目 | 默认选择 | 理由 |
|---------|-----------------------------------|-----------------------|
| 包管理器 | pnpm | monorepo最佳选择,节省磁盘空间 |
| UI组件库 | Element Plus | Vue3生态成熟,文档完善 |
| 状态管理 | Pinia | Vue3官方推荐,TypeScript友好 |
| HTTP客户端 | axios | 功能完善,拦截器支持好 |
| 构建工具 | Vite | Vue3官方推荐,构建速度快 |
| 代码规范 | ESLint + Prettier + Stylelint | 业界标准 |
| Git规范 | Husky + Commitlint | 提交质量保证 |
| 用户角色 | 超级管理员、管理员、普通用户 | 覆盖常见场景
|
| 浏览器兼容 | Chrome 90+, Edge 90+, Firefox 88+ | 覆盖95%+用户 |
---
📋 需求确认清单
已明确的需求:
- ✅ Vue3 + TypeScript
- ✅ Monorepo架构
- ✅ 2种布局方式
- ✅ 主题系统(主题色、明暗模式、菜单宽度)
- ✅ 登录 + 滑动验证码
- ✅ 权限管理(按钮级)
- ✅ Mock数据
- ✅ 标签页管理
- ✅ 全屏功能
- ✅ SEO配置
待确认的选项:
- ⚠️ 是否接受我的技术栈建议?
- ⚠️ 是否需要补充上述业务场景细节?
---
🤔 请您确认
选项1: 接受我的技术栈建议,直接进入【构思阶段】设计方案
选项2: 先补充上述业务场景和技术约束细节,再进入下一阶段
选项3: 修改我的某些技术选型建议
请告诉我您的选择,或直接说"继续"我将按默认建议进入构思阶段。
Copy
⏺ [模式:构思] - 技术方案设计
🎨 方案对比与评估
我为您设计了 3套完整的技术方案,每套方案都能满足您的需求,但在架构复杂度、开发效率、扩展性等方面各有侧重。
---
📦 方案1:现代化轻量级方案(推荐)
核心技术栈
架构模式: Monorepo (pnpm workspace)
构建工具: Vite 5.x
UI框架: Element Plus 2.x
状态管理: Pinia 2.x
路由: Vue Router 4.x
HTTP: axios + 请求拦截器
验证码: vue3-puzzle-vcode (轻量级滑动验证组件)
Mock: vite-plugin-mock
代码规范: ESLint 9.x + Prettier + Stylelint
类型检查: TypeScript 5.x + vue-tsc
提交规范: Husky + Commitlint + lint-staged
CSS方案: UnoCSS (原子化CSS)
图标: @iconify/vue (统一图标解决方案)
Monorepo结构
vue3-admin-monorepo/
├── packages/
│ ├── admin/ # 主应用
│ │ ├── src/
│ │ │ ├── layouts/ # 布局组件
│ │ │ ├── views/ # 页面
│ │ │ ├── components/ # 业务组件
│ │ │ ├── router/ # 路由配置
│ │ │ ├── stores/ # Pinia状态
│ │ │ ├── api/ # API接口
│ │ │ ├── mock/ # Mock数据
│ │ │ ├── hooks/ # 组合式函数
│ │ │ ├── utils/ # 工具函数
│ │ │ └── types/ # TypeScript类型
│ │ ├── public/
│ │ ├── vite.config.ts
│ │ └── package.json
│ │
│ ├── shared/ # 共享包
│ │ ├── src/
│ │ │ ├── constants/ # 常量
│ │ │ ├── types/ # 共享类型
│ │ │ └── utils/ # 共享工具
│ │ └── package.json
│ │
│ └── components/ # 共享组件库(可选)
│ ├── src/
│ └── package.json
│
├── .husky/ # Git钩子
├── pnpm-workspace.yaml
├── package.json
├── tsconfig.json
└── eslint.config.js
优势
- ✅ 开发效率高:Vite极速热更新,Element Plus组件丰富
- ✅ 类型安全强:全链路TypeScript,编译时发现问题
- ✅ 工程化完善:Monorepo管理,代码复用性好
- ✅ 生态成熟:Vue3官方推荐技术栈,社区活跃
- ✅ 性能优秀:UnoCSS按需生成,打包体积小
劣势
- ⚠️ Element Plus风格固定,定制UI成本较高
- ⚠️ UnoCSS学习曲线(但可替换为TailwindCSS)
适用场景
企业级中后台系统、快速交付项目、团队TypeScript熟练度高
---
📦 方案2:高度定制化方案
核心技术栈
架构模式: Monorepo (pnpm workspace)
构建工具: Vite 5.x
UI框架: Naive UI 2.x (更灵活的主题定制)
状态管理: Pinia 2.x
路由: Vue Router 4.x
HTTP: axios + 请求拦截器
验证码: 自研滑动验证组件 (Canvas实现)
Mock: msw (Mock Service Worker)
代码规范: ESLint 9.x + Prettier + Stylelint
类型检查: TypeScript 5.x + vue-tsc
提交规范: Husky + Commitlint + lint-staged
CSS方案: SCSS + CSS Modules
图标: 自定义SVG Sprite
动画: @vueuse/motion (声明式动画)
核心差异
- UI组件库:Naive UI提供更灵活的主题系统
- 验证码:自研Canvas滑动验证,可完全自定义样式
- Mock方案:MSW在Service Worker层拦截,更接近真实环境
- CSS方案:SCSS提供更强的样式控制能力
优势
- ✅ UI高度定制:Naive UI主题系统强大,适合品牌化需求
- ✅ Mock更真实:MSW模拟真实网络请求,利于调试
- ✅ 组件自主可控:核心组件自研,无第三方依赖风险
劣势
- ⚠️ 开发周期长(自研验证码需额外1-2天)
- ⚠️ 维护成本高(自研组件需持续维护)
适用场景
品牌化要求高、长期维护项目、团队有组件开发经验
---
📦 方案3:轻量化极简方案
核心技术栈
架构模式: 单仓库 (非Monorepo)
构建工具: Vite 5.x
UI框架: Ant Design Vue 4.x
状态管理: Pinia 2.x (仅核心状态)
路由: Vue Router 4.x
HTTP: 原生fetch + 封装
验证码: @alex_xu/vue-slider-captcha (开箱即用)
Mock: vite-plugin-mock
代码规范: ESLint 9.x + Prettier (简化配置)
类型检查: TypeScript 5.x
提交规范: simple-git-hooks (轻量级钩子)
CSS方案: TailwindCSS (快速开发)
图标: Ant Design Icons
核心差异
- 架构:放弃Monorepo,单仓库结构
- HTTP:使用原生fetch,减少axios依赖
- 工具链:简化配置,快速上手
优势
- ✅ 上手最快:配置简单,学习成本低
- ✅ 依赖少:减少npm包数量,安装速度快
- ✅ 适合小团队:单仓库管理简单
劣势
- ⚠️ 扩展性差(后期加Monorepo成本高)
- ⚠️ 代码复用困难(多项目场景不友好)
适用场景
小型项目、独立系统、快速验证原型
---
📊 方案对比矩阵
| 维度 | 方案1:现代化轻量级(推荐) | 方案2:高度定制化 | 方案3:轻量化极简 |
|--------------|----------------|-----------|-----------|
| 开发效率 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| 扩展性 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ |
| UI定制能力 | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
| 学习曲线 | ⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| 维护成本 | ⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| TypeScript支持 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ |
| 长期演进 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ |
| 团队协作 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐ |
| 首屏性能 | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
---
🎯 我的推荐
首选:方案1 - 现代化轻量级方案
理由:
1. 完美匹配您的需求(Monorepo + TypeScript)
2. 技术栈成熟稳定,社区支持好
3. Element Plus组件丰富,覆盖90%的中后台场景
4. UnoCSS性能优秀,按需生成CSS
5. 工程化完善,适合团队协作
**次选:**方案2(如果您有强烈的品牌化UI需求)
**不推荐:**方案3(与您的Monorepo需求不符)
---
🤔 请您确认
选项1: 采用方案1,进入【计划阶段】制定详细实施计划 ✅
选项2: 采用方案2,我将调整后续计划
选项3: 采用方案3,我将简化架构设计
选项4: 混合方案(如:方案1的架构 + 方案2的某些技术)
请告诉我您的选择,或直接说"方案1"我将进入计划阶段。
Todos
☒ 研究阶段:分析项目需求和技术栈
☐ 构思阶段:设计多个技术方案
☐ 计划阶段:制定详细执行计划
☐ 执行阶段:实施代码开发
☐ 优化阶段:代码质量优化
☐ 评审阶段:最终质量评估
Copy
⏺ [模式:计划] - 详细执行计划
📋 实施路线图
我将整个项目分解为 10个主要阶段,每个阶段包含原子级别的可执行步骤。
---
🏗️ 阶段 1: Monorepo基础架构搭建
目标
搭建pnpm workspace,配置TypeScript和构建工具
执行步骤
1.1 初始化Monorepo根目录
# 文件: package.json, pnpm-workspace.yaml
# 操作: 创建根package.json,配置pnpm workspace
预期结果: pnpm workspace识别packages/*下的子包
1.2 配置TypeScript根配置
# 文件: tsconfig.json, tsconfig.base.json
# 操作: 设置path映射、严格模式、装饰器支持
预期结果: 子包可继承根配置,支持@/*路径别名
1.3 创建子包结构
# 目录: packages/admin, packages/shared
# 操作: 初始化子包package.json,配置本地依赖
预期结果: pnpm install正常,子包间可相互引用
---
🔧 阶段 2: 代码规范和工具链配置
目标
配置ESLint、Prettier、Stylelint、Husky
执行步骤
2.1 配置ESLint 9.x
// 文件: eslint.config.js
// 规则: Vue3官方推荐 + TypeScript严格模式 + 自动修复
// 集成: @typescript-eslint, eslint-plugin-vue
预期结果: 运行pnpm lint可检测并自动修复代码问题
2.2 配置Prettier
// 文件: .prettierrc.json, .prettierignore
// 规则: 单引号、末尾逗号、行宽100
预期结果: 保存时自动格式化,与ESLint无冲突
2.3 配置Stylelint
// 文件: .stylelintrc.js
// 规则: SCSS支持、属性排序、BEM命名建议
预期结果: CSS/SCSS文件可被检测和格式化
2.4 配置Husky + Commitlint
# 文件: .husky/pre-commit, .husky/commit-msg, commitlint.config.js
# 钩子:
# - pre-commit: lint-staged检查暂存文件
# - commit-msg: 校验commit信息格式(conventional commits)
预期结果: 提交前自动检查代码,commit信息必须符合规范
---
🎨 阶段 3: Vite + Vue3 主应用初始化
目标
创建admin子包,配置Vite和基础插件
执行步骤
3.1 初始化Vue3项目
# 目录: packages/admin
# 操作: 安装vue、vite、@vitejs/plugin-vue
3.2 配置Vite
// 文件: packages/admin/vite.config.ts
// 配置:
// - 路径别名: @ -> src
// - 端口: 3000
// - 代理: /api -> mock
// - 插件: vue(), AutoImport, Components(自动导入组件)
预期结果: 运行pnpm dev可启动开发服务器
3.3 配置环境变量
# 文件: .env.development, .env.production
# 变量: VITE_APP_TITLE, VITE_APP_BASE_API
3.4 创建基础目录结构
packages/admin/src/
├── main.ts # 入口文件
├── App.vue # 根组件
├── layouts/ # 布局组件
├── views/ # 页面
│ ├── login/
│ └── dashboard/
├── components/ # 业务组件
├── router/ # 路由配置
│ ├── index.ts
│ └── modules/
├── stores/ # Pinia状态
│ ├── index.ts
│ ├── user.ts
│ └── app.ts
├── api/ # API接口
│ ├── request.ts # axios封装
│ └── modules/
├── mock/ # Mock数据
├── hooks/ # 组合式函数
├── utils/ # 工具函数
├── types/ # TypeScript类型
├── assets/ # 静态资源
└── styles/ # 全局样式
---
🎭 阶段 4: UI组件库和样式系统
目标
集成Element Plus、UnoCSS、图标库
执行步骤
4.1 安装Element Plus
// 文件: packages/admin/src/main.ts
// 操作: 按需导入Element Plus + 暗色主题CSS
// 插件: unplugin-element-plus (自动导入样式)
4.2 配置UnoCSS
// 文件: packages/admin/uno.config.ts
// 预设: presetUno, presetAttributify
// 规则: 主题色、间距、圆角等自定义规则
预期结果: 可使用原子类如flex items-center text-primary
4.3 配置图标
// 文件: packages/admin/vite.config.ts
// 插件: unplugin-icons (自动导入iconify图标)
// 用法: <i-ep-user /> 自动转换为Element Plus图标
4.4 创建全局样式
// 文件: packages/admin/src/styles/index.scss
// 内容:
// - 重置样式
// - CSS变量(主题色、间距)
// - 通用类(.ellipsis, .scrollbar-hide)
---
🔐 阶段 5: 认证系统(登录 + 滑动验证码)
目标
实现登录页面、滑动验证码、Token管理
执行步骤
5.1 安装滑动验证码组件
# 包: vue3-puzzle-vcode
# 文档: https://www.npmjs.com/package/vue3-puzzle-vcode
5.2 创建登录页面
<!-- 文件: packages/admin/src/views/login/index.vue -->
<!-- 功能:
- 用户名/密码表单(ElForm)
- 滑动验证码弹窗
- 记住密码(localStorage)
- 登录按钮防抖
-->
5.3 封装认证API
// 文件: packages/admin/src/api/modules/auth.ts
// 接口:
// - login(username, password): Promise<{token, userInfo}>
// - logout(): Promise<void>
// - getUserInfo(): Promise<UserInfo>
5.4 实现Token管理
// 文件: packages/admin/src/utils/auth.ts
// 函数:
// - getToken(): string | null (从localStorage读取)
// - setToken(token: string): void
// - removeToken(): void
5.5 配置axios拦截器
// 文件: packages/admin/src/api/request.ts
// 拦截器:
// - 请求拦截: 自动添加token到header
// - 响应拦截: 401跳转登录、统一错误提示
5.6 创建用户状态管理
// 文件: packages/admin/src/stores/user.ts
// 状态: token, userInfo, permissions
// 方法:
// - login(username, password)
// - logout()
// - getUserInfo()
---
🏛️ 阶段 6: 布局系统(2种布局)
目标
实现经典布局和双栏布局,支持动态切换
执行步骤
6.1 创建布局基础组件
packages/admin/src/layouts/
├── index.vue # 布局容器(根据配置切换)
├── ClassicLayout.vue # 经典布局(左侧菜单)
├── DoubleLayout.vue # 双栏布局(左侧一级+二级菜单)
└── components/
├── Header.vue # 顶栏(Logo、面包屑、工具栏)
├── Sidebar.vue # 左侧菜单
├── SidebarItem.vue # 菜单项(递归组件)
├── AppMain.vue # 主内容区(router-view)
├── TagsView.vue # 标签页
└── Settings.vue # 设置抽屉
6.2 ClassicLayout实现
<!-- 文件: packages/admin/src/layouts/ClassicLayout.vue -->
<!-- 结构:
<el-container>
<el-aside> Sidebar(可折叠) </el-aside>
<el-container>
<el-header> Header </el-header>
<TagsView />
<el-main> AppMain(router-view) </el-main>
</el-container>
</el-container>
-->
6.3 DoubleLayout实现
<!-- 文件: packages/admin/src/layouts/DoubleLayout.vue -->
<!-- 结构:
<el-container>
<el-aside width="64px"> 一级菜单(仅图标) </el-aside>
<el-aside width="200px"> 二级菜单 </el-aside>
<el-container>
<el-header> Header </el-header>
<TagsView />
<el-main> AppMain </el-main>
</el-container>
</el-container>
-->
6.4 侧边栏菜单组件
<!-- 文件: packages/admin/src/layouts/components/Sidebar.vue -->
<!-- 功能:
- 从路由meta读取菜单配置
- 支持多级嵌套(递归SidebarItem)
- 高亮当前激活菜单
- 折叠/展开动画
-->
6.5 顶栏组件
<!-- 文件: packages/admin/src/layouts/components/Header.vue -->
<!-- 功能:
- Logo + 系统名称
- 面包屑导航
- 右侧工具栏: 全屏、主题切换、用户下拉菜单
-->
---
🎨 阶段 7: 主题系统
目标
实现主题色切换、明暗模式、菜单宽度配置
执行步骤
7.1 创建主题状态管理
// 文件: packages/admin/src/stores/app.ts
// 状态:
// - layout: 'classic' | 'double' # 布局模式
// - theme: string # 主题色(HEX)
// - isDark: boolean # 暗色模式
// - sidebarWidth: number # 侧边栏宽度
// - isCollapse: boolean # 侧边栏是否折叠
// - showTagsView: boolean # 是否显示标签页
// - systemConfig: {logo, title, ...} # 系统配置
7.2 实现主题色切换
// 文件: packages/admin/src/hooks/useTheme.ts
// 功能:
// - setThemeColor(color): 动态修改CSS变量
// - Element Plus主题色同步
// - 持久化到localStorage
7.3 实现明暗模式切换
// 文件: packages/admin/src/hooks/useDark.ts
// 功能:
// - 切换<html>的class="dark"
// - Element Plus暗色主题CSS自动加载
// - 监听系统主题变化(可选)
7.4 实现设置抽屉
<!-- 文件: packages/admin/src/layouts/components/Settings.vue -->
<!-- 功能:
- 布局模式切换(单选组)
- 主题色选择器(ElColorPicker)
- 明暗模式开关(ElSwitch)
- 侧边栏宽度滑块(ElSlider: 180-280px)
- 系统配置表单(Logo URL、系统名称等)
- 重置按钮
-->
7.5 全屏功能
// 文件: packages/admin/src/hooks/useFullscreen.ts
// 功能:
// - 使用Fullscreen API
// - 兼容性处理(webkit前缀)
// - 全屏状态响应式
---
🏷️ 阶段 8: 标签页管理
目标
实现多标签页导航,支持右键菜单操作
执行步骤
8.1 创建标签页状态管理
// 文件: packages/admin/src/stores/tagsView.ts
// 状态: visitedViews: Array<{path, title, query, ...}>
// 方法:
// - addView(route): 新增标签
// - delView(route): 删除标签
// - delOthersViews(route): 关闭其他
// - delAllViews(): 关闭全部
// - updateView(route): 更新标签标题
8.2 实现标签页组件
<!-- 文件: packages/admin/src/layouts/components/TagsView.vue -->
<!-- 功能:
- 横向滚动标签列表
- 当前激活标签高亮
- 点击标签跳转路由
- 右键菜单: 刷新、关闭、关闭其他、关闭所有
- 固定首页标签(不可关闭)
-->
8.3 路由监听自动添加标签
// 文件: packages/admin/src/App.vue
// 逻辑:
// watch(route, (to) => {
// if (!to.meta.noCache) {
// tagsViewStore.addView(to)
// }
// })
---
🔒 阶段 9: 权限管理系统(按钮级)
目标
实现RBAC权限模型,支持按钮级权限控制
执行步骤
9.1 设计权限数据结构
// 文件: packages/admin/src/types/permission.ts
// 类型:
interface User {
id: string
username: string
roles: Role[]
}
interface Role {
id: string
name: string
permissions: Permission[]
}
interface Permission {
id: string
code: string // 如: 'user:create', 'user:delete'
name: string
type: 'menu' | 'button'
}
9.2 动态路由生成
// 文件: packages/admin/src/stores/permission.ts
// 功能:
// - filterAsyncRoutes(routes, roles): 根据角色过滤路由
// - 动态添加路由: router.addRoute()
9.3 路由守卫
// 文件: packages/admin/src/router/permission.ts
// 逻辑:
// router.beforeEach((to, from, next) => {
// if (hasToken) {
// if (!hasRoles) await getUserInfo() // 获取角色权限
// if (!hasAddRoutes) generateRoutes() // 动态添加路由
// next()
// } else {
// next('/login')
// }
// })
9.4 按钮级权限指令
// 文件: packages/admin/src/directives/permission.ts
// 指令: v-permission="['user:create']"
// 逻辑: 根据用户权限显示/隐藏按钮
9.5 权限判断Hook
// 文件: packages/admin/src/hooks/usePermission.ts
// 导出:
// - hasPermission(code: string): boolean
// - hasAnyPermission(codes: string[]): boolean
// - hasAllPermissions(codes: string[]): boolean
---
🎭 阶段 10: Mock数据和演示页面
目标
配置Mock数据,实现权限管理演示页面
执行步骤
10.1 配置Mock插件
// 文件: packages/admin/vite.config.ts
// 插件: vite-plugin-mock
// 配置: mockPath: './src/mock', localEnabled: true
10.2 创建Mock数据
// 文件: packages/admin/src/mock/user.ts
// 接口:
// - POST /api/auth/login: 返回token和用户信息
// - GET /api/user/info: 返回当前用户详情
// - GET /api/user/list: 用户列表(分页)
// - POST /api/user: 新增用户
// - PUT /api/user/:id: 编辑用户
// - DELETE /api/user/:id: 删除用户
// 文件: packages/admin/src/mock/role.ts
// 角色管理Mock
// 文件: packages/admin/src/mock/permission.ts
// 权限管理Mock
// 文件: packages/admin/src/mock/menu.ts
// 菜单管理Mock
10.3 创建权限管理页面
packages/admin/src/views/system/
├── user/
│ ├── index.vue # 用户列表(表格 + 搜索 + 按钮权限)
│ └── components/
│ └── UserDialog.vue # 新增/编辑弹窗
├── role/
│ ├── index.vue # 角色列表 + 权限分配
│ └── components/
│ └── PermissionTree.vue # 权限树(ElTree)
└── menu/
└── index.vue # 菜单管理(树形表格)
10.4 演示按钮级权限
<!-- 示例: packages/admin/src/views/system/user/index.vue -->
<template>
<el-button
v-permission="['user:create']"
@click="handleAdd"
>
新增用户
</el-button>
<el-button
v-permission="['user:delete']"
@click="handleDelete"
>
删除
</el-button>
</template>
---
📦 补充:shared共享包
目标
抽取可复用的类型、常量、工具到shared包
执行步骤
共享内容
// packages/shared/src/constants/index.ts
export const TOKEN_KEY = 'admin-token'
export const USER_INFO_KEY = 'user-info'
// packages/shared/src/types/common.ts
export interface PaginationParams {
page: number
pageSize: number
}
// packages/shared/src/utils/validate.ts
export const isEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
---
🎯 总结:10大阶段 + 预期时间
| 阶段 | 主要任务 | 预估时间 | 关键产出 |
|-----|--------------|-------|-------------------------|
| 1 | Monorepo基础架构 | 1小时 | pnpm workspace正常工作 |
| 2 | 代码规范工具链 | 1.5小时 | ESLint+Prettier+Husky生效 |
| 3 | Vite主应用初始化 | 1小时 | 开发服务器启动成功 |
| 4 | UI组件和样式系统 | 1.5小时 | Element Plus+UnoCSS可用 |
| 5 | 认证系统 | 3小时 | 登录+滑动验证码+Token管理 |
| 6 | 布局系统 | 4小时 | 2种布局+所有子组件 |
| 7 | 主题系统 | 3小时 | 主题色+明暗模式+设置抽屉 |
| 8 | 标签页管理 | 2小时 | 标签页+右键菜单 |
| 9 | 权限管理 | 4小时 | 动态路由+按钮级权限 |
| 10 | Mock+演示页面 | 3小时 | 权限管理页面 |
总计: 约24小时纯开发时间
---
⚠️ 关键依赖和注意事项
需要安装的核心依赖
{
"dependencies": {
"vue": "^3.4.0",
"vue-router": "^4.3.0",
"pinia": "^2.1.7",
"element-plus": "^2.6.0",
"axios": "^1.6.0",
"@vueuse/core": "^10.9.0",
"vue3-puzzle-vcode": "^1.1.0"
},
"devDependencies": {
"vite": "^5.2.0",
"@vitejs/plugin-vue": "^5.0.0",
"typescript": "^5.4.0",
"vue-tsc": "^2.0.0",
"eslint": "^9.0.0",
"@typescript-eslint/eslint-plugin": "^7.0.0",
"eslint-plugin-vue": "^9.24.0",
"prettier": "^3.2.0",
"stylelint": "^16.3.0",
"husky": "^9.0.0",
"lint-staged": "^15.2.0",
"commitlint": "^19.2.0",
"@unocss/vite": "^0.59.0",
"unplugin-auto-import": "^0.17.0",
"unplugin-vue-components": "^0.26.0",
"unplugin-icons": "^0.18.0",
"vite-plugin-mock": "^3.0.0"
}
}
SOLID原则应用
- 单一职责: 每个Store只管理一个领域(user、app、permission)
- 开闭原则: 布局组件通过插槽扩展,不修改源码
- 里氏替换: ClassicLayout和DoubleLayout实现相同接口
- 接口隔离: API按模块拆分(auth.ts、user.ts等)
- 依赖倒置: 组件依赖抽象的Store接口,不依赖具体实现
---
🤔 请您批准
我已完成详细的执行计划,包含:
- ✅ 10个主要开发阶段
- ✅ 每阶段的原子操作步骤
- ✅ 文件路径和代码结构
- ✅ 预期结果和时间估算
- ✅ SOLID原则应用说明
请您确认:
选项1: 批准计划,进入【执行阶段】开始编码 ✅
选项2: 调整某个阶段的实施细节
选项3: 暂停,先创建项目骨架让您review
请告诉我您的决定,或直接说"开始执行"我将进入执行阶段。
Todos
☒ 研究阶段:分析项目需求和技术栈
☒ 构思阶段:设计多个技术方案
☐ 计划阶段:制定详细执行计划
☐ 执行阶段:实施代码开发
☐ 优化阶段:代码质量优化
☐ 评审阶段:最终质量评估
Copy
✶ 实施代码开发… (esc to interrupt · ctrl+t to hide todos)
⎿ ☒ 研究阶段:分析项目需求和技术栈
☒ 构思阶段:设计多个技术方案
☒ 计划阶段:制定详细执行计划
☐ 执行阶段:实施代码开发
☐ 阶段1: Monorepo基础架构搭建
☐ 阶段2: 代码规范和工具链配置
☐ 阶段3: Vite + Vue3 主应用初始化
☐ 阶段4: UI组件库和样式系统
☐ 阶段5: 认证系统(登录+验证码)
☐ 阶段6: 布局系统(2种布局)
☐ 阶段7: 主题系统
☐ 阶段8: 标签页管理
☐ 阶段9: 权限管理系统
☐ 阶段10: Mock数据和演示页面
☐ 优化阶段:代码质量优化
☐ 评审阶段:最终质量评估
--dangerously-skip-permissions，可以玩会手机了，等它结束吧。
注意事项
- 要提前做好git分支管理,否则等你完全搞好了,然后又使用 AI 帮你提交代码的时候,一旦哪里出了问题,都回不过来了,而且你修复需要修复半天
- 我就是一股脑等它完成,完成之后使用 AI 帮我提交代码,我也是没管,谁知道我想再次运行看看结果的时候,就一堆报错,函数名称驼峰的一堆变成了小写,有逗号的地方都加了一堆分好,我又让 AI 修复了半天,简直要吐血
最后的代码地址
- https://github.com/sword-demon/vue3-admin-monorepo 这个是和提示词有关的,也是第一次让 AI 提交的产物,导致真正的代码没提交上来还错乱了
- https://github.com/sword-demon/vue3-admin-monorepo-submodule 真正的代码