kangwan/meetnote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: lock visual system based on style lib 11 Dark Dev SaaS

Browse Source 
- 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>
This commit is contained in:
kang
2026-04-13 18:33:30 +08:00
parent 823e195395
commit 0b966c63ef
1 changed files with 295 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

295
.memory/design-system.md Normal file
View File

@@ -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 再加 | ✅ 推荐 |