Refactor and enhance UI components across the application

- Improved formatting and consistency in BotConfigPage, HomeSidebar, and Plugin components.
- Removed unnecessary Spin component to prevent layout collapse in BotConfigPage.
- Enhanced sidebar selection logic to reflect current URL path in HomeSidebar.
- Updated layout styles for better responsiveness and visual appeal.
- Implemented mock data fetching in PluginMarketComponent for improved testing and development.
- Added pagination and search functionality in PluginMarketComponent.
- Refactored PluginInstalledComponent to streamline plugin list rendering and modal handling.
- Adjusted CSS styles for better alignment and spacing in various components.
- Removed commented-out code in HttpClient for cleaner codebase.
- Enhanced NotFound component layout for better user experience.

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

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