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

@@ -89,8 +89,9 @@ export default function BotConfigPage() {
     }
 
     return (
-        <Spin spinning={isLoading}>
         <div className={styles.configPageContainer}>
+
+            {/* 删除 spin，使用 spin 会导致盒子塌陷。 */}
             <Modal
                 title={isEditForm ? "编辑机器人" : "创建机器人"}
                 centered
@@ -143,7 +144,6 @@ export default function BotConfigPage() {
                             </div>)
                     })}
                     <CreateCardComponent
-                     width={360}
                         height={200}
                         plusSize={90}
                         onClick={handleCreateBotClick}
@@ -151,7 +151,7 @@ export default function BotConfigPage() {
                 </div>
             }
         </div>
-        </Spin>
+
     )
 }
 

web/src/app/home/components/home-sidebar/HomeSidebar.tsx

@@ -1,89 +1,105 @@
-"use client";
+"use client"
 
-import styles from "./HomeSidebar.module.css";
+import styles from "./HomeSidebar.module.css"
 import { useEffect, useState } from "react";
-import {
+import { SidebarChild, SidebarChildVO } from "@/app/home/components/home-sidebar/HomeSidebarChild";
-  SidebarChild,
+import { useRouter, usePathname, useSearchParams } from "next/navigation";
-  SidebarChildVO
-} from "@/app/home/components/home-sidebar/HomeSidebarChild";
-import { useRouter, usePathname } from "next/navigation";
 import { sidebarConfigList } from "@/app/home/components/home-sidebar/sidbarConfigList";
 
 // TODO 侧边导航栏要加动画
 export default function HomeSidebar({
-  onSelectedChangeAction
+    onSelectedChange
 }: {
-  onSelectedChangeAction: (sidebarChild: SidebarChildVO) => void;
+    onSelectedChange: (sidebarChild: SidebarChildVO) => void
 }) {
     // 路由相关
-  const router = useRouter();
+    const router = useRouter()
     const pathname = usePathname();
+    const searchParams = useSearchParams();
     // 路由被动变化时处理
     useEffect(() => {
-    handleRouteChange(pathname);
+        handleRouteChange(pathname)
-  }, [pathname]);
+    }, [pathname, searchParams]);
 
-  const [selectedChild, setSelectedChild] = useState<SidebarChildVO>(
+    const [selectedChild, setSelectedChild] = useState<SidebarChildVO>(sidebarConfigList[0])
-    sidebarConfigList[0]
-  );
 
     useEffect(() => {
-    console.log("HomeSidebar挂载完成");
+        console.log('HomeSidebar挂载完成');
-    initSelect();
+        initSelect()
-    return () => console.log("HomeSidebar卸载");
+        return () => console.log('HomeSidebar卸载');
-    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
 
+
+
     function handleChildClick(child: SidebarChildVO) {
-    setSelectedChild(child);
+        setSelectedChild(child)
-    handleRoute(child);
+        handleRoute(child)
-    onSelectedChangeAction(child);
+        onSelectedChange(child)
     }
 
     function initSelect() {
+        // 根据当前URL路径选择相应的菜单项，而不是总是使用第一个菜单项
+        const currentPath = pathname;
+        const matchedChild = sidebarConfigList.find(child => child.route === currentPath);
+
+        if (matchedChild) {
+            // 如果找到匹配的菜单项，则选择它
+            setSelectedChild(matchedChild);
+            onSelectedChange(matchedChild);
+        } else {
+            // 如果没有匹配项，则回退到默认选择第一个菜单项
             handleChildClick(sidebarConfigList[0]);
         }
+    }
 
     function handleRoute(child: SidebarChildVO) {
-    console.log(child);
+        console.log(child)
-    router.push(`${child.route}`);
+        router.push(`${child.route}`)
     }
 
     function handleRouteChange(pathname: string) {
         // TODO 这段逻辑并不好，未来router封装好后改掉
         // 判断在home下，并且路由更改的是自己的路由子组件则更新UI
-    const routeList = pathname.split("/");
+        const routeList = pathname.split('/')
         if (
             routeList[1] === "home" &&
-      sidebarConfigList.find((childConfig) => childConfig.route === pathname)
+            sidebarConfigList.find(childConfig =>
+                childConfig.route === pathname
+            )
         ) {
-      console.log("find success");
+            console.log("find success")
-      const routeSelectChild = sidebarConfigList.find(
+            const routeSelectChild = sidebarConfigList.find(childConfig =>
-        (childConfig) => childConfig.route === pathname
+                childConfig.route === pathname
-      );
+            )
             if (routeSelectChild) {
-        setSelectedChild(routeSelectChild);
+                setSelectedChild(routeSelectChild)
             }
         }
     }
 
+
     return (
         <div className={`${styles.sidebarContainer}`}>
             {/* LangBot、ICON区域 */}
             <div className={`${styles.langbotIconContainer}`}>
                 {/* icon */}
-        <div className={`${styles.langbotIcon}`}>L</div>
+                <div className={`${styles.langbotIcon}`}>
-        <div className={`${styles.langbotText}`}>Langbot</div>
+                    L
+                </div>
+                <div className={`${styles.langbotText}`}>
+                    Langbot
+                </div>
             </div>
             {/* 菜单列表，后期可升级成配置驱动 */}
             <div>
-        {sidebarConfigList.map((config) => {
+                {
+                    sidebarConfigList.map(config => {
                         return (
                             <div
                                 key={config.id}
                                 onClick={() => {
-                console.log("click:", config.id);
+                                    console.log('click:', config.id)
-                handleChildClick(config);
+                                    handleChildClick(config)
                                 }}
                             >
                                 <SidebarChild
@@ -92,8 +108,10 @@ export default function HomeSidebar({
                                     name={config.name}
                                 />
                             </div>
-          );
+                        )
-        })}
+                    })
+                }
+
             </div>
         </div>
     );

web/src/app/home/layout.module.css

@@ -1,3 +1,4 @@
+/* 主布局容器 */
 .homeLayoutContainer {
     width: 100vw;
     height: 100vh;
@@ -5,14 +6,12 @@
     flex-direction: row;
 }
 
+/* 主内容区域 */
 .main {
+    background-color: #f5f5f7;
+    padding: 0;
+    overflow: auto;
     width: 100%;
     height: 100%;
-    background-color: #FAFBFB;
+    padding: 20px;
-}
-
-.mainContent {
-    width: calc(100% - 40px);
-    height: calc(100% - 110px);
-    margin: 20px;
 }

web/src/app/home/layout.tsx

@@ -1,30 +1,48 @@
-"use client";
+"use client"
 
-import "@ant-design/v5-patch-for-react-19";
+import '@ant-design/v5-patch-for-react-19';
-import styles from "./layout.module.css";
+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}`}>
+    <Layout className={styles.homeLayoutContainer}>
-      <HomeSidebar onSelectedChangeAction={onSelectedChange} />
+      {/* homeLayoutContainer 是整个容器的入口,使用 flex 的左右布局 */}
-      <div className={`${styles.main}`}>
+
+      <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>
+        <Content className={styles.main}>
-      </div>
+          {/* mainContent 为主页面 */}
-    </div>
+          {children}
-  );
+        </Content>
+      </Layout>
+    </Layout>
+  )
 }

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

@@ -14,8 +14,7 @@ export default function PluginConfigPage() {
     const [nowPageType, setNowPageType] = useState(PageType.INSTALLED)
 
     return (
-        <div className={`${styles.pageContainer}`}>
+        <div className={styles.pageContainer}>
-            <div>
             <Radio.Group
                 block
                 options={[
@@ -26,21 +25,13 @@ export default function PluginConfigPage() {
                 value={nowPageType}
                 optionType="button"
                 buttonStyle="solid"
+                style={{ marginBottom: '20px' }}
                 onChange={(e) => {
-                        // 这里静态类型检测有问题
+                    setNowPageType(e.target.value as PageType)
-                        setNowPageType(e.target.value)
                 }}
             />
-            </div>
-            <div className={`${styles.pageContainer}`}>
-                {
-                    nowPageType === PageType.INSTALLED && <PluginInstalledComponent/>
-                }
-                {
-                    nowPageType === PageType.MARKET && <PluginMarketComponent/>
-                }
-            </div>
 
+            {nowPageType === PageType.INSTALLED ? <PluginInstalledComponent /> : <PluginMarketComponent />}
         </div>
     );
 }

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 [pluginList, setPluginList] = useState<PluginCardVO[]>([])
-  const [modalOpen, setModalOpen] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false)
-  const [githubURL, setGithubURL] = useState("");
+  const [githubURL, setGithubURL] = useState("")
+
 
   useEffect(() => {
-    initData();
+    initData()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
-  }, []);
 
   function initData() {
-    getPluginList();
+    getPluginList().then((value) => {
+      setPluginList(value)
+    })
   }
 
-  function getPluginList() {
+  async function getPluginList() {
-    httpClient.getPlugins().then((value) => {
+    return [
-      setPluginList(
+      new PluginCardVO({
-        value.plugins.map((plugin) => {
+        description: "一般的描述",
-          return new PluginCardVO({
-            author: plugin.author,
-            description: plugin.description.zh_CN,
         handlerCount: 0,
-            name: plugin.name,
+        name: "插件AAA",
-            version: plugin.version,
+        author: "/hana",
-            isInitialized: plugin.status === "initialized"
+        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);
+    installPlugin(githubURL)
-    setModalOpen(false);
+    setModalOpen(false)
   }
 
   function installPlugin(url: string) {
-    httpClient
+    // TODO 接安装Plugin的接口
-      .installPluginFromGithub(url)
+    console.log("installPlugin: ", url)
-      .then(() => {
-        // 安装后重新拉取
-        getPluginList();
-      })
-      .catch((err) => {
-        console.log("error when install plugin:", err);
-      });
   }
   return (
     <div className={`${styles.pluginListContainer}`}>
@@ -63,8 +230,8 @@ export default function PluginInstalledComponent() {
           <div className={`${styles.modalTitle}`}>
             <GithubOutlined
               style={{
-                fontSize: "30px",
+                fontSize: '30px',
-                marginRight: "20px"
+                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 (
+        pluginList.map((vo, index) => {
-          <div key={index}>
+          return <div key={index}>
             <PluginCardComponent cardVO={vo} />
           </div>
-        );
+        })
-      })}
+      }
       <CreateCardComponent
-        width={360}
         height={140}
         plusSize={90}
         onClick={() => {
-          setModalOpen(true);
+          setModalOpen(true)
         }}
       />
     </div>
-  );
+  )
 }

web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx

@@ -1,32 +1,13 @@
-import styles from "./pluginCard.module.css";
+import styles from "./pluginCard.module.css"
 import { PluginCardVO } from "@/app/home/plugins/plugin-installed/PluginCardVO";
-import { GithubOutlined, LinkOutlined, ToolOutlined } from "@ant-design/icons";
+import { GithubOutlined, LinkOutlined, ToolOutlined } from '@ant-design/icons';
-import { Switch, Tag } from "antd";
+import { Tag } from 'antd'
-import { useState } from "react";
-import { httpClient } from "@/app/infra/http/HttpClient";
 
 export default function PluginCardComponent({
     cardVO
 }: {
-  cardVO: PluginCardVO;
+    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(() => {
-        setInitialized(!initialized);
-      })
-      .catch((err) => {
-        console.log("error: ", err);
-      })
-      .finally(() => {
-        setSwitchEnable(true);
-      });
-  }
     return (
         <div className={`${styles.cardContainer}`}>
             {/*  header  */}
@@ -35,7 +16,10 @@ export default function PluginCardComponent({
                 <div className={`${styles.fontGray}`}>{cardVO.author}</div>
                 {/*  right icon & version  */}
                 <div className={`${styles.iconVersionContainer}`}>
-          <GithubOutlined style={{ fontSize: "26px" }} type="setting" />
+                    <GithubOutlined
+                        style={{ fontSize: '26px' }}
+                        type="setting"
+                    />
                     <Tag color="#108ee9">v{cardVO.version}</Tag>
                 </div>
             </div>
@@ -48,18 +32,16 @@ export default function PluginCardComponent({
             <div className={`${styles.cardFooter}`}>
                 <div className={`${styles.linkSettingContainer}`}>
                     <div className={`${styles.link}`}>
-            <LinkOutlined style={{ fontSize: "22px" }} />
+                        <LinkOutlined
+                            style={{ fontSize: '22px' }}
+                        />
                         <span>1</span>
                     </div>
-          <ToolOutlined style={{ fontSize: "22px" }} />
+                    <ToolOutlined
-        </div>
+                        style={{ fontSize: '22px' }}
-
-        <Switch
-          value={initialized}
-          onClick={handleEnable}
-          disabled={!switchEnable}
                     />
                 </div>
             </div>
+        </div>
     );
 }

web/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css

@@ -1,5 +1,6 @@
 .cardContainer {
-    width: 360px;
+    width: 100%;
+    /* 修改为 100% 以撑满整个网格单元 */
     height: 140px;
     box-sizing: border-box;
     background-color: #FFF;
@@ -40,10 +41,6 @@
 .cardFooter {
     width: 90%;
     height: 30px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
 }
 
 

web/src/app/home/plugins/plugin-market/PluginMarketComponent.tsx

@@ -1,87 +1,127 @@
-"use client";
+"use client"
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import styles from "@/app/home/plugins/plugins.module.css";
 import { PluginMarketCardVO } from "@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardVO";
 import PluginMarketCardComponent from "@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent";
 import { Input, Pagination } from "antd";
-import { spaceClient } from "@/app/infra/http/HttpClient";
+import { debounce } from "lodash"
 
 export default function PluginMarketComponent() {
-  const [marketPluginList, setMarketPluginList] = useState<
+    const [marketPluginList, setMarketPluginList] = useState<PluginMarketCardVO[]>([])
-    PluginMarketCardVO[]
+    const [searchKeyword, setSearchKeyword] = useState("")
-  >([]);
+    const [currentPage, setCurrentPage] = useState(1)
-  const [totalCount, setTotalCount] = useState(0);
+    const [totalItems, setTotalItems] = useState(0)
-  const [nowPage, setNowPage] = useState(1);
+    const [loading, setLoading] = useState(false)
-  const [searchKeyword, setSearchKeyword] = useState("");
+    const pageSize = 10 // 每页显示的项目数量
 
     useEffect(() => {
-    initData();
+        fetchPlugins(searchKeyword, currentPage)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currentPage])
-  }, []);
 
-  function initData() {
+    // 获取插件列表，整合了搜索和分页功能
-    getPluginList();
+    async function fetchPlugins(keyword: string = "", page: number = 1): Promise<void> {
+        setLoading(true)
+        try {
+            // 实际应用中，这里应该调用API获取数据
+            const result = await mockFetchPlugins(keyword, page, pageSize)
+            setMarketPluginList(result.data)
+            setTotalItems(result.total)
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    // 模拟从API获取数据
+    async function mockFetchPlugins(keyword: string, page: number, pageSize: number): Promise<{ data: PluginMarketCardVO[], total: number }> {
+        // 模拟API延迟
+        await new Promise(resolve => setTimeout(resolve, 300))
+
+        // 创建模拟数据
+        const allPlugins: PluginMarketCardVO[] = []
+        const totalPlugins = 50 // 模拟总数据量
+
+        for (let i = 0; i < totalPlugins; i++) {
+            allPlugins.push(new PluginMarketCardVO({
+                pluginId: `plugin-${i}`,
+                description: `这是插件 ${i} 的描述，包含一些详细信息`,
+                name: `插件 ${i}`,
+                author: `/author-${i % 5}`, // 模拟5个不同的作者
+                version: `0.${i % 10}`,
+                githubURL: `https://github.com/author-${i % 5}/plugin-${i}`,
+                starCount: 10 + Math.floor(Math.random() * 100)
+            }))
+        }
+
+        // 根据关键词过滤
+        const filtered = keyword
+            ? allPlugins.filter(p =>
+                p.name.toLowerCase().includes(keyword.toLowerCase()) ||
+                p.description.toLowerCase().includes(keyword.toLowerCase()))
+            : allPlugins
+
+        // 分页处理
+        const start = (page - 1) * pageSize
+        const end = start + pageSize
+        const paginatedData = filtered.slice(start, end)
+
+        return {
+            data: paginatedData,
+            total: filtered.length
+        }
     }
 
     function onInputSearchKeyword(keyword: string) {
-    // 这里记得加防抖，暂时没加
+        setSearchKeyword(keyword)
-    setSearchKeyword(keyword);
+        setCurrentPage(1) // 搜索时重置为第一页
-    setNowPage(1);
+        debounceSearch(keyword)
-    getPluginList(1, keyword);
     }
 
-  function getPluginList(
+    const debounceSearch = useCallback(
-    page: number = nowPage,
+        debounce((keyword: string) => {
-    keyword: string = searchKeyword
+            fetchPlugins(keyword, 1)
-  ) {
+        }, 500), []
-    spaceClient.getMarketPlugins(page, 10, keyword).then((res) => {
-      setMarketPluginList(
-        res.plugins.map(
-          (marketPlugin) =>
-            new PluginMarketCardVO({
-              author: marketPlugin.author,
-              description: marketPlugin.description,
-              githubURL: marketPlugin.repository,
-              name: marketPlugin.name,
-              pluginId: String(marketPlugin.ID),
-              starCount: marketPlugin.stars
-            })
     )
-      );
+
-      setTotalCount(res.total);
+    function handlePageChange(page: number) {
-      console.log("market plugins:", res);
+        setCurrentPage(page)
-    });
     }
 
     return (
         <div className={`${styles.marketComponentBody}`}>
             <Input
                 style={{
-          width: "300px",
+                    width: '300px',
-          marginTop: "10px"
+                    marginBottom: '10px',
                 }}
                 value={searchKeyword}
                 placeholder="搜索插件"
                 onChange={(e) => onInputSearchKeyword(e.target.value)}
             />
             <div className={`${styles.pluginListContainer}`}>
-        {marketPluginList.map((vo, index) => {
+                {loading ? (
-          return (
+                    <div style={{ textAlign: 'center', padding: '20px' }}>加载中...</div>
-            <div key={index}>
+                ) : marketPluginList.length === 0 ? (
+                    <div style={{ textAlign: 'center', padding: '20px' }}>没有找到匹配的插件</div>
+                ) : (
+                    marketPluginList.map((vo, index) => (
+                        <div key={`${vo.pluginId}-${index}`}>
                             <PluginMarketCardComponent cardVO={vo} />
                         </div>
-          );
+                    ))
-        })}
+                )}
             </div>
+            {totalItems > 0 && (
+                <div style={{ display: 'flex', justifyContent: 'center', width: '100%', marginTop: '20px' }}>
                     <Pagination
-        defaultCurrent={1}
+                        current={currentPage}
-        total={totalCount}
+                        total={totalItems}
-        onChange={(pageNumber) => {
+                        pageSize={pageSize}
-          setNowPage(pageNumber);
+                        onChange={handlePageChange}
-          getPluginList(pageNumber);
+                        showSizeChanger={false}
-        }}
                     />
                 </div>
-  );
+            )}
+        </div>
+    )
 }

web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardVO.ts

@@ -5,6 +5,7 @@ export interface IPluginMarketCardVO {
     description: string,
     starCount: number,
     githubURL: string,
+    version: string,
 }
 
 export class PluginMarketCardVO implements IPluginMarketCardVO {
@@ -14,6 +15,7 @@ export class PluginMarketCardVO implements IPluginMarketCardVO {
     author: string;
     githubURL: string;
     starCount: number;
+    version: string;
 
     constructor(prop: IPluginMarketCardVO) {
         this.description = prop.description
@@ -22,5 +24,6 @@ export class PluginMarketCardVO implements IPluginMarketCardVO {
         this.githubURL = prop.githubURL
         this.starCount = prop.starCount
         this.pluginId = prop.pluginId
+        this.version = prop.version
     }
 }

web/src/app/home/plugins/plugin-market/plugin-market-card/pluginMarketCard.module.css

@@ -1,6 +1,4 @@
 .cardContainer {
-    width: 360px;
-    height: 140px;
     box-sizing: border-box;
     background-color: #FFF;
     border-radius: 9px;

web/src/app/home/plugins/plugins.module.css

@@ -1,8 +1,8 @@
 .pageContainer {
     width: 100%;
-    height: calc(100% - 30px);
 }
 
+
 .marketComponentBody {
     width: 100%;
     height: calc(100% - 60px);
@@ -11,17 +11,13 @@
 .pluginListContainer {
     align-self: flex-start;
     justify-self: flex-start;
-    width: calc(100% - 60px);
-    height: 100%;
-    max-height: 100%;
     margin: auto;
     display: grid;
     grid-template-rows: repeat(auto-fill, minmax(160px, 1fr));
     grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
     gap: 15px;
-    justify-items: center;
+    /* justify-items: center; */
     align-items: center;
-    overflow-y: scroll;
 }
 
 .modalTitle {

web/src/app/infra/basic-component/create-card-component/CreateCardComponent.tsx

@@ -1,12 +1,10 @@
 import styles from "./createCartComponent.module.css";
 
 export default function CreateCardComponent({
-    width,
     height,
     plusSize,
     onClick,
 }: {
-    width: number;
     height: number;
     plusSize: number;
     onClick: () => void
@@ -15,7 +13,7 @@ export default function CreateCardComponent({
         <div
             className={`${styles.cardContainer} ${styles.createCardContainer} `}
             style={{
-                width: `${width}px`,
+                width: `100%`,
                 height: `${height}px`,
                 fontSize: `${plusSize}px`
             }}

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

@@ -129,9 +129,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;

web/src/app/not-found.tsx

@@ -10,8 +10,10 @@ export default function NotFound() {
     const router = useRouter();
 
     return (
-        <Layout style={{ height: '100vh', display: 'flex', background: 'white', justifyContent: 'center' }}>            <Row justify="center" align="middle" style={{ minHeight: '100vh' }}>
+        <Layout style={{ minHeight: '100vh', background: 'white' }}>
-            <div className="error-container" style={{ width: '100%', textAlign: 'center' }}>
+            <Row justify="center" align="middle" style={{ minHeight: '100vh' }}>
+                <Col xs={22} sm={20} md={18} lg={14} xl={10}>
+                    <div className="error-container" style={{ width: '100%', padding: '20px 0', textAlign: 'center' }}>
                         <div className="error-card" style={{
                             display: 'flex',
                             flexDirection: 'column',
@@ -69,6 +71,7 @@ export default function NotFound() {
                             </div>
                         </div>
                     </div>
+                </Col>
             </Row>
         </Layout>
     );