d8d-vite-starter/docs/fix-briefcase-icon-issue.md

BriefcaseOutlined 图标修复方案

问题描述

前端构建错误：无法从 @ant-design/icons 导入 BriefcaseOutlined 图标，导致 /admin/users 页面无法正常显示。

原因分析

@ant-design/icons 6.0.0 版本中可能移除了 BriefcaseOutlined 图标，或者图标名称发生了变化。

修复方案

方案1：替换为存在的图标（推荐）

在 src/client/admin/menu.tsx 中，将 BriefcaseOutlined 替换为 CarryOutOutlined 或 SnippetsOutlined。

具体修改：

// 修改前
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 的版本）。

{
  "dependencies": {
    "@ant-design/icons": "^5.6.1"
  }
}

然后执行：

npm install

推荐选择

选择方案1（替换图标），因为：

1. 保持依赖版本最新
2. CarryOutOutlined 语义相近，适合表示"工作岗位"
3. 避免将来版本兼容性问题

修复步骤

1. 编辑 src/client/admin/menu.tsx
2. 替换图标导入和使用
3. 重启开发服务器
4. 验证 /admin/users 页面可正常访问