+ {/* LangBot、ICON区域 */}
+
+ {/* icon */}
+
+ L
+
+
+ Langbot
+
+
+ {/* 菜单列表，后期可升级成配置驱动 */}
+
+ {
+ sidebarConfigList.map(config => {
+ return (
+
{
+ console.log('click:', config.id)
+ handleChildClick(config)
+ }}
+ >
+
+
+ )
+ })
+ }
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/web_ui/src/app/home/components/home-sidebar/sidbarConfigList.ts b/web_ui/src/app/home/components/home-sidebar/sidbarConfigList.ts
new file mode 100644
index 00000000..3c96e4f6
--- /dev/null
+++ b/web_ui/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: "llm-config",
+ name: "大模型配置",
+ icon: "",
+ route: "/home/llm-config",
+ }),
+ new SidebarChildVO({
+ id: "platform-config",
+ name: "机器人配置",
+ icon: "",
+ route: "/home/bot-config",
+ }),
+ new SidebarChildVO({
+ id: "plugin-config",
+ name: "插件配置",
+ icon: "",
+ route: "/home/plugin-config",
+ }),
+ new SidebarChildVO({
+ id: "pipeline-config",
+ name: "流水线配置",
+ icon: "",
+ route: "/home/pipeline-config",
+ })
+]
diff --git a/web_ui/src/app/home/components/home-titlebar/HomeTitleBar.tsx b/web_ui/src/app/home/components/home-titlebar/HomeTitleBar.tsx
new file mode 100644
index 00000000..7011055d
--- /dev/null
+++ b/web_ui/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 (
+
+ );
+}
\ No newline at end of file
diff --git a/web_ui/src/app/home/components/home-titlebar/HomeTittleBar.module.css b/web_ui/src/app/home/components/home-titlebar/HomeTittleBar.module.css
new file mode 100644
index 00000000..844b045e
--- /dev/null
+++ b/web_ui/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;
+}
\ No newline at end of file
diff --git a/web_ui/src/app/home/layout.module.css b/web_ui/src/app/home/layout.module.css
new file mode 100644
index 00000000..bcbdc800
--- /dev/null
+++ b/web_ui/src/app/home/layout.module.css
@@ -0,0 +1,18 @@
+.homeLayoutContainer {
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ flex-direction: row;
+}
+
+.main {
+ width: 100%;
+ height: 100%;
+ background-color: #FAFBFB;
+}
+
+.mainContent {
+ width: calc(100% - 40px);
+ height: calc(100% - 110px);
+ margin: 20px;
+}
\ No newline at end of file
diff --git a/web_ui/src/app/home/layout.tsx b/web_ui/src/app/home/layout.tsx
new file mode 100644
index 00000000..57f21bac
--- /dev/null
+++ b/web_ui/src/app/home/layout.tsx
@@ -0,0 +1,36 @@
+"use client"
+
+import '@ant-design/v5-patch-for-react-19';
+import styles from "./layout.module.css"
+import HomeSidebar from "@/app/home/components/home-sidebar/HomeSidebar";
+import HomeTitleBar from "@/app/home/components/home-titlebar/HomeTitleBar";
+import React, {useState} from "react";
+import {SidebarChildVO} from "@/app/home/components/home-sidebar/HomeSidebarChild";
+import { useRouter } from 'next/navigation';
+
+export default function HomeLayout({
+ children
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ const router = useRouter();
+ const [title, setTitle] = useState
("")
+ const onSelectedChange = (child: SidebarChildVO) => {
+ setTitle(child.name)
+ }
+
+ return (
+
+
+
+
+ {/* 主页面 */}
+
+ {children}
+
+
+
+ {/* icon和基本信息 */}
+
+ {/* icon */}
+
+ ICO
+
+ {/* bot基本信息 */}
+
+
+ {cardVO.name}
+
+
+ 使用模型：{cardVO.model}
+
+
+ 厂商：{cardVO.company}
+
+
+
+ {/* URL和创建时间 */}
+
+ URL：{cardVO.URL}
+
+
+ 更新时间：{cardVO.updateTime}
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/web_ui/src/app/home/llm-config/page.tsx b/web_ui/src/app/home/llm-config/page.tsx
new file mode 100644
index 00000000..56d8b25a
--- /dev/null
+++ b/web_ui/src/app/home/llm-config/page.tsx
@@ -0,0 +1,126 @@
+"use client"
+
+import {useState} from "react";
+import {LLMCardVO} from "@/app/home/llm-config/component/llm-card/LLMCardVO";
+import styles from "./LLMConfig.module.css"
+import EmptyAndCreateComponent from "@/app/home/components/empty-and-create-component/EmptyAndCreateComponent";
+import {Modal} from "antd";
+import LLMCard from "@/app/home/llm-config/component/llm-card/LLMCard";
+import LLMForm from "@/app/home/llm-config/component/llm-form/LLMForm";
+import CreateCardComponent from "@/app/infra/basic-component/create-card-component/CreateCardComponent";
+
+export default function LLMConfigPage() {
+ const [cardList, setCardList] = useState([
+ new LLMCardVO({
+ id: "1",
+ name: "测试模型",
+ model: "GPT-4o",
+ URL: "www.openai.com",
+ company: "OpenAI",
+ updateTime: "2025.1.2"
+ }),
+ new LLMCardVO({
+ id: "2",
+ name: "测试模型",
+ model: "GPT-4o",
+ URL: "www.openai.com",
+ company: "OpenAI",
+ updateTime: "2025.1.2"
+ }),
+ new LLMCardVO({
+ id: "3",
+ name: "测试模型",
+ model: "GPT-4o",
+ URL: "www.openai.com",
+ company: "OpenAI",
+ updateTime: "2025.1.2"
+ }),
+ new LLMCardVO({
+ id: "4",
+ name: "测试模型",
+ model: "GPT-4o",
+ URL: "www.openai.com",
+ company: "OpenAI",
+ updateTime: "2025.1.2"
+ }),
+ new LLMCardVO({
+ id: "5",
+ name: "测试模型",
+ model: "GPT-4o",
+ URL: "www.openai.com",
+ company: "OpenAI",
+ updateTime: "2025.1.2"
+ }),
+ ])
+ const [modalOpen, setModalOpen] = useState(false);
+ const [isEditForm, setIsEditForm] = useState(false)
+ const [nowSelectedLLM, setNowSelectedLLM] = useState(null)
+
+ function selectLLM(cardVO: LLMCardVO) {
+ setIsEditForm(true)
+ setNowSelectedLLM(cardVO)
+ console.log("set now vo", cardVO)
+ setModalOpen(true)
+ }
+ function handleCreateModelClick() {
+ setIsEditForm(false)
+ setNowSelectedLLM(null)
+ setModalOpen(true);
+ }
+
+ return (
+
+
setModalOpen(false)}
+ onCancel={() => setModalOpen(false)}
+ width={700}
+ footer={null}
+ >
+ {
+ setModalOpen(false);
+ }}
+ onFormCancel={() => {
+ setModalOpen(false);
+ }}
+ />
+
+ {
+ cardList.length > 0 &&
+
+ {cardList.map(cardVO => {
+ return
{selectLLM(cardVO)}}>
+
+
+ })}
+
+
+ }
+
+ {
+ cardList.length === 0 &&
+
+ {
+ handleCreateModelClick()
+ }}
+ />
+
+ }
+
+
+ );
+}
diff --git a/web_ui/src/app/home/pipeline-config/components/pipeline-form/PipelineChildFormEntity.ts b/web_ui/src/app/home/pipeline-config/components/pipeline-form/PipelineChildFormEntity.ts
new file mode 100644
index 00000000..a2038c35
--- /dev/null
+++ b/web_ui/src/app/home/pipeline-config/components/pipeline-form/PipelineChildFormEntity.ts
@@ -0,0 +1,20 @@
+import {DynamicFormItemConfig} from "@/app/home/components/dynamic-form/DynamicFormItemConfig";
+
+export interface IPipelineChildFormEntity {
+ name: string;
+ label: string;
+ formItems: DynamicFormItemConfig[]
+}
+
+export class PipelineChildFormEntity implements IPipelineChildFormEntity {
+ formItems: DynamicFormItemConfig[];
+ label: string;
+ name: string;
+
+ constructor(props: IPipelineChildFormEntity) {
+ this.form = props.form;
+ this.label = props.label;
+ this.name = props.name;
+ this.formItems = props.formItems;
+ }
+}
\ No newline at end of file
diff --git a/web_ui/src/app/home/pipeline-config/components/pipeline-form/PipelineFormComponent.tsx b/web_ui/src/app/home/pipeline-config/components/pipeline-form/PipelineFormComponent.tsx
new file mode 100644
index 00000000..9a7ae574
--- /dev/null
+++ b/web_ui/src/app/home/pipeline-config/components/pipeline-form/PipelineFormComponent.tsx
@@ -0,0 +1,512 @@
+import {Form, Button, Switch, Select, Input, InputNumber} from "antd";
+import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
+import {useState} from "react";
+import styles from "./pipelineFormStyle.module.css"
+
+export default function PipelineFormComponent({
+ onFinish,
+ onCancel,
+}: {
+ onFinish: () => void;
+ onCancel: () => void;
+}) {
+ const [nowFormIndex, setNowFormIndex] = useState(0)
+ // 这里不好，可以改成enum等
+ const formLabelList: FormLabel[] = [
+ {label: "AI能力", name: "ai"},
+ {label: "触发条件", name: "trigger"},
+ {label: "安全能力", name: "safety"},
+ {label: "输出处理", name: "output"},
+ ]
+
+ function getNowFormLabel() {
+ return formLabelList[nowFormIndex]
+ }
+
+
+ function getPreFormLabel(): undefined | FormLabel {
+ if (nowFormIndex !== undefined && nowFormIndex > 0) {
+ return formLabelList[nowFormIndex - 1]
+ } else {
+ return undefined
+ }
+ }
+
+ function getNextFormLabel(): undefined | FormLabel {
+ if (nowFormIndex !== undefined && nowFormIndex < formLabelList.length - 1) {
+ return formLabelList[nowFormIndex + 1]
+ } else {
+ return undefined
+ }
+ }
+
+ function addFormLabelIndex() {
+ if (nowFormIndex < formLabelList.length - 1) {
+ setNowFormIndex(nowFormIndex + 1)
+ }
+ }
+
+ function reduceFormLabelIndex() {
+ if (nowFormIndex > 0) {
+ setNowFormIndex(nowFormIndex - 1)
+ }
+ }
+
+ return (
+
+
+ {getNowFormLabel().label}
+
+ {/* AI能力表单 ai */}
+
+
+ {/* 触发条件表单 trigger */}
+
+
+ {/* 安全控制表单 safety */}
+
+
+ {/* 输出处理控制表单 output */}
+
+
+
+
+ }
+ onClick={addFormLabelIndex}
+ disabled={!getNextFormLabel()}
+ iconPosition={"end"}
+ >
+ {getNextFormLabel()?.label || "暂无更多"}
+
+
+
+
+
setModalOpen(false)}
+ onCancel={() => setModalOpen(false)}
+ width={700}
+ footer={null}
+ >
+ {}} onCancel={() => {}}/>
+
+
+
{setModalOpen(true)}}/>
+
+
PluginConfigPage
+
+ );
+}
diff --git a/web_ui/src/app/infra/api/api-types/index.ts b/web_ui/src/app/infra/api/api-types/index.ts
new file mode 100644
index 00000000..ce30d80b
--- /dev/null
+++ b/web_ui/src/app/infra/api/api-types/index.ts
@@ -0,0 +1,11 @@
+export interface ApiResponse {
+ code: number;
+ data: T;
+ msg: string;
+}
+
+export interface I18nText {
+ en_US: string;
+ zh_CN: string;
+}
+
diff --git a/web_ui/src/app/infra/api/api-types/pipelines/GetMetaDataResponse.ts b/web_ui/src/app/infra/api/api-types/pipelines/GetMetaDataResponse.ts
new file mode 100644
index 00000000..41a1b8dc
--- /dev/null
+++ b/web_ui/src/app/infra/api/api-types/pipelines/GetMetaDataResponse.ts
@@ -0,0 +1,47 @@
+export interface GetMetaDataResponse {
+ configs: Config[]
+}
+
+
+interface Label {
+ en_US: string;
+ zh_CN: string;
+}
+
+interface Option {
+ label: Label;
+ name: string;
+}
+
+interface ConfigItem {
+ default?: boolean | Array | number | string;
+ description?: Label;
+ items?: {
+ type?: string;
+ properties?: {
+ [key: string]: {
+ type: string;
+ default?: any;
+ };
+ };
+ };
+ label: Label;
+ name: string;
+ options?: Option[];
+ required: boolean;
+ scope?: string;
+ type: string;
+}
+
+interface Stage {
+ config: ConfigItem[];
+ description?: Label;
+ label: Label;
+ name: string;
+}
+
+interface Config {
+ label: Label;
+ name: string;
+ stages: Stage[];
+}
diff --git a/web_ui/src/app/infra/basic-component/create-card-component/CreateCardComponent.tsx b/web_ui/src/app/infra/basic-component/create-card-component/CreateCardComponent.tsx
new file mode 100644
index 00000000..3e33d712
--- /dev/null
+++ b/web_ui/src/app/infra/basic-component/create-card-component/CreateCardComponent.tsx
@@ -0,0 +1,27 @@
+import styles from "./createCartComponent.module.css";
+
+export default function CreateCardComponent({
+ width,
+ height,
+ plusSize,
+ onClick,
+}: {
+ width: number;
+ height: number;
+ plusSize: number;
+ onClick: () => void
+}) {
+ return (
+
+ +
+
+ )
+}
\ No newline at end of file
diff --git a/web_ui/src/app/infra/basic-component/create-card-component/createCartComponent.module.css b/web_ui/src/app/infra/basic-component/create-card-component/createCartComponent.module.css
new file mode 100644
index 00000000..8d751a01
--- /dev/null
+++ b/web_ui/src/app/infra/basic-component/create-card-component/createCartComponent.module.css
@@ -0,0 +1,16 @@
+.cardContainer {
+ width: 360px;
+ height: 200px;
+ background-color: #FFF;
+ border-radius: 9px;
+ box-shadow: rgba(0, 0, 0, 0.4) 0 1px 1px -1px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-evenly;
+}
+
+.createCardContainer {
+ font-size: 90px;
+ color: #acacac;
+}
\ No newline at end of file
diff --git a/web_ui/src/app/infra/basic-types/I18N.ts b/web_ui/src/app/infra/basic-types/I18N.ts
new file mode 100644
index 00000000..54111e6c
--- /dev/null
+++ b/web_ui/src/app/infra/basic-types/I18N.ts
@@ -0,0 +1,4 @@
+export interface I18NText {
+ en_US: string;
+ zh_CN: string;
+}
\ No newline at end of file
diff --git a/web_ui/src/app/layout.tsx b/web_ui/src/app/layout.tsx
new file mode 100644
index 00000000..4d25b364
--- /dev/null
+++ b/web_ui/src/app/layout.tsx
@@ -0,0 +1,22 @@
+import "./global.css"
+import type { Metadata } from "next";
+
+
+export const metadata: Metadata = {
+ title: "Create Next App",
+ description: "Generated by create next app",
+};
+
+export default function RootLayout({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return (
+
+
+ {children}
+
+
+ );
+}
diff --git a/web_ui/src/app/login/layout.tsx b/web_ui/src/app/login/layout.tsx
new file mode 100644
index 00000000..e868ff78
--- /dev/null
+++ b/web_ui/src/app/login/layout.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+export default function LoginLayout({
+ children
+}: Readonly<{
+ children: React.ReactNode;
+}>) {
+ return (
+
+ {children}
+
+ )
+}
diff --git a/web_ui/src/app/login/page.tsx b/web_ui/src/app/login/page.tsx
new file mode 100644
index 00000000..ec5499d9
--- /dev/null
+++ b/web_ui/src/app/login/page.tsx
@@ -0,0 +1,7 @@
+export default function Home() {
+ return (
+
+
loginpage
+
+ );
+}
diff --git a/web_ui/src/app/not-found.tsx b/web_ui/src/app/not-found.tsx
new file mode 100644
index 00000000..9a023999
--- /dev/null
+++ b/web_ui/src/app/not-found.tsx
@@ -0,0 +1,8 @@
+export default function NotFound() {
+ return (
+
+ {/* TODO: @qidongrui 这里404页面有时间要更新*/}
+
Langbot没有找到该页面喔～
+
+ );
+}
diff --git a/web_ui/src/app/page.tsx b/web_ui/src/app/page.tsx
new file mode 100644
index 00000000..e839b271
--- /dev/null
+++ b/web_ui/src/app/page.tsx
@@ -0,0 +1,7 @@
+export default function Home() {
+ return (
+
+
+
+ );
+}
diff --git a/web_ui/tsconfig.json b/web_ui/tsconfig.json
new file mode 100644
index 00000000..c1334095
--- /dev/null
+++ b/web_ui/tsconfig.json
@@ -0,0 +1,27 @@
+{
+ "compilerOptions": {
+ "target": "ES2017",
+ "lib": ["dom", "dom.iterable", "esnext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "bundler",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "jsx": "preserve",
+ "incremental": true,
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ],
+ "paths": {
+ "@/*": ["./src/*"]
+ }
+ },
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+ "exclude": ["node_modules"]
+}
- 正在加载...
-