Quellcode durchsuchen

🐛 fix(menu): 修复 BriefcaseOutlined 图标导入错误

- 将银龄岗管理菜单图标从 BriefcaseOutlined 替换为 CarryOutOutlined
- 解决因 @ant-design/icons 6.0.0 版本移除图标导致的构建错误

📝 docs: 添加 BriefcaseOutlined 图标修复方案文档

- 详细描述图标导入错误的原因分析
- 提供替换图标和降级依赖两种解决方案
- 推荐使用 CarryOutOutlined 作为替代图标并说明理由
yourname vor 7 Monaten
Ursprung
Commit
c53b6a09da
2 geänderte Dateien mit 76 neuen und 2 gelöschten Zeilen
  1. 74 0
      docs/fix-briefcase-icon-issue.md
  2. 2 2
      src/client/admin/menu.tsx

+ 74 - 0
docs/fix-briefcase-icon-issue.md

@@ -0,0 +1,74 @@
+# BriefcaseOutlined 图标修复方案
+
+## 问题描述
+前端构建错误:无法从 `@ant-design/icons` 导入 `BriefcaseOutlined` 图标,导致 `/admin/users` 页面无法正常显示。
+
+## 原因分析
+`@ant-design/icons` 6.0.0 版本中可能移除了 `BriefcaseOutlined` 图标,或者图标名称发生了变化。
+
+## 修复方案
+
+### 方案1:替换为存在的图标(推荐)
+在 `src/client/admin/menu.tsx` 中,将 `BriefcaseOutlined` 替换为 `CarryOutOutlined` 或 `SnippetsOutlined`。
+
+具体修改:
+```typescript
+// 修改前
+import {
+  UserOutlined,
+  DashboardOutlined,
+  TeamOutlined,
+  InfoCircleOutlined,
+  FileTextOutlined,
+  UsergroupAddOutlined,
+  BriefcaseOutlined,
+} from '@ant-design/icons';
+
+// 修改后
+import {
+  UserOutlined,
+  DashboardOutlined,
+  TeamOutlined,
+  InfoCircleOutlined,
+  FileTextOutlined,
+  UsergroupAddOutlined,
+  CarryOutOutlined,  // 替换 BriefcaseOutlined
+} from '@ant-design/icons';
+
+// 在菜单配置中更新图标使用
+{
+  key: 'silver-jobs',
+  label: '银龄岗管理',
+  icon: <CarryOutOutlined />,  // 替换 BriefcaseOutlined
+  path: '/admin/silver-jobs',
+  permission: 'silver-job:manage'
+}
+```
+
+### 方案2:降级 @ant-design/icons 版本
+修改 `package.json`,将 `@ant-design/icons` 从 `^6.0.0` 降级到 `^5.6.1`(包含 BriefcaseOutlined 的版本)。
+
+```json
+{
+  "dependencies": {
+    "@ant-design/icons": "^5.6.1"
+  }
+}
+```
+
+然后执行:
+```bash
+npm install
+```
+
+## 推荐选择
+选择方案1(替换图标),因为:
+1. 保持依赖版本最新
+2. `CarryOutOutlined` 语义相近,适合表示"工作岗位"
+3. 避免将来版本兼容性问题
+
+## 修复步骤
+1. 编辑 `src/client/admin/menu.tsx`
+2. 替换图标导入和使用
+3. 重启开发服务器
+4. 验证 `/admin/users` 页面可正常访问

+ 2 - 2
src/client/admin/menu.tsx

@@ -9,7 +9,7 @@ import {
   InfoCircleOutlined,
   FileTextOutlined,
   UsergroupAddOutlined,
-  BriefcaseOutlined,
+  CarryOutOutlined,
 } from '@ant-design/icons';
 
 export interface MenuItem {
@@ -98,7 +98,7 @@ export const useMenu = () => {
     {
       key: 'silver-jobs',
       label: '银龄岗管理',
-      icon: <BriefcaseOutlined />,
+      icon: <CarryOutOutlined />,
       path: '/admin/silver-jobs',
       permission: 'silver-job:manage'
     },