@fe-free/core 2.5.0 → 2.5.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @fe-free/core
 
+## 2.5.1
+
+### Patch Changes
+
+- feat: tree
+  - @fe-free/tool@2.5.1
+
 ## 2.5.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fe-free/core",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "",
   "main": "./src/index.ts",
   "author": "",
@@ -41,7 +41,7 @@
     "remark-gfm": "^4.0.1",
     "vanilla-jsoneditor": "^0.23.1",
     "zustand": "^4.5.4",
-    "@fe-free/tool": "2.5.0"
+    "@fe-free/tool": "2.5.1"
   },
   "peerDependencies": {
     "@ant-design/pro-components": "2.8.9",

package/src/crud/types.tsx

@@ -38,7 +38,7 @@ interface CRUDProps<DataSource = any, Key = string> {
 
   // *** Create 新建 ***
 
-  /** 新增接口 */
+  /** 新增接口，false 则不关闭弹窗 */
   requestCreateByValues?: (values: Partial<DataSource>) => Promise<false | void>;
   /** 新建按钮，默认新建 */
   createButton?: ReactNode;

package/src/file/file.stories.tsx

@@ -0,0 +1,53 @@
+import { FileCard } from '@fe-free/tool';
+import type { StoryObj } from '@storybook/react-vite';
+import { PRESET_FILE_ICONS } from './helper';
+
+const meta = {
+  title: '@fe-free/file/FileCard',
+  component: FileCard,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof FileCard>;
+
+export const Default: Story = {
+  render: () => {
+    let size = 0;
+    return (
+      <div>
+        <div className="flex flex-col gap-2">
+          {PRESET_FILE_ICONS.map((item) => (
+            <div key={item.key} className="flex gap-2">
+              <FileCard name={`这是文件名.${item.ext.join('.') || ''}`} size={(size += 1000000)} />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Direction: Story = {
+  render: () => (
+    <div>
+      <FileCard name="这是文件名.pdf" size={10000} direction="vertical" />
+    </div>
+  ),
+};
+
+export const FileIcon: Story = {
+  render: () => (
+    <div>
+      <FileCard.FileIcon name="这是文件名.pdf" className="text-3xl" />
+    </div>
+  ),
+};
+
+export const FileIconExt: Story = {
+  render: () => (
+    <div>
+      <FileCard.FileIcon name="这是文件名.xlsx" showExt className="text-5xl" />
+    </div>
+  ),
+};

package/src/file/helper.tsx

@@ -0,0 +1,128 @@
+import {
+  FileExcelFilled,
+  FileImageFilled,
+  FileMarkdownFilled,
+  FilePdfFilled,
+  FilePptFilled,
+  FileTextFilled,
+  FileWordFilled,
+  FileZipFilled,
+  FolderFilled,
+} from '@ant-design/icons';
+import AudioIcon from './icon/AudioIcon';
+import VideoIcon from './icon/VideoIcon';
+
+type PresetIcons =
+  | 'default'
+  | 'excel'
+  | 'image'
+  | 'markdown'
+  | 'pdf'
+  | 'ppt'
+  | 'word'
+  | 'zip'
+  | 'video'
+  | 'audio'
+  | 'folder';
+
+const IMG_EXTS = ['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp', 'svg'];
+
+const DEFAULT_ICON_COLOR = '#8c8c8c';
+const DEFAULT_ICON = <FileTextFilled />;
+
+const PRESET_FILE_ICONS: {
+  key: PresetIcons;
+  ext: string[];
+  color: string;
+  icon: React.ReactElement;
+}[] = [
+  {
+    key: 'default',
+    icon: DEFAULT_ICON,
+    color: DEFAULT_ICON_COLOR,
+    ext: [],
+  },
+  {
+    key: 'excel',
+    icon: <FileExcelFilled />,
+    color: '#22b35e',
+    ext: ['xlsx', 'xls'],
+  },
+  {
+    key: 'image',
+    icon: <FileImageFilled />,
+    color: 'rgb(22, 119, 255)',
+    ext: IMG_EXTS,
+  },
+  {
+    key: 'markdown',
+    icon: <FileMarkdownFilled />,
+    color: DEFAULT_ICON_COLOR,
+    ext: ['md', 'mdx'],
+  },
+  {
+    key: 'pdf',
+    icon: <FilePdfFilled />,
+    color: '#ff4d4f',
+    ext: ['pdf'],
+  },
+  {
+    key: 'ppt',
+    icon: <FilePptFilled />,
+    color: '#ff6e31',
+    ext: ['ppt', 'pptx'],
+  },
+  {
+    key: 'word',
+    icon: <FileWordFilled />,
+    color: '#1677ff',
+    ext: ['doc', 'docx'],
+  },
+  {
+    key: 'zip',
+    icon: <FileZipFilled />,
+    color: '#fab714',
+    ext: ['zip', 'rar', '7z', 'tar', 'gz'],
+  },
+  {
+    key: 'video',
+    icon: <VideoIcon />,
+    color: '#ff4d4f',
+    ext: ['mp4', 'avi', 'mov', 'wmv', 'flv', 'mkv'],
+  },
+  {
+    key: 'audio',
+    icon: <AudioIcon />,
+    color: '#FFDC00',
+    ext: ['mp3', 'wav', 'flac', 'ape', 'aac', 'ogg'],
+  },
+  {
+    key: 'folder',
+    icon: <FolderFilled />,
+    color: '#FFDC00',
+    ext: [],
+  },
+];
+
+function isImage(name: string) {
+  return IMG_EXTS.includes(name.split('.').pop() || '');
+}
+
+function getFileExt(name?: string) {
+  return name?.split('.').pop() || '';
+}
+
+function getFileSize(size: number) {
+  if (size < 1024) {
+    return size + 'B';
+  }
+  if (size < 1024 * 1024) {
+    return (size / 1024).toFixed(2) + 'KB';
+  }
+  if (size < 1024 * 1024 * 1024) {
+    return (size / 1024 / 1024).toFixed(2) + 'MB';
+  }
+  return (size / 1024 / 1024 / 1024).toFixed(2) + 'GB';
+}
+
+export { DEFAULT_ICON, DEFAULT_ICON_COLOR, getFileExt, getFileSize, isImage, PRESET_FILE_ICONS };

package/src/file/icon/AudioIcon.tsx

@@ -0,0 +1,20 @@
+export default function AudioIcon() {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      //xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <title>audio</title>
+      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <path
+          d="M14.1178571,4.0125 C14.225,4.11964286 14.2857143,4.26428571 14.2857143,4.41607143 L14.2857143,15.4285714 C14.2857143,15.7446429 14.0303571,16 13.7142857,16 L2.28571429,16 C1.96964286,16 1.71428571,15.7446429 1.71428571,15.4285714 L1.71428571,0.571428571 C1.71428571,0.255357143 1.96964286,0 2.28571429,0 L9.86964286,0 C10.0214286,0 10.1678571,0.0607142857 10.275,0.167857143 L14.1178571,4.0125 Z M10.7315824,7.11216117 C10.7428131,7.15148751 10.7485063,7.19218979 10.7485063,7.23309113 L10.7485063,8.07742614 C10.7484199,8.27364959 10.6183424,8.44607275 10.4296853,8.50003683 L8.32984514,9.09986306 L8.32984514,11.7071803 C8.32986605,12.5367078 7.67249692,13.217028 6.84345686,13.2454634 L6.79068592,13.2463395 C6.12766108,13.2463395 5.53916361,12.8217001 5.33010655,12.1924966 C5.1210495,11.563293 5.33842118,10.8709227 5.86959669,10.4741173 C6.40077221,10.0773119 7.12636292,10.0652587 7.67042486,10.4442027 L7.67020842,7.74937024 L7.68449368,7.74937024 C7.72405122,7.59919041 7.83988806,7.48101083 7.98924584,7.4384546 L10.1880418,6.81004755 C10.42156,6.74340323 10.6648954,6.87865515 10.7315824,7.11216117 Z M9.60714286,1.31785714 L12.9678571,4.67857143 L9.60714286,4.67857143 L9.60714286,1.31785714 Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/file/icon/VideoIcon.tsx

@@ -0,0 +1,20 @@
+export default function VideoIcon() {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 16 16"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      // xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <title>video</title>
+      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <path
+          d="M14.1178571,4.0125 C14.225,4.11964286 14.2857143,4.26428571 14.2857143,4.41607143 L14.2857143,15.4285714 C14.2857143,15.7446429 14.0303571,16 13.7142857,16 L2.28571429,16 C1.96964286,16 1.71428571,15.7446429 1.71428571,15.4285714 L1.71428571,0.571428571 C1.71428571,0.255357143 1.96964286,0 2.28571429,0 L9.86964286,0 C10.0214286,0 10.1678571,0.0607142857 10.275,0.167857143 L14.1178571,4.0125 Z M12.9678571,4.67857143 L9.60714286,1.31785714 L9.60714286,4.67857143 L12.9678571,4.67857143 Z M10.5379461,10.3101106 L6.68957555,13.0059749 C6.59910784,13.0693494 6.47439406,13.0473861 6.41101953,12.9569184 C6.3874624,12.9232903 6.37482581,12.8832269 6.37482581,12.8421686 L6.37482581,7.45043999 C6.37482581,7.33998304 6.46436886,7.25043999 6.57482581,7.25043999 C6.61588409,7.25043999 6.65594753,7.26307658 6.68957555,7.28663371 L10.5379461,9.98249803 C10.6284138,10.0458726 10.6503772,10.1705863 10.5870027,10.2610541 C10.5736331,10.2801392 10.5570312,10.2967411 10.5379461,10.3101106 Z"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+  );
+}

package/src/file/index.tsx

@@ -0,0 +1,68 @@
+import classNames from 'classnames';
+import { useMemo } from 'react';
+import {
+  DEFAULT_ICON,
+  DEFAULT_ICON_COLOR,
+  getFileExt,
+  getFileSize,
+  PRESET_FILE_ICONS,
+} from './helper';
+
+function FileIcon({
+  name,
+  isDirectory,
+  className,
+  showExt = false,
+}: {
+  name?: string;
+  isDirectory?: boolean;
+  className?: string;
+  showExt?: boolean;
+}) {
+  const ext = getFileExt(name) || '';
+
+  const iconItem = useMemo(() => {
+    if (isDirectory) {
+      return PRESET_FILE_ICONS.find((item) => item.key === 'folder');
+    }
+    return PRESET_FILE_ICONS.find((item) => item.ext.includes(ext));
+  }, [ext, isDirectory]);
+
+  return (
+    <div className={classNames('flex flex-col items-center', className)}>
+      <div style={{ color: iconItem?.color || DEFAULT_ICON_COLOR }}>
+        {iconItem?.icon || DEFAULT_ICON}
+      </div>
+      {showExt && <div className="text-base">{ext}</div>}
+    </div>
+  );
+}
+
+function FileCard({
+  name,
+  size,
+  direction = 'horizontal',
+}: {
+  name?: string;
+  size?: number;
+  direction?: 'horizontal' | 'vertical';
+}) {
+  return (
+    <div
+      className={classNames('flex items-center gap-1', {
+        'flex-row items-center': direction === 'horizontal',
+        'flex-col': direction === 'vertical',
+      })}
+    >
+      <FileIcon name={name} className="text-4xl" />
+      <div className={classNames('flex flex-col', { 'items-center': direction === 'vertical' })}>
+        {name && <div className="truncate">{name}</div>}
+        {size && <div className="text-sm text-desc">{getFileSize(size)}</div>}
+      </div>
+    </div>
+  );
+}
+
+FileCard.FileIcon = FileIcon;
+
+export { FileCard };

package/src/index.ts

@@ -16,6 +16,7 @@ export { EditorLogs } from './editor_logs';
 export type { EditorLogsProps } from './editor_logs';
 export { EditorMention } from './editor_mention';
 export type { EditorMentionProps } from './editor_mention';
+export { FileCard } from './file';
 export {
   ProFormEditor,
   ProFormImageUpload,
@@ -42,7 +43,7 @@ export { Table } from './table';
 export type { TableProps } from './table';
 export { Tabs } from './tabs';
 export type { TabsProps } from './tabs';
-export { Tree, flatToTreeData } from './tree';
-export type { TreeProps } from './tree';
+export { FileTree, Tree, flatToTreeData } from './tree';
+export type { FileTreeProps, TreeProps } from './tree';
 export { useLocalforageState } from './use_localforage_state';
 export { CustomValueTypeEnum, customValueTypeMap } from './value_type_map';

package/src/tree/file_tree.stories.tsx

@@ -0,0 +1,129 @@
+import { FileTree } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta: Meta<typeof FileTree> = {
+  title: '@fe-free/core/FileTree',
+  component: FileTree,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => {
+      return (
+        <div className="c-border w-[200px] overflow-y-auto">
+          <Story />
+        </div>
+      );
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: '某某公司',
+    enableSearch: true,
+    actions: ['create', 'update', 'delete'],
+    requestCreateByValues: (values) => {
+      console.log(values);
+      return Promise.resolve();
+    },
+    requestUpdateByValues: (values) => {
+      console.log(values);
+      return Promise.resolve();
+    },
+    requestDeleteByRecord: (values) => {
+      console.log(values);
+      return Promise.resolve();
+    },
+    treeProps: {
+      defaultExpandAll: true,
+      treeData: [
+        {
+          title: '我的桌面',
+          key: '1',
+          children: [
+            { title: '资料1', key: '1-0', children: [] },
+            {
+              title: '资料2',
+              key: '1-1',
+              children: [
+                { title: '资料2-1资料2-1资料2-1资料2-1', key: '1-1-0' },
+                { title: '资料2-2', key: '1-1-1' },
+                { title: '资料2-3', key: '1-1-2' },
+              ],
+            },
+
+            { title: '资料3', key: '1-2', children: [] },
+          ],
+        },
+        {
+          title: '我的文档',
+          key: '2',
+          children: [
+            { title: '资料1', key: '2-0', children: [] },
+            {
+              title: '资料2',
+              key: '2-1',
+              children: [
+                { title: '资料2-1', key: '2-1-0' },
+                { title: '资料2-2', key: '2-1-1' },
+                { title: '资料2-3', key: '2-1-2' },
+              ],
+            },
+            { title: '资料3', key: '2-0-2', children: [] },
+          ],
+        },
+        {
+          title: '我的下载',
+          key: '3',
+          children: [
+            { title: '资料1', key: '3-0', children: [] },
+            {
+              title: '资料2',
+              key: '3-1',
+              children: [],
+            },
+            { title: '资料3', key: '3-2', children: [] },
+          ],
+        },
+        {
+          title: '周杰伦.jpg',
+          key: '4',
+          children: [],
+        },
+      ],
+    },
+  },
+};
+
+export const FileList: Story = {
+  args: {
+    title: '某某目录',
+    enableSearch: true,
+    treeProps: {
+      treeData: [
+        {
+          title: '周杰伦.jpg',
+          key: '1',
+        },
+        {
+          title: '周杰伦.mp3',
+          key: '2',
+        },
+        {
+          title: '周杰伦.mp4',
+          key: '3',
+        },
+        {
+          title: '周杰伦.pdf',
+          key: '4',
+        },
+        {
+          title: '周杰伦.doc',
+          key: '5',
+        },
+      ],
+    },
+  },
+};

package/src/tree/file_tree.tsx

@@ -0,0 +1,193 @@
+import { MoreOutlined, PlusOutlined } from '@ant-design/icons';
+import { ModalForm, ProFormText } from '@ant-design/pro-components';
+import { Dropdown } from 'antd';
+import type { DataNode } from 'antd/es/tree';
+import classNames from 'classnames';
+import { useCallback, useMemo } from 'react';
+import { OperateDelete } from '../crud/crud_delete';
+import { FileCard } from '../file';
+import type { TreeProps } from './tree';
+import { Tree } from './tree';
+
+type FileTreeAction = 'create' | 'update' | 'delete';
+
+interface FileTreeProps<D extends DataNode> extends TreeProps<D> {
+  actions?: FileTreeAction[];
+  requestCreateByValues?: (values: { key?: string; title: string }) => Promise<false | void>;
+  requestUpdateByValues?: (values: { key: string; title: string }) => Promise<false | void>;
+  requestDeleteByRecord?: (values: { key: string }) => Promise<void>;
+}
+
+function Detail<D extends DataNode>({
+  action,
+  nodeData,
+  requestCreateByValues,
+  requestUpdateByValues,
+  trigger,
+}: {
+  action: FileTreeAction;
+  nodeData?: D;
+  requestCreateByValues?: FileTreeProps<D>['requestCreateByValues'];
+  requestUpdateByValues?: FileTreeProps<D>['requestUpdateByValues'];
+  trigger: React.ReactElement;
+}) {
+  const title = useMemo(() => {
+    if (action === 'create') {
+      return '新建';
+    }
+
+    return '编辑';
+  }, [action]);
+
+  return (
+    <ModalForm
+      title={title}
+      trigger={trigger}
+      initialValues={nodeData}
+      onFinish={async (values) => {
+        if (action === 'update') {
+          const result = await requestUpdateByValues?.({ ...values });
+
+          if (result !== false) {
+            return true;
+          }
+        } else if (action === 'create') {
+          const result = await requestCreateByValues?.({ ...values });
+
+          if (result !== false) {
+            return true;
+          }
+        }
+      }}
+      autoFocusFirstInput
+      modalProps={{
+        destroyOnHidden: true,
+        width: 400,
+      }}
+    >
+      <ProFormText name="key" hidden />
+      <ProFormText name="title" label="目录名称" required rules={[{ required: true }]} />
+    </ModalForm>
+  );
+}
+
+function More({
+  actions,
+  nodeData,
+  requestUpdateByValues,
+  requestDeleteByRecord,
+  requestCreateByValues,
+}) {
+  return (
+    <Dropdown
+      placement="bottomRight"
+      menu={{
+        items: [
+          actions?.includes('create') && {
+            label: (
+              <Detail
+                action="create"
+                nodeData={{ key: nodeData.key }}
+                requestCreateByValues={(values) => requestCreateByValues?.({ ...values })}
+                trigger={<div>新建子目录</div>}
+              />
+            ),
+            key: 'create',
+          },
+          actions?.includes('update') && {
+            label: (
+              <Detail
+                action="update"
+                nodeData={nodeData}
+                requestUpdateByValues={(values) => requestUpdateByValues?.({ ...values })}
+                trigger={<div>编辑</div>}
+              />
+            ),
+            key: 'update',
+          },
+          actions?.includes('delete') && {
+            label: (
+              <OperateDelete
+                name={nodeData.title}
+                onDelete={() => requestDeleteByRecord?.({ key: nodeData.key })}
+              />
+            ),
+            key: 'delete',
+          },
+        ].filter(Boolean),
+      }}
+    >
+      <div onClick={(e) => e.preventDefault()}>
+        <MoreOutlined />
+      </div>
+    </Dropdown>
+  );
+}
+
+function FileTree<D extends DataNode>(props: FileTreeProps<D>) {
+  const titleExtra = useMemo(() => {
+    if (!props.actions?.includes('create')) {
+      return null;
+    }
+
+    return (
+      <Detail
+        action="create"
+        trigger={<PlusOutlined />}
+        requestCreateByValues={props.requestCreateByValues}
+      />
+    );
+  }, [props.actions, props.requestCreateByValues]);
+
+  const titleRender = useCallback(
+    (nodeData) => {
+      console.log(nodeData);
+      const hasMore = props.actions?.includes('update') || props.actions?.includes('delete');
+      return (
+        <div className="group flex gap-1">
+          {nodeData.children ? (
+            <FileCard.FileIcon isDirectory className="text-base" />
+          ) : (
+            <FileCard.FileIcon name={nodeData.title} className="text-base" />
+          )}
+          <div className="flex-1 truncate">{nodeData.title}</div>
+          <div className={classNames('text-desc', { 'group-hover:hidden': hasMore })}>
+            {nodeData.children?.length || 0}
+          </div>
+          {hasMore && (
+            <div className="hidden group-hover:block">
+              <More
+                actions={props.actions}
+                nodeData={nodeData}
+                requestCreateByValues={props.requestCreateByValues}
+                requestUpdateByValues={props.requestUpdateByValues}
+                requestDeleteByRecord={props.requestDeleteByRecord}
+              />
+            </div>
+          )}
+        </div>
+      );
+    },
+    [
+      props.actions,
+      props.requestCreateByValues,
+      props.requestDeleteByRecord,
+      props.requestUpdateByValues,
+    ],
+  );
+
+  return (
+    <Tree
+      titleExtra={titleExtra}
+      {...props}
+      treeProps={{
+        titleRender,
+        ...props.treeProps,
+        className: classNames('cl-file-tree', props.treeProps?.className),
+      }}
+    />
+  );
+}
+
+export { FileTree };
+export type { FileTreeProps };

package/src/tree/index.tsx

@@ -1,152 +1,5 @@
-import { PageLayout } from '@fe-free/core';
-import { useDebounce } from 'ahooks';
-import type { TreeProps as AntdTreeProps } from 'antd';
-import { Tree as AntdTree, Input } from 'antd';
-import type { DataNode } from 'antd/es/tree';
-import { useCallback, useMemo, useState } from 'react';
-import { flatToTreeData } from './helper';
-
-interface TreeProps<T extends DataNode> extends AntdTreeProps<T> {
-  enableSearch?: boolean;
-}
-
-function useHighLightTreeData({ treeData, search }) {
-  return useMemo(() => {
-    if (!search) {
-      return treeData;
-    }
-
-    const loop = (data) => {
-      return data.map((item) => {
-        const strTitle = item.title as string;
-        const index = strTitle.indexOf(search);
-        const beforeStr = strTitle.substring(0, index);
-        const afterStr = strTitle.slice(index + search.length);
-        const title =
-          index > -1 ? (
-            <span key={item.key}>
-              {beforeStr}
-              <span className="text-red-500">{search}</span>
-              {afterStr}
-            </span>
-          ) : (
-            <span key={item.key}>{strTitle}</span>
-          );
-
-        if (item.children) {
-          return { ...item, title, children: loop(item.children) };
-        }
-
-        return {
-          ...item,
-          title,
-        };
-      });
-    };
-
-    return loop(treeData);
-  }, [search, treeData]);
-}
-
-function useFilterTreeData({ treeData, search }) {
-  return useMemo(() => {
-    if (!search || !treeData) {
-      return treeData;
-    }
-
-    const searchLower = search.toLowerCase();
-
-    // 检查节点是否匹配搜索条件
-    const isNodeMatch = (node) => {
-      const title = typeof node.title === 'string' ? node.title : '';
-      return title.toLowerCase().includes(searchLower);
-    };
-
-    // 递归过滤树形数据
-    const filterTree = (nodes) => {
-      if (!nodes || nodes.length === 0) {
-        return [];
-      }
-
-      return nodes
-        .map((node) => {
-          const children = node.children ? filterTree(node.children) : [];
-          const isMatch = isNodeMatch(node);
-          const hasMatchingChildren = children.length > 0;
-
-          // 如果当前节点匹配或者有匹配的子节点，则保留该节点
-          if (isMatch || hasMatchingChildren) {
-            return {
-              ...node,
-              children: hasMatchingChildren ? children : undefined,
-            };
-          }
-
-          return null;
-        })
-        .filter(Boolean); // 过滤掉null值
-    };
-
-    return filterTree(treeData);
-  }, [treeData, search]);
-}
-
-function Tree<T extends DataNode>(props: TreeProps<T>) {
-  const { enableSearch, treeData, ...rest } = props;
-  const [search, setSearch] = useState('');
-  const debouncedSearch = useDebounce(search, { wait: 300 });
-
-  const filterTreeData = useFilterTreeData({ treeData, search: debouncedSearch });
-  const highlightedTreeData = useHighLightTreeData({
-    treeData: filterTreeData,
-    search: debouncedSearch,
-  });
-  const newTreeData = highlightedTreeData;
-
-  const handleSearch = useCallback((e) => {
-    setSearch(e.target.value);
-  }, []);
-
-  const searchExpandKeysProps = useMemo(() => {
-    if (!debouncedSearch) {
-      return {};
-    }
-
-    const keys: string[] = [];
-    function loop(arr) {
-      arr.forEach((item) => {
-        keys.push(item.key);
-        if (item.children) {
-          loop(item.children);
-        }
-      });
-    }
-    loop(newTreeData);
-
-    return { expandedKeys: keys };
-  }, [debouncedSearch, newTreeData]);
-
-  const node = <AntdTree {...searchExpandKeysProps} {...rest} treeData={newTreeData} />;
-
-  if (!enableSearch) {
-    return node;
-  }
-
-  return (
-    <PageLayout
-      direction="vertical"
-      start={
-        enableSearch && (
-          <div className="px-2 pb-2">
-            <Input.Search placeholder="搜索" value={search} onChange={handleSearch} />
-          </div>
-        )
-      }
-    >
-      {node}
-    </PageLayout>
-  );
-}
-
-export { flatToTreeData, Tree };
-export type { TreeProps };
+export { FileTree } from './file_tree';
+export type { FileTreeProps } from './file_tree';
+export { flatToTreeData } from './helper';
+export { Tree } from './tree';
+export type { TreeProps } from './tree';

package/src/tree/style.scss

@@ -0,0 +1,28 @@
+.cl-tree {
+  &.cl-tree-no-wrap {
+    .ant-tree-title {
+      white-space: nowrap;
+    }
+  }
+
+  .ant-tree-switcher {
+    margin-inline-end: 0 !important;
+  }
+}
+
+.cl-file-tree {
+  .ant-tree-node-content-wrapper {
+    overflow: hidden;
+    padding-inline-start: 0 !important;
+  }
+
+  &.cl-tree-all-leaf {
+    .ant-tree-switcher {
+      display: none;
+    }
+
+    .ant-tree-node-content-wrapper {
+      padding-inline-start: 8px !important;
+    }
+  }
+}

package/src/tree/tree.stories.tsx

@@ -5,6 +5,13 @@ const meta: Meta<typeof Tree> = {
   title: '@fe-free/core/Tree',
   component: Tree,
   tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div className="c-border w-[300px]">
+        <Story />
+      </div>
+    ),
+  ],
 };
 
 export default meta;
@@ -12,45 +19,115 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    defaultExpandAll: true,
-    treeData: [
-      {
-        title: '0-0',
-        key: '0-0',
-        children: [
-          { title: '0-0-0', key: '0-0-0' },
-          { title: '0-0-1', key: '0-0-1' },
-          { title: '0-0-2', key: '0-0-2' },
-        ],
-      },
-    ],
+    treeProps: {
+      defaultExpandAll: true,
+      treeData: [
+        {
+          title: '0-0',
+          key: '0-0',
+          children: [
+            { title: '0-0-0', key: '0-0-0' },
+            { title: '0-0-1', key: '0-0-1' },
+            { title: '0-0-2', key: '0-0-2' },
+          ],
+        },
+      ],
+    },
   },
 };
 
 export const EnableSearch: Story = {
   args: {
     enableSearch: true,
-    defaultExpandAll: true,
-    treeData: [
-      {
-        title: '0-0',
-        key: '0-0',
-        children: [
-          { title: '0-0-0', key: '0-0-0' },
-          { title: '0-0-1', key: '0-0-1' },
-          { title: '0-0-2', key: '0-0-2' },
-        ],
-      },
-      {
-        title: '0-1',
-        key: '0-1',
-        children: [{ title: '0-1-0', key: '0-1-0' }],
-      },
-      {
-        title: '0-2',
-        key: '0-2',
-        children: [{ title: '0-2-0', key: '0-2-0' }],
-      },
-    ],
+    treeProps: {
+      defaultExpandAll: true,
+      treeData: [
+        {
+          title: '0-0',
+          key: '0-0',
+          children: [
+            { title: '0-0-0', key: '0-0-0' },
+            { title: '0-0-1', key: '0-0-1' },
+            { title: '0-0-2', key: '0-0-2' },
+          ],
+        },
+        {
+          title: '0-1',
+          key: '0-1',
+          children: [{ title: '0-1-0', key: '0-1-0' }],
+        },
+        {
+          title: '0-2',
+          key: '0-2',
+          children: [{ title: '0-2-0', key: '0-2-0' }],
+        },
+      ],
+    },
+  },
+};
+
+export const Title: Story = {
+  args: {
+    title: '某某公司',
+    enableSearch: true,
+    treeProps: {
+      defaultExpandAll: true,
+      treeData: [
+        {
+          title: '0-0',
+          key: '0-0',
+          children: [
+            { title: '0-0-0', key: '0-0-0' },
+            { title: '0-0-1', key: '0-0-1' },
+            { title: '0-0-2', key: '0-0-2' },
+          ],
+        },
+      ],
+    },
+  },
+};
+
+export const TitleDescription: Story = {
+  args: {
+    title: '某某公司',
+    titleDescription: '某某公司描述',
+    enableSearch: true,
+    treeProps: {
+      defaultExpandAll: true,
+      treeData: [
+        {
+          title: '0-0',
+          key: '0-0',
+          children: [
+            { title: '0-0-0', key: '0-0-0' },
+            { title: '0-0-1', key: '0-0-1' },
+            { title: '0-0-2', key: '0-0-2' },
+          ],
+        },
+      ],
+    },
+  },
+};
+
+export const TitleExtra: Story = {
+  args: {
+    title: '某某公司',
+    titleDescription: '某某公司描述',
+    titleExtra: '添加',
+    enableSearch: true,
+    treeProps: {
+      defaultExpandAll: true,
+      treeData: [
+        {
+          title: '0-0',
+          key: '0-0',
+          children: [
+            { title: '0-0-0', key: '0-0-0' },
+            { title: '0-0-1', key: '0-0-1' },
+            { title: '0-0-2', key: '0-0-2' },
+          ],
+        },
+      ],
+    },
   },
 };

package/src/tree/tree.tsx

@@ -0,0 +1,201 @@
+import { PageLayout } from '@fe-free/core';
+import { useDebounce } from 'ahooks';
+import type { TreeProps as AntdTreeProps } from 'antd';
+import { Tree as AntdTree, Input } from 'antd';
+import type { DataNode } from 'antd/es/tree';
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import { flatToTreeData } from './helper';
+import './style.scss';
+
+interface TreeProps<T extends DataNode> {
+  /** 标题 */
+  title?: string | ReactNode;
+  /** 标题描述 */
+  titleDescription?: string | ReactNode;
+  /** 标题额外内容 */
+  titleExtra?: ReactNode;
+  /** 启用搜索 */
+  enableSearch?: boolean;
+  /** Antd 树的 props */
+  treeProps?: AntdTreeProps<T>;
+}
+
+function useHighLightTreeData({ treeData, search }) {
+  return useMemo(() => {
+    if (!search) {
+      return treeData;
+    }
+
+    const loop = (data) => {
+      return data.map((item) => {
+        const strTitle = item.title as string;
+        const index = strTitle.indexOf(search);
+        const beforeStr = strTitle.substring(0, index);
+        const afterStr = strTitle.slice(index + search.length);
+        const title =
+          index > -1 ? (
+            <span key={item.key}>
+              {beforeStr}
+              <span className="text-red-500">{search}</span>
+              {afterStr}
+            </span>
+          ) : (
+            <span key={item.key}>{strTitle}</span>
+          );
+
+        if (item.children) {
+          return { ...item, title, children: loop(item.children) };
+        }
+
+        return {
+          ...item,
+          title,
+        };
+      });
+    };
+
+    return loop(treeData);
+  }, [search, treeData]);
+}
+
+function useFilterTreeData({ treeData, search }) {
+  return useMemo(() => {
+    if (!search || !treeData) {
+      return treeData;
+    }
+
+    const searchLower = search.toLowerCase();
+
+    // 检查节点是否匹配搜索条件
+    const isNodeMatch = (node) => {
+      const title = typeof node.title === 'string' ? node.title : '';
+      return title.toLowerCase().includes(searchLower);
+    };
+
+    // 递归过滤树形数据
+    const filterTree = (nodes) => {
+      if (!nodes || nodes.length === 0) {
+        return [];
+      }
+
+      return nodes
+        .map((node) => {
+          const children = node.children ? filterTree(node.children) : [];
+          const isMatch = isNodeMatch(node);
+          const hasMatchingChildren = children.length > 0;
+
+          // 如果当前节点匹配或者有匹配的子节点，则保留该节点
+          if (isMatch || hasMatchingChildren) {
+            return {
+              ...node,
+              children: hasMatchingChildren ? children : undefined,
+            };
+          }
+
+          return null;
+        })
+        .filter(Boolean); // 过滤掉null值
+    };
+
+    return filterTree(treeData);
+  }, [treeData, search]);
+}
+
+function useIsAllLeaf(treeData?: DataNode[]) {
+  return useMemo(() => {
+    return treeData?.every((item) => item.children === undefined) || true;
+  }, [treeData]);
+}
+
+function Tree<T extends DataNode>(props: TreeProps<T>) {
+  const { title, titleDescription, titleExtra, enableSearch, treeProps } = props;
+
+  const [search, setSearch] = useState('');
+  const debouncedSearch = useDebounce(search, { wait: 300 });
+
+  const isAllLeaf = useIsAllLeaf(treeProps?.treeData);
+
+  const filterTreeData = useFilterTreeData({
+    treeData: treeProps?.treeData,
+    search: debouncedSearch,
+  });
+  const highlightedTreeData = useHighLightTreeData({
+    treeData: filterTreeData,
+    search: debouncedSearch,
+  });
+  const newTreeData = highlightedTreeData;
+
+  const handleSearch = useCallback((e) => {
+    setSearch(e.target.value);
+  }, []);
+
+  const searchExpandKeysProps = useMemo(() => {
+    if (!debouncedSearch) {
+      return {};
+    }
+
+    const keys: string[] = [];
+    function loop(arr) {
+      arr.forEach((item) => {
+        keys.push(item.key);
+        if (item.children) {
+          loop(item.children);
+        }
+      });
+    }
+    loop(newTreeData);
+
+    return { expandedKeys: keys };
+  }, [debouncedSearch, newTreeData]);
+
+  const node = (
+    <AntdTree
+      blockNode
+      {...searchExpandKeysProps}
+      {...treeProps}
+      treeData={newTreeData}
+      className={classNames(
+        'cl-tree cl-tree-no-wrap',
+        {
+          'cl-tree-all-leaf': isAllLeaf,
+        },
+        treeProps?.className,
+      )}
+    />
+  );
+
+  if (!enableSearch) {
+    return node;
+  }
+
+  return (
+    <PageLayout
+      direction="vertical"
+      start={
+        (enableSearch || title) && (
+          <div className="flex flex-col gap-2 py-2">
+            {(title || titleExtra) && (
+              <div className="flex gap-2 px-2">
+                <div className="flex-1">
+                  <div className="truncate">{title}</div>
+                  {titleDescription && <div className="text-desc">{titleDescription}</div>}
+                </div>
+                {titleExtra}
+              </div>
+            )}
+            <div className="px-2">
+              <Input placeholder="搜索" value={search} onChange={handleSearch} />
+            </div>
+          </div>
+        )
+      }
+    >
+      {node}
+    </PageLayout>
+  );
+}
+
+export { flatToTreeData, Tree };
+export type { TreeProps };