feat: webUI2.0 前端介面更新

1. 剩余登陆注册未完成 2. 剩余插件列表&市场未完成
2026-09-04 00:27:14 +00:00 · 2025-03-26 17:01:22 +08:00
parent 8511432dee
commit 453237aef8
97 changed files with 9757 additions and 9332 deletions
@@ -0,0 +1,107 @@
+"use client"
+
+import styles from "./HomeSidebar.module.css"
+import {useEffect, useState} from "react";
+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({
+    onSelectedChange
+}: {
+    onSelectedChange: (sidebarChild: SidebarChildVO) => void
+}) {
+    // 路由相关
+    const router = useRouter()
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    // 路由被动变化时处理
+    useEffect(() => {
+        handleRouteChange(pathname)
+    }, [pathname, searchParams]);
+
+    const [selectedChild, setSelectedChild] = useState<SidebarChildVO>(sidebarConfigList[0])
+
+    useEffect(() => {
+        console.log('HomeSidebar挂载完成');
+        initSelect()
+        return () => console.log('HomeSidebar卸载');
+    }, []);
+
+
+
+    function handleChildClick(child: SidebarChildVO) {
+        setSelectedChild(child)
+        handleRoute(child)
+        onSelectedChange(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)
+            }
+        }
+    }
+
+
+    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}
+                                />
+                            </div>
+                        )
+                    })
+                }
+
+            </div>
+        </div>
+    );
+}