feat(desktop): embed BoosAPI Desktop client as a subproject
Vendor the rebranded BoosAPI Desktop client (Tauri + Vue) into metapi as a monorepo subdirectory under desktop/. Source only — node_modules, dist, Cargo target and the upstream .git history are excluded. desktop/ keeps its own independent Cargo workspace (desktop/src-tauri with crates/*); it is not part of the backend boosapi crate, so a `cargo check` at the metapi root still compiles only the backend. Build the desktop app from desktop/src-tauri per desktop/README.md. Note: app icons are still placeholder assets pending the final BoosAPI logo. The updater signing keys live outside the repo and are not included.
This commit is contained in:
boos
@@ -0,0 +1,149 @@
|
||||
# 排版调研：什么样的文本排版是舒适的
|
||||
|
||||
> 来源：2025-2026 主流产品分析 + 排版设计理论
|
||||
|
||||
---
|
||||
|
||||
## 核心发现
|
||||
|
||||
### 1. 舒适感来自"看不见的设计"
|
||||
|
||||
所有顶级产品（GitHub、Notion、Stripe、Linear）的排版有一个共同点：**你不会注意到它**。
|
||||
用户从来不会说"Notion 的行高好舒服"——他们只会说"用 Notion 写东西很舒服"。
|
||||
排版做对了，它就消失了。做错了，用户会感到莫名的不适但说不出为什么。
|
||||
|
||||
### 2. 字重比字号更重要
|
||||
|
||||
Apple HIG 的做法最能说明这一点：body 和 title 可以是同样的 17pt，
|
||||
区分靠的是 Regular vs Semibold，而不是 16px vs 36px。
|
||||
|
||||
**行业趋势**：
|
||||
- SemiBold (600) 正在取代 Bold (700) 成为标题首选字重——自信但不粗暴
|
||||
- 极细字重（Ultralight/Thin）被 Apple 明确不推荐
|
||||
- shadcn 的 h1 用 `extrabold`(800)，h2 用 `semibold`(600)——标题之间也有字重梯度
|
||||
|
||||
**启示**：与其让 h4/h5/h6 都用 `text-base` 然后靠字重区分失败，不如用颜色、opacity、
|
||||
大写字母这些维度来建立层级。Linear 用 dim（降低亮度）来区分次要信息。
|
||||
|
||||
### 3. 行宽是阅读舒适度的第一变量
|
||||
|
||||
| 来源 | 推荐行宽 |
|
||||
|---|---|
|
||||
| 排版理论 | 50-75 字符，66 字符最佳 |
|
||||
| WCAG 无障碍 | 不超过 80 字符 |
|
||||
| Baymard Institute | 超过 80 字符的内容被跳过率 +41% |
|
||||
| CSS 实现 | `max-width: 65ch` 或 `30-40rem` |
|
||||
|
||||
**所有严肃的内容产品都限制行宽**：GitHub 980px，Notion 宽边距，Stripe 居中列。
|
||||
没有一个做全宽正文。
|
||||
|
||||
### 4. 行高与行宽是联动的
|
||||
|
||||
| 场景 | 行高 |
|
||||
|---|---|
|
||||
| 正文（桌面） | 1.5-1.6x |
|
||||
| 窄栏/移动端 | 1.3-1.45x |
|
||||
| 标题 | 1.1-1.2x（紧凑，防止视觉碎片化） |
|
||||
| UI 组件 | 1.2-1.3x |
|
||||
|
||||
**关键关系**：行宽越长，行高应该越大。短行配大行高会"散架"，长行配小行高会"织成布"。
|
||||
目标是"均匀的排版色彩"——看起来舒服、邀请阅读。
|
||||
|
||||
### 5. 标题缩放比例决定整体调性
|
||||
|
||||
| 比例 | 值 | 适用场景 | 感觉 |
|
||||
|---|---|---|---|
|
||||
| Major Second | 1.125 | 紧凑 UI、仪表盘 | 克制、高密度 |
|
||||
| **Major Third** | **1.25** | **文档、内容应用** | **平衡、专业** |
|
||||
| Perfect Fourth | 1.333 | 营销、多样内容 | 有层次、明快 |
|
||||
| Perfect Fifth | 1.5 | 编辑排版、长文 | 戏剧性、正式 |
|
||||
|
||||
**Major Third (1.25) 是多数内容应用的最佳起点**。
|
||||
|
||||
### 6. 留白是奢侈品
|
||||
|
||||
感觉最"高级"的产品——Notion、Stripe、Linear——恰恰是留白最慷慨的。
|
||||
留白传达品质感。但过多的留白会让内容感觉断裂、需要过多滚动。
|
||||
|
||||
**段落间距共识**：
|
||||
- 段落之间：至少 1em，理想为行高的 1.5 倍
|
||||
- 标题上方的空间应该是下方的 1.5 倍以上（接近原则：标题属于后面的内容）
|
||||
- Wichita State 研究：合理的段落间白可以提升理解力 20%
|
||||
|
||||
### 7. 衬线字体正在回归
|
||||
|
||||
**Claude.ai 是旗舰案例**：AI 回复用衬线体，UI 用无衬线——这是对无衬线单一文化的声明。
|
||||
|
||||
驱动因素：
|
||||
- 高分辨率屏幕让衬线清晰锐利
|
||||
- 几何无衬线的审美疲劳
|
||||
- 追求温暖感和人格化
|
||||
- "过度抛光的 AI 审美正在造成视觉疲劳，设计师转向更有质感的字体"
|
||||
|
||||
**对渲染库的启示**：同时支持衬线和无衬线（通过 `--ms-font-sans` / `--ms-font-mono` token）
|
||||
是前瞻性的。
|
||||
|
||||
### 8. 流式渲染需要系统字体
|
||||
|
||||
ChatGPT 主要用 `system-ui` 不是偷懒——是性能工程。
|
||||
自定义字体意味着流式渲染时的布局跳动（layout shift），系统字体意味着即时稳定。
|
||||
|
||||
**对 markstream-vue 的启示**：
|
||||
- 默认字体栈应该是 `system-ui` 优先（零加载、零跳动）
|
||||
- 通过 `--ms-font-sans` token 允许用户切换到 Inter/Geist/衬线
|
||||
- 字体加载策略本身就是排版决策
|
||||
|
||||
### 9. Dark 模式不是可选的
|
||||
|
||||
每一个调研的产品都支持。Claude、Linear、Cursor 默认暗色。
|
||||
Tailwind 的 `prose-invert`、github-markdown-css 的 `prefers-color-scheme`
|
||||
都说明这是基础能力。
|
||||
|
||||
### 10. 排版正在变成设计令牌系统
|
||||
|
||||
Vercel（Geist tokens）、Stripe（design tokens）、USWDS（font-size tokens）、
|
||||
shadcn（CSS variables）。硬编码值在消亡，一切通过变量/token 流转。
|
||||
这正是我们在做的。
|
||||
|
||||
---
|
||||
|
||||
## 主流产品排版定位
|
||||
|
||||
| 产品 | 感觉 | 关键特征 |
|
||||
|---|---|---|
|
||||
| **GitHub** | 功能性、隐形、实用 | 不引人注目的排版，让内容说话 |
|
||||
| **Notion** | 干净、通透、冥想感 | 大量留白，内容漂浮在空间中 |
|
||||
| **Linear** | 专业、克制、工程感 | 次要元素降亮度，只让重要内容突出 |
|
||||
| **Stripe** | 精致、权威、可信赖 | 三栏布局，内容与代码对话 |
|
||||
| **Vercel/Geist** | 瑞士现代、精确、开发者原生 | 三层类型系统（Heading/Label/Copy） |
|
||||
| **ChatGPT** | 干净、机构感、高效 | 系统字体优先，零布局跳动 |
|
||||
| **Claude** | 温暖、文学感、有人格 | **衬线体做 AI 回复**——反无衬线单一文化 |
|
||||
|
||||
---
|
||||
|
||||
## 对 markstream-vue 的建议
|
||||
|
||||
### 默认排版方向
|
||||
|
||||
不需要5种 preset，需要**1种好的默认**+ 通过 token 可调。
|
||||
|
||||
**推荐方向：Technical Clean + 一点 Notion 的呼吸感**
|
||||
|
||||
理由：
|
||||
- markstream-vue 的主要场景是 AI 对话 + 开发文档 + 内容渲染
|
||||
- 用户期望"专业但不冷淡"的感觉
|
||||
- 需要同时服务代码密集和纯文字密集的场景
|
||||
|
||||
### 具体参数方向
|
||||
|
||||
| 维度 | 建议 | 依据 |
|
||||
|---|---|---|
|
||||
| 内容宽度 | `max-width: 65ch` | 行业共识 |
|
||||
| 正文字号 | 16px (1rem) | 所有产品的最低线 |
|
||||
| 正文行高 | 1.6 | 无障碍 + 舒适的交叉点 |
|
||||
| 标题缩放 | Major Third (1.25) | 文档/内容应用的平衡点 |
|
||||
| 标题字重 | h1: 700, h2: 600, h3-h4: 600, h5-h6: 500 | Apple + shadcn 的 weight > size 趋势 |
|
||||
| 段落间距 | 1.5em | 行高的约 1x |
|
||||
| 标题上下比 | 上 1.5x : 下 1x | 接近原则 |
|
||||
| 默认字体 | `system-ui` → 可通过 token 切换 | 流式渲染零跳动 |
|
||||
| h5/h6 区分 | opacity/color 降级，不是字号 | Linear/Apple 的做法 |
|
||||
Reference in New Issue
Block a user