From 00d9e51495714d478a0ae2b5f6f7919b6702c84a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com>
Date: Wed, 4 Sep 2024 23:33:54 +0800
Subject: [PATCH 1/2] refactor: Simplify AppContent component by removing
 unnecessary div and flex container

---
 web/pages/construct/app/index.tsx | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/web/pages/construct/app/index.tsx b/web/pages/construct/app/index.tsx
index 1e67c989f..737753589 100644
--- a/web/pages/construct/app/index.tsx
+++ b/web/pages/construct/app/index.tsx
@@ -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'
               />
             </div>
-            <div className='flex items-center gap-4 h-10'>
-              <Button
-                className='border-none text-white bg-button-gradient h-full flex items-center'
-                icon={<PlusOutlined className='text-base' />}
-                onClick={handleCreate}
-              >
-                {t('create_app')}
-              </Button>
-            </div>
+
+            <Button
+              className='border-none text-white bg-button-gradient flex items-center'
+              icon={<PlusOutlined className='text-base' />}
+              onClick={handleCreate}
+            >
+              {t('create_app')}
+            </Button>
           </div>
           <div className=' w-full flex flex-wrap pb-12 mx-[-8px]'>
             {apps.map(item => {

From ef0443290263d2f5f3f57807b0fc8e475a37c7b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A8=E6=AC=A3?= <echo.cmy@antgroup.com>
Date: Wed, 4 Sep 2024 23:46:05 +0800
Subject: [PATCH 2/2] fix: set flow variable default value

---
 .../flow/canvas-modal/add-flow-variable-modal.tsx | 10 +++++++---
 web/pages/construct/flow/canvas/index.tsx         | 15 +++++++--------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
index d246beb14..6be1c6982 100644
--- a/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
+++ b/web/components/flow/canvas-modal/add-flow-variable-modal.tsx
@@ -1,5 +1,5 @@
 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 { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button, Cascader, Form, Input, Modal, Select, Space } from 'antd';
@@ -17,7 +17,11 @@ interface Option {
   isLeaf?: boolean;
 }
 
-export const AddFlowVariableModal: React.FC = () => {
+type Props = {
+  flowInfo?: IFlowUpdateParam;
+};
+
+export const AddFlowVariableModal: React.FC<Props> = ({ flowInfo }) => {
   const { t } = useTranslation();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [form] = Form.useForm();
@@ -155,7 +159,7 @@ export const AddFlowVariableModal: React.FC = () => {
           autoComplete='off'
           layout='vertical'
           className='mt-8'
-          initialValues={{ parameters: [{}] }}
+          initialValues={{ parameters: flowInfo?.variables || [{}] }}
         >
           <Form.List name='parameters'>
             {(fields, { add, remove }) => (
diff --git a/web/pages/construct/flow/canvas/index.tsx b/web/pages/construct/flow/canvas/index.tsx
index b3d0889a5..c3c91e515 100644
--- a/web/pages/construct/flow/canvas/index.tsx
+++ b/web/pages/construct/flow/canvas/index.tsx
@@ -26,14 +26,13 @@ import 'reactflow/dist/style.css';
 
 const nodeTypes = { customNode: CanvasNode };
 const edgeTypes = { buttonedge: ButtonEdge };
+
 const Canvas: React.FC = () => {
-
   const { t } = useTranslation();
-  const [messageApi, contextHolder] = message.useMessage();
-
   const searchParams = useSearchParams();
   const id = searchParams?.get('id') || '';
   const reactFlow = useReactFlow();
+  const [messageApi, contextHolder] = message.useMessage();
 
   const [loading, setLoading] = useState(false);
   const [nodes, setNodes, onNodesChange] = useNodesState([]);
@@ -43,10 +42,10 @@ const Canvas: React.FC = () => {
   const [isSaveFlowModalOpen, setIsSaveFlowModalOpen] = useState(false);
   const [isExportFlowModalOpen, setIsExportFlowModalOpen] = useState(false);
   const [isImportModalOpen, setIsImportFlowModalOpen] = useState(false);
-  
-  if (localStorage.getItem('importFlowData') ) {
-    const importFlowData = JSON.parse(localStorage.getItem('importFlowData') );
-    localStorage.removeItem('importFlowData')
+
+  if (localStorage.getItem('importFlowData')) {
+    const importFlowData = JSON.parse(localStorage.getItem('importFlowData') || '');
+    localStorage.removeItem('importFlowData');
     setLoading(true);
     const flowData = mapUnderlineToHump(importFlowData.flow_data);
     setFlowInfo(importFlowData);
@@ -260,7 +259,7 @@ const Canvas: React.FC = () => {
 
               <Background color='#aaa' gap={16} />
 
-              <AddFlowVariableModal />
+              <AddFlowVariableModal flowInfo={flowInfo} />
             </ReactFlow>
           </div>
         </div>