feat(instance): 实现应用实例列表的操作栏功能

src/pages/instance/index.tsx

@@ -12,7 +12,7 @@ import {
   IconExclamationCircle,
   IconEye
 } from '@arco-design/web-react/icon';
-import { formatInstanceStatus, formatInstanceType, formatTimestamp } from '@/utils/common';
+import { formatInstanceStatus, formatInstanceType, formatTimestamp, formatSeconds } from '@/utils/common';
 import { getInstances } from '@/api/appIns';
 import { getOverviewApp } from '@/api/overview';
 import { getMyAppList } from '@/api/apps';
@@ -48,7 +48,7 @@ const columns: TableColumnProps[] = [
     dataIndex: 'duration',
     render: (col, record, index) => (
       <span>
-        {record.duration}毫秒
+     {record.duration > 1000 ? formatSeconds(`${record.duration / 1000}`) : `${record.duration} 毫秒`}
       </span>
     )
   },
@@ -124,9 +124,17 @@ const Instance = () => {
 
   const Selector = () => {
     return (
-      <Select placeholder="输入搜索应用" style={{ width: 200 }} allowClear showSearch>
-        {searchOptions.map((option, index) => (
-          <Option key={option.id} value={option.name}>
+      <Select
+        placeholder="输入搜索应用"
+        style={{ width: 200 }}
+        allowClear
+        showSearch
+        value={searchParams.appId || undefined}
+        filterOption={(inputValue, option) => option.props.children.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0}
+        onChange={(value) => handleSearchParamChange('appId', value || '')}
+      >
+        {searchOptions.map((option: any, index) => (
+          <Option key={option.id} value={option.id}>
             {option.name}
           </Option>
         ))}
@@ -162,7 +170,13 @@ const Instance = () => {
       }
     ];
     return (
-      <Select placeholder="无" style={{ width: 154 }} allowClear>
+      <Select
+        placeholder="无"
+        style={{ width: 154 }}
+        allowClear
+        value={searchParams.state || undefined}
+        onChange={(value) => handleSearchParamChange('state', value || '')}
+      >
         {stateList.map((option, index) => (
           <Option key={option.value} value={option.value}>
             {option.label}
@@ -174,10 +188,6 @@ const Instance = () => {
 
   const Type = () => {
     const typeDict = [
-      // {
-      //   label: 'HOOK',
-      //   value: 'HOOK',
-      // },
       {
         label: '定时任务',
         value: 'TIMER'
@@ -192,7 +202,13 @@ const Instance = () => {
       }
     ];
     return (
-      <Select placeholder="无" style={{ width: 154 }} allowClear>
+      <Select
+        placeholder="无"
+        style={{ width: 154 }}
+        allowClear
+        value={searchParams.type || undefined}
+        onChange={(value) => handleSearchParamChange('type', value || '')}
+      >
         {typeDict.map((option, index) => (
           <Option key={option.value} value={option.value}>
             {option.label}
@@ -202,16 +218,31 @@ const Instance = () => {
     );
   };
 
+  // 处理搜索参数变化
+  const handleSearchParamChange = (field: string, value: string | boolean) => {
+    const newSearchParams = {
+      ...searchParams,
+      [field]: value
+    };
+    setSearchParams(newSearchParams);
+
+    // 重置到第一页并重新获取数据
+    fetchData({
+      ...newSearchParams,
+      currPage: 1
+    });
+  };
+
   // 获取实例列表和概览数据
   const fetchData = async (params: any = {}) => {
     const requestParams: any = {
-      appId: searchParams.appId,
-      state: searchParams.state,
-      type: searchParams.type,
+      appId: params.appId !== undefined ? params.appId : searchParams.appId,
+      state: params.state !== undefined ? params.state : searchParams.state,
+      type: params.type !== undefined ? params.type : searchParams.type,
       currPage: params.currPage || instanceData.currentPage,
       pageSize: params.pageSize || instanceData.pageSize,
       total: 0,
-      durationDesc: searchParams.durationDesc
+      durationDesc: params.durationDesc !== undefined ? params.durationDesc : searchParams.durationDesc
     };
 
     if (!requestParams.state) delete requestParams.state;
@@ -274,7 +305,10 @@ const Instance = () => {
             </div>
             <div className={styles['handleRow']}>
               <span>运行时长倒序：</span>
-              <Switch />
+              <Switch
+                checked={searchParams.durationDesc}
+                onChange={(checked) => handleSearchParamChange('durationDesc', checked)}
+              />
             </div>
           </Space>
           <Table

src/utils/common.ts

@@ -119,7 +119,9 @@ export function formatInstanceStatus(value: string): string {
       return '删除中';
     case 'DELETED':
       return '已删除';
-    case 'FAILED':
+    case 'PAUSED':
+      return '暂停';
+    case 'FAILURE':
       return '失败';
     case 'SUCCESS':
       return '成功';