@fe-free/core 2.1.6 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @fe-free/core
 
+## 2.2.0
+
+### Minor Changes
+
+- feat: tree and page layout
+
+### Patch Changes
+
+- @fe-free/tool@2.2.0
+
+## 2.1.7
+
+### Patch Changes
+
+- feat: tailwindcss
+  - @fe-free/tool@2.1.7
+
 ## 2.1.6
 
 ### Patch Changes

package/package.json

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

package/src/index.ts

@@ -1,3 +1,5 @@
+import './style.scss';
+
 export { useGlobalInfiniteScroll } from './ahooks/use_global_infinite_scroll';
 export { useGlobalRequest } from './ahooks/use_global_request';
 export { LoadingButton } from './button';
@@ -30,5 +32,6 @@ export { Markdown } from './markdown';
 export { PageLayout } from './page_layout';
 export { Table } from './table';
 export type { TableProps } from './table';
+export { Tree } from './tree';
 export { useLocalforageState } from './use_localforage_state';
 export { CustomValueTypeEnum, customValueTypeMap } from './value_type_map';

package/src/page_layout/index.tsx

@@ -6,6 +6,9 @@ interface PageLayoutProps {
   children?: React.ReactNode;
   end?: React.ReactNode;
   className?: string;
+  startClassName?: string;
+  childrenClassName?: string;
+  endClassName?: string;
 }
 
 function PageLayout({
@@ -14,6 +17,9 @@ function PageLayout({
   children,
   end,
   className,
+  startClassName,
+  childrenClassName,
+  endClassName,
 }: PageLayoutProps) {
   return (
     <div
@@ -26,9 +32,9 @@ function PageLayout({
         className,
       )}
     >
-      <div className="flex-none">{start}</div>
-      <div className="flex-1 overflow-auto">{children}</div>
-      <div className="flex-none">{end}</div>
+      <div className={cn('flex-none', startClassName)}>{start}</div>
+      <div className={cn('flex-1 overflow-auto', childrenClassName)}>{children}</div>
+      <div className={cn('flex-none', endClassName)}>{end}</div>
     </div>
   );
 }

package/src/page_layout/page_layout.stories.tsx

@@ -0,0 +1,40 @@
+import { PageLayout } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta: Meta<typeof PageLayout> = {
+  title: '@fe-free/core/PageLayout',
+  component: PageLayout,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    start: <div className="bg-red-500 w-[100px] h-[100px]">start</div>,
+    children: <div className="bg-blue-500 h-[100px]">children</div>,
+    end: <div className="bg-green-500 w-[100px] h-[100px]">end</div>,
+  },
+};
+
+export const DirectionVertical: Story = {
+  args: {
+    direction: 'vertical',
+    start: <div className="bg-red-500 h-[100px]">start</div>,
+    children: <div className="bg-blue-500 h-[100px]">children</div>,
+    end: <div className="bg-green-500 h-[100px]">end</div>,
+  },
+};
+
+export const ClassName: Story = {
+  args: {
+    className: '!w-[500px] !h-[500px]',
+    startClassName: 'p-4 bg-red-200',
+    childrenClassName: 'p-4 bg-blue-200',
+    endClassName: 'p-4 bg-green-200',
+    start: <div className="bg-red-500 w-[100px] h-full">start</div>,
+    children: <div className="bg-blue-500 h-full">children</div>,
+    end: <div className="bg-green-500 w-[100px] h-full">end</div>,
+  },
+};

package/src/style.scss

@@ -0,0 +1,41 @@
+/** 和 antd 冲突，不开启 */
+/* stylelint-disable-next-line at-rule-no-unknown */
+// @tailwind base;
+
+/* stylelint-disable-next-line at-rule-no-unknown */
+@tailwind components;
+
+/* stylelint-disable-next-line at-rule-no-unknown */
+@tailwind utilities;
+
+.c-border {
+  border: 1px solid #f0f0f0;
+}
+
+.c-border-bottom {
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.c-border-top {
+  border-top: 1px solid #f0f0f0;
+}
+
+.c-border-left {
+  border-left: 1px solid #f0f0f0;
+}
+
+.c-border-right {
+  border-right: 1px solid #f0f0f0;
+}
+
+.c-bg {
+  background-color: #f3f5f6;
+}
+
+.c-bg-hover {
+  background-color: #f3f5f6;
+
+  &:hover {
+    background-color: #e9ebec;
+  }
+}

package/src/tailwindcss.stories.tsx

@@ -12,6 +12,14 @@ export const Default = () => {
         <span className="text-secondary">text-secondary</span>
         <span className="text-desc">text-desc</span>
       </div>
+      <div>
+        <div className="c-border-bottom">c-border-bottom</div>
+        <div className="c-border-top">c-border-top</div>
+        <div className="c-border-left">c-border-left</div>
+        <div className="c-border-right">c-border-right</div>
+        <div className="c-bg">c-bg</div>
+        <div className="c-bg-hover">c-bg-hover</div>
+      </div>
     </div>
   );
 };

package/src/tree/index.tsx

@@ -0,0 +1,130 @@
+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 { useMemo, useState } from 'react';
+
+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 node = <AntdTree {...rest} treeData={highlightedTreeData} />;
+
+  if (!enableSearch) {
+    return node;
+  }
+
+  return (
+    <PageLayout
+      direction="vertical"
+      start={
+        enableSearch && (
+          <div className="pb-2">
+            <Input.Search
+              placeholder="搜索"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+            />
+          </div>
+        )
+      }
+    >
+      {node}
+    </PageLayout>
+  );
+}
+
+export { Tree };

package/src/tree/tree.stories.tsx

@@ -0,0 +1,56 @@
+import { Tree } from '@fe-free/core';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+const meta: Meta<typeof Tree> = {
+  title: '@fe-free/core/Tree',
+  component: Tree,
+  tags: ['autodocs'],
+};
+
+export default meta;
+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' },
+        ],
+      },
+    ],
+  },
+};
+
+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' }],
+      },
+    ],
+  },
+};