资料项图标更新总结

更新日期: 2026-01-31 更新内容: 根据文件后缀使用真实的文档图标 SVG

更新内容

1. 创建文档图标工具函数

文件: src/utils/documentIcons.js

提供了以下函数：

getDocumentIcon(fileName)

根据文件名返回对应的文档图标路径

import { getDocumentIcon } from '@/utils/documentIcons'

getDocumentIcon('报告.pdf')        // '/assets/images/icon/doc/doc.svg'
getDocumentIcon('数据.xlsx')       // '/assets/images/icon/doc/xls.svg'
getDocumentIcon('图片.png')        // '/assets/images/icon/doc/png.svg'
getDocumentIcon('视频.mp4')        // '/assets/images/icon/doc/mp4.svg'

getDocumentLabel(fileName)

根据文件名返回文件类型标签

import { getDocumentLabel } from '@/utils/documentIcons'

getDocumentLabel('报告.pdf')   // 'PDF'
getDocumentLabel('数据.xlsx')  // 'Excel'
getDocumentLabel('图片.png')   // 'PNG'

其他辅助函数

• isPDF(fileName) - 判断是否为 PDF 文件
• isImage(fileName) - 判断是否为图片文件
• isVideo(fileName) - 判断是否为视频文件

2. 支持的文件类型

文件类型	扩展名	图标文件	标签
通用文档	.pdf	doc.svg	PDF
Word	.doc, .docx	word.svg	Word
Excel	.xls, .xlsx	xls.svg	Excel
PPT	.ppt, .pptx	ppt.svg	PPT
图片	.jpg, .jpeg, .png, .gif, .webp	jpeg.svg, png.svg	JPG, PNG, GIF, WebP
视频	.mp4, .mov, .avi, .mkv	mp4.svg	MP4, MOV, AVI, MKV
矢量图	.svg	svg.svg	SVG
文本	.txt, .md	txt.svg	TXT, MD
压缩包	.zip, .rar, .7z	其他文件.svg	ZIP, RAR, 7Z
其他	-	其他文件.svg	DOC

3. 更新的页面

资料列表页 (src/pages/material-list/index.vue)

改动:

• ✅ 导入 getDocumentIcon 和 getDocumentLabel
• ✅ 将 IconFont 图标改为 image 标签
• ✅ 动态显示文档图标（根据 item.fileName）
• ✅ 动态显示文件类型标签（根据 item.fileName）

示例:

<!-- 之前 -->
<IconFont :name="item.iconName || 'order'" size="32" :color="item.iconColor || '#2563EB'" />

<!-- 现在 -->
<image
  :src="getDocumentIcon(item.fileName)"
  class="w-[48rpx] h-[48rpx]"
  mode="aspectFit"
/>

产品详情页 (src/pages/product-detail/index.vue)

改动:

• ✅ 导入 getDocumentIcon
• ✅ 将 IconFont 图标改为 image 标签
• ✅ 动态显示文档图标（根据 file.fileName）

示例:

<!-- 之前 -->
<IconFont :name="file.iconName" size="24" :color="file.iconColor" />

<!-- 现在 -->
<image
  :src="getDocumentIcon(file.fileName)"
  class="w-[48rpx] h-[48rpx]"
  mode="aspectFit"
/>

4. 图标展示规范

尺寸规范

• 列表图标: w-[48rpx] h-[48rpx] (24px × 24px)
• 容器背景: w-[88rpx] h-[88rpx]` (44px × 44px)
• 背景样式: 渐变背景 bg-gradient-to-br from-blue-50 to-blue-100

显示逻辑

// 自动根据文件扩展名匹配图标
// 找不到扩展名 → 使用 "其他文件.svg"
// 特殊扩展名优先匹配（如 .docx → word.svg）

图标文件位置

src/assets/images/icon/doc/
├── doc.svg              # PDF 通用文档
├── jpeg.svg            # JPG/JPEG 图片
├── mp4.svg             # MP4 视频
├── png.svg             # PNG 图片
├── ppt.svg             # PPT 演示文稿
├── svg.svg             # SVG 矢量图
├── txt.svg             # TXT 文本
├── word.svg            # Word 文档
├── xls.svg             # Excel 表格
└── 其他文件.svg        # 其他文件

使用示例

在新页面中使用

<template>
  <view v-for="file in fileList" :key="file.id">
    <image :src="getDocumentIcon(file.fileName)" class="doc-icon" />
    <text>{{ getDocumentLabel(file.fileName) }}</text>
  </view>
</template>

<script setup>
import { getDocumentIcon, getDocumentLabel } from '@/utils/documentIcons'
</script>

扩展新的文件类型

如果需要支持新的文件类型，在 src/utils/documentIcons.js 中添加：

const EXTENSION_ICON_MAP = {
  'newtype': '/assets/images/icon/doc/newtype.svg',
  // ...
};

优势

之前的问题

• ❌ 使用通用图标，无法区分文件类型
• ❌ 硬编码 iconName 和 iconColor，维护困难
• ❌ 所有文档显示相同图标

现在的优势

• ✅ 根据文件后缀自动匹配对应图标
• ✅ 直观展示文件类型
• ✅ 无需手动维护图标信息
• ✅ 统一的图标管理
• ✅ 易于扩展新文件类型

待优化项

可选优化（未实施）

• 收藏页面 (src/pages/favorites/index.vue) - 数据结构不包含 fileName，需要添加
• 首页资料展示 - 如有需要
• 图标懒加载优化
• 图标缓存机制

测试建议

测试文件类型

确保以下文件类型图标正确显示：

文档类:

• PDF 文件
• Word 文档 (.doc, .docx)
• Excel 表格 (.xls, .xlsx)
• PPT 演示文稿 (.ppt, .pptx)

图片类:

• JPG/JPEG
• PNG
• GIF
• WebP

其他:

• TXT 文本
• MP4 视频
• SVG 矢量图
• 压缩包

测试方法

1. 在资料列表页查看不同文件的图标
2. 在产品详情页查看附件的图标
3. 确认图标与文件类型匹配
4. 确认图标显示清晰、大小合适

相关文件

• 文档图标工具函数
• 资料列表页
• 产品详情页
• 图标目录