style(componentTest): 优化组件测试页面布局结构

src/pages/componentDevelopment/componentTest/sideBar.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Input, Tree } from '@arco-design/web-react';
 import { IconSearch } from '@arco-design/web-react/icon';
 import { getTreeComponents } from '@/api/componentTestCase';
+import styles from './style/sideBar.module.less';
 
 const TreeNode = Tree.Node;
 
@@ -129,26 +130,25 @@ const SideBar = ({ onNodeSelect, getCount }) => {
   }, []);
 
   return (
-    <>
+    <div className={styles['sidebar-container']}>
       <Input
         prefix={<IconSearch />}
         placeholder={'搜索'}
-        style={{ width: '90%' }}
         value={searchValue}
         onChange={handleSearchChange}
       />
-
+      <div className={styles['tree-wrapper']}>
-      <Tree
+        <Tree
-        onSelect={handleTreeSelect}
+          onSelect={handleTreeSelect}
-        onExpand={(keys) => {
+          onExpand={(keys) => {
-          setExpandedKeys(keys as string[]);
+            setExpandedKeys(keys as string[]);
-        }}
+          }}
-        expandedKeys={expandedKeys}
+          expandedKeys={expandedKeys}
-        treeData={treeData}
+          treeData={treeData}
-      >
+        >
-      </Tree>
+        </Tree>
-
+      </div>
-    </>
+    </div>
   );
 };
 

src/pages/componentDevelopment/componentTest/style/index.module.less

@@ -1,7 +1,10 @@
 .component-test {
   height: 98%;
   background-color: #ffffff;
-  padding: 17px 19px 0 24px;
+  padding: 17px 19px 17px 24px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
 
   .header {
     display: flex;
@@ -9,17 +12,46 @@
     padding-bottom: 15px;
     border-bottom: 1px solid #ebebeb;
     margin-bottom: 25px;
+    flex-shrink: 0;
   }
 
   .content {
     display: flex;
+    flex: 1;
+    overflow: hidden;
+    min-height: 0;
 
     .left {
       width: 20%;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      padding-right: 16px;
+      padding-bottom: 10px;
+      border-right: 1px solid #ebebeb;
+      box-sizing: border-box;
+      min-height: 0;
+
+      :global {
+        .arco-input-wrapper {
+          flex-shrink: 0;
+          margin-bottom: 12px;
+        }
+
+        .arco-tree {
+          flex: 1;
+          overflow-y: auto;
+          min-height: 0;
+        }
+      }
     }
 
     .right {
       width: 80%;
+      height: 100%;
+      overflow-y: auto;
+      padding-left: 16px;
+      box-sizing: border-box;
     }
   }
 }

src/pages/componentDevelopment/componentTest/style/sideBar.module.less

@@ -0,0 +1,12 @@
+.sidebar-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+
+  .tree-wrapper {
+    flex: 1;
+    overflow-y: auto;
+    margin-top: 12px;
+  }
+}