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

* perf: modal add size props&menu add menuItemStyles * delete minH * mobile adaptation * 优化部分代码
labring · Sep 3, 2024 · a756903 · a756903
1 parent 4726034
commit a756903
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 58 deletions.
diff --git a/packages/web/components/common/MyMenu/index.tsx b/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,18 +160,23 @@ const MyMenu = ({
                 {item.children.map((child, index) => (
                   <MenuItem
                     key={index}
-                    {...menuItemStyles}
+                    borderRadius={'sm'}
                     onClick={(e) => {
                       e.stopPropagation();
                       if (child.onClick) {
                         setIsOpen(false);
                         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

diff --git a/packages/web/components/common/MyModal/index.tsx b/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}

diff --git a/packages/web/styles/theme.ts b/packages/web/styles/theme.ts
@@ -470,15 +470,29 @@ const Checkbox = checkBoxMultiStyle({
 });
 
 const Modal = modalMultiStyle({
-  baseStyle: modalPart({
-    body: {
-      py: 4,
-      px: 7
-    },
-    footer: {
-      pt: 2
-    }
-  })
+  sizes: {
+    md: modalPart({
+      body: {
+        py: 4,
+        px: 7
+      },
+      footer: {
+        pt: 2
+      }
+    }),
+    lg: modalPart({
+      body: {
+        pt: 8,
+        pb: 6,
+        px: '3.25rem'
+      },
+      footer: {
+        pb: 8,
+        px: '3.25rem',
+        pt: 0
+      }
+    })
+  }
 });
 
 const Table = tableMultiStyle({

diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/AppCard.tsx b/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={() => {

diff --git a/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/ImportSettings.tsx b/projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/ImportSettings.tsx
@@ -73,23 +73,23 @@ const ImportSettings = ({ onClose }: Props) => {
   return (
     <MyModal
       isOpen
-      w={'600px'}
       onClose={onClose}
       title={
         <Flex align={'center'} ml={-3}>
           <MyIcon name={'common/importLight'} color={'primary.600'} w={'1.25rem'} mr={'0.62rem'} />
           <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>
   );
 };

diff --git a/projects/app/src/pages/dataset/detail/components/InputDataModal.tsx b/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'}