refactor(favorites): 优化我的收藏页面布局和图标显示

## 主要更新

### 优化
- 重构"我的收藏"页面 (`src/pages/favorites/index.vue`)
  - 使用真实文档图标系统 (getDocumentIcon)，根据文件扩展名自动显示
  - 去掉图标背景容器，图标居中显示并放大到 56rpx
  - 查看和删除按钮参考计划书页面样式重新设计
    - 横向排列（非纵向）
    - 右对齐布局
    - 去掉背景色，使用简洁的图标+文字样式
  - 优化整体布局结构
    - 标题与图标并排显示
    - 信息区域分层更清晰
  - 移除冗余数据字段 (icon/iconColor/iconBgClass)

### 技术细节
- 集成 getDocumentIcon 工具函数
- 统一操作按钮交互体验
- 响应式布局优化

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

+## [2026-01-31] - 优化我的收藏页面
+
+### 优化
+- 重构"我的收藏"页面布局和样式 (`src/pages/favorites/index.vue`)
+  - 使用真实文档图标系统，根据文件扩展名自动显示对应图标
+  - 去掉图标背景容器，图标居中显示，适当放大（56rpx）
+  - 查看和删除按钮布局参考计划书页面样式（横向排列、右对齐）
+  - 优化页面结构，标题与图标并排，信息更清晰
+
+---
+
+**详细信息**：
+- **影响文件**: src/pages/favorites/index.vue
+- **技术栈**: Vue 3, Taro, TailwindCSS
+- **测试状态**: 已通过
+- **备注**:
+  - 集成 `getDocumentIcon` 工具函数
+  - 统一操作按钮样式，与计划书页面保持一致
+
+---
+
 ## [2026-01-31] - 优化首页热门资料展示
 ## [2026-01-31] - 优化首页热门资料展示
 
 
 ### 优化
 ### 优化

 <template>
 <template>
-  <view class="min-h-screen bg-[#F9FAFB] pb-[200rpx] flex flex-col items-center">
+  <view class="min-h-screen bg-gray-50 pb-[200rpx]">
     <!-- Header -->
     <!-- Header -->
     <NavHeader title="我的收藏" />
     <NavHeader title="我的收藏" />
 
 
     <!-- Tabs Section -->
     <!-- Tabs Section -->
-    <!-- Background image from design -->
-    <view
-      class="w-[706rpx] h-[144rpx] mt-[40rpx] bg-white flex items-center px-[32rpx] rounded-[24rpx]">
-      <div class="flex overflow-x-auto no-scrollbar space-x-[24rpx] w-full items-center">
+    <view class="bg-white mt-[2rpx] px-[24rpx] py-[20rpx]">
+      <div class="flex overflow-x-auto no-scrollbar space-x-[24rpx]">
         <div v-for="(tab, index) in tabs" :key="index"
         <div v-for="(tab, index) in tabs" :key="index"
           class="px-[32rpx] py-[16rpx] rounded-full text-[28rpx] whitespace-nowrap transition-colors"
           class="px-[32rpx] py-[16rpx] rounded-full text-[28rpx] whitespace-nowrap transition-colors"
-          :class="activeTab === tab.key ? 'bg-[#007AFF] text-white' : 'bg-transparent text-[#6B7280]'"
+          :class="activeTab === tab.key ? 'bg-[#2563EB] text-white' : 'bg-[#F3F4F6] text-[#6B7280]'"
           @click="activeTab = tab.key">
           @click="activeTab = tab.key">
           {{ tab.title }}
           {{ tab.title }}
         </div>
         </div>
@@ -18,39 +16,41 @@
     </view>
     </view>
 
 
     <!-- List Section -->
     <!-- List Section -->
-    <view class="w-[706rpx] mt-[32rpx] flex flex-col gap-[24rpx]">
+    <view class="px-[24rpx] py-[24rpx]">
       <view v-for="(item, index) in filteredList" :key="index"
       <view v-for="(item, index) in filteredList" :key="index"
-        class="bg-white rounded-[24rpx] p-[32rpx] shadow-sm flex items-center justify-between">
-        <view class="flex items-center flex-1 mr-[24rpx]">
-          <!-- Icon (Text Type Icons as requested) -->
-          <view class="w-[80rpx] h-[80rpx] rounded-[16rpx] flex items-center justify-center mr-[24rpx]"
-            :class="item.iconBgClass">
-            <IconFont :name="item.icon" size="24" :color="item.iconColor" />
+        class="bg-white rounded-[24rpx] p-[24rpx] mb-[24rpx] shadow-sm">
+
+        <!-- Header with Icon -->
+        <view class="flex gap-[24rpx] mb-[16rpx]">
+          <!-- Document Icon -->
+          <view class="w-[64rpx] h-[64rpx] flex-shrink-0 flex items-center justify-center">
+            <image :src="getDocumentIcon(item.title)" class="w-[56rpx] h-[56rpx]" mode="aspectFit" />
           </view>
           </view>
 
 
-          <!-- Text Content -->
-          <view class="flex flex-col flex-1 min-w-0">
-            <view class="text-[32rpx] text-[#1F2937] font-bold mb-[8rpx] line-clamp-2 leading-[1.4]">{{ item.title }}</view>
-            <view class="flex flex-col items-start gap-[8rpx]">
-              <view class="bg-gray-100 px-[12rpx] py-[4rpx] rounded-[8rpx] text-[24rpx] text-[#9CA3AF] mt-1">{{ item.category
-                }}</view>
-              <view class="text-[24rpx] text-gray-400 mt-2">{{ item.date }}</view>
-            </view>
+          <!-- Title -->
+          <view class="flex-1 min-w-0">
+            <view class="text-[30rpx] font-bold text-gray-900 leading-normal mb-[8rpx] line-clamp-2">{{ item.title }}</view>
           </view>
           </view>
         </view>
         </view>
 
 
-        <!-- Action Buttons -->
-        <view class="flex flex-col items-end gap-[16rpx] ml-[16rpx] flex-shrink-0">
-          <!-- View Button -->
-          <view class="flex items-center justify-center px-[20rpx] py-[10rpx] bg-blue-50 rounded-full active:bg-blue-100 transition-colors" @tap.stop="viewFile({...item, fileName: item.title})">
-            <IconFont name="eye" size="14" color="#2563EB" class="mr-[6rpx]" />
-            <text class="text-[24rpx] text-blue-600 font-medium leading-none">查看</text>
-          </view>
+        <!-- Info -->
+        <view class="flex justify-between items-center text-gray-500 text-[24rpx] mb-[24rpx]">
+          <text>{{ item.category }}</text>
+          <text>{{ item.date }}</text>
+        </view>
 
 
-          <!-- Delete Button -->
-          <view class="flex items-center justify-center px-[20rpx] py-[10rpx] bg-red-50 rounded-full active:bg-red-100 transition-colors" @tap.stop="onDelete(item)">
-            <IconFont name="del" size="14" color="#EF4444" class="mr-[6rpx]" />
-            <text class="text-[24rpx] text-red-500 font-medium leading-none">删除</text>
+        <!-- Divider -->
+        <view class="h-[1rpx] bg-gray-100 my-[20rpx]"></view>
+
+        <!-- Actions -->
+        <view class="flex justify-end gap-[24rpx]">
+          <view class="flex items-center text-blue-600" @tap="viewFile({...item, fileName: item.title})">
+            <IconFont name="eye" size="14" class="mr-[8rpx]" />
+            <text class="text-[24rpx]">查看</text>
+          </view>
+          <view class="flex items-center text-red-500" @tap="onDelete(item)">
+            <IconFont name="del" size="14" class="mr-[8rpx]" />
+            <text class="text-[24rpx]">删除</text>
           </view>
           </view>
         </view>
         </view>
       </view>
       </view>
@@ -73,6 +73,7 @@ import { ref, computed } from 'vue'
 import Taro from '@tarojs/taro'
 import Taro from '@tarojs/taro'
 import { useGo } from '@/hooks/useGo'
 import { useGo } from '@/hooks/useGo'
 import { useFileOperation } from '@/composables/useFileOperation'
 import { useFileOperation } from '@/composables/useFileOperation'
+import { getDocumentIcon } from '@/utils/documentIcons'
 import IconFont from '@/components/IconFont.vue'
 import IconFont from '@/components/IconFont.vue'
 import TabBar from '@/components/TabBar.vue'
 import TabBar from '@/components/TabBar.vue'
 import NavHeader from '@/components/NavHeader.vue'
 import NavHeader from '@/components/NavHeader.vue'
@@ -88,6 +89,11 @@ const tabs = [
   { title: '产品知识', key: 'product' }
   { title: '产品知识', key: 'product' }
 ]
 ]
 
 
+/**
+ * Mock 数据：收藏列表
+ *
+ * @description 包含不同类型的文档文件
+ */
 const list = ref([
 const list = ref([
   {
   {
     id: 1,
     id: 1,
@@ -95,10 +101,6 @@ const list = ref([
     category: '入职培训',
     category: '入职培训',
     date: '2024-01-15',
     date: '2024-01-15',
     type: 'onboarding',
     type: 'onboarding',
-    icon: 'order', // Represents a document
-    iconColor: '#EF4444', // Red for PDF
-    iconBgClass: 'bg-red-50',
-    // 使用真实的可下载 PDF 文件（W3C 测试文件）
     downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E%E4%B9%90%E7%88%B1%E8%A7%89%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%BE%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf'
     downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/1_%E7%BE%8E%E4%B9%90%E7%88%B1%E8%A7%89%E6%95%99%E8%82%B22024%E9%A1%B9%E7%9B%AE%E5%9B%BE%E5%BD%B1%E4%BB%8B%E7%BB%8D_.pdf'
   },
   },
   {
   {
@@ -107,10 +109,6 @@ const list = ref([
     category: '签单相关',
     category: '签单相关',
     date: '2024-01-14',
     date: '2024-01-14',
     type: 'signing',
     type: 'signing',
-    icon: 'order', // Represents a document
-    iconColor: '#2563EB', // Blue for Word
-    iconBgClass: 'bg-blue-50',
-    // 使用真实的可下载图片（作为文档示例）
     downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/%E8%80%81%E6%9D%A5%E8%B5%9B%E9%9A%90%E7%A7%81%E6%94%BF%E7%AD%96.docx'
     downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/%E8%80%81%E6%9D%A5%E8%B5%9B%E9%9A%90%E7%A7%81%E6%94%BF%E7%AD%96.docx'
   },
   },
   {
   {
@@ -119,10 +117,6 @@ const list = ref([
     category: '产品知识',
     category: '产品知识',
     date: '2024-01-13',
     date: '2024-01-13',
     type: 'product',
     type: 'product',
-    icon: 'order', // Represents a document
-    iconColor: '#F59E0B', // Orange for PPT
-    iconBgClass: 'bg-orange-50',
-    // 使用另一个图片作为示例
     downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/%E8%82%A1%E5%88%A4%E5%90%88%E5%8F%8B%E7%94%A8%E7%9F%A5%E8%AF%86%E8%AF%B4%E6%98%8E20240112110417414.pptx'
     downloadUrl: 'https://cdn.ipadbiz.cn/manulife/document/%E8%82%A1%E5%88%A4%E5%90%88%E5%8F%8B%E7%94%A8%E7%9F%A5%E8%AF%86%E8%AF%B4%E6%98%8E20240112110417414.pptx'
   },
   },
   {
   {
@@ -131,10 +125,7 @@ const list = ref([
     category: '政策解读',
     category: '政策解读',
     date: '2024-01-12',
     date: '2024-01-12',
     type: 'other',
     type: 'other',
-    icon: 'edit', // Represents text
-    iconColor: '#10B981', // Green for TXT
-    iconBgClass: 'bg-green-50',
-    downloadUrl: '' // 空下载地址，用于测试无地址情况
+    downloadUrl: ''
   }
   }
 ])
 ])
 
 
@@ -143,6 +134,9 @@ const filteredList = computed(() => {
   return list.value.filter(item => item.type === activeTab.value)
   return list.value.filter(item => item.type === activeTab.value)
 })
 })
 
 
+/**
+ * 删除收藏
+ */
 const onDelete = (item) => {
 const onDelete = (item) => {
   Taro.showModal({
   Taro.showModal({
     title: '提示',
     title: '提示',