diff --git a/.memory/design-system.md b/.memory/design-system.md new file mode 100644 index 0000000..fa1d8a3 --- /dev/null +++ b/.memory/design-system.md @@ -0,0 +1,295 @@ +# MeetNote Design System + +> 基于风格库 **11 Dark Dev SaaS** 改造 + Linear 应用骨架 +> 关键差异：原风格是落地页导向，本项目是**工具应用**，布局和密度都要改 + +--- + +## 设计哲学 + +**冷静、克制、长时间看不累。** 会议复盘是 1-2 小时注视的场景，必须避免炫技。 + +- ❌ 不做：炫酷 hero 网格、pricing、testimonial、Framer Motion 大动效 +- ✅ 保留：暗色基调、毛玻璃 Bento 卡、荧光青绿 accent、shadcn/ui 组件库 +- ✅ 微调：主色降饱和（避免过度赛博感），字体换 DM Sans + Noto Sans SC（中英混排更稳） + +--- + +## Tokens（MeetNote 版） + +```css +:root { + /* 背景 - 沿用风格 11 */ + --background: 210 11% 7%; /* #0f1211 深灰绿黑 */ + --foreground: 160 14% 93%; /* #e7eceb 浅灰绿白 */ + + /* 主色 - 降饱和（从 96% → 65%），冷静绿取代荧光青 */ + --primary: 165 65% 65%; /* 冷静绿 */ + --primary-foreground: 160 8% 6%; + --primary-dark: 165 70% 45%; + --primary-light: 165 40% 80%; + + /* 状态色 - 新增（应用必需） */ + --success: 150 60% 55%; /* 已完成 */ + --warning: 38 90% 60%; /* 转写中 */ + --danger: 0 72% 60%; /* 失败 */ + --info: 210 80% 65%; /* 信息 */ + + /* 层级 - 沿用 */ + --muted: 240 2% 16%; + --muted-foreground: 160 14% 93% / 0.7; + --muted-foreground-light: 160 14% 93% / 0.5; + + /* 卡片 - 毛玻璃（沿用） */ + --card: 220 17% 98% / 0.01; + --card-foreground: 160 14% 93%; + --card-blur: blur(8px); + + /* 边框 - 白色 8% 透明 */ + --border: 240 100% 100% / 0.08; + + /* 语义 */ + --ring: 165 65% 65%; + --radius: 0.5rem; +} +``` + +## 字体 + +```css +--font-sans: 'DM Sans', 'Noto Sans SC', system-ui, -apple-system, sans-serif; +--font-mono: 'JetBrains Mono', 'Sarasa Mono SC', ui-monospace, monospace; +``` + +| 用途 | 大小 | 字重 | +|---|---|---| +| 页面标题 | 24px | 600 | +| 会议标题 | 18px | 500 | +| 正文/转写 | 15px | 400 (行高 1.75) | +| 时间戳/标签 | 13px | 500 | +| 角标 | 11px | 500 | + +**转写全文**用 1.75 行高，长时间阅读最舒服。 + +--- + +## 布局骨架 + +**Linear 式应用 shell**，不是落地页： + +``` +┌─────────────────────────────────────────────┐ +│ [侧栏 240px] [主内容区 flex-1] │ +│ │ +│ logo ┌──── page content ────┐ │ +│ │ │ │ +│ 📤 上传 │ │ │ +│ 📋 会议列表 │ │ │ +│ 🔍 搜索(v2) │ │ │ +│ │ │ │ +│ ───── │ │ │ +│ ⚙ 设置 │ │ │ +│ └───────────────────────┘ │ +└─────────────────────────────────────────────┘ + +响应式： + < 768px → 侧栏变底部 tab bar + ≥ 768px → 侧栏固定左侧 +``` + +--- + +## 三个核心页面线框 + +### Page 1: 上传页 `/upload` + +``` +┌─────────────────────────────────────────────────┐ +│ │ +│ 新建会议 │ +│ 手机录好后直接拖进来 │ +│ │ +│ ╭───────────────────────────────────────╮ │ +│ │ │ │ +│ │ ⬆ │ │ +│ │ │ │ +│ │ 拖拽音频文件到这里 │ │ +│ │ 或 点击选择文件 │ │ +│ │ │ │ +│ │ 支持 m4a · mp3 · wav · mp4 · opus │ │ +│ │ 单文件最大 500 MB │ │ +│ │ │ │ +│ ╰───────────────────────────────────────╯ │ +│ │ +│ 会议标题（可选，不填用文件名） │ +│ ┌─────────────────────────────────────┐ │ +│ │ 例：与客户对齐定价 │ │ +│ └─────────────────────────────────────┘ │ +│ │ +│ 参与人（可选，帮助总结质量） │ +│ ┌─────────────────────────────────────┐ │ +│ │ 张三, 李四, 客户王总 │ │ +│ └─────────────────────────────────────┘ │ +│ │ +│ [取消] [开始上传 →] │ +│ │ +└─────────────────────────────────────────────────┘ + +上传中状态： + ╭───────────────────────────────────────╮ + │ 📄 meeting-2026-04-13.m4a (87 MB) │ + │ ████████████░░░░░░░░ 62% 15MB/s │ + │ 还需 3 秒 │ + ╰───────────────────────────────────────╯ +``` + +**关键细节**： +- 拖拽区用虚线边框 `border-foreground/15`，hover 变 primary +- 文件列队可多选，一次传多个（排队处理） +- 分片进度用 shadcn Progress，底色 `muted`，填充 `primary` + +--- + +### Page 2: 会议列表 `/` （首页） + +``` +┌─────────────────────────────────────────────────┐ +│ 会议记录 + 新建 │ +│ │ +│ ━━━ 今天 · 2026-04-13 ━━━ │ +│ │ +│ ╭─────────────────────────────────────╮ │ +│ │ 🎙 与客户对齐定价 │ │ +│ │ 14:30 1h 23min │ │ +│ │ ● 转写中 3/5 片 │ │ +│ │ ▓▓▓▓▓▓░░░░ 60% │ │ +│ ╰─────────────────────────────────────╯ │ +│ │ +│ ╭─────────────────────────────────────╮ │ +│ │ 🎙 团队周会 │ │ +│ │ 10:00 45min · 张三 李四 王五 │ │ +│ │ ✓ 已完成 │ │ +│ │ │ │ +│ │ "本周关键进展：A 项目完成 80%..." │ │ +│ │ #周会 #进度 #排期 │ │ +│ ╰─────────────────────────────────────╯ │ +│ │ +│ ━━━ 昨天 · 2026-04-12 ━━━ │ +│ │ +│ ╭─────────────────────────────────────╮ │ +│ │ 🎙 产品 Review │ │ +│ │ 16:00 52min │ │ +│ │ ✓ 已完成 │ │ +│ │ "讨论 Q2 产品路线图，确定三个重点..." │ │ +│ ╰─────────────────────────────────────╯ │ +│ │ +└─────────────────────────────────────────────────┘ +``` + +**卡片状态**： +| 状态 | 徽章 | 颜色 | +|---|---|---| +| `pending` | ⏳ 排队中 | muted-foreground | +| `uploading` | ⬆ 上传中 X% | info | +| `transcribing` | ● 转写中 X/Y 片 | warning | +| `summarizing` | ● 总结中 | warning | +| `done` | ✓ 已完成 | success | +| `failed` | ✗ 失败（重试） | danger | + +**完成状态**的卡片自动展示总结前 2 行 + 关键词标签，无需点进去也能快速定位。 + +--- + +### Page 3: 会议详情 `/meetings/[id]` + +``` +┌────────────────────────────────────────────────────┐ +│ ← 与客户对齐定价 ⋯ │ +│ 2026-04-13 14:30 · 1h 23min · 张三 李四 王总 │ +├────────────────────────────────────────────────────┤ +│ ▶ ━━━━━━●━━━━━━━━━━━━━━━━ 00:21 / 1:23:44 │ +│ 1x 2x │ +├─────────────────────────┬──────────────────────────┤ +│ │ │ +│ [转写] [总结] [下载] │ ╭── ⭐ 要点 ──────╮ │ +│ │ │ • 三档定价方案 │ │ +│ [00:00] 张三 ▸ │ │ 已确定 │ │ +│ 大家好，今天主要是 │ │ • 客户接受 Pro │ │ +│ 对齐一下 Q2 的定价 │ │ 档位 $29/mo │ │ +│ 方案，pipeline 基本 │ │ • ... │ │ +│ 已经 ready 了 │ ╰──────────────────╯ │ +│ │ │ +│ [00:15] 李四 ▸ │ ╭── ✅ 待办 ──────╮ │ +│ OK, 我这边准备了三个 │ │ ☐ 张三：周五前 │ │ +│ 档位的方案，分别是... │ │ 出合同草稿 │ │ +│ │ │ ☐ 李四：下周一 │ │ +│ [01:30] 王总 ▸ │ │ 发送定价 deck │ │ +│ 我觉得 Pro 档的 SLA │ │ ☐ ... │ │ +│ 需要再明确一下... │ ╰──────────────────╯ │ +│ │ │ +│ ... │ ╭── 🎯 决议 ──────╮ │ +│ │ │ ✓ 采用三档定价 │ │ +│ │ │ ✓ Pro 档给客户 │ │ +│ │ │ 10% 折扣 │ │ +│ │ ╰──────────────────╯ │ +│ │ │ +│ │ ╭── # 关键词 ────╮ │ +│ │ │ #定价 #Q2 │ │ +│ │ │ #客户 #合同 │ │ +│ │ │ #Pro档位 │ │ +│ │ ╰──────────────────╯ │ +└─────────────────────────┴──────────────────────────┘ +``` + +**关键细节**： +- 左右两栏，左 60% 转写，右 40% 总结四卡 +- 手机端：转写/总结 tab 切换，一次一个 +- 转写每段时间戳可点击 → 音频跳转到对应位置 +- 总结四卡用 Bento 毛玻璃样式（从风格 11 继承） +- 顶部播放器固定 sticky，滚动不消失 +- 右上 ⋯ 菜单：重命名、换引擎重转、删除、导出 MD + +--- + +## 组件清单（复用风格 11 源码） + +**直接抄**（无需改）： +- `components/ui/*` 全部 56 个 shadcn 组件 → copy-paste +- `components/animated-section.tsx` → 页面入场动画包装 + +**改造**（参考不抄）： +- `components/bento/*` → 看毛玻璃实现，改造成总结四卡 +- `components/header.tsx` → 改造成应用顶栏（不要 Landing 导航） + +**丢弃**（MVP 不要）： +- `hero-section.tsx` `pricing-section.tsx` `testimonial-*.tsx` `faq-*.tsx` `cta-section.tsx` `footer-section.tsx` + +--- + +## 动效原则 + +- 页面切换 `fade-in 200ms` +- 卡片入场 `stagger 50ms` delay +- 状态变化 `200ms ease-out` +- **禁止**：3D 翻转、视差滚动、粒子效果（应用不是 Landing） + +--- + +## 无障碍 & 长时阅读 + +- 对比度 ≥ WCAG AA（暗底白字自然满足） +- 转写正文最大宽度 `max-w-[680px]`（≈ 78 字/行，阅读最优） +- 字体大小可在设置里调（14/15/16/18 四档） +- 可选切换亮色（v2，MVP 暗色 only） + +--- + +## 微调确认清单 + +| 项 | 原风格 11 | MeetNote 版 | 需要你拍板 | +|---|---|---|---| +| 主色饱和度 | 96% 荧光青 | 65% 冷静绿 | ⚠️ 决定 | +| 字体 | system font | DM Sans + Noto Sans SC | ⚠️ 决定 | +| 布局 | Landing（全宽 hero） | Linear 式（侧栏+主区） | ✅ 推荐 | +| 总结四卡样式 | Bento 毛玻璃 | 继承 Bento 毛玻璃 | ✅ 推荐 | +| 亮色模式 | 无 | v2 再加 | ✅ 推荐 |