xk-docs/docs/projects/xk-admin/design.md

xk-admin 设计思路

架构决策

Monorepo 结构

采用 pnpm workspace + Turborepo 的 Monorepo 架构：

• apps/web-antd: 主应用，包含所有业务页面
• internal/: 内部共享包（构建配置、工具）
• packages/: 共享工作区包（可复用的组件库）
• playground/: 开发调试环境

Vben Admin Pro

选择 Vben Admin Pro 作为基础框架：

• 开箱即用的管理后台模板
• 完善的权限体系（菜单权限 + 按钮权限）
• 丰富的布局和主题配置
• TypeScript 支持

多角色菜单

通过后端动态菜单接口 (auth/menu) 加载菜单，不同角色看到不同菜单：

• 前端不硬编码菜单结构
• 菜单数据由后端 xk_menu 表管理
• 支持菜单层级、图标、排序、隐藏

按钮权限

使用 v-access:code 自定义指令控制按钮级权限：

• 权限码从后端 auth/codes 接口获取
• 指令在元素级别控制显示/隐藏
• 避免前端硬编码权限判断

技术选型

决策	选择	理由
框架	Vue 3 + Vben Admin Pro	成熟的管理后台方案
UI 库	Ant Design Vue	企业级 UI 组件库
状态管理	Pinia	Vue 3 官方推荐
路由	Vue Router	Vue 生态标准
构建	Vite + Turborepo	快速开发和构建
包管理	pnpm	高效的依赖管理
语言	TypeScript	类型安全