修改依赖操作状态判断

src/pages/dependence/index.tsx

@@ -36,22 +36,12 @@ import { SharedContext } from '@/layouts';
 import useTableScrollHeight from '@/hooks/useTableScrollHeight';
 import dayjs from 'dayjs';
 import WebSocketManager from '@/utils/websocket';
-import { DependenceStatus } from './type';
+import { DependenceStatus, Status } from './type';
 import IconFont from '@/components/iconfont';
 
 const { Text } = Typography;
 const { Search } = Input;
 
-enum Status {
-  '安装中',
-  '已安装',
-  '安装失败',
-  '删除中',
-  '已删除',
-  '删除失败',
-  '队列中',
-}
-
 enum StatusColor {
   'processing',
   'success',
@@ -186,23 +176,24 @@ const Dependence = () => {
         const isPc = !isPhone;
         return (
           <Space size="middle">
-            <Tooltip title={isPc ? intl.get('日志') : ''}>
-              <a
-                onClick={() => {
-                  setLogDependence({ ...record, timestamp: Date.now() });
-                }}
-              >
-                <FileTextOutlined />
-              </a>
-            </Tooltip>
-            {[Status.队列中, Status.安装中].includes(record.status) && (
+            {![Status.队列中].includes(record.status) && (
+              <Tooltip title={isPc ? intl.get('日志') : ''}>
+                <a
+                  onClick={() => {
+                    setLogDependence({ ...record, timestamp: Date.now() });
+                  }}
+                >
+                  <FileTextOutlined />
+                </a>
+              </Tooltip>
+            )}
+            {[Status.队列中, Status.安装中, Status.删除中].includes(record.status) ? (
               <Tooltip title={isPc ? intl.get('取消安装') : ''}>
                 <a onClick={() => cancelDependence(record)}>
                   <IconFont type="ql-icon-quxiaoanzhuang" />
                 </a>
               </Tooltip>
-            )}
-            {![Status.安装中, Status.删除中].includes(record.status) && (
+            ) : (
               <>
                 <Tooltip title={isPc ? intl.get('重新安装') : ''}>
                   <a onClick={() => reInstallDependence(record, index)}>
@@ -487,7 +478,7 @@ const Dependence = () => {
             }
             return _result;
           });
-        }, 5000);
+        }, 300);
         return;
       }
     }

src/pages/dependence/logModal.tsx

@@ -10,6 +10,7 @@ import {
 import { PageLoading } from '@ant-design/pro-layout';
 import Ansi from 'ansi-to-react';
 import WebSocketManager from '@/utils/websocket';
+import { Status } from './type';
 
 const DependenceLogModal = ({
   dependence,
@@ -96,7 +97,11 @@ const DependenceLogModal = ({
 
   const handleMessage = (payload: any) => {
     const { message, references } = payload;
-    if (references.length > 0 && references.includes(dependence.id)) {
+    if (
+      references.length > 0 &&
+      references.includes(dependence.id) &&
+      [Status.删除中, Status.安装中].includes(dependence.status)
+    ) {
       if (message.includes('结束时间')) {
         setExecuting(false);
         setIsRemoveFailed(message.includes('删除失败'));
@@ -108,11 +113,13 @@ const DependenceLogModal = ({
   useEffect(() => {
     const ws = WebSocketManager.getInstance();
     ws.subscribe('installDependence', handleMessage);
+    ws.subscribe('uninstallDependence', handleMessage);
 
     return () => {
       ws.unsubscribe('installDependence', handleMessage);
+      ws.unsubscribe('uninstallDependence', handleMessage);
     };
-  }, []);
+  }, [dependence]);
 
   useEffect(() => {
     setIsPhone(document.body.clientWidth < 768);

src/pages/dependence/type.ts

@@ -7,3 +7,13 @@ export enum DependenceStatus {
   'removeFailed',
   'queued',
 }
+
+export enum Status {
+  '安装中',
+  '已安装',
+  '安装失败',
+  '删除中',
+  '已删除',
+  '删除失败',
+  '队列中',
+}