xtraderClient/docs/api/categoryIcons.md

categoryIcons.ts

路径：src/api/categoryIcons.ts

功能用途

根据分类的 label/slug 自动解析 MDI 图标名和颜色，供首页分类 Tab 使用。项目已引入 @mdi/font，图标名为 mdi-xxx 格式。

核心能力

• resolveCategoryIcon：根据 label/slug 返回 MDI 图标名，无匹配时返回 DEFAULT_CATEGORY_ICON
• resolveCategoryIconColor：返回 Vuetify 颜色名或 CSS 颜色
• DEFAULT_CATEGORY_ICON：默认图标 mdi-tag-outline

匹配优先级

1. 节点已有 icon 且以 mdi- 开头 → 直接使用
2. 精确匹配 slug
3. 精确匹配 label
4. 关键词匹配 label（LABEL_KEYWORDS）
5. 默认图标

使用方式

import {
  resolveCategoryIcon,
  resolveCategoryIconColor,
  DEFAULT_CATEGORY_ICON,
} from '@/api/categoryIcons'

// 在模板中
<v-icon :color="resolveCategoryIconColor(item) ?? 'grey'">
  {{ item.icon || resolveCategoryIcon(item) || DEFAULT_CATEGORY_ICON }}
</v-icon>

扩展方式

1. 新增分类图标：在 ICON_MAP 中增加 slug -> mdi-xxx 映射
2. 新增颜色：在 ICON_COLOR_MAP 或 LABEL_COLOR_KEYWORDS 中增加
3. 正则匹配：在 LABEL_KEYWORDS 中使用 RegExp，如 /^\d+[mhd]$/i