feat(componentTest): 添加实例搜索功能并优化界面

src/pages/componentDevelopment/componentTest/index.tsx

@@ -16,6 +16,7 @@ const ComponentTest = () => {
   const [count, setCount] = useState({ total: 0, passed: 0, failed: 0 });
   const [currentView, setCurrentView] = useState<'list' | 'test'>('list');
   const [selectedInstance, setSelectedInstance] = useState<any>(null);
+  const [searchValue, setSearchValue] = useState<string>('');
 
   // 标签配置
   const tagList = [
@@ -82,15 +83,12 @@ const ComponentTest = () => {
             <Space split={<Divider type="vertical" />}>
               <Input
                 prefix={<IconSearch />}
-                placeholder={'搜索'}
+                placeholder={'搜索实例标识或实例名'}
                 style={{ width: 236 }}
+                value={searchValue}
+                onChange={(value) => setSearchValue(value)}
+                allowClear
               />
-              <Button
-                type="primary"
-                style={{ marginLeft: 5, borderRadius: 4 }}
-              >
-                实例指引
-              </Button>
             </Space>
           </div>
           <div className={styles['content']}>
@@ -102,6 +100,7 @@ const ComponentTest = () => {
                 identifier={selectedIdentifier}
                 refreshKey={refreshKey}
                 onGoToTest={handleGoToTest}
+                searchValue={searchValue}
               />
             </div>
           </div>

src/pages/componentDevelopment/componentTest/instanceList.tsx

@@ -4,10 +4,11 @@ import { getTreeComponents } from '@/api/componentTestCase';
 import { runStatusConstant, runStatusDic, runTypeConstant, runTypeDic } from '@/const/isdp/componentDeploy';
 import dayjs from 'dayjs';
 
-const InstanceList = ({ identifier, refreshKey, onGoToTest }: {
+const InstanceList = ({ identifier, refreshKey, onGoToTest, searchValue }: {
   identifier: string;
   refreshKey: number;
   onGoToTest: (instance: any) => void;
+  searchValue?: string;
 }) => {
   const [data, setData] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -39,6 +40,20 @@ const InstanceList = ({ identifier, refreshKey, onGoToTest }: {
     fetchInstanceData(identifier);
   }, [identifier, refreshKey]);
 
+  // 根据搜索值过滤数据
+  const filteredData = React.useMemo(() => {
+    if (!searchValue || searchValue.trim() === '') {
+      return data;
+    }
+
+    const searchTerm = searchValue.toLowerCase().trim();
+    return data.filter((item: any) => {
+      const identifier = (item.identifier || '').toLowerCase();
+      const name = (item.name || '').toLowerCase();
+      return identifier.includes(searchTerm) || name.includes(searchTerm);
+    });
+  }, [data, searchValue]);
+
   // 定义表格列
   const columns: TableColumnProps[] = [
     {
@@ -95,7 +110,7 @@ const InstanceList = ({ identifier, refreshKey, onGoToTest }: {
   return (
     <Table
       columns={columns}
-      data={data}
+      data={filteredData}
       loading={loading}
       pagination={false}
       rowKey="id"