fix(style): api access info modal with

This commit is contained in:
jialin
2025-04-16 15:16:31 +08:00
parent c831c19848
commit 67053db9ba
2 changed files with 21 additions and 23 deletions
@@ -80,7 +80,7 @@ const ApiAccessInfo = ({ open, data, onClose }: ApiAccessInfoProps) => {
top: '20%' top: '20%'
}} }}
title={intl.formatMessage({ id: 'models.table.button.apiAccessInfo' })} title={intl.formatMessage({ id: 'models.table.button.apiAccessInfo' })}
width={510} width={550}
destroyOnClose destroyOnClose
closable={true} closable={true}
maskClosable={false} maskClosable={false}
@@ -121,7 +121,7 @@ const ApiAccessInfo = ({ open, data, onClose }: ApiAccessInfoProps) => {
{intl.formatMessage({ id: 'models.table.apiAccessInfo.endpoint' })} {intl.formatMessage({ id: 'models.table.apiAccessInfo.endpoint' })}
</span> </span>
<span className="value"> <span className="value">
<AutoTooltip ghost maxWidth={200}> <AutoTooltip ghost maxWidth={180}>
{endPoint} {endPoint}
</AutoTooltip> </AutoTooltip>
<APITAG color="geekblue"> <APITAG color="geekblue">
@@ -1,4 +1,4 @@
import OverlayScroller from '@/components/overlay-scroller'; import { TooltipOverlayScroller } from '@/components/overlay-scroller';
import { LoadingOutlined, WarningOutlined } from '@ant-design/icons'; import { LoadingOutlined, WarningOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max'; import { useIntl } from '@umijs/max';
import { Tag, Tooltip } from 'antd'; import { Tag, Tooltip } from 'antd';
@@ -73,26 +73,24 @@ const IncompatiableInfo: React.FC<IncompatiableInfoProps> = (props) => {
return null; return null;
} }
return ( return (
<Tooltip <TooltipOverlayScroller
overlayInnerStyle={{ paddingInline: 0 }} maxHeight={200}
title={ title={
<OverlayScroller maxHeight={200}> <IncompatibleInfo>
<IncompatibleInfo> <SMTitle $isTitle={true}>
<SMTitle $isTitle={true}> {intl.formatMessage({ id: 'models.form.incompatible' })}
{intl.formatMessage({ id: 'models.form.incompatible' })} </SMTitle>
</SMTitle> {
{ <ul>
<ul> {data?.compatibility_messages.map((item, index) => (
{data?.compatibility_messages.map((item, index) => ( <li key={index}>{item}</li>
<li key={index}>{item}</li> ))}
))} {data?.scheduling_messages.map((item, index) => (
{data?.scheduling_messages.map((item, index) => ( <li key={index}>{item}</li>
<li key={index}>{item}</li> ))}
))} </ul>
</ul> }
} </IncompatibleInfo>
</IncompatibleInfo>
</OverlayScroller>
} }
> >
<CompatibleTag <CompatibleTag
@@ -100,7 +98,7 @@ const IncompatiableInfo: React.FC<IncompatiableInfoProps> = (props) => {
color="warning" color="warning"
bordered={false} bordered={false}
></CompatibleTag> ></CompatibleTag>
</Tooltip> </TooltipOverlayScroller>
); );
}; };