pref(componentTest): 优化测试用例界面和节点选择逻辑

src/pages/componentDevelopment/componentTest/sideBar.tsx

@@ -103,9 +103,19 @@ const SideBar = ({ onNodeSelect, getCount }) => {
 
   // 处理节点选择
   const handleTreeSelect = (selectedKeys: any[], info: any) => {
-    // 判断是否为子节点(不是分类节点)
     const selectedKey = selectedKeys[0];
-    if (selectedKey && !selectedKey.startsWith('classify-')) {
+
+    // 如果是父节点(分类节点),切换展开/收起状态
+    if (selectedKey && selectedKey.startsWith('classify-')) {
+      const isExpanded = expandedKeys.includes(selectedKey);
+      if (isExpanded) {
+        setExpandedKeys(expandedKeys.filter(key => key !== selectedKey));
+      }
+      else {
+        setExpandedKeys([...expandedKeys, selectedKey]);
+      }
+    }
+    else if (selectedKey) {
       // 子节点的key就是identifier
       onNodeSelect(selectedKey);
     }

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

@@ -20,12 +20,13 @@
     .tab-center {
       flex: 1;
       display: flex;
-      margin-left: 20%;
+      justify-content: flex-end;
       gap: 8px;
     }
 
     .tab-right {
       display: flex;
+      justify-content: flex-end;
       gap: 8px;
     }
   }
@@ -118,10 +119,11 @@
 
     // 中间流程图区域
     .center-panel {
+      flex: 1.5;
       display: flex;
-      align-items: center;
+      align-items: flex-start;
       justify-content: center;
-      padding: 16px 120px;
+      padding: 40px 80px;
       overflow: auto;
 
       .flow-wrapper {
@@ -137,31 +139,31 @@
 
           .node-box {
             background: #fff;
-            border-radius: 6px;
+            border-radius: 10px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+            box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
-            min-width: 160px;
+            min-width: 280px;
 
             .node-header {
               display: flex;
               align-items: center;
-              gap: 6px;
+              gap: 10px;
-              padding: 6px 10px;
+              padding: 14px 18px;
               border-bottom: 1px solid #e5e6eb;
 
               .node-icon {
-                font-size: 12px;
+                font-size: 20px;
               }
 
               .node-title {
-                font-size: 12px;
+                font-size: 17px;
                 font-weight: 500;
                 color: #1d2129;
               }
             }
 
             .node-label {
-              padding: 4px 10px;
+              padding: 10px 18px;
-              font-size: 10px;
+              font-size: 14px;
               color: #86909c;
               text-align: center;
             }
@@ -170,7 +172,7 @@
               .node-header {
                 background: #5a6c7d;
                 color: #fff;
-                border-radius: 6px 6px 0 0;
+                border-radius: 10px 10px 0 0;
 
                 .node-title {
                   color: #fff;
@@ -182,7 +184,7 @@
               .node-header {
                 background: #5a6c7d;
                 color: #fff;
-                border-radius: 6px 6px 0 0;
+                border-radius: 10px 10px 0 0;
 
                 .node-title {
                   color: #fff;
@@ -194,7 +196,7 @@
               .node-header {
                 background: #ffb800;
                 color: #fff;
-                border-radius: 6px 6px 0 0;
+                border-radius: 10px 10px 0 0;
 
                 .node-title {
                   color: #fff;
@@ -202,35 +204,35 @@
               }
 
               .node-body {
-                padding: 8px;
+                padding: 16px;
 
                 .node-function {
-                  font-size: 11px;
+                  font-size: 15px;
                   font-weight: 500;
                   color: #1d2129;
-                  margin-bottom: 6px;
+                  margin-bottom: 10px;
                 }
 
                 .node-params {
                   display: flex;
                   flex-direction: column;
-                  gap: 3px;
+                  gap: 7px;
-                  margin-bottom: 4px;
+                  margin-bottom: 8px;
 
                   .param-item {
                     display: flex;
                     align-items: center;
-                    gap: 4px;
+                    gap: 8px;
 
                     .param-dot {
-                      width: 5px;
+                      width: 8px;
-                      height: 5px;
+                      height: 8px;
                       border-radius: 50%;
                       background: #86909c;
                     }
 
                     .param-label {
-                      font-size: 10px;
+                      font-size: 14px;
                       color: #4e5969;
                     }
                   }
@@ -240,17 +242,17 @@
                   display: flex;
                   align-items: center;
                   justify-content: flex-end;
-                  gap: 4px;
+                  gap: 8px;
 
                   .param-dot {
-                    width: 5px;
+                    width: 8px;
-                    height: 5px;
+                    height: 8px;
                     border-radius: 50%;
                     background: #86909c;
                   }
 
                   .param-label {
-                    font-size: 10px;
+                    font-size: 14px;
                     color: #4e5969;
                   }
                 }
@@ -265,17 +267,17 @@
             margin: 0;
 
             .connector-line {
-              width: 24px;
+              width: 40px;
               height: 2px;
               background: #d9d9d9;
             }
 
             .connector-dot {
-              width: 5px;
+              width: 8px;
-              height: 5px;
+              height: 8px;
               border-radius: 50%;
               background: #d9d9d9;
-              margin-left: -2px;
+              margin-left: -4px;
             }
           }
         }

src/pages/componentDevelopment/componentTest/testInstance.tsx

@@ -37,25 +37,25 @@ const TestInstance = ({ instance, onBack }: { instance: any; onBack: () => void
             type="outline"
             onClick={() => setActiveTab('template')}
           >
-            下载监听器组件模板
+            下载当前测试用例
           </Button>
           <Button
             type="outline"
             onClick={() => setActiveTab('add')}
           >
-            从模板新增人用例
+            从模板导入用例
           </Button>
           <Button
             type="outline"
             onClick={() => setActiveTab('batch')}
           >
-            一键生成监听用例
+            一键生成测试用例
           </Button>
           <Button
             type="outline"
             onClick={() => setActiveTab('single')}
           >
-            单出监听用例用例
+            导出当前测试用例
           </Button>
         </div>
         <div className={styles['tab-right']}></div>