kang
160de60ac0
- Reason: style 11 is landing-page oriented, mismatch for tool app - Pick 10 BrandKit Purple (scene=app, Notion/Linear parallel) - Light mode locked (long-form reading), dark mode reserved for v2 - Primary color: shift from BrandKit purple 310° to neutral blue-purple 275° oklch(0.58 0.18 275) - Keep Inter + Noto Sans SC for mixed zh-en typography - Rewrite all three page wireframes for light theme - Inherit BrandKit's Surface layer system and large rounded corners Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
364 lines
19 KiB
Markdown
364 lines
19 KiB
Markdown
# MeetNote Design System
|
||
|
||
> 基于风格库 **10 BrandKit Purple** 改造 + Notion/Linear 应用骨架
|
||
> 亮色 · 工具应用 · 长文阅读优先
|
||
> 2026-04-13 锁定（风格 11 已废弃，理由：落地页导向不匹配工具场景）
|
||
|
||
---
|
||
|
||
## 设计哲学
|
||
|
||
**干净、克制、像 Notion / Linear 一样可以看一下午不累。**
|
||
|
||
- ❌ 不做：花哨渐变、3D 动效、品牌感过强的装饰
|
||
- ✅ 保留：oklch 色彩空间、Surface 层级系统、Desktop/Mobile 双端骨架
|
||
- ✅ 改造：品牌紫 → 中性蓝紫（更 Linear 理性）、加应用状态色（转写中/已完成）
|
||
|
||
---
|
||
|
||
## Tokens（MeetNote 版）
|
||
|
||
```css
|
||
:root {
|
||
/* 背景层级（沿用 BrandKit 的 Surface 系统） */
|
||
--background: oklch(0.985 0.005 260); /* 极浅灰蓝底 */
|
||
--surface: oklch(0.985 0.005 260); /* = background */
|
||
--surface-elevated: oklch(1 0 0); /* 卡片/弹窗 纯白 */
|
||
--surface-muted: oklch(0.96 0.01 260); /* 次级区域 */
|
||
|
||
--foreground: oklch(0.15 0.02 260); /* 主文字 近黑 */
|
||
--muted-foreground: oklch(0.50 0.02 260); /* 次级文字 */
|
||
--muted: oklch(0.94 0.01 260);
|
||
|
||
/* 主色 - 候选 A 蓝紫中性（从 BrandKit 紫 310° 移到 275°，饱和降低） */
|
||
--primary: oklch(0.58 0.18 275); /* 理性蓝紫 */
|
||
--primary-foreground: oklch(0.98 0 0);
|
||
--primary-light: oklch(0.68 0.15 275); /* hover */
|
||
--primary-subtle: oklch(0.95 0.03 275); /* 淡底 */
|
||
|
||
/* 边框 */
|
||
--border: oklch(0.92 0.01 260);
|
||
--border-strong: oklch(0.86 0.01 260); /* 强化边框（列表分割） */
|
||
--input: oklch(0.92 0.01 260);
|
||
--ring: oklch(0.58 0.18 275);
|
||
|
||
/* 状态色（应用必需，BrandKit 原版没给全） */
|
||
--success: oklch(0.65 0.16 155); /* 已完成 绿 */
|
||
--warning: oklch(0.72 0.15 75); /* 转写中 琥珀 */
|
||
--danger: oklch(0.60 0.22 25); /* 失败 红 */
|
||
--info: oklch(0.65 0.12 230); /* 信息 蓝 */
|
||
|
||
/* 深色点缀（Onboarding 欢迎页 + 空态插画用） */
|
||
--brand-dark: oklch(0.13 0.02 260);
|
||
--brand-dark-soft: oklch(0.20 0.02 260);
|
||
|
||
--radius: 1rem; /* 大圆角（BrandKit 特征，温和 SaaS 感） */
|
||
}
|
||
|
||
/* 暗色模式（v2 预留，MVP 不做） */
|
||
.dark {
|
||
--background: oklch(0.14 0.01 260);
|
||
--surface-elevated: oklch(0.18 0.01 260);
|
||
--surface-muted: oklch(0.22 0.01 260);
|
||
--foreground: oklch(0.95 0.005 260);
|
||
--muted-foreground: oklch(0.65 0.01 260);
|
||
--border: oklch(0.28 0.01 260);
|
||
--primary: oklch(0.70 0.18 275);
|
||
--primary-foreground: oklch(0.14 0.01 260);
|
||
}
|
||
```
|
||
|
||
## 字体
|
||
|
||
```css
|
||
--font-sans: 'Inter', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
|
||
--font-mono: 'Geist Mono', 'JetBrains Mono', 'Sarasa Mono SC', ui-monospace, monospace;
|
||
```
|
||
|
||
**选择理由**：
|
||
- **Inter**：BrandKit 原版用，中英混排公认平衡点，字宽匀称适合后台工具
|
||
- **Noto Sans SC**：中文 fallback，Google 免费，Tailwind 默认栈兼容
|
||
- **Geist Mono**：时间戳/文件名用，字形清晰
|
||
|
||
| 用途 | 大小 | 字重 | 行高 |
|
||
|---|---|---|---|
|
||
| 页面标题 | 24px | 600 | 1.3 |
|
||
| 会议标题 | 18px | 600 | 1.4 |
|
||
| 正文 / 转写文本 | 15px | 400 | **1.75**（长读优先）|
|
||
| 时间戳 / 元信息 | 13px | 500 | — |
|
||
| 角标 / 标签 | 11px | 500 | — |
|
||
|
||
---
|
||
|
||
## 布局骨架（Desktop）
|
||
|
||
BrandKit 原版是 **左侧导航 + 右侧内容区**，完美匹配我们需求：
|
||
|
||
```
|
||
┌─────────┬────────────────────────────────────┐
|
||
│ │ │
|
||
│ MeetNote│ Page Content │
|
||
│ │ │
|
||
│ 📤 上传 │ │
|
||
│ 📋 会议 │ │
|
||
│ 🔍 搜索 │ │
|
||
│ │ │
|
||
│ ───── │ │
|
||
│ ⚙ 设置 │ │
|
||
│ 👤 │ │
|
||
└─────────┴────────────────────────────────────┘
|
||
|
||
侧栏 240px（collapsed 64px）· 主区 flex-1 · 圆角 rounded-2xl
|
||
```
|
||
|
||
**Mobile** (<768px)：底部 Tab Bar 代替侧栏（BrandKit 原版已实现）
|
||
|
||
```
|
||
┌──────────────────────────┐
|
||
│ │
|
||
│ Page Content │
|
||
│ │
|
||
│ │
|
||
│ │
|
||
├──────────────────────────┤
|
||
│ 📤 📋 🔍 ⚙ │
|
||
└──────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 三个核心页面线框（亮色）
|
||
|
||
### Page 1: 上传页 `/upload`
|
||
|
||
```
|
||
┌───────────────────────────────────────────────────┐
|
||
│ │
|
||
│ 新建会议 │
|
||
│ 把手机录好的音频拖进来 │
|
||
│ │
|
||
│ ╭────────────────────────────────────────╮ │
|
||
│ │ │ │
|
||
│ │ ↑ │ │
|
||
│ │ │ │
|
||
│ │ 拖拽音频文件到这里 │ │
|
||
│ │ 或 点击选择文件 │ │
|
||
│ │ │ │
|
||
│ │ 支持 m4a · mp3 · wav · mp4 · opus │ │
|
||
│ │ 单文件最大 500 MB │ │
|
||
│ │ │ │
|
||
│ ╰────────────────────────────────────────╯ │
|
||
│ (虚线框 border-dashed border-border │
|
||
│ hover:border-primary hover:bg-primary-subtle) │
|
||
│ │
|
||
│ 会议标题（可选） │
|
||
│ ┌──────────────────────────────────────┐ │
|
||
│ │ 例：与客户对齐定价 │ │
|
||
│ └──────────────────────────────────────┘ │
|
||
│ │
|
||
│ 参与人（可选，提升总结质量） │
|
||
│ ┌──────────────────────────────────────┐ │
|
||
│ │ 张三, 李四, 客户王总 │ │
|
||
│ └──────────────────────────────────────┘ │
|
||
│ │
|
||
│ [取消] [开始上传 →] │
|
||
│ │
|
||
└───────────────────────────────────────────────────┘
|
||
|
||
上传中状态（文件已选）：
|
||
╭────────────────────────────────────────╮
|
||
│ 📄 meeting-2026-04-13.m4a 87 MB │
|
||
│ ████████████░░░░░░░░ 62% │
|
||
│ 15 MB/s · 还需 3 秒 │
|
||
╰────────────────────────────────────────╯
|
||
```
|
||
|
||
**视觉要点**
|
||
- 拖拽区：`bg-surface-elevated border-2 border-dashed border-border rounded-2xl p-16`
|
||
- Hover：`border-primary bg-primary-subtle`
|
||
- 按钮：主按钮 `bg-primary text-primary-foreground rounded-full`（BrandKit 全圆按钮）
|
||
- 大圆角 `rounded-2xl` 是 BrandKit 核心特征，全站统一
|
||
|
||
---
|
||
|
||
### Page 2: 会议列表 `/` （首页）
|
||
|
||
```
|
||
┌──────────────────────────────────────────────────┐
|
||
│ 会议记录 [+ 新建会议] │
|
||
│ │
|
||
│ ─── 今天 · 2026-04-13 ───────────── │
|
||
│ │
|
||
│ ╭───────────────────────────────────────╮ │
|
||
│ │ 与客户对齐定价 │ │
|
||
│ │ 14:30 · 1h 23min │ │
|
||
│ │ │ │
|
||
│ │ 🟠 转写中 3/5 片 │ │
|
||
│ │ ▓▓▓▓▓▓░░░░ 60% │ │
|
||
│ ╰───────────────────────────────────────╯ │
|
||
│ │
|
||
│ ╭───────────────────────────────────────╮ │
|
||
│ │ 团队周会 │ │
|
||
│ │ 10:00 · 45min · 张三 李四 王五 │ │
|
||
│ │ │ │
|
||
│ │ 🟢 已完成 │ │
|
||
│ │ │ │
|
||
│ │ 本周关键进展：A 项目完成 80%，B 项目 │ │
|
||
│ │ 进入测试阶段，下周聚焦上线准备... │ │
|
||
│ │ │ │
|
||
│ │ #周会 #进度 #排期 │ │
|
||
│ ╰───────────────────────────────────────╯ │
|
||
│ │
|
||
│ ─── 昨天 · 2026-04-12 ───────────── │
|
||
│ │
|
||
│ ╭───────────────────────────────────────╮ │
|
||
│ │ 产品 Review │ │
|
||
│ │ 16:00 · 52min │ │
|
||
│ │ 🟢 已完成 │ │
|
||
│ │ 讨论 Q2 产品路线图，确定三个重点... │ │
|
||
│ ╰───────────────────────────────────────╯ │
|
||
│ │
|
||
└──────────────────────────────────────────────────┘
|
||
```
|
||
|
||
**卡片样式**
|
||
- `bg-surface-elevated border border-border rounded-2xl p-5`
|
||
- hover：`border-primary/30 shadow-sm`
|
||
- 状态徽章：圆点 + 文字，颜色用 `--success / --warning / --danger / --info`
|
||
|
||
**状态机**
|
||
| 状态 | 圆点 | 文字 | 背景变化 |
|
||
|---|---|---|---|
|
||
| `pending` | ⚪ muted-foreground | 排队中 | — |
|
||
| `uploading` | 🔵 info | 上传中 X% | 进度条 |
|
||
| `transcribing` | 🟠 warning | 转写中 X/Y 片 | 进度条 |
|
||
| `summarizing` | 🟠 warning | 总结中 | pulse 动画 |
|
||
| `done` | 🟢 success | 已完成 | 展示总结前 2 行 + 关键词 |
|
||
| `failed` | 🔴 danger | 失败 · 重试 | 红色边框 |
|
||
|
||
完成态的卡片自动显示**总结前 2 行 + 关键词 tag**，列表页就能快速定位，不用点进去。
|
||
|
||
---
|
||
|
||
### Page 3: 会议详情 `/meetings/[id]`
|
||
|
||
```
|
||
┌──────────────────────────────────────────────────────┐
|
||
│ ← 与客户对齐定价 ⋯ │
|
||
│ 2026-04-13 14:30 · 1h 23min · 张三 李四 王总 │
|
||
├──────────────────────────────────────────────────────┤
|
||
│ ▶ ━━━━━━●━━━━━━━━━━━━━━━━ 00:21 / 1:23:44 │
|
||
│ 1x ⚙ │
|
||
├─────────────────────────┬────────────────────────────┤
|
||
│ │ │
|
||
│ [转写] [总结] [⬇] │ ╭── ⭐ 要点 ──────────╮ │
|
||
│ │ │ • 三档定价方案已确定 │ │
|
||
│ [00:00] 张三 ▸ │ │ • 客户接受 Pro 档位 │ │
|
||
│ 大家好，今天主要是 │ │ $29/mo │ │
|
||
│ 对齐一下 Q2 的定价 │ │ • 合同细节待补 │ │
|
||
│ 方案，pipeline 基本 │ ╰───────────────────────╯ │
|
||
│ 已经 ready 了 │ │
|
||
│ │ ╭── ✅ 待办 ──────────╮ │
|
||
│ [00:15] 李四 ▸ │ │ ☐ 张三：周五前出 │ │
|
||
│ OK, 我这边准备了三个 │ │ 合同草稿 │ │
|
||
│ 档位的方案，分别是... │ │ ☐ 李四：下周一发 │ │
|
||
│ │ │ 定价 deck │ │
|
||
│ [01:30] 王总 ▸ │ ╰───────────────────────╯ │
|
||
│ 我觉得 Pro 档的 SLA │ │
|
||
│ 需要再明确一下... │ ╭── 🎯 决议 ──────────╮ │
|
||
│ │ │ ✓ 采用三档定价 │ │
|
||
│ ... │ │ ✓ Pro 档给客户 10% │ │
|
||
│ │ │ 折扣 │ │
|
||
│ │ ╰───────────────────────╯ │
|
||
│ │ │
|
||
│ │ ╭── # 关键词 ────────╮ │
|
||
│ │ │ #定价 #Q2 #客户 │ │
|
||
│ │ │ #合同 #Pro档位 │ │
|
||
│ │ ╰───────────────────────╯ │
|
||
└─────────────────────────┴────────────────────────────┘
|
||
|
||
主区左侧 60% 转写 · 右侧 40% 总结四卡
|
||
```
|
||
|
||
**视觉要点**
|
||
- 总结四卡：`bg-surface-elevated border border-border rounded-2xl p-5`，四张独立卡垂直排列，不再用 Bento 毛玻璃（亮色下毛玻璃不好看）
|
||
- 转写每段：说话人 + 时间戳 + 文本，时间戳**可点击跳转音频**
|
||
- 顶部播放器 `sticky top-0`，滚动不消失
|
||
- 每段最大宽度 `max-w-[680px]`（≈ 78 字/行，阅读黄金比例）
|
||
- 手机端：转写/总结 Tab 切换，一次一个
|
||
|
||
**Mobile 详情页**
|
||
```
|
||
┌──────────────────────┐
|
||
│ ← 与客户对齐定价 │
|
||
│ 14:30 · 1h 23min │
|
||
├──────────────────────┤
|
||
│ ▶ ━━●━━━━━━ 0:21 │
|
||
├──────────────────────┤
|
||
│ [转写] [总结] │
|
||
├──────────────────────┤
|
||
│ 张三 [00:00] │
|
||
│ 大家好，今天主要... │
|
||
│ │
|
||
│ 李四 [00:15] │
|
||
│ OK, 我这边准备... │
|
||
└──────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 组件复用策略
|
||
|
||
**直接抄**（源码 `sources/10-brandkit-purple/src/components/ui/`）：
|
||
- 全部 56 个 shadcn 组件（button / card / progress / badge / tabs / tooltip / sonner / dialog / drawer / sheet / table / skeleton / ...）
|
||
|
||
**改造参考**（`components/brandkit/`）：
|
||
- `brandkit-app.tsx` → 主应用 shell（导航 + 路由）
|
||
- `desktop-views.tsx` → 7 个桌面页面实现
|
||
- `mobile/` → 5 个移动端页面
|
||
- `onboarding-screen.tsx` → Onboarding 左深右浅（MVP 不用，v2 首次使用引导可抄）
|
||
|
||
**丢弃**（MeetNote 不需要）：
|
||
- Warehouse / Styles / Assets / Camera / Brand Generation 相关业务组件
|
||
|
||
---
|
||
|
||
## 动效原则
|
||
|
||
- 页面切换：`fade 200ms ease-out`
|
||
- 卡片入场：`stagger 50ms` delay（最多 10 个，超过不做动画）
|
||
- 状态变化：`transition-colors 200ms`
|
||
- 转写中状态：圆点 `animate-pulse`
|
||
- **禁止**：3D 翻转、视差、粒子、Hover 大幅位移 —— 工具应用要稳
|
||
|
||
---
|
||
|
||
## 长时阅读优化
|
||
|
||
- 对比度 ≥ WCAG AA（近白底近黑字天然满足）
|
||
- 转写正文 `max-w-[680px]`（78 字/行）
|
||
- 字体大小可在设置调（14/15/16/18 四档，MVP 可选）
|
||
- 暗色模式：v2（已预留 `.dark` token）
|
||
- 字重不低于 400（亮色背景细字难读）
|
||
|
||
---
|
||
|
||
## 锁定清单
|
||
|
||
| 项 | 决策 | 说明 |
|
||
|---|---|---|
|
||
| 风格基座 | **10 BrandKit Purple**（改造）| scene=应用，Notion/Linear 对标最准 |
|
||
| 色调 | **亮色**（暗色 v2 预留）| 长文阅读主流 |
|
||
| 主色 | **蓝紫中性** oklch(0.58 0.18 275) | 从原版紫 310° 移到 275°，降饱和 |
|
||
| 字体 | **Inter + Noto Sans SC** | 中英混排平衡 |
|
||
| 圆角 | **1rem / 2rem**（大圆角）| BrandKit 特征保留 |
|
||
| 按钮 | 全圆 rounded-full | BrandKit 特征保留 |
|
||
| 布局 | 左侧栏 + 主区 · Mobile 底 Tab | BrandKit 原版已做 |
|
||
| 总结卡 | 四张独立卡（不用毛玻璃）| 亮色下纯白卡最干净 |
|
||
| 状态色 | success/warning/danger/info | 应用必需，自定义添加 |
|
||
|
||
## 历史决策
|
||
|
||
- 2026-04-13 20:XX · ~~初选 11 Dark Dev SaaS~~ → 判定场景不符（落地页导向），废弃
|
||
- 2026-04-13 20:XX · 重选 10 BrandKit Purple（亮色 + 蓝紫中性主色），确认
|