fix: params form render depds on fields

This commit is contained in:
jialin
2025-02-23 13:32:03 +08:00
parent 2c2e9396c4
commit 1dd7037aa0
4 changed files with 15 additions and 10 deletions
@@ -22,8 +22,9 @@ type ParamsSettingsProps = {
onValuesChange?: (changeValues: any, value: Record<string, any>) => void; onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
onModelChange?: (model: string) => void; onModelChange?: (model: string) => void;
paramsConfig?: ParamsSchema[]; paramsConfig?: ParamsSchema[];
initialValues?: Record<string, any>; // for initial values when switch model initialValues?: Record<string, any>; // for initial values when switch model, aviod update values from setParams
extra?: React.ReactNode; extra?: React.ReactNode;
watchFields?: any[];
}; };
const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef( const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
@@ -35,6 +36,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
initialValues, initialValues,
paramsConfig, paramsConfig,
modelList, modelList,
watchFields = [],
showModelSelector = true, showModelSelector = true,
extra extra
}, },
@@ -43,14 +45,6 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
const intl = useIntl(); const intl = useIntl();
const [form] = Form.useForm(); const [form] = Form.useForm();
const formId = useId(); const formId = useId();
console.log('dynamic----params');
const dependFieldsValue = Form.useWatch([], form);
console.log(
'dependFieldsValue===',
dependFieldsValue,
paramsConfig?.flatMap((item) => item.dependencies || [])
);
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
form form
@@ -129,7 +123,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
</Form.Item> </Form.Item>
); );
}); });
}, [paramsConfig, intl, dependFieldsValue]); }, [paramsConfig, intl, watchFields]);
return ( return (
<Form <Form
@@ -50,6 +50,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
handleToggleParamsStyle, handleToggleParamsStyle,
setParams, setParams,
form, form,
watchFields,
paramsConfig, paramsConfig,
initialValues, initialValues,
parameters, parameters,
@@ -295,6 +296,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
<div className="box"> <div className="box">
<DynamicParams <DynamicParams
ref={form} ref={form}
watchFields={watchFields}
parametersTitle={ parametersTitle={
<div className="flex-between flex-center"> <div className="flex-between flex-center">
<span> <span>
@@ -71,6 +71,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
setParams, setParams,
updateCacheFormData, updateCacheFormData,
form, form,
watchFields,
paramsConfig, paramsConfig,
initialValues, initialValues,
parameters, parameters,
@@ -493,6 +494,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
<div className="box"> <div className="box">
<DynamicParams <DynamicParams
ref={form} ref={form}
watchFields={watchFields}
parametersTitle={ parametersTitle={
<div className="flex-between flex-center"> <div className="flex-between flex-center">
<span> <span>
@@ -9,6 +9,7 @@ import {
imageSizeOptions as imageSizeList imageSizeOptions as imageSizeList
} from '@/pages/playground/config/params-config'; } from '@/pages/playground/config/params-config';
import { useSearchParams } from '@umijs/max'; import { useSearchParams } from '@umijs/max';
import { Form } from 'antd';
import _ from 'lodash'; import _ from 'lodash';
import React, { import React, {
useCallback, useCallback,
@@ -193,6 +194,11 @@ export const useInitImageMeta = (props: MessageProps) => {
...openaiCompatibleFieldsDefaultValus, ...openaiCompatibleFieldsDefaultValus,
...advancedFieldsDefaultValus ...advancedFieldsDefaultValus
}); });
const randomSeed = Form.useWatch('random_seed', form.current?.form);
const watchFields = useMemo(() => {
return ['random_seed'];
}, [randomSeed]);
const getNewImageSizeOptions = (metaData: any) => { const getNewImageSizeOptions = (metaData: any) => {
const { max_height, max_width } = metaData || {}; const { max_height, max_width } = metaData || {};
@@ -420,6 +426,7 @@ export const useInitImageMeta = (props: MessageProps) => {
handleToggleParamsStyle, handleToggleParamsStyle,
setParams, setParams,
form, form,
watchFields,
paramsConfig, paramsConfig,
initialValues, initialValues,
parameters, parameters,