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>
19 KiB
19 KiB
MeetNote Design System
基于风格库 10 BrandKit Purple 改造 + Notion/Linear 应用骨架 亮色 · 工具应用 · 长文阅读优先 2026-04-13 锁定（风格 11 已废弃，理由：落地页导向不匹配工具场景）
设计哲学
干净、克制、像 Notion / Linear 一样可以看一下午不累。
- ❌ 不做：花哨渐变、3D 动效、品牌感过强的装饰
- ✅ 保留：oklch 色彩空间、Surface 层级系统、Desktop/Mobile 双端骨架
- ✅ 改造：品牌紫 → 中性蓝紫（更 Linear 理性）、加应用状态色（转写中/已完成）
Tokens（MeetNote 版）
: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);
}
字体
--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 50msdelay（最多 10 个，超过不做动画） - 状态变化：
transition-colors 200ms - 转写中状态：圆点
animate-pulse - 禁止：3D 翻转、视差、粒子、Hover 大幅位移 —— 工具应用要稳
长时阅读优化
- 对比度 ≥ WCAG AA（近白底近黑字天然满足）
- 转写正文
max-w-[680px]（78 字/行） - 字体大小可在设置调（14/15/16/18 四档，MVP 可选）
- 暗色模式：v2（已预留
.darktoken） - 字重不低于 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（亮色 + 蓝紫中性主色），确认