From 348608975c04fbf3402ab977819fb9ffcbcad4d9 Mon Sep 17 00:00:00 2001
From: jingyang <3161362058@qq.com>
Date: Fri, 15 Dec 2023 16:55:52 +0800
Subject: [PATCH] fix scroll

Signed-off-by: jingyang <3161362058@qq.com>
---
 .../src/pages/develop/components/YamlList.tsx |  8 +++---
 .../template/src/pages/develop/index.tsx      | 27 +++++++------------
 2 files changed, 13 insertions(+), 22 deletions(-)

diff --git a/frontend/providers/template/src/pages/develop/components/YamlList.tsx b/frontend/providers/template/src/pages/develop/components/YamlList.tsx
index 66e88bf331d..69d8203fc61 100644
--- a/frontend/providers/template/src/pages/develop/components/YamlList.tsx
+++ b/frontend/providers/template/src/pages/develop/components/YamlList.tsx
@@ -8,13 +8,12 @@ const YamlList = ({ yamlList = [] }: { yamlList: YamlItemType[] }) => {
   return (
     <Flex
       flexGrow={1}
-      h="0"
+      // h="0"
       mt={'12px'}
       alignItems={'start'}
       zIndex={1}
       position={'relative'}
-      overflow={'scroll'}
-    >
+      overflow={'scroll'}>
       <Box flexShrink={0} mt={3} borderRadius={'sm'} overflow={'hidden'} bg={'white'}>
         {yamlList.map((file, index) => (
           <Box
@@ -39,8 +38,7 @@ const YamlList = ({ yamlList = [] }: { yamlList: YamlItemType[] }) => {
                   borderColor: 'myGray.200',
                   backgroundColor: 'transparent'
                 })}
-            onClick={() => setSelectedIndex(index)}
-          >
+            onClick={() => setSelectedIndex(index)}>
             {file.filename.replace(/-.*/, '')}
           </Box>
         ))}
diff --git a/frontend/providers/template/src/pages/develop/index.tsx b/frontend/providers/template/src/pages/develop/index.tsx
index c94aea5ef95..4c2cd28a5ea 100644
--- a/frontend/providers/template/src/pages/develop/index.tsx
+++ b/frontend/providers/template/src/pages/develop/index.tsx
@@ -53,13 +53,11 @@ export default function Develop() {
     data: EnvResponse;
   };
 
-  const onYamlChange = useCallback(
-    debounce((state: EditorState) => {
-      const value = state.doc.toString();
-      parseTemplate(value);
-    }, 1000),
-    [debounce]
-  );
+  const onYamlChange = debounce((state: EditorState) => {
+    const value = state.doc.toString();
+    parseTemplate(value);
+  }, 1000);
+
   const getYamlSource = (str: string): TemplateSourceType => {
     const yamlData = JsYaml.loadAll(str);
     const templateYaml: TemplateType = yamlData.find(
@@ -229,8 +227,7 @@ export default function Develop() {
         borderRadius={'8px'}
         overflowY={'hidden'}
         overflowX={'scroll'}
-        flex={1}
-      >
+        flex={1}>
         {/* left */}
         <Flex flexDirection={'column'} w="50%" borderRight={'1px solid #EFF0F1'}>
           <Flex
@@ -240,8 +237,7 @@ export default function Develop() {
             alignItems={'center'}
             backgroundColor={'#F8FAFB'}
             px="36px"
-            borderRadius={'8px 8px 0px 0px '}
-          >
+            borderRadius={'8px 8px 0px 0px '}>
             <MyIcon name="dev" color={'#24282C'} w={'24px'} h={'24px'}></MyIcon>
             <Text fontWeight={'500'} fontSize={'16px'} color={'#24282C'} ml="8px">
               {t('develop.Development')}
@@ -267,8 +263,7 @@ export default function Develop() {
             alignItems={'center'}
             backgroundColor={'#F8FAFB'}
             pl="42px"
-            borderRadius={'8px 8px 0px 0px '}
-          >
+            borderRadius={'8px 8px 0px 0px '}>
             <MyIcon name="eyeShow" color={'#24282C'} w={'24px'} h={'24px'}></MyIcon>
             <Text fontWeight={'500'} fontSize={'16px'} color={'#24282C'} ml="8px">
               {t('develop.Preview')}
@@ -280,8 +275,7 @@ export default function Develop() {
               pt="26px"
               pr={{ sm: '20px', md: '60px' }}
               borderBottom={'1px solid #EFF0F1'}
-              flexDirection={'column'}
-            >
+              flexDirection={'column'}>
               <Text fontWeight={'500'} fontSize={'18px'} color={'#24282C'}>
                 {t('develop.Configure Form')}
               </Text>
@@ -297,8 +291,7 @@ export default function Develop() {
                   minW={'100px'}
                   h={'34px'}
                   variant={'link'}
-                  onClick={handleExportYaml}
-                >
+                  onClick={handleExportYaml}>
                   {t('Export')} Yaml
                 </Button>
               </Flex>