kang
0b966c63ef
- Desaturate primary from 96% to 65% (cyberpunk → Linear calm) - Use DM Sans + Noto Sans SC for mixed zh-en reading - App shell layout (sidebar + main), not landing page - Discard hero/pricing/testimonial sections, keep bento card style for 4-card summary - Include wireframes for upload / list / detail pages Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
296 lines
14 KiB
Markdown
296 lines
14 KiB
Markdown
# 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 再加 | ✅ 推荐 |
|