修复 任务详情 fileurl 下展示问题

src/pages-task/task-detail/components/NormalTaskDetail.vue

@@ -38,11 +38,7 @@
           >
             <image
               class="task-detail-field__file-icon"
-              :src="
-                attachment.ext === 'pdf'
-                  ? '/static/images/icon/pdf.svg'
-                  : '/static/images/icon/ppt.svg'
-              "
+              :src="getFileIcon(attachment.ext)"
               mode="aspectFit"
             />
           </view>
@@ -82,8 +78,34 @@ const IMAGE_AND_FILE_FIELD_TYPE = 'imgandfile'
 const FILE_URL_FIELD_TYPE = 'fileurl'
 const DICT_FIELD_TYPES = new Set(['select', 'domain', 'multiple_select'])
 const FILE_EXTENSIONS = new Set(['pdf', 'ppt', 'pptx'])
+const IMAGE_EXTENSIONS = new Set([
+  'avif',
+  'bmp',
+  'gif',
+  'heic',
+  'heif',
+  'jfif',
+  'jpeg',
+  'jpg',
+  'png',
+  'svg',
+  'tif',
+  'tiff',
+  'webp',
+])
+const DOCUMENT_EXTENSIONS = new Set(['doc', 'docx'])
+const PRESENTATION_EXTENSIONS = new Set(['ppt', 'pptx'])
+const SPREADSHEET_EXTENSIONS = new Set(['xls', 'xlsx'])
 const FILE_DOWNLOAD_TIMEOUT = 60_000
 
+const FILE_ICONS = {
+  default: '/static/images/icon/file.svg',
+  document: '/static/images/icon/doc.svg',
+  pdf: '/static/images/icon/pdf.svg',
+  presentation: '/static/images/icon/ppt.svg',
+  spreadsheet: '/static/images/icon/xls.svg',
+} as const
+
 type DetailAttachmentType = 'image' | 'file'
 
 interface DetailAttachment {
@@ -144,7 +166,7 @@ const dictLabelsByField = computed(() => {
  * 对应的字典中获取 label，字典缺失或值无法完整匹配时直接回显 value。
  * 其余情况在 item.label 为空时用 value 回显。
  * img、sign 类型转成图片列表；imgAndFile 根据值末尾来源标记转成图片或文件；
- * fileurl 解析 value 中的 JSON 数组，取 url 和 fileName 展示附件；
+ * fileurl 解析 value 中的 JSON 数组，取 url 和 fileName 展示附件，仅图片后缀使用图片预览；
  * 其余类型显示标准化后的 label。
  */
 const contentFields = computed(() => {
@@ -245,15 +267,16 @@ const parseFileUrlAttachments = (value: string): DetailAttachment[] => {
     return files.flatMap((file): DetailAttachment[] => {
       if (!file || typeof file.url !== 'string' || !file.url.trim()) return []
 
+      const urlFileName = extractFileName(file.url)
       const name =
         typeof file.fileName === 'string' && file.fileName.trim()
           ? file.fileName.trim()
-          : extractFileName(file.url)
-      const ext = getFileExtension(name)
+          : urlFileName
+      const ext = getFileExtension(name) || getFileExtension(urlFileName)
 
       return [
         {
-          type: isFileAttachment(getAttachmentSuffix(file.url), ext) ? 'file' : 'image',
+          type: isFileUrlImage(getAttachmentSuffix(file.url), ext) ? 'image' : 'file',
           url: toFullUrl(file.url),
           name,
           ext,
@@ -266,7 +289,10 @@ const parseFileUrlAttachments = (value: string): DetailAttachment[] => {
 }
 
 const parseAttachments = (value: string, fieldMode: 'image' | 'mixed'): DetailAttachment[] => {
-  return value
+  const normalizedValue = value.trim()
+  if (!normalizedValue || /^\[\s*\]$/.test(normalizedValue)) return []
+
+  return normalizedValue
     .split(',')
     .map((storedUrl) => storedUrl.trim())
     .filter(Boolean)
@@ -298,6 +324,21 @@ const isFileAttachment = (suffix: string, ext: string): boolean => {
   return FILE_EXTENSIONS.has(ext)
 }
 
+const isFileUrlImage = (suffix: string, ext: string): boolean => {
+  if (ext) return IMAGE_EXTENSIONS.has(ext)
+
+  return Boolean(suffix && suffix !== '4')
+}
+
+const getFileIcon = (ext: string): string => {
+  if (ext === 'pdf') return FILE_ICONS.pdf
+  if (DOCUMENT_EXTENSIONS.has(ext)) return FILE_ICONS.document
+  if (PRESENTATION_EXTENSIONS.has(ext)) return FILE_ICONS.presentation
+  if (SPREADSHEET_EXTENSIONS.has(ext)) return FILE_ICONS.spreadsheet
+
+  return FILE_ICONS.default
+}
+
 const extractFileName = (url: string): string => {
   const cleanUrl = url.replace(/;[1-4](?=$|[?#])/i, '').split(/[?#]/)[0]
   const encodedName = cleanUrl.slice(cleanUrl.lastIndexOf('/') + 1)

src/static/images/icon/file.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1789974846047" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7145" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M842.666667 285.866667l-187.733334-187.733334c-14.933333-14.933333-32-21.333333-53.333333-21.333333H234.666667C194.133333 74.666667 160 108.8 160 149.333333v725.333334c0 40.533333 34.133333 74.666667 74.666667 74.666666h554.666666c40.533333 0 74.666667-34.133333 74.666667-74.666666V337.066667c0-19.2-8.533333-38.4-21.333333-51.2z m-44.8 44.8c-2.133333 2.133333-4.266667 0-8.533334 0h-170.666666c-6.4 0-10.666667-4.266667-10.666667-10.666667V149.333333c0-2.133333 0-6.4-2.133333-8.533333 0 0 2.133333 0 2.133333 2.133333l189.866667 187.733334z m-8.533334 554.666666H234.666667c-6.4 0-10.666667-4.266667-10.666667-10.666666V149.333333c0-6.4 4.266667-10.666667 10.666667-10.666666h311.466666c-2.133333 4.266667-2.133333 6.4-2.133333 10.666666v170.666667c0 40.533333 34.133333 74.666667 74.666667 74.666667h170.666666c4.266667 0 6.4 0 10.666667-2.133334V874.666667c0 6.4-4.266667 10.666667-10.666667 10.666666z" fill="#d81e06" p-id="7146"></path><path d="M640 693.333333H341.333333c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h298.666667c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32zM640 522.666667H341.333333c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32h298.666667c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32zM341.333333 416h85.333334c17.066667 0 32-14.933333 32-32s-14.933333-32-32-32h-85.333334c-17.066667 0-32 14.933333-32 32s14.933333 32 32 32z" fill="#d81e06" p-id="7147"></path></svg>

src/static/images/icon/xls.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1789974805379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5937" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M968.704 135.168h-430.08v752.64h430.08c15.36 0 26.624-12.288 26.624-26.624V162.816c0-15.36-11.264-27.648-26.624-27.648z" fill="#4CAF50" p-id="5938"></path><path d="M727.04 270.336h188.416v80.896H727.04z m0 268.288h188.416v80.896H727.04z m0 134.144h188.416v80.896H727.04z m0-268.288h188.416v80.896H727.04zM538.624 270.336h134.144v80.896H538.624z m0 268.288h134.144v80.896H538.624z m0 134.144h134.144v80.896H538.624z m0-268.288h134.144v80.896H538.624z" fill="#FFFFFF" p-id="5939"></path><path d="M592.896 996.352L28.672 888.832V135.168L592.896 27.648z" fill="#2E7D32" p-id="5940"></path><path d="M379.904 696.32l-63.488-119.808c-2.048-4.096-5.12-12.288-7.168-24.576H307.2c-1.024 6.144-4.096 14.336-8.192 25.6L235.52 696.32h-99.328l117.76-184.32-107.52-184.32h101.376l53.248 110.592c4.096 9.216 8.192 19.456 11.264 30.72h1.024c2.048-7.168 6.144-17.408 11.264-31.744L381.952 327.68h92.16L364.544 509.952 478.208 696.32h-98.304z" fill="#FFFFFF" p-id="5941"></path></svg>