46 lines
1.4 KiB
Markdown
46 lines
1.4 KiB
Markdown
# 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 | 类型安全 |
|