@ant-design/agentic-ui 2.8.0 → 2.9.0

package/dist/Workspace/File/PreviewComponent.js

@@ -1,565 +1,505 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
     }
-  return a;
-};
-
-// src/Workspace/File/PreviewComponent.tsx
+    return obj;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
 import { LoadingOutlined } from "@ant-design/icons";
-import {
-  Download as DownloadIcon,
-  ArrowLeft as LeftIcon,
-  Locate,
-  SquareArrowOutUpRight as ShareIcon
-} from "@sofa-design/icons";
-import {
-  Alert,
-  Button,
-  ConfigProvider,
-  Image,
-  Segmented,
-  Spin,
-  Typography
-} from "antd";
+import { Download as DownloadIcon, ArrowLeft as LeftIcon, Locate, SquareArrowOutUpRight as ShareIcon } from "@sofa-design/icons";
+import { Alert, Button, ConfigProvider, Image, Segmented, Spin, Typography } from "antd";
 import classNames from "classnames";
 import React, { useContext, useEffect, useRef, useState } from "react";
 import { ActionIconBox } from "../../Components/ActionIconBox";
 import { I18nContext } from "../../I18n";
-import {
-  MarkdownEditor
-} from "../../MarkdownEditor";
+import { MarkdownEditor } from "../../MarkdownEditor";
 import { HtmlPreview } from "../HtmlPreview";
 import { formatFileSize, formatLastModified } from "../utils";
-import {
-  getLanguageFromFilename,
-  wrapContentInCodeBlock
-} from "../utils/codeLanguageUtils";
+import { getLanguageFromFilename, wrapContentInCodeBlock } from "../utils/codeLanguageUtils";
 import { fileTypeProcessor } from "./FileTypeProcessor";
 import { useFileStyle } from "./style";
 import { getFileTypeIcon } from "./utils";
-var HTML_MIME_TYPE = "text/html";
-var HTML_EXTENSIONS = [".html", ".htm"];
-var EDITOR_PADDING = "0 12px";
-var isHtmlFile = (fileName, mimeType) => {
-  const name = (fileName == null ? void 0 : fileName.toLowerCase()) || "";
-  const byExtension = HTML_EXTENSIONS.some((ext) => name.endsWith(ext));
-  const byMimeType = mimeType === HTML_MIME_TYPE;
-  return byExtension || byMimeType;
+var HTML_MIME_TYPE = 'text/html';
+var HTML_EXTENSIONS = [
+    '.html',
+    '.htm'
+];
+var EDITOR_PADDING = '0 12px';
+var isHtmlFile = function(fileName, mimeType) {
+    var name = (fileName === null || fileName === void 0 ? void 0 : fileName.toLowerCase()) || '';
+    var byExtension = HTML_EXTENSIONS.some(function(ext) {
+        return name.endsWith(ext);
+    });
+    var byMimeType = mimeType === HTML_MIME_TYPE;
+    return byExtension || byMimeType;
 };
-var getContentStatus = (state) => {
-  if ("error" in state)
-    return "error";
-  return state.status === "loading" ? "loading" : "done";
+var getContentStatus = function(state) {
+    if ('error' in state) return 'error';
+    return state.status === 'loading' ? 'loading' : 'done';
 };
-var buildMarkdownContent = (raw, category, fileName) => {
-  if (category === "code") {
-    const language = getLanguageFromFilename(fileName);
-    return wrapContentInCodeBlock(raw, language);
-  }
-  return raw;
+var buildMarkdownContent = function(raw, category, fileName) {
+    if (category === 'code') {
+        var language = getLanguageFromFilename(fileName);
+        return wrapContentInCodeBlock(raw, language);
+    }
+    return raw;
 };
-var PlaceholderContent = ({
-  children,
-  showFileInfo,
-  file,
-  onDownload,
-  locale,
-  prefixCls,
-  hashId
-}) => {
-  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-  const finalPrefixCls = prefixCls || getPrefixCls("workspace-preview");
-  return /* @__PURE__ */ React.createElement("div", { className: classNames(`${finalPrefixCls}-placeholder`, hashId) }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: classNames(`${finalPrefixCls}-placeholder-content`, hashId)
-    },
-    children,
-    showFileInfo && file && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, (locale == null ? void 0 : locale["workspace.file.fileName"]) || "文件名：", file.name), file.size && /* @__PURE__ */ React.createElement("p", null, (locale == null ? void 0 : locale["workspace.file.fileSize"]) || "文件大小：", file.size), onDownload && /* @__PURE__ */ React.createElement(
-      "button",
-      {
+// 占位符组件
+var PlaceholderContent = function(param) {
+    var children = param.children, showFileInfo = param.showFileInfo, file = param.file, onDownload = param.onDownload, locale = param.locale, prefixCls = param.prefixCls, hashId = param.hashId;
+    var getPrefixCls = useContext(ConfigProvider.ConfigContext).getPrefixCls;
+    var finalPrefixCls = prefixCls || getPrefixCls('workspace-preview');
+    return /*#__PURE__*/ React.createElement("div", {
+        className: classNames("".concat(finalPrefixCls, "-placeholder"), hashId)
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: classNames("".concat(finalPrefixCls, "-placeholder-content"), hashId)
+    }, children, showFileInfo && file && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("p", null, (locale === null || locale === void 0 ? void 0 : locale['workspace.file.fileName']) || '文件名：', file.name), file.size && /*#__PURE__*/ React.createElement("p", null, (locale === null || locale === void 0 ? void 0 : locale['workspace.file.fileSize']) || '文件大小：', file.size), onDownload && /*#__PURE__*/ React.createElement("button", {
         type: "button",
-        className: classNames(
-          `${finalPrefixCls}-download-button`,
-          hashId
-        ),
+        className: classNames("".concat(finalPrefixCls, "-download-button"), hashId),
         onClick: onDownload,
-        "aria-label": (locale == null ? void 0 : locale["workspace.file.download"]) || "下载文件"
-      },
-      (locale == null ? void 0 : locale["workspace.file.clickToDownload"]) || "点击下载"
-    ))
-  ));
+        "aria-label": (locale === null || locale === void 0 ? void 0 : locale['workspace.file.download']) || '下载文件'
+    }, (locale === null || locale === void 0 ? void 0 : locale['workspace.file.clickToDownload']) || '点击下载'))));
 };
-var PreviewComponent = ({
-  file,
-  customContent,
-  customHeader,
-  customActions,
-  onBack,
-  onDownload,
-  onShare,
-  onLocate,
-  markdownEditorProps,
-  headerFileOverride
-}) => {
-  var _a, _b;
-  const { locale } = useContext(I18nContext);
-  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
-  const filePrefixCls = getPrefixCls("workspace-file");
-  const { wrapSSR, hashId } = useFileStyle(filePrefixCls);
-  const prefixCls = `${filePrefixCls}-preview`;
-  const editorRef = useRef();
-  const [processResult, setProcessResult] = useState(
-    null
-  );
-  const [contentState, setContentState] = useState({
-    status: "idle",
-    mdContent: "",
-    rawContent: ""
-  });
-  const [htmlViewMode, setHtmlViewMode] = useState(
-    "preview"
-  );
-  const handleDownload = () => {
-    onDownload == null ? void 0 : onDownload(file);
-  };
-  const handleShare = (e) => {
-    onShare == null ? void 0 : onShare(file, {
-      anchorEl: e.currentTarget,
-      origin: "preview"
-    });
-  };
-  const handleLocate = () => {
-    onLocate == null ? void 0 : onLocate(file);
-  };
-  useEffect(() => {
-    if (customContent)
-      return;
-    try {
-      const result = fileTypeProcessor.processFile(file);
-      setProcessResult(result);
-    } catch (err) {
-      setContentState({
-        status: "error",
-        error: err instanceof Error ? err.message : "文件处理失败"
-      });
-    }
-  }, [file, customContent]);
-  useEffect(() => {
-    if (customContent || !processResult)
-      return;
-    const { typeInference, dataSource } = processResult;
-    const isTextOrCode = typeInference.category === "text" || typeInference.category === "code";
-    if (!isTextOrCode)
-      return;
-    const setReadyContent = (raw) => {
-      setContentState({
-        status: "ready",
-        mdContent: buildMarkdownContent(raw, typeInference.category, file.name),
-        rawContent: raw
-      });
+/**
+ * 文件预览组件
+ */ export var PreviewComponent = function(param) {
+    var file = param.file, customContent = param.customContent, customHeader = param.customHeader, customActions = param.customActions, onBack = param.onBack, onDownload = param.onDownload, onShare = param.onShare, onLocate = param.onLocate, markdownEditorProps = param.markdownEditorProps, headerFileOverride = param.headerFileOverride;
+    var locale = useContext(I18nContext).locale;
+    var getPrefixCls = useContext(ConfigProvider.ConfigContext).getPrefixCls;
+    var filePrefixCls = getPrefixCls('workspace-file');
+    var _useFileStyle = useFileStyle(filePrefixCls), wrapSSR = _useFileStyle.wrapSSR, hashId = _useFileStyle.hashId;
+    var prefixCls = "".concat(filePrefixCls, "-preview");
+    var editorRef = useRef();
+    var _useState = _sliced_to_array(useState(null), 2), processResult = _useState[0], setProcessResult = _useState[1];
+    var _useState1 = _sliced_to_array(useState({
+        status: 'idle',
+        mdContent: '',
+        rawContent: ''
+    }), 2), contentState = _useState1[0], setContentState = _useState1[1];
+    var _useState2 = _sliced_to_array(useState('preview'), 2), htmlViewMode = _useState2[0], setHtmlViewMode = _useState2[1];
+    var handleDownload = function() {
+        onDownload === null || onDownload === void 0 ? void 0 : onDownload(file);
     };
-    if (dataSource.content) {
-      setReadyContent(dataSource.content);
-      return;
-    }
-    if (dataSource.previewUrl) {
-      setContentState({ status: "loading", mdContent: "", rawContent: "" });
-      fetch(dataSource.previewUrl).then((response) => {
-        if (!response.ok) {
-          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
-        }
-        return response.text();
-      }).then(setReadyContent).catch((err) => {
-        const errorMessage = err instanceof Error ? err.message : "加载文本内容失败";
-        setContentState({ status: "error", error: errorMessage });
-        console.error("加载文本内容失败:", err);
-      });
-    }
-  }, [processResult, file.name, customContent]);
-  useEffect(() => {
-    var _a2;
-    if (customContent)
-      return;
-    if (((_a2 = editorRef.current) == null ? void 0 : _a2.store) && contentState.status === "ready" && contentState.mdContent) {
-      editorRef.current.store.setMDContent(contentState.mdContent);
-    }
-  }, [contentState, customContent]);
-  useEffect(() => {
-    return () => {
-      if (processResult) {
-        fileTypeProcessor.cleanupResult(processResult);
-      }
+    var handleShare = function(e) {
+        onShare === null || onShare === void 0 ? void 0 : onShare(file, {
+            anchorEl: e.currentTarget,
+            origin: 'preview'
+        });
     };
-  }, [processResult]);
-  useEffect(() => {
-    setHtmlViewMode("preview");
-  }, [file.name]);
-  const isCurrentFileHtml = isHtmlFile(
-    file.name,
-    processResult == null ? void 0 : processResult.dataSource.mimeType
-  );
-  const renderPreviewContent = () => {
-    var _a2;
-    if (file.loading) {
-      return /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-content-loading`, hashId) }, /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          className: classNames(`${prefixCls}-content-loading-tip`, hashId)
-        },
-        /* @__PURE__ */ React.createElement(LoadingOutlined, null),
-        "正在生成"
-      ), /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: classNames(`${prefixCls}-content-loading-inner`, hashId)
-        },
-        ((_a2 = file == null ? void 0 : file.content) == null ? void 0 : _a2.padEnd(1e4, file == null ? void 0 : file.content)) || "...".padEnd(1e4, "...")
-      ));
-    }
-    if (customContent) {
-      return /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-custom-content`, hashId) }, customContent);
-    }
-    if (!processResult) {
-      return /* @__PURE__ */ React.createElement(PlaceholderContent, { prefixCls, hashId }, /* @__PURE__ */ React.createElement(Spin, { size: "large", tip: "正在处理文件..." }));
-    }
-    if (contentState.status === "error") {
-      return /* @__PURE__ */ React.createElement(PlaceholderContent, { prefixCls, hashId }, /* @__PURE__ */ React.createElement(
-        Alert,
-        {
-          message: "文件处理失败",
-          description: contentState.error,
-          type: "error",
-          showIcon: true
+    var handleLocate = function() {
+        onLocate === null || onLocate === void 0 ? void 0 : onLocate(file);
+    };
+    useEffect(function() {
+        if (customContent) return;
+        try {
+            var result = fileTypeProcessor.processFile(file);
+            setProcessResult(result);
+        } catch (err) {
+            setContentState({
+                status: 'error',
+                error: err instanceof Error ? err.message : '文件处理失败'
+            });
         }
-      ));
-    }
-    const { typeInference, dataSource, canPreview, previewMode } = processResult;
-    if (!canPreview || previewMode === "none") {
-      return /* @__PURE__ */ React.createElement(PlaceholderContent, { prefixCls, hashId }, /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-unsupported`, hashId) }, /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: classNames(
-            `${filePrefixCls}-item`,
-            `${prefixCls}-unsupported-item`,
-            hashId
-          )
-        },
-        /* @__PURE__ */ React.createElement("div", { className: classNames(`${filePrefixCls}-item-icon`, hashId) }, getFileTypeIcon(
-          fileTypeProcessor.inferFileType(file).fileType,
-          file.icon,
-          file.name
-        )),
-        /* @__PURE__ */ React.createElement(
-          "div",
-          {
-            className: classNames(`${filePrefixCls}-item-info`, hashId),
-            style: { textAlign: "left" }
-          },
-          /* @__PURE__ */ React.createElement(
-            "div",
-            {
-              className: classNames(`${filePrefixCls}-item-name`, hashId)
-            },
-            /* @__PURE__ */ React.createElement(
-              Typography.Text,
-              {
-                ellipsis: { tooltip: file.name },
+    }, [
+        file,
+        customContent
+    ]);
+    useEffect(function() {
+        if (customContent || !processResult) return;
+        var typeInference = processResult.typeInference, dataSource = processResult.dataSource;
+        var isTextOrCode = typeInference.category === 'text' || typeInference.category === 'code';
+        if (!isTextOrCode) return;
+        var setReadyContent = function(raw) {
+            setContentState({
+                status: 'ready',
+                mdContent: buildMarkdownContent(raw, typeInference.category, file.name),
+                rawContent: raw
+            });
+        };
+        if (dataSource.content) {
+            setReadyContent(dataSource.content);
+            return;
+        }
+        if (dataSource.previewUrl) {
+            setContentState({
+                status: 'loading',
+                mdContent: '',
+                rawContent: ''
+            });
+            fetch(dataSource.previewUrl).then(function(response) {
+                if (!response.ok) {
+                    throw new Error("HTTP ".concat(response.status, ": ").concat(response.statusText));
+                }
+                return response.text();
+            }).then(setReadyContent).catch(function(err) {
+                var errorMessage = err instanceof Error ? err.message : '加载文本内容失败';
+                setContentState({
+                    status: 'error',
+                    error: errorMessage
+                });
+                console.error('加载文本内容失败:', err);
+            });
+        }
+    }, [
+        processResult,
+        file.name,
+        customContent
+    ]);
+    useEffect(function() {
+        var _editorRef_current;
+        if (customContent) return;
+        if (((_editorRef_current = editorRef.current) === null || _editorRef_current === void 0 ? void 0 : _editorRef_current.store) && contentState.status === 'ready' && contentState.mdContent) {
+            editorRef.current.store.setMDContent(contentState.mdContent);
+        }
+    }, [
+        contentState,
+        customContent
+    ]);
+    useEffect(function() {
+        return function() {
+            if (processResult) {
+                fileTypeProcessor.cleanupResult(processResult);
+            }
+        };
+    }, [
+        processResult
+    ]);
+    useEffect(function() {
+        setHtmlViewMode('preview');
+    }, [
+        file.name
+    ]);
+    var isCurrentFileHtml = isHtmlFile(file.name, processResult === null || processResult === void 0 ? void 0 : processResult.dataSource.mimeType);
+    var renderPreviewContent = function() {
+        if (file.loading) {
+            var _file_content;
+            return /*#__PURE__*/ React.createElement("div", {
+                className: classNames("".concat(prefixCls, "-content-loading"), hashId)
+            }, /*#__PURE__*/ React.createElement("span", {
+                className: classNames("".concat(prefixCls, "-content-loading-tip"), hashId)
+            }, /*#__PURE__*/ React.createElement(LoadingOutlined, null), "正在生成"), /*#__PURE__*/ React.createElement("div", {
+                className: classNames("".concat(prefixCls, "-content-loading-inner"), hashId)
+            }, (file === null || file === void 0 ? void 0 : (_file_content = file.content) === null || _file_content === void 0 ? void 0 : _file_content.padEnd(10000, file === null || file === void 0 ? void 0 : file.content)) || '...'.padEnd(10000, '...')));
+        }
+        if (customContent) {
+            return /*#__PURE__*/ React.createElement("div", {
+                className: classNames("".concat(prefixCls, "-custom-content"), hashId)
+            }, customContent);
+        }
+        if (!processResult) {
+            return /*#__PURE__*/ React.createElement(PlaceholderContent, {
+                prefixCls: prefixCls,
+                hashId: hashId
+            }, /*#__PURE__*/ React.createElement(Spin, {
+                size: "large",
+                tip: "正在处理文件..."
+            }));
+        }
+        if (contentState.status === 'error') {
+            return /*#__PURE__*/ React.createElement(PlaceholderContent, {
+                prefixCls: prefixCls,
+                hashId: hashId
+            }, /*#__PURE__*/ React.createElement(Alert, {
+                message: "文件处理失败",
+                description: contentState.error,
+                type: "error",
+                showIcon: true
+            }));
+        }
+        var typeInference = processResult.typeInference, dataSource = processResult.dataSource, canPreview = processResult.canPreview, previewMode = processResult.previewMode;
+        if (!canPreview || previewMode === 'none') {
+            return /*#__PURE__*/ React.createElement(PlaceholderContent, {
+                prefixCls: prefixCls,
+                hashId: hashId
+            }, /*#__PURE__*/ React.createElement("div", {
+                className: classNames("".concat(prefixCls, "-unsupported"), hashId)
+            }, /*#__PURE__*/ React.createElement("div", {
+                className: classNames("".concat(filePrefixCls, "-item"), "".concat(prefixCls, "-unsupported-item"), hashId)
+            }, /*#__PURE__*/ React.createElement("div", {
+                className: classNames("".concat(filePrefixCls, "-item-icon"), hashId)
+            }, getFileTypeIcon(fileTypeProcessor.inferFileType(file).fileType, file.icon, file.name)), /*#__PURE__*/ React.createElement("div", {
+                className: classNames("".concat(filePrefixCls, "-item-info"), hashId),
                 style: {
-                  font: "var(--font-text-h6-base)",
-                  color: "var(--color-gray-text-default)"
+                    textAlign: 'left'
                 }
-              },
-              file.name
-            )
-          ),
-          /* @__PURE__ */ React.createElement(
-            "div",
-            {
-              className: classNames(
-                `${filePrefixCls}-item-details`,
-                hashId
-              )
-            },
-            /* @__PURE__ */ React.createElement(Typography.Text, { type: "secondary", ellipsis: true }, /* @__PURE__ */ React.createElement(
-              "span",
-              {
-                className: classNames(
-                  `${filePrefixCls}-item-type`,
-                  hashId
-                )
-              },
-              fileTypeProcessor.inferFileType(file).displayType || fileTypeProcessor.inferFileType(file).fileType
-            ), file.size && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-              "span",
-              {
-                className: classNames(
-                  `${filePrefixCls}-item-separator`,
-                  hashId
-                )
-              },
-              "|"
-            ), /* @__PURE__ */ React.createElement(
-              "span",
-              {
-                className: classNames(
-                  `${filePrefixCls}-item-size`,
-                  hashId
-                )
-              },
-              formatFileSize(file.size)
-            )), file.lastModified && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-              "span",
-              {
-                className: classNames(
-                  `${filePrefixCls}-item-separator`,
-                  hashId
-                )
-              },
-              "|"
-            ), /* @__PURE__ */ React.createElement(
-              "span",
-              {
-                className: classNames(
-                  `${filePrefixCls}-item-time`,
-                  hashId
-                )
-              },
-              formatLastModified(file.lastModified)
-            )))
-          )
-        )
-      ), /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: classNames(`${prefixCls}-unsupported-text`, hashId)
-        },
-        "此文件无法预览，请下载查看。"
-      ), onDownload && /* @__PURE__ */ React.createElement(
-        Button,
-        {
-          color: "default",
-          variant: "solid",
-          icon: /* @__PURE__ */ React.createElement(DownloadIcon, null),
-          onClick: handleDownload,
-          "aria-label": (locale == null ? void 0 : locale["workspace.file.download"]) || "下载"
-        },
-        "下载"
-      )));
-    }
-    const renderTextOrCode = () => {
-      if (isCurrentFileHtml) {
-        const htmlStatus = getContentStatus(contentState);
-        return /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-text`, hashId) }, /* @__PURE__ */ React.createElement(
-          HtmlPreview,
-          {
-            html: contentState.rawContent || "",
-            status: htmlStatus,
-            viewMode: htmlViewMode,
-            onViewModeChange: setHtmlViewMode,
-            iframeProps: { sandbox: "allow-scripts" },
-            showSegmented: false
-          }
-        ));
-      }
-      if (contentState.status === "loading") {
-        return /* @__PURE__ */ React.createElement(PlaceholderContent, { prefixCls, hashId }, /* @__PURE__ */ React.createElement(Spin, { size: "large", tip: "正在加载文件内容..." }));
-      }
-      return /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-text`, hashId) }, /* @__PURE__ */ React.createElement(
-        MarkdownEditor,
-        __spreadValues({
-          editorRef,
-          initValue: "",
-          readonly: true,
-          contentStyle: { padding: EDITOR_PADDING }
-        }, markdownEditorProps)
-      ));
-    };
-    const getPreviewErrorMessage = (category) => {
-      const messages = {
-        image: (locale == null ? void 0 : locale["workspace.file.cannotGetImagePreview"]) || "无法获取图片预览",
-        video: (locale == null ? void 0 : locale["workspace.file.cannotGetVideoPreview"]) || "无法获取视频预览",
-        audio: (locale == null ? void 0 : locale["workspace.file.cannotGetAudioPreview"]) || "无法获取音频预览",
-        pdf: (locale == null ? void 0 : locale["workspace.file.cannotGetPdfPreview"]) || "无法获取PDF预览"
-      };
-      return messages[category] || `无法获取${category}预览`;
-    };
-    const renderMediaPreview = (category) => {
-      if (!dataSource.previewUrl) {
-        return /* @__PURE__ */ React.createElement(
-          PlaceholderContent,
-          {
-            locale,
-            prefixCls,
-            hashId
-          },
-          /* @__PURE__ */ React.createElement("p", null, getPreviewErrorMessage(category))
-        );
-      }
-      const mediaElements = {
-        image: /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-image`, hashId) }, /* @__PURE__ */ React.createElement(Image, { src: dataSource.previewUrl, alt: file.name })),
-        video: /* @__PURE__ */ React.createElement(
-          "video",
-          {
-            className: classNames(`${prefixCls}-video`, hashId),
-            src: dataSource.previewUrl,
-            controls: true,
-            controlsList: "nodownload",
-            preload: "metadata"
-          },
-          /* @__PURE__ */ React.createElement("track", { kind: "captions" }),
-          "您的浏览器不支持视频播放"
-        ),
-        audio: /* @__PURE__ */ React.createElement(
-          "audio",
-          {
-            className: classNames(`${prefixCls}-audio`, hashId),
-            src: dataSource.previewUrl,
-            controls: true,
-            controlsList: "nodownload",
-            preload: "metadata"
-          },
-          "您的浏览器不支持音频播放"
-        ),
-        pdf: /* @__PURE__ */ React.createElement(
-          "embed",
-          {
-            className: classNames(`${prefixCls}-pdf`, hashId),
-            src: dataSource.previewUrl,
-            type: "application/pdf",
-            width: "100%",
-            height: "100%"
-          }
-        )
-      };
-      return mediaElements[category];
+            }, /*#__PURE__*/ React.createElement("div", {
+                className: classNames("".concat(filePrefixCls, "-item-name"), hashId)
+            }, /*#__PURE__*/ React.createElement(Typography.Text, {
+                ellipsis: {
+                    tooltip: file.name
+                },
+                style: {
+                    font: 'var(--font-text-h6-base)',
+                    color: 'var(--color-gray-text-default)'
+                }
+            }, file.name)), /*#__PURE__*/ React.createElement("div", {
+                className: classNames("".concat(filePrefixCls, "-item-details"), hashId)
+            }, /*#__PURE__*/ React.createElement(Typography.Text, {
+                type: "secondary",
+                ellipsis: true
+            }, /*#__PURE__*/ React.createElement("span", {
+                className: classNames("".concat(filePrefixCls, "-item-type"), hashId)
+            }, fileTypeProcessor.inferFileType(file).displayType || fileTypeProcessor.inferFileType(file).fileType), file.size && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", {
+                className: classNames("".concat(filePrefixCls, "-item-separator"), hashId)
+            }, "|"), /*#__PURE__*/ React.createElement("span", {
+                className: classNames("".concat(filePrefixCls, "-item-size"), hashId)
+            }, formatFileSize(file.size))), file.lastModified && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", {
+                className: classNames("".concat(filePrefixCls, "-item-separator"), hashId)
+            }, "|"), /*#__PURE__*/ React.createElement("span", {
+                className: classNames("".concat(filePrefixCls, "-item-time"), hashId)
+            }, formatLastModified(file.lastModified))))))), /*#__PURE__*/ React.createElement("div", {
+                className: classNames("".concat(prefixCls, "-unsupported-text"), hashId)
+            }, "此文件无法预览，请下载查看。"), onDownload && /*#__PURE__*/ React.createElement(Button, {
+                color: "default",
+                variant: "solid",
+                icon: /*#__PURE__*/ React.createElement(DownloadIcon, null),
+                onClick: handleDownload,
+                "aria-label": (locale === null || locale === void 0 ? void 0 : locale['workspace.file.download']) || '下载'
+            }, "下载")));
+        }
+        var renderTextOrCode = function() {
+            if (isCurrentFileHtml) {
+                var htmlStatus = getContentStatus(contentState);
+                return /*#__PURE__*/ React.createElement("div", {
+                    className: classNames("".concat(prefixCls, "-text"), hashId)
+                }, /*#__PURE__*/ React.createElement(HtmlPreview, {
+                    html: contentState.rawContent || '',
+                    status: htmlStatus,
+                    viewMode: htmlViewMode,
+                    onViewModeChange: setHtmlViewMode,
+                    iframeProps: {
+                        sandbox: 'allow-scripts'
+                    },
+                    showSegmented: false
+                }));
+            }
+            if (contentState.status === 'loading') {
+                return /*#__PURE__*/ React.createElement(PlaceholderContent, {
+                    prefixCls: prefixCls,
+                    hashId: hashId
+                }, /*#__PURE__*/ React.createElement(Spin, {
+                    size: "large",
+                    tip: "正在加载文件内容..."
+                }));
+            }
+            return /*#__PURE__*/ React.createElement("div", {
+                className: classNames("".concat(prefixCls, "-text"), hashId)
+            }, /*#__PURE__*/ React.createElement(MarkdownEditor, _object_spread({
+                editorRef: editorRef,
+                initValue: "",
+                readonly: true,
+                contentStyle: {
+                    padding: EDITOR_PADDING
+                }
+            }, markdownEditorProps)));
+        };
+        var getPreviewErrorMessage = function(category) {
+            var messages = {
+                image: (locale === null || locale === void 0 ? void 0 : locale['workspace.file.cannotGetImagePreview']) || '无法获取图片预览',
+                video: (locale === null || locale === void 0 ? void 0 : locale['workspace.file.cannotGetVideoPreview']) || '无法获取视频预览',
+                audio: (locale === null || locale === void 0 ? void 0 : locale['workspace.file.cannotGetAudioPreview']) || '无法获取音频预览',
+                pdf: (locale === null || locale === void 0 ? void 0 : locale['workspace.file.cannotGetPdfPreview']) || '无法获取PDF预览'
+            };
+            return messages[category] || "无法获取".concat(category, "预览");
+        };
+        var renderMediaPreview = function(category) {
+            if (!dataSource.previewUrl) {
+                return /*#__PURE__*/ React.createElement(PlaceholderContent, {
+                    locale: locale,
+                    prefixCls: prefixCls,
+                    hashId: hashId
+                }, /*#__PURE__*/ React.createElement("p", null, getPreviewErrorMessage(category)));
+            }
+            var mediaElements = {
+                image: /*#__PURE__*/ React.createElement("div", {
+                    className: classNames("".concat(prefixCls, "-image"), hashId)
+                }, /*#__PURE__*/ React.createElement(Image, {
+                    src: dataSource.previewUrl,
+                    alt: file.name
+                })),
+                video: /*#__PURE__*/ React.createElement("video", {
+                    className: classNames("".concat(prefixCls, "-video"), hashId),
+                    src: dataSource.previewUrl,
+                    controls: true,
+                    controlsList: "nodownload",
+                    preload: "metadata"
+                }, /*#__PURE__*/ React.createElement("track", {
+                    kind: "captions"
+                }), "您的浏览器不支持视频播放"),
+                audio: /*#__PURE__*/ React.createElement("audio", {
+                    className: classNames("".concat(prefixCls, "-audio"), hashId),
+                    src: dataSource.previewUrl,
+                    controls: true,
+                    controlsList: "nodownload",
+                    preload: "metadata"
+                }, "您的浏览器不支持音频播放"),
+                pdf: /*#__PURE__*/ React.createElement("embed", {
+                    className: classNames("".concat(prefixCls, "-pdf"), hashId),
+                    src: dataSource.previewUrl,
+                    type: "application/pdf",
+                    width: "100%",
+                    height: "100%"
+                })
+            };
+            return mediaElements[category];
+        };
+        switch(typeInference.category){
+            case 'text':
+            case 'code':
+                return renderTextOrCode();
+            case 'image':
+            case 'video':
+            case 'audio':
+            case 'pdf':
+                return renderMediaPreview(typeInference.category);
+            default:
+                return /*#__PURE__*/ React.createElement(PlaceholderContent, {
+                    file: file,
+                    showFileInfo: true,
+                    onDownload: onDownload ? handleDownload : undefined,
+                    locale: locale,
+                    prefixCls: prefixCls,
+                    hashId: hashId
+                }, /*#__PURE__*/ React.createElement("p", null, (locale === null || locale === void 0 ? void 0 : locale['workspace.file.unknownFileType']) || '未知的文件类型'), /*#__PURE__*/ React.createElement("p", null, "文件类型：", typeInference.fileType));
+        }
     };
-    switch (typeInference.category) {
-      case "text":
-      case "code":
-        return renderTextOrCode();
-      case "image":
-      case "video":
-      case "audio":
-      case "pdf":
-        return renderMediaPreview(typeInference.category);
-      default:
-        return /* @__PURE__ */ React.createElement(
-          PlaceholderContent,
-          {
-            file,
-            showFileInfo: true,
-            onDownload: onDownload ? handleDownload : void 0,
-            locale,
-            prefixCls,
-            hashId
-          },
-          /* @__PURE__ */ React.createElement("p", null, (locale == null ? void 0 : locale["workspace.file.unknownFileType"]) || "未知的文件类型"),
-          /* @__PURE__ */ React.createElement("p", null, "文件类型：", typeInference.fileType)
-        );
-    }
-  };
-  return wrapSSR(
-    /* @__PURE__ */ React.createElement("div", { className: classNames(prefixCls, hashId) }, customHeader ? /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-header`, hashId) }, customHeader) : /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-header`, hashId) }, onBack && /* @__PURE__ */ React.createElement(
-      "button",
-      {
+    var _headerFileOverride_lastModified, _headerFileOverride_lastModified1;
+    return wrapSSR(/*#__PURE__*/ React.createElement("div", {
+        className: classNames(prefixCls, hashId)
+    }, customHeader ? /*#__PURE__*/ React.createElement("div", {
+        className: classNames("".concat(prefixCls, "-header"), hashId)
+    }, customHeader) : /*#__PURE__*/ React.createElement("div", {
+        className: classNames("".concat(prefixCls, "-header"), hashId)
+    }, onBack && /*#__PURE__*/ React.createElement("button", {
         type: "button",
-        className: classNames(`${prefixCls}-back-button`, hashId),
+        className: classNames("".concat(prefixCls, "-back-button"), hashId),
         onClick: onBack,
-        "aria-label": (locale == null ? void 0 : locale["workspace.file.backToFileList"]) || "返回文件列表"
-      },
-      /* @__PURE__ */ React.createElement(
-        LeftIcon,
-        {
-          className: classNames(`${prefixCls}-back-icon`, hashId)
-        }
-      )
-    ), /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-file-info`, hashId) }, /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-file-title`, hashId) }, (() => {
-      const headerFile = headerFileOverride ? __spreadValues(__spreadValues({}, file), headerFileOverride) : file;
-      const fileType = fileTypeProcessor.inferFileType(file).fileType;
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          className: classNames(`${prefixCls}-file-icon`, hashId)
-        },
-        getFileTypeIcon(
-          fileType,
-          headerFile.icon,
-          headerFile.name
-        )
-      ), /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          className: classNames(`${prefixCls}-file-name`, hashId)
-        },
-        headerFile.name
-      ));
-    })()), ((_a = headerFileOverride == null ? void 0 : headerFileOverride.lastModified) != null ? _a : file.lastModified) && /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-generate-time`, hashId) }, (locale == null ? void 0 : locale["workspace.file.generationTime"]) || "生成时间：", formatLastModified(
-      (_b = headerFileOverride == null ? void 0 : headerFileOverride.lastModified) != null ? _b : file.lastModified
-    ))), /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-actions`, hashId) }, !customContent && isCurrentFileHtml && /* @__PURE__ */ React.createElement(
-      Segmented,
-      {
+        "aria-label": (locale === null || locale === void 0 ? void 0 : locale['workspace.file.backToFileList']) || '返回文件列表'
+    }, /*#__PURE__*/ React.createElement(LeftIcon, {
+        className: classNames("".concat(prefixCls, "-back-icon"), hashId)
+    })), /*#__PURE__*/ React.createElement("div", {
+        className: classNames("".concat(prefixCls, "-file-info"), hashId)
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: classNames("".concat(prefixCls, "-file-title"), hashId)
+    }, function() {
+        var headerFile = headerFileOverride ? _object_spread({}, file, headerFileOverride) : file;
+        var fileType = fileTypeProcessor.inferFileType(file).fileType;
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", {
+            className: classNames("".concat(prefixCls, "-file-icon"), hashId)
+        }, getFileTypeIcon(fileType, headerFile.icon, headerFile.name)), /*#__PURE__*/ React.createElement("span", {
+            className: classNames("".concat(prefixCls, "-file-name"), hashId)
+        }, headerFile.name));
+    }()), ((_headerFileOverride_lastModified = headerFileOverride === null || headerFileOverride === void 0 ? void 0 : headerFileOverride.lastModified) !== null && _headerFileOverride_lastModified !== void 0 ? _headerFileOverride_lastModified : file.lastModified) && /*#__PURE__*/ React.createElement("div", {
+        className: classNames("".concat(prefixCls, "-generate-time"), hashId)
+    }, (locale === null || locale === void 0 ? void 0 : locale['workspace.file.generationTime']) || '生成时间：', formatLastModified((_headerFileOverride_lastModified1 = headerFileOverride === null || headerFileOverride === void 0 ? void 0 : headerFileOverride.lastModified) !== null && _headerFileOverride_lastModified1 !== void 0 ? _headerFileOverride_lastModified1 : file.lastModified))), /*#__PURE__*/ React.createElement("div", {
+        className: classNames("".concat(prefixCls, "-actions"), hashId)
+    }, !customContent && isCurrentFileHtml && /*#__PURE__*/ React.createElement(Segmented, {
         size: "small",
         options: [
-          {
-            label: (locale == null ? void 0 : locale["htmlPreview.preview"]) || "预览",
-            value: "preview"
-          },
-          {
-            label: (locale == null ? void 0 : locale["htmlPreview.code"]) || "代码",
-            value: "code"
-          }
+            {
+                label: (locale === null || locale === void 0 ? void 0 : locale['htmlPreview.preview']) || '预览',
+                value: 'preview'
+            },
+            {
+                label: (locale === null || locale === void 0 ? void 0 : locale['htmlPreview.code']) || '代码',
+                value: 'code'
+            }
         ],
         value: htmlViewMode,
-        onChange: (val) => setHtmlViewMode(val)
-      }
-    ), customActions && /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: classNames(`${prefixCls}-custom-actions`, hashId)
-      },
-      customActions
-    ), onLocate && file.canLocate === true && /* @__PURE__ */ React.createElement(
-      ActionIconBox,
-      {
-        title: (locale == null ? void 0 : locale["workspace.file.location"]) || "定位",
+        onChange: function(val) {
+            return setHtmlViewMode(val);
+        }
+    }), customActions && /*#__PURE__*/ React.createElement("div", {
+        className: classNames("".concat(prefixCls, "-custom-actions"), hashId)
+    }, customActions), onLocate && file.canLocate === true && /*#__PURE__*/ React.createElement(ActionIconBox, {
+        title: (locale === null || locale === void 0 ? void 0 : locale['workspace.file.location']) || '定位',
         onClick: handleLocate,
-        tooltipProps: { mouseEnterDelay: 0.3 },
-        className: classNames(`${prefixCls}-item-action-btn`, hashId)
-      },
-      /* @__PURE__ */ React.createElement(Locate, null)
-    ), onShare && file.canShare === true && /* @__PURE__ */ React.createElement(
-      ActionIconBox,
-      {
-        title: (locale == null ? void 0 : locale["workspace.file.share"]) || "分享",
+        tooltipProps: {
+            mouseEnterDelay: 0.3
+        },
+        className: classNames("".concat(prefixCls, "-item-action-btn"), hashId)
+    }, /*#__PURE__*/ React.createElement(Locate, null)), onShare && file.canShare === true && /*#__PURE__*/ React.createElement(ActionIconBox, {
+        title: (locale === null || locale === void 0 ? void 0 : locale['workspace.file.share']) || '分享',
         onClick: handleShare,
-        tooltipProps: { mouseEnterDelay: 0.3 },
-        className: classNames(`${prefixCls}-item-action-btn`, hashId)
-      },
-      /* @__PURE__ */ React.createElement(ShareIcon, null)
-    ), onDownload && /* @__PURE__ */ React.createElement(
-      ActionIconBox,
-      {
-        title: (locale == null ? void 0 : locale["workspace.file.download"]) || "下载",
+        tooltipProps: {
+            mouseEnterDelay: 0.3
+        },
+        className: classNames("".concat(prefixCls, "-item-action-btn"), hashId)
+    }, /*#__PURE__*/ React.createElement(ShareIcon, null)), onDownload && /*#__PURE__*/ React.createElement(ActionIconBox, {
+        title: (locale === null || locale === void 0 ? void 0 : locale['workspace.file.download']) || '下载',
         onClick: handleDownload,
-        tooltipProps: { mouseEnterDelay: 0.3 },
-        className: classNames(`${prefixCls}-item-action-btn`, hashId)
-      },
-      /* @__PURE__ */ React.createElement(DownloadIcon, null)
-    ))), /* @__PURE__ */ React.createElement("div", { className: classNames(`${prefixCls}-content`, hashId) }, renderPreviewContent()))
-  );
-};
-export {
-  PreviewComponent
+        tooltipProps: {
+            mouseEnterDelay: 0.3
+        },
+        className: classNames("".concat(prefixCls, "-item-action-btn"), hashId)
+    }, /*#__PURE__*/ React.createElement(DownloadIcon, null)))), /*#__PURE__*/ React.createElement("div", {
+        className: classNames("".concat(prefixCls, "-content"), hashId)
+    }, renderPreviewContent())));
 };