chore: check compatibility ux

src/components/alert-info/block.tsx

@@ -12,6 +12,7 @@ interface AlertInfoProps {
   icon?: React.ReactNode;
   ellipsis?: boolean;
   style?: React.CSSProperties;
+  contentStyle?: React.CSSProperties;
   title: React.ReactNode;
 }
 
@@ -30,7 +31,15 @@ const ContentWrapper = styled.div<{ $hasTitle: boolean }>`
 `;
 
 const AlertInfo: React.FC<AlertInfoProps> = (props) => {
-  const { message, type, rows = 1, ellipsis, style, title } = props;
+  const {
+    message,
+    type,
+    rows = 1,
+    ellipsis,
+    style,
+    title,
+    contentStyle
+  } = props;
 
   return (
     <>
@@ -51,7 +60,7 @@ const AlertInfo: React.FC<AlertInfoProps> = (props) => {
               <WarningFilled className={classNames('info-icon', type)} />
             </div>
             {title && <TitleWrapper>{title}</TitleWrapper>}
-            <OverlayScroller maxHeight={80}>
+            <OverlayScroller maxHeight={80} style={{ ...contentStyle }}>
               <ContentWrapper $hasTitle={!!title}>{message}</ContentWrapper>
             </OverlayScroller>
           </Typography.Paragraph>

src/components/modal-footer/index.tsx

@@ -1,5 +1,6 @@
 import { useIntl } from '@umijs/max';
 import { Button, Space } from 'antd';
+import React from 'react';
 
 type ModalFooterProps = {
   onOk?: () => void;
@@ -9,10 +10,12 @@ type ModalFooterProps = {
   htmlType?: 'button' | 'submit';
   okBtnProps?: any;
   cancelBtnProps?: any;
-  align?: 'start' | 'end' | 'center' | 'baseline';
-  form?: any;
   loading?: boolean;
   style?: React.CSSProperties;
+  showOkBtn?: boolean;
+  showCancelBtn?: boolean;
+  extra?: React.ReactNode;
+  form?: any;
 };
 const ModalFooter: React.FC<ModalFooterProps> = ({
   onOk,
@@ -23,8 +26,9 @@ const ModalFooter: React.FC<ModalFooterProps> = ({
   cancelBtnProps,
   loading,
   htmlType = 'button',
-  align = 'end',
   style,
+  showOkBtn = true,
+  extra,
   form
 }) => {
   const intl = useIntl();
@@ -33,16 +37,19 @@ const ModalFooter: React.FC<ModalFooterProps> = ({
       <Button onClick={onCancel} style={{ width: '88px' }} {...cancelBtnProps}>
         {cancelText || intl.formatMessage({ id: 'common.button.cancel' })}
       </Button>
-      <Button
-        type="primary"
-        onClick={onOk}
-        style={{ width: '88px' }}
-        loading={loading}
-        htmlType={htmlType}
-        {...okBtnProps}
-      >
-        {okText || intl.formatMessage({ id: 'common.button.save' })}
-      </Button>
+      {extra}
+      {showOkBtn && (
+        <Button
+          type="primary"
+          onClick={onOk}
+          style={{ width: '88px' }}
+          loading={loading}
+          htmlType={htmlType}
+          {...okBtnProps}
+        >
+          {okText || intl.formatMessage({ id: 'common.button.save' })}
+        </Button>
+      )}
     </Space>
   );
 };

src/components/overlay-scroller/index.tsx

@@ -10,7 +10,12 @@ const Wrapper = styled.div<{ $maxHeight?: number }>`
   padding-inline: 10px;
 `;
 
-const OverlayScroller: React.FC<any> = ({ children, maxHeight, theme }) => {
+const OverlayScroller: React.FC<any> = ({
+  children,
+  maxHeight,
+  theme,
+  style
+}) => {
   const scroller = React.useRef<any>(null);
   const { initialize } = useOverlayScroller({
     options: {
@@ -25,7 +30,15 @@ const OverlayScroller: React.FC<any> = ({ children, maxHeight, theme }) => {
   }, []);
 
   return (
-    <Wrapper ref={scroller} $maxHeight={maxHeight || '100%'} hidden={false}>
+    <Wrapper
+      ref={scroller}
+      $maxHeight={maxHeight || '100%'}
+      hidden={false}
+      as="div"
+      style={{
+        ...style
+      }}
+    >
       {children}
     </Wrapper>
   );