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,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({