Chat 界面 branding/字体/对齐 audit:logo 太小且对不齐、markdown 缺 h4-h6、建议 chip 用了非 token 字号
- Dominant language
- TypeScript
- Stars
- 0
- Forks
- 0
- Avg merge
- 1h 7m
- Merged PRs (30d)
- 969
Description
## 背景
用户直接反馈(真栈截图,`/chat` copilotkit-v2 屏):WorkspaceX branding 的 logo 太小,
整个界面的文字不统一,多处对齐/居中也有问题。这是 ad-hoc 直接交办任务,按
`.harness/instructions/ad-hoc-fix-pr-sop.md` 走:不建完整 sprint feature 生命周期,
本 issue 只是给 PR 一个 `Refs #N` 锚点。
## 实测发现的具体缺口
1. **品牌 wordmark 位图透明留白不对称**——`apps/web/workspacex.png` /
`apps/web/public/workspacex-logo.png` 实测内容 bbox 距上边 86px / 距下边 53px,
距左边 100px / 距右边 52px(原图 1983×793)。按高度约束缩放时,图形在视觉上偏离
行内其余元素(`⌘K` 徽标)的几何中心——这正是"跟旁边元素对不齐"的根因,不是
flex 布局问题。
2. **品牌 wordmark 渲染高度太小**——`SidebarBrandHeader`(`thread-list-shell.tsx`)
给的是 `h-4`(16px),叠加上面的不对称留白,有效字形高度不到 13px,视觉上是这一行
最不起眼的元素,用户反馈"logo 太小"。
3. **AI 消息 markdown 渲染层缺 h4/h5/h6 样式**——`app/globals.css` 的 `.chat-markdown`
只定义了 h1–h3(`text-16`/`text-14`/`text-13`),四级及以下标题没有规则,会掉回
浏览器 UA 默认字号/字重——不在 `lib/font-scale.ts` 唯一事实源的字号阶梯里,
是"整个界面文字不统一"的一个真实缺口。
4. **追问建议 chip 用了 Tailwind 内建 `text-xs`,不是本仓字号 token**——
`components/chat/copilotkit-v2-assistant-message.tsx` 两处按钮(追问建议 chip /
dismiss 后剩下的建议按钮)写的是 `text-xs`(Tailwind 默认 12px/16px 行高),
与全仓其余 12px 档位统一使用的 `text-12`(`lib/font-scale.ts` 定义的 12px/18px
行高)不是同一份视觉——这类 chip 恰好就是截图里"生成用户画像"那颗建议芯片。
`lint-design.sh` 只扫 `text-<数字>`,扫不到 `text-xs` 这种 Tailwind 内建类名,
所以这个缺口此前没有被机械门控拦下来。
## 验证
- `bash scripts/lint-design.sh`
- 相关 vitest(`tests/ui/sidebar-brand-header.test.tsx` 等)
- `pnpm typecheck` / 受影响范围的构建
## 范围说明
本 issue 不改动 chat 主屏以外的模块(如 itv 面试模块里另有若干 `text-xs`/`text-[Npx]`
用法,未在本次改动范围内,如实登记不顺手代改)。
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with apps/web/workspacex.png, apps/web/public/workspacex-logo.png, and SidebarBrandHeader in thread-list-shell.tsx to inspect the branding alignment. Then review the .chat-markdown rules in app/globals.css and the two suggestion buttons in components/chat/copilotkit-v2-assistant-message.tsx. Run bash scripts/lint-design.sh, the sidebar brand Vitest tests, pnpm typecheck, and the affected build; done means the logo, heading sizes, and chip typography match the stated tokens and checks pass.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- tailwindcss, typescript
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 74/100