feat: builtin Tree component can recognizes empty ul as a folder (#2115)

* feat: Recognizing empty ul as a folder

* feat: update the tree markdown doc

* fix: Recognizing empty ul as a folder

* fix: update the tree markdown doc

* fix: code

docs/guide/markdown.md

@@ -172,6 +172,7 @@ features:
     <li>
       src
       <ul>
+        <li>directory <ul></ul></li>
         <li>index.md</li>
       </ul>
     </li>
@@ -187,6 +188,7 @@ features:
     <li>
       src
       <ul>
+        <li>directory <ul></ul></li>
         <li>index.md</li>
       </ul>
     </li>
@@ -203,6 +205,11 @@ features:
       src
 +     <small>这是 src 文件夹</small>
       <ul>
+        <li>
+          directory
++         <small>没有子项的文件夹</small>
+          <ul></ul>
+        </li>
         <li>
           index.md
 +         <small>这是 index.md</small>
@@ -225,6 +232,11 @@ features:
       src
       <small>这是 src 文件夹</small>
       <ul>
+        <li>
+          directory
+          <small>没有子项的文件夹</small>
+          <ul></ul>
+        </li>
         <li>
           index.md
           <small>这是 index.md</small>

src/client/theme-default/builtins/Tree/index.tsx

@@ -32,15 +32,23 @@ function getTreeFromList(nodes: ReactNode, prefix = '') {
       }
 
       case 'li': {
-        const liLeafs = getTreeFromList(node.props.children, key);
-
+        const hasEmptyUl = node.props.children?.some?.(
+          (child) => child.type === 'ul' && !child.props.children?.length,
+        );
+        const title = ([] as ReactNode[])
+          .concat(node.props.children)
+          .filter((child) => child.type !== 'ul');
+        const children = hasEmptyUl
+          ? []
+          : getTreeFromList(node.props.children, key);
         data.push({
-          title: ([] as ReactNode[])
-            .concat(node.props.children)
-            .filter((child) => child.type !== 'ul'),
+          title,
           key,
-          children: liLeafs,
-          isLeaf: !liLeafs.length,
+          children,
+          isLeaf: !hasEmptyUl && !children.length,
+          switcherIcon: hasEmptyUl ? (
+            <span className="tree-switcher-leaf-line" />
+          ) : undefined,
         });
         break;
       }
@@ -63,38 +71,38 @@ const useListToTree = (nodes: ReactNode) => {
 };
 
 const getIcon = (props: TreeNodeProps<DataNode>) => {
-  const { isLeaf, expanded } = props;
+  const { isLeaf, expanded, data } = props;
   if (isLeaf) {
     return (
       <span className="dumi-default-tree-icon">
         <FileOutlined fill="currentColor" />
       </span>
     );
   }
-  return expanded ? (
+  return !expanded || !data?.children?.length ? (
     <span className="dumi-default-tree-icon">
-      <FolderOpenOutlined fill="currentColor" />
+      <FolderOutlined fill="currentColor" />
     </span>
   ) : (
     <span className="dumi-default-tree-icon">
-      <FolderOutlined fill="currentColor" />
+      <FolderOpenOutlined fill="currentColor" />
     </span>
   );
 };
 
 const renderSwitcherIcon = (props: TreeNodeProps<DataNode>) => {
   const { isLeaf, expanded } = props;
   if (isLeaf) {
-    return <span className={`tree-switcher-leaf-line`} />;
+    return <span className="tree-switcher-leaf-line" />;
   }
   return expanded ? (
-    <span className={`tree-switcher-line-icon`}>
+    <span className="tree-switcher-line-icon">
       <span className="dumi-default-tree-icon">
         <MinusSquareOutlined fill="currentColor" />
       </span>
     </span>
   ) : (
-    <span className={`tree-switcher-line-icon`}>
+    <span className="tree-switcher-line-icon">
       <span className="dumi-default-tree-icon">
         <PlusSquareOutlined fill="currentColor" />
       </span>
@@ -142,8 +150,14 @@ export default (props: ComponentProps<'div'>) => {
     node: EventDataNode<any>,
   ) => {
     const { isLeaf } = node;
-
-    if (isLeaf || event.shiftKey || event.metaKey || event.ctrlKey) {
+    const isEmptyUl = !isLeaf && !node.children?.length;
+    if (
+      isLeaf ||
+      isEmptyUl ||
+      event.shiftKey ||
+      event.metaKey ||
+      event.ctrlKey
+    ) {
       return;
     }
     treeRef.current!.onNodeExpand(event as any, node);