xiezhouwei
/
tokenFactory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix sparkline date label alignment: use justify-between for even distribution

This commit is contained in:
wangxiaoji 2026-06-30 10:19:33 +08:00
parent 715487fda7
commit d9dc7e0845
2 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/bun.lock vendored
View File

@ -6,6 +6,7 @@
"name": "react-template",
"dependencies": {
"@douyinfe/semi-icons": "^2.63.1",
"@douyinfe/semi-illustrations": "^2.100.0",
"@douyinfe/semi-ui": "^2.69.1",
"@lobehub/icons": "^2.0.0",
"@visactor/react-vchart": "~1.8.8",
@ -171,7 +172,7 @@
"@douyinfe/semi-icons": ["@douyinfe/semi-icons@2.94.0", "https://registry.npmmirror.com/@douyinfe/semi-icons/-/semi-icons-2.94.0.tgz", { "dependencies": { "classnames": "^2.2.6" }, "peerDependencies": { "react": ">=16.0.0" } }, "sha512-Hn6Bm8umITAxw5xZlslrFXf+UBUWU5OD9YSNDN46H+OKnZFwbnYV628DBWSewBrvCItxUGMXHnLal4h1ZIb6qQ=="],
"@douyinfe/semi-illustrations": ["@douyinfe/semi-illustrations@2.94.0", "https://registry.npmmirror.com/@douyinfe/semi-illustrations/-/semi-illustrations-2.94.0.tgz", { "peerDependencies": { "react": ">=16.0.0" } }, "sha512-nXi4bysh4GsO/DxoNUmCd5NlRYeYZb7pqXcGZFj+PpxbPoG7Qn4jqhrUUFrJNppvven9nS0SgabDAHnT3o+jaQ=="],
"@douyinfe/semi-illustrations": ["@douyinfe/semi-illustrations@2.100.0", "", { "peerDependencies": { "react": ">=16.0.0" } }, "sha512-SN7plpE328WGBohLHOVpYe6FwWSO6RLS7Xf6LhqEdtarwK52ircr4C/b+OyRqIwcLOzRYMgIoqcWnAQGmowcUw=="],
"@douyinfe/semi-json-viewer-core": ["@douyinfe/semi-json-viewer-core@2.94.0", "https://registry.npmmirror.com/@douyinfe/semi-json-viewer-core/-/semi-json-viewer-core-2.94.0.tgz", { "dependencies": { "jsonc-parser": "^3.3.1" } }, "sha512-pi4+Oi2zvsc0S3smWz58RNbfB73NgfO68fntKsVbLV1lTwNFuDxSswT8n8SXDZhtKoYgPVMmE3eMTc2nkXnvng=="],
@ -2261,6 +2262,8 @@
"@ant-design/cssinjs-utils/@ant-design/cssinjs": ["@ant-design/cssinjs@1.24.0", "https://registry.npmmirror.com/@ant-design/cssinjs/-/cssinjs-1.24.0.tgz", { "dependencies": { "@babel/runtime": "^7.11.1", "@emotion/hash": "^0.8.0", "@emotion/unitless": "^0.7.5", "classnames": "^2.3.1", "csstype": "^3.1.3", "rc-util": "^5.35.0", "stylis": "^4.3.4" }, "peerDependencies": { "react": ">=16.0.0", "react-dom": ">=16.0.0" } }, "sha512-K4cYrJBsgvL+IoozUXYjbT6LHHNt+19a9zkvpBPxLjFHas1UpPM2A5MlhROb0BT8N8WoavM5VsP9MeSeNK/3mg=="],
"@douyinfe/semi-ui/@douyinfe/semi-illustrations": ["@douyinfe/semi-illustrations@2.94.0", "https://registry.npmmirror.com/@douyinfe/semi-illustrations/-/semi-illustrations-2.94.0.tgz", { "peerDependencies": { "react": ">=16.0.0" } }, "sha512-nXi4bysh4GsO/DxoNUmCd5NlRYeYZb7pqXcGZFj+PpxbPoG7Qn4jqhrUUFrJNppvven9nS0SgabDAHnT3o+jaQ=="],
"@emotion/babel-plugin/@emotion/hash": ["@emotion/hash@0.9.2", "https://registry.npmmirror.com/@emotion/hash/-/hash-0.9.2.tgz", {}, "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g=="],
"@emotion/babel-plugin/convert-source-map": ["convert-source-map@1.9.0", "https://registry.npmmirror.com/convert-source-map/-/convert-source-map-1.9.0.tgz", {}, "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="],

31
web/src/components/dashboard/BentoTrend.jsx
View File

@ -76,26 +76,25 @@ const BentoTrend = ({
</div>
<div className='flex items-center justify-between text-[11px]'>
<div className='flex items-center gap-1 tabular-nums'>
<div className='flex w-full items-center justify-between tabular-nums'>
{dailyStats.map((d, i) => {
const isPeak = d.count === peak && peak > 0;
return (
<span
key={i}
className={`w-8 text-center text-xs ${
isPeak
? 'font-semibold text-slate-900 dark:text-white'
: 'text-slate-500 dark:text-white/50'
}`}
title={`${d.date.getMonth() + 1}月${d.date.getDate()}日 ${d.count} 次`}
>
{formatMD(d.date)}
</span>
);
})}
<span
key={i}
className={`text-center text-xs ${
isPeak
? 'font-semibold text-slate-900 dark:text-white'
: 'text-slate-500 dark:text-white/50'
}`}
title={`${d.date.getMonth() + 1}月${d.date.getDate()}日 ${d.count} 次`}
>
{formatMD(d.date)}
</span>
);
})}
</div>
</div>
<div className='text-slate-500 tabular-nums dark:text-white/50'>
<div className='ml-4 shrink-0 text-slate-500 tabular-nums dark:text-white/50'>
峰值{' '}
<span className='font-semibold text-slate-900 dark:text-white'>{peak}</span> 次
</div>