chore: compatibility api

src/components/alert-info/block.less

@@ -21,10 +21,6 @@
     background-color: var(--ant-color-warning-bg);
   }
 
-  .content {
-    word-break: break-all;
-  }
-
   .title {
     position: absolute;
     left: 0;

src/components/alert-info/block.tsx

@@ -2,6 +2,8 @@ import { WarningFilled } from '@ant-design/icons';
 import { Typography } from 'antd';
 import classNames from 'classnames';
 import React from 'react';
+import styled from 'styled-components';
+import OverlayScroller from '../overlay-scroller';
 import './block.less';
 interface AlertInfoProps {
   type: 'danger' | 'warning';
@@ -13,8 +15,22 @@ interface AlertInfoProps {
   title: React.ReactNode;
 }
 
+const TitleWrapper = styled.div`
+  font-weight: 700;
+  color: var(--ant-color-text);
+`;
+
+const ContentWrapper = styled.div<{ $hasTitle: boolean }>`
+  word-break: break-word;
+  color: ${(props) =>
+    props.$hasTitle
+      ? 'var(--ant-color-text-secondary)'
+      : 'var(--ant-color-text)'};
+  font-weight: var(--font-weight-500);
+`;
+
 const AlertInfo: React.FC<AlertInfoProps> = (props) => {
-  const { message, type, rows = 1, ellipsis, style } = props;
+  const { message, type, rows = 1, ellipsis, style, title } = props;
 
   return (
     <>
@@ -34,7 +50,10 @@ const AlertInfo: React.FC<AlertInfoProps> = (props) => {
             <div className={classNames('title', type)}>
               <WarningFilled className={classNames('info-icon', type)} />
             </div>
-            <span className="content">{message}</span>
+            {title && <TitleWrapper>{title}</TitleWrapper>}
+            <OverlayScroller maxHeight={80}>
+              <ContentWrapper $hasTitle={!!title}>{message}</ContentWrapper>
+            </OverlayScroller>
           </Typography.Paragraph>
         </div>
       ) : null}

src/components/overlay-scroller/index.tsx

@@ -0,0 +1,34 @@
+import useOverlayScroller from '@/hooks/use-overlay-scroller';
+import React from 'react';
+import styled from 'styled-components';
+
+const Wrapper = styled.div<{ $maxHeight?: number }>`
+  max-height: ${({ $maxHeight }) =>
+    typeof $maxHeight === 'number' ? `${$maxHeight}px` : $maxHeight};
+  overflow-y: auto;
+  width: 100%;
+  padding-inline: 10px;
+`;
+
+const OverlayScroller: React.FC<any> = ({ children, maxHeight, theme }) => {
+  const scroller = React.useRef<any>(null);
+  const { initialize } = useOverlayScroller({
+    options: {
+      theme: theme || 'os-theme-light'
+    }
+  });
+
+  React.useEffect(() => {
+    if (scroller.current) {
+      initialize(scroller.current);
+    }
+  }, []);
+
+  return (
+    <Wrapper ref={scroller} $maxHeight={maxHeight || '100%'} hidden={false}>
+      {children}
+    </Wrapper>
+  );
+};
+
+export default OverlayScroller;