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/layout.tsx

@@ -1,30 +1,48 @@
-"use client";
+"use client"
 
-import "@ant-design/v5-patch-for-react-19";
-import styles from "./layout.module.css";
+import '@ant-design/v5-patch-for-react-19';
+import styles from "./layout.module.css"
 import HomeSidebar from "@/app/home/components/home-sidebar/HomeSidebar";
 import HomeTitleBar from "@/app/home/components/home-titlebar/HomeTitleBar";
 import React, { useState } from "react";
 import { SidebarChildVO } from "@/app/home/components/home-sidebar/HomeSidebarChild";
+import { useRouter } from 'next/navigation';
+import { Layout } from 'antd';
+
+const { Sider, Content } = Layout;
 
 export default function HomeLayout({
   children
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  const [title, setTitle] = useState<string>("");
+  const router = useRouter();
+  const [title, setTitle] = useState<string>("")
   const onSelectedChange = (child: SidebarChildVO) => {
-    setTitle(child.name);
-  };
+    setTitle(child.name)
+  }
 
   return (
-    <div className={`${styles.homeLayoutContainer}`}>
-      <HomeSidebar onSelectedChangeAction={onSelectedChange} />
-      <div className={`${styles.main}`}>
+    <Layout className={styles.homeLayoutContainer}>
+      {/* homeLayoutContainer 是整个容器的入口,使用 flex 的左右布局 */}
+
+      <Sider className="left">
+        <HomeSidebar
+          onSelectedChange={onSelectedChange}
+        />
+        {/* HomeSidebar 为侧边栏 */}
+      </Sider>
+
+      <Layout className="right">
+        {/* right 为内容显示区域，right使用 flex 上下布局，right 使用 flex 布局吃掉剩余部分 */}
+
         <HomeTitleBar title={title} />
-        {/* 主页面 */}
-        <div className={`${styles.mainContent}`}>{children}</div>
-      </div>
-    </div>
-  );
+
+        <Content className={styles.main}>
+          {/* mainContent 为主页面 */}
+          {children}
+        </Content>
+      </Layout>
+    </Layout>
+  )
 }