feat(componentTest): 新增组件测试实例功能

- 引入面包屑导航组件优化页面跳转体验
- 新增测试实例页面用于展示具体测试内容
- 实现从实例列表跳转至测试实例的功能
- 添加返回列表按钮便于页面间切换
- 扩展 InstanceList 组件支持前往测试操作
- 更新组件导入列表以支持新增功能模块

src/pages/componentDevelopment/componentTest/index.tsx

@@ -1,16 +1,20 @@
 import React, { useState } from 'react';
 import styles from './style/index.module.less';
-import { Button, Input, Radio, Space, Tag, Divider } from '@arco-design/web-react';
+import { Button, Input, Radio, Space, Tag, Divider, Breadcrumb } from '@arco-design/web-react';
 import { IconSearch } from '@arco-design/web-react/icon';
 import SideBar from '@/pages/componentDevelopment/componentTest/sideBar';
 import InstanceList from '@/pages/componentDevelopment/componentTest/instanceList';
+import TestInstance from '@/pages/componentDevelopment/componentTest/testInstance';
 
 const Group = Radio.Group;
+const BreadcrumbItem = Breadcrumb.Item;
 
 const ComponentTest = () => {
   const [selectedIdentifier, setSelectedIdentifier] = useState<string>('');
   const [refreshKey, setRefreshKey] = useState<number>(0);
   const [count, setCount] = useState({ total: 0, passed: 0, failed: 0 });
+  const [currentView, setCurrentView] = useState<'list' | 'test'>('list');
+  const [selectedInstance, setSelectedInstance] = useState<any>(null);
 
   // 标签配置
   const tagList = [
@@ -26,47 +30,86 @@ const ComponentTest = () => {
     setRefreshKey(prev => prev + 1);
   };
 
+  // 处理前往测试
+  const handleGoToTest = (instance: any) => {
+    setSelectedInstance(instance);
+    setCurrentView('test');
+  };
+
+  // 返回列表
+  const handleBackToList = () => {
+    setCurrentView('list');
+    setSelectedInstance(null);
+  };
+
   return (
     <div className={styles['component-test']}>
-      <div className={styles['header']}>
-        <Group defaultValue={'Beijing'} name="button-radio-group">
-          {tagList.map((item) => {
-            return (
-              <Radio key={item.label} value={item.label}>
-                {({ checked }) => {
-                  return (
-                    <Tag size="large" tabIndex={-1} color={item.color}>
-                      {item.label}{item.value}
-                    </Tag>
-                  );
-                }}
-              </Radio>
-            );
-          })}
-        </Group>
-
-        <Space split={<Divider type="vertical" />}>
-          <Input
-            prefix={<IconSearch />}
-            placeholder={'搜索'}
-            style={{ width: 236 }}
-          />
-          <Button
-            type="primary"
-            style={{ marginLeft: 5, borderRadius: 4 }}
-          >
-            实例指引
-          </Button>
-        </Space>
-      </div>
-      <div className={styles['content']}>
-        <div className={styles['left']}>
-          <SideBar onNodeSelect={handleNodeSelect} getCount={(value) => setCount(value)} />
-        </div>
-        <div className={styles['right']}>
-          <InstanceList identifier={selectedIdentifier} refreshKey={refreshKey} />
+      {/* 面包屑导航 */}
+      {currentView === 'test' && (
+        <div style={{ padding: '16px 24px', background: '#fff', marginBottom: 16 }}>
+          <Breadcrumb>
+            <BreadcrumbItem style={{ cursor: 'pointer' }} onClick={handleBackToList}>
+              组件测试
+            </BreadcrumbItem>
+            <BreadcrumbItem>
+              {selectedInstance?.name || '测试实例'}
+            </BreadcrumbItem>
+          </Breadcrumb>
         </div>
-      </div>
+      )}
+
+      {currentView === 'list' ? (
+        <>
+          <div className={styles['header']}>
+            <Group name="button-radio-group">
+              {tagList.map((item) => {
+                return (
+                  <Radio key={item.label} value={item.label}>
+                    {({ checked }) => {
+                      return (
+                        <Tag size="large" tabIndex={-1} color={item.color}>
+                          {item.label}{item.value}
+                        </Tag>
+                      );
+                    }}
+                  </Radio>
+                );
+              })}
+            </Group>
+
+            <Space split={<Divider type="vertical" />}>
+              <Input
+                prefix={<IconSearch />}
+                placeholder={'搜索'}
+                style={{ width: 236 }}
+              />
+              <Button
+                type="primary"
+                style={{ marginLeft: 5, borderRadius: 4 }}
+              >
+                实例指引
+              </Button>
+            </Space>
+          </div>
+          <div className={styles['content']}>
+            <div className={styles['left']}>
+              <SideBar onNodeSelect={handleNodeSelect} getCount={(value) => setCount(value)} />
+            </div>
+            <div className={styles['right']}>
+              <InstanceList
+                identifier={selectedIdentifier}
+                refreshKey={refreshKey}
+                onGoToTest={handleGoToTest}
+              />
+            </div>
+          </div>
+        </>
+      ) : (
+        <TestInstance
+          instance={selectedInstance}
+          onBack={handleBackToList}
+        />
+      )}
     </div>
   );
 };

src/pages/componentDevelopment/componentTest/instanceList.tsx

@@ -4,7 +4,11 @@ import { getTreeComponents } from '@/api/componentTestCase';
 import { runStatusConstant, runStatusDic, runTypeConstant, runTypeDic } from '@/const/isdp/componentDeploy';
 import dayjs from 'dayjs';
 
-const InstanceList = ({ identifier, refreshKey }: { identifier: string; refreshKey: number }) => {
+const InstanceList = ({ identifier, refreshKey, onGoToTest }: {
+  identifier: string;
+  refreshKey: number;
+  onGoToTest: (instance: any) => void;
+}) => {
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(false);
 
@@ -80,6 +84,7 @@ const InstanceList = ({ identifier, refreshKey }: { identifier: string; refreshK
           record.runStatus === 'RUN' && (
             <Button
               type="text"
+              onClick={() => onGoToTest(record)}
             >前往测试</Button>
           )
         );

src/pages/componentDevelopment/componentTest/test/data.ts

@@ -1,152 +0,0 @@
-export const menu = [
-  {
-    'id': '1770647707245903873',
-    'tenantId': '000000',
-    'parentId': '1658394185466220545',
-    'code': 'component_classify',
-    'dictKey': '设备数采与控制交互组件',
-    'dictValue': '设备数采与控制交互组件',
-    'title': '设备数采与控制交互组件',
-    'sort': 0,
-    'remark': '',
-    'isSealed': -1,
-    'isDeleted': -1,
-    'parentName': '',
-    'hasChildren': false
-  },
-  {
-    'id': '1770647743455330305',
-    'tenantId': '000000',
-    'parentId': '1658394185466220545',
-    'code': 'component_classify',
-    'dictKey': '视觉AI组件',
-    'dictValue': '视觉AI组件',
-    'title': '视觉AI组件',
-    'sort': 1,
-    'remark': '',
-    'isSealed': -1,
-    'isDeleted': -1,
-    'parentName': '',
-    'hasChildren': false
-  },
-  {
-    'id': '1770647774937776129',
-    'tenantId': '000000',
-    'parentId': '1658394185466220545',
-    'code': 'component_classify',
-    'dictKey': '运动规划组件',
-    'dictValue': '运动规划组件',
-    'title': '运动规划组件',
-    'sort': 2,
-    'remark': '',
-    'isSealed': -1,
-    'isDeleted': -1,
-    'parentName': '',
-    'hasChildren': false
-  },
-  {
-    'id': '1770647807334580225',
-    'tenantId': '000000',
-    'parentId': '1658394185466220545',
-    'code': 'component_classify',
-    'dictKey': '工艺知识服务组件',
-    'dictValue': '工艺知识服务组件',
-    'title': '工艺知识服务组件',
-    'sort': 2,
-    'remark': '',
-    'isSealed': -1,
-    'isDeleted': -1,
-    'parentName': '',
-    'hasChildren': false
-  },
-  {
-    'id': '1770647842776449026',
-    'tenantId': '000000',
-    'parentId': '1658394185466220545',
-    'code': 'component_classify',
-    'dictKey': '网络通信组件',
-    'dictValue': '网络通信组件',
-    'title': '网络通信组件',
-    'sort': 4,
-    'remark': '',
-    'isSealed': -1,
-    'isDeleted': -1,
-    'parentName': '',
-    'hasChildren': false
-  },
-  {
-    'id': '1770647878029574145',
-    'tenantId': '000000',
-    'parentId': '1658394185466220545',
-    'code': 'component_classify',
-    'dictKey': '数据存取组件',
-    'dictValue': '数据存取组件',
-    'title': '数据存取组件',
-    'sort': 5,
-    'remark': '',
-    'isSealed': -1,
-    'isDeleted': -1,
-    'parentName': '',
-    'hasChildren': false
-  },
-  {
-    'id': '1770647908987731969',
-    'tenantId': '000000',
-    'parentId': '1658394185466220545',
-    'code': 'component_classify',
-    'dictKey': '时序数据AI组件',
-    'dictValue': '时序数据AI组件',
-    'title': '时序数据AI组件',
-    'sort': 6,
-    'remark': '',
-    'isSealed': -1,
-    'isDeleted': -1,
-    'parentName': '',
-    'hasChildren': false
-  },
-  {
-    'id': '1770647940654727170',
-    'tenantId': '000000',
-    'parentId': '1658394185466220545',
-    'code': 'component_classify',
-    'dictKey': '文本数据AI组件',
-    'dictValue': '文本数据AI组件',
-    'title': '文本数据AI组件',
-    'sort': 7,
-    'remark': '',
-    'isSealed': -1,
-    'isDeleted': -1,
-    'parentName': '',
-    'hasChildren': false
-  },
-  {
-    'id': '1770648447733497858',
-    'tenantId': '000000',
-    'parentId': '1658394185466220545',
-    'code': 'component_classify',
-    'dictKey': '测试组件',
-    'dictValue': '测试组件',
-    'title': '测试组件',
-    'sort': 999,
-    'remark': '',
-    'isSealed': -1,
-    'isDeleted': -1,
-    'parentName': '',
-    'hasChildren': false
-  },
-  {
-    'id': '1938074918032830465',
-    'tenantId': '000000',
-    'parentId': '1658394185466220545',
-    'code': 'component_classify',
-    'dictKey': '监听组件',
-    'dictValue': '监听组件',
-    'title': '监听组件',
-    'sort': 10,
-    'remark': '',
-    'isSealed': -1,
-    'isDeleted': -1,
-    'parentName': '',
-    'hasChildren': false
-  }
-];

src/pages/componentDevelopment/componentTest/testInstance.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Button } from '@arco-design/web-react';
+import { IconLeft } from '@arco-design/web-react/icon';
+
+const TestInstance = ({ instance, onBack }: { instance: any; onBack: () => void }) => {
+  return (
+    <div style={{ padding: 24 }}>
+      <div style={{ marginBottom: 24 }}>
+        <Button icon={<IconLeft />} onClick={onBack}>
+          返回列表
+        </Button>
+      </div>
+      <h1>测试实例: {instance?.name}</h1>
+      <p>实例标识: {instance?.identifier}</p>
+      <p>运行状态: {instance?.runStatus}</p>
+      <p>运行类型: {instance?.runType}</p>
+      {/* 这里添加你的测试实例内容 */}
+    </div>
+  );
+};
+
+export default TestInstance;