feat: complete plugin installation dialog

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() {
-    installPlugin(githubURL);
-    setModalOpen(false);
-  }
-
-  function installPlugin(url: string) {
-    httpClient
-      .installPluginFromGithub(url)
-      .then(() => {
-        // 安装后重新拉取
-        getPluginList();
-      })
-      .catch((err) => {
-        console.log('error when install plugin:', err);
-      });
-  }
+  useImperativeHandle(ref, () => ({
+    refreshPluginList: getPluginList
+  }));
   
   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;