@ai-group/chat-sdk 3.6.2 → 3.6.4

package/dist/cjs/components/FileGallery/index.d.ts

@@ -1,34 +1,4 @@
 import React from "react";
 import { FileGalleryProps } from "../../types";
-/**
- * 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} />
- * ))}
- */
 declare const FileGallery: React.FC<FileGalleryProps>;
 export default FileGallery;

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

@@ -27,90 +27,82 @@ var import_antd = require("antd");
 var import_icons = require("@ant-design/icons");
 var import_styles = require("./styles");
 var import_jsx_runtime = require("react/jsx-runtime");
-var getFileName = (file) => {
-  return file.displayName || file.name || "";
-};
-var getFileSize = (file) => {
-  return file.size || 0;
-};
-var getMimeType = (file) => {
-  return file.mimeType || file.type || "";
-};
+var getFileName = (file) => file.displayName || file.name || "";
+var getFileSize = (file) => file.size || 0;
+var getMimeType = (file) => file.mimeType || file.type || "";
 var getFileUrl = (file) => {
   var _a, _b;
   return file.fileUri || ((_a = file.response) == null ? void 0 : _a.fileUrl) || ((_b = file.response) == null ? void 0 : _b.tempUrl) || file.tempUrl || "";
 };
-var getFileId = (file) => {
-  return file.id || file.uid || "";
-};
-var isImageFile = (file) => {
-  const mimeType = getMimeType(file);
-  if (mimeType && mimeType.startsWith("image/"))
-    return true;
-  const fileName = getFileName(file);
-  if (fileName && fileName.match(/\.(jpg|jpeg|png|gif|webp|bmp|svg)$/i))
-    return true;
-  const url = getFileUrl(file);
-  if (url && url.match(/\.(jpg|jpeg|png|gif|webp|bmp|svg)(\?.*)?$/i))
-    return true;
-  return false;
-};
-var isAudioFile = (file) => {
-  const mimeType = getMimeType(file);
-  if (mimeType && mimeType.startsWith("audio/"))
-    return true;
-  const fileName = getFileName(file);
-  return !!(fileName == null ? void 0 : fileName.match(/\.(mp3|wav|m4a|aac|ogg|flac)$/i));
-};
-var isVideoFile = (file) => {
-  const mimeType = getMimeType(file);
-  if (mimeType && mimeType.startsWith("video/"))
-    return true;
-  const fileName = getFileName(file);
-  return !!(fileName == null ? void 0 : fileName.match(/\.(mp4|mov|webm|mkv|avi)$/i));
-};
-var isZipFile = (file) => {
-  const fileName = getFileName(file);
-  return !!(fileName == null ? void 0 : fileName.match(/\.(zip|rar|7z|tar|gz|bz2|xz|tgz)$/i));
-};
-var isMarkdownFile = (file) => {
-  const fileName = getFileName(file);
-  return !!(fileName == null ? void 0 : fileName.match(/\.(md|markdown)$/i));
-};
+var getFileId = (file) => file.id || file.uid || "";
 var getFileExtension = (filename) => {
   const ext = filename.split(".").pop();
   return ext ? ext.toLowerCase() : "";
 };
-var getFileIcon = (file) => {
+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 inferFileType = (file) => {
+  const mimeType = getMimeType(file);
+  if (mimeType.startsWith("image/"))
+    return "image";
+  if (mimeType.startsWith("audio/"))
+    return "audio";
+  if (mimeType.startsWith("video/"))
+    return "video";
   const ext = getFileExtension(getFileName(file));
-  if (ext === "pdf") {
-    return { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FilePdfOutlined, {}), color: "#ff4d4f" };
-  }
-  if (["doc", "docx"].includes(ext)) {
-    return { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FileWordOutlined, {}), color: "#1677ff" };
-  }
-  if (["xls", "xlsx", "csv"].includes(ext)) {
-    return { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FileExcelOutlined, {}), color: "#22b35e" };
-  }
-  if (["ppt", "pptx"].includes(ext)) {
-    return { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FilePptOutlined, {}), color: "#ff6e31" };
-  }
-  if (["mp3", "wav", "m4a", "aac", "ogg", "flac"].includes(ext)) {
-    return { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.AudioOutlined, {}), color: "#722ed1" };
-  }
-  if (["mp4", "mov", "webm", "mkv", "avi"].includes(ext)) {
-    return { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.VideoCameraOutlined, {}), color: "#fa8c16" };
-  }
-  if (["zip", "rar", "7z", "tar", "gz", "bz2", "xz", "tgz"].includes(ext)) {
-    return { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FileZipOutlined, {}), color: "#eb2f96" };
-  }
-  if (["md", "markdown"].includes(ext)) {
-    return { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FileMarkdownOutlined, {}), color: "#13c2c2" };
-  }
-  if (isImageFile(file)) {
-    return { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FileImageOutlined, {}), color: "#8c8c8c" };
+  if (IMAGE_EXTS.includes(ext))
+    return "image";
+  if (AUDIO_EXTS.includes(ext))
+    return "audio";
+  if (VIDEO_EXTS.includes(ext))
+    return "video";
+  const url = getFileUrl(file);
+  const urlExtMatch = url.match(/\.(\w+)(\?.*)?$/);
+  if (urlExtMatch) {
+    const 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 { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FileOutlined, {}), color: "#8c8c8c" };
+  return "file";
+};
+var getFileIconType = (file) => {
+  const 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";
+};
+var DEFAULT_ICON_MAP = {
+  pdf: { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FilePdfOutlined, {}), color: "#ff4d4f" },
+  word: { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FileWordOutlined, {}), color: "#1677ff" },
+  excel: { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FileExcelOutlined, {}), color: "#22b35e" },
+  ppt: { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FilePptOutlined, {}), color: "#ff6e31" },
+  audio: { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.AudioOutlined, {}), color: "#722ed1" },
+  video: { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.VideoCameraOutlined, {}), color: "#fa8c16" },
+  zip: { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FileZipOutlined, {}), color: "#eb2f96" },
+  markdown: { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FileMarkdownOutlined, {}), color: "#13c2c2" },
+  image: { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FileImageOutlined, {}), color: "#8c8c8c" },
+  default: { icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.FileOutlined, {}), color: "#8c8c8c" }
 };
 var formatFileSize = (bytes) => {
   if (bytes < 1024)
@@ -119,7 +111,54 @@ var formatFileSize = (bytes) => {
     return (bytes / 1024).toFixed(1) + " KB";
   return (bytes / (1024 * 1024)).toFixed(1) + " MB";
 };
-var styles = (0, import_styles.useStyles)();
+var FALLBACK_IMAGE = "data:image/png;base64,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";
+var ImageWithLoading = ({
+  src,
+  alt,
+  width,
+  height,
+  loading,
+  preview,
+  fallback,
+  displayMode,
+  styles
+}) => {
+  const [loadState, setLoadState] = (0, import_react.useState)("loading");
+  (0, import_react.useEffect)(() => {
+    setLoadState("loading");
+  }, [src]);
+  const modeClass = displayMode === "full" ? styles.imageFullMode : displayMode === "preview" ? styles.imagePreviewMode : styles.imageThumbnail;
+  const containerStyle = {};
+  if (width)
+    containerStyle.width = typeof width === "number" ? `${width}px` : width;
+  if (height)
+    containerStyle.height = typeof height === "number" ? `${height}px` : height;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: modeClass, style: containerStyle, children: [
+    loadState === "loading" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.imageLoadingSkeleton, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.PictureOutlined, { style: { fontSize: 20, color: "#d9d9d9" } }) }),
+    loadState === "error" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.imageErrorFallback, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.PictureOutlined, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "加载失败" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_antd.Image,
+      {
+        src,
+        alt,
+        fallback,
+        preview,
+        loading,
+        style: {
+          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: () => setLoadState("loaded"),
+        onError: () => setLoadState("error")
+      }
+    )
+  ] });
+};
 var FileGallery = ({
   file,
   align = "left",
@@ -128,8 +167,26 @@ var FileGallery = ({
   },
   className,
   style,
-  onClick
+  onClick,
+  type: customType,
+  // 图片相关
+  imageDisplayMode = "thumbnail",
+  imageWidth,
+  imageHeight,
+  imageLoading = "eager",
+  imageAlt,
+  // 音视频相关
+  mediaAutoPlay = false,
+  mediaLoop = false,
+  mediaMuted = false,
+  mediaPoster,
+  videoProps,
+  audioProps,
+  // 自定义图标
+  iconMap,
+  customIcon
 }) => {
+  const styles = (0, import_styles.useStyles)();
   const [objectUrl, setObjectUrl] = (0, import_react.useState)("");
   (0, import_react.useEffect)(() => {
     if (!(file == null ? void 0 : file.file))
@@ -140,16 +197,47 @@ var FileGallery = ({
   }, [file == null ? void 0 : file.file]);
   if (!file)
     return null;
-  const isImage = isImageFile(file);
-  const isAudio = isAudioFile(file);
-  const isVideo = isVideoFile(file);
-  const isZip = isZipFile(file);
-  const isMarkdown = isMarkdownFile(file);
   const fileName = getFileName(file);
   const fileSize = getFileSize(file);
   const fileId = getFileId(file);
   const url = getFileUrl(file) || objectUrl;
-  if (isImage) {
+  const fileType = (0, import_react.useMemo)(
+    () => customType || inferFileType(file),
+    [customType, file]
+  );
+  const getIcon = (iconType) => {
+    if (customIcon)
+      return { icon: customIcon, color: "inherit" };
+    if (iconMap == null ? void 0 : iconMap[iconType])
+      return { icon: iconMap[iconType], color: "inherit" };
+    return DEFAULT_ICON_MAP[iconType];
+  };
+  const renderRemoveBtn = () => removable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      className: styles.fileRemoveBtn,
+      onClick: (e) => {
+        e.stopPropagation();
+        onRemove(fileId);
+      },
+      disabled: file.status === "uploading",
+      "aria-label": "删除文件",
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseOutlined, {})
+    }
+  ) : null;
+  const renderUploadOverlay = () => file.status === "uploading" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.imageOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_antd.Progress,
+    {
+      type: "circle",
+      percent: file.progress,
+      size: 30,
+      strokeColor: "#1677ff"
+    }
+  ) }) : null;
+  const renderFileCard = () => {
+    const iconType = getFileIconType(file);
+    const { icon, color } = getIcon(iconType);
+    const isExternalUrl = url && url.startsWith("http");
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
@@ -157,168 +245,158 @@ var FileGallery = ({
         style: { ...style, cursor: onClick ? "pointer" : void 0 },
         onClick: () => onClick == null ? void 0 : onClick(file),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.imageThumbnail, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_antd.Image,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileIcon, style: { color }, children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.fileInfo, children: [
+            isExternalUrl && !onClick ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "a",
               {
-                src: url,
-                alt: fileName,
-                fallback: "data:image/png;base64,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",
-                preview: onClick ? false : { src: url }
+                href: url,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: styles.fileLink,
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: fileName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileName, children: fileName.length > 15 ? `${fileName.substring(0, 15)}...` : fileName }) })
               }
-            ),
-            file.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.imageOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: fileName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileName, children: fileName.length > 15 ? `${fileName.substring(0, 15)}...` : fileName }) }),
+            file.status === "uploading" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_antd.Progress,
               {
-                type: "circle",
                 percent: file.progress,
-                size: 30,
-                strokeColor: "#1677ff"
+                size: "small",
+                showInfo: false,
+                strokeColor: "#1677ff",
+                className: styles.progress
               }
-            ) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.fileInfo, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: fileName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileName, children: fileName.length > 15 ? `${fileName.substring(0, 15)}...` : fileName }) }),
-            Number(file == null ? void 0 : file.size) > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileSize, children: formatFileSize(fileSize) })
+            ) : fileSize > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileSize, children: formatFileSize(fileSize) }),
+            file.status === "error" && file.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                style: { fontSize: "11px", color: "#ff4d4f", marginTop: "2px" },
+                children: file.errorMessage
+              }
+            )
           ] }),
-          removable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
-            {
-              className: styles.fileRemoveBtn,
-              onClick: () => onRemove(fileId),
-              disabled: file.status === "uploading",
-              "aria-label": "删除文件",
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseOutlined, {})
-            }
-          )
+          renderRemoveBtn()
         ]
       }
     );
-  }
-  if (isAudio) {
+  };
+  if (fileType === "image") {
+    if (imageDisplayMode === "full" || imageDisplayMode === "preview") {
+      const containerStyle = { ...style };
+      if (imageWidth)
+        containerStyle.width = typeof imageWidth === "number" ? `${imageWidth}px` : imageWidth;
+      if (imageHeight)
+        containerStyle.height = typeof imageHeight === "number" ? `${imageHeight}px` : imageHeight;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: `${imageDisplayMode === "full" ? styles.imageFullMode : styles.imagePreviewMode} ${className || ""}`,
+          style: containerStyle,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              ImageWithLoading,
+              {
+                src: url,
+                alt: imageAlt || fileName,
+                displayMode: imageDisplayMode,
+                loading: imageLoading,
+                preview: onClick ? false : { src: url },
+                fallback: FALLBACK_IMAGE,
+                styles
+              }
+            ),
+            renderUploadOverlay(),
+            renderRemoveBtn()
+          ]
+        }
+      );
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
         className: `${styles.fileCard} ${align === "right" ? "align-right" : ""} ${className || ""}`,
-        style,
+        style: { ...style, cursor: onClick ? "pointer" : void 0 },
+        onClick: () => onClick == null ? void 0 : onClick(file),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileIcon, style: { color: "#722ed1" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.AudioOutlined, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.fileInfo, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: fileName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileName, children: fileName }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "audio",
-              {
-                src: url,
-                controls: true,
-                className: styles.mediaWrapper,
-                style: { width: "100%", height: 28 }
-              }
-            )
-          ] }),
-          removable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            ImageWithLoading,
             {
-              className: styles.fileRemoveBtn,
-              onClick: () => onRemove(fileId),
-              disabled: file.status === "uploading",
-              "aria-label": "删除文件",
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseOutlined, {})
+              src: url,
+              alt: imageAlt || fileName,
+              width: imageWidth,
+              height: imageHeight,
+              displayMode: "thumbnail",
+              loading: imageLoading,
+              preview: onClick ? false : { src: url },
+              fallback: FALLBACK_IMAGE,
+              styles
             }
-          )
+          ),
+          renderUploadOverlay(),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.fileInfo, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: fileName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileName, children: fileName.length > 15 ? `${fileName.substring(0, 15)}...` : fileName }) }),
+            Number(file == null ? void 0 : file.size) > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileSize, children: formatFileSize(fileSize) })
+          ] }),
+          renderRemoveBtn()
         ]
       }
     );
   }
-  if (isVideo) {
+  if (fileType === "audio") {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
-        className: `${styles.fileCard} ${align === "right" ? "align-right" : ""} ${className || ""}`,
-        style,
+        className: `file-gallery-audio ${className || ""}`,
+        style: { position: "relative", width: 268, ...style },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileIcon, style: { color: "#fa8c16" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.VideoCameraOutlined, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.fileInfo, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: fileName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileName, children: fileName }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "video",
-              {
-                src: url,
-                controls: true,
-                className: styles.mediaWrapper,
-                style: { width: "100%", height: 40 }
-              }
-            )
-          ] }),
-          removable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "audio",
             {
-              className: styles.fileRemoveBtn,
-              onClick: () => onRemove(fileId),
-              disabled: file.status === "uploading",
-              "aria-label": "删除文件",
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseOutlined, {})
+              src: url,
+              controls: true,
+              autoPlay: mediaAutoPlay,
+              loop: mediaLoop,
+              muted: mediaMuted,
+              style: { width: "100%" },
+              ...audioProps
             }
-          )
+          ),
+          renderRemoveBtn()
         ]
       }
     );
   }
-  const { icon, color } = getFileIcon(file);
-  const isExternalUrl = url && url.startsWith("http");
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-    "div",
-    {
-      className: `${styles.fileCard} ${align === "right" ? "align-right" : ""} ${className || ""}`,
-      style: { ...style, cursor: onClick ? "pointer" : void 0 },
-      onClick: () => onClick == null ? void 0 : onClick(file),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileIcon, style: { color }, children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.fileInfo, children: [
-          isExternalUrl && !onClick ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "a",
-            {
-              href: url,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: styles.fileLink,
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: fileName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileName, children: fileName.length > 15 ? `${fileName.substring(0, 15)}...` : fileName }) })
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Tooltip, { title: fileName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileName, children: fileName.length > 15 ? `${fileName.substring(0, 15)}...` : fileName }) }),
-          file.status === "uploading" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_antd.Progress,
-            {
-              percent: file.progress,
-              size: "small",
-              showInfo: false,
-              strokeColor: "#1677ff",
-              className: styles.progress
-            }
-          ) : fileSize > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileSize, children: formatFileSize(fileSize) }),
-          file.status === "error" && file.errorMessage && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "div",
+  if (fileType === "video") {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: `file-gallery-video ${className || ""}`,
+        style: { position: "relative", width: 268, ...style },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "video",
             {
+              src: url,
+              controls: true,
+              autoPlay: mediaAutoPlay,
+              loop: mediaLoop,
+              muted: mediaMuted,
+              poster: mediaPoster,
               style: {
-                fontSize: "11px",
-                color: "#ff4d4f",
-                marginTop: "2px"
+                width: "100%",
+                aspectRatio: "16 / 9",
+                borderRadius: 8,
+                background: "#000"
               },
-              children: file.errorMessage
+              ...videoProps
             }
-          )
-        ] }),
-        removable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
-          {
-            className: styles.fileRemoveBtn,
-            onClick: () => onRemove(fileId),
-            disabled: file.status === "uploading",
-            "aria-label": "删除文件",
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseOutlined, {})
-          }
-        )
-      ]
-    }
-  );
+          ),
+          renderRemoveBtn()
+        ]
+      }
+    );
+  }
+  return renderFileCard();
 };
 var FileGallery_default = FileGallery;
 //# sourceMappingURL=index.js.map