From 3c7ac61ca41f5010d54c9cfd9a5426ca029d38b5 Mon Sep 17 00:00:00 2001 From: Wenjie Zhang Date: Fri, 5 Jun 2026 01:29:18 +0800 Subject: [PATCH] =?UTF-8?q?feat(web):=20=E6=96=B0=E5=A2=9E=E6=96=87?= =?UTF-8?q?=E4=BB=B6=E7=B1=BB=E5=9E=8B=E5=BD=A9=E8=89=B2=E5=9B=BE=E6=A0=87?= =?UTF-8?q?=E8=B5=84=E6=BA=90=E4=B8=8E=E7=BB=9F=E4=B8=80=E5=9B=BE=E6=A0=87?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 将 files 图标重命名为英文语义命名，并新增 markdown(MD)、python(PY) 图标 - 新增 file_icon.js，按扩展名/目录解析对应彩色图标 URL - 新增 FileTypeIcon 组件，作为文件/文件夹图标的统一渲染入口 --- web/src/assets/icons/files/archive.svg | 1 + web/src/assets/icons/files/audio.svg | 1 + web/src/assets/icons/files/cad.svg | 1 + web/src/assets/icons/files/code.svg | 1 + web/src/assets/icons/files/file.svg | 1 + .../assets/icons/files/folder-enterprise.svg | 1 + .../assets/icons/files/folder-favorite.svg | 1 + .../assets/icons/files/folder-personal.svg | 1 + web/src/assets/icons/files/folder-trash.svg | 1 + web/src/assets/icons/files/folder.svg | 1 + web/src/assets/icons/files/image.svg | 1 + web/src/assets/icons/files/markdown.svg | 1 + web/src/assets/icons/files/pdf.svg | 1 + web/src/assets/icons/files/ppt.svg | 1 + web/src/assets/icons/files/psd.svg | 1 + web/src/assets/icons/files/python.svg | 1 + web/src/assets/icons/files/spreadsheet.svg | 1 + web/src/assets/icons/files/text.svg | 1 + web/src/assets/icons/files/video.svg | 1 + web/src/assets/icons/files/web.svg | 1 + web/src/assets/icons/files/word.svg | 1 + web/src/components/common/FileTypeIcon.vue | 36 +++++ web/src/utils/file_icon.js | 142 ++++++++++++++++++ 23 files changed, 199 insertions(+) create mode 100644 web/src/assets/icons/files/archive.svg create mode 100644 web/src/assets/icons/files/audio.svg create mode 100644 web/src/assets/icons/files/cad.svg create mode 100644 web/src/assets/icons/files/code.svg create mode 100644 web/src/assets/icons/files/file.svg create mode 100644 web/src/assets/icons/files/folder-enterprise.svg create mode 100644 web/src/assets/icons/files/folder-favorite.svg create mode 100644 web/src/assets/icons/files/folder-personal.svg create mode 100644 web/src/assets/icons/files/folder-trash.svg create mode 100644 web/src/assets/icons/files/folder.svg create mode 100644 web/src/assets/icons/files/image.svg create mode 100644 web/src/assets/icons/files/markdown.svg create mode 100644 web/src/assets/icons/files/pdf.svg create mode 100644 web/src/assets/icons/files/ppt.svg create mode 100644 web/src/assets/icons/files/psd.svg create mode 100644 web/src/assets/icons/files/python.svg create mode 100644 web/src/assets/icons/files/spreadsheet.svg create mode 100644 web/src/assets/icons/files/text.svg create mode 100644 web/src/assets/icons/files/video.svg create mode 100644 web/src/assets/icons/files/web.svg create mode 100644 web/src/assets/icons/files/word.svg create mode 100644 web/src/components/common/FileTypeIcon.vue create mode 100644 web/src/utils/file_icon.js diff --git a/web/src/assets/icons/files/archive.svg b/web/src/assets/icons/files/archive.svg new file mode 100644 index 00000000..c6a9fe7c --- /dev/null +++ b/web/src/assets/icons/files/archive.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/assets/icons/files/audio.svg b/web/src/assets/icons/files/audio.svg new file mode 100644 index 00000000..7864d428 --- /dev/null +++ b/web/src/assets/icons/files/audio.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/assets/icons/files/cad.svg b/web/src/assets/icons/files/cad.svg new file mode 100644 index 00000000..cf4eb8f2 --- /dev/null +++ b/web/src/assets/icons/files/cad.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/assets/icons/files/code.svg b/web/src/assets/icons/files/code.svg new file mode 100644 index 00000000..5a05b781 --- /dev/null +++ b/web/src/assets/icons/files/code.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/assets/icons/files/file.svg b/web/src/assets/icons/files/file.svg new file mode 100644 index 00000000..6fa6b1a4 --- /dev/null +++ b/web/src/assets/icons/files/file.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/assets/icons/files/folder-enterprise.svg b/web/src/assets/icons/files/folder-enterprise.svg new file mode 100644 index 00000000..e42e4403 --- /dev/null +++ b/web/src/assets/icons/files/folder-enterprise.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/assets/icons/files/folder-favorite.svg b/web/src/assets/icons/files/folder-favorite.svg new file mode 100644 index 00000000..1cfaec4d --- /dev/null +++ b/web/src/assets/icons/files/folder-favorite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/assets/icons/files/folder-personal.svg b/web/src/assets/icons/files/folder-personal.svg new file mode 100644 index 00000000..6f971a61 --- /dev/null +++ b/web/src/assets/icons/files/folder-personal.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/assets/icons/files/folder-trash.svg b/web/src/assets/icons/files/folder-trash.svg new file mode 100644 index 00000000..6bf61555 --- /dev/null +++ b/web/src/assets/icons/files/folder-trash.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/assets/icons/files/folder.svg b/web/src/assets/icons/files/folder.svg new file mode 100644 index 00000000..e5f52911 --- /dev/null +++ b/web/src/assets/icons/files/folder.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/assets/icons/files/image.svg b/web/src/assets/icons/files/image.svg new file mode 100644 index 00000000..5c298d1d --- /dev/null +++ b/web/src/assets/icons/files/image.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/assets/icons/files/markdown.svg b/web/src/assets/icons/files/markdown.svg new file mode 100644 index 00000000..6582fef0 --- /dev/null +++ b/web/src/assets/icons/files/markdown.svg @@ -0,0 +1 @@ +MD \ No newline at end of file diff --git a/web/src/assets/icons/files/pdf.svg b/web/src/assets/icons/files/pdf.svg new file mode 100644 index 00000000..d2c71780 --- /dev/null +++ b/web/src/assets/icons/files/pdf.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/assets/icons/files/ppt.svg b/web/src/assets/icons/files/ppt.svg new file mode 100644 index 00000000..71917a76 --- /dev/null +++ b/web/src/assets/icons/files/ppt.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/assets/icons/files/psd.svg b/web/src/assets/icons/files/psd.svg new file mode 100644 index 00000000..1ec920ee --- /dev/null +++ b/web/src/assets/icons/files/psd.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/assets/icons/files/python.svg b/web/src/assets/icons/files/python.svg new file mode 100644 index 00000000..c7a8c355 --- /dev/null +++ b/web/src/assets/icons/files/python.svg @@ -0,0 +1 @@ +PY \ No newline at end of file diff --git a/web/src/assets/icons/files/spreadsheet.svg b/web/src/assets/icons/files/spreadsheet.svg new file mode 100644 index 00000000..ab411e40 --- /dev/null +++ b/web/src/assets/icons/files/spreadsheet.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/assets/icons/files/text.svg b/web/src/assets/icons/files/text.svg new file mode 100644 index 00000000..552438af --- /dev/null +++ b/web/src/assets/icons/files/text.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/assets/icons/files/video.svg b/web/src/assets/icons/files/video.svg new file mode 100644 index 00000000..2412825e --- /dev/null +++ b/web/src/assets/icons/files/video.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/assets/icons/files/web.svg b/web/src/assets/icons/files/web.svg new file mode 100644 index 00000000..6bdc0ee1 --- /dev/null +++ b/web/src/assets/icons/files/web.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/assets/icons/files/word.svg b/web/src/assets/icons/files/word.svg new file mode 100644 index 00000000..b8a180f6 --- /dev/null +++ b/web/src/assets/icons/files/word.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/web/src/components/common/FileTypeIcon.vue b/web/src/components/common/FileTypeIcon.vue new file mode 100644 index 00000000..7a0bdba9 --- /dev/null +++ b/web/src/components/common/FileTypeIcon.vue @@ -0,0 +1,36 @@ + + + + + diff --git a/web/src/utils/file_icon.js b/web/src/utils/file_icon.js new file mode 100644 index 00000000..0ce6f7bf --- /dev/null +++ b/web/src/utils/file_icon.js @@ -0,0 +1,142 @@ +// 文件 / 文件夹类型图标（彩色 SVG），用于在文件路径前渲染。 +// 注意：仅用于「渲染文件/文件夹名称前的类型图标」，按钮图标请勿使用此处的资源。 +import archiveIcon from '@/assets/icons/files/archive.svg?url' +import audioIcon from '@/assets/icons/files/audio.svg?url' +import cadIcon from '@/assets/icons/files/cad.svg?url' +import codeIcon from '@/assets/icons/files/code.svg?url' +import fileIcon from '@/assets/icons/files/file.svg?url' +import imageIcon from '@/assets/icons/files/image.svg?url' +import markdownIcon from '@/assets/icons/files/markdown.svg?url' +import pdfIcon from '@/assets/icons/files/pdf.svg?url' +import pptIcon from '@/assets/icons/files/ppt.svg?url' +import psdIcon from '@/assets/icons/files/psd.svg?url' +import pythonIcon from '@/assets/icons/files/python.svg?url' +import spreadsheetIcon from '@/assets/icons/files/spreadsheet.svg?url' +import textIcon from '@/assets/icons/files/text.svg?url' +import videoIcon from '@/assets/icons/files/video.svg?url' +import webIcon from '@/assets/icons/files/web.svg?url' +import wordIcon from '@/assets/icons/files/word.svg?url' +import folderIcon from '@/assets/icons/files/folder.svg?url' +import folderEnterpriseIcon from '@/assets/icons/files/folder-enterprise.svg?url' +import folderFavoriteIcon from '@/assets/icons/files/folder-favorite.svg?url' +import folderPersonalIcon from '@/assets/icons/files/folder-personal.svg?url' +import folderTrashIcon from '@/assets/icons/files/folder-trash.svg?url' + +export const FOLDER_ICONS = { + default: folderIcon, + enterprise: folderEnterpriseIcon, + favorite: folderFavoriteIcon, + personal: folderPersonalIcon, + trash: folderTrashIcon +} + +const EXTENSION_ICONS = { + // 文档 + pdf: pdfIcon, + doc: wordIcon, + docx: wordIcon, + rtf: wordIcon, + ppt: pptIcon, + pptx: pptIcon, + xls: spreadsheetIcon, + xlsx: spreadsheetIcon, + csv: spreadsheetIcon, + // 文本 / Markdown + txt: textIcon, + text: textIcon, + log: textIcon, + md: markdownIcon, + markdown: markdownIcon, + mdx: markdownIcon, + // 代码 + py: pythonIcon, + js: codeIcon, + mjs: codeIcon, + cjs: codeIcon, + jsx: codeIcon, + ts: codeIcon, + tsx: codeIcon, + vue: codeIcon, + json: codeIcon, + yaml: codeIcon, + yml: codeIcon, + toml: codeIcon, + ini: codeIcon, + conf: codeIcon, + env: codeIcon, + sh: codeIcon, + bash: codeIcon, + bat: codeIcon, + go: codeIcon, + rs: codeIcon, + c: codeIcon, + h: codeIcon, + cpp: codeIcon, + java: codeIcon, + css: codeIcon, + less: codeIcon, + scss: codeIcon, + sql: codeIcon, + xml: codeIcon, + // 网页 + html: webIcon, + htm: webIcon, + // 图片 + png: imageIcon, + jpg: imageIcon, + jpeg: imageIcon, + gif: imageIcon, + bmp: imageIcon, + webp: imageIcon, + svg: imageIcon, + apng: imageIcon, + avif: imageIcon, + ico: imageIcon, + // 设计 / 工程 + psd: psdIcon, + dwg: cadIcon, + dxf: cadIcon, + // 音视频 + mp3: audioIcon, + wav: audioIcon, + flac: audioIcon, + aac: audioIcon, + ogg: audioIcon, + m4a: audioIcon, + mp4: videoIcon, + mov: videoIcon, + avi: videoIcon, + mkv: videoIcon, + webm: videoIcon, + flv: videoIcon, + // 压缩包 + zip: archiveIcon, + rar: archiveIcon, + '7z': archiveIcon, + tar: archiveIcon, + gz: archiveIcon +} + +const getExtension = (name) => { + const cleanName = String(name || '') + .trim() + .toLowerCase() + .split(/[?#]/)[0] + const fileName = cleanName.split('/').pop() || '' + const dotIndex = fileName.lastIndexOf('.') + if (dotIndex <= 0) return '' + return fileName.slice(dotIndex + 1) +} + +/** + * 解析文件 / 文件夹对应的彩色图标 URL。 + * @param {string} name 文件名或路径（目录可以 `/` 结尾） + * @param {object} [options] + * @param {boolean} [options.isDir] 是否为目录 + * @param {string} [options.folderVariant] 文件夹图标变体：default | enterprise | favorite | personal | trash + */ +export const resolveFileIconUrl = (name, { isDir = false, folderVariant = 'default' } = {}) => { + const isDirectory = isDir || String(name || '').endsWith('/') + if (isDirectory) return FOLDER_ICONS[folderVariant] || FOLDER_ICONS.default + return EXTENSION_ICONS[getExtension(name)] || fileIcon +}