fix(ui): improve chart text spacing and prevent unnecessary truncation (#16894)

This commit is contained in:
诗浓 2025-03-27 15:58:23 +08:00 committed by GitHub
parent 7f70cadacb
commit 7f8bfb6e4a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 5 deletions

View File

@ -54,7 +54,7 @@ const ICON_MAP = {
notion: <AppIcon innerIcon={NotionSvg} className='!border-[0.5px] !border-indigo-100 !bg-white' />,
}
export default function AppBasic({ icon, icon_background, name, isExternal, type, hoverTip, textStyle, mode = 'expand', iconType = 'app' }: IAppBasicProps) {
export default function AppBasic({ icon, icon_background, name, isExternal, type, hoverTip, textStyle, isExtraInLine, mode = 'expand', iconType = 'app' }: IAppBasicProps) {
const { t } = useTranslation()
return (
@ -70,9 +70,9 @@ export default function AppBasic({ icon, icon_background, name, isExternal, type
</div>
}
{mode === 'expand' && <div className="group">
{mode === 'expand' && <div className="group w-full">
<div className={`system-md-semibold flex flex-row items-center text-text-secondary group-hover:text-text-primary ${textStyle?.main ?? ''}`}>
<div className="max-w-[180px] truncate">
<div className="min-w-0 overflow-hidden text-ellipsis break-normal">
{name}
</div>
{hoverTip
@ -88,7 +88,11 @@ export default function AppBasic({ icon, icon_background, name, isExternal, type
/>
}
</div>
<div className='system-2xs-medium-uppercase text-text-tertiary'>{isExternal ? t('dataset.externalTag') : ''}</div>
{isExtraInLine ? (
<div className="system-2xs-medium-uppercase flex text-text-tertiary">{type}</div>
) : (
<div className='system-2xs-medium-uppercase text-text-tertiary'>{isExternal ? t('dataset.externalTag') : type}</div>
)}
</div>}
</div>
)

View File

@ -237,7 +237,7 @@ const Chart: React.FC<IChartProps> = ({
<div className='mb-4 flex-1'>
<Basic
isExtraInLine={CHART_TYPE_CONFIG[chartType].showTokens}
name={chartType !== 'costs' ? (sumData.toLocaleString() + unit) : `${sumData < 1000 ? sumData : (`${formatNumber(Math.round(sumData / 1000))}k`)}`}
name={chartType !== 'costs' ? (`${sumData.toLocaleString()} ${unit}`) : `${sumData < 1000 ? sumData : (`${formatNumber(Math.round(sumData / 1000))}k`)}`}
type={!CHART_TYPE_CONFIG[chartType].showTokens
? ''
: <span>{t('appOverview.analysis.tokenUsage.consumed')} Tokens<span className='text-sm'>
@ -350,6 +350,7 @@ export const TokenPerSecond: FC<IBizChartProps> = ({ id, period }) => {
isAvg
unit={t('appOverview.analysis.tokenPS') as string}
{...(noDataFlag && { yMax: 100 })}
className="min-w-0"
/>
}