# UI 设计方案
## 零、两种布局模式
系统有两种完全不同的布局，对应两种用户状态：
| | 未登录（Public Layout） | 已登录（App Layout） |
|---|---|---|
| 目标 | 展示价值 → 引导注册 | 个性化推送 → 深度使用 |
| Header | 透明/半透明，导航链接 | 固定深色，面包屑 + 头像 |
| 侧边栏 | **无** | 有（菜单导航） |
| 内容 | 公开推荐、热榜、Marketing 页 | 个人 Feed、收藏、团队 |
| Footer | 有（About/Pricing/联系方式） | 无（空间留给内容） |
| 参考 | deerlit.com / arxivdaily.com | Notion / Linear 的 App 内体验 |
```
未登录用户看到的： 登录后看到的：
┌──────────────────────┐ ┌────┬─────────────────────┐
│ Header (透明) │ │ │ Header (深色固定) │
│ 首页 | 每日精选 | 搜索 │ │ 侧 │ │
├──────────────────────┤ │ ├─────────────────────┤
│ │ │ 边 │ │
│ 🎯 Hero Section │ │ │ 个性化 Feed │
│ "全球肿瘤学进展" │ │ 栏 │ 收藏 / 团队 / 设置 │
│ │ │ │ │
├──────────────────────┤ │ │ │
│ 📰 今日精选文献 │ │ │ │
│ 卡片瀑布流 │ └────┴─────────────────────┘
│ │
│ 🔥 本周热榜 │
│ │
├──────────────────────┤
│ Footer │
│ 定价 | 关于 | 联系 │
└──────────────────────┘
```
---
## 零-B：未登录公开页面设计（Public Layout）
### B.1 首页（Landing Page）
```
┌──────────────────────────────────────────────────────────────┐
│ Header: [🔬 肿瘤科文献中心] [每日精选] [搜索] [登录] [注册] │
├──────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────┐ │
│ │ │ │
│ │ 全球肿瘤学进展，每日自动推送 │ │
│ │ │ │
│ │ 覆盖 NEJM/Lancet/JAMA/JCO 等 │ │
│ │ 100+ 肿瘤学期刊 · 每日精选 60+ 篇 │ │
│ │ │ │
│ │ [ 免费注册 ] [ 浏览今日精选 ] │ │
│ │ │ │
│ └─────────────────────────────────────┘ │
│ │
├──────────────────────────────────────────────────────────────┤
│ │
│ 📰 今日肿瘤学精选 (2025-07-04) │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ 文献卡片 │ │ 文献卡片 │ │ 文献卡片 │ │ 文献卡片 │ │
│ │ │ │ │ │ │ │ │ │
│ │ NSCLC │ │ 乳腺癌 │ │ 结直肠癌 │ │ 免疫治疗 │ │
│ │ NEJM │ │ Lancet │ │ JCO │ │ JAMA Onc │ │
│ │ 3期 OS │ │ HER2+ │ │ MSI-H │ │ PD-L1 │ │
│ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │
│ ... (2行 × 4列 = 8篇卡片) │
│ │
│ [ 查看全部今日文献 → ] │
│ │
├──────────────────────────────────────────────────────────────┤
│ │
│ 🔥 本周热榜 │
│ │
│ 1. Osimertinib联合化疗 FLAURA2 OS [NEJM] 🔥 2,341 阅读 │
│ 2. CAR-T 实体瘤新突破 [Nature Medicine] 🔥 1,892 阅读 │
│ 3. ctDNA MRD 指导结肠癌辅助化疗 [JCO] 🔥 1,567 阅读 │
│ ... │
│ │
├──────────────────────────────────────────────────────────────┤
│ │
│ 🎯 按癌种浏览 │
│ │
│ [肺癌] [乳腺癌] [结直肠癌] [胃癌] [肝癌] [食管癌] │
│ [胰腺癌] [前列腺癌] [妇科肿瘤] [头颈癌] [血液肿瘤] │
│ [黑色素瘤] [脑肿瘤] [肉瘤] [儿童肿瘤] │
│ │
├──────────────────────────────────────────────────────────────┤
│ │
│ 💬 用户怎么说 │
│ "每天早上查房前5分钟，看完全世界最重要的肿瘤学进展" │
│ —— 王主任，北京协和医院肿瘤内科 │
│ │
├──────────────────────────────────────────────────────────────┤
│ │
│ 📊 数据一览 │
│ 累计收录 638 万篇 | 覆盖 127 本肿瘤学期刊 | 日均更新 62 篇 │
│ │
├──────────────────────────────────────────────────────────────┤
│ Footer │
│ © 2025 肿瘤科文献中心 | 关于我们 | 定价 | 帮助 | 联系 │
└──────────────────────────────────────────────────────────────┘
```
| 组件 | 用途 |
|------|------|
| 自定义 Hero Section | 价值主张 + CTA 按钮 |
| `n-grid` (cols=4, x-gap=16) | 文献卡片瀑布流 |
| `n-card` (hoverable) | 每篇推荐文献 |
| `n-tag` | 癌种/期刊标签 |
| `n-button` (type=primary, size=large) | 注册 CTA |
| `n-button` (type=default, ghost) | "浏览今日精选"（不强制注册） |
| `n-list` + `n-thing` | 热榜排行 |
| `n-statistic` | 底部数据展示 |
### B.2 每日精选页（公开全文浏览）
```
┌──────────────────────────────────────────────────────────────┐
│ ← 首页 📰 今日肿瘤学精选 2025-07-04 [🔍 搜索...] │
├──────────────────────────────────────────────────────────────┤
│ │
│ 快捷过滤：[全部] [NSCLC] [乳腺癌] [免疫治疗] [3期] [NEJM] │
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ 文献卡片 1 │ │
│ │ Osimertinib联合化疗对比单药一线治疗EGFR突变NSCLC │ │
│ │ Ramalingam SS | NEJM | 2025-07-03 │ │
│ │ [NSCLC] [EGFR] [奥希替尼] [3期] [OS] │ │
│ │ │ │
│ │ 🔬 奥希替尼联合化疗对比单药，中位OS延长6.3个月 │ │
│ │ │ │
│ │ [📄 查看摘要] [🔗 PubMed] [⭐ 登录后收藏] │ │
│ └───────────────────────────────────────────────────────┘ │
│ ... │
│ │
│ [ 加载更多... ] │
│ │
│ ┌───────────────────────────────────────────────────────┐ │
│ │ 🔒 注册后你可以： │ │
│ │ ✅ 设置关注领域，精准推送 │ │
│ │ ✅ 收藏文献 + 笔记 + 导出 │ │
│ │ ✅ 每日 7:00 微信/邮件推送 │ │
│ │ ✅ 科室团队共享 + Journal Club │ │
│ │ │ │
│ │ [ 免费注册 (30秒) ] │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────┘
```
**设计要点**：
- 公开页可以浏览全部每日精选文献（无需登录）
- 查看摘要点展开，不跳页
- 收藏/导出/笔记等操作显示"登录后可用" → 自然转化
- 每滚动一屏后插入一个轻量的 CTA 提醒条
- **不给 PDF 全文链接**（仅登录用户可用），防止被爬
### B.3 文献详情（公开版）
```
公开版文献详情：
✅ 标题 + 作者 + 期刊 + 日期 + DOI/PMID
✅ 中英文摘要全文
✅ AI 一句话总结
✅ 全部标签（点击可搜索同类文献）
✅ PubMed 原始链接
❌ PDF 全文（仅登录）
❌ 收藏/笔记/导出（仅登录）
❌ AI 详细解读（仅登录）
❌ 分享到科室（仅登录）
底部固定条：
┌─────────────────────────────────────────────┐
│ 🔒 注册后查看PDF全文、收藏、导出、AI解读 │
│ [ 免费注册 ] │
└─────────────────────────────────────────────┘
```
### B.4 定价页
```
┌──────────────────────────────────────────────────────────────┐
│ 📊 定价方案 │
│ │
│ ┌──────────┬──────────┬──────────┬──────────┬──────────────┐ │
│ │ Free │ Pro │ Team │ Business │ Enterprise │ │
│ │ 免费 │ ¥35/月 │ ¥70/人/月│ ¥140/人/月│ 定制 │ │
│ ├──────────┼──────────┼──────────┼──────────┼──────────────┤ │
│ │ 500MB │ 10GB │ 无限 │ 无限 │ 无限 │ │
│ │ 1000篇 │ 10000篇 │ 无限 │ 无限 │ 无限 │ │
│ │ 基础导入 │ 高级导入 │ ✅ │ ✅ │ ✅ │ │
│ │ 1人 │ 1人 │ 团队协作 │ RBAC │ 专属实例 │ │
│ │ ❌ │ ❌ │ ❌ │ SSO │ 私有部署 │ │
│ │ ❌ │ ❌ │ ❌ │ 审批流 │ SLA │ │
│ ├──────────┼──────────┼──────────┼──────────┼──────────────┤ │
│ │[开始使用]│[订阅] │[订阅] │[订阅] │[联系销售] │ │
│ └──────────┴──────────┴──────────┴──────────┴──────────────┘ │
└──────────────────────────────────────────────────────────────┘
```
### B.5 关于页 + 帮助中心
- 产品介绍、团队背景
- FAQ（怎么设置关注领域？和 Zotero 比有什么优势？）
- 数据来源说明（PubMed FTP、MeSH）
- 联系方式
### B.6 SEO 优化
**每个公开文献详情页都是独立的 SEO 入口**：
```
/scilit/literature/39701234
→ 标题: "Osimertinib联合化疗对比单药一线治疗EGFR突变NSCLC: FLAURA2 OS结果"
→ meta description: AI 一句话总结
→ 结构化数据: Schema.org/ScholarlyArticle
→ Google Scholar / 百度学术 可索引
```
```html
```
---
## 用户转化漏斗
```
访问首页
│
├─→ 浏览今日精选 (无需登录)
│ │
│ ├─→ 点进文献详情 → 看摘要/AI总结
│ │ │
│ │ ├─→ 点"收藏" → 🔒 提示注册
│ │ ├─→ 点"导出" → 🔒 提示注册
│ │ └─→ 点"AI解读" → 🔒 提示注册
│ │
│ └─→ 自然流失
│
└─→ 点"免费注册"
│
└─→ 注册 → 设置关注领域 → 第二天收到推送 → 留存
```
**关键转化点**：
1. 首页 → 浏览精选：零摩擦，不用注册
2. 想收藏/导出 → 弹注册提示（"30秒注册，永久保存你的文献"）
3. 注册后引导 → 设置关注领域 → 立即展示"按你的偏好，明天早上会推送约 8 篇必读"
4. 第二天邮件/微信推送 → 召回
---
## 一、整体布局框架（已登录 App Layout）
```
┌──────────────────────────────────────────────────────────┐
│ Header (固定顶部) h=48px │
│ [🔬 肿瘤科文献中心] [🔔] [👤 王主任] │
├──────────┬───────────────────────────────────────────────┤
│ Sidebar │ 主内容区 │
│ w=200px │ │
│ 📅 今日 │ ┌──────────────────────────────────────────┐ │
│ 速览 │ │ 🔥 必读 (8篇) │ │
│ │ │ ┌──────────────────────────────────────┐ │ │
│ 🔍 搜索 │ │ │ Osimertinib联合化疗OS结果 │ │ │
│ │ │ │ [NEJM] [NSCLC] [EGFR] [3期] │ │ │
│ 📁 收藏 │ │ └──────────────────────────────────────┘ │ │
│ │ │ ... │ │
│ 👥 团队 │ └──────────────────────────────────────────┘ │
│ │ │
│ ⚙️ 设置 │ │
└──────────┴───────────────────────────────────────────────┘
```
### Naive UI 组件选型
| 区域 | 组件 | 说明 |
|------|------|------|
| 整体布局 | `n-layout` + `n-layout-sider` + `n-layout-content` | 经典左右分栏 |
| 顶栏 | 自定义 Header，`n-breadcrumb` + `n-avatar` + `n-badge` | 固定吸顶 |
| 侧边栏 | `n-menu` (vertical, collapsed on mobile) | `icon` + `label`，支持折叠 |
| 主内容 | `n-card` + `n-space` 组合 | 内容容器 |
### 关键设计决策
**暗色/亮色切换**：Naive UI 内置 `n-config-provider` + `darkTheme`，一行代码切换。
**移动端适配**：MVP 先不做移动端。`n-layout-sider` 在小屏自动隐藏 + 汉堡菜单。
---
## 二、核心页面设计
### 2.1 登录/注册页（简洁型）
```
┌─────────────────────────────────────────────────┐
│ │
│ 🔬 肿瘤科文献中心 │
│ 全球肿瘤学进展，每日自动推送 │
│ │
│ ┌─────────────────────────────┐ │
│ │ 邮箱 [_______________] │ │
│ │ 密码 [_______________] │ │
│ │ 记住我 [✓] │ │
│ │ │ │
│ │ [ 登 录 ] │ │
│ │ 没有账号？马上注册 │ │
│ └─────────────────────────────┘ │
└─────────────────────────────────────────────────┘
```
| 组件 | 用途 |
|------|------|
| `n-card` + `n-form` + `n-form-item` | 登录表单 |
| `n-input` (type=email/password) | 输入框 |
| `n-button` (type=primary, size=large, block) | 登录按钮 |
| `n-checkbox` | "记住我" |
**设计要点**：注册后直接进入领域设置引导页，不跳转多余页面。
---
### 2.2 文献速览 — 核心产品页面 ⭐
```
┌──────────────────────────────────────────────────────────────┐
│ 📅 文献速览 2025年7月4日 🔴8 🟡22 ⚪32 [🔍 搜索] │
├──────────────────────────────────────────────────────────────┤
│ ┌─ 🔥 必读 (8篇) ────────────────────────────────────┐ │
│ │ │ │
│ │ ┌───────────────────────────────────────────────┐ │ │
│ │ │ ⭐ Osimertinib + Chemotherapy Final OS │ │ │
│ │ │ Ramalingam SS, et al. | NEJM | 2025-07-03 │ │ │
│ │ │ [NSCLC] [EGFR] [3期] [OS获益] │ │ │
│ │ │ 奥希替尼联合化疗对比单药一线治疗EGFR突变NSCLC │ │ │
│ │ │ 中位OS延长6.3个月 │ │ │
│ │ │ [⭐收藏] [✕不感兴趣]│ │ │
│ │ └───────────────────────────────────────────────┘ │ │
│ │ ... (共8篇) │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─ 🟡 推荐 (22篇) ──────────────────────────────────┐ │
│ │ (默认折叠) │ │
│ └─────────────────────────────────────────────────────┘ │
│ ┌─ ⚪ 相关 (32篇) ──────────────────────────────────┐ │
│ │ (默认折叠) │ │
│ └─────────────────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────┘
```
| 组件 | 用途 |
|------|------|
| `n-collapse` | 三级折叠：必读(展开) / 推荐(折叠) / 相关(折叠) |
| `n-card` (size=small, hoverable) | 每篇文献卡片 |
| `n-tag` 多色 | 标签：癌种(蓝) / 靶点(绿) / 研究类型(橙) / 期刊(红) |
| `n-skeleton` | 加载骨架屏 |
| `n-empty` | 新用户未设置领域时的引导空白页 |
| `n-pagination` 或 IntersectionObserver | Feed 翻页/无限滚动 |
| `n-back-top` | 回到顶部 |
**设计要点**：
- 每条文献 5 行信息：标题 + 作者/期刊/日期 + 标签行 + AI 一句话 + 操作按钮
- hover 浮起，click 进入详情（`n-drawer` 侧出，不跳页）
- 空状态：新用户 → "去设置关注领域 →" 引导卡片
- 右上角统计徽章 "🔴8 🟡22 ⚪32"
---
### 2.3 文献详情（侧出抽屉更合适）
```
┌──────────────────────────────────────┐
│ ✕ │
│ │
│ Osimertinib with or without │
│ Chemotherapy in EGFR-Mutated │
│ Advanced NSCLC: FLAURA2 OS Results │
│ │
│ Ramalingam SS, et al. │
│ NEJM, 2025 Jul 3;393(1):12-25 │
│ PMID: 39701234 DOI: 10.1056/... │
│ │
│ [NSCLC] [EGFR] [奥希替尼] [3期] │
│ │
│ ┌─ 🔬 AI 一句话总结 ────────────┐ │
│ │ 奥希替尼联合化疗对比单药一线 │ │
│ │ 治疗EGFR突变NSCLC，中位OS延长 │ │
│ │ 6.3个月(HR 0.73)，AE可控 │ │
│ └───────────────────────────────┘ │
│ │
│ ┌ 摘要 │ 我的笔记 │ AI 解读 ┐ │
│ │ │ │
│ │ Background: EGFR-TKI is... │ │
│ │ Methods: ... │ │
│ │ Results: ... │ │
│ │ Conclusion: ... │ │
│ │ │ │
│ └─────────────────────────────┘ │
│ │
│ [📥导出] [⭐收藏] [📤分享] [🔗复制] │
└──────────────────────────────────────┘
```
| 组件 | 用途 |
|------|------|
| `n-drawer` (width=680px) | 原地不跳页的侧出详情 |
| `n-tabs` | 摘要 / 笔记 / AI 解读 |
| `n-tag` (round, clickable) | 标签行，点击跳搜索 |
| `n-alert` (type=info) | AI 一句话总结高亮卡片 |
| `n-button-group` + `n-dropdown` | 导出下拉 |
| `n-popconfirm` | 删除操作确认 |
**选择 `n-drawer` 而不是路由跳转的原因**：用户看文献是扫描式浏览——打开→看两眼→关闭→下一个。抽屉不打断 Feed 流。
---
### 2.4 关注领域设置（转化关键页）
```
┌──────────────────────────────────────────────────────────────┐
│ ⚙️ 设置关注领域 │
│ │
│ 设置你关注的研究方向，每天早上 7:00 自动推送最新文献 │
│ │
│ ┌────────┬─────────────────────────────────────────────────┐ │
│ │ │ │ │
│ │ 癌种 │ ☑ 肺癌 │ │
│ │ │ ☑ 非小细胞肺癌 │ │
│ │ 靶点 │ ☑ 肺腺癌 │ │
│ │ │ ☐ 肺鳞癌 │ │
│ │ 治疗 │ ☐ 小细胞肺癌 │ │
│ │ │ │ │
│ │ 文献类型│ ☐ 乳腺癌 │ │
│ │ │ ☐ 结直肠癌 │ │
│ │ 期刊 │ ☑ 胃癌 │ │
│ │ │ ☐ 肝癌 [展开全部] │ │
│ │ │ │ │
│ └────────┴─────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────┐ │
│ │ 📊 实时预览 │ │
│ │ 按当前设置，近7天可匹配 187 篇文献 │ │
│ │ 日均 27 篇 | 其中必读约 5-8 篇 │ │
│ │ [ 保存设置 ] │ │
│ └─────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────┘
```
| 组件 | 用途 |
|------|------|
| `n-anchor` (左侧粘性导航) | 锚点跳转：癌种/靶点/治疗/文献类型/期刊 |
| `n-tree` (checkable, cascade) | 层级标签多选树 |
| `n-card` + `n-statistic` | 右侧实时预览面板 |
| `n-button` (type=primary) | 保存 |
**设计要点**：
- 这是新用户注册后的第一步（引导流程），也是老用户最常用的设置页
- 左侧树形标签选择，右侧实时预览匹配数 → 用户边选边看到效果
- 必填项用 `n-badge` 标注
- 首次使用显示引导提示（`n-popover`）
---
### 2.5 高级搜索页
```
┌──────────────────────────────────────────────────────────────┐
│ 🔍 [_______________________________] [搜索] │
│ [中文→MeSH自动翻译 ▼] │
├──────────────────────────────────────────────────────────────┤
│ 左侧筛选面板 (w=240px) │ 右侧结果列表 │
│ │ │
│ ┌─ 🎯 癌种 ──────────┐ │ 共 1,247 条结果 │
│ │ ☑ 肺癌 │ │ │
│ │ ☑ NSCLC │ │ ┌──────────────┐ │
│ │ ☐ SCLC │ │ │ 文献卡片... │ │
│ └─────────────────────┘ │ └──────────────┘ │
│ ┌─ 🧬 靶点 ──────────┐ │ ┌──────────────┐ │
│ │ ☑ EGFR │ │ │ 文献卡片... │ │
│ │ ☐ ALK │ │ └──────────────┘ │
│ └─────────────────────┘ │ ... │
│ ┌─ 📅 年份 ──────────┐ │ │
│ │ 2020 ─────●── 2025 │ │ < 1 2 3 ... 25 > │
│ └─────────────────────┘ │ │
│ ┌─ 📰 期刊等级 ──────┐ │ │
│ │ ☑ 🔴 四大 │ │ │
│ │ ☑ 🟠 肿瘤顶刊 │ │ │
│ │ ☐ 🟡 专科 │ │ │
│ └─────────────────────┘ │ │
│ │ │
│ [ 重置筛选 ] │ │
└──────────────────────────────────────────────────────────────┘
```
| 组件 | 用途 |
|------|------|
| `n-input` + `n-auto-complete` | 搜索输入 + 关键词建议 |
| `n-input-number` + `n-slider` (双端) | 年份范围 |
| `n-checkbox-group` | 多选过滤器 |
| `n-tree` (checkable) | 癌种标签过滤树 |
| `n-pagination` | 分页 |
| `n-empty` | 空结果 |
| `n-skeleton` | 搜索加载 |
---
### 2.6 科室团队管理页（企业版）
```
┌──────────────────────────────────────────────────────────────┐
│ 👥 科室团队 [+ 邀请成员] │
├──────────────────────────────────────────────────────────────┤
│ │
│ 科室成员 (12人) │
│ ┌────┬──────────┬──────────┬────────┬──────────────────────┐ │
│ │ │ 姓名 │ 角色 │ 亚专业 │ 本周阅读 │ │
│ ├────┼──────────┼──────────┼────────┼──────────────────────┤ │
│ │ 👨 │ 王志强 │ Owner │ 肺癌 │ ████████ 42篇 │ │
│ │ 👩 │ 李主任 │ Admin │ 乳腺癌 │ ██████ 31篇 │ │
│ │ 👨 │ 张医生 │ Editor │ 肺癌 │ ████ 22篇 │ │
│ │ 👩 │ 刘住院 │ Viewer │ 胃癌 │ ███ 15篇 │ │
│ └────┴──────────┴──────────┴────────┴──────────────────────┘ │
│ │
│ 📁 科室共享文件夹 │
│ ┌──────────────────────────────────────────────────────────┐ │
│ │ 📁 MDT讨论文献 (6篇) 📁 科室晨会文献 (3篇) │ │
│ │ 📁 2025-07 JC 准备 (2篇) [+ 新建文件夹] │ │
│ └──────────────────────────────────────────────────────────┘ │
│ │
│ 📋 成员动态 │
│ 2025-07-04 10:30 张医生 保存了 文献标题... │
│ 2025-07-04 09:15 李主任 分享了 文献标题... 到 MDT讨论文献 │
│ 2025-07-03 16:00 王志强 创建了共享文件夹 JC准备 │
└──────────────────────────────────────────────────────────────┘
```
| 组件 | 用途 |
|------|------|
| `n-data-table` + `n-avatar` | 成员表格 |
| `n-select` (内嵌表格) | 行内角色切换下拉 |
| `n-card` + `n-grid` | 共享文件夹卡片网格 |
| `n-timeline` | 成员活动时间线 |
| `n-modal` | 邀请成员弹窗（填邮箱 + 选角色） |
| `n-popconfirm` | 移除成员确认 |
---
### 2.7 个人收藏页
```
┌──────────────────────────────────────────────────────────────┐
│ 📁 我的收藏 [+ 新建文件夹] [≡ 最近] [★ 星标] │
├──────────┬───────────────────────────────────────────────────┤
│ │ │
│ 📁 全部 │ ┌──────────────────────────────────────────┐ │
│ (42) │ │ 文献卡片 1 │ │
│ │ │ ... │ │
│ 📁 EGFR │ │ │ │
│ 耐药 │ │ 文献卡片 N │ │
│ (8) │ │ │ │
│ │ └──────────────────────────────────────────┘ │
│ 📁 准备 │ │
│ 汇报 │ 3 篇已选中 [移动到文件夹 ▼] [导出 ▼] [删除] │
│ (5) │ │
│ │ │
│ 📁 MDT │ │
│ 讨论 │ │
│ (6) │ │
└──────────┴───────────────────────────────────────────────────┘
```
| 组件 | 用途 |
|------|------|
| `n-tree` (左侧) | 文件夹树，支持拖拽文献进去 |
| `n-checkbox` + `n-card` | 每篇文献可选、批量操作 |
| `n-dropdown` | "移动到文件夹"下拉 |
| `n-modal` | 新建文件夹 |
| `n-batch` 操作栏（fixed bottom） | 选中 N 篇后的批量工具栏 |
---
## 三、关键页面清单与优先级
| 页面 | 路由 | 优先级 | 预计组件数 |
|------|------|:---:|:---:|
| 登录/注册 | `/auth/login`, `/auth/register` | P0 | 1 个页面 |
| 每日速览 | `/feed` | P0 ⭐ | 1 个页面（最复杂） |
| 文献详情 | `/literature/:id` 或 drawer | P0 | Drawer 组件 |
| 领域设置 | `/settings/interests` | P0 | 1 个页面 |
| 高级搜索 | `/search` | P1 | 1 个页面 |
| 个人收藏 | `/library` | P1 | 1 个页面 |
| 期刊浏览 | `/journals` | P1 | 1 个页面 |
| 个人中心 | `/settings/profile` | P1 | 1 个页面 |
| **科室团队** | `/team` | P2 | 1 个页面 |
| Journal Club | `/team/journal-club` | P3 | 1 个页面 |
| MDT 协作 | `/team/mdt` | P3 | 1 个页面 |
| 新药日历 | `/drug-approvals` | P3 | 1 个页面 |
| 指南更新 | `/guidelines` | P3 | 1 个页面 |
| 平台管理后台 | `/admin/*` | P2 | 5-8 个页面 |
---
## 三-A、移动端自适应策略
### 决策：一套响应式代码，不做独立移动端 App
**理由**：移动端 90% 的行为是"扫一眼 Feed → 点开详情 → 收藏/跳过"，不需要原生能力。复杂操作（标签树配置、团队管理、批量导出）用户自然在桌面端完成。和 arxivdaily / deerlit 一样，一套 Web 自适应。
### 两端的布局差异
```
PC 端 (≥768px) 移动端 (<768px)
┌───┬──────────────┐ ┌──────────────────┐
│ │ │ │ 🔬 肿瘤科 汉堡 ≡ │
│侧 │ Feed 列表 │ ├──────────────────┤
│边 │ │ │ │
│栏 │ │ │ 🔥 必读 (8篇) │
│ │ │ │ ┌──────────┐ │
│ │ │ │ │ 文献卡片 │ │
│ │ │ │ │ (全宽) │ │
│ │ │ │ └──────────┘ │
│ │ │ │ ... │
└───┴──────────────┘ ├──────────────────┤
│ 🏠 🔍 📁 👤 │
│ 速览 搜索 收藏 我│
└──────────────────┘
```
### 核心组件响应式行为
| 组件 | PC 端 | 移动端 (<768px) |
|------|-------|----------|
| **整体布局** | Sidebar + Content 双栏 | 顶部 Header + 内容 + **底部 TabBar** |
| **导航** | `n-layout-sider`，可折叠 | Sidebar 隐藏，底部四Tab 切换 |
| **文献卡片** | `n-grid` 双列或单列 | **全宽单列**，信息更紧凑 |
| **文献详情** | `n-drawer` (width=680px) | `n-drawer` 全屏 或 `router.push` 跳页 |
| **标签筛选** | `n-tree` 多选树 | `n-select` 下拉 + 横向滑动 `n-tag` |
| **领域设置** | 左侧标签树 + 右侧预览 | 全宽堆叠，树改为 `n-collapse` 逐级展开 |
| **搜索结果** | 左筛选面板 + 右列表 | 筛选放在顶部 `n-popover`，下方结果 |
| **团队表格** | `n-data-table` 完整表格 | **卡片列表** 替代表格（头像+名称+角色线） |
| **定价页** | 四列 `n-grid` | **单列堆叠**，上下滚动比较 |
| **首页 Hero** | 大标题 + 背景图 | 紧凑标题 + 卡片直接露在第一屏 |
### 实现方式
```typescript
// composables/useIsMobile.ts
import { useBreakpoint } from 'vooks'
export function useIsMobile() {
const breakpoint = useBreakpoint()
return computed(() => breakpoint.value === 'xs') // <768px
}
```
```vue
```
### 移动端特有的 UI 微调
| 微调 | 说明 |
|------|------|
| **点击区域** | 所有可点击元素最小 44×44px（iOS HIG） |
| **卡片间距** | 移动端卡片间 margin 缩小到 8px（PC 端 16px） |
| **标签行** | 移动端超出 2 行时折叠为 "... +3" 展开 |
| **滑动操作** | 卡片支持左滑：收藏 / 不感兴趣（仿邮件 App） |
| **下拉刷新** | Feed 列表顶部下拉刷新当日数据 |
| **无限滚动** | 用 IntersectionObserver 代替 `n-pagination`，更自然的移动端浏览 |
| **搜索框** | 移动端粘在顶部、输入时全宽展开 |
### 不做的
| 方案 | 决定 | 原因 |
|------|:---:|------|
| iOS/Android 原生 App | ❌ | 场景不需要原生能力，Web 足够，成本 10x |
| PWA | ⏸️ P2 | 加 manifest.json + SW 就能装到桌面，但不急 |
| 微信小程序 | ⏸️ P3 | 不能跳 PubMed 外链，不适合文献阅读。但可作为引流渠道 |
| 微信服务号推送 | ✅ P1 | 每日文献推送的微信版。不是移动端应用，是消息渠道 |
| 独立移动端 UI 库 | ❌ | Naive UI 一套即可，不要维护两套组件库 |
---
## 四、Naive UI 主题定制
```typescript
// src/theme.ts
import { GlobalThemeOverrides } from 'naive-ui'
export const themeOverrides: GlobalThemeOverrides = {
common: {
primaryColor: '#1a5276', // 肿瘤科深蓝
primaryColorHover: '#2471a3',
primaryColorPressed: '#154360',
primaryColorSuppl: '#2e86c1',
borderRadius: '6px',
},
Card: {
borderRadius: '8px',
paddingMedium: '16px',
},
Tag: {
borderRadius: '4px',
},
Layout: {
siderColor: '#fafbfc',
},
}
// 暗色模式直接换 Naive UI 内置 darkTheme，不改色值
```
---
## 五、前端项目结构
```
frontend/src/
├── App.vue
├── main.ts
├── theme.ts # Naive UI 主题覆盖
├── router/
│ └── index.ts # Vue Router + 路由守卫
├── stores/ # Pinia
│ ├── auth.ts # 认证状态
│ ├── feed.ts # Feed 列表 + 筛选条件
│ ├── literature.ts # 当前文献 + 搜索
│ └── ui.ts # 侧边栏/主题/多标签
├── api/ # Axios 封装
│ ├── client.ts # Axios 实例 + JWT 刷新拦截器
│ ├── auth.ts
│ ├── literature.ts
│ ├── notes.ts
│ ├── team.ts
│ └── subscriptions.ts
├── views/ # 页面（对应路由）
│ ├── auth/
│ │ └── LoginView.vue
│ ├── feed/
│ │ └── FeedView.vue # ⭐ 核心页面
│ ├── search/
│ │ └── SearchView.vue
│ ├── library/
│ │ └── LibraryView.vue
│ ├── team/
│ │ └── TeamView.vue
│ └── admin/
│ ├── TenantView.vue
│ └── DashboardView.vue
├── components/ # 可复用组件
│ ├── literature/
│ │ ├── LiteratureCard.vue # 文献卡片（Feed/Search/Library 共用）
│ │ ├── LiteratureDetail.vue # 文献详情 Drawer
│ │ ├── TagBadge.vue # 单标签 Badge
│ │ └── LiteratureExport.vue # 导出按钮+下拉
│ ├── feed/
│ │ └── FeedSection.vue # 一个折叠区（必读/推荐/相关）
│ ├── search/
│ │ └── FilterPanel.vue # 左侧筛选面板
│ ├── team/
│ │ ├── MemberTable.vue
│ │ └── SharedFolderCard.vue
│ └── common/
│ ├── AiSummary.vue # AI 总结组件（复用）
│ └── EmptyState.vue # 空状态引导组件
└── composables/ # 组合式函数
├── useFeed.ts # Feed 数据获取+无限滚动
├── useSearch.ts # 搜索+筛选逻辑
└── usePermission.ts # 前端权限检查
```
---
## 六、前端开发阶段
| 阶段 | 内容 | 产出 |
|:---:|------|------|
| P1 (2天) | Vue项目初始化、Naive UI 配置、主题、路由、Auth Store、登录/注册页、布局框架 | 前后端联通，能登录，有侧边栏+顶栏的空壳 |
| P1 (1天) | FeedView 页面 + LiteratureCard + FeedSection + LiteratureDetail Drawer | 核心页可交互 |
| P1 (1天) | 领域设置页（标签树多选）+ 搜索页基础版 + 收藏页 | 三大核心流程跑通 |
| P2 (2天) | 高级搜索+筛选面板 + 引用导出 + 期刊浏览 + 个人中心 | 丰富功能 |
| P2 (2天) | 团队空间（成员表/共享文件夹/邀请/动态） | 企业版前端完成 |
| P3 (2天) | AI 组件 + 新药日历 + JC + MDT | 增强功能 |
| P3 (1天) | 管理后台（租户/用户/订阅/管道看板） | 平台端完成 |