perf: modal add size props&menu add menuItemStyles (#2600)

* perf: modal add size props&menu add menuItemStyles

* delete minH

* mobile adaptation

* 优化部分代码

projects/app/src/pages/app/detail/components/WorkflowComponents/AppCard.tsx

@@ -74,7 +74,11 @@ const AppCard = ({
                         label: ExportPopover({
                           chatConfig: appDetail.chatConfig,
                           appName: appDetail.name
-                        })
+                        }),
+                        menuItemStyles: {
+                          p: 0,
+                          cursor: 'default'
+                        }
                       }
                     ]
                   }
@@ -213,12 +217,12 @@ function ExportPopover({
   return (
     <MyPopover
       placement={'right-start'}
-      offset={[-5, 20]}
+      offset={[-5, 5]}
       hasArrow={false}
       trigger={'hover'}
       w={'8.6rem'}
       Trigger={
-        <Flex align={'center'} w={'100%'}>
+        <Flex align={'center'} w={'100%'} py={2} px={3}>
           <Avatar src={'export'} borderRadius={'sm'} w={'1rem'} mr={3} />
           {t('app:export_configs')}
         </Flex>
@@ -232,7 +236,8 @@ function ExportPopover({
             color={'myGray.600'}
             _hover={{
               bg: 'myGray.05',
-              color: 'primary.600'
+              color: 'primary.600',
+              cursor: 'pointer'
             }}
             borderRadius={'xs'}
             onClick={onExportWorkflow}
@@ -246,7 +251,8 @@ function ExportPopover({
             color={'myGray.600'}
             _hover={{
               bg: 'myGray.05',
-              color: 'primary.600'
+              color: 'primary.600',
+              cursor: 'pointer'
             }}
             borderRadius={'xs'}
             onClick={() => {

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/ImportSettings.tsx

@@ -73,7 +73,6 @@ const ImportSettings = ({ onClose }: Props) => {
   return (
     <MyModal
       isOpen
-      w={'600px'}
       onClose={onClose}
       title={
         <Flex align={'center'} ml={-3}>
@@ -81,15 +80,16 @@ const ImportSettings = ({ onClose }: Props) => {
           <Box lineHeight={'1.25rem'}>{appT('import_configs')}</Box>
         </Flex>
       }
+      size={isPc ? 'lg' : 'md'}
     >
-      <ModalBody py={'2rem'} px={'3.25rem'}>
+      <ModalBody>
         <File onSelect={onSelectFile} />
         {isDragging ? (
           <Flex
             align={'center'}
             justify={'center'}
             w={'31rem'}
-            h={'21.25rem'}
+            h={'17.5rem'}
             borderRadius={'md'}
             border={'1px dashed'}
             borderColor={'myGray.400'}
@@ -106,7 +106,7 @@ const ImportSettings = ({ onClose }: Props) => {
             </Flex>
           </Flex>
         ) : (
-          <Box w={'31rem'} minH={'21.25rem'}>
+          <Box w={['100%', '31rem']}>
             <Flex justify={'space-between'} align={'center'} pb={2}>
               <Box fontSize={'sm'} color={'myGray.900'} fontWeight={'500'}>
                 {t('common:common.json_config')}
@@ -141,36 +141,36 @@ const ImportSettings = ({ onClose }: Props) => {
                 onChange={(e) => setValue(e.target.value)}
               />
             </Box>
-            <Flex justify={'flex-end'} pt={5}>
-              <Button
-                p={0}
-                onClick={() => {
-                  if (!value) {
-                    return onClose();
-                  }
-                  try {
-                    const data = JSON.parse(value);
-                    initData(data);
-                    onClose();
-                  } catch (error) {
-                    toast({
-                      title: appT('import_configs_failed')
-                    });
-                  }
-                  toast({
-                    title: t('app:import_configs_success'),
-                    status: 'success'
-                  });
-                }}
-              >
-                <Flex px={5} py={2} fontWeight={'500'}>
-                  {t('common:common.Save')}
-                </Flex>
-              </Button>
-            </Flex>
           </Box>
         )}
       </ModalBody>
+      <ModalFooter justifyItems={'flex-end'}>
+        <Button
+          px={5}
+          py={2}
+          onClick={async () => {
+            if (!value) {
+              return onClose();
+            }
+            try {
+              const data = JSON.parse(value);
+              await initData(data);
+              toast({
+                title: t('app:import_configs_success'),
+                status: 'success'
+              });
+              onClose();
+            } catch (error) {
+              toast({
+                title: t('app:import_configs_failed')
+              });
+            }
+          }}
+          fontWeight={'500'}
+        >
+          {t('common:common.Save')}
+        </Button>
+      </ModalFooter>
     </MyModal>
   );
 };

projects/app/src/pages/dataset/detail/components/InputDataModal.tsx

@@ -353,7 +353,7 @@ const InputTab = ({
 
   return (
     <>
-      <Flex h={'100%'} gap={6} flexDir={['column', 'row']} w={'100%'} pr={2}>
+      <Flex h={'100%'} gap={6} flexDir={['column', 'row']} w={'100%'}>
         <Flex flexDir={'column'} flex={1}>
           <Flex mb={2} fontWeight={'medium'} fontSize={'sm'} alignItems={'center'} h={8}>
             <Box color={'red.600'}>*</Box>
@@ -435,7 +435,7 @@ const DataIndex = ({
 
   return (
     <>
-      <Flex mt={3} gap={3} flexDir={'column'} pr={2}>
+      <Flex mt={3} gap={3} flexDir={'column'}>
         <Box
           p={4}
           borderRadius={'md'}