chore: rename web_ui dir to web

web/src/app/home/components/home-sidebar/HomeSidebar.module.css

@@ -0,0 +1,68 @@
+.sidebarContainer {
+    box-sizing: border-box;
+    width: 200px;
+    height: 100vh;
+    background-color: #FFF;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.langbotIconContainer {
+    width: 200px;
+    height: 70px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-evenly;
+
+    .langbotIcon {
+        width: 54px;
+        height: 54px;
+        border-radius: 12px;
+        background: #2288ee;
+        color: #fbfbfb;
+        font-weight: 600;
+        font-size: 36px;
+        line-height: 54px;
+        text-align: center;
+    }
+
+    .langbotText {
+        font-size: 26px;
+    }
+}
+
+
+.sidebarChildContainer {
+    box-sizing: border-box;
+    width: 160px;
+    height: 48px;
+    margin: 12px 0;
+    font-size: 16px;
+    background-color: #fff;
+    border-radius: 12px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
+}
+
+.sidebarSelected {
+    background-color: #2288ee;
+    color: white;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+}
+
+.sidebarUnselected {
+    background-color: white;
+    color: #6C6C6C;
+}
+
+.sidebarChildIcon {
+    width: 28px;
+    height: 28px;
+    margin-left: 16px;
+    margin-right: 6px;
+    background-color: rgba(96, 149, 209, 0);
+}

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

@@ -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>
+  );
+}

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

@@ -0,0 +1,44 @@
+import styles from "./HomeSidebar.module.css";
+
+export interface ISidebarChildVO {
+  id: string;
+  icon: string;
+  name: string;
+  route: string;
+}
+
+export class SidebarChildVO {
+  id: string;
+  icon: string;
+  name: string;
+  route: string;
+
+  constructor(props: ISidebarChildVO) {
+    this.id = props.id;
+    this.icon = props.icon;
+    this.name = props.name;
+    this.route = props.route;
+  }
+}
+
+export function SidebarChild({
+  icon,
+  name,
+  isSelected
+}: {
+  icon: string;
+  name: string;
+  isSelected: boolean;
+}) {
+  return (
+    <div
+      className={`${styles.sidebarChildContainer} ${isSelected ? styles.sidebarSelected : styles.sidebarUnselected}`}
+    >
+      <div className={`${styles.sidebarChildIcon}`} />
+      <div>
+        {icon}
+        {name}
+      </div>
+    </div>
+  );
+}

web/src/app/home/components/home-sidebar/sidbarConfigList.ts

@@ -0,0 +1,28 @@
+import {SidebarChildVO} from "@/app/home/components/home-sidebar/HomeSidebarChild";
+
+export const sidebarConfigList = [
+    new SidebarChildVO({
+        id: "models",
+        name: "模型配置",
+        icon: "",
+        route: "/home/models",
+    }),
+    new SidebarChildVO({
+        id: "bots",
+        name: "机器人",
+        icon: "",
+        route: "/home/bots",
+    }),
+    new SidebarChildVO({
+        id: "pipelines",
+        name: "流水线",
+        icon: "",
+        route: "/home/pipelines",
+    }),
+    new SidebarChildVO({
+        id: "plugins",
+        name: "插件管理",
+        icon: "",
+        route: "/home/plugins",
+    }),
+]