AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-18 07:25:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/app/components/app-sidebar/basic.tsx
View File

@ -54,7 +54,7 @@ const ICON_MAP = {
notion: <AppIcon innerIcon={NotionSvg} className='!border-[0.5px] !border-indigo-100 !bg-white' />, 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() const { t } = useTranslation()
return ( return (
@ -70,9 +70,9 @@ export default function AppBasic({ icon, icon_background, name, isExternal, type
</div> </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={`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} {name}
</div> </div>
{hoverTip {hoverTip
@ -88,7 +88,11 @@ export default function AppBasic({ icon, icon_background, name, isExternal, type
/> />
} }
</div> </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>}
</div> </div>
) )

3
web/app/components/app/overview/appChart.tsx
View File

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