boardx / boardx/workspacex

Chat 界面 branding/字体/对齐 audit:logo 太小且对不齐、markdown 缺 h4-h6、建议 chip 用了非 token 字号

Open
#2,703 0 comments 0 reactions 0 assignees View on GitHub
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.