feat: 项目加载优化

Yi.Ai.Vue3/FONTAWESOME_MIGRATION.md

@@ -0,0 +1,133 @@
+# FontAwesome 图标迁移指南
+
+## 迁移步骤
+
+### 1. 在组件中使用 FontAwesomeIcon
+
+```vue
+<!-- 旧方式：Element Plus 图标 -->
+<template>
+  <el-icon>
+    <Check />
+  </el-icon>
+</template>
+
+<script setup lang="ts">
+import { Check } from '@element-plus/icons-vue';
+</script>
+```
+
+```vue
+<!-- 新方式：FontAwesome -->
+<template>
+  <FontAwesomeIcon icon="check" />
+</template>
+
+<!-- 或带 props -->
+<template>
+  <FontAwesomeIcon icon="check" size="lg" />
+  <FontAwesomeIcon icon="spinner" spin />
+  <FontAwesomeIcon icon="magnifying-glass" size="xl" />
+</template>
+```
+
+### 2. 自动映射工具
+
+使用 `getFontAwesomeIcon` 函数自动映射图标名：
+
+```typescript
+import { getFontAwesomeIcon } from '@/utils/icon-mapping';
+
+// 将 Element Plus 图标名转换为 FontAwesome 图标名
+const faIcon = getFontAwesomeIcon('Check'); // 返回 'check'
+const faIcon2 = getFontAwesomeIcon('ArrowLeft'); // 返回 'arrow-left'
+```
+
+### 3. Props 说明
+
+| Prop | 类型 | 可选值 | 说明 |
+|------|------|--------|------|
+| icon | string | 任意 FontAwesome 图标名 | 图标名称（不含 fa- 前缀） |
+| size | string | xs, sm, lg, xl, 2x, 3x, 4x, 5x | 图标大小 |
+| spin | boolean | true/false | 是否旋转 |
+| pulse | boolean | true/false | 是否脉冲动画 |
+| rotation | number | 0, 90, 180, 270 | 旋转角度 |
+
+### 4. 常用图标对照表
+
+| Element Plus | FontAwesome |
+|--------------|-------------|
+| Check | check |
+| Close | xmark |
+| Delete | trash |
+| Edit | pen-to-square |
+| Plus | plus |
+| Search | magnifying-glass |
+| Refresh | rotate-right |
+| Loading | spinner |
+| Download | download |
+| ArrowLeft | arrow-left |
+| ArrowRight | arrow-right |
+| User | user |
+| Setting | gear |
+| View | eye |
+| Hide | eye-slash |
+| Lock | lock |
+| Share | share-nodes |
+| Heart | heart |
+| Star | star |
+| Clock | clock |
+| Calendar | calendar |
+| ChatLineRound | comment |
+| Bell | bell |
+| Document | file |
+| Picture | image |
+
+### 5. 批量迁移示例
+
+```vue
+<!-- 迁移前 -->
+<template>
+  <div>
+    <el-icon><Check /></el-icon>
+    <el-icon><Close /></el-icon>
+    <el-icon><Delete /></el-icon>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Check, Close, Delete } from '@element-plus/icons-vue';
+</script>
+
+<!-- 迁移后 -->
+<template>
+  <div>
+    <FontAwesomeIcon icon="check" />
+    <FontAwesomeIcon icon="xmark" />
+    <FontAwesomeIcon icon="trash" />
+  </div>
+</template>
+
+<script setup lang="ts">
+// 不需要 import，FontAwesomeIcon 组件已自动导入
+</script>
+```
+
+## 注意事项
+
+1. **无需手动导入**：FontAwesomeIcon 组件已在 `vite.config.ts` 中配置为自动导入
+2. **图标名格式**：使用小写、带连字符的图标名（如 `magnifying-glass`）
+3. **完整图标列表**：访问 [FontAwesome 官网](https://fontawesome.com/search?o=r&m=free) 查看所有可用图标
+4. **渐进步骤**：可以逐步迁移，Element Plus 图标和 FontAwesome 可以共存
+
+## 优化建议
+
+1. **减少包体积**：迁移后可以移除 `@element-plus/icons-vue` 依赖
+2. **统一图标风格**：FontAwesome 图标风格更统一
+3. **更好的性能**：FontAwesome 按需加载，不会加载未使用的图标
+
+## 查找图标
+
+- [Solid Icons 搜索](https://fontawesome.com/search?o=r&m=free)
+- 图标名格式：`fa-solid fa-icon-name`
+- 在代码中使用时只需：`icon="icon-name"`