style: Improve style z-order to fix some errors (#51448)

Co-authored-by: IsKaros <IsKaros@users.noreply.github.com>
Co-authored-by: ​ <​>

components/tree/__tests__/demo-extend.test.ts

@@ -1,3 +1,5 @@
 import { extendTest } from '../../../tests/shared/demoTest';
 
-extendTest('tree', { skip: ['big-data.tsx', 'virtual-scroll.tsx', 'component-token.tsx'] });
+extendTest('tree', {
+  skip: ['big-data.tsx', 'virtual-scroll.tsx', 'component-token.tsx', 'directory-debug.tsx'],
+});

components/tree/__tests__/demo.test.ts

@@ -1,3 +1,5 @@
 import demoTest from '../../../tests/shared/demoTest';
 
-demoTest('tree', { skip: ['big-data.tsx', 'virtual-scroll.tsx', 'component-token.tsx'] });
+demoTest('tree', {
+  skip: ['big-data.tsx', 'virtual-scroll.tsx', 'component-token.tsx', 'directory-debug.tsx'],
+});

components/tree/demo/directory-debug.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+调试 [#51210](https://github.com/ant-design/ant-design/pull/51210), [#51448](https://github.com/ant-design/ant-design/pull/51448#issuecomment-2449144872)
+
+## en-US
+
+Debugging [#51210](https://github.com/ant-design/ant-design/pull/51210), [#51448](https://github.com/ant-design/ant-design/pull/51448#issuecomment-2449144872)

components/tree/demo/directory-debug.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { Flex, Tree } from 'antd';
+import type { GetProps, TreeDataNode } from 'antd';
+
+const { DirectoryTree } = Tree;
+
+const treeData: TreeDataNode[] = [
+  {
+    title: 'parent 0',
+    key: '0-0',
+    children: [
+      { title: 'leaf 0-0', key: '0-0-0', isLeaf: true },
+      { title: 'leaf 0-1', key: '0-0-1', isLeaf: true },
+    ],
+  },
+  {
+    title: 'parent 1',
+    key: '0-1',
+    children: [
+      { title: 'leaf 1-0', key: '0-1-0', isLeaf: true },
+      { title: 'leaf 1-1', key: '0-1-1', isLeaf: true },
+    ],
+  },
+];
+
+const sharedProps: GetProps<typeof DirectoryTree> = {
+  treeData,
+  defaultExpandAll: true,
+  onSelect: (keys, info) => {
+    console.log('Trigger Select', keys, info);
+  },
+  onExpand: (keys, info) => {
+    console.log('Trigger Expand', keys, info);
+  },
+};
+
+const DemoOne = () => <DirectoryTree draggable defaultSelectedKeys={['0-0-0']} />;
+
+const DemoTwo = () => <DirectoryTree {...sharedProps} checkable defaultSelectedKeys={['0-1-0']} />;
+
+const DemoThree = () => (
+  <DirectoryTree {...sharedProps} draggable checkable defaultSelectedKeys={['0-1']} />
+);
+
+const BasicDemo = () => <DirectoryTree {...sharedProps} multiple treeData={treeData} />;
+
+const NormalDemo = () => <Tree {...sharedProps} defaultSelectedKeys={['0-1']} />;
+
+const NormalCheckDemo = () => <Tree {...sharedProps} checkable defaultSelectedKeys={['0-1']} />;
+
+const NormalDragDemo = () => <Tree {...sharedProps} draggable defaultSelectedKeys={['0-1-0']} />;
+
+const App = () => (
+  <Flex wrap gap="large">
+    <DemoOne />
+    <DemoTwo />
+    <DemoThree />
+    <BasicDemo />
+    <NormalDemo />
+    <NormalCheckDemo />
+    <NormalDragDemo />
+  </Flex>
+);
+
+export default App;

components/tree/index.en-US.md

@@ -24,6 +24,7 @@ Almost anything can be represented in a tree structure. Examples include directo
 <code src="./demo/line.tsx">Tree with line</code>
 <code src="./demo/customized-icon.tsx">Customize Icon</code>
 <code src="./demo/directory.tsx">directory</code>
+<code src="./demo/directory-debug.tsx" debug>Directory Debug</code>
 <code src="./demo/switcher-icon.tsx">Customize collapse/expand icon</code>
 <code src="./demo/virtual-scroll.tsx">Virtual scroll</code>
 <code src="./demo/drag-debug.tsx" debug>Drag Debug</code>

components/tree/index.zh-CN.md

@@ -25,6 +25,7 @@ demo:
 <code src="./demo/line.tsx">连接线</code>
 <code src="./demo/customized-icon.tsx">自定义图标</code>
 <code src="./demo/directory.tsx">目录</code>
+<code src="./demo/directory-debug.tsx" debug>目录 Debug</code>
 <code src="./demo/switcher-icon.tsx">自定义展开/折叠图标</code>
 <code src="./demo/virtual-scroll.tsx">虚拟滚动</code>
 <code src="./demo/drag-debug.tsx" debug>Drag Debug</code>

components/tree/style/directory.ts

@@ -38,15 +38,14 @@ export const genDirectoryStyle = ({
       },
     },
 
-    [`${treeCls}-switcher`]: {
-      marginInlineEnd: 0,
+    [`${treeCls}-switcher, ${treeCls}-checkbox, ${treeCls}-draggable-icon`]: {
+      zIndex: 1,
     },
 
     // ============= Selected =============
     '&-selected': {
       [`${treeCls}-switcher, ${treeCls}-draggable-icon`]: {
         color: directoryNodeSelectedColor,
-        zIndex: 1,
       },
 
       // >>> Title

components/tree/style/index.ts

@@ -120,7 +120,6 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
     nodeHoverBg,
     colorTextQuaternary,
   } = token;
-  const treeCheckBoxMarginHorizontal = token.marginXXS;
 
   return {
     [treeCls]: {
@@ -253,6 +252,14 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
         visibility: 'hidden',
       },
 
+      // Switcher / Checkbox
+      [`${treeCls}-switcher, ${treeCls}-checkbox`]: {
+        marginInlineEnd: token
+          .calc(token.calc(titleHeight).sub(token.controlInteractiveSize))
+          .div(2)
+          .equal(),
+      },
+
       // >>> Switcher
       [`${treeCls}-switcher`]: {
         ...getSwitchStyle(prefixCls, token),
@@ -260,15 +267,10 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
         flex: 'none',
         alignSelf: 'stretch',
         width: titleHeight,
-        margin: 0,
         textAlign: 'center',
         cursor: 'pointer',
         userSelect: 'none',
         transition: `all ${token.motionDurationSlow}`,
-        marginInlineEnd: token
-          .calc(token.calc(titleHeight).sub(token.controlInteractiveSize))
-          .div(2)
-          .equal(),
 
         '&-noop': {
           cursor: 'unset',
@@ -329,14 +331,6 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
         },
       },
 
-      // >>> Checkbox
-      [`${treeCls}-checkbox`]: {
-        top: 'initial',
-        marginInlineEnd: treeCheckBoxMarginHorizontal,
-        alignSelf: 'flex-start',
-        marginTop: token.marginXXS,
-      },
-
       // >>> Title
       // add `${treeCls}-checkbox + span` to cover checkbox `${checkboxCls} + span`
       [`${treeCls}-node-content-wrapper`]: {