@aura-react-comp/x 0.0.0-stage → 0.1.0

package/esm/file-card/index.js

@@ -0,0 +1,126 @@
+import React from 'react';
+import { classNames, prefixCls } from '@aura-react-comp/shared';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SIZE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB'];
+
+/** 字节数 → 人类可读字符串（B 取整，其余保留一位小数） */
+export function formatFileSize(bytes) {
+  if (!Number.isFinite(bytes) || bytes <= 0) return '0 B';
+  const exp = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), SIZE_UNITS.length - 1);
+  const value = bytes / 1024 ** exp;
+  return `${exp === 0 ? Math.round(value) : value.toFixed(1)} ${SIZE_UNITS[exp]}`;
+}
+
+/** 取小写扩展名；无扩展名返回空串 */
+export function getFileExt(name) {
+  const dot = name.lastIndexOf('.');
+  if (dot <= 0 || dot === name.length - 1) return '';
+  return name.slice(dot + 1).toLowerCase();
+}
+const clampPercent = value => Math.min(100, Math.max(0, Math.round(value)));
+
+/** 内置文件图标（继承 currentColor） */
+const FileGlyph = () => /*#__PURE__*/_jsxs("svg", {
+  viewBox: "0 0 20 20",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "1.4",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": "true",
+  focusable: "false",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M11.5 2.5H5.5A1.5 1.5 0 0 0 4 4v12a1.5 1.5 0 0 0 1.5 1.5h9A1.5 1.5 0 0 0 16 16V7l-4.5-4.5Z"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M11.5 2.5V7H16"
+  })]
+});
+
+/**
+ * FileCard — 文件卡片。
+ *
+ * 附件列表、引用文件、上传结果的基本展示单元：图标、文件名、大小、
+ * 扩展名徽标与状态（上传进度 / 完成 / 失败）。通常配合
+ * [`Attachments`](/x-components/attachments) 组成输入框上方的附件条。
+ */
+export const FileCard = ({
+  name,
+  size,
+  status = 'init',
+  percent,
+  description,
+  errorTip,
+  icon,
+  onRemove,
+  className,
+  style
+}) => {
+  const ext = getFileExt(name);
+  const clamped = clampPercent(percent ?? 0);
+  const showProgress = status === 'uploading' && percent !== undefined;
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames(prefixCls('x-file-card'), status !== 'init' && prefixCls(`x-file-card--${status}`), className),
+    style: style,
+    children: [/*#__PURE__*/_jsx("span", {
+      className: prefixCls('x-file-card-icon'),
+      "aria-hidden": "true",
+      children: icon ?? /*#__PURE__*/_jsx(FileGlyph, {})
+    }), /*#__PURE__*/_jsxs("div", {
+      className: prefixCls('x-file-card-body'),
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: prefixCls('x-file-card-main'),
+        children: [/*#__PURE__*/_jsx("span", {
+          className: prefixCls('x-file-card-name'),
+          title: name,
+          children: name
+        }), status === 'done' ? /*#__PURE__*/_jsx("span", {
+          className: prefixCls('x-file-card-check'),
+          "aria-hidden": "true",
+          children: "\u2713"
+        }) : null, onRemove ? /*#__PURE__*/_jsx("button", {
+          type: "button",
+          className: prefixCls('x-file-card-remove'),
+          "aria-label": `移除 ${name}`,
+          onClick: () => onRemove(name),
+          children: /*#__PURE__*/_jsx("span", {
+            "aria-hidden": "true",
+            children: "\xD7"
+          })
+        }) : null]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: prefixCls('x-file-card-meta'),
+        children: [size !== undefined ? /*#__PURE__*/_jsx("span", {
+          className: prefixCls('x-file-card-size'),
+          children: formatFileSize(size)
+        }) : null, ext ? /*#__PURE__*/_jsx("span", {
+          className: prefixCls('x-file-card-ext'),
+          children: ext
+        }) : null, showProgress ? /*#__PURE__*/_jsxs("span", {
+          className: prefixCls('x-file-card-percent'),
+          children: [clamped, "%"]
+        }) : null]
+      }), showProgress ? /*#__PURE__*/_jsx("div", {
+        className: prefixCls('x-file-card-progress'),
+        role: "progressbar",
+        "aria-label": `${name} 上传进度`,
+        "aria-valuenow": clamped,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        children: /*#__PURE__*/_jsx("div", {
+          className: prefixCls('x-file-card-progress-bar'),
+          style: {
+            width: `${clamped}%`
+          }
+        })
+      }) : null, status === 'error' && errorTip ? /*#__PURE__*/_jsx("div", {
+        className: prefixCls('x-file-card-error-tip'),
+        children: errorTip
+      }) : description ? /*#__PURE__*/_jsx("div", {
+        className: prefixCls('x-file-card-desc'),
+        children: description
+      }) : null]
+    })]
+  });
+};
+FileCard.displayName = 'FileCard';

package/esm/file-card/index.less

@@ -0,0 +1,161 @@
+/* FileCard — 文件卡片（附件 / 引用文件的展示单元） */
+
+.aura-x-file-card {
+  display: flex;
+  gap: var(--aura-spacing-2);
+  align-items: flex-start;
+  width: 264px;
+  padding: var(--aura-spacing-2) var(--aura-spacing-3);
+  border: 1px solid var(--aura-border);
+  border-radius: var(--aura-radius-md);
+  background: var(--aura-x-bubble-ai-bg);
+  transition:
+    border-color var(--aura-duration-fast) var(--aura-easing),
+    box-shadow var(--aura-duration-fast) var(--aura-easing);
+}
+
+.aura-x-file-card:hover {
+  border-color: var(--aura-x-bubble-border);
+  box-shadow: var(--aura-shadow-sm);
+}
+
+.aura-x-file-card-icon {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--aura-radius-sm);
+  background: var(--aura-x-accent-soft);
+  color: var(--aura-x-accent);
+}
+
+.aura-x-file-card-icon > svg {
+  width: 18px;
+  height: 18px;
+}
+
+.aura-x-file-card-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.aura-x-file-card-main {
+  display: flex;
+  gap: var(--aura-spacing-1);
+  align-items: center;
+}
+
+.aura-x-file-card-name {
+  overflow: hidden;
+  color: var(--aura-text);
+  font-size: var(--aura-font-size-sm);
+  line-height: 1.5;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.aura-x-file-card-check {
+  flex: none;
+  color: var(--aura-success);
+  font-size: var(--aura-font-size-xs);
+  line-height: 1.5;
+}
+
+.aura-x-file-card-remove {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-inline-start: auto;
+  padding: 0;
+  border: none;
+  border-radius: var(--aura-radius-sm);
+  background: transparent;
+  color: var(--aura-text-tertiary);
+  font-size: var(--aura-font-size-md);
+  line-height: 1;
+  cursor: pointer;
+  transition:
+    background var(--aura-duration-fast) var(--aura-easing),
+    color var(--aura-duration-fast) var(--aura-easing);
+}
+
+.aura-x-file-card-remove:hover {
+  background: var(--aura-x-accent-soft);
+  color: var(--aura-x-accent);
+}
+
+.aura-x-file-card-remove:focus-visible {
+  outline: none;
+  box-shadow: var(--aura-x-focus-ring);
+}
+
+.aura-x-file-card-meta {
+  display: flex;
+  gap: var(--aura-spacing-2);
+  align-items: center;
+  margin-top: 2px;
+  color: var(--aura-text-tertiary);
+  font-size: var(--aura-font-size-xs);
+  line-height: 1.5;
+}
+
+.aura-x-file-card-ext {
+  padding: 0 4px;
+  border-radius: var(--aura-radius-full);
+  background: var(--aura-bg-tertiary);
+  text-transform: uppercase;
+}
+
+.aura-x-file-card-progress {
+  height: 4px;
+  margin-top: var(--aura-spacing-1);
+  border-radius: var(--aura-radius-full);
+  background: var(--aura-bg-tertiary);
+  overflow: hidden;
+}
+
+.aura-x-file-card-progress-bar {
+  height: 100%;
+  border-radius: inherit;
+  background: var(--aura-x-accent-gradient);
+  transition: width var(--aura-duration-normal) var(--aura-easing);
+}
+
+.aura-x-file-card-desc {
+  margin-top: var(--aura-spacing-1);
+  color: var(--aura-text-secondary);
+  font-size: var(--aura-font-size-xs);
+  line-height: 1.5;
+}
+
+/* 失败态 */
+.aura-x-file-card--error {
+  border-color: var(--aura-error);
+}
+
+.aura-x-file-card--error .aura-x-file-card-icon {
+  background: var(--aura-error-light);
+  color: var(--aura-error);
+}
+
+.aura-x-file-card--error .aura-x-file-card-size {
+  color: var(--aura-error);
+}
+
+.aura-x-file-card-error-tip {
+  margin-top: var(--aura-spacing-1);
+  color: var(--aura-error);
+  font-size: var(--aura-font-size-xs);
+  line-height: 1.5;
+}
+
+/* 成功态 */
+.aura-x-file-card--done .aura-x-file-card-icon {
+  background: var(--aura-success-light);
+  color: var(--aura-success);
+}

package/esm/folder/index.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import type { MenuProps } from 'antd';
+import type { FileContentService, FolderDirectoryIcons, FolderPreviewFile, FolderPreviewRenderInfo, FolderRef, FolderSelectedFile, FolderTreeData } from './types';
+export type { FileContentService, FolderContextMenuItem, FolderDirectoryIcons, FolderPreviewFile, FolderPreviewRenderInfo, FolderRef, FolderSelectedFile, FolderTreeData, } from './types';
+type FolderMenuSpec = MenuProps['items'] | ((node: FolderTreeData, key: string) => MenuProps['items']);
+export interface FolderProps {
+    /** 文件树数据 */
+    treeData?: FolderTreeData[];
+    /** 是否开启选择 @default true */
+    selectable?: boolean;
+    /** 选中的文件路径（受控） */
+    selectedFile?: string[];
+    /** 默认选中的文件路径 @default [] */
+    defaultSelectedFile?: string[];
+    onSelectedFileChange?: (file: FolderSelectedFile) => void;
+    /** 目录树宽度 @default 278 */
+    directoryTreeWith?: number | string;
+    /**
+     * 空状态展示内容：
+     * - 覆盖「树为空」与「未选中任何文件」两处默认提示
+     * - 传 `false` 则不展示
+     */
+    emptyRender?: false | React.ReactNode | (() => React.ReactNode);
+    /** 自定义预览内容；函数形式可拿到文件信息与默认预览节点 */
+    previewRender?: React.ReactNode | ((file: FolderPreviewFile, info: FolderPreviewRenderInfo) => React.ReactNode);
+    /** 展开的节点 key 数组（受控）；key = path 数组以 `/` 连接 */
+    expandedPaths?: string[];
+    /** 默认展开的节点 key 数组 */
+    defaultExpandedPaths?: string[];
+    /** 是否默认展开全部文件夹 @default true */
+    defaultExpandAll?: boolean;
+    onExpandedPathsChange?: (paths: string[]) => void;
+    /** 文件内容服务：文件没有内联 `content` 时按需拉取 */
+    fileContentService?: FileContentService;
+    onFileClick?: (filePath: string, content?: string) => void;
+    onFolderClick?: (folderPath: string) => void;
+    /** 目录树标题；传 `false` 不展示 */
+    directoryTitle?: false | React.ReactNode | (() => React.ReactNode);
+    /** 预览区标题；缺省用文件名，函数形式可自定义 */
+    previewTitle?: string | ((info: {
+        title: string;
+        path: string[];
+        content: string;
+    }) => React.ReactNode);
+    /**
+     * 图标配置：`false` 不展示图标；`directory` 键对应文件夹，
+     * 其余键按**扩展名**匹配文件（如 `tsx`），未命中回退内置图标
+     */
+    directoryIcons?: FolderDirectoryIcons;
+    /** 右键菜单：全局配置或按节点返回；节点自身的 `contextMenu` 优先级更高 */
+    contextMenu?: FolderMenuSpec;
+    onRightClick?: (info: {
+        event: React.MouseEvent;
+        node: FolderTreeData;
+    }) => void;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Folder — 文件树。
+ *
+ * 左侧目录树 + 右侧文件预览：目录树支持展开 / 收起、选中、右键菜单与图标定制；
+ * 预览区可选择内联 `content`，或通过 `fileContentService` 按需拉取。
+ * 树的增删改用 `ref` 上的不可变换算方法完成（返回新 treeData，由调用方接管）。
+ */
+export declare const Folder: React.ForwardRefExoticComponent<FolderProps & React.RefAttributes<FolderRef>>;

package/esm/folder/index.js

@@ -0,0 +1,345 @@
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import { Dropdown } from 'antd';
+import { classNames, prefixCls } from '@aura-react-comp/shared';
+import { CodeHighlighter } from "../code-highlighter";
+import { addNodeAt, collectFolderKeys, extOf, findNode, isFolder, isSamePath, keyOfPath, languageOf, removeNodeAt, updateNodeAt } from "./tree-utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+/** 默认预览区在「未选中 / 选中文件夹」时的提示 */
+const DEFAULT_PLACEHOLDER = '请选择一个文件';
+/** 文件夹图标（继承 currentColor） */
+const FolderGlyph = () => /*#__PURE__*/_jsx("svg", {
+  viewBox: "0 0 16 16",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "1.3",
+  "aria-hidden": "true",
+  focusable: "false",
+  children: /*#__PURE__*/_jsx("path", {
+    d: "M1.5 12.5v-9A1 1 0 0 1 2.5 2.5h3.2l1.3 1.6h6.5a1 1 0 0 1 1 1v7.4a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1Z"
+  })
+});
+
+/** 文件图标（继承 currentColor） */
+const FileGlyph = () => /*#__PURE__*/_jsxs("svg", {
+  viewBox: "0 0 16 16",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "1.3",
+  strokeLinejoin: "round",
+  "aria-hidden": "true",
+  focusable: "false",
+  children: [/*#__PURE__*/_jsx("path", {
+    d: "M9 1.8H4.4a1 1 0 0 0-1 1v10.4a1 1 0 0 0 1 1h7.2a1 1 0 0 0 1-1V5.2L9 1.8Z"
+  }), /*#__PURE__*/_jsx("path", {
+    d: "M9 1.8v3.4h3.6"
+  })]
+});
+function renderSlot(slot) {
+  if (slot === false || slot === undefined) return null;
+  return typeof slot === 'function' ? slot() : slot;
+}
+
+/**
+ * Folder — 文件树。
+ *
+ * 左侧目录树 + 右侧文件预览：目录树支持展开 / 收起、选中、右键菜单与图标定制；
+ * 预览区可选择内联 `content`，或通过 `fileContentService` 按需拉取。
+ * 树的增删改用 `ref` 上的不可变换算方法完成（返回新 treeData，由调用方接管）。
+ */
+export const Folder = /*#__PURE__*/forwardRef(({
+  treeData = [],
+  selectable = true,
+  selectedFile,
+  defaultSelectedFile = [],
+  onSelectedFileChange,
+  directoryTreeWith = 278,
+  emptyRender,
+  previewRender,
+  expandedPaths,
+  defaultExpandedPaths,
+  defaultExpandAll = true,
+  onExpandedPathsChange,
+  fileContentService,
+  onFileClick,
+  onFolderClick,
+  directoryTitle,
+  previewTitle,
+  directoryIcons,
+  contextMenu,
+  onRightClick,
+  className,
+  style
+}, ref) => {
+  const [innerSelected, setInnerSelected] = useState(defaultSelectedFile);
+  const [innerExpanded, setInnerExpanded] = useState(() => {
+    if (defaultExpandedPaths) return new Set(defaultExpandedPaths);
+    return defaultExpandAll ? new Set(collectFolderKeys(treeData)) : new Set();
+  });
+  const [content, setContent] = useState({
+    status: 'idle'
+  });
+  const isSelectedControlled = selectedFile !== undefined;
+  const activePath = isSelectedControlled ? selectedFile : innerSelected;
+  const isExpandedControlled = expandedPaths !== undefined;
+  const expanded = useMemo(() => isExpandedControlled ? new Set(expandedPaths) : innerExpanded, [isExpandedControlled, expandedPaths, innerExpanded]);
+  const selectedNode = useMemo(() => findNode(treeData, activePath), [treeData, activePath]);
+  const selectedKey = keyOfPath(activePath);
+  const selectedName = selectedNode?.title ?? '';
+
+  // ===== 预览内容解析：内联 content 优先，其次交给 fileContentService =====
+  useEffect(() => {
+    if (!selectedNode || isFolder(selectedNode)) {
+      setContent({
+        status: 'idle'
+      });
+      return undefined;
+    }
+    if (selectedNode.content !== undefined) {
+      setContent({
+        status: 'ready',
+        text: selectedNode.content
+      });
+      return undefined;
+    }
+    if (!fileContentService) {
+      setContent({
+        status: 'ready',
+        text: ''
+      });
+      return undefined;
+    }
+    let cancelled = false;
+    setContent({
+      status: 'loading'
+    });
+    fileContentService.loadFileContent(selectedKey).then(text => {
+      if (!cancelled) setContent({
+        status: 'ready',
+        text
+      });
+    }).catch(error => {
+      if (cancelled) return;
+      setContent({
+        status: 'error',
+        error: error instanceof Error ? error.message : String(error)
+      });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedNode, selectedKey, fileContentService]);
+  const toggleExpand = useCallback(key => {
+    const next = new Set(expanded);
+    if (next.has(key)) next.delete(key);else next.add(key);
+    if (!isExpandedControlled) setInnerExpanded(next);
+    onExpandedPathsChange?.([...next]);
+  }, [expanded, isExpandedControlled, onExpandedPathsChange]);
+  const select = useCallback((node, path) => {
+    if (!selectable) return;
+    const folder = isFolder(node);
+    if (!isSelectedControlled) setInnerSelected(path);
+    if (folder) onFolderClick?.(keyOfPath(path));else onFileClick?.(keyOfPath(path), node.content);
+    onSelectedFileChange?.({
+      path,
+      name: node.title,
+      ...(folder ? {} : {
+        content: node.content
+      })
+    });
+  }, [selectable, isSelectedControlled, onFolderClick, onFileClick, onSelectedFileChange]);
+  const activate = useCallback((node, path) => {
+    if (isFolder(node)) toggleExpand(keyOfPath(path));
+    select(node, path);
+  }, [toggleExpand, select]);
+  useImperativeHandle(ref, () => ({
+    getNode: path => findNode(treeData, path),
+    updateNode: (path, data) => updateNodeAt(treeData, path, data),
+    deleteNode: path => removeNodeAt(treeData, path),
+    addNode: (parentPath, node) => addNodeAt(treeData, parentPath, node)
+  }), [treeData]);
+  const resolveIcon = node => {
+    if (directoryIcons === false) return null;
+    const folder = isFolder(node);
+    if (directoryIcons) {
+      const spec = folder ? directoryIcons.directory : directoryIcons[extOf(node.title)];
+      if (spec !== undefined) {
+        return typeof spec === 'function' ? spec() : spec;
+      }
+    }
+    return folder ? /*#__PURE__*/_jsx(FolderGlyph, {}) : /*#__PURE__*/_jsx(FileGlyph, {});
+  };
+  const resolveMenu = (node, key) => {
+    if (node.contextMenu === false) return undefined;
+    const spec = node.contextMenu ?? contextMenu;
+    if (!spec) return undefined;
+    if (typeof spec === 'function') {
+      // antd 的 ItemType 本身也可能是函数（自定义渲染），TS 无法据此区分出
+      // 我们的自定义签名，这里显式标注后调用，避免把两者求成交集类型。
+      const resolve = spec;
+      return resolve(node, key) ?? undefined;
+    }
+    return spec;
+  };
+  const renderNodes = (nodes, parentPath, level) => nodes.map(node => {
+    const path = [...parentPath, node.path];
+    const key = keyOfPath(path);
+    const folder = isFolder(node);
+    const open = expanded.has(key);
+    const selected = isSamePath(path, activePath);
+    const menu = resolveMenu(node, key);
+    const row = /*#__PURE__*/_jsxs("div", {
+      role: "treeitem",
+      "aria-level": level,
+      "aria-selected": selected,
+      "aria-expanded": folder ? open : undefined,
+      tabIndex: 0,
+      className: classNames(prefixCls('x-folder-node'), selected && prefixCls('x-folder-node--selected'), folder && prefixCls('x-folder-node--folder')),
+      onClick: () => activate(node, path),
+      onContextMenu: event => {
+        onRightClick?.({
+          event,
+          node
+        });
+      },
+      onKeyDown: event => {
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          activate(node, path);
+          return;
+        }
+        if (!folder) return;
+        if (event.key === 'ArrowRight' && !open) {
+          event.preventDefault();
+          toggleExpand(key);
+        }
+        if (event.key === 'ArrowLeft' && open) {
+          event.preventDefault();
+          toggleExpand(key);
+        }
+      },
+      children: [/*#__PURE__*/_jsx("span", {
+        className: prefixCls('x-folder-caret'),
+        "data-open": folder ? open : undefined,
+        "aria-hidden": "true",
+        children: folder ? open ? '▾' : '▸' : ''
+      }), /*#__PURE__*/_jsx("span", {
+        className: prefixCls('x-folder-node-icon'),
+        "aria-hidden": "true",
+        children: resolveIcon(node)
+      }), /*#__PURE__*/_jsx("span", {
+        className: prefixCls('x-folder-node-title'),
+        children: node.title
+      })]
+    });
+    return /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [menu ? /*#__PURE__*/_jsx(Dropdown, {
+        menu: {
+          items: menu
+        },
+        trigger: ['contextMenu'],
+        children: row
+      }) : row, folder && open && (node.children?.length ?? 0) > 0 ? /*#__PURE__*/_jsx("div", {
+        role: "group",
+        children: renderNodes(node.children ?? [], path, level + 1)
+      }) : null]
+    }, key);
+  });
+  const fileInfo = {
+    content: content.text,
+    path: activePath,
+    title: selectedName || undefined,
+    language: languageOf(selectedName)
+  };
+  const emptyNode = (() => {
+    if (emptyRender === false) return null;
+    if (emptyRender !== undefined) return renderSlot(emptyRender);
+    return /*#__PURE__*/_jsx("div", {
+      className: prefixCls('x-folder-empty'),
+      children: DEFAULT_PLACEHOLDER
+    });
+  })();
+  const originPreview = (() => {
+    if (!selectedNode) return emptyNode;
+    if (isFolder(selectedNode)) {
+      if (emptyRender === false) return null;
+      return /*#__PURE__*/_jsx("div", {
+        className: prefixCls('x-folder-empty'),
+        children: emptyRender !== undefined ? renderSlot(emptyRender) : `文件夹 · ${selectedNode.children?.length ?? 0} 项`
+      });
+    }
+    if (content.status === 'loading') {
+      return /*#__PURE__*/_jsx("div", {
+        className: prefixCls('x-folder-loading'),
+        "aria-busy": "true",
+        children: "\u6B63\u5728\u52A0\u8F7D\u6587\u4EF6\u5185\u5BB9\u2026"
+      });
+    }
+    if (content.status === 'error') {
+      return /*#__PURE__*/_jsx("div", {
+        className: prefixCls('x-folder-error'),
+        role: "alert",
+        children: content.error
+      });
+    }
+    return /*#__PURE__*/_jsx(CodeHighlighter, {
+      lang: fileInfo.language,
+      header: false,
+      children: content.text ?? ''
+    });
+  })();
+  const previewBody = previewRender === undefined ? originPreview : typeof previewRender === 'function' ? previewRender(fileInfo, {
+    originNode: originPreview
+  }) : previewRender;
+  const previewTitleNode = (() => {
+    if (previewTitle === undefined) {
+      return selectedName ? /*#__PURE__*/_jsx("span", {
+        className: prefixCls('x-folder-preview-title'),
+        children: selectedName
+      }) : null;
+    }
+    if (typeof previewTitle === 'function') {
+      return previewTitle({
+        title: selectedName,
+        path: activePath,
+        content: content.text ?? ''
+      });
+    }
+    return /*#__PURE__*/_jsx("span", {
+      className: prefixCls('x-folder-preview-title'),
+      children: previewTitle
+    });
+  })();
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames(prefixCls('x-folder'), className),
+    style: style,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: prefixCls('x-folder-directory'),
+      style: {
+        width: directoryTreeWith
+      },
+      children: [directoryTitle !== false ? /*#__PURE__*/_jsx("div", {
+        className: prefixCls('x-folder-directory-title'),
+        children: directoryTitle === undefined ? '文件' : renderSlot(directoryTitle)
+      }) : null, treeData.length === 0 ? emptyRender === false ? null : /*#__PURE__*/_jsx("div", {
+        className: prefixCls('x-folder-empty'),
+        children: emptyRender !== undefined ? renderSlot(emptyRender) : '暂无文件'
+      }) : /*#__PURE__*/_jsx("div", {
+        role: "tree",
+        "aria-label": "\u6587\u4EF6\u6811",
+        className: prefixCls('x-folder-tree'),
+        children: renderNodes(treeData, [], 1)
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: prefixCls('x-folder-preview'),
+      children: [previewTitleNode ? /*#__PURE__*/_jsx("div", {
+        className: prefixCls('x-folder-preview-header'),
+        children: previewTitleNode
+      }) : null, /*#__PURE__*/_jsx("div", {
+        className: prefixCls('x-folder-preview-body'),
+        children: previewBody
+      })]
+    })]
+  });
+});
+Folder.displayName = 'Folder';