diff --git a/src/pages/componentDevelopment/componentTest/sideBar.tsx b/src/pages/componentDevelopment/componentTest/sideBar.tsx index c6b7761..521cb86 100644 --- a/src/pages/componentDevelopment/componentTest/sideBar.tsx +++ b/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); } diff --git a/src/pages/componentDevelopment/componentTest/style/testInstance.module.less b/src/pages/componentDevelopment/componentTest/style/testInstance.module.less index 1fb106d..26f3805 100644 --- a/src/pages/componentDevelopment/componentTest/style/testInstance.module.less +++ b/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; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); - min-width: 160px; + border-radius: 10px; + box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12); + min-width: 280px; .node-header { display: flex; align-items: center; - gap: 6px; - padding: 6px 10px; + gap: 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; - font-size: 10px; + padding: 10px 18px; + 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; - margin-bottom: 4px; + gap: 7px; + margin-bottom: 8px; .param-item { display: flex; align-items: center; - gap: 4px; + gap: 8px; .param-dot { - width: 5px; - height: 5px; + width: 8px; + 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; - height: 5px; + width: 8px; + 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; - height: 5px; + width: 8px; + height: 8px; border-radius: 50%; background: #d9d9d9; - margin-left: -2px; + margin-left: -4px; } } } diff --git a/src/pages/componentDevelopment/componentTest/testInstance.tsx b/src/pages/componentDevelopment/componentTest/testInstance.tsx index 17ed678..ff22222 100644 --- a/src/pages/componentDevelopment/componentTest/testInstance.tsx +++ b/src/pages/componentDevelopment/componentTest/testInstance.tsx @@ -37,25 +37,25 @@ const TestInstance = ({ instance, onBack }: { instance: any; onBack: () => void type="outline" onClick={() => setActiveTab('template')} > - 下载监听器组件模板 + 下载当前测试用例