Repository navigation
style(web): unify design tokens and polish desktop and mobile UI craft - #82
Open
InfinityPacer wants to merge 1 commit into
Open
InfinityPacer wants to merge 1 commit into
InfinityPacer wants to merge 1 commit into
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
背景与问题
逐页巡检桌面端（
1440x960）与移动端（390x844）浅色、深色及三套配色界面后，定位出削弱整体质感的核心问题包括圆角与控件高度未统一（同一筛选栏和卡片头部混用36px、38px、40px、44px、50px与十余种零散圆角）、移动端列表与报表被局部system-ui覆盖掉Geist Variable等宽数字字体、桌面账户列表外框与行框双重描边碰撞、移动端统计与明细卡片边框投影缺失且金额误用强调色、部分模型名仍显示原始短横线标识、以及抽屉浓重模糊遮罩与960px高度下底部说明裁切等。主要变更
DESIGN.md、src/web/styles.css、src/web/desktop.css、src/web/mobile.css） 建立四档圆角令牌（6px / 8px / 12px / 16px）、三档层次令牌（浅色细微接触投影与深色顶边3%高光内描边）、统一控件高度（桌面38px、移动端44px）与过渡曲线，收敛筛选栏、卡片头部切换器、搜索框与分页按钮的尺寸和圆角。src/web/lib/report.ts、src/web/components/mobile-data.css） 移除移动端局部system-ui覆盖以全站保持Geist Variable，在模型分布、环形图总额、额度头部、时间戳与分页补齐tabular-nums，补全 Claude、Gemini、DeepSeek、GLM 与图像模型的规范化展示名称及协调图表色板。172px最小宽度留白，消除总览账户面板双重描边并补齐趋势与模型面板阴影层次，优化环形图环宽比例与虚线网格，为明细表推理强度增加胶囊徽标。16px圆角描边卡片质感，将手机模型分布的Tokens / 费用切换器收入卡片内部，将手机报表金额恢复为正文墨色以严守单强调色原则，并补齐手机分组汇总底部的合计行。src/web/components/ui/sheet.tsx、src/web/components/about-page.css、src/web/App.tsx） 将抽屉背景改为清晰半透明遮罩，连通键值行底部分隔细线，弱化空值N/A并收敛垂直间距使请求详情抽屉在960px高度完整容纳不裁切，将关于页两栏收入标准卡片并修正「跟随系统」预览图的双色分割边缘与圆角焦点环。验证结果
bun run typecheck、bun test tests（85 个文件共 629 项测试）、bun run build与 Prettier 检查全部通过。bun run test:browser、tests/global-layout.browser.ts与tests/button-contrast.browser.ts在桌面与移动端多视口、深浅色与三套配色下全部通过，并经独立visual-reviewer逐屏审查与修复闭环确认。