backend/docs/09-UI设计方案.md

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 / 百度学术 可索引

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ScholarlyArticle",
  "headline": "Osimertinib with or without Chemotherapy...",
  "author": [{ "name": "Ramalingam SS" }],
  "datePublished": "2025-07-03",
  "publisher": "New England Journal of Medicine"
}
</script>

---

用户转化漏斗

访问首页
  │
  ├─→ 浏览今日精选 (无需登录)
  │     │
  │     ├─→ 点进文献详情 → 看摘要/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	大标题 + 背景图	紧凑标题 + 卡片直接露在第一屏

实现方式

// composables/useIsMobile.ts
import { useBreakpoint } from 'vooks'

export function useIsMobile() {
  const breakpoint = useBreakpoint()
  return computed(() => breakpoint.value === 'xs')  // <768px
}

<!-- 响应式网格 -->
<n-grid :cols="4" :x-gap="16" :responsive="{
  '0':    { cols: 1 },   // 手机
  '768':  { cols: 2 },   // 平板
  '1200': { cols: 4 }    // PC
}">
  <n-grid-item v-for="item in literature" :key="item.id">
    <LiteratureCard :item="item" />
  </n-grid-item>
</n-grid>

<!-- 侧边栏：移动端隐藏 -->
<n-layout-sider
  v-if="!isMobile"
  collapse-mode="transform"
  :width="200"
  :collapsed-width="64"
  :native-scrollbar="false"
>
  <SideMenu />
</n-layout-sider>

<!-- 底部 TabBar：仅移动端 -->
<MobileTabBar v-if="isMobile" />

移动端特有的 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 主题定制

// 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天)	管理后台（租户/用户/订阅/管道看板）	平台端完成