From 2a00dc7ef47cbc9169fe92072143af6cefaab869 Mon Sep 17 00:00:00 2001
From: oneao <hi_itao@163.com>
Date: Tue, 28 Apr 2026 20:31:31 +0800
Subject: [PATCH] u

---
 .../documents/optimize-class-names-plan.md    | 181 ++++
 code/file-preview/g3-file/common.js           | 239 ++++++
 code/file-preview/g3-file/icon.js             |  47 ++
 code/file-preview/g3-file/index.css           | 329 +++-----
 code/file-preview/g3-file/index.js            | 789 ++++++------------
 code/file-preview/g3-file/language.js         | 120 +++
 code/file-preview/index.html                  |  10 +-
 7 files changed, 980 insertions(+), 735 deletions(-)
 create mode 100644 code/file-preview/g3-file/.trae/documents/optimize-class-names-plan.md

diff --git a/code/file-preview/g3-file/.trae/documents/optimize-class-names-plan.md b/code/file-preview/g3-file/.trae/documents/optimize-class-names-plan.md
new file mode 100644
index 00000000..494b8eff
--- /dev/null
+++ b/code/file-preview/g3-file/.trae/documents/optimize-class-names-plan.md
@@ -0,0 +1,181 @@
+# 上传功能实现计划
+
+## 1. 需求分析
+
+### 1.1 现有功能
+
+* 当前 `G3File` 组件的上传功能通过 `onUpload` 回调函数处理
+
+* 上传按钮点击时，会获取所有状态为 `pending` 的文件并调用 `onUpload` 回调
+
+* 没有内置的上传实现，完全依赖外部回调
+
+### 1.2 需求目标
+
+* 实现阿里云内部上传方法
+
+* 保留外部方法，允许用户动态获取阿里云key等信息
+
+* 支持外部自定义上传方法
+
+* 只上传未上传（状态为 `pending`）的文件
+
+* 上传成功后，将上传成功的 fileitem 传给外部调用，上传成功一个就触发一次
+
+## 2. 技术方案
+
+### 2.1 核心功能设计
+
+1. **上传配置**：添加上传相关的配置选项，包括阿里云上传配置和自定义上传方法
+2. **上传方法**：实现阿里云内部上传方法和外部自定义上传方法的支持
+3. **上传流程**：优化上传流程，只上传未上传的文件，上传成功后触发回调
+4. **状态管理**：管理文件的上传状态，包括 `pending`、`uploading`、`uploaded`、`failed` 等
+
+### 2.2 配置选项
+
+* `uploadConfig`：上传配置对象，包含阿里云上传配置和自定义上传方法
+
+* `onUploadSuccess`：上传成功回调，上传成功一个文件就触发一次
+
+* `onUploadError`：上传失败回调
+
+* `onUploadComplete`：所有文件上传完成回调
+
+### 2.3 上传流程
+
+1. 用户点击上传按钮
+2. 组件获取所有状态为 `pending` 的文件
+3. 检查是否配置了自定义上传方法，如果有则使用自定义方法
+4. 如果没有自定义上传方法，则使用阿里云内部上传方法
+5. 逐个上传文件，更新文件状态为 `uploading`
+6. 上传成功后，更新文件状态为 `uploaded`，并触发 `onUploadSuccess` 回调
+7. 上传失败后，更新文件状态为 `failed`，并触发 `onUploadError` 回调
+8. 所有文件上传完成后，触发 `onUploadComplete` 回调
+
+## 3. 实现步骤
+
+### 3.1 修改 HTML 结构
+
+* 无需修改 HTML 结构，使用现有的上传按钮
+
+### 3.2 扩展 JavaScript 功能
+
+1. **添加上传配置选项**：在 `defaults` 中添加上传相关的配置选项
+2. **实现上传方法**：
+
+   * `internalUpload`：内部上传方法，支持阿里云上传
+
+   * `handleUpload`：处理上传逻辑，支持自定义上传方法
+3. **更新上传流程**：修改 `$btnUpload` 的点击事件处理，使用新的上传逻辑
+4. **添加回调方法**：实现 `onUploadSuccess`、`onUploadError`、`onUploadComplete` 回调
+
+### 3.3 优化 CSS 样式
+
+* 为上传状态添加相应的样式，如上传中、上传失败等
+
+### 3.4 测试和验证
+
+1. 测试阿里云内部上传功能
+2. 测试外部自定义上传方法
+3. 测试上传状态管理
+4. 测试回调函数触发
+
+## 4. 预期效果
+
+### 4.1 上传功能
+
+* 支持阿里云内部上传
+
+* 支持外部自定义上传方法
+
+* 只上传未上传的文件
+
+* 上传成功后触发回调
+
+### 4.2 状态管理
+
+* 清晰的上传状态管理
+
+* 上传中、上传成功、上传失败等状态的视觉反馈
+
+### 4.3 回调机制
+
+* 上传成功一个文件就触发一次 `onUploadSuccess` 回调
+
+* 上传失败触发 `onUploadError` 回调
+
+* 所有文件上传完成触发 `onUploadComplete` 回调
+
+## 5. 风险评估
+
+### 5.1 潜在风险
+
+* 阿里云上传配置复杂，可能出现配置错误
+
+* 自定义上传方法可能与内部上传逻辑冲突
+
+* 上传过程中可能出现网络错误
+
+### 5.2 风险缓解措施
+
+* 提供详细的配置文档
+
+* 确保自定义上传方法与内部上传逻辑的兼容性
+
+* 添加错误处理和重试机制
+
+## 6. 实现细节
+
+### 6.1 上传配置
+
+```javascript
+uploadConfig: {
+  aliyun: {
+    // 阿里云配置是可选的
+    // getUploadToken 是必须的，用于动态获取上传凭证
+    getUploadToken: null // 动态获取上传凭证的函数，返回 Promise
+  },
+  customUpload: null // 自定义上传方法
+}
+```
+
+### 6.2 回调函数
+
+```javascript
+onUploadSuccess: function(file) {
+  // 上传成功回调
+},
+onUploadError: function(file, error) {
+  // 上传失败回调
+},
+onUploadComplete: function(successCount, failCount) {
+  // 所有文件上传完成回调
+}
+```
+
+### 6.3 上传方法
+
+* `internalUpload(file, callback)`：内部上传方法
+
+* `handleUpload(files)`：处理上传逻辑
+
+## 7. 代码结构
+
+### 7.1 主要修改文件
+
+* `custom-file/index.js`：扩展上传功能
+
+### 7.2 新增方法
+
+* `internalUpload`：内部上传方法
+
+* `handleUpload`：处理上传逻辑
+
+* `updateFileStatus`：更新文件状态
+
+### 7.3 修改方法
+
+* `init`：初始化上传配置
+
+* `bindEvents`：更新上传按钮的点击事件处理
+
diff --git a/code/file-preview/g3-file/common.js b/code/file-preview/g3-file/common.js
index e69de29b..b03f5070 100644
--- a/code/file-preview/g3-file/common.js
+++ b/code/file-preview/g3-file/common.js
@@ -0,0 +1,239 @@
+var G3FileUtils = {
+  /**
+   * 格式化文件大小
+   * @param {number} bytes - 文件大小（字节）
+   * @returns {string} 格式化后的大小
+   */
+  formatFileSize: function (bytes) {
+    var numBytes = typeof bytes === "string" ? parseFloat(bytes) : bytes;
+    if (
+      numBytes === null ||
+      numBytes === undefined ||
+      isNaN(numBytes) ||
+      numBytes <= 0
+    ) {
+      return "-";
+    }
+
+    var k = 1024;
+    var sizes = ["B", "KB", "MB", "GB", "TB"];
+
+    var i = Math.floor(Math.log(numBytes) / Math.log(k));
+    i = Math.max(0, Math.min(i, sizes.length - 1));
+
+    return (numBytes / Math.pow(k, i)).toFixed(2) + " " + sizes[i];
+  },
+
+  /**
+   * 格式化日期
+   * @param {string} dateStr - 日期字符串
+   * @returns {string} 格式化后的日期
+   */
+  formatDate: function (dateStr) {
+    if (!dateStr) return "-";
+
+    var date = new Date(dateStr);
+
+    if (isNaN(date.getTime())) {
+      return "-";
+    }
+
+    var year = date.getFullYear();
+    var month = ("0" + (date.getMonth() + 1)).slice(-2);
+    var day = ("0" + date.getDate()).slice(-2);
+    var hours = ("0" + date.getHours()).slice(-2);
+    var minutes = ("0" + date.getMinutes()).slice(-2);
+    var seconds = ("0" + date.getSeconds()).slice(-2);
+
+    return (
+      year +
+      "-" +
+      month +
+      "-" +
+      day +
+      " " +
+      hours +
+      ":" +
+      minutes +
+      ":" +
+      seconds
+    );
+  },
+
+  /**
+   * 判断是否为图片文件
+   * @param {string} filename - 文件名
+   * @returns {boolean} 是否为图片文件
+   */
+  isImageFile: function (filename) {
+    if (!filename || typeof filename !== "string") return false;
+
+    const ext = filename.slice(filename.lastIndexOf(".") + 1).toLowerCase();
+    const imageExts = new Set(["jpg", "jpeg", "png", "gif", "bmp", "webp"]);
+
+    return imageExts.has(ext);
+  },
+
+  /**
+   * 获取文件图标
+   * @param {string} filename - 文件名
+   * @returns {string} 图标HTML
+   */
+  getFileIcon: function (filename) {
+    var ext = filename.split(".").pop().toLowerCase();
+
+    if (this.isImageFile(filename)) {
+      return "";
+    }
+
+    // 根据不同的文件类型显示不同的图标
+    const audioTypes = ["mp3", "wav", "aac", "flac", "ogg"];
+    if (audioTypes.includes(ext)) {
+      return G3FileIcons.file.audio;
+    }
+
+    // 视频类型
+    const videoTypes = ["mp4", "avi", "mkv", "mov", "wmv"];
+    if (videoTypes.includes(ext)) {
+      return G3FileIcons.file.video;
+    }
+
+    if (ext === "txt") {
+      return G3FileIcons.file.txt;
+    }
+
+    if (ext === "pdf") {
+      return G3FileIcons.file.pdf;
+    }
+
+    // 文档类型
+    const documentTypes = ["docx", "xlsx", "pptx", "office"];
+    if (documentTypes.includes(ext)) {
+      return G3FileIcons.file.docs;
+    }
+
+    // 压缩包类型
+    const archiveTypes = ["zip", "rar", "tar", "gz"];
+    if (archiveTypes.includes(ext)) {
+      return G3FileIcons.file.zip;
+    }
+
+    return G3FileIcons.file.default;
+  },
+
+  /**
+   * 获取唯一文件名
+   * @param {string} fileName - 原始文件名
+   * @param {Set} files - 已存在的文件名集合
+   * @returns {string} 唯一文件名
+   */
+  getUniqueFileName: function (fileName, files) {
+    const originalFileName = fileName;
+    let uniqueFileName = fileName;
+    let counter = 1;
+
+    while (files.has(uniqueFileName)) {
+      const fileNameWithoutExtension = originalFileName.replace(
+        /\.[^/.]+$/,
+        "",
+      );
+      const extension = originalFileName.slice(
+        originalFileName.lastIndexOf("."),
+      );
+      uniqueFileName = `${fileNameWithoutExtension} (${counter})${extension}`;
+      counter++;
+    }
+
+    return uniqueFileName;
+  },
+
+  /**
+   * 压缩图片
+   * @param {File} file - 图片文件
+   * @param {Object} options - 压缩选项
+   * @returns {Promise<File|Blob>} 压缩后的文件
+   */
+  compressImage: async function (file, options = {}) {
+    const {
+      minSize = 300 * 1024,
+      maxSize = 1.2 * 1024 * 1024,
+      maxWidth = 1920,
+      maxHeight = 1920,
+    } = options;
+
+    if (!file || !file.type.startsWith("image/")) return file;
+
+    const originSize = file.size;
+
+    if (originSize <= maxSize) {
+      return file;
+    }
+
+    const img = await new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        const image = new Image();
+        image.onload = () => resolve(image);
+        image.onerror = reject;
+        image.src = reader.result;
+      };
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+
+    let w = img.width;
+    let h = img.height;
+
+    const scale = Math.min(1, maxWidth / w, maxHeight / h);
+    w = Math.round(w * scale);
+    h = Math.round(h * scale);
+
+    canvas.width = w;
+    canvas.height = h;
+    ctx.drawImage(img, 0, 0, w, h);
+
+    const getBlob = (q) =>
+      new Promise((resolve) => {
+        canvas.toBlob((b) => resolve(b), "image/jpeg", q);
+      });
+
+    let quality = 0.92;
+
+    if (originSize > 4 * 1024 * 1024) {
+      quality = 0.88;
+    }
+
+    const blob = await getBlob(quality);
+
+    if (blob && blob.size < minSize) {
+      const safe = await getBlob(0.97);
+      return safe || file;
+    }
+
+    return blob || file;
+  },
+
+  /**
+   * 生成唯一ID
+   * @returns {string} 唯一ID
+   */
+  generateUniqueId: function () {
+    return "file_" + Math.random().toString(36).slice(2) + Date.now();
+  },
+
+  /**
+   * Base64 编码
+   * @param {string} str - 字符串
+   * @returns {string} Base64 编码结果
+   */
+  base64Encode: function (str) {
+    return btoa(
+      encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
+        return String.fromCharCode("0x" + p1);
+      }),
+    );
+  },
+};
diff --git a/code/file-preview/g3-file/icon.js b/code/file-preview/g3-file/icon.js
index e69de29b..08a48aa3 100644
--- a/code/file-preview/g3-file/icon.js
+++ b/code/file-preview/g3-file/icon.js
@@ -0,0 +1,47 @@
+var G3FileIcons = {
+  action: {
+    download: `
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 15V3m9 12v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10l5 5l5-5"/></g></svg>
+    `,
+    delete: `
+      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
+        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 6L6 18M6 6l12 12"/>
+      </svg>
+    `,
+    select: `
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.586 12.586L19 19M3.688 3.037a.497.497 0 0 0-.651.651l6.5 15.999a.501.501 0 0 0 .947-.062l1.569-6.083a2 2 0 0 1 1.448-1.479l6.124-1.579a.5.5 0 0 0 .063-.947z"/></svg>
+    `,
+    upload: `
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v12m5-7l-5-5l-5 5m14 7v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/></svg>
+    `,
+    preview: `
+      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m21 21l-4.34-4.34"/><circle cx="11" cy="11" r="8"/></g></svg>
+    `,
+    more: `
+      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M17 12h.01M12 12h.01M7 12h.01"/></g></svg>
+    `,
+    
+  },
+  file: {
+    default: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><!-- Icon from Fluent UI System Color Icons by Microsoft Corporation - https://github.com/microsoft/fluentui-system-icons/blob/main/LICENSE --><g fill="none"><path fill="url(#SVGsXCcfeOf)" d="M8.004 1L9.5 4.5L13 6l-.008 7.5a1.5 1.5 0 0 1-1.5 1.5H4.5A1.5 1.5 0 0 1 3 13.5v-11A1.5 1.5 0 0 1 4.5 1z"/><path fill="url(#SVGUVHt30XG)" fill-opacity=".5" d="M8.004 1L9.5 4.5L13 6l-.008 7.5a1.5 1.5 0 0 1-1.5 1.5H4.5A1.5 1.5 0 0 1 3 13.5v-11A1.5 1.5 0 0 1 4.5 1z"/><path fill="url(#SVG176kqd6n)" d="M8 4.5V1l5 5H9.5A1.5 1.5 0 0 1 8 4.5"/><defs><linearGradient id="SVGsXCcfeOf" x1="9.994" x2="11.264" y1="1" y2="12.781" gradientUnits="userSpaceOnUse"><stop stop-color="#6CE0FF"/><stop offset="1" stop-color="#4894FE"/></linearGradient><linearGradient id="SVG176kqd6n" x1="10.492" x2="9.242" y1="3.083" y2="5.167" gradientUnits="userSpaceOnUse"><stop stop-color="#9FF0F9"/><stop offset="1" stop-color="#B3E0FF"/></linearGradient><radialGradient id="SVGUVHt30XG" cx="0" cy="0" r="1" gradientTransform="rotate(130.372 6.372 3.818)scale(8.35524 4.87457)" gradientUnits="userSpaceOnUse"><stop offset=".362" stop-color="#4A43CB"/><stop offset="1" stop-color="#4A43CB" stop-opacity="0"/></radialGradient></defs></g></svg>',
+    audio:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Ultimate color icons by Streamline - https://creativecommons.org/licenses/by/4.0/ --><g fill="none"><path fill="#66e1ff" d="M21.087 6.71v15.334a.956.956 0 0 1-.957.956H3.87a.957.957 0 0 1-.957-.956V1.957A.957.957 0 0 1 3.87 1h11.507q.467 0 .927.086v3.74a.957.957 0 0 0 .957.957H21q.086.46.086.927"/><path fill="#c2f3ff" d="M16.64 5.553L2.912 19.289V1.957A.957.957 0 0 1 3.87 1h11.507q.467 0 .927.086v3.74a1 1 0 0 0 .335.727"/><path fill="#fff" d="M21.001 5.783h-3.74a.957.957 0 0 1-.956-.957v-3.74A5.67 5.67 0 0 1 21 5.783"/><path stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M21.087 6.71v15.334a.956.956 0 0 1-.957.956H3.87a.957.957 0 0 1-.957-.956V1.957A.957.957 0 0 1 3.87 1h11.507q.467 0 .927.086v3.74a.957.957 0 0 0 .957.957H21q.086.46.086.927"/><path stroke="#191919" stroke-linecap="round" stroke-linejoin="round" d="M21.001 5.783h-3.74a.957.957 0 0 1-.956-.957v-3.74A5.67 5.67 0 0 1 21 5.783M5.783 18.217v-5.739l1.434 2.87l1.435-2.87v5.74m4.783-4.305A1.435 1.435 0 0 1 12 15.348h-1.435v-2.87H12a1.435 1.435 0 0 1 1.435 1.435m-2.87 4.304v-2.87m4.783-1.721a1.066 1.066 0 0 1 .956-1.148h.724a1.33 1.33 0 0 1 1.19 1.435a1.33 1.33 0 0 1-1.194 1.435a1.33 1.33 0 0 1 1.193 1.435a1.33 1.33 0 0 1-1.189 1.434h-.724a1.066 1.066 0 0 1-.956-1.147"/></g></svg>`,
+    video:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#e75749" d="M4.5 2.375A2.56 2.56 0 0 1 5.861 2h20.366a2.545 2.545 0 0 1 2.423 1.951a3.4 3.4 0 0 1 .072.862v11.176h-1.573a2 2 0 0 0-.22.022a5 5 0 0 0-.581-.011c-.3.007-.61-.014-.914.014a2.3 2.3 0 0 0-.4-.02h-4.739c-.2 0-.392.008-.587-.01l.1-.065l-6.353-3.813v3.889c-2.213-.005-4.427 0-6.64 0a2 2 0 0 0-.251.021c-.212-.032-.427-.016-.642-.016c-.284.006-.57-.015-.853.015a2 2 0 0 0-.253-.022H3.275c.006-3.635 0-7.27 0-10.9a4.8 4.8 0 0 1 .071-1.131A2.54 2.54 0 0 1 4.5 2.375m.54 2.188a.64.64 0 0 0-.489.606v1.316a.64.64 0 0 0 .627.6h1.309a.64.64 0 0 0 .6-.608c.005-.426 0-.853 0-1.279a.64.64 0 0 0-.329-.575a.7.7 0 0 0-.358-.078H5.264a1 1 0 0 0-.224.018m20.341 0a.64.64 0 0 0-.474.607v1.306a.64.64 0 0 0 .6.608c.436.005.872 0 1.308 0a.64.64 0 0 0 .627-.606c.006-.438 0-.876 0-1.314a.64.64 0 0 0-.594-.621c-.348-.009-.7 0-1.045 0a2 2 0 0 0-.422.024ZM5.042 8.38a.64.64 0 0 0-.452.4a1.1 1.1 0 0 0-.041.386v1.135a.637.637 0 0 0 .6.6c.4.008.795 0 1.192 0a.8.8 0 0 0 .395-.065a.64.64 0 0 0 .36-.574V8.983a.64.64 0 0 0-.6-.624c-.338-.008-.677 0-1.016 0a2.4 2.4 0 0 0-.438.021m20.338 0a.64.64 0 0 0-.433.4a1.1 1.1 0 0 0-.041.387v1.131a.64.64 0 0 0 .608.607c.406.006.812 0 1.218 0a.74.74 0 0 0 .38-.078a.64.64 0 0 0 .335-.558V8.985a.637.637 0 0 0-.593-.622c-.349-.009-.7 0-1.047 0a2 2 0 0 0-.428.022ZM5.041 12.2a.64.64 0 0 0-.491.608c0 .438-.005.877 0 1.315a.64.64 0 0 0 .627.6h1.3a.64.64 0 0 0 .608-.607v-1.307a.64.64 0 0 0-.605-.626c-.348-.007-.7 0-1.045 0a2 2 0 0 0-.394.017m20.335.006a.64.64 0 0 0-.43.394a1.1 1.1 0 0 0-.041.386v1.131a.64.64 0 0 0 .607.608c.435.005.87 0 1.306 0a.64.64 0 0 0 .628-.605c.006-.438 0-.876 0-1.313a.637.637 0 0 0-.592-.622c-.349-.01-.7 0-1.046 0a2 2 0 0 0-.431.015Z"/><path fill="#fff" d="M13.458 12.1q3.176 1.908 6.353 3.813l-.1.065q-3.127 1.872-6.251 3.748V15.99q-.003-1.941-.002-3.89"/><path fill="#c0392b" d="M3.275 15.988h1.541a2 2 0 0 1 .253.022a.65.65 0 0 0-.409.273a.9.9 0 0 0-.111.518v1.045a.686.686 0 0 0 .685.689h1.192a.68.68 0 0 0 .657-.569c.008-.447 0-.9 0-1.343a.63.63 0 0 0-.521-.613a2 2 0 0 1 .251-.021h6.64v3.736q3.127-1.871 6.251-3.748c.2.018.391.007.587.01h4.741a2.3 2.3 0 0 1 .4.02a.64.64 0 0 0-.475.385a1 1 0 0 0-.045.407v1.014a.677.677 0 0 0 .691.719h1.16a.684.684 0 0 0 .686-.658v-.984a1.07 1.07 0 0 0-.1-.589a.64.64 0 0 0-.42-.292a2 2 0 0 1 .22-.022h1.573c.011 1.721 0 3.443 0 5.165v6.293a2.57 2.57 0 0 1-.612 1.651a2.54 2.54 0 0 1-1.563.868a8 8 0 0 1-.981.033H6.724a9 9 0 0 1-1.368-.048a2.56 2.56 0 0 1-2-1.846a2.8 2.8 0 0 1-.09-.746V16.891c.007-.3-.002-.602.009-.903m1.795 3.843a.6.6 0 0 0-.386.234a.76.76 0 0 0-.134.464v1.162a.685.685 0 0 0 .686.658h1.283a.687.687 0 0 0 .568-.716v-1.191a.62.62 0 0 0-.2-.458a.7.7 0 0 0-.487-.17H5.264a1 1 0 0 0-.194.017m20.366 0a.62.62 0 0 0-.522.58v1.222a.676.676 0 0 0 .69.718c.428 0 .857.005 1.285 0a.7.7 0 0 0 .562-.684v-1.013a.9.9 0 0 0-.123-.568a.66.66 0 0 0-.532-.267h-.954a2.3 2.3 0 0 0-.406.011ZM5.071 23.648a.6.6 0 0 0-.4.249a.77.77 0 0 0-.124.448v1.132a.7.7 0 0 0 .6.688h1.376a.687.687 0 0 0 .567-.717v-1.189a.62.62 0 0 0-.2-.459a.7.7 0 0 0-.484-.17H5.265a1 1 0 0 0-.194.018m20.362 0a.62.62 0 0 0-.492.427a1 1 0 0 0-.029.33V25.6a.68.68 0 0 0 .656.567h1.193a.69.69 0 0 0 .686-.719v-1.164a.66.66 0 0 0-.286-.545a1.46 1.46 0 0 0-.787-.11c-.312.01-.629-.02-.94.018Z"/></svg>`,
+    txt:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 48 48"><!-- Icon from IconPark by ByteDance - https://github.com/bytedance/IconPark/blob/master/LICENSE --><g fill="none" stroke="#000" stroke-linecap="round" stroke-width="4"><path stroke-linejoin="round" d="M10 38V44H38V38"/><path stroke-linejoin="round" d="M38 20V14L30 4H10V20"/><path stroke-linejoin="round" d="M28 4V14H38"/><path d="M16 12H20"/><rect width="40" height="18" x="4" y="20" stroke-linejoin="round" rx="2"/><path stroke-linejoin="round" d="M21 25L27 33"/><path stroke-linejoin="round" d="M27 25L21 33"/><path stroke-linejoin="round" d="M13 25V33"/><path stroke-linejoin="round" d="M10 25H13H16"/><path stroke-linejoin="round" d="M35 25V33"/><path stroke-linejoin="round" d="M32 25H35H38"/></g></svg>`,
+    pdf:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><!-- Icon from VSCode Icons by Roberto Huertas - https://github.com/vscode-icons/vscode-icons/blob/master/LICENSE --><path fill="#909090" d="m24.1 2.072l5.564 5.8v22.056H8.879V30h20.856V7.945z"/><path fill="#f4f4f4" d="M24.031 2H8.808v27.928h20.856V7.873z"/><path fill="#7a7b7c" d="M8.655 3.5h-6.39v6.827h20.1V3.5z"/><path fill="#dd2025" d="M22.472 10.211H2.395V3.379h20.077z"/><path fill="#464648" d="M9.052 4.534H7.745v4.8h1.028V7.715L9 7.728a2 2 0 0 0 .647-.117a1.4 1.4 0 0 0 .493-.291a1.2 1.2 0 0 0 .335-.454a2.1 2.1 0 0 0 .105-.908a2.2 2.2 0 0 0-.114-.644a1.17 1.17 0 0 0-.687-.65a2 2 0 0 0-.409-.104a2 2 0 0 0-.319-.026m-.189 2.294h-.089v-1.48h.193a.57.57 0 0 1 .459.181a.92.92 0 0 1 .183.558c0 .246 0 .469-.222.626a.94.94 0 0 1-.524.114m3.671-2.306c-.111 0-.219.008-.295.011L12 4.538h-.78v4.8h.918a2.7 2.7 0 0 0 1.028-.175a1.7 1.7 0 0 0 .68-.491a1.9 1.9 0 0 0 .373-.749a3.7 3.7 0 0 0 .114-.949a4.4 4.4 0 0 0-.087-1.127a1.8 1.8 0 0 0-.4-.733a1.6 1.6 0 0 0-.535-.4a2.4 2.4 0 0 0-.549-.178a1.3 1.3 0 0 0-.228-.017m-.182 3.937h-.1V5.392h.013a1.06 1.06 0 0 1 .6.107a1.2 1.2 0 0 1 .324.4a1.3 1.3 0 0 1 .142.526c.009.22 0 .4 0 .549a3 3 0 0 1-.033.513a1.8 1.8 0 0 1-.169.5a1.1 1.1 0 0 1-.363.36a.67.67 0 0 1-.416.106m5.08-3.915H15v4.8h1.028V7.434h1.3v-.892h-1.3V5.43h1.4v-.892"/><path fill="#dd2025" d="M21.781 20.255s3.188-.578 3.188.511s-1.975.646-3.188-.511m-2.357.083a7.5 7.5 0 0 0-1.473.489l.4-.9c.4-.9.815-2.127.815-2.127a14 14 0 0 0 1.658 2.252a13 13 0 0 0-1.4.288Zm-1.262-6.5c0-.949.307-1.208.546-1.208s.508.115.517.939a10.8 10.8 0 0 1-.517 2.434a4.4 4.4 0 0 1-.547-2.162Zm-4.649 10.516c-.978-.585 2.051-2.386 2.6-2.444c-.003.001-1.576 3.056-2.6 2.444M25.9 20.895c-.01-.1-.1-1.207-2.07-1.16a14 14 0 0 0-2.453.173a12.5 12.5 0 0 1-2.012-2.655a11.8 11.8 0 0 0 .623-3.1c-.029-1.2-.316-1.888-1.236-1.878s-1.054.815-.933 2.013a9.3 9.3 0 0 0 .665 2.338s-.425 1.323-.987 2.639s-.946 2.006-.946 2.006a9.6 9.6 0 0 0-2.725 1.4c-.824.767-1.159 1.356-.725 1.945c.374.508 1.683.623 2.853-.91a23 23 0 0 0 1.7-2.492s1.784-.489 2.339-.623s1.226-.24 1.226-.24s1.629 1.639 3.2 1.581s1.495-.939 1.485-1.035"/><path fill="#909090" d="M23.954 2.077V7.95h5.633z"/><path fill="#f4f4f4" d="M24.031 2v5.873h5.633z"/><path fill="#fff" d="M8.975 4.457H7.668v4.8H8.7V7.639l.228.013a2 2 0 0 0 .647-.117a1.4 1.4 0 0 0 .493-.291a1.2 1.2 0 0 0 .332-.454a2.1 2.1 0 0 0 .105-.908a2.2 2.2 0 0 0-.114-.644a1.17 1.17 0 0 0-.687-.65a2 2 0 0 0-.411-.105a2 2 0 0 0-.319-.026m-.189 2.294h-.089v-1.48h.194a.57.57 0 0 1 .459.181a.92.92 0 0 1 .183.558c0 .246 0 .469-.222.626a.94.94 0 0 1-.524.114m3.67-2.306c-.111 0-.219.008-.295.011l-.235.006h-.78v4.8h.918a2.7 2.7 0 0 0 1.028-.175a1.7 1.7 0 0 0 .68-.491a1.9 1.9 0 0 0 .373-.749a3.7 3.7 0 0 0 .114-.949a4.4 4.4 0 0 0-.087-1.127a1.8 1.8 0 0 0-.4-.733a1.6 1.6 0 0 0-.535-.4a2.4 2.4 0 0 0-.549-.178a1.3 1.3 0 0 0-.228-.017m-.182 3.937h-.1V5.315h.013a1.06 1.06 0 0 1 .6.107a1.2 1.2 0 0 1 .324.4a1.3 1.3 0 0 1 .142.526c.009.22 0 .4 0 .549a3 3 0 0 1-.033.513a1.8 1.8 0 0 1-.169.5a1.1 1.1 0 0 1-.363.36a.67.67 0 0 1-.416.106m5.077-3.915h-2.43v4.8h1.028V7.357h1.3v-.892h-1.3V5.353h1.4v-.892"/></svg>`,
+    docs:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><!-- Icon from VSCode Icons by Roberto Huertas - https://github.com/vscode-icons/vscode-icons/blob/master/LICENSE --><defs><linearGradient id="SVGSuUii0pt" x1="4.494" x2="13.832" y1="-2092.086" y2="-2075.914" gradientTransform="translate(0 2100)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#18884f"/><stop offset=".5" stop-color="#117e43"/><stop offset="1" stop-color="#0b6631"/></linearGradient></defs><path fill="#185c37" d="M19.581 15.35L8.512 13.4v14.409A1.19 1.19 0 0 0 9.705 29h19.1A1.19 1.19 0 0 0 30 27.809V22.5Z"/><path fill="#21a366" d="M19.581 3H9.705a1.19 1.19 0 0 0-1.193 1.191V9.5L19.581 16l5.861 1.95L30 16V9.5Z"/><path fill="#107c41" d="M8.512 9.5h11.069V16H8.512Z"/><path d="M16.434 8.2H8.512v16.25h7.922a1.2 1.2 0 0 0 1.194-1.191V9.391A1.2 1.2 0 0 0 16.434 8.2" opacity=".1"/><path d="M15.783 8.85H8.512V25.1h7.271a1.2 1.2 0 0 0 1.194-1.191V10.041a1.2 1.2 0 0 0-1.194-1.191" opacity=".2"/><path d="M15.783 8.85H8.512V23.8h7.271a1.2 1.2 0 0 0 1.194-1.191V10.041a1.2 1.2 0 0 0-1.194-1.191" opacity=".2"/><path d="M15.132 8.85h-6.62V23.8h6.62a1.2 1.2 0 0 0 1.194-1.191V10.041a1.2 1.2 0 0 0-1.194-1.191" opacity=".2"/><path fill="url(#SVGSuUii0pt)" d="M3.194 8.85h11.938a1.193 1.193 0 0 1 1.194 1.191v11.918a1.193 1.193 0 0 1-1.194 1.191H3.194A1.19 1.19 0 0 1 2 21.959V10.041A1.19 1.19 0 0 1 3.194 8.85"/><path fill="#fff" d="m5.7 19.873l2.511-3.884l-2.3-3.862h1.847L9.013 14.6c.116.234.2.408.238.524h.017q.123-.281.26-.546l1.342-2.447h1.7l-2.359 3.84l2.419 3.905h-1.809l-1.45-2.711A2.4 2.4 0 0 1 9.2 16.8h-.024a1.7 1.7 0 0 1-.168.351l-1.493 2.722Z"/><path fill="#33c481" d="M28.806 3h-9.225v6.5H30V4.191A1.19 1.19 0 0 0 28.806 3"/><path fill="#107c41" d="M19.581 16H30v6.5H19.581Z"/></svg>`,
+    zip:`<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 14 14"><!-- Icon from Flex color icons by Streamline - https://creativecommons.org/licenses/by/4.0/ --><g fill="none"><path fill="#d7e0ff" d="M6.331 1.688a.99.99 0 0 0-.883-.648a27 27 0 0 0-3.456.033a1.004 1.004 0 0 0-.92.893C.735 4.903.623 7.85.975 10.793c.119.998.937 1.724 1.915 1.83c2.762.301 5.485.294 8.247-.007a2.09 2.09 0 0 0 1.845-1.823c.218-1.82.276-3.684.14-5.971a1.906 1.906 0 0 0-1.745-1.788c-1.344-.112-2.279-.118-3.931-.153a1 1 0 0 1-.915-.652z"/><path stroke="#4147d5" stroke-linecap="round" stroke-linejoin="round" d="M6.331 1.688a.99.99 0 0 0-.883-.648a27 27 0 0 0-3.456.033a1.004 1.004 0 0 0-.92.893C.735 4.903.623 7.85.975 10.793c.119.998.937 1.724 1.915 1.83c2.762.301 5.485.294 8.247-.007a2.09 2.09 0 0 0 1.845-1.823c.218-1.82.276-3.684.14-5.971a1.906 1.906 0 0 0-1.745-1.788c-1.344-.112-2.279-.118-3.931-.153a1 1 0 0 1-.915-.652zM8 5.981h2.5m-2.5 3h2.5M9.248 2.934V8.98"/></g></svg>`,
+  },
+  preview: {
+    prev: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 19l-7-7 7-7"/><path d="M8 12h11"/></svg>',
+    next: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5l7 7-7 7"/><path d="M16 12H3"/></svg>',
+    imgLoadError:`
+     <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from TDesign Icons by TDesign - https://github.com/Tencent/tdesign-icons/blob/main/LICENSE --><path fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="2" d="M21 11V3H3v18h8m2-7l-4-4l-5.5 5.5m14.25-7.25a2 2 0 1 1-4 0a2 2 0 0 1 4 0Zm4.079 7.922L19 19m0 0l-2.828 2.829M19 19l-2.828-2.828M19 19l2.829 2.829"/></svg> 
+    `
+  },
+  toast: {
+    success: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>',
+    error: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>',
+    info: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>',
+    warning: '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 9v4"/><path d="M12 17h.01"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>',
+  },
+};
\ No newline at end of file
diff --git a/code/file-preview/g3-file/index.css b/code/file-preview/g3-file/index.css
index 68f5b8e7..74ea21ab 100644
--- a/code/file-preview/g3-file/index.css
+++ b/code/file-preview/g3-file/index.css
@@ -12,7 +12,7 @@
   border: 2px dashed #165dff;
 }
 
-.g3-file-left-panel {
+.g3-left-panel {
   width: 50%;
   display: flex;
   flex-direction: column;
@@ -20,7 +20,7 @@
   min-width: 300px;
 }
 
-.g3-file-container .header {
+.g3-header {
   display: flex;
   align-items: center;
   height: 50px;
@@ -29,7 +29,7 @@
   border-bottom: 1px solid #eef0f2;
 }
 
-.g3-file-container .main {
+.g3-main {
   flex: 1;
   min-height: 0;
   padding: 4px 0px;
@@ -39,11 +39,11 @@
   align-content: flex-start;
 }
 
-.g3-file-container .main > * {
+.g3-main > * {
   margin: 10px;
 }
 
-.g3-file-container .empty-tip {
+.g3-empty-tip {
   flex: 1;
   min-height: 0;
   display: flex;
@@ -54,7 +54,7 @@
   color: #999;
 }
 
-.g3-file-container .footer {
+.g3-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -63,26 +63,26 @@
   border-top: 1px solid #eee;
 }
 
-.g3-file-container .header,
-.g3-file-container .footer {
+.g3-header,
+.g3-footer {
   flex-shrink: 0;
 }
 
-.footer div {
+.g3-footer div {
   display: flex;
   align-items: center;
 }
 
-.footer .pending-count {
+.g3-pending-count {
   margin-right: 12px;
   font-size: 14px;
 }
 
-.footer .pending-count .pending-number {
+.g3-pending-count .g3-pending-number {
   margin-left: 4px;
 }
 
-.g3-file-container .check-all {
+.g3-check-all {
   display: flex;
   align-items: center;
   margin-right: 12px;
@@ -90,17 +90,17 @@
   cursor: pointer;
 }
 
-.g3-file-container .check-all input {
+.g3-check-all input {
   width: 16px;
   height: 16px;
 }
 
-.g3-file-container .check-all span {
+.g3-check-all span {
   margin-left: 4px;
   color: #333;
 }
 
-.g3-file-container button {
+.g3-btn {
   font-size: 13px;
   border-radius: 4px;
   background: #165dff;
@@ -117,32 +117,32 @@
   justify-content: center;
 }
 
-.g3-file-container .g3-file-left-panel button svg {
+.g3-btn svg {
   margin-right: 4px;
 }
 
-.g3-file-container button + button {
+.g3-btn + .g3-btn {
   margin-left: 12px;
 }
 
-.g3-file-container button:hover:not(:disabled) {
+.g3-btn:hover:not(:disabled) {
   filter: brightness(1.2);
 }
 
-.g3-file-container button:active:not(:disabled) {
+.g3-btn:active:not(:disabled) {
   filter: brightness(0.9);
 }
 
-.g3-file-container button:disabled {
+.g3-btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
 }
 
-.g3-file-container .delete-all {
+.g3-btn-delete-all {
   background: #ff4d4f;
 }
 
-.g3-file-container .g3-file-item {
+.g3-file-item {
   width: calc(50% - 26px);
   position: relative;
   cursor: pointer;
@@ -152,11 +152,11 @@
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 }
 
-.g3-file-container .g3-file-item:hover {
+.g3-file-item:hover {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
 }
 
-.g3-file-item .g3-file-preview {
+.g3-file-preview {
   height: 100px;
   width: 100%;
   display: flex;
@@ -165,17 +165,17 @@
   background-color: #fafbfc;
 }
 
-.g3-file-item .g3-file-preview .g3-file-img {
+.g3-file-preview .g3-file-img {
   width: 100%;
   height: 100%;
 }
 
-.g3-file-item .g3-file-preview svg {
+.g3-file-preview svg {
   height: 86px;
   width: 100%;
 }
 
-.g3-file-item .g3-file-preview .g3-img-container {
+.g3-file-preview .g3-img-container {
   width: 100%;
   height: 100%;
   position: relative;
@@ -184,7 +184,7 @@
   justify-content: center;
 }
 
-.g3-file-item .g3-file-preview .g3-img-container.is-error .g3-img-error {
+.g3-file-preview .g3-img-container.is-error .g3-img-error {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -193,7 +193,7 @@
   background-color: #f0f2f5;
 }
 
-.g3-file-item .g3-file-preview .g3-img-container .g3-img-error {
+.g3-file-preview .g3-img-container .g3-img-error {
   display: none;
   position: absolute;
   top: 0;
@@ -202,13 +202,13 @@
   height: 100%;
 }
 
-.g3-file-item .g3-file-preview .g3-img-container .g3-img-error svg {
+.g3-file-preview .g3-img-container .g3-img-error svg {
   width: 48px;
   height: 48px;
   color: #999;
 }
 
-.g3-file-item .g3-file-info {
+.g3-file-info {
   padding: 8px;
   font-size: 12px;
   color: #999;
@@ -221,7 +221,7 @@
   box-sizing: border-box;
 }
 
-.g3-file-item .g3-file-info span {
+.g3-file-info span {
   display: block;
   width: 100%;
   text-align: center;
@@ -232,12 +232,12 @@
   color: #888;
 }
 
-.g3-file-item .g3-file-info .g3-file-name {
+.g3-file-info .g3-file-name {
   font-size: 13px;
   color: #000000;
 }
 
-.g3-file-item .g3-file-actions {
+.g3-file-actions {
   display: flex;
   align-items: center;
   justify-content: flex-end;
@@ -245,7 +245,7 @@
   border-top: 1px solid #f0f2f5;
 }
 
-.g3-file-item .g3-file-action {
+.g3-file-action {
   padding: 8px 2px;
   flex: 1;
   display: flex;
@@ -257,37 +257,37 @@
   border-right: 1px solid #f0f2f5;
 }
 
-.g3-file-item .g3-file-action:hover {
+.g3-file-action:hover {
   background-color: #f5f6f8;
   color: #333;
 }
 
-.g3-file-item .g3-file-action:active {
+.g3-file-action:active {
   background: rgba(22, 93, 255, 0.12);
 }
 
-.g3-file-item .g3-file-action.is-disabled {
+.g3-file-action.is-disabled {
   opacity: 0.4;
   pointer-events: none;
   cursor: not-allowed;
 }
 
-.g3-file-item .g3-file-action:first-child {
+.g3-file-action:first-child {
   border-radius: 0 0 0 8px;
 }
 
-.g3-file-item .g3-file-action:last-child {
+.g3-file-action:last-child {
   border-right: none;
   border-radius: 0 0 8px 0;
 }
 
-.g3-file-item .g3-file-action svg {
+.g3-file-action svg {
   width: 20px;
   height: 20px;
   color: #666;
 }
 
-.g3-file-item .g3-file-checkbox {
+.g3-file-checkbox {
   position: absolute;
   top: 8px;
   left: 8px;
@@ -298,7 +298,7 @@
   z-index: 10;
 }
 
-.g3-file-item .g3-file-checkbox + .g3-checkbox-label {
+.g3-checkbox-label {
   position: absolute;
   top: 8px;
   left: 8px;
@@ -312,12 +312,12 @@
   z-index: 5;
 }
 
-.g3-file-item .g3-file-checkbox:checked + .g3-checkbox-label {
+.g3-file-checkbox:checked + .g3-checkbox-label {
   background: #165dff;
   border-color: #165dff;
 }
 
-.g3-file-item .g3-file-checkbox:checked + .g3-checkbox-label::after {
+.g3-file-checkbox:checked + .g3-checkbox-label::after {
   content: "";
   position: absolute;
   top: 2px;
@@ -329,65 +329,44 @@
   transform: rotate(45deg);
 }
 
-.g3-file-item .g3-file-checkbox:hover + .g3-checkbox-label {
+.g3-file-checkbox:hover + .g3-checkbox-label {
   border-color: #165dff;
   box-shadow: 0 0 0 2px rgba(22, 93, 255, 0.1);
 }
 
-.g3-file-item .g3-file-checkbox:disabled + .g3-checkbox-label {
+.g3-file-checkbox:disabled + .g3-checkbox-label {
   opacity: 0.4;
   cursor: not-allowed;
 }
 
-.g3-file-item .g3-file-pending-badge {
+.g3-status-badge {
   position: absolute;
   top: 6px;
   right: 6px;
+  color: white;
+  font-size: 10px;
+  padding: 2px 6px;
+  border-radius: 10px;
+  z-index: 1;
+}
+
+.g3-status-pending {
   background: #ff9800;
-  color: white;
-  font-size: 10px;
-  padding: 2px 6px;
-  border-radius: 10px;
-  z-index: 1;
 }
 
-.g3-file-item .g3-file-uploading-badge {
-  position: absolute;
-  top: 6px;
-  right: 6px;
+.g3-status-uploading {
   background: #165dff;
-  color: white;
-  font-size: 10px;
-  padding: 2px 6px;
-  border-radius: 10px;
-  z-index: 1;
 }
 
-.g3-file-item .g3-file-failed-badge {
-  position: absolute;
-  top: 6px;
-  right: 6px;
+.g3-status-failed {
   background: #ff4d4f;
-  color: white;
-  font-size: 10px;
-  padding: 2px 6px;
-  border-radius: 10px;
-  z-index: 1;
 }
 
-.g3-file-item .g3-file-uploaded-badge {
-  position: absolute;
-  top: 6px;
-  right: 6px;
+.g3-status-uploaded {
   background: #52c41a;
-  color: white;
-  font-size: 10px;
-  padding: 2px 6px;
-  border-radius: 10px;
-  z-index: 1;
 }
 
-.g3-file-container .g3-file-delete-btn {
+.g3-file-delete-btn {
   position: absolute;
   top: -8px;
   right: -8px;
@@ -406,18 +385,18 @@
   transition: all 0.2s ease;
 }
 
-.g3-file-container .g3-file-delete-btn:hover {
+.g3-file-delete-btn:hover {
   background: #ff4d4f;
   color: white;
 }
 
-.g3-file-container .g3-file-item .g3-file-delete-btn.is-disabled {
+.g3-file-item .g3-file-delete-btn.is-disabled {
   opacity: 0.4;
   pointer-events: none;
   cursor: not-allowed;
 }
 
-.g3-file-preview-panel {
+.g3-preview-panel {
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -436,13 +415,21 @@
   flex-shrink: 0;
 }
 
-.g3-preview-toolbar .preview-nav {
+.g3-preview-nav {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
 }
 
-.g3-preview-toolbar .preview-btn {
+.g3-preview-nav .g3-preview-counter {
+  font-size: 14px;
+  color: #666;
+  font-weight: 500;
+  min-width: 50px;
+  text-align: center;
+}
+
+.g3-preview-btn {
   width: 32px;
   height: 32px;
   border: 1px solid #d9d9d9;
@@ -456,45 +443,34 @@
   padding: 0;
 }
 
-.g3-preview-toolbar .preview-btn:hover:not(:disabled) {
+.g3-preview-btn:hover:not(:disabled) {
   border-color: #165dff;
   background: rgba(22, 93, 255, 0.05);
 }
 
-.g3-preview-toolbar .preview-btn:disabled {
+.g3-preview-btn:disabled {
   opacity: 0.4;
   cursor: not-allowed;
 }
 
-.g3-preview-toolbar .preview-btn svg {
+.g3-preview-btn svg {
   width: 16px;
   height: 16px;
   color: #666;
 }
 
-.g3-preview-toolbar .preview-btn:hover:not(:disabled) svg {
+.g3-preview-btn:hover:not(:disabled) svg {
   color: #165dff;
 }
 
-.g3-preview-toolbar .preview-info {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-}
-
-.g3-preview-toolbar .preview-info .preview-name {
-  font-size: 13px;
+.g3-preview-name {
+  font-size: 15px;
   color: #333;
-  font-weight: 500;
+  font-weight: 600;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  max-width: 200px;
-}
-
-.g3-preview-toolbar .preview-info .preview-counter {
-  font-size: 12px;
-  color: #999;
+  max-width: 250px;
 }
 
 .g3-preview-content {
@@ -508,27 +484,10 @@
   overflow: auto;
 }
 
-.g3-preview-content .preview-placeholder {
+.g3-preview-content .g3-preview-placeholder {
   text-align: center;
   color: #999;
-}
-
-.g3-preview-content .preview-placeholder svg {
-  width: 80px;
-  height: 80px;
-  margin-bottom: 16px;
-  opacity: 0.5;
-}
-
-.g3-preview-content .preview-placeholder h3 {
-  font-size: 14px;
-  margin-bottom: 8px;
-  color: #666;
-}
-
-.g3-preview-content .preview-placeholder p {
-  font-size: 12px;
-  line-height: 1.5;
+  font-size: 24px;
 }
 
 .g3-preview-content .preview-image {
@@ -543,7 +502,7 @@
   color: #ccc;
 }
 
-.g3-preview-content .preview-iframe {
+.g3-preview-content .g3-preview-iframe {
   width: 100%;
   height: 100%;
   border: none;
@@ -566,52 +525,24 @@
   color: #666;
 }
 
-.g3-preview-content .preview-file-info .status-uploaded {
+.g3-preview-content .preview-file-info .g3-status-uploaded {
   color: #52c41a;
   font-weight: 500;
 }
 
-.g3-preview-content .preview-file-info .status-pending {
+.g3-preview-content .preview-file-info .g3-status-pending {
   color: #ff9800;
   font-weight: 500;
 }
 
-.g3-preview-content .preview-file-info .cannot-preview {
-  margin-top: 12px;
-  padding: 8px 12px;
-  background: rgba(255, 77, 79, 0.08);
-  color: #ff4d4f;
-  border-radius: 4px;
-  font-size: 12px;
-}
-
-.g3-preview-content .preview-file-info .upload-tip {
-  margin-top: 12px;
-  padding: 8px 12px;
-  background: rgba(255, 152, 0, 0.08);
-  color: #ff9800;
-  border-radius: 4px;
-  font-size: 12px;
-}
-
-.g3-preview-content .url-error {
-  margin-top: 12px;
-  padding: 8px 12px;
-  background: rgba(255, 77, 79, 0.08);
-  color: #ff4d4f;
-  border-radius: 4px;
-  font-size: 12px;
-}
-
 .g3-global-menu {
-  position: absolute;
+  position: fixed;
   z-index: 9999;
   width: 160px;
   background: #fff;
   border: 1px solid #eee;
   border-radius: 8px;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
-  position: fixed;
   visibility: hidden;
   pointer-events: none;
 }
@@ -637,6 +568,12 @@
   background-color: #e8e8e8;
 }
 
+.g3-global-menu .g3-action-menu-item.is-disabled {
+  opacity: 0.4;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
 .g3-toast-container {
   position: fixed;
   top: 20px;
@@ -686,7 +623,7 @@
   animation: toastSlideOut 0.3s ease-out forwards;
 }
 
-.g3-toast .toast-icon {
+.g3-toast-icon {
   flex-shrink: 0;
   width: 20px;
   height: 20px;
@@ -697,69 +634,77 @@
   border-radius: 50%;
 }
 
-.g3-toast.toast-success {
+.g3-toast-success {
   border-left-color: #52c41a;
 }
-.g3-toast.toast-success .toast-icon {
+
+.g3-toast-success .g3-toast-icon {
   background: rgba(82, 196, 26, 0.1);
   color: #52c41a;
 }
-.g3-toast.toast-success .toast-title {
+
+.g3-toast-success .g3-toast-title {
   color: #52c41a;
 }
 
-.g3-toast.toast-error {
+.g3-toast-error {
   border-left-color: #ff4d4f;
 }
-.g3-toast.toast-error .toast-icon {
+
+.g3-toast-error .g3-toast-icon {
   background: rgba(255, 77, 79, 0.1);
   color: #ff4d4f;
 }
-.g3-toast.toast-error .toast-title {
+
+.g3-toast-error .g3-toast-title {
   color: #ff4d4f;
 }
 
-.g3-toast.toast-info {
+.g3-toast-info {
   border-left-color: #165dff;
 }
-.g3-toast.toast-info .toast-icon {
+
+.g3-toast-info .g3-toast-icon {
   background: rgba(22, 93, 255, 0.1);
   color: #165dff;
 }
-.g3-toast.toast-info .toast-title {
+
+.g3-toast-info .g3-toast-title {
   color: #165dff;
 }
 
-.g3-toast.toast-warning {
+.g3-toast-warning {
   border-left-color: #ff9800;
 }
-.g3-toast.toast-warning .toast-icon {
+
+.g3-toast-warning .g3-toast-icon {
   background: rgba(255, 152, 0, 0.1);
   color: #ff9800;
 }
-.g3-toast.toast-warning .toast-title {
+
+.g3-toast-warning .g3-toast-title {
   color: #ff9800;
 }
 
-.g3-toast .toast-content {
+.g3-toast-content {
   flex: 1;
   min-width: 0;
 }
 
-.g3-toast .toast-title {
+.g3-toast-title {
   font-size: 14px;
   font-weight: 500;
   color: #333;
   margin-bottom: 4px;
 }
 
-.g3-toast .toast-message {
+.g3-toast-message {
   font-size: 12px;
   color: #666;
   line-height: 1.4;
 }
 
-.g3-toast .toast-close {
+.g3-toast-close {
   flex-shrink: 0;
   margin-left: 12px;
   width: 20px;
@@ -775,7 +720,7 @@
   transition: all 0.2s ease;
 }
 
-.g3-toast .toast-close:hover {
+.g3-toast-close:hover {
   background: #f0f2f5;
   color: #333;
 }
@@ -809,7 +754,7 @@
   display: block;
 }
 
-.g3-task-center .task-header {
+.g3-task-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -819,13 +764,13 @@
   border-radius: 8px 8px 0 0;
 }
 
-.g3-task-center .task-header .task-title {
+.g3-task-header .g3-task-title {
   font-size: 14px;
   font-weight: 500;
   color: #333;
 }
 
-.g3-task-center .task-header .task-close {
+.g3-task-header .g3-task-close {
   width: 24px;
   height: 24px;
   border: none;
@@ -840,16 +785,16 @@
   transition: all 0.2s ease;
 }
 
-.g3-task-center .task-header .task-close:hover {
+.g3-task-header .g3-task-close:hover {
   background: #f0f2f5;
   color: #333;
 }
 
-.g3-task-center .task-body {
+.g3-task-body {
   padding: 16px;
 }
 
-.g3-task-center .current-item {
+.g3-current-item {
   font-size: 13px;
   color: #666;
   margin-bottom: 12px;
@@ -858,7 +803,7 @@
   text-overflow: ellipsis;
 }
 
-.g3-task-center .progress-bar {
+.g3-progress-bar {
   width: 100%;
   height: 6px;
   background: #f0f2f5;
@@ -867,52 +812,52 @@
   margin-bottom: 12px;
 }
 
-.g3-task-center .progress-bar .progress-inner {
+.g3-progress-bar .g3-progress-inner {
   height: 100%;
   background: #165dff;
   border-radius: 3px;
   transition: width 0.3s ease;
 }
 
-.g3-task-center .progress-text {
+.g3-progress-text {
   font-size: 12px;
   color: #999;
   text-align: right;
   margin-bottom: 16px;
 }
 
-.g3-task-center .result-section {
+.g3-result-section {
   display: flex;
   justify-content: space-around;
   padding-top: 12px;
   border-top: 1px solid #f0f2f5;
 }
 
-.g3-task-center .result-item {
+.g3-result-item {
   text-align: center;
 }
 
-.g3-task-center .result-item .result-value {
+.g3-result-item .g3-result-value {
   font-size: 18px;
   font-weight: 500;
   color: #333;
 }
 
-.g3-task-center .result-item .result-label {
+.g3-result-item .g3-result-label {
   font-size: 12px;
   color: #999;
   margin-top: 4px;
 }
 
-.g3-task-center .result-item.result-success .result-value {
+.g3-result-item.g3-result-success .g3-result-value {
   color: #52c41a;
 }
 
-.g3-task-center .result-item.result-failed .result-value {
+.g3-result-item.g3-result-failed .g3-result-value {
   color: #ff4d4f;
 }
 
-.g3-task-center .complete-button {
+.g3-complete-button {
   width: 100%;
   margin-top: 12px;
   padding: 8px;
@@ -925,7 +870,7 @@
   transition: all 0.2s ease;
 }
 
-.g3-task-center .complete-button:hover {
+.g3-complete-button:hover {
   filter: brightness(1.1);
 }
 
diff --git a/code/file-preview/g3-file/index.js b/code/file-preview/g3-file/index.js
index 350f8146..cbf47bed 100644
--- a/code/file-preview/g3-file/index.js
+++ b/code/file-preview/g3-file/index.js
@@ -8,12 +8,12 @@
     // 实例隔离
     this.$container = $(container);
     this.options = $.extend({}, this.defaults, options);
-    this.instanceId = this.generateUniqueId();
+    this.instanceId = G3FileUtils.generateUniqueId();
     this.files = [];
     this.selectedFiles = new Set();
     this.objectUrls = new Map();
     this.language =
-      this.languages[this.options.language] || this.languages["zh-CN"];
+      G3FileLanguages[this.options.language] || G3FileLanguages["zh-CN"];
 
     // 操作菜单状态
     this.actionMenuState = {
@@ -96,155 +96,6 @@
       filePermissionResolver: null,
     },
 
-    /**
-     * 多语言配置
-     */
-    languages: {
-      "zh-CN": {
-        selectAll: "全选",
-        download: "下载",
-        downloadBatch: "批量下载",
-        delete: "删除",
-        upload: "上传",
-        select: "选择",
-        more: "更多",
-        confirmDelete: "确定要删除选中的 {count} 个文件吗？",
-        downloading: "准备下载 {count} 个文件",
-        deleting: "删除中...",
-        name: "名称",
-        size: "大小",
-        date: "日期",
-        pending: "未上传",
-        selectFiles: "选择文件",
-        emptyTip1: "拖拽文件到这里 …",
-        emptyTip2: "支持多文件同时上传/下载",
-        emptyTip3: "支持粘贴图片上传",
-        fileSizeError: "文件大小超过限制",
-        preview: "预览",
-        filePreview: "文件预览",
-        fileName: "文件名",
-        fileSize: "文件大小",
-        uploadDate: "上传时间",
-        fileStatus: "状态",
-        notUploaded: "未上传",
-        uploaded: "已上传",
-        cannotPreview: "该类型文件不支持预览",
-        previewCount: "{current}/{total}",
-        uploadToPreview: "请上传后预览",
-        downloadingStatus: "下载中：",
-        downloadingFile: "正在下载：",
-        downloadComplete: "下载完成",
-        downloadResult: "共{total}文件，{success}成功，{failed}失败",
-        close: "关闭",
-        batchDownload: "批量下载",
-        batchUpload: "批量上传",
-        error: "错误",
-        downloadError: "下载失败，请检查文件是否有效",
-        toast: {
-          success: "成功",
-          error: "错误",
-          info: "提示",
-          warning: "警告",
-        },
-        task: {
-          total: "总计",
-          success: "成功",
-          failed: "失败",
-          currentItem: "当前项",
-          close: "关闭",
-        },
-      },
-      "en-US": {
-        selectAll: "Select All",
-        download: "Download",
-        downloadBatch: "Batch Download",
-        delete: "Delete",
-        upload: "Upload",
-        select: "Select",
-        more: "More",
-        confirmDelete:
-          "Are you sure you want to delete {count} selected file(s)?",
-        downloading: "Preparing to download {count} file(s)",
-        deleting: "Deleting...",
-        name: "Name",
-        size: "Size",
-        date: "Date",
-        pending: "Pending upload",
-        selectFiles: "Select Files",
-        emptyTip1: "Drag files here ...",
-        emptyTip2: "Supports multiple file upload/download",
-        emptyTip3: "Supports pasting images to upload",
-        fileSizeError: "File size exceeds limit",
-        preview: "Preview",
-        filePreview: "File Preview",
-        fileName: "File Name",
-        fileSize: "File Size",
-        uploadDate: "Upload Date",
-        fileStatus: "Status",
-        notUploaded: "Not uploaded",
-        uploaded: "Uploaded",
-        cannotPreview: "This file type is not previewable",
-        previewCount: "{current}/{total}",
-        uploadToPreview: "Please upload to preview",
-        downloadingStatus: "Downloading:",
-        downloadingFile: "Downloading:",
-        downloadComplete: "Download complete",
-        downloadResult:
-          "Total {total} files, {success} succeeded, {failed} failed",
-        close: "Close",
-        batchDownload: "Batch Download",
-        batchUpload: "Batch Upload",
-        error: "Error",
-        downloadError: "Download failed, please check if the file is valid",
-        toast: {
-          success: "Success",
-          error: "Error",
-          info: "Info",
-          warning: "Warning",
-        },
-        task: {
-          total: "Total",
-          success: "Success",
-          failed: "Failed",
-          currentItem: "Current",
-          close: "Close",
-        },
-      },
-    },
-
-    /**
-     * 静态图标映射
-     */
-    staticIconMap: {
-      download: `
-            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 15V3m9 12v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10l5 5l5-5"/></g></svg>
-          `,
-      delete: `
-          <svg xmlns="http://www.w3.org/2000/svg"
-              width="16"
-              height="16"
-              viewBox="0 0 24 24">
-            <path fill="none"
-                  stroke="currentColor"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  stroke-width="2"
-                  d="M18 6L6 18M6 6l12 12"/>
-          </svg>
-      `,
-      select: `
-            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.586 12.586L19 19M3.688 3.037a.497.497 0 0 0-.651.651l6.5 15.999a.501.501 0 0 0 .947-.062l1.569-6.083a2 2 0 0 1 1.448-1.479l6.124-1.579a.5.5 0 0 0 .063-.947z"/></svg>
-          `,
-      upload: `
-            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v12m5-7l-5-5l-5 5m14 7v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/></svg>
-          `,
-      preview: `
-            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="m21 21l-4.34-4.34"/><circle cx="11" cy="11" r="8"/></g></svg>          `,
-      more: `
-            <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M17 12h.01M12 12h.01M7 12h.01"/></g></svg>
-          `,
-    },
-
     // ============================================================================
     // 初始化和核心方法
     // ============================================================================
@@ -256,7 +107,6 @@
     init: function () {
       var self = this;
 
-
       self.render();
       self.bindEvents();
       self.updateUI();
@@ -287,7 +137,9 @@
         if (keyData && keyData.accessid && keyData.host) {
           this.aliyunKeyCache = {
             data: keyData,
-            expireTime: keyData.expire ? keyData.expire * 1000 : Date.now() + 3600000,
+            expireTime: keyData.expire
+              ? keyData.expire * 1000
+              : Date.now() + 3600000,
           };
           console.log("[G3File] 阿里云 OSS 凭证预加载成功");
         }
@@ -323,7 +175,9 @@
 
         this.aliyunKeyCache = {
           data: keyData,
-          expireTime: keyData.expire ? keyData.expire * 1000 : Date.now() + 3600000,
+          expireTime: keyData.expire
+            ? keyData.expire * 1000
+            : Date.now() + 3600000,
         };
 
         console.log("[G3File] 阿里云 OSS 凭证获取成功");
@@ -343,7 +197,7 @@
     generateFileKey: function (keyData, filename) {
       const dir = keyData.dir || "";
       const ext = filename.slice(filename.lastIndexOf(".")) || "";
-      const uuid = this.generateUniqueId().replace("file_", "");
+      const uuid = G3FileUtils.generateUniqueId().replace("file_", "");
       return dir + uuid + ext;
     },
 
@@ -365,185 +219,7 @@
      * @returns {string} 图标HTML
      */
     getFileIcon: function (filename) {
-      var ext = filename.split(".").pop().toLowerCase();
-      var iconMap = {
-        pdf: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="#909090" d="m24.1 2.072l5.564 5.8v22.056H8.879V30h20.856V7.945z"/><path fill="#f4f4f4" d="M24.031 2H8.808v27.928h20.856V7.873z"/><path fill="#7a7b7c" d="M8.655 3.5h-6.39v6.827h20.1V3.5z"/><path fill="#dd2025" d="M22.472 10.211H2.395V3.379h20.077z"/></svg>',
-        png: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="#5D87FF" d="M14 14.252a1.998 1.998 0 0 1-1.628-.872l-.372-.56a2 2 0 0 0-1.629-.872H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-2.37a1.998 1.998 0 0 1 0 .504z"/><path fill="#FF5D5D" d="M19 10V4a2 2 0 0 0-2-2h-3a2 2 0 0 0-2 2v.847a2 2 0 0 1-1.165 1.772l-.416.211a2 2 0 0 0-1.166 1.772V10h10z"/></svg>',
-        jpg: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="#FF9500" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/><path fill="#FFB74D" d="M12 18c-3.313 0-6-2.687-6-6s2.687-6 6-6 6 2.687 6 6-2.687 6-6 6z"/><path fill="#FFD54F" d="M12 14c-1.105 0-2-.895-2-2s.895-2 2-2 2 .895 2 2-.895 2-2 2z"/></svg>',
-        default:
-          '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 16 16"><g fill="none"><path fill="url(#SVG1)" d="M8.004 1L9.5 4.5L13 6l-.008 7.5a1.5 1.5 0 0 1-1.5 1.5H4.5A1.5 1.5 0 0 1 3 13.5v-11A1.5 1.5 0 0 1 4.5 1z"/><defs><linearGradient id="SVG1" x1="9.994" x2="11.264" y1="1" y2="12.781" gradientUnits="userSpaceOnUse"><stop stop-color="#6CE0FF"/><stop offset="1" stop-color="#4894FE"/></linearGradient></defs></g></svg>',
-      };
-
-      if (this.isImageFile(filename)) {
-        return "";
-      }
-
-      return iconMap[ext] || iconMap.default;
-    },
-
-    /**
-     * 压缩图片
-     * @param {File} file - 图片文件
-     * @param {Object} options - 压缩选项
-     * @returns {Promise<File|Blob>} 压缩后的文件
-     */
-    compressImage: async function (file, options = {}) {
-      const {
-        minSize = 300 * 1024,
-        maxSize = 1.2 * 1024 * 1024,
-        maxWidth = 1920,
-        maxHeight = 1920,
-      } = options;
-
-      if (!file || !file.type.startsWith("image/")) return file;
-
-      const originSize = file.size;
-
-      if (originSize <= maxSize) {
-        return file;
-      }
-
-      const img = await new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = () => {
-          const image = new Image();
-          image.onload = () => resolve(image);
-          image.onerror = reject;
-          image.src = reader.result;
-        };
-        reader.onerror = reject;
-        reader.readAsDataURL(file);
-      });
-
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-
-      let w = img.width;
-      let h = img.height;
-
-      const scale = Math.min(1, maxWidth / w, maxHeight / h);
-      w = Math.round(w * scale);
-      h = Math.round(h * scale);
-
-      canvas.width = w;
-      canvas.height = h;
-      ctx.drawImage(img, 0, 0, w, h);
-
-      const getBlob = (q) =>
-        new Promise((resolve) => {
-          canvas.toBlob((b) => resolve(b), "image/jpeg", q);
-        });
-
-      let quality = 0.92;
-
-      if (originSize > 4 * 1024 * 1024) {
-        quality = 0.88;
-      }
-
-      const blob = await getBlob(quality);
-
-      if (blob && blob.size < minSize) {
-        const safe = await getBlob(0.97);
-        return safe || file;
-      }
-
-      return blob || file;
-    },
-
-    /**
-     * 判断是否为图片文件
-     * @param {string} filename - 文件名
-     * @returns {boolean} 是否为图片文件
-     */
-    isImageFile: function (filename) {
-      if (!filename || typeof filename !== "string") return false;
-
-      const ext = filename.slice(filename.lastIndexOf(".") + 1).toLowerCase();
-      const imageExts = new Set(["jpg", "jpeg", "png", "gif", "bmp", "webp"]);
-
-      return imageExts.has(ext);
-    },
-
-    /**
-     * 格式化文件大小
-     * @param {number} bytes - 文件大小（字节）
-     * @returns {string} 格式化后的大小
-     */
-    formatFileSize: function (bytes) {
-      var numBytes = typeof bytes === 'string' ? parseFloat(bytes) : bytes;
-      if (numBytes === null || numBytes === undefined || isNaN(numBytes) || numBytes <= 0) {
-        return "-";
-      }
-
-      var k = 1024;
-      var sizes = ["B", "KB", "MB", "GB", "TB"];
-
-      var i = Math.floor(Math.log(numBytes) / Math.log(k));
-      i = Math.max(0, Math.min(i, sizes.length - 1));
-
-      return (numBytes / Math.pow(k, i)).toFixed(2) + " " + sizes[i];
-    },
-
-    /**
-     * 格式化日期
-     * @param {string} dateStr - 日期字符串
-     * @returns {string} 格式化后的日期
-     */
-    formatDate: function (dateStr) {
-      if (!dateStr) return "-";
-
-      var date = new Date(dateStr);
-
-      if (isNaN(date.getTime())) {
-        return "-";
-      }
-
-      var year = date.getFullYear();
-      var month = ("0" + (date.getMonth() + 1)).slice(-2);
-      var day = ("0" + date.getDate()).slice(-2);
-      var hours = ("0" + date.getHours()).slice(-2);
-      var minutes = ("0" + date.getMinutes()).slice(-2);
-      var seconds = ("0" + date.getSeconds()).slice(-2);
-
-      return (
-        year +
-        "-" +
-        month +
-        "-" +
-        day +
-        " " +
-        hours +
-        ":" +
-        minutes +
-        ":" +
-        seconds
-      );
-    },
-
-    /**
-     * 获取唯一文件名
-     * @param {string} fileName - 原始文件名
-     * @param {Set} files - 已存在的文件名集合
-     * @returns {string} 唯一文件名
-     */
-    getUniqueFileName: function (fileName, files) {
-      const originalFileName = fileName;
-      let uniqueFileName = fileName;
-      let counter = 1;
-
-      while (files.has(uniqueFileName)) {
-        const fileNameWithoutExtension = originalFileName.replace(
-          /\.[^/.]+$/,
-          "",
-        );
-        const extension = originalFileName.slice(
-          originalFileName.lastIndexOf("."),
-        );
-        uniqueFileName = `${fileNameWithoutExtension} (${counter})${extension}`;
-        counter++;
-      }
-
-      return uniqueFileName;
+      return G3FileUtils.getFileIcon(filename);
     },
 
     /**
@@ -586,66 +262,62 @@
     render: function () {
       const html = `
                 <div class="g3-file-container">
-                    <div class="g3-file-left-panel">
-                        <div class="header">
-                          <div class="check-all">
-                            <input type="checkbox" class="check-all-checkbox" style="cursor: pointer;" />
+                    <div class="g3-left-panel">
+                        <div class="g3-header">
+                          <div class="g3-check-all">
+                            <input type="checkbox" class="g3-check-all-checkbox" style="cursor: pointer;" />
                             <span>${this.language.selectAll}</span>
                           </div>
-                          <button class="download-all" disabled>
-                            ${this.staticIconMap.download}
+                          <button class="g3-btn g3-btn-download-all" disabled>
+                            ${G3FileIcons.action.download}
                             ${this.language.downloadBatch}
                           </button>
-                          <button class="delete-all" disabled>
-                            ${this.staticIconMap.delete}
+                          <button class="g3-btn g3-btn-delete-all" disabled>
+                            ${G3FileIcons.action.delete}
                             ${this.language.delete}
                           </button>
                         </div>
-                        <div class="main" style="display: none;">main</div>
-                        <div class="empty-tip">
+                        <div class="g3-main" style="display: none;">main</div>
+                        <div class="g3-empty-tip">
                           <span>${this.language.emptyTip1}</span>
                           <span>${this.language.emptyTip2}</span>
                           <span>${this.language.emptyTip3}</span>
                         </div>
-                        <div class="footer">
-                          <div class="pending-count">
+                        <div class="g3-footer">
+                          <div class="g3-pending-count">
                             <span>${this.language.pending}</span>
-                            <span class="pending-number">0</span>
+                            <span class="g3-pending-number">0</span>
                           </div>
 
                           <div>
-                            <button class="select" disabled>
-                              ${this.staticIconMap.select}
+                            <button class="g3-btn g3-btn-select" disabled>
+                              ${G3FileIcons.action.select}
                               ${this.language.select}
                             </button>
-                            <button class="upload" disabled>
-                              ${this.staticIconMap.upload}
+                            <button class="g3-btn g3-btn-upload" disabled>
+                              ${G3FileIcons.action.upload}
                               ${this.language.upload}
                             </button>
                           </div>
-                          <input type="file" class="file-input" style="display: none;" multiple />
+                          <input type="file" class="g3-file-input" style="display: none;" multiple />
                         </div>
                     </div>
-                    <div class="g3-file-preview-panel">
+                    <div class="g3-preview-panel">
                         <div class="g3-preview-toolbar">
-                            <div class="preview-nav">
-                                <button class="preview-btn preview-prev" disabled>
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 19l-7-7 7-7"/><path d="M8 12h11"/></svg>
+                            <div class="g3-preview-nav">
+                                <button class="g3-preview-btn g3-preview-prev" disabled>
+                                  ${G3FileIcons.preview.prev}
                                 </button>
-                                <button class="preview-btn preview-next" disabled>
-                                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 5l7 7-7 7"/><path d="M16 12H3"/></svg>
+                                <span class="g3-preview-counter">0/0</span>
+                                <button class="g3-preview-btn g3-preview-next" disabled>
+                                  ${G3FileIcons.preview.next}
                                 </button>
                             </div>
-                            <div class="preview-info">
-                                <span class="preview-name">${this.language.selectFiles}</span>
-                                <span class="preview-counter">0/0</span>
-                            </div>
+                            <span class="g3-preview-name">${this.language.selectFiles}</span>
                         </div>
                         <div class="g3-preview-content">
-                            <div class="preview-placeholder">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="m15 15-3 3"/><circle cx="12" cy="12" r="3"/></svg>
-                                <h3>${this.language.selectFiles}</h3>
-                                <p>${this.language.emptyTip1}</p>
+                            <div class="g3-preview-placeholder">
+                                <h3>${this.language.filePreview}</h3>
                             </div>
                         </div>
                     </div>
@@ -655,24 +327,23 @@
 
       this.$container.html(html);
 
-      this.$fileList = this.$container.find(".main");
-      this.$emptyTip = this.$container.find(".empty-tip");
-      this.$checkAll = this.$container.find(".check-all-checkbox");
-      this.$btnDownload = this.$container.find(".download-all");
-      this.$btnDelete = this.$container.find(".delete-all");
-      this.$btnUpload = this.$container.find(".upload");
-      this.$btnSelect = this.$container.find(".select");
-      this.$fileInput = this.$container.find(".file-input");
-      this.$pendingCount = this.$container.find(".pending-number");
+      this.$fileList = this.$container.find(".g3-main");
+      this.$emptyTip = this.$container.find(".g3-empty-tip");
+      this.$checkAll = this.$container.find(".g3-check-all-checkbox");
+      this.$btnDownload = this.$container.find(".g3-btn-download-all");
+      this.$btnDelete = this.$container.find(".g3-btn-delete-all");
+      this.$btnUpload = this.$container.find(".g3-btn-upload");
+      this.$btnSelect = this.$container.find(".g3-btn-select");
+      this.$fileInput = this.$container.find(".g3-file-input");
+      this.$pendingCount = this.$container.find(".g3-pending-number");
 
-      // 预览相关DOM引用
-      this.$previewPanel = this.$container.find(".g3-file-preview-panel");
+      this.$previewPanel = this.$container.find(".g3-preview-panel");
       this.$previewToolbar = this.$container.find(".g3-preview-toolbar");
       this.$previewContent = this.$container.find(".g3-preview-content");
-      this.$btnPrev = this.$container.find(".preview-prev");
-      this.$btnNext = this.$container.find(".preview-next");
-      this.$previewName = this.$container.find(".preview-name");
-      this.$previewCounter = this.$container.find(".preview-counter");
+      this.$btnPrev = this.$container.find(".g3-preview-prev");
+      this.$btnNext = this.$container.find(".g3-preview-next");
+      this.$previewName = this.$container.find(".g3-preview-name");
+      this.$previewCounter = this.$container.find(".g3-preview-counter");
 
       return this;
     },
@@ -736,7 +407,7 @@
           self.closeActionMenu();
         });
 
-      var $anchor = $(actionMenuState.anchorEl).closest(".g3-file-action.more");
+      var $anchor = $(actionMenuState.anchorEl).closest(".g3-action-more");
 
       var rect = $anchor[0].getBoundingClientRect();
       var $mainContainer = this.$container.find(".main");
@@ -796,12 +467,12 @@
 
       let content = "";
 
-      if (this.isImageFile(file.name)) {
+      if (G3FileUtils.isImageFile(file.name)) {
         content = `
           <div class="g3-img-container">
             <img src="${file.url}" alt="${file.name}" class="g3-file-img" onError="this.parentElement.classList.add('is-error'); this.style.display='none';" />
             <div class="g3-img-error">
-              ${this.staticIconMap.error || '<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#999" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>'}
+              ${G3FileIcons.preview.imgLoadError}
             </div>
           </div>
         `;
@@ -813,22 +484,22 @@
       switch (file.status) {
         case "pending":
           statusBadge = `
-            <div class="g3-file-pending-badge">
+            <div class="g3-status-badge g3-status-pending">
               ${this.language.pending}
             </div>
           `;
           break;
         case "uploading":
           statusBadge = `
-            <div class="g3-file-uploading-badge">
-              上传中
+            <div class="g3-status-badge g3-status-uploading">
+              ${this.language.uploading}
             </div>
           `;
           break;
         case "failed":
           statusBadge = `
-            <div class="g3-file-failed-badge">
-              上传失败
+            <div class="g3-status-badge g3-status-failed">
+              ${this.language.uploadFailed}
             </div>
           `;
           break;
@@ -840,27 +511,27 @@
           <label class="g3-checkbox-label"></label>
           <div class="g3-file-preview">${content}</div>
           ${statusBadge}
-          <div class="g3-file-delete-btn ${deleteDisabled ? 'is-disabled' : ''}">
-            ${this.staticIconMap.delete}
+          <div class="g3-file-delete-btn ${deleteDisabled ? "is-disabled" : ""}">
+            ${G3FileIcons.action.delete}
           </div>
 
           <div class="g3-file-info">
             <span class="g3-file-name">${file.name}</span>
-            <span>${typeof file.size === 'string' ? (file.size || '-') : this.formatFileSize(file.size)}</span>
-            <span>${this.formatDate(file.uploadDate)}</span>
+            <span>${typeof file.size === "string" ? file.size || "-" : G3FileUtils.formatFileSize(file.size)}</span>
+            <span>${G3FileUtils.formatDate(file.uploadDate)}</span>
           </div>
 
           <div class="g3-file-actions">
-            <div class="g3-file-action preview ${previewDisabled ? "is-disabled" : ""}" title="${this.language.preview}">
-              ${this.staticIconMap.preview}
+            <div class="g3-file-action g3-action-preview ${previewDisabled ? "is-disabled" : ""}" title="${this.language.preview}">
+              ${G3FileIcons.action.preview}
             </div>
 
-            <div class="g3-file-action download ${downloadDisabled ? "is-disabled" : ""}" title="${this.language.download}">
-              ${this.staticIconMap.download}
+            <div class="g3-file-action g3-action-download ${downloadDisabled ? "is-disabled" : ""}" title="${this.language.download}">
+              ${G3FileIcons.action.download}
             </div>
 
-            <div class="g3-file-action more" title="${this.language.more}">
-              ${this.staticIconMap.more}
+            <div class="g3-file-action g3-action-more" title="${this.language.more}">
+              ${G3FileIcons.action.more}
             </div>
           </div>
         </div>
@@ -940,18 +611,13 @@
         var canDelete = self.hasPermission(file, "delete");
 
         $item
-          .find(".g3-file-action.download")
+          .find(".g3-action-download")
           .toggleClass("is-disabled", !canDownload);
-        $item
-          .find(".g3-file-action.preview")
-          .toggleClass("is-disabled", !canView);
+        $item.find(".g3-action-preview").toggleClass("is-disabled", !canView);
         $item
           .find(".g3-file-delete-btn")
           .toggleClass("is-disabled", !canDelete);
       });
-
-      // 更新预览区域
-      self.updatePreview();
     },
 
     /**
@@ -963,11 +629,32 @@
 
     isPreviewableFile: function (fileName) {
       var nonPreviewableExts = [
-        ".rar", ".jar", ".exe", ".zip", ".7z", ".tar", ".gz", ".bz2", ".iso",
-        ".dll", ".bin", ".msi", ".cab", ".rpm", ".deb", ".apk", ".ipa",
-        ".dat", ".bak", ".tmp", ".log", ".cache", ".db", ".sqlite"
+        ".rar",
+        ".jar",
+        ".exe",
+        ".zip",
+        ".7z",
+        ".tar",
+        ".gz",
+        ".bz2",
+        ".iso",
+        ".dll",
+        ".bin",
+        ".msi",
+        ".cab",
+        ".rpm",
+        ".deb",
+        ".apk",
+        ".ipa",
+        ".dat",
+        ".bak",
+        ".tmp",
+        ".log",
+        ".cache",
+        ".db",
+        ".sqlite",
       ];
-      var ext = fileName.toLowerCase().substring(fileName.lastIndexOf('.'));
+      var ext = fileName.toLowerCase().substring(fileName.lastIndexOf("."));
       return !nonPreviewableExts.includes(ext);
     },
 
@@ -1003,9 +690,14 @@
       this.updatePreview();
     },
     base64Encode: function (str) {
-      return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (match, p1) {
-        return String.fromCharCode('0x' + p1);
-      }));
+      return btoa(
+        encodeURIComponent(str).replace(
+          /%([0-9A-F]{2})/g,
+          function (match, p1) {
+            return String.fromCharCode("0x" + p1);
+          },
+        ),
+      );
     },
     /**
      * 更新预览区域显示
@@ -1016,8 +708,8 @@
 
       if (total === 0) {
         this.$previewContent.html(`
-          <div class="preview-placeholder">
-            <p>请选择文件</p>
+          <div class="g3-preview-placeholder">
+            <p>${this.language.selectFiles}</p>
           </div>
         `);
         this.$previewName.text(this.language.selectFiles);
@@ -1037,41 +729,45 @@
       var currentFile = allFiles[this.previewIndex];
       var isUploaded = currentFile.status === "uploaded";
       var isPreviewable = this.isPreviewableFile(currentFile.name);
-      var fileUrl = currentFile.url && currentFile.url !== '' ? currentFile.url : null;
+      var fileUrl =
+        currentFile.url && currentFile.url !== "" ? currentFile.url : null;
 
       this.$btnPrev.prop("disabled", this.previewIndex === 0);
       this.$btnNext.prop("disabled", this.previewIndex === total - 1);
 
       this.$previewName.text(currentFile.name);
-      var counterText = this.language.previewCount.replace("{current}", this.previewIndex + 1).replace("{total}", total);
+      var counterText = this.language.previewCount
+        .replace("{current}", this.previewIndex + 1)
+        .replace("{total}", total);
       this.$previewCounter.text(counterText);
 
       var previewContent = "";
 
       if (isUploaded && fileUrl && isPreviewable) {
-        var previewUrl = this.options.previewUrl || '';
-        var fullPreviewUrl = previewUrl ? previewUrl + this.base64Encode(fileUrl) : fileUrl;
+        var previewUrl = this.options.previewUrl || "";
+        var fullPreviewUrl = previewUrl
+          ? previewUrl + G3FileUtils.base64Encode(fileUrl)
+          : fileUrl;
         previewContent = `
-          <iframe 
-            src="${fullPreviewUrl}" 
-            class="preview-iframe" 
-            frameborder="0" 
+          <iframe
+            src="${fullPreviewUrl}"
+            class="g3-preview-iframe"
+            frameborder="0"
             allowfullscreen
           ></iframe>
         `;
       } else {
-        var tipsHtml = '';
+        var tipsHtml = "";
         if (!isUploaded) {
-          tipsHtml = `<p class="upload-tip">请上传后预览</p>`;
+          tipsHtml = `<p class="g3-upload-tip">${this.language.uploadToPreview}</p>`;
         } else if (!isPreviewable) {
-          tipsHtml = `<p class="cannot-preview">请下载后预览</p>`;
+          tipsHtml = `<p class="g3-cannot-preview">${this.language.downloadToPreview}</p>`;
         } else if (!fileUrl) {
-          tipsHtml = `<p class="url-error">链接无效请检查链接</p>`;
+          tipsHtml = `<p class="g3-url-error">${this.language.urlError}</p>`;
         }
 
         previewContent = `
-          <div class="preview-placeholder">
-            <p>${currentFile.name}</p>
+          <div class="g3-preview-placeholder">
             ${tipsHtml}
           </div>
         `;
@@ -1080,9 +776,16 @@
       this.$previewContent.html(previewContent);
     },
 
+    isPreviewContentChanged: function (newContent) {
+      var currentContent = this.$previewContent.html();
+      return currentContent !== newContent;
+    },
+
     setPreviewFile: function (fileId) {
       var uploadedFiles = this.getUploadedFiles();
-      var index = uploadedFiles.findIndex(function (f) { return f._id === fileId; });
+      var index = uploadedFiles.findIndex(function (f) {
+        return f._id === fileId;
+      });
       if (index >= 0) {
         this.previewIndex = index;
         this.updatePreview();
@@ -1164,7 +867,7 @@
         .off("click.g3file_actionmenu")
         .on("click.g3file_actionmenu", function (e) {
           if (
-            !$(e.target).closest(".g3-file-action.more").length &&
+            !$(e.target).closest(".g3-action-more").length &&
             !$(e.target).closest(".g3-global-menu").length
           ) {
             self.closeActionMenu();
@@ -1235,8 +938,8 @@
 
       // 预览
       this.$fileList
-        .off("click", ".preview")
-        .on("click", ".preview", function (e) {
+        .off("click", ".g3-action-preview")
+        .on("click", ".g3-action-preview", function (e) {
           e.preventDefault();
           e.stopPropagation();
 
@@ -1254,8 +957,8 @@
 
       // 下载
       this.$fileList
-        .off("click", ".download")
-        .on("click", ".download", function (e) {
+        .off("click", ".g3-action-download")
+        .on("click", ".g3-action-download", function (e) {
           e.preventDefault();
           e.stopPropagation();
 
@@ -1322,26 +1025,28 @@
         });
 
       // 更多按钮
-      this.$fileList.off("click", ".more").on("click", ".more", function (e) {
-        e.preventDefault();
-        e.stopPropagation();
+      this.$fileList
+        .off("click", ".g3-action-more")
+        .on("click", ".g3-action-more", function (e) {
+          e.preventDefault();
+          e.stopPropagation();
 
-        var $el = $(this).closest(".g3-file-action");
-        var id = $el.closest(".g3-file-item").data("id");
-        var file = self.getFileById(id);
+          var $el = $(this).closest(".g3-file-action");
+          var id = $el.closest(".g3-file-item").data("id");
+          var file = self.getFileById(id);
 
-        if (!file) return;
+          if (!file) return;
 
-        if (
-          self.actionMenuState.open &&
-          self.actionMenuState.fileId === file._id
-        ) {
-          self.closeActionMenu();
-          return;
-        }
+          if (
+            self.actionMenuState.open &&
+            self.actionMenuState.fileId === file._id
+          ) {
+            self.closeActionMenu();
+            return;
+          }
 
-        self.openActionMenu($el, file);
-      });
+          self.openActionMenu($el, file);
+        });
     },
 
     // ============================================================================
@@ -1382,24 +1087,24 @@
           let url = "";
           let compressedFile = file;
 
-          if (self.isImageFile(file.name)) {
+          if (G3FileUtils.isImageFile(file.name)) {
             if (typeof self.options.compressImage === "function") {
               try {
                 compressedFile = await self.options.compressImage(file);
               } catch (e) {
                 console.warn("外部压缩算法执行失败，使用内部压缩:", e);
-                compressedFile = await self.compressImage(file);
+                compressedFile = await G3FileUtils.compressImage(file);
               }
             } else {
-              compressedFile = await self.compressImage(file);
+              compressedFile = await G3FileUtils.compressImage(file);
             }
 
             url = URL.createObjectURL(compressedFile);
-            self.objectUrls.set(self.generateUniqueId(), url);
+            self.objectUrls.set(G3FileUtils.generateUniqueId(), url);
           }
 
           tempFiles.push({
-            _id: self.generateUniqueId(),
+            _id: G3FileUtils.generateUniqueId(),
             name: file.name,
             size: compressedFile.size,
             uploadDate: new Date().toISOString(),
@@ -1472,7 +1177,8 @@
         console.warn("下载失败：文件对象无效", file);
         this.showToast({
           title: this.language.error || "错误",
-          message: this.language.downloadError || "下载失败，请检查文件是否有效",
+          message:
+            this.language.downloadError || "下载失败，请检查文件是否有效",
           type: "error",
           duration: 3000,
         });
@@ -1492,7 +1198,8 @@
           console.warn("下载失败：文件没有URL或本地文件对象", file);
           this.showToast({
             title: this.language.error || "错误",
-            message: this.language.downloadError || "下载失败，请检查文件是否有效",
+            message:
+              this.language.downloadError || "下载失败，请检查文件是否有效",
             type: "error",
             duration: 3000,
           });
@@ -1504,7 +1211,8 @@
         console.error("文件下载失败：", err);
         this.showToast({
           title: this.language.error || "错误",
-          message: this.language.downloadError || "下载失败，请检查文件是否有效",
+          message:
+            this.language.downloadError || "下载失败，请检查文件是否有效",
           type: "error",
           duration: 3000,
         });
@@ -1526,7 +1234,7 @@
       let failedCount = 0;
 
       const concurrency = 3;
-      const taskId = this.generateUniqueId();
+      const taskId = G3FileUtils.generateUniqueId();
 
       this.startTask({
         id: taskId,
@@ -1555,7 +1263,10 @@
             return;
           }
 
-          const uniqueFileName = this.getUniqueFileName(item.name, addedFiles);
+          const uniqueFileName = G3FileUtils.getUniqueFileName(
+            item.name,
+            addedFiles,
+          );
 
           zip.file(uniqueFileName, content);
           addedFiles.add(uniqueFileName);
@@ -1603,25 +1314,6 @@
           success: successCount,
           failed: failedCount,
         });
-
-        if (failedCount === 0) {
-          this.showToast({
-            title: this.language.downloadComplete || "下载完成",
-            message: `${successCount}/${total}`,
-            type: "success",
-            duration: 3000,
-          });
-        } else {
-          this.showToast({
-            title: this.language.downloadComplete || "下载完成",
-            message: `${this.language.downloadResult || "共{total}文件，{success}成功，{failed}失败"}`
-              .replace("{total}", total)
-              .replace("{success}", successCount)
-              .replace("{failed}", failedCount),
-            type: failedCount === total ? "error" : "warning",
-            duration: 5000,
-          });
-        }
       } catch (err) {
         console.error("批量下载失败:", err);
         failedCount = total - successCount;
@@ -1632,13 +1324,6 @@
           success: successCount,
           failed: failedCount,
         });
-
-        this.showToast({
-          title: this.language.error || "错误",
-          message: this.language.downloadError || "下载失败，请检查文件是否有效",
-          type: "error",
-          duration: 5000,
-        });
       }
     },
 
@@ -1777,7 +1462,7 @@
       }
 
       const total = pendingFiles.length;
-      const taskId = this.generateUniqueId();
+      const taskId = G3FileUtils.generateUniqueId();
 
       // 启动上传任务
       this.startTask({
@@ -1878,13 +1563,13 @@
     // ============================================================================
 
     /**
-     * Toast 图标映射
+     * Toast 图标映射（从外部 G3FileIcons 导入）
      */
     toastIcons: {
-      success: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>`,
-      error: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>`,
-      info: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`,
-      warning: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 9v4"/><path d="M12 17h.01"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>`,
+      success: G3FileIcons.toast.success,
+      error: G3FileIcons.toast.error,
+      info: G3FileIcons.toast.info,
+      warning: G3FileIcons.toast.warning,
     },
 
     /**
@@ -1905,27 +1590,30 @@
         this.$toastContainer = this.$container.find(".g3-toast-container");
       }
 
-      const toastId = "toast_" + this.generateUniqueId();
+      const toastId = "toast_" + G3FileUtils.generateUniqueId();
       const toastType = this.language.toast[type] || type;
       const icon = this.toastIcons[type] || this.toastIcons.info;
 
       const toastHtml = `
-        <div class="g3-toast toast-${type}" id="${toastId}">
-          <div class="toast-icon">${icon}</div>
-          <div class="toast-content">
-            <div class="toast-title">${toastType}</div>
-            ${message ? `<div class="toast-message">${message}</div>` : ""}
+        <div class="g3-toast g3-toast-${type}" id="${toastId}">
+          <div class="g3-toast-icon">${icon}</div>
+          <div class="g3-toast-content">
+            <div class="g3-toast-title">${toastType}</div>
+            ${message ? `<div class="g3-toast-message">${message}</div>` : ""}
           </div>
-          <button class="toast-close">&times;</button>
+          <button class="g3-toast-close">&times;</button>
         </div>
       `;
 
       this.$toastContainer.append(toastHtml);
       const $toast = this.$container.find(`#${toastId}`);
 
-      $toast.find(".toast-close").off("click").on("click", function () {
-        self.removeToast(toastId);
-      });
+      $toast
+        .find(".g3-toast-close")
+        .off("click")
+        .on("click", function () {
+          self.removeToast(toastId);
+        });
 
       setTimeout(function () {
         self.removeToast(toastId);
@@ -1969,7 +1657,7 @@
       const { id, title, total = 0, current = 0, currentItem = "" } = options;
 
       this.currentTask = {
-        id: id || this.generateUniqueId(),
+        id: id || G3FileUtils.generateUniqueId(),
         title: title,
         total: total,
         current: current,
@@ -2023,7 +1711,8 @@
       }
 
       this.currentTask.status = "finished";
-      this.currentTask.total = total !== undefined ? total : this.currentTask.total;
+      this.currentTask.total =
+        total !== undefined ? total : this.currentTask.total;
       this.currentTask.success = success;
       this.currentTask.failed = failed;
       this.currentTask.current = this.currentTask.total;
@@ -2054,40 +1743,43 @@
       if (!taskCenter.length) {
         this.$container.append(`
           <div class="g3-task-center">
-            <div class="task-header">
-              <span class="task-title">${task.title}</span>
-              <button class="task-close">&times;</button>
+            <div class="g3-task-header">
+              <span class="g3-task-title">${task.title}</span>
+              <button class="g3-task-close">&times;</button>
             </div>
-            <div class="task-body">
-              <div class="current-item"></div>
-              <div class="progress-bar">
-                <div class="progress-inner"></div>
+            <div class="g3-task-body">
+              <div class="g3-current-item"></div>
+              <div class="g3-progress-bar">
+                <div class="g3-progress-inner"></div>
               </div>
-              <div class="progress-text"></div>
-              <div class="result-section" style="display: none;">
-                <div class="result-item">
-                  <div class="result-value"></div>
-                  <div class="result-label">${this.language.task.total}</div>
+              <div class="g3-progress-text"></div>
+              <div class="g3-result-section" style="display: none;">
+                <div class="g3-result-item">
+                  <div class="g3-result-value"></div>
+                  <div class="g3-result-label">${this.language.task.total}</div>
                 </div>
-                <div class="result-item result-success">
-                  <div class="result-value"></div>
-                  <div class="result-label">${this.language.task.success}</div>
+                <div class="g3-result-item g3-result-success">
+                  <div class="g3-result-value"></div>
+                  <div class="g3-result-label">${this.language.task.success}</div>
                 </div>
-                <div class="result-item result-failed">
-                  <div class="result-value"></div>
-                  <div class="result-label">${this.language.task.failed}</div>
+                <div class="g3-result-item g3-result-failed">
+                  <div class="g3-result-value"></div>
+                  <div class="g3-result-label">${this.language.task.failed}</div>
                 </div>
               </div>
-              <button class="complete-button" style="display: none;">${this.language.task.close}</button>
+              <button class="g3-complete-button" style="display: none;">${this.language.task.close}</button>
             </div>
           </div>
         `);
         taskCenter = this.$container.find(".g3-task-center");
 
         const self = this;
-        taskCenter.find(".task-close, .complete-button").off("click").on("click", function () {
-          self.closeTask(self.currentTask?.id);
-        });
+        taskCenter
+          .find(".task-close, .complete-button")
+          .off("click")
+          .on("click", function () {
+            self.closeTask(self.currentTask?.id);
+          });
       }
 
       this.$taskCenter = taskCenter;
@@ -2102,24 +1794,37 @@
       const task = this.currentTask;
       if (!task || !this.$taskCenter) return;
 
-      const progress = task.total > 0 ? ((task.current / task.total) * 100).toFixed(0) : 0;
+      const progress =
+        task.total > 0 ? ((task.current / task.total) * 100).toFixed(0) : 0;
 
-      this.$taskCenter.find(".task-title").text(task.title);
-      this.$taskCenter.find(".current-item").text(
-        task.currentItem ? `${this.language.task.currentItem}: ${task.currentItem}` : ""
-      );
-      this.$taskCenter.find(".progress-inner").css("width", `${progress}%`);
-      this.$taskCenter.find(".progress-text").text(`${task.current} / ${task.total}`);
+      this.$taskCenter.find(".g3-task-title").text(task.title);
+      this.$taskCenter
+        .find(".g3-current-item")
+        .text(
+          task.currentItem
+            ? `${this.language.task.currentItem}: ${task.currentItem}`
+            : "",
+        );
+      this.$taskCenter.find(".g3-progress-inner").css("width", `${progress}%`);
+      this.$taskCenter
+        .find(".g3-progress-text")
+        .text(`${task.current} / ${task.total}`);
 
       if (task.status === "finished") {
-        this.$taskCenter.find(".result-section").show();
-        this.$taskCenter.find(".complete-button").show();
-        this.$taskCenter.find(".result-item:first .result-value").text(task.total);
-        this.$taskCenter.find(".result-success .result-value").text(task.success);
-        this.$taskCenter.find(".result-failed .result-value").text(task.failed);
+        this.$taskCenter.find(".g3-result-section").show();
+        this.$taskCenter.find(".g3-complete-button").show();
+        this.$taskCenter
+          .find(".g3-result-item:first .g3-result-value")
+          .text(task.total);
+        this.$taskCenter
+          .find(".g3-result-success .g3-result-value")
+          .text(task.success);
+        this.$taskCenter
+          .find(".g3-result-failed .g3-result-value")
+          .text(task.failed);
       } else {
-        this.$taskCenter.find(".result-section").hide();
-        this.$taskCenter.find(".complete-button").hide();
+        this.$taskCenter.find(".g3-result-section").hide();
+        this.$taskCenter.find(".g3-complete-button").hide();
       }
     },
 
@@ -2290,8 +1995,10 @@
       });
 
       this.selectedFiles.clear();
+      this.previewIndex = 0;
       this.renderFileList();
       this.updateUI();
+      this.updatePreview();
 
       return this;
     },
diff --git a/code/file-preview/g3-file/language.js b/code/file-preview/g3-file/language.js
index e69de29b..38abff69 100644
--- a/code/file-preview/g3-file/language.js
+++ b/code/file-preview/g3-file/language.js
@@ -0,0 +1,120 @@
+var G3FileLanguages = {
+  "zh-CN": {
+    selectAll: "全选",
+    download: "下载",
+    downloadBatch: "批量下载",
+    delete: "删除",
+    upload: "上传",
+    select: "选择",
+    more: "更多",
+    confirmDelete: "确定要删除选中的 {count} 个文件吗？",
+    downloading: "准备下载 {count} 个文件",
+    deleting: "删除中...",
+    name: "名称",
+    size: "大小",
+    date: "日期",
+    pending: "未上传",
+    selectFiles: "选择文件",
+    emptyTip1: "拖拽文件到这里 …",
+    emptyTip2: "支持多文件同时上传/下载",
+    emptyTip3: "支持粘贴图片上传",
+    fileSizeError: "文件大小超过限制",
+    preview: "预览",
+    filePreview: "文件预览",
+    fileName: "文件名",
+    fileSize: "文件大小",
+    uploadDate: "上传时间",
+    fileStatus: "状态",
+    notUploaded: "未上传",
+    uploaded: "已上传",
+    cannotPreview: "该类型文件不支持预览",
+    previewCount: "{current}/{total}",
+    uploadToPreview: "请上传后预览",
+    downloadToPreview: "请下载后预览",
+    urlError: "链接无效请检查链接",
+    uploading: "上传中",
+    uploadFailed: "上传失败",
+    downloadingStatus: "下载中：",
+    downloadingFile: "正在下载：",
+    downloadComplete: "下载完成",
+    downloadResult: "共{total}文件，{success}成功，{failed}失败",
+    close: "关闭",
+    batchDownload: "批量下载",
+    batchUpload: "批量上传",
+    error: "错误",
+    downloadError: "下载失败，请检查文件是否有效",
+    toast: {
+      success: "成功",
+      error: "错误",
+      info: "提示",
+      warning: "警告",
+    },
+    task: {
+      total: "总计",
+      success: "成功",
+      failed: "失败",
+      currentItem: "当前项",
+      close: "关闭",
+    },
+  },
+  "en-US": {
+    selectAll: "Select All",
+    download: "Download",
+    downloadBatch: "Batch Download",
+    delete: "Delete",
+    upload: "Upload",
+    select: "Select",
+    more: "More",
+    confirmDelete:
+      "Are you sure you want to delete {count} selected file(s)?",
+    downloading: "Preparing to download {count} file(s)",
+    deleting: "Deleting...",
+    name: "Name",
+    size: "Size",
+    date: "Date",
+    pending: "Pending upload",
+    selectFiles: "Select Files",
+    emptyTip1: "Drag files here ...",
+    emptyTip2: "Supports multiple file upload/download",
+    emptyTip3: "Supports pasting images to upload",
+    fileSizeError: "File size exceeds limit",
+    preview: "Preview",
+    filePreview: "File Preview",
+    fileName: "File Name",
+    fileSize: "File Size",
+    uploadDate: "Upload Date",
+    fileStatus: "Status",
+    notUploaded: "Not uploaded",
+    uploaded: "Uploaded",
+    cannotPreview: "This file type is not previewable",
+    previewCount: "{current}/{total}",
+    uploadToPreview: "Please upload to preview",
+    downloadToPreview: "Please download to preview",
+    urlError: "Invalid URL, please check the link",
+    uploading: "Uploading",
+    uploadFailed: "Upload failed",
+    downloadingStatus: "Downloading:",
+    downloadingFile: "Downloading:",
+    downloadComplete: "Download complete",
+    downloadResult:
+      "Total {total} files, {success} succeeded, {failed} failed",
+    close: "Close",
+    batchDownload: "Batch Download",
+    batchUpload: "Batch Upload",
+    error: "Error",
+    downloadError: "Download failed, please check if the file is valid",
+    toast: {
+      success: "Success",
+      error: "Error",
+      info: "Info",
+      warning: "Warning",
+    },
+    task: {
+      total: "Total",
+      success: "Success",
+      failed: "Failed",
+      currentItem: "Current",
+      close: "Close",
+    },
+  },
+};
\ No newline at end of file
diff --git a/code/file-preview/index.html b/code/file-preview/index.html
index e6dce076..b6c68952 100644
--- a/code/file-preview/index.html
+++ b/code/file-preview/index.html
@@ -5,9 +5,14 @@
   <title>文件预览测试</title>
   <script type="text/javascript" src="./js/jquery-easyui-1.4/jquery.min.js"></script>
   <script type="text/javascript" src="./js/jquery-easyui-1.4/jquery.easyui.min.js"></script>
+  
+  <script type="text/javascript" src="./g3-file/language.js"></script>
+  <script type="text/javascript" src="./g3-file/icon.js"></script>
+  <script type="text/javascript" src="./g3-file/common.js"></script>
   <script type="text/javascript" src="./g3-file/index.js"></script>
   <script type="text/javascript" src="./g3-file/libs/FileSaver.min.js"></script>
   <script type="text/javascript" src="./g3-file/libs/jszip.min.js"></script>
+
   <link rel="stylesheet" href="./g3-file/index.css" />
 
   <style>
@@ -16,7 +21,8 @@
       padding: 0;
     }
 
-    html, body {
+    html,
+    body {
       width: 100%;
       height: 100%;
       overflow: hidden;
@@ -113,7 +119,7 @@
       fetchPermissions().then(() => {
         const file = $('#fileContainer').G3File({
           language: 'zh-CN',
-          previewUrl:'https://sxox.g3soft.cn:8012/onlinePreview?url=',
+          previewUrl: 'https://sxox.g3soft.cn:8012/onlinePreview?url=',
           data: [
             { name: 'logo.png', size: 1024000, uploadDate: '2024-01-15T10:30:00', url: 'https://g3hdzjsj.oss-cn-hangzhou.aliyuncs.com/g3hd/2026/04/28/ccb964f4-124d-4169-8981-20333bea2587.docx' },
           ],