# 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. 默认图标

## 使用方式

```typescript
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`