43 lines
1.2 KiB
Markdown
43 lines
1.2 KiB
Markdown
# 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`
|