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/bots/botConfig.module.css

@@ -13,7 +13,7 @@
     align-self: flex-start;
     justify-self: flex-start;
     width: calc(100% - 60px);
-    margin:  auto;
+    margin: auto;
     display: grid;
     grid-template-rows: repeat(auto-fill, minmax(220px, 1fr));
     grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));

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

@@ -1,15 +1,15 @@
 "use client"
 
-import {useEffect, useState} from "react";
+import { useEffect, useState } from "react";
 import styles from "./botConfig.module.css";
 import EmptyAndCreateComponent from "@/app/home/components/empty-and-create-component/EmptyAndCreateComponent";
-import {useRouter} from "next/navigation";
-import {BotCardVO} from "@/app/home/bots/components/bot-card/BotCardVO";
-import {Modal, notification, Spin} from "antd";
+import { useRouter } from "next/navigation";
+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 {httpClient} from "@/app/infra/http/HttpClient";
+import { httpClient } from "@/app/infra/http/HttpClient";
 import { Bot } from "@/app/infra/api/api-types";
 
 export default function BotConfigPage() {
@@ -89,8 +89,9 @@ export default function BotConfigPage() {
     }
 
     return (
-        <Spin spinning={isLoading}>
         <div className={styles.configPageContainer}>
+
+            {/* 删除 spin，使用 spin 会导致盒子塌陷。 */}
             <Modal
                 title={isEditForm ? "编辑机器人" : "创建机器人"}
                 centered
@@ -122,36 +123,35 @@ export default function BotConfigPage() {
             }
 
             {pageShowRule === BotConfigPageShowRule.NO_BOT &&
-                 <EmptyAndCreateComponent
-                     title={"您还未配置机器人哦～"}
-                     subTitle={"快去创建一个吧！"}
-                     buttonText={"创建机器人 +"}
-                     onButtonClick={handleCreateBotClick}
-                 />
+                <EmptyAndCreateComponent
+                    title={"您还未配置机器人哦～"}
+                    subTitle={"快去创建一个吧！"}
+                    buttonText={"创建机器人 +"}
+                    onButtonClick={handleCreateBotClick}
+                />
             }
 
             {pageShowRule === BotConfigPageShowRule.HAVE_BOT &&
-             <div className={`${styles.botListContainer}`}
-             >
-                 {botList.map(cardVO => {
-                     return (
-                     <div
-                         key={cardVO.id}
-                         onClick={() => {selectBot(cardVO)}}
-                     >
-                        <BotCard botCardVO={cardVO} />
-                     </div>)
-                 })}
-                 <CreateCardComponent
-                     width={360}
-                     height={200}
-                     plusSize={90}
-                     onClick={handleCreateBotClick}
-                 />
-             </div>
+                <div className={`${styles.botListContainer}`}
+                >
+                    {botList.map(cardVO => {
+                        return (
+                            <div
+                                key={cardVO.id}
+                                onClick={() => { selectBot(cardVO) }}
+                            >
+                                <BotCard botCardVO={cardVO} />
+                            </div>)
+                    })}
+                    <CreateCardComponent
+                        height={200}
+                        plusSize={90}
+                        onClick={handleCreateBotClick}
+                    />
+                </div>
             }
         </div>
-        </Spin>
+
     )
 }