refactor: playground params form

src/pages/playground/video/forms/index.tsx

@@ -0,0 +1,85 @@
+import { Form } from 'antd';
+import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
+import ModelSelect from '../../components/model-select';
+import ParamsFields from '../../components/params-fields';
+import { FormContext } from '../../config/form-context';
+import { ParamsSchema } from '../../config/types';
+
+type ParamsSettingsProps = {
+  ref?: any;
+  parametersTitle?: React.ReactNode;
+  showModelSelector?: boolean;
+  modelList?: Global.BaseOption<string>[];
+  onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
+  onModelChange?: (model: string) => void;
+  onFinish?: (values: any) => void;
+  onFinishFailed?: (errorInfo: any) => void;
+  initialValues?: Record<string, any>; // for initial values when switch model, aviod update values from setParams
+  meta?: Record<string, any>;
+  paramsConfig?: ParamsSchema[];
+};
+
+const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
+  (
+    {
+      onValuesChange,
+      onModelChange,
+      onFinish,
+      onFinishFailed,
+      parametersTitle,
+      initialValues,
+      modelList,
+      showModelSelector = true,
+      meta,
+      paramsConfig
+    },
+    ref
+  ) => {
+    const [form] = Form.useForm();
+
+    useImperativeHandle(ref, () => ({
+      form,
+      getFieldsValue: form.getFieldsValue,
+      setFieldsValue: form.setFieldsValue
+    }));
+
+    const handleOnFinish = (values: any) => {
+      onFinish?.(values);
+    };
+
+    const handleOnFinishFailed = (errorInfo: any) => {
+      onFinishFailed?.(errorInfo);
+    };
+
+    useEffect(() => {
+      form.setFieldsValue(initialValues);
+    }, [initialValues]);
+
+    return (
+      <FormContext.Provider
+        value={{
+          meta,
+          modelList: modelList || [],
+          onValuesChange: onValuesChange,
+          onModelChange: onModelChange
+        }}
+      >
+        <Form
+          form={form}
+          onValuesChange={onValuesChange}
+          onFinish={handleOnFinish}
+          onFinishFailed={handleOnFinishFailed}
+          initialValues={initialValues}
+        >
+          <ModelSelect
+            title={parametersTitle}
+            showModelSelector={showModelSelector}
+          ></ModelSelect>
+          <ParamsFields paramsConfig={paramsConfig}></ParamsFields>
+        </Form>
+      </FormContext.Provider>
+    );
+  }
+);
+
+export default ParamsSettings;

src/pages/playground/video/page.tsx

@@ -15,7 +15,6 @@ import React, {
   useState
 } from 'react';
 import { CREATE_VIDEO_API } from '../apis';
-import DynamicParams from '../components/dynamic-params';
 import MessageInput from '../components/message-input';
 import RightContainer from '../components/right-container';
 import ViewCommonCode from '../components/view-common-code';
@@ -24,6 +23,7 @@ import useTextVideo from '../hooks/use-text-video';
 import '../style/ground-llm.less';
 import '../style/system-message-wrap.less';
 import { generateCode } from '../view-code/video';
+import DataForm from './forms';
 
 interface MessageProps {
   modelList: Global.BaseOption<string>[];
@@ -241,7 +241,7 @@ const GroundVideo: React.FC<MessageProps> = forwardRef((props, ref) => {
         </div>
       </div>
       <RightContainer collapsed={collapse}>
-        <DynamicParams
+        <DataForm
           ref={form}
           onValuesChange={handleOnValuesChange}
           paramsConfig={paramsConfig}