chore: rename web_ui dir to web

2026-08-09 12:40:59 +00:00 · 2025-04-28 21:41:03 +08:00
parent 5c74bb41c9
commit 2eaac168dc
81 changed files with 0 additions and 1 deletions
@@ -0,0 +1,100 @@
+"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 } from "next/navigation";
+import { sidebarConfigList } from "@/app/home/components/home-sidebar/sidbarConfigList";
+
+// TODO 侧边导航栏要加动画
+export default function HomeSidebar({
+  onSelectedChangeAction
+}: {
+  onSelectedChangeAction: (sidebarChild: SidebarChildVO) => void;
+}) {
+  // 路由相关
+  const router = useRouter();
+  const pathname = usePathname();
+  // 路由被动变化时处理
+  useEffect(() => {
+    handleRouteChange(pathname);
+  }, [pathname]);
+
+  const [selectedChild, setSelectedChild] = useState<SidebarChildVO>(
+    sidebarConfigList[0]
+  );
+
+  useEffect(() => {
+    console.log("HomeSidebar挂载完成");
+    initSelect();
+    return () => console.log("HomeSidebar卸载");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  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);
+      }
+    }
+  }
+
+  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>
+  );
+}