# 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: , // 替换 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` 页面可正常访问