# BookFlow — Layer 3: 结构层 (Structure) > 文档版本：v3.0 > 日期：2026-04-29 > 设计框架：Jesse James Garrett《用户体验要素》五层模型 > 前置文档：bookflow-L1-strategy.md v3.0、bookflow-L2-scope.md v3.0 > v3.0 变更：子系统A 按服务层级+成果物组织导航；子系统B 增加管理后台和查看对比流程 --- ## 第一部分：子系统A — 内部自动化管线 --- ### 3A.1 信息架构 #### 3A.1.1 导航结构 ``` 子系统A Dashboard │ ├── 🏠 仪表盘 / ← 全局概览 │ ├── 数据发现与处理 │ ├── 🔍 书籍发现 /discovery ← S1 爬虫+数据源 │ ├── ⬇️ 下载管理 /download ← S2 下载+存储 │ ├── 📄 PDF 转换 /pdfhub ← S3 OCR │ └── 🌐 翻译管理 /translator ← S4 翻译+供应商 │ ├── 管道与电商 │ ├── 🔗 管道看板 /pipeline ← S5 全生命周期 │ │ └── 书籍详情 /pipeline/{id} ← 右侧面板 │ └── 🛒 闲鱼电商 /xianyu ← S6 多店铺 │ ├── 基础设施 │ ├── 📦 云存储 /storage ← S7 多提供商 │ └── ⚙️ 系统监控 /system ← 服务注册/健康 │ └── （顶部全局栏：服务健康指示灯） ``` **导航层级原则：** - 一级：侧边栏分组（数据处理 / 管道电商 / 基础设施） - 二级：侧边栏项目（9 个页面） - 三级：详情面板（右侧滑出） - 可扩展维度（数据源/供应商/店铺/存储）在每个页面内以列表形式呈现 --- ### 3A.2 每个服务页面的统一结构 所有主服务页面遵循「统计 → 列表 → 子服务」三段式： ``` ┌─────────────────────────────────────────────────────────────────┐ │ [服务图标] 服务名称 [主操作] │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ ① 成果物统计卡片（该服务的关键数字） │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ 排队中 │ │ 处理中 │ │ 已完成 │ │ 失败 │ │ │ │ 5 │ │ 2 │ │ 156 │ │ 1 │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ ② 主工作区 │ │ · 任务列表/看板/文件浏览器 │ │ · 每行显示：任务名 + 成果物状态 + 进度 + 操作 │ │ │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ ③ 可扩展维度管理（列表形式） │ │ · 当前已接入的实例（数据源/供应商/店铺/存储） │ │ · 每个实例：名称 + 状态灯 + 指标 + [编辑][暂停][日志] │ │ · 底部：[＋ 添加新实例] │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` **示例——翻译管理页面布局：** ``` ┌─────────────────────────────────────────────────────────────────┐ │ 🌐 翻译服务 [＋ 新任务] │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ 成果物统计：排队 2 · 翻译中 1 · 已完成 34 · 失败 0 │ │ Token 消耗：今日 42K · 本月 1,245K │ │ │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ 翻译队列 │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ design-patterns.md EN→ZH 第12/38章 ████░░ 31% Key#3 │ │ │ │ clean-code.md EN→ZH 排队 #1 ░░░░░░ 0% 等待 │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ │ 翻译历史 │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ pragmatic-programmer.md EN→ZH 128K tokens 15m ✅ │ │ │ │ refactoring.md EN→ZH 95K tokens 11m ✅ │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ 📋 翻译供应商管理 [＋ 添加] │ │ ┌──────────────────────────────────────────────────────────┐ │ │ │ ✅ OpenAI 1 账号 · 可用 (80%) [编辑] [密钥管理] │ │ │ │ ✅ DeepSeek 1 账号 · 可用 (45%) [编辑] [密钥管理] │ │ │ │ ✅ Ollama (本地) 1 账号 · 在线 [编辑] [配置] │ │ │ │ 📋 Anthropic 0 账号 · 未接入 [配置] [启用] │ │ │ └──────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` --- ### 3A.3 用户流程 #### 流程 A1：每日巡检 ``` 打开仪表盘 │ ▼ 7 个主服务卡片 + 异常告警条 │ ├── 服务离线？──→ 点击卡片 ──→ 进入该服务页面 ──→ 查看详情/重启 │ ├── 成果物堆积？──→ 看到某阶段数量异常大 ──→ 点击进入看板 ──→ 找到瓶颈 │ └── 有失败？──→ 红色告警 ──→ 点击 ──→ 失败列表 ──→ 重试/跳过 ``` #### 流程 A2：管理翻译供应商池 ``` 打开「翻译管理」页面 │ ▼ 滚动到「供应商管理」区域 │ ├── 查看 OpenAI Key 状态：额度 80%，正常 ├── 查看 DeepSeek Key 状态：额度 5%，橙色告警 │ └── 点击「密钥管理」──→ 展开 DeepSeek 的多个 Key 列表 │ ├── Key #1: 可用 (20%) │ ├── Key #2: 已耗尽 [已禁用] │ └── [＋ 添加 Key] │ └── 想新增供应商 ──→ 点击「＋ 添加供应商」 └── 弹出配置表单（名称、API 地址、认证方式、初始 Key） ``` #### 流程 A3：管理多数据源 ``` 打开「书籍发现」页面 │ ▼ 滚动到「数据源管理」区域 │ ├── Anna's Archive: ✅ 在线 · 今日发现 12 本 ├── Library Genesis: 📋 未接入 │ └── 点击「配置」──→ 填写接入参数 ──→ 启用 │ └── [＋ 添加新数据源] ──→ 选择类型或自定义 ``` #### 流程 A4：追踪单本书的成果物 ``` 管道看板 → 点击某本书的卡片 │ ▼ 右侧面板展示完整时间线（每个阶段的成果物状态）： │ ● 发现 ────────── 成果物: 元数据记录 ✅ 已入库 ● 下载 ────────── 成果物: 下载文件 ✅ 已下载到本地 ● 上传云端 ────── 成果物: R2 文件 ✅ 已上传 ● 格式分析 ────── 成果物: 分析结果 ✅ 图片型 PDF ● OCR ─────────── 成果物: Markdown ◐ 处理中 (73%) ○ 翻译 ────────── 成果物: 翻译文件 ○ 待处理 ○ 就绪 ○ 上架 ``` --- ### 3A.4 书籍详情面板中的成果物展示 每本书在详情面板中，除了时间线，还要展示**每个阶段的成果物明细**： ``` ┌─────────────────────────────────┐ │ 《Design Patterns》 │ │ E. Gamma et al. │ ├──────────────────────────────────┤ │ 成果物追踪 │ │ │ │ 📦 元数据 │ │ 来源: Anna's Archive │ │ 状态: ✅ 已入库 │ │ 文件: design-patterns.pdf │ │ 大小: 12.8 MB │ │ │ │ 📦 本地文件 │ │ 路径: /data/downloads/... │ │ 状态: ✅ 已保存 │ │ │ │ 📦 云端文件 │ │ R2: ✅ 已上传 │ │ IPFS: ✅ Pin Qm... │ │ │ │ 📦 OCR 结果 │ │ 输出: design-patterns.md │ │ 状态: ✅ 完成 · 412 页 │ │ 质量: ✅ 合格 (乱码率 0.2%) │ │ │ │ 📦 翻译结果 │ │ 输出: design-patterns-zh.md │ │ 状态: ◐ 翻译中 (31%) │ │ 章节进度: 12/38 │ │ Token: 42K 已用 │ │ 引擎: DeepSeek · Key #3 │ │ │ ├──────────────────────────────────┤ │ [查看原文] [查看OCR] [查看翻译] │ │ [重试] [跳过] [移除] │ └─────────────────────────────────┘ ``` --- ## 第二部分：子系统B — 外部用户服务 --- ### 3B.1 信息架构 #### 3B.1.1 用户侧导航 ``` 子系统B 用户界面 │ ├── 🏠 首页（搜索入口） / │ ├── 🔍 搜索结果 /search?q={query} │ ├── 📖 在线查看 │ ├── 原文查看 /view/{id}/original │ ├── 译文查看 /view/{id}/translated │ └── 对照查看 /view/{id}/compare │ ├── 📂 我的文件 /files ← 文件库管理 │ ├── 📊 我的任务 /tasks ← 翻译/下载任务列表 │ └── 👤 个人中心 ├── 账号信息 /account ├── 用量统计 /account/usage └── 升级套餐 /account/upgrade ``` **导航特征：** - 顶部导航栏（不是侧边栏），4-6 个入口 - 核心路径：首页 → 搜索 → 结果 → 查看/下载（不超过 3 步） - 「我的文件」和「我的任务」是用户的文件管理闭环 #### 3B.1.2 管理员侧导航 ``` 子系统B 管理后台（/admin） │ ├── 📊 运营概览 /admin ← 今日关键指标 │ ├── 👥 用户管理 /admin/users │ ├── 用户列表 /admin/users │ └── 用户详情 /admin/users/{id} │ ├── 📋 业务数据 │ ├── 搜索分析 /admin/analytics/search │ ├── 翻译分析 /admin/analytics/translate │ └── 下载分析 /admin/analytics/download │ ├── ⚠️ 异常追踪 /admin/errors │ ├── 失败任务 /admin/errors/tasks │ └── 无结果搜索 /admin/errors/search │ ├── 📝 内容管理 (SEO) │ ├── 文章列表 /admin/content/articles │ ├── 文章编辑 /admin/content/articles/{id}/edit │ ├── 关键词管理 /admin/content/keywords │ ├── 榜单解读 /admin/content/charts │ └── SEO 分析 /admin/content/seo │ └── ⚙️ 系统状态 /admin/system ``` --- ### 3B.2 用户流程 #### 流程 B1：搜索 → 下载 → 查看 ``` 首页搜索框 │ ▼ 搜索结果列表 │ ├── 已有原文 ──→ [下载原文] ──→ 下载到本地 │ [在线查看] ──→ 浏览器内 PDF 查看器 │ └── 未处理 ──→ [请求下载] ──→ 进度条 ──→ 完成后下载/查看 ``` #### 流程 B2：搜索 → 翻译 → 对照查看 ``` 首页搜索框 │ ▼ 搜索结果列表 │ ├── 已有翻译 ──→ [下载译文] ──→ 下载 │ [在线查看] ──→ 译文页面 │ [对照查看] ──→ 左右对照页面 │ └── 未翻译 ──→ [翻译为中文] ──→ 整体进度条 ──→ 完成 │ │ │ "正在翻译中... 42%" │ │ ▼ │ [下载译文] │ [在线查看] │ [对照查看] ← 核心功能 │ │ ┌─────────────────────────────┐ │ │ ← 原文 (PDF) │ 译文 (MD) →│ │ │ │ │ │ │ Chapter 1: │ 第一章： │ │ │ Design patterns│ 设计模式 │ │ │ are typical... │ 是软件... │ │ │ │ │ │ │ (同步滚动) │ │ │ └─────────────────────────────┘ ``` #### 流程 B3：文件管理闭环 ``` 打开「我的文件」 │ ▼ 文件列表（已下载 + 已翻译） │ ├── 每个文件显示：名称、类型、大小、保留到期日、操作按钮 │ ├── 操作： │ ├── 📥 下载 ──→ 下载到本地 │ ├── 👁 查看 ──→ 在线查看 │ ├── 🔄 对照 ──→ 左右对照 │ ├── 🔗 分享 ──→ 复制分享链接 │ └── 🗑 删除 ──→ 确认后删除 │ ├── 筛选：类型（原文/译文）、语言、日期 │ └── 存储空间指示：已用 120MB / 100MB Free ──→ 提示升级 ``` #### 流程 B4：管理员查看异常 ``` 打开管理后台 → 异常追踪 │ ├── 失败任务列表 │ ├── 翻译失败 5 个 ──→ 展开看原因（Key 耗尽？文件损坏？） │ ├── 下载失败 2 个 ──→ 展开看原因（源不可用？超时？） │ └── 搜索无结果 15 个 ──→ 这些关键词用户搜了但没找到 │ └── 可加入「待发现」队列，后续爬虫重点关注 │ └── 按用户筛选 ──→ 某用户的全部失败记录 ``` #### 流程 B5：管理员发布 SEO 文章 ``` 打开内容管理 → 文章列表 │ ├── 已发布文章（标题、关键词、收录状态、流量） ├── 草稿文章 │ └── 新建文章 ├── 标题 + 正文编辑器 ├── 分类 + 标签 ├── 目标关键词标注 ├── 内部链接（链接到其他文章） ├── 外部链接（引用的外部资源） ├── SEO 预览（meta title/description） └── 发布/保存草稿 ``` --- ### 3B.3 页面结构规范 #### 对照查看页面（核心新页面） ``` ┌─────────────────────────────────────────────────────────────────┐ │ ← 返回 《Design Patterns》— 中英对照 [📥 下载] │ ├─────────────────────────────────────────────────────────────────┤ │ [原文] [译文] [对照] ← 查看模式切换 │ ├────────────────────────────┬────────────────────────────────────┤ │ │ │ │ English (Original) │ 中文 (翻译) │ │ │ │ │ Chapter 1: Introduction │ 第一章：引言 │ │ │ │ │ Design patterns are │ 设计模式是软件设计中 │ │ typical solutions to │ 常见问题的典型解决方案。 │ │ commonly occurring │ 它们就像预先制作好的 │ │ problems in software │ 蓝图，你可以对其进行 │ │ design. │ 定制，以解决代码中 │ │ │ 反复出现的设计问题。 │ │ They are like pre-made │ │ │ blueprints that you can │ ──── 同步滚动 ──── │ │ customize to solve a │ │ │ recurring design problem │ │ │ in your code. │ │ │ │ │ ├────────────────────────────┴────────────────────────────────────┤ │ 第 1 章 / 共 41 章 ◀ 上一章 下一章 ▶ │ └─────────────────────────────────────────────────────────────────┘ ``` #### 管理员仪表盘 ``` ┌─────────────────────────────────────────────────────────────────┐ │ 📊 运营概览 │ ├─────────────────────────────────────────────────────────────────┤ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ 今日注册 │ │ 搜索次数 │ │ 翻译次数 │ │ 下载次数 │ │ │ │ 12 │ │ 458 │ │ 34 │ │ 89 │ │ │ │ ↑ 20% │ │ ↑ 5% │ │ ↓ 2% │ │ ↑ 12% │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ ⚠️ 异常：翻译失败 5 · 下载失败 2 · 无结果搜索 15 │ │ │ │ 📊 用户层级分布 │ │ Free: 1,245 ┃ Pro: 89 ┃ Max: 12 ┃ API: 3 │ │ │ │ 🔥 热门搜索（无结果） │ │ "机器学习实战" (8次) · "算法导论中文版" (5次) · ... │ │ │ │ 📝 最新文章 │ │ "2026年5月编程书籍排行榜" · 草稿 · 待发布 │ │ │ └─────────────────────────────────────────────────────────────────┘ ``` --- ## 第三部分：两套子系统的界面隔离 ### 3C.1 域名与路由隔离 | 子系统 | 域名 | 用户 | |--------|------|------| | 子系统A Dashboard | `dash.pdftranslate.app` | 内部团队 | | 子系统B 用户首页 | `www.pdftranslate.app` | 外部用户 | | 子系统B API | `api.pdftranslate.app` | API 用户 | | 子系统B 管理后台 | `admin.pdftranslate.app` | 管理员 | ### 3C.2 共享策略 | 共享内容 | 说明 | |----------|------| | CSS 设计令牌 | 颜色、字体、间距、圆角 | | 基础组件 | 按钮、输入框、进度条、Badge | | 后端 API | 同一套 API，不同路由和权限范围 | | 不共享布局 | 子系统A 侧边栏布局；子系统B 顶部导航 | --- *L3 结构层 v3.0 完成。核心变更：① 子系统A 每个服务页面统一为「统计→列表→可扩展维度」三段式；② 书籍详情面板增加成果物追踪展示；③ 子系统B 增加对照查看页面和文件管理导航；④ 子系统B 增加完整管理后台导航（用户管理/异常追踪/SEO 内容管理）；⑤ 管理员仪表盘展示业务运营数据。*