feat: complete plugin installation dialog

web/src/app/home/components/home-titlebar/HomeTittleBar.module.css

@@ -1,6 +1,7 @@
 .titleBarContainer {
     width: 100%;
-    height: 6rem;
+    padding-top: 0.8rem;
+    height: 4rem;
     opacity: 1;
     font-size: 20px;
     display: flex;

web/src/app/home/plugins/page.tsx

@@ -1,12 +1,66 @@
 'use client';
-import PluginInstalledComponent from '@/app/home/plugins/plugin-installed/PluginInstalledComponent';
+import PluginInstalledComponent, { PluginInstalledComponentRef } from '@/app/home/plugins/plugin-installed/PluginInstalledComponent';
 import PluginMarketComponent from '@/app/home/plugins/plugin-market/PluginMarketComponent';
 import styles from './plugins.module.css';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Button } from "@/components/ui/button";
 import { PlusIcon } from "lucide-react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { GithubIcon } from "lucide-react";
+import { useState, useRef, useEffect } from 'react';
+import { httpClient } from '@/app/infra/http/HttpClient';
+
+enum PluginInstallStatus {
+  WAIT_INPUT = 'wait_input',
+  INSTALLING = 'installing',
+  ERROR = 'error',
+}
 
 export default function PluginConfigPage() {
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const [pluginInstallStatus, setPluginInstallStatus] = useState<PluginInstallStatus>(PluginInstallStatus.WAIT_INPUT);
+  const [installError, setInstallError] = useState<string | null>(null);
+  const [githubURL, setGithubURL] = useState('');
+  const pluginInstalledRef = useRef<PluginInstalledComponentRef>(null);
+
+  function handleModalConfirm() {
+    installPlugin(githubURL);
+  }
+  function installPlugin(url: string) {
+    setPluginInstallStatus(PluginInstallStatus.INSTALLING);
+    httpClient
+      .installPluginFromGithub(url)
+      .then((resp) => {
+        const taskId = resp.task_id;
+
+        // 每秒拉取一次任务状态
+        const interval = setInterval(() => {
+          httpClient.getAsyncTask(taskId).then((resp) => {
+            console.log('task status:', resp);
+            if (resp.runtime.done) {
+              clearInterval(interval);
+              if (resp.runtime.exception) {
+                setInstallError(resp.runtime.exception);
+                setPluginInstallStatus(PluginInstallStatus.ERROR);
+              } else { // success
+                setGithubURL('');
+                setModalOpen(false);
+                pluginInstalledRef.current?.refreshPluginList();
+              }
+            }
+          });
+        }, 1000);
+        
+      })
+      .catch((err) => {
+        console.log('error when install plugin:', err);
+        setInstallError(err.message);
+        setPluginInstallStatus(PluginInstallStatus.ERROR);
+      });
+  }
+
   return (
     <div className={styles.pageContainer}>
       <Tabs defaultValue="installed" className="w-full">
@@ -18,19 +72,68 @@ export default function PluginConfigPage() {
           </TabsList>
 
           <div className='flex flex-row justify-end items-center'>
-            <Button variant="default" className='px-6 py-4'>
+            <Button variant="default" className='px-6 py-4' onClick={() => {
+              setModalOpen(true);
+              setPluginInstallStatus(PluginInstallStatus.WAIT_INPUT);
+              setInstallError(null);
+            }}>
               <PlusIcon className='w-4 h-4' />
               安装
             </Button>
           </div>
         </div>
         <TabsContent value="installed">
-          <PluginInstalledComponent />
+          <PluginInstalledComponent ref={pluginInstalledRef} />
         </TabsContent>
         <TabsContent value="market">
           <PluginMarketComponent />
         </TabsContent>
       </Tabs>
+
+
+      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+        <DialogContent className="w-[500px] p-6">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-4">
+              <GithubIcon className="size-6" />
+              <span>从GitHub安装插件</span>
+            </DialogTitle>
+          </DialogHeader>
+          {pluginInstallStatus === PluginInstallStatus.WAIT_INPUT && (
+          <div className="mt-4">
+            <p className="mb-2">目前仅支持从 GitHub 安装</p>
+            <Input
+              placeholder="请输入插件的Github链接"
+              value={githubURL}
+              onChange={(e) => setGithubURL(e.target.value)}
+              className="mb-4"
+            />
+            </div>
+          )}
+          {pluginInstallStatus === PluginInstallStatus.INSTALLING && (
+            <div className="mt-4">
+              <p className="mb-2">正在安装插件...</p>
+            </div>
+          )}
+          {pluginInstallStatus === PluginInstallStatus.ERROR && (
+            <div className="mt-4">
+              <p className="mb-2">插件安装失败：</p>
+              <p className="mb-2 text-red-500">{installError}</p>
+            </div>
+          )}
+          <DialogFooter>
+            {pluginInstallStatus === PluginInstallStatus.WAIT_INPUT && (
+              <>
+                <Button variant="outline" onClick={() => setModalOpen(false)}>取消</Button>
+                <Button onClick={handleModalConfirm}>确认</Button>
+              </>
+            )}
+            {pluginInstallStatus === PluginInstallStatus.ERROR && (
+              <Button variant="default" onClick={() => setModalOpen(false)}>关闭</Button>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

web/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, forwardRef, useImperativeHandle } from 'react';
 import CreateCardComponent from '@/app/infra/basic-component/create-card-component/CreateCardComponent';
 import { PluginCardVO } from '@/app/home/plugins/plugin-installed/PluginCardVO';
 import PluginCardComponent from '@/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent';
@@ -17,10 +17,12 @@ import {
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 
-export default function PluginInstalledComponent() {
+export interface PluginInstalledComponentRef {
+  refreshPluginList: () => void;
+}
+
+const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>((props, ref) => {
   const [pluginList, setPluginList] = useState<PluginCardVO[]>([]);
-  const [modalOpen, setModalOpen] = useState(false);
-  const [githubURL, setGithubURL] = useState('');
 
   useEffect(() => {
     initData();
@@ -48,48 +50,12 @@ export default function PluginInstalledComponent() {
     });
   }
 
-  function handleModalConfirm() {
+  useImperativeHandle(ref, () => ({
-    installPlugin(githubURL);
+    refreshPluginList: getPluginList
-    setModalOpen(false);
+  }));
-  }
-
-  function installPlugin(url: string) {
-    httpClient
-      .installPluginFromGithub(url)
-      .then(() => {
-        // 安装后重新拉取
-        getPluginList();
-      })
-      .catch((err) => {
-        console.log('error when install plugin:', err);
-      });
-  }
   
   return (
     <div className={`${styles.pluginListContainer}`}>
-      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
-        <DialogContent className="w-[500px] p-6">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-4">
-              <GithubIcon className="size-6" />
-              <span>从GitHub安装插件</span>
-            </DialogTitle>
-          </DialogHeader>
-          <div className="mt-4">
-            <p className="mb-2">目前仅支持从 GitHub 安装</p>
-            <Input
-              placeholder="请输入插件的Github链接"
-              value={githubURL}
-              onChange={(e) => setGithubURL(e.target.value)}
-              className="mb-4"
-            />
-          </div>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setModalOpen(false)}>取消</Button>
-            <Button onClick={handleModalConfirm}>确认</Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
       
       {pluginList.map((vo, index) => {
         return (
@@ -98,14 +64,8 @@ export default function PluginInstalledComponent() {
           </div>
         );
       })}
-      
-      <CreateCardComponent
-        height={'140px'}
-        plusSize={'90px'}
-        onClick={() => {
-          setModalOpen(true);
-        }}
-      />
     </div>
   );
-}
+});
+
+export default PluginInstalledComponent;

web/src/app/infra/entities/api/index.ts

@@ -168,10 +168,6 @@ export interface ApiRespAsyncTasks {
   tasks: AsyncTask[];
 }
 
-export interface ApiRespAsyncTask {
-  task: AsyncTask;
-}
-
 export interface AsyncTaskRuntimeInfo {
   done: boolean;
   exception?: string;

web/src/app/infra/http/HttpClient.ts

@@ -24,11 +24,11 @@ import {
   AsyncTaskCreatedResp,
   ApiRespSystemInfo,
   ApiRespAsyncTasks,
-  ApiRespAsyncTask,
   ApiRespUserToken,
   MarketPluginResponse,
   GetPipelineResponseData,
-  GetPipelineMetadataResponseData
+  GetPipelineMetadataResponseData,
+  AsyncTask
 } from '@/app/infra/entities/api';
 import { notification } from 'antd';
 
@@ -391,7 +391,7 @@ class HttpClient {
     return this.get('/api/v1/system/tasks');
   }
 
-  public getAsyncTask(id: number): Promise<ApiRespAsyncTask> {
+  public getAsyncTask(id: number): Promise<AsyncTask> {
     return this.get(`/api/v1/system/tasks/${id}`);
   }