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

* perf: modal add size props&menu add menuItemStyles

* delete minH

* mobile adaptation

* 优化部分代码

packages/web/components/common/MyMenu/index.tsx

@@ -23,7 +23,7 @@ export type Props = {
   trigger?: 'hover' | 'click';
   iconSize?: string;
   iconRadius?: string;
-  menuItemStyles?: MenuItemProps;
+
   placement?: PlacementWithLogical;
   menuList: {
     label?: string;
@@ -34,6 +34,7 @@ export type Props = {
       label: string | React.ReactNode;
       description?: string;
       onClick?: () => any;
+      menuItemStyles?: MenuItemProps;
     }[];
   }[];
 };
@@ -46,15 +47,7 @@ const MyMenu = ({
   Button,
   menuList,
   iconRadius,
-  placement = 'bottom-start',
-  menuItemStyles = {
-    borderRadius: 'sm',
-    py: 2,
-    px: 3,
-    display: 'flex',
-    alignItems: 'center',
-    fontSize: 'sm'
-  }
+  placement = 'bottom-start'
 }: Props) => {
   const typeMapStyle: Record<MenuItemType, MenuItemProps> = {
     primary: {
@@ -167,7 +160,7 @@ const MyMenu = ({
                 {item.children.map((child, index) => (
                   <MenuItem
                     key={index}
-                    {...menuItemStyles}
+                    borderRadius={'sm'}
                     onClick={(e) => {
                       e.stopPropagation();
                       if (child.onClick) {
@@ -175,10 +168,15 @@ const MyMenu = ({
                         child.onClick();
                       }
                     }}
+                    py={2}
+                    px={3}
+                    alignItems={'center'}
+                    fontSize={'sm'}
                     color={child.isActive ? 'primary.700' : 'myGray.600'}
                     whiteSpace={'pre-wrap'}
                     _notLast={{ mb: 0.5 }}
                     {...typeMapStyle[child.type || 'primary']}
+                    {...child.menuItemStyles}
                   >
                     {!!child.icon && (
                       <Avatar

packages/web/components/common/MyModal/index.tsx

@@ -21,6 +21,7 @@ export interface MyModalProps extends ModalContentProps {
   isOpen?: boolean;
   onClose?: () => void;
   closeOnOverlayClick?: boolean;
+  size?: 'md' | 'lg';
 }
 
 const MyModal = ({
@@ -35,6 +36,7 @@ const MyModal = ({
   maxW = ['90vw', '600px'],
   closeOnOverlayClick = true,
   iconColor,
+  size = 'md',
   ...props
 }: MyModalProps) => {
   const { isPc } = useSystem();
@@ -43,6 +45,7 @@ const MyModal = ({
     <Modal
       isOpen={isOpen}
       onClose={() => onClose && onClose()}
+      size={size}
       autoFocus={false}
       isCentered={isPc ? isCentered : true}
       blockScrollOnMount={false}

packages/web/styles/theme.ts

@@ -470,7 +470,8 @@ const Checkbox = checkBoxMultiStyle({
 });
 
 const Modal = modalMultiStyle({
-  baseStyle: modalPart({
+  sizes: {
+    md: modalPart({
       body: {
         py: 4,
         px: 7
@@ -478,7 +479,20 @@ const Modal = modalMultiStyle({
       footer: {
         pt: 2
       }
+    }),
+    lg: modalPart({
+      body: {
+        pt: 8,
+        pb: 6,
+        px: '3.25rem'
+      },
+      footer: {
+        pb: 8,
+        px: '3.25rem',
+        pt: 0
+      }
     })
+  }
 });
 
 const Table = tableMultiStyle({

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}>
+          </Box>
+        )}
+      </ModalBody>
+      <ModalFooter justifyItems={'flex-end'}>
         <Button
-                p={0}
-                onClick={() => {
+          px={5}
+          py={2}
+          onClick={async () => {
             if (!value) {
               return onClose();
             }
             try {
               const data = JSON.parse(value);
-                    initData(data);
-                    onClose();
-                  } catch (error) {
-                    toast({
-                      title: appT('import_configs_failed')
-                    });
-                  }
+              await initData(data);
               toast({
                 title: t('app:import_configs_success'),
                 status: 'success'
               });
+              onClose();
+            } catch (error) {
+              toast({
+                title: t('app:import_configs_failed')
+              });
+            }
           }}
+          fontWeight={'500'}
         >
-                <Flex px={5} py={2} fontWeight={'500'}>
           {t('common:common.Save')}
-                </Flex>
         </Button>
-            </Flex>
-          </Box>
-        )}
-      </ModalBody>
+      </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'}