@ai-group/chat-sdk 3.6.3 → 3.6.4

package/dist/esm/components/FileGallery/index.js

@@ -1,247 +1,229 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { Image, Tooltip, Progress } from "antd";
-import { FileOutlined, FilePdfOutlined, FileWordOutlined, FileExcelOutlined, FilePptOutlined, FileImageOutlined, CloseOutlined, AudioOutlined, FileZipOutlined, VideoCameraOutlined, FileMarkdownOutlined } from "@ant-design/icons";
+import { FileOutlined, FilePdfOutlined, FileWordOutlined, FileExcelOutlined, FilePptOutlined, FileImageOutlined, CloseOutlined, AudioOutlined, FileZipOutlined, VideoCameraOutlined, FileMarkdownOutlined, PictureOutlined } from "@ant-design/icons";
 import { useStyles } from "./styles";
 
 // ==================== 工具函数 ====================
-
-/**
- * 获取文件名
- */
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var getFileName = function getFileName(file) {
   return file.displayName || file.name || "";
 };
-
-/**
- * 获取文件大小
- */
 var getFileSize = function getFileSize(file) {
   return file.size || 0;
 };
-
-/**
- * 获取文件 MIME 类型
- */
 var getMimeType = function getMimeType(file) {
   return file.mimeType || file.type || "";
 };
-
-/**
- * 获取文件 URL
- */
 var getFileUrl = function getFileUrl(file) {
   var _file$response, _file$response2;
   return file.fileUri || ((_file$response = file.response) === null || _file$response === void 0 ? void 0 : _file$response.fileUrl) || ((_file$response2 = file.response) === null || _file$response2 === void 0 ? void 0 : _file$response2.tempUrl) || file.tempUrl || "";
 };
-
-/**
- * 获取文件唯一标识
- */
 var getFileId = function getFileId(file) {
   return file.id || file.uid || "";
 };
-
-/**
- * 判断是否是图片文件
- */
-var isImageFile = function isImageFile(file) {
-  var mimeType = getMimeType(file);
-  if (mimeType && mimeType.startsWith("image/")) return true;
-  var fileName = getFileName(file);
-  if (fileName && fileName.match(/\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i)) return true;
-  var url = getFileUrl(file);
-  if (url && url.match(/\.(jpg|jpeg|png|gif|webp|bmp|svg)(\?.*)?$/i)) return true;
-  return false;
-};
-
-/**
- * 判断是否是音频文件
- */
-var isAudioFile = function isAudioFile(file) {
-  var mimeType = getMimeType(file);
-  if (mimeType && mimeType.startsWith("audio/")) return true;
-  var fileName = getFileName(file);
-  return !!(fileName !== null && fileName !== void 0 && fileName.match(/\.(mp3|wav|m4a|aac|ogg|flac)$/i));
-};
-
-/**
- * 判断是否是视频文件
- */
-var isVideoFile = function isVideoFile(file) {
-  var mimeType = getMimeType(file);
-  if (mimeType && mimeType.startsWith("video/")) return true;
-  var fileName = getFileName(file);
-  return !!(fileName !== null && fileName !== void 0 && fileName.match(/\.(mp4|mov|webm|mkv|avi)$/i));
-};
-
-/**
- * 判断是否是压缩包文件
- */
-var isZipFile = function isZipFile(file) {
-  var fileName = getFileName(file);
-  return !!(fileName !== null && fileName !== void 0 && fileName.match(/\.(zip|rar|7z|tar|gz|bz2|xz|tgz)$/i));
-};
-
-/**
- * 判断是否是 Markdown 文件
- */
-var isMarkdownFile = function isMarkdownFile(file) {
-  var fileName = getFileName(file);
-  return !!(fileName !== null && fileName !== void 0 && fileName.match(/\.(md|markdown)$/i));
-};
-
-/**
- * 获取文件扩展名
- */
 var getFileExtension = function getFileExtension(filename) {
   var ext = filename.split(".").pop();
   return ext ? ext.toLowerCase() : "";
 };
+var IMAGE_EXTS = ["jpg", "jpeg", "png", "gif", "webp", "bmp", "svg"];
+var AUDIO_EXTS = ["mp3", "wav", "m4a", "aac", "ogg", "flac"];
+var VIDEO_EXTS = ["mp4", "mov", "webm", "mkv", "avi"];
 
-/**
- * 获取文件图标和颜色
- */
-var getFileIcon = function getFileIcon(file) {
+/** 自动推断文件卡片类型 */
+var inferFileType = function inferFileType(file) {
+  var mimeType = getMimeType(file);
+  if (mimeType.startsWith("image/")) return "image";
+  if (mimeType.startsWith("audio/")) return "audio";
+  if (mimeType.startsWith("video/")) return "video";
   var ext = getFileExtension(getFileName(file));
+  if (IMAGE_EXTS.includes(ext)) return "image";
+  if (AUDIO_EXTS.includes(ext)) return "audio";
+  if (VIDEO_EXTS.includes(ext)) return "video";
 
-  // PDF
-  if (ext === "pdf") {
-    return {
-      icon: /*#__PURE__*/_jsx(FilePdfOutlined, {}),
-      color: "#ff4d4f"
-    };
-  }
-
-  // Word
-  if (["doc", "docx"].includes(ext)) {
-    return {
-      icon: /*#__PURE__*/_jsx(FileWordOutlined, {}),
-      color: "#1677ff"
-    };
-  }
-
-  // Excel
-  if (["xls", "xlsx", "csv"].includes(ext)) {
-    return {
-      icon: /*#__PURE__*/_jsx(FileExcelOutlined, {}),
-      color: "#22b35e"
-    };
-  }
-
-  // PPT
-  if (["ppt", "pptx"].includes(ext)) {
-    return {
-      icon: /*#__PURE__*/_jsx(FilePptOutlined, {}),
-      color: "#ff6e31"
-    };
-  }
-
-  // Audio
-  if (["mp3", "wav", "m4a", "aac", "ogg", "flac"].includes(ext)) {
-    return {
-      icon: /*#__PURE__*/_jsx(AudioOutlined, {}),
-      color: "#722ed1"
-    };
-  }
-
-  // Video
-  if (["mp4", "mov", "webm", "mkv", "avi"].includes(ext)) {
-    return {
-      icon: /*#__PURE__*/_jsx(VideoCameraOutlined, {}),
-      color: "#fa8c16"
-    };
-  }
-
-  // 压缩包
-  if (["zip", "rar", "7z", "tar", "gz", "bz2", "xz", "tgz"].includes(ext)) {
-    return {
-      icon: /*#__PURE__*/_jsx(FileZipOutlined, {}),
-      color: "#eb2f96"
-    };
-  }
-
-  // Markdown
-  if (["md", "markdown"].includes(ext)) {
-    return {
-      icon: /*#__PURE__*/_jsx(FileMarkdownOutlined, {}),
-      color: "#13c2c2"
-    };
+  // URL 扩展名兜底
+  var url = getFileUrl(file);
+  var urlExtMatch = url.match(/\.(\w+)(\?.*)?$/);
+  if (urlExtMatch) {
+    var urlExt = urlExtMatch[1].toLowerCase();
+    if (IMAGE_EXTS.includes(urlExt)) return "image";
+    if (AUDIO_EXTS.includes(urlExt)) return "audio";
+    if (VIDEO_EXTS.includes(urlExt)) return "video";
   }
+  return "file";
+};
 
-  // 图片
-  if (isImageFile(file)) {
-    return {
-      icon: /*#__PURE__*/_jsx(FileImageOutlined, {}),
-      color: "#8c8c8c"
-    };
-  }
+/** 根据扩展名获取文件图标类型 key */
+var getFileIconType = function getFileIconType(file) {
+  var ext = getFileExtension(getFileName(file));
+  if (ext === "pdf") return "pdf";
+  if (["doc", "docx"].includes(ext)) return "word";
+  if (["xls", "xlsx", "csv"].includes(ext)) return "excel";
+  if (["ppt", "pptx"].includes(ext)) return "ppt";
+  if (AUDIO_EXTS.includes(ext)) return "audio";
+  if (VIDEO_EXTS.includes(ext)) return "video";
+  if (["zip", "rar", "7z", "tar", "gz", "bz2", "xz", "tgz"].includes(ext)) return "zip";
+  if (["md", "markdown"].includes(ext)) return "markdown";
+  if (IMAGE_EXTS.includes(ext)) return "image";
+  return "default";
+};
 
-  // 默认
-  return {
+/** 默认图标映射 */
+var DEFAULT_ICON_MAP = {
+  pdf: {
+    icon: /*#__PURE__*/_jsx(FilePdfOutlined, {}),
+    color: "#ff4d4f"
+  },
+  word: {
+    icon: /*#__PURE__*/_jsx(FileWordOutlined, {}),
+    color: "#1677ff"
+  },
+  excel: {
+    icon: /*#__PURE__*/_jsx(FileExcelOutlined, {}),
+    color: "#22b35e"
+  },
+  ppt: {
+    icon: /*#__PURE__*/_jsx(FilePptOutlined, {}),
+    color: "#ff6e31"
+  },
+  audio: {
+    icon: /*#__PURE__*/_jsx(AudioOutlined, {}),
+    color: "#722ed1"
+  },
+  video: {
+    icon: /*#__PURE__*/_jsx(VideoCameraOutlined, {}),
+    color: "#fa8c16"
+  },
+  zip: {
+    icon: /*#__PURE__*/_jsx(FileZipOutlined, {}),
+    color: "#eb2f96"
+  },
+  markdown: {
+    icon: /*#__PURE__*/_jsx(FileMarkdownOutlined, {}),
+    color: "#13c2c2"
+  },
+  image: {
+    icon: /*#__PURE__*/_jsx(FileImageOutlined, {}),
+    color: "#8c8c8c"
+  },
+  default: {
     icon: /*#__PURE__*/_jsx(FileOutlined, {}),
     color: "#8c8c8c"
-  };
+  }
 };
-
-/**
- * 格式化文件大小
- */
 var formatFileSize = function formatFileSize(bytes) {
   if (bytes < 1024) return bytes + " B";
   if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + " KB";
   return (bytes / (1024 * 1024)).toFixed(1) + " MB";
 };
-var styles = useStyles();
+var FALLBACK_IMAGE = "data:image/png;base64,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";
+
+// ==================== 子组件：图片加载状态管理 ====================
 
-/**
- * FileGallery - 单文件展示组件
- *
- * 功能特性:
- * - 📁 支持多种文件类型展示 (图片、音频、视频、文档等)
- * - 🖼️ 图片支持预览和缩略图
- * - 🎵 音频文件支持内联播放
- * - 🎬 视频文件支持内联播放
- * - 📊 显示文件大小、类型图标
- * - 🗑️ 支持删除操作
- * - 📤 支持上传进度显示
- * - 🎨 支持卡片内部布局控制（align：图标和信息的排列方式）
- *
- * @example
- * // XAdkSender 场景 - 可删除的本地文件
- * {files.map(file => (
- *   <FileGallery
- *     key={file.id}
- *     file={file}
- *     removable
- *     onRemove={handleRemove}
- *   />
- * ))}
- *
- * @example
- * // XadkChatbot 场景 - 只读的远程文件
- * {files.map(file => (
- *   <FileGallery key={file.id} file={file} />
- * ))}
- */
-var FileGallery = function FileGallery(_ref) {
-  var file = _ref.file,
-    _ref$align = _ref.align,
-    align = _ref$align === void 0 ? "left" : _ref$align,
-    _ref$removable = _ref.removable,
-    removable = _ref$removable === void 0 ? false : _ref$removable,
-    _ref$onRemove = _ref.onRemove,
-    onRemove = _ref$onRemove === void 0 ? function () {} : _ref$onRemove,
-    className = _ref.className,
-    style = _ref.style,
-    _onClick = _ref.onClick;
-  var _useState = useState(""),
+var ImageWithLoading = function ImageWithLoading(_ref) {
+  var src = _ref.src,
+    alt = _ref.alt,
+    width = _ref.width,
+    height = _ref.height,
+    loading = _ref.loading,
+    preview = _ref.preview,
+    fallback = _ref.fallback,
+    displayMode = _ref.displayMode,
+    styles = _ref.styles;
+  var _useState = useState("loading"),
     _useState2 = _slicedToArray(_useState, 2),
-    objectUrl = _useState2[0],
-    setObjectUrl = _useState2[1];
+    loadState = _useState2[0],
+    setLoadState = _useState2[1];
+  useEffect(function () {
+    setLoadState("loading");
+  }, [src]);
+  var modeClass = displayMode === "full" ? styles.imageFullMode : displayMode === "preview" ? styles.imagePreviewMode : styles.imageThumbnail;
+  var containerStyle = {};
+  if (width) containerStyle.width = typeof width === "number" ? "".concat(width, "px") : width;
+  if (height) containerStyle.height = typeof height === "number" ? "".concat(height, "px") : height;
+  return /*#__PURE__*/_jsxs("div", {
+    className: modeClass,
+    style: containerStyle,
+    children: [loadState === "loading" && /*#__PURE__*/_jsx("div", {
+      className: styles.imageLoadingSkeleton,
+      children: /*#__PURE__*/_jsx(PictureOutlined, {
+        style: {
+          fontSize: 20,
+          color: "#d9d9d9"
+        }
+      })
+    }), loadState === "error" && /*#__PURE__*/_jsxs("div", {
+      className: styles.imageErrorFallback,
+      children: [/*#__PURE__*/_jsx(PictureOutlined, {}), /*#__PURE__*/_jsx("span", {
+        children: "\u52A0\u8F7D\u5931\u8D25"
+      })]
+    }), /*#__PURE__*/_jsx(Image, {
+      src: src,
+      alt: alt,
+      fallback: fallback,
+      preview: preview,
+      loading: loading,
+      style: _objectSpread({
+        display: loadState === "error" ? "none" : "block",
+        opacity: loadState === "loading" ? 0 : 1,
+        transition: "opacity 0.3s ease"
+      }, displayMode === "thumbnail" ? {
+        width: "100%",
+        height: "100%",
+        objectFit: "cover"
+      } : {
+        maxWidth: "100%",
+        objectFit: "contain"
+      }),
+      onLoad: function onLoad() {
+        return setLoadState("loaded");
+      },
+      onError: function onError() {
+        return setLoadState("error");
+      }
+    })]
+  });
+};
+
+// ==================== 主组件 ====================
+
+var FileGallery = function FileGallery(_ref2) {
+  var file = _ref2.file,
+    _ref2$align = _ref2.align,
+    align = _ref2$align === void 0 ? "left" : _ref2$align,
+    _ref2$removable = _ref2.removable,
+    removable = _ref2$removable === void 0 ? false : _ref2$removable,
+    _ref2$onRemove = _ref2.onRemove,
+    onRemove = _ref2$onRemove === void 0 ? function () {} : _ref2$onRemove,
+    className = _ref2.className,
+    style = _ref2.style,
+    _onClick = _ref2.onClick,
+    customType = _ref2.type,
+    _ref2$imageDisplayMod = _ref2.imageDisplayMode,
+    imageDisplayMode = _ref2$imageDisplayMod === void 0 ? "thumbnail" : _ref2$imageDisplayMod,
+    imageWidth = _ref2.imageWidth,
+    imageHeight = _ref2.imageHeight,
+    _ref2$imageLoading = _ref2.imageLoading,
+    imageLoading = _ref2$imageLoading === void 0 ? "eager" : _ref2$imageLoading,
+    imageAlt = _ref2.imageAlt,
+    _ref2$mediaAutoPlay = _ref2.mediaAutoPlay,
+    mediaAutoPlay = _ref2$mediaAutoPlay === void 0 ? false : _ref2$mediaAutoPlay,
+    _ref2$mediaLoop = _ref2.mediaLoop,
+    mediaLoop = _ref2$mediaLoop === void 0 ? false : _ref2$mediaLoop,
+    _ref2$mediaMuted = _ref2.mediaMuted,
+    mediaMuted = _ref2$mediaMuted === void 0 ? false : _ref2$mediaMuted,
+    mediaPoster = _ref2.mediaPoster,
+    videoProps = _ref2.videoProps,
+    audioProps = _ref2.audioProps,
+    iconMap = _ref2.iconMap,
+    customIcon = _ref2.customIcon;
+  var styles = useStyles();
+  var _useState3 = useState(""),
+    _useState4 = _slicedToArray(_useState3, 2),
+    objectUrl = _useState4[0],
+    setObjectUrl = _useState4[1];
   useEffect(function () {
     if (!(file !== null && file !== void 0 && file.file)) return;
     var url = URL.createObjectURL(file.file);
@@ -251,18 +233,66 @@ var FileGallery = function FileGallery(_ref) {
     };
   }, [file === null || file === void 0 ? void 0 : file.file]);
   if (!file) return null;
-  var isImage = isImageFile(file);
-  var isAudio = isAudioFile(file);
-  var isVideo = isVideoFile(file);
-  var isZip = isZipFile(file);
-  var isMarkdown = isMarkdownFile(file);
   var fileName = getFileName(file);
   var fileSize = getFileSize(file);
   var fileId = getFileId(file);
   var url = getFileUrl(file) || objectUrl;
 
-  // 图片文件
-  if (isImage) {
+  // 核心逻辑：type prop 决定渲染方式（参考 file-card）
+  // - 不传 type：自动推断，图片/音频/视频用原生渲染
+  // - type="file"：强制附件卡片（音视频不可播放）
+  // - type="image"/"audio"/"video"：强制指定类型
+  var fileType = useMemo(function () {
+    return customType || inferFileType(file);
+  }, [customType, file]);
+
+  /** 获取图标（支持自定义） */
+  var getIcon = function getIcon(iconType) {
+    if (customIcon) return {
+      icon: customIcon,
+      color: "inherit"
+    };
+    if (iconMap !== null && iconMap !== void 0 && iconMap[iconType]) return {
+      icon: iconMap[iconType],
+      color: "inherit"
+    };
+    return DEFAULT_ICON_MAP[iconType];
+  };
+
+  // ==================== 渲染删除按钮 ====================
+  var renderRemoveBtn = function renderRemoveBtn() {
+    return removable ? /*#__PURE__*/_jsx("button", {
+      className: styles.fileRemoveBtn,
+      onClick: function onClick(e) {
+        e.stopPropagation();
+        onRemove(fileId);
+      },
+      disabled: file.status === "uploading",
+      "aria-label": "\u5220\u9664\u6587\u4EF6",
+      children: /*#__PURE__*/_jsx(CloseOutlined, {})
+    }) : null;
+  };
+
+  // ==================== 渲染上传进度遮罩 ====================
+  var renderUploadOverlay = function renderUploadOverlay() {
+    return file.status === "uploading" ? /*#__PURE__*/_jsx("div", {
+      className: styles.imageOverlay,
+      children: /*#__PURE__*/_jsx(Progress, {
+        type: "circle",
+        percent: file.progress,
+        size: 30,
+        strokeColor: "#1677ff"
+      })
+    }) : null;
+  };
+
+  // ==================== 附件卡片渲染（type="file" 或普通文档） ====================
+  var renderFileCard = function renderFileCard() {
+    var iconType = getFileIconType(file);
+    var _getIcon = getIcon(iconType),
+      icon = _getIcon.icon,
+      color = _getIcon.color;
+    var isExternalUrl = url && url.startsWith("http");
     return /*#__PURE__*/_jsxs("div", {
       className: "".concat(styles.fileCard, " ").concat(align === "right" ? "align-right" : "", " ").concat(className || ""),
       style: _objectSpread(_objectSpread({}, style), {}, {
@@ -271,194 +301,162 @@ var FileGallery = function FileGallery(_ref) {
       onClick: function onClick() {
         return _onClick === null || _onClick === void 0 ? void 0 : _onClick(file);
       },
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: styles.imageThumbnail,
-        children: [/*#__PURE__*/_jsx(Image, {
-          src: url,
-          alt: fileName,
-          fallback: "data:image/png;base64,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",
-          preview: _onClick ? false : {
-            src: url
-          }
-        }), file.status === "uploading" && /*#__PURE__*/_jsx("div", {
-          className: styles.imageOverlay,
-          children: /*#__PURE__*/_jsx(Progress, {
-            type: "circle",
-            percent: file.progress,
-            size: 30,
-            strokeColor: "#1677ff"
-          })
-        })]
+      children: [/*#__PURE__*/_jsx("div", {
+        className: styles.fileIcon,
+        style: {
+          color: color
+        },
+        children: icon
       }), /*#__PURE__*/_jsxs("div", {
         className: styles.fileInfo,
-        children: [/*#__PURE__*/_jsx(Tooltip, {
+        children: [isExternalUrl && !_onClick ? /*#__PURE__*/_jsx("a", {
+          href: url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: styles.fileLink,
+          children: /*#__PURE__*/_jsx(Tooltip, {
+            title: fileName,
+            children: /*#__PURE__*/_jsx("div", {
+              className: styles.fileName,
+              children: fileName.length > 15 ? "".concat(fileName.substring(0, 15), "...") : fileName
+            })
+          })
+        }) : /*#__PURE__*/_jsx(Tooltip, {
           title: fileName,
           children: /*#__PURE__*/_jsx("div", {
             className: styles.fileName,
             children: fileName.length > 15 ? "".concat(fileName.substring(0, 15), "...") : fileName
           })
-        }), Number(file === null || file === void 0 ? void 0 : file.size) > 0 && /*#__PURE__*/_jsx("div", {
+        }), file.status === "uploading" ? /*#__PURE__*/_jsx(Progress, {
+          percent: file.progress,
+          size: "small",
+          showInfo: false,
+          strokeColor: "#1677ff",
+          className: styles.progress
+        }) : fileSize > 0 && /*#__PURE__*/_jsx("div", {
           className: styles.fileSize,
           children: formatFileSize(fileSize)
+        }), file.status === "error" && file.errorMessage && /*#__PURE__*/_jsx("div", {
+          style: {
+            fontSize: "11px",
+            color: "#ff4d4f",
+            marginTop: "2px"
+          },
+          children: file.errorMessage
         })]
-      }), removable && /*#__PURE__*/_jsx("button", {
-        className: styles.fileRemoveBtn,
-        onClick: function onClick() {
-          return onRemove(fileId);
-        },
-        disabled: file.status === "uploading",
-        "aria-label": "\u5220\u9664\u6587\u4EF6",
-        children: /*#__PURE__*/_jsx(CloseOutlined, {})
-      })]
+      }), renderRemoveBtn()]
     });
-  }
+  };
 
-  // 音频文件
-  if (isAudio) {
+  // ==================== 图片渲染 ====================
+  if (fileType === "image") {
+    // full / preview 模式：独立展示
+    if (imageDisplayMode === "full" || imageDisplayMode === "preview") {
+      var containerStyle = _objectSpread({}, style);
+      if (imageWidth) containerStyle.width = typeof imageWidth === "number" ? "".concat(imageWidth, "px") : imageWidth;
+      if (imageHeight) containerStyle.height = typeof imageHeight === "number" ? "".concat(imageHeight, "px") : imageHeight;
+      return /*#__PURE__*/_jsxs("div", {
+        className: "".concat(imageDisplayMode === "full" ? styles.imageFullMode : styles.imagePreviewMode, " ").concat(className || ""),
+        style: containerStyle,
+        children: [/*#__PURE__*/_jsx(ImageWithLoading, {
+          src: url,
+          alt: imageAlt || fileName,
+          displayMode: imageDisplayMode,
+          loading: imageLoading,
+          preview: _onClick ? false : {
+            src: url
+          },
+          fallback: FALLBACK_IMAGE,
+          styles: styles
+        }), renderUploadOverlay(), renderRemoveBtn()]
+      });
+    }
+
+    // thumbnail 模式：卡片形式
     return /*#__PURE__*/_jsxs("div", {
       className: "".concat(styles.fileCard, " ").concat(align === "right" ? "align-right" : "", " ").concat(className || ""),
-      style: style,
-      children: [/*#__PURE__*/_jsx("div", {
-        className: styles.fileIcon,
-        style: {
-          color: "#722ed1"
+      style: _objectSpread(_objectSpread({}, style), {}, {
+        cursor: _onClick ? "pointer" : undefined
+      }),
+      onClick: function onClick() {
+        return _onClick === null || _onClick === void 0 ? void 0 : _onClick(file);
+      },
+      children: [/*#__PURE__*/_jsx(ImageWithLoading, {
+        src: url,
+        alt: imageAlt || fileName,
+        width: imageWidth,
+        height: imageHeight,
+        displayMode: "thumbnail",
+        loading: imageLoading,
+        preview: _onClick ? false : {
+          src: url
         },
-        children: /*#__PURE__*/_jsx(AudioOutlined, {})
-      }), /*#__PURE__*/_jsxs("div", {
+        fallback: FALLBACK_IMAGE,
+        styles: styles
+      }), renderUploadOverlay(), /*#__PURE__*/_jsxs("div", {
         className: styles.fileInfo,
         children: [/*#__PURE__*/_jsx(Tooltip, {
           title: fileName,
           children: /*#__PURE__*/_jsx("div", {
             className: styles.fileName,
-            children: fileName
+            children: fileName.length > 15 ? "".concat(fileName.substring(0, 15), "...") : fileName
           })
-        }), /*#__PURE__*/_jsx("audio", {
-          src: url,
-          controls: true,
-          className: styles.mediaWrapper,
-          style: {
-            width: "100%",
-            height: 28
-          }
+        }), Number(file === null || file === void 0 ? void 0 : file.size) > 0 && /*#__PURE__*/_jsx("div", {
+          className: styles.fileSize,
+          children: formatFileSize(fileSize)
         })]
-      }), removable && /*#__PURE__*/_jsx("button", {
-        className: styles.fileRemoveBtn,
-        onClick: function onClick() {
-          return onRemove(fileId);
-        },
-        disabled: file.status === "uploading",
-        "aria-label": "\u5220\u9664\u6587\u4EF6",
-        children: /*#__PURE__*/_jsx(CloseOutlined, {})
-      })]
+      }), renderRemoveBtn()]
     });
   }
 
-  // 视频文件
-  if (isVideo) {
+  // ==================== 音频渲染（原生播放器，无卡片包裹） ====================
+  if (fileType === "audio") {
     return /*#__PURE__*/_jsxs("div", {
-      className: "".concat(styles.fileCard, " ").concat(align === "right" ? "align-right" : "", " ").concat(className || ""),
-      style: style,
-      children: [/*#__PURE__*/_jsx("div", {
-        className: styles.fileIcon,
+      className: "file-gallery-audio ".concat(className || ""),
+      style: _objectSpread({
+        position: "relative",
+        width: 268
+      }, style),
+      children: [/*#__PURE__*/_jsx("audio", _objectSpread({
+        src: url,
+        controls: true,
+        autoPlay: mediaAutoPlay,
+        loop: mediaLoop,
+        muted: mediaMuted,
         style: {
-          color: "#fa8c16"
-        },
-        children: /*#__PURE__*/_jsx(VideoCameraOutlined, {})
-      }), /*#__PURE__*/_jsxs("div", {
-        className: styles.fileInfo,
-        children: [/*#__PURE__*/_jsx(Tooltip, {
-          title: fileName,
-          children: /*#__PURE__*/_jsx("div", {
-            className: styles.fileName,
-            children: fileName
-          })
-        }), /*#__PURE__*/_jsx("video", {
-          src: url,
-          controls: true,
-          className: styles.mediaWrapper,
-          style: {
-            width: "100%",
-            height: 40
-          }
-        })]
-      }), removable && /*#__PURE__*/_jsx("button", {
-        className: styles.fileRemoveBtn,
-        onClick: function onClick() {
-          return onRemove(fileId);
-        },
-        disabled: file.status === "uploading",
-        "aria-label": "\u5220\u9664\u6587\u4EF6",
-        children: /*#__PURE__*/_jsx(CloseOutlined, {})
-      })]
+          width: "100%"
+        }
+      }, audioProps)), renderRemoveBtn()]
     });
   }
 
-  // 其他文件
-  var _getFileIcon = getFileIcon(file),
-    icon = _getFileIcon.icon,
-    color = _getFileIcon.color;
-  var isExternalUrl = url && url.startsWith("http");
-  return /*#__PURE__*/_jsxs("div", {
-    className: "".concat(styles.fileCard, " ").concat(align === "right" ? "align-right" : "", " ").concat(className || ""),
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      cursor: _onClick ? "pointer" : undefined
-    }),
-    onClick: function onClick() {
-      return _onClick === null || _onClick === void 0 ? void 0 : _onClick(file);
-    },
-    children: [/*#__PURE__*/_jsx("div", {
-      className: styles.fileIcon,
-      style: {
-        color: color
-      },
-      children: icon
-    }), /*#__PURE__*/_jsxs("div", {
-      className: styles.fileInfo,
-      children: [isExternalUrl && !_onClick ? /*#__PURE__*/_jsx("a", {
-        href: url,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className: styles.fileLink,
-        children: /*#__PURE__*/_jsx(Tooltip, {
-          title: fileName,
-          children: /*#__PURE__*/_jsx("div", {
-            className: styles.fileName,
-            children: fileName.length > 15 ? "".concat(fileName.substring(0, 15), "...") : fileName
-          })
-        })
-      }) : /*#__PURE__*/_jsx(Tooltip, {
-        title: fileName,
-        children: /*#__PURE__*/_jsx("div", {
-          className: styles.fileName,
-          children: fileName.length > 15 ? "".concat(fileName.substring(0, 15), "...") : fileName
-        })
-      }), file.status === "uploading" ? /*#__PURE__*/_jsx(Progress, {
-        percent: file.progress,
-        size: "small",
-        showInfo: false,
-        strokeColor: "#1677ff",
-        className: styles.progress
-      }) : fileSize > 0 && /*#__PURE__*/_jsx("div", {
-        className: styles.fileSize,
-        children: formatFileSize(fileSize)
-      }), file.status === "error" && file.errorMessage && /*#__PURE__*/_jsx("div", {
+  // ==================== 视频渲染（原生播放器，无卡片包裹） ====================
+  if (fileType === "video") {
+    return /*#__PURE__*/_jsxs("div", {
+      className: "file-gallery-video ".concat(className || ""),
+      style: _objectSpread({
+        position: "relative",
+        width: 268
+      }, style),
+      children: [/*#__PURE__*/_jsx("video", _objectSpread({
+        src: url,
+        controls: true,
+        autoPlay: mediaAutoPlay,
+        loop: mediaLoop,
+        muted: mediaMuted,
+        poster: mediaPoster,
         style: {
-          fontSize: "11px",
-          color: "#ff4d4f",
-          marginTop: "2px"
-        },
-        children: file.errorMessage
-      })]
-    }), removable && /*#__PURE__*/_jsx("button", {
-      className: styles.fileRemoveBtn,
-      onClick: function onClick() {
-        return onRemove(fileId);
-      },
-      disabled: file.status === "uploading",
-      "aria-label": "\u5220\u9664\u6587\u4EF6",
-      children: /*#__PURE__*/_jsx(CloseOutlined, {})
-    })]
-  });
+          width: "100%",
+          aspectRatio: "16 / 9",
+          borderRadius: 8,
+          background: "#000"
+        }
+      }, videoProps)), renderRemoveBtn()]
+    });
+  }
+
+  // ==================== 其他文件（附件卡片） ====================
+  return renderFileCard();
 };
 export default FileGallery;
 //# sourceMappingURL=index.js.map