PayrollManagementSystem/frontend/src/components/layout/menuIcons.ts

import type { Component } from 'vue'

import {
  Avatar,
  Box,
  Briefcase,
  Calendar,
  DataLine,
  Histogram,
  House,
  Management,
  Money,
  Notebook,
  OfficeBuilding,
  PieChart,
  Postcard,
  SetUp,
  Shop,
  Stamp,
  Star,
  Tickets,
  TrendCharts,
  User,
  Van,
} from '@element-plus/icons-vue'

/**
 * 菜单图标注册表。
 *
 * **路由只写语义 key（meta.icon），不直接引用图标组件**：路由表保持轻量、
 * 序列化，图标实现换库或换风格时只改本文件，路由与菜单组件不动。
 *
 * 具名导入（不用 `import * as`）以保证摇树 —— 整包引入会把 200+ 图标打进
 * 产物。注册表里多余的图标同样会被摇掉，但会让「用了哪些」难以核对，
 * 只保留实际用到的。
 *
 * **全部取线性（outline）图标，不用 *-filled 变体**：侧栏同一层级混用实心与
 * 线性图标会让菜单看着不是一套语汇（设计稿 §04 的图标族：16px 线性）。
 * 首页用 House（线性房屋）而非 HomeFilled，人员管理用 Postcard（人员档案卡）
 * 而非 UserFilled —— 用户管理已占 User，人员改用档案卡以免两个「人」撞形。
 */
const ICONS = {
  home: House,
  users: User,
  roles: Avatar,
  'business-roles': Management,
  params: SetUp,
  settings: OfficeBuilding,
  approvals: Stamp,
  logs: Tickets,
  personnel: Postcard,
  products: Box,
  customers: Shop,
  businesses: Briefcase,
  shipments: Van,
  receipts: Money,
  rating: Star,
  ledger: Notebook,
  settlements: Calendar,
  'report-personal': DataLine,
  'report-department': Histogram,
  'report-business': TrendCharts,
  'report-payment': PieChart,
} satisfies Record<string, Component>

/** 菜单图标的语义 key（路由 meta.icon 的取值范围）。 */
export type MenuIconName = keyof typeof ICONS

/** 按语义 key 取图标；未配置时返回 undefined（菜单项只显示文字）。 */
export function menuIcon(name?: string): Component | undefined {
  return name ? (ICONS[name as MenuIconName] ?? undefined) : undefined
}