修改依赖安装初始状态

back/data/dependence.ts

@@ -28,6 +28,7 @@ export enum DependenceStatus {
   'removing',
   'removed',
   'removeFailed',
+  'queued',
 }
 
 export enum DependenceTypes {

back/loaders/initData.ts

@@ -42,7 +42,7 @@ export default async () => {
     raw: true,
   }).then(async (docs) => {
     await DependenceModel.update(
-      { status: DependenceStatus.installing, log: [] },
+      { status: DependenceStatus.queued, log: [] },
       { where: { id: docs.map((x) => x.id!) } },
     );
     dependenceService.installDependenceOneByOne(docs);

back/services/dependence.ts

@@ -24,7 +24,7 @@ export default class DependenceService {
 
   public async create(payloads: Dependence[]): Promise<Dependence[]> {
     const tabs = payloads.map((x) => {
-      const tab = new Dependence({ ...x, status: DependenceStatus.installing });
+      const tab = new Dependence({ ...x, status: DependenceStatus.queued });
       return tab;
     });
     const docs = await this.insert(tabs);
@@ -45,7 +45,7 @@ export default class DependenceService {
     const tab = new Dependence({
       ...doc,
       ...other,
-      status: DependenceStatus.installing,
+      status: DependenceStatus.queued,
     });
     const newDoc = await this.updateDb(tab);
     this.installDependenceOneByOne([newDoc]);
@@ -59,7 +59,7 @@ export default class DependenceService {
 
   public async remove(ids: number[], force = false): Promise<Dependence[]> {
     await DependenceModel.update(
-      { status: DependenceStatus.removing, log: [] },
+      { status: DependenceStatus.queued, log: [] },
       { where: { id: ids } },
     );
     const docs = await DependenceModel.findAll({ where: { id: ids } });
@@ -105,17 +105,24 @@ export default class DependenceService {
     force: boolean = false,
   ) {
     concurrentRun(
-      docs.map(
-        (dep) => async () =>
-          await this.installOrUninstallDependencies([dep], isInstall, force),
-      ),
+      docs.map((dep) => async () => {
+        const status = isInstall
+          ? DependenceStatus.installing
+          : DependenceStatus.removing;
+        await DependenceModel.update({ status }, { where: { id: dep.id } });
+        return await this.installOrUninstallDependencies(
+          [dep],
+          isInstall,
+          force,
+        );
+      }),
       1,
     );
   }
 
   public async reInstall(ids: number[]): Promise<Dependence[]> {
     await DependenceModel.update(
-      { status: DependenceStatus.installing, log: [] },
+      { status: DependenceStatus.queued, log: [] },
       { where: { id: ids } },
     );
 
@@ -132,7 +139,9 @@ export default class DependenceService {
     return docs;
   }
 
-  public async getDb(query:  FindOptions<Dependence>['where']): Promise<Dependence> {
+  public async getDb(
+    query: FindOptions<Dependence>['where'],
+  ): Promise<Dependence> {
     const doc: any = await DependenceModel.findOne({ where: { ...query } });
     return doc && (doc.get({ plain: true }) as Dependence);
   }

src/pages/dependence/index.tsx

@@ -19,6 +19,8 @@ import {
   DeleteFilled,
   BugOutlined,
   FileTextOutlined,
+  CloseCircleOutlined,
+  ClockCircleOutlined,
 } from '@ant-design/icons';
 import config from '@/utils/config';
 import { PageContainer } from '@ant-design/pro-layout';
@@ -42,6 +44,7 @@ enum Status {
   '删除中',
   '已删除',
   '删除失败',
+  '队列中',
 }
 
 enum StatusColor {
@@ -50,6 +53,37 @@ enum StatusColor {
   'error',
 }
 
+const StatusMap: Record<number, { icon: React.ReactNode; color: string }> = {
+  0: {
+    icon: <SyncOutlined spin />,
+    color: 'processing',
+  },
+  1: {
+    icon: <CheckCircleOutlined />,
+    color: 'success',
+  },
+  2: {
+    icon: <CloseCircleOutlined />,
+    color: 'error',
+  },
+  3: {
+    icon: <SyncOutlined spin />,
+    color: 'processing',
+  },
+  4: {
+    icon: <CheckCircleOutlined />,
+    color: 'success',
+  },
+  5: {
+    icon: <CloseCircleOutlined />,
+    color: 'error',
+  },
+  6: {
+    icon: <ClockCircleOutlined />,
+    color: 'default',
+  },
+};
+
 const Dependence = () => {
   const { headerStyle, isPhone, socketMessage } =
     useOutletContext<SharedContext>();
@@ -74,7 +108,8 @@ const Dependence = () => {
         return (
           <Space size="middle" style={{ cursor: 'text' }}>
             <Tag
-              color={StatusColor[record.status % 3]}
+              color={StatusMap[record.status].color}
+              icon={StatusMap[record.status].icon}
               style={{ marginRight: 0 }}
             >
               {Status[record.status]}
@@ -366,6 +401,23 @@ const Dependence = () => {
   useEffect(() => {
     if (!socketMessage) return;
     const { type, message, references } = socketMessage;
+    if (
+      type === 'installDependence' &&
+      message.includes('开始时间') &&
+      references.length > 0
+    ) {
+      const result = [...value];
+      for (let i = 0; i < references.length; i++) {
+        const index = value.findIndex((x) => x.id === references[i]);
+        if (index !== -1) {
+          result.splice(index, 1, {
+            ...value[index],
+            status: message.includes('安装') ? Status.安装中 : Status.删除中,
+          });
+        }
+      }
+      setValue(result);
+    }
     if (
       type === 'installDependence' &&
       message.includes('结束时间') &&