# 图标导入错误修复

## 问题描述

```
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
Check the render method of `HomeView`.
```

## 问题原因

在优化 HomeView 和 Sidebar 时，使用了不存在的图标：
- `IconClipboardList` - 不存在
- `IconTag` - 不存在

## 解决方案

查看 `web/libs/ui/src/assets/icons/index.ts` 找到正确的图标名称：

### 修复前
```typescript
import { IconFolder, IconClipboardList, IconTag } from '@humansignal/ui';
```

### 修复后
```typescript
import { IconFolder, IconClipboardCheck, IconAnnotation } from '@humansignal/ui';
```

## 图标映射

| 用途 | 错误的图标 | 正确的图标 |
|------|-----------|-----------|
| 任务管理 | `IconClipboardList` | `IconClipboardCheck` |
| 我的标注 | `IconTag` | `IconAnnotation` |
| 项目管理 | `IconFolder` | `IconFolder` ✅ |

## 修改的文件

1. `web/apps/lq_label/src/views/home-view.tsx`
   - 更新导入语句
   - 更新 features 数组中的图标

2. `web/apps/lq_label/src/components/layout/sidebar.tsx`
   - 更新导入语句
   - 更新 menuItems 数组中的图标

## 如何查找可用图标

1. 查看图标索引文件：
   ```
   web/libs/ui/src/assets/icons/index.ts
   ```

2. 搜索相关关键词：
   ```bash
   # 搜索包含 "clipboard" 的图标
   grep -i "clipboard" web/libs/ui/src/assets/icons/index.ts
   
   # 搜索包含 "annotation" 的图标
   grep -i "annotation" web/libs/ui/src/assets/icons/index.ts
   ```

3. 常用图标列表：
   - `IconFolder` - 文件夹
   - `IconClipboardCheck` - 剪贴板/任务
   - `IconAnnotation` - 标注
   - `IconHome` - 首页
   - `IconMenu` - 菜单
   - `IconX` / `IconClose` - 关闭
   - `IconCheck` - 勾选
   - `IconTrash` - 删除
   - `IconEdit` / `IconPencil` - 编辑
   - `IconPlus` - 添加
   - `IconSearch` - 搜索
   - `IconSettings` / `IconGear` - 设置

## 验证方法

1. 检查编译错误：
   ```bash
   yarn nx serve lq_label
   ```

2. 检查浏览器控制台是否有错误

3. 确认图标正确显示在页面上

## 总结

修复后，所有图标都能正确导入和显示：
- ✅ HomeView 的 Features 卡片图标
- ✅ Sidebar 的菜单项图标
- ✅ 移动端菜单按钮图标
- ✅ NotFoundView 的首页图标

记住：在使用 @humansignal/ui 的图标前，先检查 `icons/index.ts` 确认图标是否存在！