@ai-group/chat-sdk 3.0.3 → 3.0.5

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import FileGallery from "./index";
+declare const meta: Meta<typeof FileGallery>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const 基础用法: Story;

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

@@ -0,0 +1,143 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/FileGallery/FileGallery.stories.tsx
+var FileGallery_stories_exports = {};
+__export(FileGallery_stories_exports, {
+  default: () => FileGallery_stories_default,
+  基础用法: () => 基础用法
+});
+module.exports = __toCommonJS(FileGallery_stories_exports);
+var import_index = __toESM(require("./index"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var meta = {
+  title: "AI组件/FileGallery 附件卡片",
+  component: import_index.default,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: `
+
+一个通用的单文件展示组件，类似 antd-design-x 的设计风格，支持多种文件类型的展示和交互。
+
+## ✨ 特性
+
+- 📁 支持多种文件类型展示 (图片、音频、视频、文档等)
+- 🖼️ 图片支持预览和缩略图
+- 🎵 音频文件支持内联播放
+- 🎬 视频文件支持内联播放
+- 📊 显示文件大小、类型图标
+- 🗑️ 支持删除操作
+- 📤 支持上传进度显示
+- 🎯 单文件设计，布局灵活可控
+- 🎨 支持卡片内部布局控制（图标在左/右）
+
+## 🎨 支持的文件类型
+
+### 图片 (带预览)
+
+- jpg, jpeg, png, gif, webp, bmp, svg
+
+### 音频 (内联播放)
+
+- mp3, wav, m4a, aac, ogg, flac
+
+### 视频 (内联播放)
+
+- mp4, mov, webm, mkv, avi
+
+### 文档 (图标展示)
+
+- PDF: pdf
+- Word: doc, docx
+- Excel: xls, xlsx, csv
+- PowerPoint: ppt, pptx
+- 其他: 通用文件图标
+
+## 📝 Props 说明
+
+| 属性      | 类型                  | 默认值 | 说明                                       |
+| --------- | --------------------- | ------ | ------------------------------------------ |
+| file      | FileItem              | -      | 文件对象（必需）                           |
+| align     | "left" | "right"     | "left" | 卡片内部布局：图标在左(left)或右(right)    |
+| removable | boolean               | false  | 是否显示删除按钮                           |
+| onRemove  | (id: string) => void  | -      | 删除文件回调                               |
+| className | string                | -      | 自定义样式类名                             |
+| style     | React.CSSProperties   | -      | 自定义样式                                 |
+
+
+## 💡 设计理念
+
+### 为什么是单文件设计？
+
+1. **布局灵活性**：上层组件可以自由控制文件列表的布局方式（flex、grid、水平、垂直等）
+2. **对齐控制**：通过容器的 CSS 控制整个列表的对齐方式，而非组件内部控制
+3. **责任单一**：组件专注于单个文件的展示，不关心列表布局
+4. **易于扩展**：可以轻松插入其他元素（如分隔符、标签等）
+        `
+      }
+    }
+  },
+  tags: ["autodocs"],
+  argTypes: {}
+};
+var FileGallery_stories_default = meta;
+var 基础用法 = {
+  render: () => {
+    const remoteFiles = [
+      {
+        displayName: "report.xlsx",
+        mimeType: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        fileUri: "https://example.com/report.xlsx"
+      },
+      {
+        displayName: "photo.png",
+        mimeType: "image/png",
+        fileUri: "https://example.com/photo.png"
+      }
+    ];
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: {
+          display: "flex",
+          flexWrap: "wrap",
+          gap: "8px",
+          justifyContent: "flex-start"
+        },
+        children: remoteFiles.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_index.default, { file, align: "left" }, index))
+      }
+    );
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  基础用法
+});
+//# sourceMappingURL=FileGallery.stories.js.map

package/dist/cjs/components/FileGallery/FileGallery.stories.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/FileGallery/FileGallery.stories.tsx"],
+  "sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport FileGallery from \"./index\";\n\nconst meta: Meta<typeof FileGallery> = {\n  title: \"AI组件/FileGallery 附件卡片\",\n  component: FileGallery,\n  parameters: {\n    layout: \"padded\",\n    docs: {\n      description: {\n        component: `\n\n一个通用的单文件展示组件，类似 antd-design-x 的设计风格，支持多种文件类型的展示和交互。\n\n## ✨ 特性\n\n- 📁 支持多种文件类型展示 (图片、音频、视频、文档等)\n- 🖼️ 图片支持预览和缩略图\n- 🎵 音频文件支持内联播放\n- 🎬 视频文件支持内联播放\n- 📊 显示文件大小、类型图标\n- 🗑️ 支持删除操作\n- 📤 支持上传进度显示\n- 🎯 单文件设计，布局灵活可控\n- 🎨 支持卡片内部布局控制（图标在左/右）\n\n## 🎨 支持的文件类型\n\n### 图片 (带预览)\n\n- jpg, jpeg, png, gif, webp, bmp, svg\n\n### 音频 (内联播放)\n\n- mp3, wav, m4a, aac, ogg, flac\n\n### 视频 (内联播放)\n\n- mp4, mov, webm, mkv, avi\n\n### 文档 (图标展示)\n\n- PDF: pdf\n- Word: doc, docx\n- Excel: xls, xlsx, csv\n- PowerPoint: ppt, pptx\n- 其他: 通用文件图标\n\n## 📝 Props 说明\n\n| 属性      | 类型                  | 默认值 | 说明                                       |\n| --------- | --------------------- | ------ | ------------------------------------------ |\n| file      | FileItem              | -      | 文件对象（必需）                           |\n| align     | \"left\" \\| \"right\"     | \"left\" | 卡片内部布局：图标在左(left)或右(right)    |\n| removable | boolean               | false  | 是否显示删除按钮                           |\n| onRemove  | (id: string) => void  | -      | 删除文件回调                               |\n| className | string                | -      | 自定义样式类名                             |\n| style     | React.CSSProperties   | -      | 自定义样式                                 |\n\n\n## 💡 设计理念\n\n### 为什么是单文件设计？\n\n1. **布局灵活性**：上层组件可以自由控制文件列表的布局方式（flex、grid、水平、垂直等）\n2. **对齐控制**：通过容器的 CSS 控制整个列表的对齐方式，而非组件内部控制\n3. **责任单一**：组件专注于单个文件的展示，不关心列表布局\n4. **易于扩展**：可以轻松插入其他元素（如分隔符、标签等）\n        `,\n      },\n    },\n  },\n  tags: [\"autodocs\"],\n  argTypes: {},\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\n// ============================================\n// 示例 1: 基础用法\n// ============================================\nexport const 基础用法: Story = {\n  render: () => {\n    const remoteFiles = [\n      {\n        displayName: \"report.xlsx\",\n        mimeType:\n          \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\n        fileUri: \"https://example.com/report.xlsx\",\n      },\n      {\n        displayName: \"photo.png\",\n        mimeType: \"image/png\",\n        fileUri: \"https://example.com/photo.png\",\n      },\n    ];\n\n    return (\n      <div\n        style={{\n          display: \"flex\",\n          flexWrap: \"wrap\",\n          gap: \"8px\",\n          justifyContent: \"flex-start\",\n        }}\n      >\n        {remoteFiles.map((file, index) => (\n          <FileGallery key={index} file={file} align=\"left\" />\n        ))}\n      </div>\n    );\n  },\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAwB;AA2Gd;AAzGV,IAAM,OAAiC;AAAA,EACrC,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MA2Db;AAAA,IACF;AAAA,EACF;AAAA,EACA,MAAM,CAAC,UAAU;AAAA,EACjB,UAAU,CAAC;AACb;AAEA,IAAO,8BAAQ;AAMR,IAAM,OAAc;AAAA,EACzB,QAAQ,MAAM;AACZ,UAAM,cAAc;AAAA,MAClB;AAAA,QACE,aAAa;AAAA,QACb,UACE;AAAA,QACF,SAAS;AAAA,MACX;AAAA,MACA;AAAA,QACE,aAAa;AAAA,QACb,UAAU;AAAA,QACV,SAAS;AAAA,MACX;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,SAAS;AAAA,UACT,UAAU;AAAA,UACV,KAAK;AAAA,UACL,gBAAgB;AAAA,QAClB;AAAA,QAEC,sBAAY,IAAI,CAAC,MAAM,UACtB,4CAAC,aAAAA,SAAA,EAAwB,MAAY,OAAM,UAAzB,KAAgC,CACnD;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;",
+  "names": ["FileGallery"]
+}

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { FileGalleryProps } from "../../types";
 /**
- * FileGallery - 通用文件展示组件
+ * FileGallery - 单文件展示组件
  *
  * 功能特性:
  * - 📁 支持多种文件类型展示 (图片、音频、视频、文档等)
@@ -11,23 +11,24 @@ import { FileGalleryProps } from "../../types";
  * - 📊 显示文件大小、类型图标
  * - 🗑️ 支持删除操作
  * - 📤 支持上传进度显示
- * - 🎨 支持左右对齐
+ * - 🎨 支持卡片内部布局控制（align：图标和信息的排列方式）
  *
  * @example
  * // XAdkSender 场景 - 可删除的本地文件
- * <FileGallery
- *   files={localFiles}
- *   removable
- *   onRemove={handleRemove}
- *   align="left"
- * />
+ * {files.map(file => (
+ *   <FileGallery
+ *     key={file.id}
+ *     file={file}
+ *     removable
+ *     onRemove={handleRemove}
+ *   />
+ * ))}
  *
  * @example
  * // XadkChatbot 场景 - 只读的远程文件
- * <FileGallery
- *   files={remoteFiles}
- *   align="right"
- * />
+ * {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

@@ -106,10 +106,14 @@ var formatFileSize = (bytes) => {
   return (bytes / (1024 * 1024)).toFixed(1) + " MB";
 };
 var styles = (0, import_styles.useStyles)();
-var FileItemComponent = ({
+var FileGallery = ({
   file,
-  removable,
-  onRemove
+  align = "left",
+  removable = false,
+  onRemove = () => {
+  },
+  className,
+  style
 }) => {
   const [objectUrl, setObjectUrl] = (0, import_react.useState)("");
   (0, import_react.useEffect)(() => {
@@ -119,6 +123,8 @@ var FileItemComponent = ({
     setObjectUrl(url2);
     return () => URL.revokeObjectURL(url2);
   }, [file.file]);
+  if (!file)
+    return null;
   const isImage = isImageFile(file);
   const isAudio = isAudioFile(file);
   const isVideo = isVideoFile(file);
@@ -127,173 +133,173 @@ var FileItemComponent = ({
   const fileId = getFileId(file);
   const url = getFileUrl(file) || objectUrl;
   if (isImage) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.fileCard, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.imageThumbnail, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_antd.Image,
-          {
-            src: url,
-            alt: fileName,
-            fallback: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==",
-            preview: {
-              src: url
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: `${styles.fileCard} ${align === "right" ? "align-right" : ""} ${className || ""}`,
+        style,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.imageThumbnail, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_antd.Image,
+              {
+                src: url,
+                alt: fileName,
+                fallback: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mN8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==",
+                preview: {
+                  src: url
+                }
+              }
+            ),
+            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"
+              }
+            ) })
+          ] }),
+          /* @__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 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileSize, children: formatFileSize(fileSize) })
+          ] }),
+          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, {})
             }
-          }
-        ),
-        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"
-          }
-        ) })
-      ] }),
-      /* @__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 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileSize, children: formatFileSize(fileSize) })
-      ] }),
-      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, {})
-        }
-      )
-    ] });
+          )
+        ]
+      }
+    );
   }
   if (isAudio) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.fileCard, 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",
-        {
-          className: styles.fileRemoveBtn,
-          onClick: () => onRemove(fileId),
-          disabled: file.status === "uploading",
-          "aria-label": "删除文件",
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseOutlined, {})
-        }
-      )
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: `${styles.fileCard} ${align === "right" ? "align-right" : ""} ${className || ""}`,
+        style,
+        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",
+            {
+              className: styles.fileRemoveBtn,
+              onClick: () => onRemove(fileId),
+              disabled: file.status === "uploading",
+              "aria-label": "删除文件",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseOutlined, {})
+            }
+          )
+        ]
+      }
+    );
   }
   if (isVideo) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.fileCard, 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",
-        {
-          className: styles.fileRemoveBtn,
-          onClick: () => onRemove(fileId),
-          disabled: file.status === "uploading",
-          "aria-label": "删除文件",
-          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseOutlined, {})
-        }
-      )
-    ] });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: `${styles.fileCard} ${align === "right" ? "align-right" : ""} ${className || ""}`,
+        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",
+            {
+              className: styles.fileRemoveBtn,
+              onClick: () => onRemove(fileId),
+              disabled: file.status === "uploading",
+              "aria-label": "删除文件",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icons.CloseOutlined, {})
+            }
+          )
+        ]
+      }
+    );
   }
   const { icon, color } = getFileIcon(file);
   const isExternalUrl = url && url.startsWith("http");
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.fileCard, 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 ? /* @__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",
-        {
-          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, {})
-      }
-    )
-  ] });
-};
-var FileGallery = ({
-  files,
-  align = "left",
-  removable = false,
-  onRemove = () => {
-  },
-  className,
-  style
-}) => {
-  if (!files || files.length === 0)
-    return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
-      className: `${styles.container} ${align === "right" ? "align-right" : ""} ${className || ""}`,
+      className: `${styles.fileCard} ${align === "right" ? "align-right" : ""} ${className || ""}`,
       style,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.fileList, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_antd.Image.PreviewGroup, { children: files.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        FileItemComponent,
-        {
-          file,
-          removable,
-          onRemove
-        },
-        getFileId(file) || index
-      )) }) })
+      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 ? /* @__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",
+            {
+              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, {})
+          }
+        )
+      ]
     }
   );
 };