Merge pull request #1375 from RockChinQ/feat/renderable-pipeline-config

feat: make pipeline config dynamic-form-renderable
2026-06-02 12:05:54 +00:00 · 2025-05-08 21:34:39 +08:00
parent ef6be4dfd9 8007084f8c
commit 7886702ef2
22 changed files with 724 additions and 889 deletions
--- a/templates/metadata/pipeline/ai.yaml
+++ b/templates/metadata/pipeline/ai.yaml
@@ -40,9 +40,8 @@ stages:
        label:
          en_US: Model
          zh_CN: 模型
-        type: select
+        type: llm-model-selector
        required: true
-        scope: /provider/models/llm
      - name: max-round
        label:
          en_US: Max Round
@@ -54,16 +53,8 @@ stages:
        label:
          en_US: Prompt
          zh_CN: 提示词
-        type: array
+        type: prompt-editor
        required: true
-        items:
-          type: object
-          properties:
-            role:
-              type: string
-              default: user
-            content:
-              type: string
  - name: dify-service-api
    label:
      en_US: Dify Service API
--- a/templates/metadata/pipeline/trigger.yaml
+++ b/templates/metadata/pipeline/trigger.yaml
@@ -28,11 +28,9 @@ stages:
        description:
          en_US: The prefix of the message
          zh_CN: 消息前缀
-        type: array
+        type: array[string]
        required: true
        default: []
-        items:
-          type: string
      - name: regexp
        label:
          en_US: Regexp
@@ -40,11 +38,9 @@ stages:
        description:
          en_US: The regexp of the message
          zh_CN: 消息正则表达式
-        type: array
+        type: array[string]
        required: true
        default: []
-        items:
-          type: string
      - name: random
        label:
          en_US: Random
@@ -83,20 +79,16 @@ stages:
        label:
          en_US: Blacklist
          zh_CN: 黑名单
-        type: array
+        type: array[string]
        required: true
        default: []
-        items:
-          type: string
      - name: whitelist
        label:
          en_US: Whitelist
          zh_CN: 白名单
-        type: array
+        type: array[string]
        required: true
        default: []
-        items:
-          type: string
  - name: ignore-rules
    label:
      en_US: Ignore Rules
@@ -109,11 +101,9 @@ stages:
        description:
          en_US: The prefix of the message
          zh_CN: 消息前缀
-        type: array
+        type: array[string]
        required: true
        default: []
-        items:
-          type: string
      - name: regexp
        label:
          en_US: Regexp
@@ -121,8 +111,6 @@ stages:
        description:
          en_US: The regexp of the message
          zh_CN: 消息正则表达式
-        type: array
+        type: array[string]
        required: true
        default: []
-        items:
-          type: string
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -16,6 +16,7 @@
        "@radix-ui/react-select": "^2.2.4",
        "@radix-ui/react-slot": "^1.2.2",
        "@radix-ui/react-switch": "^1.2.4",
+        "@radix-ui/react-tabs": "^1.1.11",
        "@radix-ui/react-toggle": "^1.1.8",
        "@radix-ui/react-toggle-group": "^1.1.9",
        "@tailwindcss/postcss": "^4.1.5",
@@ -1503,6 +1504,36 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.11.tgz",
+      "integrity": "sha512-4FiKSVoXqPP/KfzlB7lwwqoFV6EPwkrrqGp9cUYXjwDYHhvpnqq79P+EPHKcdoTE7Rl8w/+6s9rTlsfXHES9GA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.2",
+        "@radix-ui/react-roving-focus": "1.1.9",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-toggle": {
      "version": "1.1.8",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.8.tgz",
--- a/web/package.json
+++ b/web/package.json
@@ -19,6 +19,7 @@
    "@radix-ui/react-select": "^2.2.4",
    "@radix-ui/react-slot": "^1.2.2",
    "@radix-ui/react-switch": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.11",
    "@radix-ui/react-toggle": "^1.1.8",
    "@radix-ui/react-toggle-group": "^1.1.9",
    "@tailwindcss/postcss": "^4.1.5",
--- a/web/src/app/home/bots/components/bot-form/BotForm.tsx
+++ b/web/src/app/home/bots/components/bot-form/BotForm.tsx
@@ -2,10 +2,10 @@ import { useEffect, useState } from 'react';
 import { IChooseAdapterEntity, IPipelineEntity } from '@/app/home/bots/components/bot-form/ChooseEntity';
 import {
  DynamicFormItemConfig,
-  IDynamicFormItemConfig,
  getDefaultValues,
  parseDynamicFormItemType,
 } from '@/app/home/components/dynamic-form/DynamicFormItemConfig';
+import { IDynamicFormItemSchema } from '@/app/infra/entities/form/dynamic';
 import { UUID } from 'uuidjs';
 import DynamicFormComponent from '@/app/home/components/dynamic-form/DynamicFormComponent';
 import { httpClient } from '@/app/infra/http/HttpClient';
@@ -76,7 +76,7 @@ export default function BotForm({
  const [showDeleteConfirmModal, setShowDeleteConfirmModal] = useState(false);

  const [adapterNameToDynamicConfigMap, setAdapterNameToDynamicConfigMap] =
-    useState(new Map<string, IDynamicFormItemConfig[]>());
+    useState(new Map<string, IDynamicFormItemSchema[]>());
  // const [form] = Form.useForm<IBotFormEntity>();
  const [showDynamicForm, setShowDynamicForm] = useState<boolean>(false);
  // const [dynamicForm] = Form.useForm();
@@ -95,7 +95,7 @@ export default function BotForm({
  >([]);

  const [dynamicFormConfigList, setDynamicFormConfigList] = useState<
-    IDynamicFormItemConfig[]
+    IDynamicFormItemSchema[]
  >([]);
  const [isLoading, setIsLoading] = useState<boolean>(false);

--- a/web/src/app/home/bots/page.tsx
+++ b/web/src/app/home/bots/page.tsx
@@ -9,7 +9,7 @@ import BotForm from '@/app/home/bots/components/bot-form/BotForm';
 import BotCard from '@/app/home/bots/components/bot-card/BotCard';
 import CreateCardComponent from '@/app/infra/basic-component/create-card-component/CreateCardComponent';
 import { httpClient } from '@/app/infra/http/HttpClient';
-import { Bot, Adapter } from '@/app/infra/api/api-types';
+import { Bot, Adapter } from '@/app/infra/entities/api';
 import {
  Dialog,
  DialogContent,
@@ -20,27 +20,14 @@ import {
 } from "@/components/ui/dialog"

 export default function BotConfigPage() {
-  const router = useRouter();
-  const [pageShowRule, setPageShowRule] = useState<BotConfigPageShowRule>(
-    BotConfigPageShowRule.NO_BOT,
-  );
  const [modalOpen, setModalOpen] = useState<boolean>(false);
  const [botList, setBotList] = useState<BotCardVO[]>([]);
  const [isEditForm, setIsEditForm] = useState(false);
  const [nowSelectedBotCard, setNowSelectedBotCard] = useState<BotCardVO>();
-  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    // TODO：补齐加载转圈逻辑
-    setIsLoading(true);
-    checkHasLLM().then((hasLLM) => {
-      if (hasLLM) {
-        getBotList();
-      } else {
-        setPageShowRule(BotConfigPageShowRule.NO_LLM);
-        setIsLoading(false);
-      }
-    });
+
  }, []);

  async function checkHasLLM(): Promise<boolean> {
@@ -49,7 +36,6 @@ export default function BotConfigPage() {
  }

  async function getBotList() {
-    setIsLoading(true);

    const adapterListResp = await httpClient.getAdapters();
    const adapterList = adapterListResp.adapters.map((adapter: Adapter) => {
@@ -72,11 +58,6 @@ export default function BotConfigPage() {
            usePipelineName: bot.use_pipeline_name || '',
          });
        });
-        if (botList.length === 0) {
-          setPageShowRule(BotConfigPageShowRule.NO_BOT);
-        } else {
-          setPageShowRule(BotConfigPageShowRule.HAVE_BOT);
-        }
        setBotList(botList);
      })
      .catch((err) => {
@@ -89,7 +70,7 @@ export default function BotConfigPage() {
        // });
      })
      .finally(() => {
-        setIsLoading(false);
+        // setIsLoading(false);
      });
  }

@@ -112,46 +93,6 @@ export default function BotConfigPage() {

  return (
    <div className={styles.configPageContainer}>
-      {/* <Spin spinning={isLoading} tip="加载中..." size="large">
-        <Modal
-          title={isEditForm ? '编辑机器人' : '创建机器人'}
-          centered
-          open={modalOpen}
-          onOk={() => setModalOpen(false)}
-          onCancel={() => setModalOpen(false)}
-          width={700}
-          footer={null}
-          destroyOnClose={true}
-        >
-          <BotForm
-            initBotId={nowSelectedBotCard?.id}
-            onFormSubmit={() => {
-              getBotList();
-              setModalOpen(false);
-            }}
-            onFormCancel={() => setModalOpen(false)}
-          />
-        </Modal>
-        {pageShowRule === BotConfigPageShowRule.NO_LLM && (
-          <EmptyAndCreateComponent
-            title={'需要先创建大模型才能配置机器人哦～'}
-            subTitle={'快去创建一个吧！'}
-            buttonText={'创建大模型 GO！'}
-            onButtonClick={() => {
-              router.push('/home/models');
-            }}
-          />
-        )}
-
-        {pageShowRule === BotConfigPageShowRule.NO_BOT && (
-          <EmptyAndCreateComponent
-            title={'您还未配置机器人哦～'}
-            subTitle={'快去创建一个吧！'}
-            buttonText={'创建机器人 +'}
-            onButtonClick={handleCreateBotClick}
-          />
-        )}
-      </Spin> */}

      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
        <DialogContent className="w-[700px] max-h-[80vh] p-0 flex flex-col">
@@ -176,7 +117,6 @@ export default function BotConfigPage() {
      </Dialog>

      {/* 注意：其余的返回内容需要保持在Spin组件外部 */}
-      {pageShowRule === BotConfigPageShowRule.HAVE_BOT && (
        <div className={`${styles.botListContainer}`}>

          <CreateCardComponent
@@ -198,13 +138,6 @@ export default function BotConfigPage() {
            );
          })}
        </div>
-      )}
    </div>
  );
 }
-
-enum BotConfigPageShowRule {
-  NO_LLM,
-  NO_BOT,
-  HAVE_BOT,
-}
--- a/web/src/app/home/components/dynamic-form/DynamicFormComponent.tsx
+++ b/web/src/app/home/components/dynamic-form/DynamicFormComponent.tsx
@@ -1,4 +1,4 @@
-import { IDynamicFormItemConfig } from '@/app/home/components/dynamic-form/DynamicFormItemConfig';
+import { IDynamicFormItemSchema } from '@/app/infra/entities/form/dynamic';
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
@@ -18,7 +18,7 @@ export default function DynamicFormComponent({
  onSubmit,
  initialValues,
 }: {
-  itemConfigList: IDynamicFormItemConfig[];
+  itemConfigList: IDynamicFormItemSchema[];
  onSubmit?: (val: object) => unknown;
  initialValues?: Record<string, any>;
 }) {
@@ -45,6 +45,15 @@ export default function DynamicFormComponent({
        case 'select':
          fieldSchema = z.string();
          break;
+        case 'llm-model-selector':
+          fieldSchema = z.string();
+          break;
+        case 'prompt-editor':
+          fieldSchema = z.array(z.object({
+            content: z.string(),
+            role: z.string(),
+          }));
+          break;
        default:
          fieldSchema = z.string();
      }
--- a/web/src/app/home/components/dynamic-form/DynamicFormItemComponent.tsx
+++ b/web/src/app/home/components/dynamic-form/DynamicFormItemComponent.tsx
@@ -1,20 +1,35 @@
-// import { Form, Input, InputNumber, Select, Switch } from 'antd';
 import {
  DynamicFormItemType,
-  IDynamicFormItemConfig,
-} from '@/app/home/components/dynamic-form/DynamicFormItemConfig';
+  IDynamicFormItemSchema,
+} from '@/app/infra/entities/form/dynamic';
 import { Input } from "@/components/ui/input"
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select"
-import { Checkbox } from "@/components/ui/checkbox"
+import { Switch } from "@/components/ui/switch"
 import { ControllerRenderProps } from "react-hook-form";
+import { Button } from "@/components/ui/button";
+import { useEffect, useState } from "react";
+import { httpClient } from "@/app/infra/http/HttpClient";
+import { LLMModel } from "@/app/infra/entities/api";

 export default function DynamicFormItemComponent({
  config,
  field,
 }: {
-  config: IDynamicFormItemConfig;
+  config: IDynamicFormItemSchema;
  field: ControllerRenderProps<any, any>;
 }) {
+  const [llmModels, setLlmModels] = useState<LLMModel[]>([]);
+
+  useEffect(() => {
+    if (config.type === DynamicFormItemType.LLM_MODEL_SELECTOR) {
+      httpClient.getProviderLLMModels().then((resp) => {
+        setLlmModels(resp.models);
+      }).catch((err) => {
+        console.error('获取 LLM 模型列表失败:', err);
+      });
+    }
+  }, [config.type]);
+
  switch (config.type) {
    case DynamicFormItemType.INT:
    case DynamicFormItemType.FLOAT:
@@ -31,7 +46,7 @@ export default function DynamicFormItemComponent({

    case DynamicFormItemType.BOOLEAN:
      return (
-        <Checkbox
+        <Switch
          checked={field.value}
          onCheckedChange={field.onChange}
        />
@@ -39,21 +54,42 @@ export default function DynamicFormItemComponent({

    case DynamicFormItemType.STRING_ARRAY:
      return (
-        <Select
-          value={field.value}
-          onValueChange={field.onChange}
-        >
-          <SelectTrigger>
-            <SelectValue placeholder="请选择" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectGroup>
-              {/* 这里需要根据实际情况添加选项 */}
-              <SelectItem value="option1">选项1</SelectItem>
-              <SelectItem value="option2">选项2</SelectItem>
-            </SelectGroup>
-          </SelectContent>
-        </Select>
+        <div className="space-y-2">
+          {field.value.map((item: string, index: number) => (
+            <div key={index} className="flex gap-2 items-center">
+              <Input
+                className="w-[200px]"
+                value={item}
+                onChange={(e) => {
+                  const newValue = [...field.value];
+                  newValue[index] = e.target.value;
+                  field.onChange(newValue);
+                }}
+              />
+              <button 
+                type="button"
+                className="p-2 hover:bg-gray-100 rounded"
+                onClick={() => {
+                  const newValue = field.value.filter((_: string, i: number) => i !== index);
+                  field.onChange(newValue);
+                }}
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5 text-red-500">
+                  <path d="M7 4V2H17V4H22V6H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V6H2V4H7ZM6 6V20H18V6H6ZM9 9H11V17H9V9ZM13 9H15V17H13V9Z"></path>
+                </svg>
+              </button>
+            </div>
+          ))}
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => {
+              field.onChange([...field.value, '']);
+            }}
+          >
+            添加
+          </Button>
+        </div>
      );

    case DynamicFormItemType.SELECT:
@@ -67,14 +103,107 @@ export default function DynamicFormItemComponent({
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
-              {/* 这里需要根据实际情况添加选项 */}
-              <SelectItem value="option1">选项1</SelectItem>
-              <SelectItem value="option2">选项2</SelectItem>
+              {config.options?.map((option) => (
+                <SelectItem key={option.name} value={option.name}>
+                  {option.label.zh_CN}
+                </SelectItem>
+              ))}
            </SelectGroup>
          </SelectContent>
        </Select>
      );

+    case DynamicFormItemType.LLM_MODEL_SELECTOR:
+      return (
+        <Select
+          value={field.value}
+          onValueChange={field.onChange}
+        >
+          <SelectTrigger>
+            <SelectValue placeholder="请选择模型" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              {llmModels.map((model) => (
+                <SelectItem key={model.uuid} value={model.uuid}>
+                  {model.name}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      );
+
+    case DynamicFormItemType.PROMPT_EDITOR:
+      return (
+        <div className="space-y-2">
+          {field.value.map((item: { role: string; content: string }, index: number) => (
+            <div key={index} className="flex gap-2 items-center">
+              {/* 角色选择 */}
+              {index === 0 ? (
+                <div className="w-[120px] px-3 py-2 border rounded bg-gray-50 text-gray-500">system</div>
+              ) : (
+                <Select
+                  value={item.role}
+                  onValueChange={(value) => {
+                    const newValue = [...field.value];
+                    newValue[index] = { ...newValue[index], role: value };
+                    field.onChange(newValue);
+                  }}
+                >
+                  <SelectTrigger className="w-[120px]">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectItem value="user">user</SelectItem>
+                      <SelectItem value="assistant">assistant</SelectItem>
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              )}
+              {/* 内容输入 */}
+              <Input
+                className="w-[300px]"
+                value={item.content}
+                onChange={(e) => {
+                  const newValue = [...field.value];
+                  newValue[index] = { ...newValue[index], content: e.target.value };
+                  field.onChange(newValue);
+                }}
+              />
+              {/* 删除按钮，第一轮不显示 */}
+              {index !== 0 && (
+                <button
+                  type="button"
+                  className="p-2 hover:bg-gray-100 rounded"
+                  onClick={() => {
+                    const newValue = field.value.filter((_: any, i: number) => i !== index);
+                    field.onChange(newValue);
+                  }}
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-5 h-5 text-red-500">
+                    <path d="M7 4V2H17V4H22V6H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V6H2V4H7ZM6 6V20H18V6H6ZM9 9H11V17H9V9ZM13 9H15V17H13V9Z"></path>
+                  </svg>
+                </button>
+              )}
+            </div>
+          ))}
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => {
+              field.onChange([
+                ...field.value,
+                { role: 'user', content: '' },
+              ]);
+            }}
+          >
+            添加回合
+          </Button>
+        </div>
+      );
+
    default:
      return <Input {...field} />;
  }
--- a/web/src/app/home/components/dynamic-form/DynamicFormItemConfig.ts
+++ b/web/src/app/home/components/dynamic-form/DynamicFormItemConfig.ts
@@ -1,23 +1,17 @@
-export interface IDynamicFormItemConfig {
-  id: string;
-  default: string | number | boolean | Array<unknown>;
-  label: IDynamicFormItemLabel;
-  name: string;
-  required: boolean;
-  type: DynamicFormItemType;
-  description?: IDynamicFormItemLabel;
-}
+import { IDynamicFormItemSchema, DynamicFormItemType, IDynamicFormItemOption } from '@/app/infra/entities/form/dynamic';
+import { I18nLabel } from '@/app/infra/entities/common';

-export class DynamicFormItemConfig implements IDynamicFormItemConfig {
+export class DynamicFormItemConfig implements IDynamicFormItemSchema {
  id: string;
  name: string;
  default: string | number | boolean | Array<unknown>;
-  label: IDynamicFormItemLabel;
+  label: I18nLabel;
  required: boolean;
  type: DynamicFormItemType;
-  description?: IDynamicFormItemLabel;
+  description?: I18nLabel;
+  options?: IDynamicFormItemOption[];

-  constructor(params: IDynamicFormItemConfig) {
+  constructor(params: IDynamicFormItemSchema) {
    this.id = params.id;
    this.name = params.name;
    this.default = params.default;
@@ -25,23 +19,10 @@ export class DynamicFormItemConfig implements IDynamicFormItemConfig {
    this.required = params.required;
    this.type = params.type;
    this.description = params.description;
+    this.options = params.options;
  }
 }

-export interface IDynamicFormItemLabel {
-  en_US: string;
-  zh_CN: string;
-}
-
-export enum DynamicFormItemType {
-  INT = 'integer',
-  FLOAT = 'float',
-  BOOLEAN = 'boolean',
-  STRING = 'string',
-  STRING_ARRAY = 'array[string]',
-  SELECT = 'select',
-  UNKNOWN = 'unknown',
-}

 export function isDynamicFormItemType(
  value: string,
@@ -55,7 +36,7 @@ export function parseDynamicFormItemType(value: string): DynamicFormItemType {
  return isDynamicFormItemType(value) ? value : DynamicFormItemType.UNKNOWN;
 }

-export function getDefaultValues(itemConfigList: IDynamicFormItemConfig[]): Record<string, any> {
+export function getDefaultValues(itemConfigList: IDynamicFormItemSchema[]): Record<string, any> {
  return itemConfigList.reduce((acc, item) => {
    acc[item.name] = item.default;
    return acc;
--- a/web/src/app/home/components/dynamic-form/testDynamicConfigList.ts
+++ b/web/src/app/home/components/dynamic-form/testDynamicConfigList.ts
@@ -1,10 +1,10 @@
 import {
-  DynamicFormItemConfig,
  DynamicFormItemType,
-  IDynamicFormItemConfig,
-} from '@/app/home/components/dynamic-form/DynamicFormItemConfig';
+  IDynamicFormItemSchema,
+} from '@/app/infra/entities/form/dynamic';
+import { DynamicFormItemConfig } from '@/app/home/components/dynamic-form/DynamicFormItemConfig';

-export const testDynamicConfigList: IDynamicFormItemConfig[] = [
+export const testDynamicConfigList: IDynamicFormItemSchema[] = [
  new DynamicFormItemConfig({
    default: '',
    id: '111',
--- a/web/src/app/home/models/component/llm-form/LLMForm.tsx
+++ b/web/src/app/home/models/component/llm-form/LLMForm.tsx
@@ -1,9 +1,8 @@
-import { SelectProps } from 'antd';
 import { ICreateLLMField } from '@/app/home/models/ICreateLLMField';
 import { useEffect, useState } from 'react';
 import { IChooseRequesterEntity } from '@/app/home/models/component/llm-form/ChooseRequesterEntity';
 import { httpClient } from '@/app/infra/http/HttpClient';
-import { LLMModel } from '@/app/infra/api/api-types';
+import { LLMModel } from '@/app/infra/entities/api';
 import { UUID } from 'uuidjs';

 import { zodResolver } from "@hookform/resolvers/zod"
@@ -91,7 +90,7 @@ export default function LLMForm({
  const [extraArgs, setExtraArgs] = useState<{key: string, type: 'string' | 'number' | 'boolean', value: string}[]>([]);

  const [showDeleteConfirmModal, setShowDeleteConfirmModal] = useState(false);
-  const abilityOptions: SelectProps['options'] = [
+  const abilityOptions: { label: string, value: string }[] = [
    {
      label: '视觉能力',
      value: 'vision',
@@ -178,7 +177,7 @@ export default function LLMForm({
        const config = item.spec.config;
        for (let i = 0; i < config.length; i++) {
          if (config[i].name == 'base_url') {
-            return config[i].default;
+            return config[i].default?.toString() || '';
          }
        }
        return '';
--- a/web/src/app/home/models/page.tsx
+++ b/web/src/app/home/models/page.tsx
@@ -8,7 +8,7 @@ import LLMCard from '@/app/home/models/component/llm-card/LLMCard';
 import LLMForm from '@/app/home/models/component/llm-form/LLMForm';
 import CreateCardComponent from '@/app/infra/basic-component/create-card-component/CreateCardComponent';
 import { httpClient } from '@/app/infra/http/HttpClient';
-import { LLMModel } from '@/app/infra/api/api-types';
+import { LLMModel } from '@/app/infra/entities/api';
 import {
  Dialog,
  DialogContent,
@@ -98,43 +98,27 @@ export default function LLMConfigPage() {
          />
        </DialogContent>
      </Dialog>
+      <div className={`${styles.modelListContainer}`}>

-      {cardList.length > 0 && (
-        <div className={`${styles.modelListContainer}`}>
-
-          <CreateCardComponent
-            width={'24rem'}
-            height={'10rem'}
-            plusSize={'90px'}
-            onClick={handleCreateModelClick}
-          />
-          {cardList.map((cardVO) => {
-            return (
-              <div
-                key={cardVO.id}
-                onClick={() => {
-                  selectLLM(cardVO);
-                }}
-              >
-                <LLMCard cardVO={cardVO}></LLMCard>
-              </div>
-            );
-          })}
-        </div>
-      )}
-
-      {cardList.length === 0 && (
-        <div className={`${styles.emptyContainer}`}>
-          <EmptyAndCreateComponent
-            title={'模型列表空空如也～'}
-            subTitle={'快去创建一个吧！'}
-            buttonText={'创建模型 +'}
-            onButtonClick={() => {
-              handleCreateModelClick();
-            }}
-          />
-        </div>
-      )}
+        <CreateCardComponent
+          width={'24rem'}
+          height={'10rem'}
+          plusSize={'90px'}
+          onClick={handleCreateModelClick}
+        />
+        {cardList.map((cardVO) => {
+          return (
+            <div
+              key={cardVO.id}
+              onClick={() => {
+                selectLLM(cardVO);
+              }}
+            >
+              <LLMCard cardVO={cardVO}></LLMCard>
+            </div>
+          );
+        })}
+      </div>
    </div>
  );
 }
--- a/web/src/app/home/pipelines/components/pipeline-form/PipelineChildFormEntity.ts
+++ b/web/src/app/home/pipelines/components/pipeline-form/PipelineChildFormEntity.ts
@@ -1,19 +0,0 @@
-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.label = props.label;
-    this.name = props.name;
-    this.formItems = props.formItems;
-  }
-}
--- a/web/src/app/home/pipelines/components/pipeline-form/PipelineFormComponent.tsx
+++ b/web/src/app/home/pipelines/components/pipeline-form/PipelineFormComponent.tsx
@@ -1,23 +1,29 @@
+
+import { useEffect, useState } from 'react';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { Pipeline } from '@/app/infra/entities/api';
+import { PipelineFormEntity, PipelineConfigTab, PipelineConfigStage } from '@/app/infra/entities/pipeline';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import DynamicFormComponent from '@/app/home/components/dynamic-form/DynamicFormComponent';
+import { Button } from '@/components/ui/button';
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { z } from "zod"
+import { Input } from "@/components/ui/input"
 import {
  Form,
-  Button,
-  Switch,
-  Select,
-  Input,
-  InputNumber,
-  SelectProps,
-} from 'antd';
-import { CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
-import { useEffect, useState } from 'react';
-import styles from './pipelineFormStyle.module.css';
-import { httpClient } from '@/app/infra/http/HttpClient';
-import { LLMModel, Pipeline } from '@/app/infra/api/api-types';
-import { UUID } from 'uuidjs';
-import { PipelineFormEntity } from '@/app/home/pipelines/components/pipeline-form/PipelineFormEntity';
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+

 export default function PipelineFormComponent({
  initValues,
  onFinish,
+  onNewPipelineCreated,
  isEditMode,
  pipelineId,
  disableForm,
@@ -28,625 +34,287 @@ export default function PipelineFormComponent({
  // 这里的写法很不安全不规范，未来流水线需要重新整理
  initValues?: PipelineFormEntity;
  onFinish: () => void;
+  onNewPipelineCreated: (pipelineId: string) => void;
 }) {
-  const [nowFormIndex, setNowFormIndex] = useState<number>(0);
-  const [nowAIRunner, setNowAIRunner] = useState('');
-  const [llmModelList, setLlmModelList] = useState<SelectProps['options']>([]);
+
+  const formSchema = isEditMode ? z.object({
+    basic: z.object({
+      name: z.string().min(1, { message: '名称不能为空' }),
+      description: z.string().min(1, { message: '描述不能为空' }),
+    }),
+    ai: z.record(z.string(), z.any()),
+    trigger: z.record(z.string(), z.any()),
+    safety: z.record(z.string(), z.any()),
+    output: z.record(z.string(), z.any()),
+  })
+    : z.object({
+      basic: z.object({
+        name: z.string().min(1, { message: '名称不能为空' }),
+        description: z.string().min(1, { message: '描述不能为空' }),
+      }),
+      ai: z.record(z.string(), z.any()).optional(),
+      trigger: z.record(z.string(), z.any()).optional(),
+      safety: z.record(z.string(), z.any()).optional(),
+      output: z.record(z.string(), z.any()).optional(),
+    });
+
+  type FormValues = z.infer<typeof formSchema>;
  // 这里不好，可以改成enum等
-  const formLabelList: FormLabel[] = [
-    { label: '基础', name: 'basic' },
+  const formLabelList: FormLabel[] = isEditMode ? [
+    { label: '基础信息', name: 'basic' },
    { label: 'AI能力', name: 'ai' },
    { label: '触发条件', name: 'trigger' },
    { label: '安全能力', name: 'safety' },
    { label: '输出处理', name: 'output' },
+  ] : [
+    { label: '基础信息', name: 'basic' },
  ];
-  const [basicForm] = Form.useForm();
-  const [aiForm] = Form.useForm();
-  const [triggerForm] = Form.useForm();
-  const [safetyForm] = Form.useForm();
-  const [outputForm] = Form.useForm();
+  // const [basicForm] = Form.useForm();
+  // const [aiForm] = Form.useForm();
+  // const [triggerForm] = Form.useForm();
+  // const [safetyForm] = Form.useForm();
+  // const [outputForm] = Form.useForm();
+  const [aiConfigTabSchema, setAIConfigTabSchema] = useState<PipelineConfigTab>();
+  const [triggerConfigTabSchema, setTriggerConfigTabSchema] = useState<PipelineConfigTab>();
+  const [safetyConfigTabSchema, setSafetyConfigTabSchema] = useState<PipelineConfigTab>();
+  const [outputConfigTabSchema, setOutputConfigTabSchema] = useState<PipelineConfigTab>();
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      basic: {},
+      ai: {},
+      trigger: {},
+      safety: {},
+      output: {},
+    },
+  });

  useEffect(() => {
-    getLLMModelList();
+
+    // get config schema from metadata
+    httpClient.getGeneralPipelineMetadata().then((resp) => {
+      for (const config of resp.configs) {
+        if (config.name === 'ai') {
+          setAIConfigTabSchema(config);
+        } else if (config.name === 'trigger') {
+          setTriggerConfigTabSchema(config);
+        } else if (config.name === 'safety') {
+          setSafetyConfigTabSchema(config);
+        } else if (config.name === 'output') {
+          setOutputConfigTabSchema(config);
+        }
+      }
+    });
  }, []);

  useEffect(() => {
-    console.log('initValues change: ', initValues);
    if (initValues) {
-      basicForm.setFieldsValue(initValues.basic);
-      aiForm.setFieldsValue(initValues.ai);
-      triggerForm.setFieldsValue(initValues.trigger);
-      safetyForm.setFieldsValue(initValues.safety);
-      outputForm.setFieldsValue(initValues.output);
+      form.reset(initValues);
    }
-  }, [aiForm, basicForm, initValues, outputForm, safetyForm, triggerForm]);

-  function getLLMModelList() {
-    httpClient
-      .getProviderLLMModels()
-      .then((resp) => {
-        setLlmModelList(
-          resp.models.map((model: LLMModel) => {
-            return {
-              value: model.uuid,
-              label: model.name,
-            };
-          }),
-        );
-      })
-      .catch((err) => {
-        console.error('get LLM model list error', err);
+    if (!isEditMode) {
+      form.reset({
+        basic: {
+          name: '',
+          description: '',
+        },
      });
-  }
-
-  function getNowFormLabel() {
-    return formLabelList[nowFormIndex];
-  }
-
-  function getPreFormLabel(): undefined | FormLabel {
-    if (nowFormIndex !== undefined && nowFormIndex > 0) {
-      return formLabelList[nowFormIndex - 1];
-    } else {
-      return undefined;
    }
-  }
+  }, [initValues, form]);

-  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);
-    }
-  }
-
-  function handleCommit() {
+  function handleFormSubmit(values: FormValues) {
+    console.log('handleFormSubmit', values);
    if (isEditMode) {
-      handleModify();
+      handleModify(values);
    } else {
-      handleCreate();
+      handleCreate(values);
    }
  }

-  function handleCreate() {
-    Promise.all([
-      basicForm.validateFields(),
-      aiForm.validateFields(),
-      triggerForm.validateFields(),
-      safetyForm.validateFields(),
-      outputForm.validateFields(),
-    ])
-      .then(() => {
-        const pipeline = assembleForm();
-        httpClient.createPipeline(pipeline).then(() => onFinish());
-      })
-      .catch((e) => {
-        console.error(e);
-      });
+  function handleCreate(values: FormValues) {
+    console.log('handleCreate', values);
+    const pipeline: Pipeline = {
+      description: values.basic.description,
+      name: values.basic.name,
+    };
+    httpClient.createPipeline(pipeline).then((resp) => {
+      onFinish();
+      onNewPipelineCreated(resp.uuid);
+    });
  }

-  function handleModify() {
-    Promise.all([
-      basicForm.validateFields(),
-      aiForm.validateFields(),
-      triggerForm.validateFields(),
-      safetyForm.validateFields(),
-      outputForm.validateFields(),
-    ])
-      .then(() => {
-        const pipeline = assembleForm();
-        httpClient
-          .updatePipeline(pipelineId || '', pipeline)
-          .then(() => onFinish());
-      })
-      .catch((e) => {
-        console.error(e);
-      });
+  function handleModify(values: FormValues) {
+
+    const realConfig = {
+      ai: values.ai,
+      trigger: values.trigger,
+      safety: values.safety,
+      output: values.output,
+    };
+
+    const pipeline: Pipeline = {
+      config: realConfig,
+      // created_at: '',
+      description: values.basic.description,
+      // for_version: '',
+      name: values.basic.name,
+      // stages: [],
+      // updated_at: '',
+      // uuid: pipelineId || '',
+      // is_default: false,
+    };
+    httpClient.updatePipeline(pipelineId || '', pipeline).then(() => onFinish());
  }

-  // TODO 类型混乱，需要优化
-  function assembleForm(): Pipeline {
-    console.log('basicForm:', basicForm.getFieldsValue());
-    console.log('aiForm:', aiForm.getFieldsValue());
-    console.log('triggerForm:', triggerForm.getFieldsValue());
-    console.log('safetyForm:', safetyForm.getFieldsValue());
-    console.log('outputForm:', outputForm.getFieldsValue());
-    const config: object = {
-      ai: aiForm.getFieldsValue(),
-      trigger: triggerForm.getFieldsValue(),
-      safety: safetyForm.getFieldsValue(),
-      output: outputForm.getFieldsValue(),
-    };
+  function renderDynamicForms(stage: PipelineConfigStage, formName: keyof FormValues) {
+    // 如果是 AI 配置，需要特殊处理
+    if (formName === 'ai') {
+      // 获取当前选择的 runner
+      const currentRunner = form.watch('ai.runner.runner');

-    return {
-      config,
-      created_at: '',
-      description: basicForm.getFieldsValue().description,
-      for_version: '',
-      name: basicForm.getFieldsValue().name,
-      stages: [],
-      updated_at: '',
-      uuid: UUID.generate(),
-    };
+      // 如果是 runner 配置项，直接渲染
+      if (stage.name === 'runner') {
+        return (
+          <div key={stage.name} className="space-y-4 mb-6">
+            <div className="text-lg font-medium">{stage.label.zh_CN}</div>
+            {stage.description && (
+              <div className="text-sm text-gray-500">{stage.description.zh_CN}</div>
+            )}
+            <DynamicFormComponent
+              itemConfigList={stage.config}
+              initialValues={(form.watch(formName) as Record<string, any>)?.[stage.name] || {}}
+              onSubmit={(values) => {
+                const currentValues = form.getValues(formName) as Record<string, any> || {};
+                form.setValue(formName, {
+                  ...currentValues,
+                  [stage.name]: values,
+                });
+              }}
+            />
+          </div>
+        );
+      }
+
+      // 如果不是当前选择的 runner 对应的配置项，则不渲染
+      if (stage.name !== currentRunner) {
+        return null;
+      }
+    }
+
+    return (
+      <div key={stage.name} className="space-y-4 mb-6">
+        <div className="text-lg font-medium">{stage.label.zh_CN}</div>
+        {stage.description && (
+          <div className="text-sm text-gray-500">{stage.description.zh_CN}</div>
+        )}
+        <DynamicFormComponent
+          itemConfigList={stage.config}
+          initialValues={(form.watch(formName) as Record<string, any>)?.[stage.name] || {}}
+          onSubmit={(values) => {
+            const currentValues = form.getValues(formName) as Record<string, any> || {};
+            form.setValue(formName, {
+              ...currentValues,
+              [stage.name]: values,
+            });
+          }}
+        />
+      </div>
+    );
  }

  return (
    <div style={{ maxHeight: '70vh', overflowY: 'auto' }}>
-      <h1>{getNowFormLabel().label}</h1>
-      <Form
-        layout={'vertical'}
-        style={{
-          display: getNowFormLabel().name === 'basic' ? 'block' : 'none',
-        }}
-        form={basicForm}
-        disabled={disableForm}
-      >
-        <Form.Item
-          label="流水线名称"
-          name={'name'}
-          rules={[
-            {
-              required: true,
-            },
-          ]}
-        >
-          <Input />
-        </Form.Item>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(handleFormSubmit)}>
+          <Tabs defaultValue={formLabelList[0].name}>
+            <TabsList>
+              {formLabelList.map((formLabel) => (
+                <TabsTrigger key={formLabel.name} value={formLabel.name}>
+                  {formLabel.label}
+                </TabsTrigger>
+              ))}
+            </TabsList>

-        <Form.Item
-          label="流水线描述"
-          name={'description'}
-          rules={[
-            {
-              required: true,
-            },
-          ]}
-        >
-          <Input />
-        </Form.Item>
-      </Form>
-      {/*  AI能力表单 ai  */}
-      <Form
-        layout={'vertical'}
-        style={{ display: getNowFormLabel().name === 'ai' ? 'block' : 'none' }}
-        form={aiForm}
-        disabled={disableForm}
-      >
-        {/* Runner 配置区块 */}
-        <div className={`${styles.formItemSubtitle}`}>运行器</div>
-        <Form.Item
-          label="运行器"
-          name={['runner', 'runner']}
-          rules={[{ required: true }]}
-        >
-          <Select
-            options={[
-              { label: '内置 Agent', value: 'local-agent' },
-              { label: 'Dify 服务 API', value: 'dify-service-api' },
-              { label: '阿里云百炼平台 API', value: 'dashscope-app-api' },
-            ]}
-            onChange={(value) => setNowAIRunner(value)}
-          />
-        </Form.Item>
+            {formLabelList.map((formLabel) => (
+              <TabsContent key={formLabel.name} value={formLabel.name} className='pr-6'>
+                <h1 className="text-xl font-bold mb-4">{formLabel.label}</h1>

-        {/* 内置 Agent 配置区块 */}
-        {nowAIRunner === 'local-agent' && (
-          <>
-            <div className={`${styles.formItemSubtitle}`}>配置内置Agent</div>
-            <Form.Item
-              label="模型"
-              name={['local-agent', 'model']}
-              rules={[{ required: true }]}
-              tooltip="从模型库中选择"
-            >
-              <Select
-                options={llmModelList}
-                placeholder="请选择语言模型"
-                showSearch
-              />
-            </Form.Item>
-            <Form.Item
-              label="最大回合数"
-              name={['local-agent', 'max-round']}
-              rules={[
-                {
-                  required: true,
-                },
-              ]}
-            >
-              <InputNumber precision={0} />
-            </Form.Item>
-            {/*  TODO 这里要做转换处理  */}
-            <Form.Item
-              label="提示词"
-              name={['local-agent', 'prompt']}
-              rules={[{ required: true }]}
-              tooltip="按JSON格式输入"
-            >
-              <Input.TextArea
-                rows={4}
-                placeholder={`示例结构：{ "role": "user", "content": "你好" } `}
-              />
-            </Form.Item>
-          </>
-        )}
-        {/* Dify 服务 API 区块 */}
-        {nowAIRunner === 'dify-service-api' && (
-          <>
-            <div className={`${styles.formItemSubtitle}`}>配置Dify服务API</div>
-            <Form.Item
-              label="基础 URL"
-              name={['dify-service-api', 'base-url']}
-              rules={[
-                { required: true },
-                { type: 'url', message: '请输入有效的URL地址' },
-              ]}
-            >
-              <Input />
-            </Form.Item>
-            <Form.Item
-              label="应用类型"
-              name={['dify-service-api', 'app-type']}
-              initialValue={'chat'}
-              rules={[{ required: true }]}
-            >
-              <Select
-                options={[
-                  { label: '聊天（包括Chatflow）', value: 'chat' },
-                  { label: 'Agent', value: 'agent' },
-                  { label: '工作流', value: 'workflow' },
-                ]}
-              />
-            </Form.Item>
-            <Form.Item
-              label="API 密钥"
-              name={['dify-service-api', 'api-key']}
-              rules={[{ required: true }]}
-            >
-              <Input.Password visibilityToggle={false} />
-            </Form.Item>
-            <Form.Item
-              label="思维链转换"
-              name={['dify-service-api', 'thinking-convert']}
-              rules={[{ required: true }]}
-            >
-              <Select
-                options={[
-                  { label: '转换成 \<think\>...\<\/think\>', value: 'plain' },
-                  { label: '原始', value: 'original' },
-                  { label: '移除', value: 'remove' },
-                ]}
-              />
-            </Form.Item>
-          </>
-        )}
-        {/* 阿里云百炼区块 */}
-        {nowAIRunner === 'dashscope-app-api' && (
-          <>
-            <div className={`${styles.formItemSubtitle}`}>
-              配置阿里云百炼平台 API
+                {formLabel.name === 'basic' && (
+                  <div className="space-y-6">
+                    <FormField
+                      control={form.control}
+                      name="basic.name"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>名称<span className="text-red-500">*</span></FormLabel>
+                          <FormControl>
+                            <Input {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+
+                    <FormField
+                      control={form.control}
+                      name="basic.description"
+                      render={({ field }) => (
+                        <FormItem>
+                          <FormLabel>描述<span className="text-red-500">*</span></FormLabel>
+                          <FormControl>
+                            <Input {...field} />
+                          </FormControl>
+                          <FormMessage />
+                        </FormItem>
+                      )}
+                    />
+                  </div>
+                )}
+
+                {isEditMode && (
+                  <>
+                    {formLabel.name === 'ai' && aiConfigTabSchema && (
+                      <div className="space-y-6">
+                        {aiConfigTabSchema.stages.map((stage) => renderDynamicForms(stage, 'ai'))}
+                      </div>
+                    )}
+
+                    {formLabel.name === 'trigger' && triggerConfigTabSchema && (
+                      <div className="space-y-6">
+                        {triggerConfigTabSchema.stages.map((stage) => renderDynamicForms(stage, 'trigger'))}
+                      </div>
+                    )}
+
+                    {formLabel.name === 'safety' && safetyConfigTabSchema && (
+                      <div className="space-y-6">
+                        {safetyConfigTabSchema.stages.map((stage) => renderDynamicForms(stage, 'safety'))}
+                      </div>
+                    )}
+
+                    {formLabel.name === 'output' && outputConfigTabSchema && (
+                      <div className="space-y-6">
+                        {outputConfigTabSchema.stages.map((stage) => renderDynamicForms(stage, 'output'))}
+                      </div>
+                    )}
+                  </>
+                )}
+              </TabsContent>
+            ))}
+          </Tabs>
+
+          <div className="sticky bottom-0 left-0 right-0 bg-background border-t p-4 mt-4">
+            <div className="flex justify-end gap-2">
+              <Button type="submit">
+                {isEditMode ? '保存' : '提交'}
+              </Button>
+              <Button type="button" variant="outline" onClick={onFinish}>
+                取消
+              </Button>
            </div>
-            <Form.Item
-              label="应用类型"
-              name={['dashscope-app-api', 'app-type']}
-              rules={[{ required: true }]}
-            >
-              <Select
-                options={[
-                  { label: 'Agent', value: 'agent' },
-                  { label: '工作流', value: 'workflow' },
-                ]}
-              />
-            </Form.Item>
-            <Form.Item
-              label="API 密钥"
-              name={['dashscope-app-api', 'api-key']}
-              rules={[{ required: true }]}
-            >
-              <Input.Password visibilityToggle={false} />
-            </Form.Item>
-            <Form.Item
-              label="应用 ID"
-              name={['dashscope-app-api', 'app-id']}
-              rules={[{ required: true }]}
-            >
-              <Input />
-            </Form.Item>
-            <Form.Item
-              label="引用文本"
-              name={['dashscope-app-api', 'references_quote']}
-              initialValue={'参考资料来自:'}
-            >
-              <Input.TextArea rows={2} />
-            </Form.Item>
-          </>
-        )}
+          </div>
+        </form>
      </Form>
-
-      {/*  触发条件表单 trigger */}
-      <Form
-        layout={'vertical'}
-        style={{
-          display: getNowFormLabel().name === 'trigger' ? 'block' : 'none',
-        }}
-        form={triggerForm}
-        disabled={disableForm}
-      >
-        {/* 群响应规则块 */}
-        <div className={`${styles.formItemSubtitle}`}> 群响应规则</div>
-        <Form.Item
-          label={'是否在消息@机器人时触发'}
-          name={['group-respond-rules', 'at']}
-          rules={[{ required: true }]}
-        >
-          <Switch />
-        </Form.Item>
-        <Form.Item
-          label={'消息前缀'}
-          name={['group-respond-rules', 'prefix']}
-          rules={[{ required: true }]}
-        >
-          <Select
-            options={[{ value: '"type": "string"', label: '"type": "string"' }]}
-          />
-        </Form.Item>
-        <Form.Item
-          label={'正则表达式'}
-          name={['group-respond-rules', 'regexp']}
-          rules={[{ required: true }]}
-        >
-          <Select mode="tags" options={[]} />
-        </Form.Item>
-        <Form.Item
-          label={'随机'}
-          name={['group-respond-rules', 'random']}
-          rules={[{ required: false }]}
-        >
-          <InputNumber max={1} min={0} step={0.05} />
-        </Form.Item>
-        <div className={`${styles.formItemSubtitle}`}> 访问控制 </div>
-        <Form.Item
-          label={'模式'}
-          name={['access-control', 'mode']}
-          rules={[{ required: true }]}
-          tooltip={'访问控制模式'}
-        >
-          <Select
-            options={[
-              { label: '黑名单', value: 'blacklist' },
-              { label: '白名单', value: 'Whitelist' },
-            ]}
-          />
-        </Form.Item>
-
-        <Form.Item
-          label={'黑名单'}
-          name={['access-control', 'blacklist']}
-          rules={[{ required: true }]}
-        >
-          <Select mode={'tags'} options={[]} />
-        </Form.Item>
-
-        <Form.Item
-          label={'白名单'}
-          name={['access-control', 'whitelist']}
-          rules={[{ required: true }]}
-        >
-          <Select mode={'tags'} options={[]} />
-        </Form.Item>
-
-        <div className={`${styles.formItemSubtitle}`}> 消息忽略规则 </div>
-
-        <Form.Item
-          label={'前缀'}
-          name={['ignore-rules', 'whitelist']}
-          rules={[{ required: true }]}
-          tooltip={'消息前缀'}
-        >
-          <Select mode={'tags'} options={[]} />
-        </Form.Item>
-
-        <Form.Item
-          label={'正则表达式'}
-          name={['ignore-rules', 'regexp']}
-          rules={[{ required: true }]}
-          tooltip={'消息正则表达式'}
-        >
-          <Select mode={'tags'} options={[]} />
-        </Form.Item>
-      </Form>
-
-      {/*  安全控制表单 safety  */}
-      <Form
-        layout={'vertical'}
-        style={{
-          display: getNowFormLabel().name === 'safety' ? 'block' : 'none',
-        }}
-        form={safetyForm}
-        disabled={disableForm}
-      >
-        {/* 内容过滤块 content-filter */}
-        <div className={`${styles.formItemSubtitle}`}> 内容过滤 </div>
-        <Form.Item
-          label={'检查范围'}
-          name={['content-filter', 'scope']}
-          rules={[{ required: true }]}
-        >
-          <Select
-            options={[
-              { label: '全部', value: 'all' },
-              { label: '传入消息（用户消息）', value: 'income-msg' },
-              { label: '传出消息（机器人消息）', value: 'output-msg' },
-            ]}
-          />
-        </Form.Item>
-
-        <Form.Item
-          label={'检查敏感词'}
-          name={['content-filter', 'check-sensitive-words']}
-          rules={[{ required: true }]}
-        >
-          <Switch />
-        </Form.Item>
-
-        {/* 速率限制块 rate-limit */}
-        <div className={`${styles.formItemSubtitle}`}> 速率限制 </div>
-        <Form.Item
-          label={'窗口长度（秒）'}
-          name={['rate-limit', 'window-length']}
-          rules={[{ required: true }]}
-          initialValue={60}
-        >
-          <InputNumber></InputNumber>
-        </Form.Item>
-        <Form.Item
-          label={'限制次数'}
-          name={['rate-limit', 'limitation']}
-          rules={[{ required: true }]}
-          initialValue={60}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label={'策略'}
-          name={['rate-limit', 'strategy']}
-          rules={[{ required: true }]}
-          initialValue={'drop'}
-        >
-          <Select
-            options={[
-              { label: '丢弃', value: 'drop' },
-              { label: '等待', value: 'wait' },
-            ]}
-          />
-        </Form.Item>
-      </Form>
-
-      {/*  输出处理控制表单 output  */}
-      <Form
-        layout={'vertical'}
-        style={{
-          display: getNowFormLabel().name === 'output' ? 'block' : 'none',
-        }}
-        form={outputForm}
-        disabled={disableForm}
-      >
-        {/* 长文本处理区块 */}
-        <div className={`${styles.formItemSubtitle}`}> 长文本处理 </div>
-        <Form.Item
-          label="阈值"
-          name={['long-text-processing', 'threshold']}
-          rules={[{ required: true }]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label="策略"
-          name={['long-text-processing', 'strategy']}
-          rules={[{ required: true }]}
-        >
-          <Select
-            options={[
-              { label: '转发消息组件', value: 'forward' },
-              { label: '转换为图片', value: 'image' },
-            ]}
-          />
-        </Form.Item>
-        <Form.Item
-          label="字体路径"
-          name={['long-text-processing', 'font-path']}
-          rules={[{ required: true }]}
-        >
-          <Input />
-        </Form.Item>
-
-        {/* 强制延迟区块 */}
-        <div className={`${styles.formItemSubtitle}`}> 强制延迟 </div>
-        <Form.Item
-          label="最小秒数"
-          name={['force-delay', 'min']}
-          rules={[{ required: true }]}
-        >
-          <InputNumber />
-        </Form.Item>
-        <Form.Item
-          label="最大秒数"
-          name={['force-delay', 'max']}
-          rules={[{ required: true }]}
-        >
-          <InputNumber />
-        </Form.Item>
-
-        {/* 杂项区块 */}
-        <div className={`${styles.formItemSubtitle}`}> 杂项 </div>
-        <Form.Item
-          label="不输出异常信息给用户"
-          name={['misc', 'hide-exception']}
-          rules={[{ required: true }]}
-          valuePropName="checked"
-        >
-          <Switch />
-        </Form.Item>
-        <Form.Item
-          label="在回复中@发送者"
-          name={['misc', 'at-sender']}
-          rules={[{ required: true }]}
-          valuePropName="checked"
-        >
-          <Switch />
-        </Form.Item>
-        <Form.Item
-          label="引用原文"
-          name={['misc', 'quote-origin']}
-          rules={[{ required: true }]}
-          valuePropName="checked"
-        >
-          <Switch />
-        </Form.Item>
-        <Form.Item
-          label="跟踪函数调用"
-          name={['misc', 'track-function-calls']}
-          rules={[{ required: true }]}
-          valuePropName="checked"
-        >
-          <Switch />
-        </Form.Item>
-      </Form>
-
-      <div className={`${styles.changeFormButtonGroupContainer}`}>
-        <Button
-          type="primary"
-          icon={<CaretLeftOutlined />}
-          onClick={reduceFormLabelIndex}
-          disabled={!getPreFormLabel()}
-        >
-          {getPreFormLabel()?.label || '暂无更多'}
-        </Button>
-        <Button
-          type="primary"
-          icon={<CaretRightOutlined />}
-          onClick={addFormLabelIndex}
-          disabled={!getNextFormLabel()}
-          iconPosition={'end'}
-        >
-          {getNextFormLabel()?.label || '暂无更多'}
-        </Button>
-
-        <Button type="primary" onClick={handleCommit}>
-          提交
-        </Button>
-      </div>
    </div>
  );
 }
--- a/web/src/app/home/pipelines/components/pipeline-form/PipelineFormEntity.ts
+++ b/web/src/app/home/pipelines/components/pipeline-form/PipelineFormEntity.ts
@@ -1,7 +0,0 @@
-export interface PipelineFormEntity {
-  basic: object;
-  ai: object;
-  trigger: object;
-  safety: object;
-  output: object;
-}
--- a/web/src/app/home/pipelines/page.tsx
+++ b/web/src/app/home/pipelines/page.tsx
@@ -1,13 +1,20 @@
 'use client';
-import { Modal } from 'antd';
 import { useState, useEffect } from 'react';
 import CreateCardComponent from '@/app/infra/basic-component/create-card-component/CreateCardComponent';
 import PipelineFormComponent from './components/pipeline-form/PipelineFormComponent';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { PipelineCardVO } from '@/app/home/pipelines/components/pipeline-card/PipelineCardVO';
 import PipelineCard from '@/app/home/pipelines/components/pipeline-card/PipelineCard';
-import { PipelineFormEntity } from '@/app/home/pipelines/components/pipeline-form/PipelineFormEntity';
+import { PipelineFormEntity } from '@/app/infra/entities/pipeline';
 import styles from './pipelineConfig.module.css';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
 import { Button } from '@/components/ui/button';

 export default function PluginConfigPage() {
@@ -35,16 +42,16 @@ export default function PluginConfigPage() {
      .then((value) => {
        let currentTime = new Date();
        const pipelineList = value.pipelines.map((pipeline) => {
-          let lastUpdatedTimeAgo = Math.floor((currentTime.getTime() - new Date(pipeline.updated_at).getTime()) / 1000 / 60 / 60 / 24);
-          
+          let lastUpdatedTimeAgo = Math.floor((currentTime.getTime() - new Date(pipeline.updated_at ?? currentTime.getTime()).getTime()) / 1000 / 60 / 60 / 24);
+
          let lastUpdatedTimeAgoText = lastUpdatedTimeAgo > 0 ? ` ${lastUpdatedTimeAgo} 天前` : '今天';
-          
+
          return new PipelineCardVO({
            lastUpdatedTimeAgo: lastUpdatedTimeAgoText,
            description: pipeline.description,
-            id: pipeline.uuid,
+            id: pipeline.uuid ?? '',
            name: pipeline.name,
-            isDefault: pipeline.is_default,
+            isDefault: pipeline.is_default ?? false,
          });
        });
        setPipelineList(pipelineList);
@@ -73,58 +80,64 @@ export default function PluginConfigPage() {

  return (
    <div className={styles.configPageContainer}>
-      
-      <Modal
-        title={isEditForm ? '编辑流水线' : '创建流水线'}
-        centered
-        open={modalOpen}
-        destroyOnClose={true}
-        onOk={() => setModalOpen(false)}
-        onCancel={() => setModalOpen(false)}
-        width={700}
-        footer={null}
-      >
-        <PipelineFormComponent
-          onFinish={() => {
-            getPipelines();
-            setModalOpen(false);
+
+      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+        <DialogContent className="w-[700px] max-h-[80vh] p-0 flex flex-col">
+          <DialogHeader className="px-6 pt-6 pb-4">
+            <DialogTitle>
+              {isEditForm ? '编辑流水线' : '创建流水线'}
+            </DialogTitle>
+          </DialogHeader>
+          <div className="flex-1 overflow-y-auto px-6">
+            <PipelineFormComponent
+              onNewPipelineCreated={(pipelineId) => {
+                setDisableForm(true);
+                setIsEditForm(true);
+                setModalOpen(true);
+                setSelectedPipelineId(pipelineId);
+                getSelectedPipelineForm(pipelineId);
+              }}
+              onFinish={() => {
+                getPipelines();
+                setModalOpen(false);
+              }}
+              isEditMode={isEditForm}
+              pipelineId={selectedPipelineId}
+              disableForm={disableForm}
+              initValues={selectedPipelineFormValue}
+            />
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <div className={styles.pipelineListContainer}>
+        <CreateCardComponent
+          width={'24rem'}
+          height={'10rem'}
+          plusSize={'90px'}
+          onClick={() => {
+            setIsEditForm(false);
+            setModalOpen(true);
          }}
-          isEditMode={isEditForm}
-          pipelineId={selectedPipelineId}
-          disableForm={disableForm}
-          initValues={selectedPipelineFormValue}
        />
-      </Modal>

-      {pipelineList.length > 0 && (
-        <div className={styles.pipelineListContainer}>
-          <CreateCardComponent
-            width={'24rem'}
-            height={'10rem'}
-            plusSize={'90px'}
-            onClick={() => {
-              setModalOpen(true);
-            }}
-          />
-
-          {pipelineList.map((pipeline) => {
-            return (
-              <div
-                key={pipeline.id}
-                onClick={() => {
-                  setDisableForm(true);
-                  setIsEditForm(true);
-                  setModalOpen(true);
-                  setSelectedPipelineId(pipeline.id);
-                  getSelectedPipelineForm(pipeline.id);
-                }}
-              >
-                <PipelineCard cardVO={pipeline} />
-              </div>
-            );
-          })}
-        </div>
-      )}
+        {pipelineList.map((pipeline) => {
+          return (
+            <div
+              key={pipeline.id}
+              onClick={() => {
+                setDisableForm(true);
+                setIsEditForm(true);
+                setModalOpen(true);
+                setSelectedPipelineId(pipeline.id);
+                getSelectedPipelineForm(pipeline.id);
+              }}
+            >
+              <PipelineCard cardVO={pipeline} />
+            </div>
+          );
+        })}
+      </div>
    </div>
  );
 }
--- a/web/src/app/infra/api/api-types/index.ts
+++ b/web/src/app/infra/api/api-types/index.ts
@@ -1,3 +1,7 @@
+import { IDynamicFormItemSchema } from '@/app/infra/entities/form/dynamic';
+import { I18nLabel } from '@/app/infra/entities/common';
+import { PipelineConfigTab } from '@/app/infra/entities/pipeline';
+
 export interface ApiResponse<T> {
  code: number;
  data: T;
@@ -26,7 +30,9 @@ export interface Requester {
  label: I18nText;
  description: I18nText;
  icon?: string;
-  spec: object;
+  spec: {
+    config: IDynamicFormItemSchema[];
+  }
 }

 export interface ApiRespProviderLLMModels {
@@ -58,15 +64,15 @@ export interface ApiRespPipelines {
 }

 export interface Pipeline {
-  uuid: string;
+  uuid?: string;
  name: string;
  description: string;
-  for_version: string;
+  for_version?: string;
  config: object;
-  stages: string[];
-  is_default: boolean;
-  created_at: string;
-  updated_at: string;
+  stages?: string[];
+  is_default?: boolean;
+  created_at?: string;
+  updated_at?: string;
 }

 export interface ApiRespPlatformAdapters {
@@ -302,3 +308,7 @@ interface GetPipeline {
 export interface GetPipelineResponseData {
  pipeline: GetPipeline;
 }
+
+export interface GetPipelineMetadataResponseData {
+  configs: PipelineConfigTab[];
+}
--- a/web/src/app/infra/entities/common.ts
+++ b/web/src/app/infra/entities/common.ts
@@ -0,0 +1,5 @@
+export interface I18nLabel {
+  en_US: string;
+  zh_CN: string;
+  ja_JP?: string;
+}
--- a/web/src/app/infra/entities/form/dynamic.ts
+++ b/web/src/app/infra/entities/form/dynamic.ts
@@ -0,0 +1,29 @@
+import { I18nLabel } from '@/app/infra/entities/common';
+
+export interface IDynamicFormItemSchema {
+    id: string;
+    default: string | number | boolean | Array<unknown>;
+    label: I18nLabel;
+    name: string;
+    required: boolean;
+    type: DynamicFormItemType;
+    description?: I18nLabel;
+    options?: IDynamicFormItemOption[];
+  }
+
+export enum DynamicFormItemType {
+    INT = 'integer',
+    FLOAT = 'float',
+    BOOLEAN = 'boolean',
+    STRING = 'string',
+    STRING_ARRAY = 'array[string]',
+    SELECT = 'select',
+    LLM_MODEL_SELECTOR = 'llm-model-selector',
+    PROMPT_EDITOR = 'prompt-editor',
+    UNKNOWN = 'unknown',
+  }
+
+export interface IDynamicFormItemOption {
+    name: string;
+    label: I18nLabel;
+  }
--- a/web/src/app/infra/entities/pipeline/index.ts
+++ b/web/src/app/infra/entities/pipeline/index.ts
@@ -0,0 +1,23 @@
+import { I18nLabel } from '@/app/infra/entities/common';
+import { IDynamicFormItemSchema } from '@/app/infra/entities/form/dynamic';
+
+export interface PipelineFormEntity {
+  basic: object;
+  ai: object;
+  trigger: object;
+  safety: object;
+  output: object;
+}
+
+export interface PipelineConfigTab {
+  name: string;
+  label: I18nLabel;
+  stages: PipelineConfigStage[];
+}
+
+export interface PipelineConfigStage {
+  name: string;
+  label: I18nLabel;
+  description?: I18nLabel;
+  config: IDynamicFormItemSchema[];
+}
--- a/web/src/app/infra/http/HttpClient.ts
+++ b/web/src/app/infra/http/HttpClient.ts
@@ -28,7 +28,8 @@ import {
  ApiRespUserToken,
  MarketPluginResponse,
  GetPipelineResponseData,
-} from '../api/api-types';
+  GetPipelineMetadataResponseData
+} from '@/app/infra/entities/api';
 import { notification } from 'antd';

 type JSONValue = string | number | boolean | JSONObject | JSONArray | null;
@@ -249,7 +250,7 @@ class HttpClient {
  }

  // ============ Pipeline API ============
-  public getGeneralPipelineMetadata(): Promise<object> {
+  public getGeneralPipelineMetadata(): Promise<GetPipelineMetadataResponseData> {
    // as designed, this method will be deprecated, and only for developer to check the prefered config schema
    return this.get('/api/v1/pipelines/_/metadata');
  }
--- a/web/src/components/ui/tabs.tsx
+++ b/web/src/components/ui/tabs.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }