From a6836c723ad359d36c6190ef8945ecafd2fd88fb Mon Sep 17 00:00:00 2001
From: HYana <g329736345@gmail.com>
Date: Mon, 28 Apr 2025 20:45:06 +0800
Subject: [PATCH] feat: finish toggle plugin

---
 .../plugins/plugin-installed/PluginCardVO.ts  |  3 +++
 .../PluginInstalledComponent.tsx              |  4 ++--
 .../plugin-card/PluginCardComponent.tsx       | 23 ++++++++++++++++++-
 .../plugin-card/pluginCard.module.css         |  4 ++++
 web_ui/src/app/infra/api/api-types/index.ts   |  2 +-
 web_ui/src/app/infra/http/HttpClient.ts       |  2 +-
 6 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/web_ui/src/app/home/plugins/plugin-installed/PluginCardVO.ts b/web_ui/src/app/home/plugins/plugin-installed/PluginCardVO.ts
index 768624d7..00f05543 100644
--- a/web_ui/src/app/home/plugins/plugin-installed/PluginCardVO.ts
+++ b/web_ui/src/app/home/plugins/plugin-installed/PluginCardVO.ts
@@ -4,6 +4,7 @@ export interface IPluginCardVO {
     name: string,
     description: string,
     handlerCount: number,
+    isInitialized: boolean,
 }
 
 export class PluginCardVO implements IPluginCardVO {
@@ -12,6 +13,7 @@ export class PluginCardVO implements IPluginCardVO {
     name: string;
     author: string;
     version: string;
+    isInitialized: boolean;
 
     constructor(prop: IPluginCardVO) {
         this.description = prop.description
@@ -19,6 +21,7 @@ export class PluginCardVO implements IPluginCardVO {
         this.name = prop.name
         this.author = prop.author
         this.version = prop.version
+        this.isInitialized = prop.isInitialized
     }
 
 }
diff --git a/web_ui/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx b/web_ui/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx
index 34333887..8aa8b8f0 100644
--- a/web_ui/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx
+++ b/web_ui/src/app/home/plugins/plugin-installed/PluginInstalledComponent.tsx
@@ -8,7 +8,6 @@ import styles from "@/app/home/plugins/plugins.module.css";
 import {Modal, Input} from "antd";
 import {GithubOutlined} from "@ant-design/icons";
 import {httpClient} from "@/app/infra/http/HttpClient";
-import * as http from "node:http";
 
 export default function PluginInstalledComponent () {
     const [pluginList, setPluginList] = useState<PluginCardVO[]>([])
@@ -32,7 +31,8 @@ export default function PluginInstalledComponent () {
                     description: plugin.description.zh_CN,
                     handlerCount: 0,
                     name: plugin.name,
-                    version: plugin.version
+                    version: plugin.version,
+                    isInitialized: plugin.status === "initialized",
                 })
             }))
         })
diff --git a/web_ui/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx b/web_ui/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx
index 1c4511c7..b8a2c784 100644
--- a/web_ui/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx
+++ b/web_ui/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx
@@ -1,13 +1,28 @@
 import styles from "./pluginCard.module.css"
 import {PluginCardVO} from "@/app/home/plugins/plugin-installed/PluginCardVO";
 import {GithubOutlined, LinkOutlined, ToolOutlined} from '@ant-design/icons';
-import {Tag} from 'antd'
+import {Switch, Tag} from 'antd'
+import {useState} from "react";
+import {httpClient} from "@/app/infra/http/HttpClient";
 
 export default function PluginCardComponent({
     cardVO
 }: {
     cardVO: PluginCardVO
 }) {
+    const [initialized, setInitialized] = useState(cardVO.isInitialized)
+    const [switchEnable, setSwitchEnable] = useState(true)
+
+    function handleEnable() {
+        setSwitchEnable(false)
+        httpClient.togglePlugin(cardVO.author, cardVO.name, !initialized).then(result => {
+            setInitialized(!initialized)
+        }).catch(err => {
+            console.log("error: ", err)
+        }).finally(() => {
+            setSwitchEnable(true)
+        })
+    }
     return (
         <div className={`${styles.cardContainer}`}>
             {/*  header  */}
@@ -41,6 +56,12 @@ export default function PluginCardComponent({
                         style={{fontSize: '22px'}}
                     />
                 </div>
+
+                <Switch
+                    value={initialized}
+                    onClick={handleEnable}
+                    disabled={!switchEnable}
+                />
             </div>
         </div>
     );
diff --git a/web_ui/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css b/web_ui/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css
index 44ed2665..81ad489a 100644
--- a/web_ui/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css
+++ b/web_ui/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css
@@ -40,6 +40,10 @@
 .cardFooter {
     width: 90%;
     height: 30px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
 }
 
 
diff --git a/web_ui/src/app/infra/api/api-types/index.ts b/web_ui/src/app/infra/api/api-types/index.ts
index 9a94fbad..5059529d 100644
--- a/web_ui/src/app/infra/api/api-types/index.ts
+++ b/web_ui/src/app/infra/api/api-types/index.ts
@@ -193,7 +193,7 @@ export interface MarketPlugin {
     artifacts_path: string
     stars: number
     downloads: number
-    status: "synced" | string // 可根据实际状态值扩展联合类型
+    status: "initialized" | "mounted" // 可根据实际状态值扩展联合类型
     synced_at: string
     pushed_at: string // 最后一次代码推送时间
 }
diff --git a/web_ui/src/app/infra/http/HttpClient.ts b/web_ui/src/app/infra/http/HttpClient.ts
index 15efe49e..a8bb53cc 100644
--- a/web_ui/src/app/infra/http/HttpClient.ts
+++ b/web_ui/src/app/infra/http/HttpClient.ts
@@ -339,7 +339,7 @@ class HttpClient {
     name: string,
     target_enabled: boolean
   ): Promise<object> {
-    return this.post(`/api/v1/plugins/${author}/${name}/toggle`, {
+    return this.put(`/api/v1/plugins/${author}/${name}/toggle`, {
       target_enabled
     });
   }