chore: rename web_ui dir to web

web/src/app/home/components/dynamic-form/DynamicFormComponent.tsx

@@ -0,0 +1,30 @@
+import {IDynamicFormItemConfig} from "@/app/home/components/dynamic-form/DynamicFormItemConfig";
+import {Form, FormInstance} from "antd";
+import DynamicFormItemComponent from "@/app/home/components/dynamic-form/DynamicFormItemComponent";
+
+export default function DynamicFormComponent({
+    form,
+    itemConfigList,
+    onSubmit,
+}: {
+    form: FormInstance<object>
+    itemConfigList: IDynamicFormItemConfig[]
+    onSubmit?: (val: object) => unknown
+}) {
+    return (
+        <Form
+            form={form}
+            onFinish={onSubmit}
+            layout={"vertical"}
+        >
+            {
+                itemConfigList.map(config =>
+                    <DynamicFormItemComponent
+                        key={config.id}
+                        config={config}
+                    />
+                )
+            }
+        </Form>
+    )
+}

web/src/app/home/components/dynamic-form/DynamicFormItemComponent.tsx

@@ -0,0 +1,38 @@
+import {Form, Input, InputNumber, Select, Switch} from "antd";
+import {DynamicFormItemType, IDynamicFormItemConfig} from "@/app/home/components/dynamic-form/DynamicFormItemConfig";
+
+export default function DynamicFormItemComponent({
+    config
+}: {
+    config: IDynamicFormItemConfig
+}) {
+    return (
+        <Form.Item
+            label={config.label.zh_CN}
+            name={config.name}
+            rules={[{required: config.required, message: "该项为必填项哦～"}]}
+            initialValue={config.default}
+        >
+            {
+                config.type === DynamicFormItemType.INT &&
+                <InputNumber/>
+            }
+
+            {
+                config.type === DynamicFormItemType.STRING &&
+                <Input/>
+            }
+
+            {
+                config.type === DynamicFormItemType.BOOLEAN &&
+                <Switch defaultChecked/>
+            }
+
+            {
+                config.type === DynamicFormItemType.STRING_ARRAY &&
+                <Select options={[]}/>
+            }
+        </Form.Item>
+    )
+
+}

web/src/app/home/components/dynamic-form/DynamicFormItemConfig.ts

@@ -0,0 +1,51 @@
+export interface IDynamicFormItemConfig {
+    id: string;
+    default: string | number | boolean | Array<unknown>;
+    label: IDynamicFormItemLabel;
+    name: string;
+    required: boolean;
+    type: DynamicFormItemType
+    description?: IDynamicFormItemLabel;
+}
+
+export class DynamicFormItemConfig implements IDynamicFormItemConfig {
+    id: string;
+    name: string;
+    default: string | number | boolean | Array<unknown>;
+    label: IDynamicFormItemLabel;
+    required: boolean;
+    type: DynamicFormItemType;
+    description?: IDynamicFormItemLabel;
+
+    constructor(params: IDynamicFormItemConfig) {
+        this.id = params.id;
+        this.name = params.name;
+        this.default = params.default;
+        this.label = params.label;
+        this.required = params.required;
+        this.type = params.type;
+        this.description = params.description;
+    }
+
+}
+
+export interface IDynamicFormItemLabel {
+    en_US: string,
+    zh_CN: string,
+}
+
+export enum DynamicFormItemType {
+    INT = "integer",
+    STRING = "string",
+    BOOLEAN = "boolean",
+    STRING_ARRAY = "array[string]",
+    UNKNOWN = "unknown",
+}
+
+export function isDynamicFormItemType(value: string): value is DynamicFormItemType {
+    return Object.values(DynamicFormItemType).includes(value as DynamicFormItemType);
+}
+
+export function parseDynamicFormItemType(value: string): DynamicFormItemType {
+    return isDynamicFormItemType(value) ? value : DynamicFormItemType.UNKNOWN;
+}

web/src/app/home/components/dynamic-form/testDynamicConfigList.ts

@@ -0,0 +1,41 @@
+import {
+    DynamicFormItemConfig,
+    DynamicFormItemType,
+    IDynamicFormItemConfig
+} from "@/app/home/components/dynamic-form/DynamicFormItemConfig";
+
+export const testDynamicConfigList: IDynamicFormItemConfig[] = [
+    new DynamicFormItemConfig({
+        default: "",
+        id: "111",
+        label: {
+            zh_CN: "测试字段string",
+            en_US: "eng test"
+        },
+        name: "string_test",
+        required: false,
+        type: DynamicFormItemType.STRING
+    }),
+    new DynamicFormItemConfig({
+        default: "",
+        id: "222",
+        label: {
+            zh_CN: "测试字段int",
+            en_US: "int eng test"
+        },
+        name: "int_test",
+        required: true,
+        type: DynamicFormItemType.INT
+    }),
+    new DynamicFormItemConfig({
+        default: "",
+        id: "333",
+        label: {
+            zh_CN: "测试字段boolean",
+            en_US: "boolean eng test"
+        },
+        name: "boolean_test",
+        required: false,
+        type: DynamicFormItemType.BOOLEAN
+    }),
+]

web/src/app/home/components/empty-and-create-component/EmptyAndCreateComponent.tsx

@@ -0,0 +1,35 @@
+import styles from "./emptyAndCreate.module.css";
+
+export default function  EmptyAndCreateComponent({
+    title,
+    subTitle,
+    buttonText,
+    onButtonClick,
+}: {
+    title: string,
+    subTitle: string,
+    buttonText: string,
+    onButtonClick: () => void,
+}) {
+
+    return (
+        <div className={`${styles.emptyPageContainer}`}>
+            <div className={`${styles.emptyContainer}`}>
+                <div className={`${styles.emptyInfoContainer}`}>
+                    <div className={`${styles.emptyInfoText}`}>
+                        {title}
+                    </div>
+                    <div className={`${styles.emptyInfoSubText}`}>
+                        {subTitle}
+                    </div>
+                </div>
+                <div
+                    className={`${styles.emptyCreateButton}`}
+                    onClick={onButtonClick}
+                >
+                    {buttonText}
+                </div>
+            </div>
+        </div>
+    )
+}

web/src/app/home/components/empty-and-create-component/emptyAndCreate.module.css

@@ -0,0 +1,54 @@
+.emptyPageContainer {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background: #FFF;
+    border: 1px solid #c5c5c5;
+    border-radius: 10px;
+}
+
+.emptyContainer {
+    width: 100%;
+    height: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+}
+
+.emptyCreateButton {
+    width: 200px;
+    height: 50px;
+    border-radius: 20px;
+    background-color: #2288ee;
+    color: #FFF;
+    font-size: 20px;
+    font-weight: bold;
+    text-align: center;
+    line-height: 50px;
+    user-select: none;
+}
+
+.emptyCreateButton:hover {
+    background-color: #1b77d2;
+}
+
+.emptyInfoContainer {
+    width: 100%;
+    height: 60px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: #353535;
+}
+
+.emptyInfoText {
+    font-size: 30px;
+}
+
+.emptyInfoSubText {
+    font-size: 28px;
+}

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",
+    }),
+]

web/src/app/home/components/home-titlebar/HomeTitleBar.tsx

@@ -0,0 +1,16 @@
+import styles from "./HomeTittleBar.module.css"
+
+
+export default function HomeTitleBar({
+    title,
+}: {
+    title: string
+}) {
+    return (
+        <div className={`${styles.titleBarContainer}`}>
+            <div
+                className={`${styles.titleText}`}
+            >{title}</div>
+        </div>
+    );
+}

web/src/app/home/components/home-titlebar/HomeTittleBar.module.css

@@ -0,0 +1,15 @@
+.titleBarContainer {
+    width: 100%;
+    height: 70px;
+    background-color: #FFF;
+    font-size: 20px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.titleText {
+    margin-left: 10px;
+    font-size: 20px;
+    font-weight: bold;
+}