docs: 迁移 spring-ai 通用文档到 rui-docs

- 添加 backend/项目实施规范.md
- 添加 backend/业务应用模块创建规则.md
- 添加 backend/guides/deployment-guide.md
- 添加 frontend/admin-ui-icon-guide.md
- 添加 frontend/admin-ui-status.md
- 更新 README.md 文档索引
This commit is contained in:
2026-06-04 09:03:21 +08:00
parent d0771597a6
commit 0666c3ec7b
9 changed files with 2340 additions and 2 deletions
+129
View File
@@ -0,0 +1,129 @@
# Admin-UI 图标体系说明文档
> 本文档记录 admin-ui 图标配置、映射规则及相关注意事项,避免每次重复分析代码。
---
## 一、图标体系概览
admin-ui 支持 **两类图标**,由 `RuiIcon.vue` 组件统一处理:
| 类型 | 格式示例 | 来源 | 渲染方式 |
|------|---------|------|---------|
| **Element Plus 图标** | `Setting``UserFilled``HomeFilled` | `@element-plus/icons-vue` | `<el-icon>` |
| **Tabler 图标(Iconify** | `tabler:settings``tabler:users` | `@iconify/vue` | `<Icon :icon="..." />` |
**判断规则**`RuiIcon.vue`):
- 如果字符串包含 `:` → 使用 Iconify 渲染(Tabler 图标)
- 否则 → 使用 Element Plus 图标组件渲染
---
## 二、图标选择器
**文件位置**`admin-ui/src/components/IconPicker.vue`
**支持四类图标**
1. **Element Plus** - 动态读取 `@element-plus/icons-vue` 全部图标
2. **Tabler** - 硬编码 102 个常用图标,以 `tabler:` 为前缀
3. **SVG** - 内联 SVG 代码
4. **图片/URL** - 粘贴图片 URL
**推荐使用 Tabler 图标**`tabler:` 前缀),与后端菜单存储格式保持一致。
---
## 三、后端菜单图标存储格式
**当前标准**:所有菜单图标统一使用 `tabler:` 前缀格式
**示例**
```
tabler:settings → 系统管理
tabler:users → 用户管理
tabler:menu-2 → 菜单管理
tabler:user-shield → 角色管理
tabler:building → 部门管理
tabler:book → 字典管理
tabler:id → 岗位管理
tabler:gift → 租户套餐
tabler:shield-check → 数据权限
tabler:award → 用户等级
tabler:history → 等级日志
tabler:device-desktop → 演示中心
tabler:palette → 图标演示
tabler:list → 列表演示
```
**历史变更**
- 早期使用 Element Plus 图标组件名(如 `SettingOutlined`
- 已执行升级脚本 `docs/sql/update_menu_icon.sql` 统一改为 `tabler:` 格式
---
## 四、前端图标映射规则
**文件位置**`admin-ui/src/composables/useMenu.ts`
`getIconName()` 函数处理逻辑:
1. 如果 `icon` 字段以 `tabler:` 开头 → **直接透传返回**
2. 否则 → 按原有映射规则转换为 Element Plus 图标名
**注意**
- 后端返回的 `icon` 字段应始终使用 `tabler:` 格式
- 前端布局文件(SideLayout/TopNavLayout/DoubleLayout)已改为使用 `RuiIcon` 组件渲染菜单图标,支持 `tabler:` 格式
---
## 五、布局文件中的图标渲染
**修改后的渲染方式**(统一使用 `RuiIcon`):
```vue
<!-- SideLayout.vue / TopNavLayout.vue -->
<template #title>
<RuiIcon v-if="item.icon" :icon="item.icon" :size="16" class="menu-icon" />
<span>{{ item.title }}</span>
</template>
<!-- DoubleLayout.vue图标栏 -->
<div class="icon-btn">
<RuiIcon :icon="item.icon" :size="20" />
</div>
```
**样式适配**(确保图标颜色与菜单主题一致):
```css
.menu-icon {
margin-right: 5px;
color: inherit;
}
```
---
## 六、新增功能时的图标规范
1. **优先使用 Tabler 图标**`tabler:` 前缀)
2. **在 IconPicker 中添加**:如果 IconPicker 的 Tabler 列表中没有需要的图标,添加到 `IconPicker.vue``tablerIcons` 数组
3. **后端菜单配置**:在 `config/menus/*.json` 中配置图标时,使用 `tabler:xxx` 格式
4. **前端自动适配**:无需修改前端代码,`RuiIcon` 组件会自动识别并渲染
---
## 七、常见问题
### Q: 为什么菜单图标显示不出来?
A: 检查后端返回的 `icon` 字段格式:
- 正确:`tabler:settings`
- 错误:`settings``Setting``tabler-settings`
### Q: 如何查看所有可用的 Tabler 图标?
A: 在菜单管理页面点击图标选择器,切换到 "Tabler" 标签页查看。
### Q: 能否使用 Element Plus 图标?
A: 可以,但不推荐。如果必须使用,直接写图标组件名(如 `Setting`),不要加 `tabler:` 前缀。
---
> **维护提示**:本文档位于 `/docs/admin-ui-icon-guide.md`,修改图标体系时必须同步更新。