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

- 引入面包屑导航组件优化页面跳转体验 - 新增测试实例页面用于展示具体测试内容 - 实现从实例列表跳转至测试实例的功能 - 添加返回列表按钮便于页面间切换 - 扩展 InstanceList 组件支持前往测试操作 - 更新组件导入列表以支持新增功能模块
2 months ago · 1bb667d98c
parent 6ca6ca34db
commit 1bb667d98c
4 changed files with 110 additions and 192 deletions
--- a/src/pages/componentDevelopment/componentTest/index.tsx
+++ b/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,10 +30,38 @@ 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']}>
+      {/* 面包屑导航 */}
+      {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>
+      )}
+
+      {currentView === 'list' ? (
+        <>
          <div className={styles['header']}>
-        <Group defaultValue={'Beijing'} name="button-radio-group">
+            <Group name="button-radio-group">
              {tagList.map((item) => {
                return (
                  <Radio key={item.label} value={item.label}>
@ -64,9 +96,20 @@ const ComponentTest = () => {
              <SideBar onNodeSelect={handleNodeSelect} getCount={(value) => setCount(value)} />
            </div>
            <div className={styles['right']}>
-          <InstanceList identifier={selectedIdentifier} refreshKey={refreshKey} />
+              <InstanceList
+                identifier={selectedIdentifier}
+                refreshKey={refreshKey}
+                onGoToTest={handleGoToTest}
+              />
            </div>
          </div>
+        </>
+      ) : (
+        <TestInstance
+          instance={selectedInstance}
+          onBack={handleBackToList}
+        />
+      )}
    </div>
  );
 };
--- a/src/pages/componentDevelopment/componentTest/instanceList.tsx
+++ b/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>
          )
        );
--- a/src/pages/componentDevelopment/componentTest/test/data.ts
+++ b/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
-  }
-];
--- a/src/pages/componentDevelopment/componentTest/testInstance.tsx
+++ b/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;