合并冲突

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

@@ -1,4 +1,4 @@
-"use client"
+"use client";
 
 import { useEffect, useState } from "react";
 import styles from "./botConfig.module.css";
@@ -8,40 +8,43 @@ import { BotCardVO } from "@/app/home/bots/components/bot-card/BotCardVO";
 import { Modal, notification, Spin } from "antd";
 import BotForm from "@/app/home/bots/components/bot-form/BotForm";
 import BotCard from "@/app/home/bots/components/bot-card/BotCard";
-import CreateCardComponent from "@/app/infra/basic-component/create-card-component/CreateCardComponent"
+import CreateCardComponent from "@/app/infra/basic-component/create-card-component/CreateCardComponent";
 import { httpClient } from "@/app/infra/http/HttpClient";
 import { Bot } from "@/app/infra/api/api-types";
 
 export default function BotConfigPage() {
   const router = useRouter();
-    const [pageShowRule, setPageShowRule] = useState<BotConfigPageShowRule>(BotConfigPageShowRule.NO_BOT)
+  const [pageShowRule, setPageShowRule] = useState<BotConfigPageShowRule>(
+    BotConfigPageShowRule.NO_BOT
+  );
   const [modalOpen, setModalOpen] = useState<boolean>(false);
-    const [botList, setBotList] = useState<BotCardVO[]>([])
+  const [botList, setBotList] = useState<BotCardVO[]>([]);
-    const [isEditForm, setIsEditForm] = useState(false)
+  const [isEditForm, setIsEditForm] = useState(false);
-    const [nowSelectedBotCard, setNowSelectedBotCard] = useState<BotCardVO>()
+  const [nowSelectedBotCard, setNowSelectedBotCard] = useState<BotCardVO>();
-    const [isLoading, setIsLoading] = useState(false)
+  const [isLoading, setIsLoading] = useState(false);
-
 
   useEffect(() => {
     // TODO：补齐加载转圈逻辑
-        setIsLoading(true)
+    setIsLoading(true);
     checkHasLLM().then((hasLLM) => {
       if (hasLLM) {
-                getBotList()
+        getBotList();
       } else {
-                setPageShowRule(BotConfigPageShowRule.NO_LLM)
+        setPageShowRule(BotConfigPageShowRule.NO_LLM);
-                setIsLoading(false)
+        setIsLoading(false);
       }
-        })
+    });
-    }, [])
+  }, []);
 
   async function checkHasLLM(): Promise<boolean> {
     // NOT IMPL
-        return true
+    return true;
   }
 
   function getBotList() {
-        httpClient.getBots().then((resp) => {
+    httpClient
+      .getBots()
+      .then((resp) => {
         const botList: BotCardVO[] = resp.bots.map((bot: Bot) => {
           return new BotCardVO({
             adapter: bot.adapter,
@@ -49,49 +52,50 @@ export default function BotConfigPage() {
             id: bot.uuid || "",
             name: bot.name,
             updateTime: bot.updated_at || "",
-                    pipelineName: bot.use_pipeline_name || "",
+            pipelineName: bot.use_pipeline_name || ""
-                })
+          });
-            })
+        });
         if (botList.length === 0) {
-                setPageShowRule(BotConfigPageShowRule.NO_BOT)
+          setPageShowRule(BotConfigPageShowRule.NO_BOT);
         } else {
-                setPageShowRule(BotConfigPageShowRule.HAVE_BOT)
+          setPageShowRule(BotConfigPageShowRule.HAVE_BOT);
         }
-            setBotList(botList)
+        setBotList(botList);
-        }).catch((err) => {
+      })
-            console.error("get bot list error", err)
+      .catch((err) => {
+        console.error("get bot list error", err);
         // TODO HACK: need refactor to hook mode Notification, but it's not working under render
         notification.error({
           message: "获取机器人列表失败",
           description: err.message,
-                placement: "bottomRight",
+          placement: "bottomRight"
-            })
+        });
-        }).finally(() => {
-            setIsLoading(false)
       })
+      .finally(() => {
+        setIsLoading(false);
+      });
   }
 
   function handleCreateBotClick() {
-        setIsEditForm(false)
+    setIsEditForm(false);
-        setNowSelectedCard(undefined)
+    setNowSelectedCard(undefined);
     setModalOpen(true);
   }
 
   function setNowSelectedCard(cardVO: BotCardVO | undefined) {
-        setNowSelectedBotCard(cardVO)
+    setNowSelectedBotCard(cardVO);
   }
 
   function selectBot(cardVO: BotCardVO) {
-        setIsEditForm(true)
+    setIsEditForm(true);
-        setNowSelectedCard(cardVO)
+    setNowSelectedCard(cardVO);
-        console.log("set now vo", cardVO)
+    console.log("set now vo", cardVO);
-        setModalOpen(true)
+    setModalOpen(true);
   }
 
   return (
     <div className={styles.configPageContainer}>
-
+      <Spin spinning={isLoading} tip="加载中..." size="large">
-            {/* 删除 spin，使用 spin 会导致盒子塌陷。 */}
         <Modal
           title={isEditForm ? "编辑机器人" : "创建机器人"}
           centered
@@ -105,13 +109,13 @@ export default function BotConfigPage() {
           <BotForm
             initBotId={nowSelectedBotCard?.id}
             onFormSubmit={() => {
-                        getBotList()
+              getBotList();
-                        setModalOpen(false)
+              setModalOpen(false);
             }}
             onFormCancel={() => setModalOpen(false)}
           />
         </Modal>
-            {pageShowRule === BotConfigPageShowRule.NO_LLM &&
+        {pageShowRule === BotConfigPageShowRule.NO_LLM && (
           <EmptyAndCreateComponent
             title={"需要先创建大模型才能配置机器人哦～"}
             subTitle={"快去创建一个吧！"}
@@ -120,28 +124,31 @@ export default function BotConfigPage() {
               router.push("/home/models");
             }}
           />
-            }
+        )}
 
-            {pageShowRule === BotConfigPageShowRule.NO_BOT &&
+        {pageShowRule === BotConfigPageShowRule.NO_BOT && (
           <EmptyAndCreateComponent
             title={"您还未配置机器人哦～"}
             subTitle={"快去创建一个吧！"}
             buttonText={"创建机器人 +"}
             onButtonClick={handleCreateBotClick}
           />
-            }
+        )}
-
+      </Spin>
-            {pageShowRule === BotConfigPageShowRule.HAVE_BOT &&
+      {/* 注意：其余的返回内容需要保持在Spin组件外部 */}
-                <div className={`${styles.botListContainer}`}
+      {pageShowRule === BotConfigPageShowRule.HAVE_BOT && (
-                >
+        <div className={`${styles.botListContainer}`}>
-                    {botList.map(cardVO => {
+          {botList.map((cardVO) => {
             return (
               <div
                 key={cardVO.id}
-                                onClick={() => { selectBot(cardVO) }}
+                onClick={() => {
+                  selectBot(cardVO);
+                }}
               >
                 <BotCard botCardVO={cardVO} />
-                            </div>)
+              </div>
+            );
           })}
           <CreateCardComponent
             height={200}
@@ -149,14 +156,13 @@ export default function BotConfigPage() {
             onClick={handleCreateBotClick}
           />
         </div>
-            }
+      )}
     </div>
-
+  );
-    )
 }
 
 enum BotConfigPageShowRule {
   NO_LLM,
   NO_BOT,
-    HAVE_BOT,
+  HAVE_BOT
 }

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

@@ -1,228 +1,60 @@
-"use client"
+"use client";
 
+import { useState, useEffect } from "react";
 import CreateCardComponent from "@/app/infra/basic-component/create-card-component/CreateCardComponent";
 import { PluginCardVO } from "@/app/home/plugins/plugin-installed/PluginCardVO";
-import { useEffect, useState } from "react";
 import PluginCardComponent from "@/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent";
 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";
 
 export default function PluginInstalledComponent() {
-  const [pluginList, setPluginList] = useState<PluginCardVO[]>([])
+  const [pluginList, setPluginList] = useState<PluginCardVO[]>([]);
-  const [modalOpen, setModalOpen] = useState(false)
+  const [modalOpen, setModalOpen] = useState(false);
-  const [githubURL, setGithubURL] = useState("")
+  const [githubURL, setGithubURL] = useState("");
-
 
   useEffect(() => {
     initData();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, []);
 
   function initData() {
-    getPluginList().then((value) => {
+    getPluginList();
-      setPluginList(value)
-    })
   }
 
-  async function getPluginList() {
+  function getPluginList() {
-    return [
+    httpClient.getPlugins().then((value) => {
-      new PluginCardVO({
+      setPluginList(
-        description: "一般的描述",
+        value.plugins.map((plugin) => {
+          return new PluginCardVO({
+            author: plugin.author,
+            description: plugin.description.zh_CN,
             handlerCount: 0,
-        name: "插件AAA",
+            name: plugin.name,
-        author: "/hana",
+            version: plugin.version,
-        version: "0.1",
+            isInitialized: plugin.status === "initialized"
-        isInitialized: false
+          });
-      }),
+        })
-      new PluginCardVO({
+      );
-        description: "一般的描述",
+    });
-        handlerCount: 0,
-        name: "插件AAA",
-        author: "/hana",
-        version: "0.1",
-        isInitialized: false
-      }),
-      new PluginCardVO({
-        description: "一般的描述",
-        handlerCount: 0,
-        name: "插件AAA",
-        author: "/hana",
-        version: "0.1",
-        isInitialized: false
-      }),
-      new PluginCardVO({
-        description: "一般的描述",
-        handlerCount: 0,
-        name: "插件AAA",
-        author: "/hana",
-        version: "0.1",
-        isInitialized: false
-      }),
-      new PluginCardVO({
-        description: "一般的描述",
-        handlerCount: 0,
-        name: "插件AAA",
-        author: "/hana",
-        version: "0.1",
-        isInitialized: false
-      }),
-      new PluginCardVO({
-        description: "一般的描述",
-        handlerCount: 0,
-        name: "插件AAA",
-        author: "/hana",
-        version: "0.1",
-        isInitialized: false
-      }),
-      new PluginCardVO({
-        description: "一般的描述",
-        handlerCount: 0,
-        name: "插件AAA",
-        author: "/hana",
-        version: "0.1",
-        isInitialized: false
-      }),
-      new PluginCardVO({
-        description: "一般的描述",
-        handlerCount: 0,
-        name: "插件AAA",
-        author: "/hana",
-        version: "0.1",
-        isInitialized: false
-      }),
-      new PluginCardVO({
-        description: "一般的描述",
-        handlerCount: 0,
-        name: "插件AAA",
-        author: "/hana",
-        version: "0.1",
-        isInitialized: false
-      }),
-      new PluginCardVO({
-        description: "一般的描述",
-        handlerCount: 0,
-        name: "插件AAA",
-        author: "/hana",
-        version: "0.1",
-        isInitialized: false
-      }),
-      new PluginCardVO({
-        description: "一般的描述",
-        handlerCount: 0,
-        name: "插件AAA",
-        author: "/hana",
-        version: "0.1",
-        isInitialized: false
-      }),
-      new PluginCardVO({
-        description: "一般的描述",
-        handlerCount: 0,
-        name: "插件AAA",
-        author: "/hana",
-        version: "0.1",
-        isInitialized: false
-      }),
-      new PluginCardVO({
-        description: "一般的描述",
-        handlerCount: 0,
-        name: "插件AAA",
-        author: "/hana",
-        version: "0.1",
-        isInitialized: false
-      }),
-      new PluginCardVO({
-        description: "一般的描述",
-        handlerCount: 0,
-        name: "插件AAA",
-        author: "/hana",
-        version: "0.1",
-        isInitialized: false
-      }),
-      new PluginCardVO({
-        description: "一般的描述",
-        handlerCount: 0,
-        name: "插件AAA",
-        author: "/hana",
-        version: "0.1",
-        isInitialized: false
-      }),
-      new PluginCardVO({
-        description: "一般的描述",
-        handlerCount: 0,
-        name: "插件AAA",
-        author: "/hana",
-        version: "0.1",
-        isInitialized: false
-      }),
-      new PluginCardVO({
-        description: "一般的描述",
-        handlerCount: 0,
-        name: "插件AAA",
-        author: "/hana",
-        version: "0.1",
-        isInitialized: false
-      }),
-      new PluginCardVO({
-        description: "一般的描述",
-        handlerCount: 0,
-        name: "插件AAA",
-        author: "/hana",
-        version: "0.1",
-        isInitialized: false
-      }),
-      new PluginCardVO({
-        description: "一般的描述",
-        handlerCount: 0,
-        name: "插件AAA",
-        author: "/hana",
-        version: "0.1",
-        isInitialized: false
-      }),
-      new PluginCardVO({
-        description: "一般的描述",
-        handlerCount: 0,
-        name: "插件AAA",
-        author: "/hana",
-        version: "0.1",
-        isInitialized: false
-      }),
-      new PluginCardVO({
-        description: "一般的描述",
-        handlerCount: 0,
-        name: "插件AAA",
-        author: "/hana",
-        version: "0.1",
-        isInitialized: false
-      }),
-      new PluginCardVO({
-        description: "一般的描述",
-        handlerCount: 0,
-        name: "插件AAA",
-        author: "/hana",
-        version: "0.1",
-        isInitialized: false
-      }), new PluginCardVO({
-        description: "一般的描述",
-        handlerCount: 0,
-        name: "插件AAA",
-        author: "/hana",
-        version: "0.1",
-        isInitialized: false
-      }),
-
-
-    ]
   }
 
   function handleModalConfirm() {
-    installPlugin(githubURL)
+    installPlugin(githubURL);
-    setModalOpen(false)
+    setModalOpen(false);
   }
 
   function installPlugin(url: string) {
-    // TODO 接安装Plugin的接口
+    httpClient
-    console.log("installPlugin: ", url)
+      .installPluginFromGithub(url)
+      .then(() => {
+        // 安装后重新拉取
+        getPluginList();
+      })
+      .catch((err) => {
+        console.log("error when install plugin:", err);
+      });
   }
   return (
     <div className={`${styles.pluginListContainer}`}>
@@ -231,25 +63,19 @@ export default function PluginInstalledComponent() {
           <div className={`${styles.modalTitle}`}>
             <GithubOutlined
               style={{
-                fontSize: '30px',
+                fontSize: "30px",
-                marginRight: '20px'
+                marginRight: "20px"
               }}
-              type="setting"
             />
-            <span>从 GitHub 安装插件</span>
           </div>
         }
-        centered
         open={modalOpen}
-        onOk={() => handleModalConfirm()}
+        onOk={handleModalConfirm}
         onCancel={() => setModalOpen(false)}
-        width={500}
         destroyOnClose={true}
       >
         <div className={`${styles.modalBody}`}>
-          <div>
+          <div>目前仅支持从 GitHub 安装</div>
-            目前仅支持从 GitHub 安装
-          </div>
           <Input
             placeholder="请输入插件的Github链接"
             value={githubURL}
@@ -257,20 +83,20 @@ export default function PluginInstalledComponent() {
           />
         </div>
       </Modal>
-      {
+      {pluginList.map((vo, index) => {
-        pluginList.map((vo, index) => {
+        return (
-          return <div key={index}>
+          <div key={index}>
             <PluginCardComponent cardVO={vo} />
           </div>
-        })
+        );
-      }
+      })}
       <CreateCardComponent
         height={140}
         plusSize={90}
         onClick={() => {
-          setModalOpen(true)
+          setModalOpen(true);
         }}
       />
     </div>
-  )
+  );
 }

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

@@ -26,7 +26,8 @@ import {
   ApiRespSystemInfo,
   ApiRespAsyncTasks,
   ApiRespAsyncTask,
-  ApiRespUserToken, MarketPluginResponse
+  ApiRespUserToken,
+  MarketPluginResponse
 } from "../api/api-types";
 import { notification } from "antd";
 
@@ -50,22 +51,19 @@ export interface RequestConfig extends AxiosRequestConfig {
 
 class HttpClient {
   private instance: AxiosInstance;
-  private disableToken: boolean = false
+  private disableToken: boolean = false;
   // 暂不需要SSR
   // private ssrInstance: AxiosInstance | null = null
 
-  constructor(
+  constructor(baseURL?: string, disableToken?: boolean) {
-      baseURL?: string,
-      disableToken?: boolean
-  ) {
     this.instance = axios.create({
       baseURL: baseURL || this.getBaseUrl(),
       timeout: 15000,
       headers: {
-        "Content-Type": "application/json",
+        "Content-Type": "application/json"
       }
     });
-    this.disableToken = disableToken || false
+    this.disableToken = disableToken || false;
     this.initInterceptors();
   }
 
@@ -129,9 +127,9 @@ class HttpClient {
           const errMessage = data?.message || error.message;
 
           switch (status) {
-            case 401:
+            // case 401:
-              window.location.href = "/login";
+            //   window.location.href = "/login";
-              break;
+            //   break;
             case 403:
               console.error("Permission denied:", errMessage);
               break;
@@ -358,7 +356,7 @@ class HttpClient {
   public getMarketPlugins(
     page: number,
     page_size: number,
-    query: string,
+    query: string
   ): Promise<MarketPluginResponse> {
     return this.post(`/api/v1/market/plugins`, {
       page,
@@ -366,7 +364,7 @@ class HttpClient {
       query,
       sort_by: "stars",
       sort_order: "DESC"
-    })
+    });
   }
   public installPluginFromGithub(
     source: string
@@ -415,4 +413,4 @@ class HttpClient {
 export const httpClient = new HttpClient("https://version-4.langbot.dev");
 
 // 临时写法，未来两种Client都继承自HttpClient父类，不允许共享方法
-export const spaceClient = new HttpClient("https://space.langbot.app")
+export const spaceClient = new HttpClient("https://space.langbot.app");