fix: set flow variable default value (#1973)

This commit is contained in:
Dreammy23 2024-09-04 23:47:25 +08:00 committed by GitHub
commit ef624b09b9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 22 additions and 20 deletions

View File

@ -1,5 +1,5 @@
import { apiInterceptors, getKeys, getVariablesByKey } from '@/client/api'; import { apiInterceptors, getKeys, getVariablesByKey } from '@/client/api';
import { IGetKeysResponseData, IVariableItem } from '@/types/flow'; import { IFlowUpdateParam, IGetKeysResponseData, IVariableItem } from '@/types/flow';
import { buildVariableString } from '@/utils/flow'; import { buildVariableString } from '@/utils/flow';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons'; import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { Button, Cascader, Form, Input, Modal, Select, Space } from 'antd'; import { Button, Cascader, Form, Input, Modal, Select, Space } from 'antd';
@ -17,7 +17,11 @@ interface Option {
isLeaf?: boolean; isLeaf?: boolean;
} }
export const AddFlowVariableModal: React.FC = () => { type Props = {
flowInfo?: IFlowUpdateParam;
};
export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const [form] = Form.useForm(); const [form] = Form.useForm();
@ -155,7 +159,7 @@ export const AddFlowVariableModal: React.FC = () => {
autoComplete='off' autoComplete='off'
layout='vertical' layout='vertical'
className='mt-8' className='mt-8'
initialValues={{ parameters: [{}] }} initialValues={{ parameters: flowInfo?.variables || [{}] }}
> >
<Form.List name='parameters'> <Form.List name='parameters'>
{(fields, { add, remove }) => ( {(fields, { add, remove }) => (

View File

@ -308,15 +308,14 @@ export default function AppContent() {
className='w-[230px] h-[40px] border-1 border-white backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 dark:border-[#6f7f95] dark:bg-[#6f7f95] dark:bg-opacity-60' className='w-[230px] h-[40px] border-1 border-white backdrop-filter backdrop-blur-lg bg-white bg-opacity-30 dark:border-[#6f7f95] dark:bg-[#6f7f95] dark:bg-opacity-60'
/> />
</div> </div>
<div className='flex items-center gap-4 h-10'>
<Button <Button
className='border-none text-white bg-button-gradient h-full flex items-center' className='border-none text-white bg-button-gradient flex items-center'
icon={<PlusOutlined className='text-base' />} icon={<PlusOutlined className='text-base' />}
onClick={handleCreate} onClick={handleCreate}
> >
{t('create_app')} {t('create_app')}
</Button> </Button>
</div>
</div> </div>
<div className=' w-full flex flex-wrap pb-12 mx-[-8px]'> <div className=' w-full flex flex-wrap pb-12 mx-[-8px]'>
{apps.map(item => { {apps.map(item => {

View File

@ -26,14 +26,13 @@ import 'reactflow/dist/style.css';
const nodeTypes = { customNode: CanvasNode }; const nodeTypes = { customNode: CanvasNode };
const edgeTypes = { buttonedge: ButtonEdge }; const edgeTypes = { buttonedge: ButtonEdge };
const Canvas: React.FC = () => { const Canvas: React.FC = () => {
const { t } = useTranslation(); const { t } = useTranslation();
const [messageApi, contextHolder] = message.useMessage();
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const id = searchParams?.get('id') || ''; const id = searchParams?.get('id') || '';
const reactFlow = useReactFlow(); const reactFlow = useReactFlow();
const [messageApi, contextHolder] = message.useMessage();
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [nodes, setNodes, onNodesChange] = useNodesState([]); const [nodes, setNodes, onNodesChange] = useNodesState([]);
@ -43,10 +42,10 @@ const Canvas: React.FC = () => {
const [isSaveFlowModalOpen, setIsSaveFlowModalOpen] = useState(false); const [isSaveFlowModalOpen, setIsSaveFlowModalOpen] = useState(false);
const [isExportFlowModalOpen, setIsExportFlowModalOpen] = useState(false); const [isExportFlowModalOpen, setIsExportFlowModalOpen] = useState(false);
const [isImportModalOpen, setIsImportFlowModalOpen] = useState(false); const [isImportModalOpen, setIsImportFlowModalOpen] = useState(false);
if (localStorage.getItem('importFlowData') ) { if (localStorage.getItem('importFlowData')) {
const importFlowData = JSON.parse(localStorage.getItem('importFlowData') ); const importFlowData = JSON.parse(localStorage.getItem('importFlowData') || '');
localStorage.removeItem('importFlowData') localStorage.removeItem('importFlowData');
setLoading(true); setLoading(true);
const flowData = mapUnderlineToHump(importFlowData.flow_data); const flowData = mapUnderlineToHump(importFlowData.flow_data);
setFlowInfo(importFlowData); setFlowInfo(importFlowData);
@ -260,7 +259,7 @@ const Canvas: React.FC = () => {
<Background color='#aaa' gap={16} /> <Background color='#aaa' gap={16} />
<AddFlowVariableModal /> <AddFlowVariableModal flowInfo={flowInfo} />
</ReactFlow> </ReactFlow>
</div> </div>
</div> </div>