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/components/home-sidebar/HomeSidebar.tsx

@@ -1,100 +1,118 @@
-"use client";
+"use client"
 
-import styles from "./HomeSidebar.module.css";
+import styles from "./HomeSidebar.module.css"
 import { useEffect, useState } from "react";
-import {
-  SidebarChild,
-  SidebarChildVO
-} from "@/app/home/components/home-sidebar/HomeSidebarChild";
-import { useRouter, usePathname } from "next/navigation";
+import { SidebarChild, SidebarChildVO } from "@/app/home/components/home-sidebar/HomeSidebarChild";
+import { useRouter, usePathname, useSearchParams } 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 pathname = usePathname();
-  // 路由被动变化时处理
-  useEffect(() => {
-    handleRouteChange(pathname);
-  }, [pathname]);
+    // 路由相关
+    const router = useRouter()
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    // 路由被动变化时处理
+    useEffect(() => {
+        handleRouteChange(pathname)
+    }, [pathname, searchParams]);
 
-  const [selectedChild, setSelectedChild] = useState<SidebarChildVO>(
-    sidebarConfigList[0]
-  );
+    const [selectedChild, setSelectedChild] = useState<SidebarChildVO>(sidebarConfigList[0])
 
-  useEffect(() => {
-    console.log("HomeSidebar挂载完成");
-    initSelect();
-    return () => console.log("HomeSidebar卸载");
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    useEffect(() => {
+        console.log('HomeSidebar挂载完成');
+        initSelect()
+        return () => console.log('HomeSidebar卸载');
+    }, []);
 
-  function handleChildClick(child: SidebarChildVO) {
-    setSelectedChild(child);
-    handleRoute(child);
-    onSelectedChangeAction(child);
-  }
 
-  function initSelect() {
-    handleChildClick(sidebarConfigList[0]);
-  }
 
-  function handleRoute(child: SidebarChildVO) {
-    console.log(child);
-    router.push(`${child.route}`);
-  }
-
-  function handleRouteChange(pathname: string) {
-    // TODO 这段逻辑并不好，未来router封装好后改掉
-    // 判断在home下，并且路由更改的是自己的路由子组件则更新UI
-    const routeList = pathname.split("/");
-    if (
-      routeList[1] === "home" &&
-      sidebarConfigList.find((childConfig) => childConfig.route === pathname)
-    ) {
-      console.log("find success");
-      const routeSelectChild = sidebarConfigList.find(
-        (childConfig) => childConfig.route === pathname
-      );
-      if (routeSelectChild) {
-        setSelectedChild(routeSelectChild);
-      }
+    function handleChildClick(child: SidebarChildVO) {
+        setSelectedChild(child)
+        handleRoute(child)
+        onSelectedChange(child)
     }
-  }
 
-  return (
-    <div className={`${styles.sidebarContainer}`}>
-      {/* LangBot、ICON区域 */}
-      <div className={`${styles.langbotIconContainer}`}>
-        {/* icon */}
-        <div className={`${styles.langbotIcon}`}>L</div>
-        <div className={`${styles.langbotText}`}>Langbot</div>
-      </div>
-      {/* 菜单列表，后期可升级成配置驱动 */}
-      <div>
-        {sidebarConfigList.map((config) => {
-          return (
-            <div
-              key={config.id}
-              onClick={() => {
-                console.log("click:", config.id);
-                handleChildClick(config);
-              }}
-            >
-              <SidebarChild
-                isSelected={selectedChild.id === config.id}
-                icon={config.icon}
-                name={config.name}
-              />
+    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)
+        router.push(`${child.route}`)
+    }
+
+    function handleRouteChange(pathname: string) {
+        // TODO 这段逻辑并不好，未来router封装好后改掉
+        // 判断在home下，并且路由更改的是自己的路由子组件则更新UI
+        const routeList = pathname.split('/')
+        if (
+            routeList[1] === "home" &&
+            sidebarConfigList.find(childConfig =>
+                childConfig.route === pathname
+            )
+        ) {
+            console.log("find success")
+            const routeSelectChild = sidebarConfigList.find(childConfig =>
+                childConfig.route === pathname
+            )
+            if (routeSelectChild) {
+                setSelectedChild(routeSelectChild)
+            }
+        }
+    }
+
+
+    return (
+        <div className={`${styles.sidebarContainer}`}>
+            {/* LangBot、ICON区域 */}
+            <div className={`${styles.langbotIconContainer}`}>
+                {/* icon */}
+                <div className={`${styles.langbotIcon}`}>
+                    L
+                </div>
+                <div className={`${styles.langbotText}`}>
+                    Langbot
+                </div>
             </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
+            {/* 菜单列表，后期可升级成配置驱动 */}
+            <div>
+                {
+                    sidebarConfigList.map(config => {
+                        return (
+                            <div
+                                key={config.id}
+                                onClick={() => {
+                                    console.log('click:', config.id)
+                                    handleChildClick(config)
+                                }}
+                            >
+                                <SidebarChild
+                                    isSelected={selectedChild.id === config.id}
+                                    icon={config.icon}
+                                    name={config.name}
+                                />
+                            </div>
+                        )
+                    })
+                }
+
+            </div>
+        </div>
+    );
+}