# BookFlow — Layer 4: 框架层 (Skeleton) > 文档版本：v1.0 > 日期：2026-04-29 > 设计框架：Jesse James Garrett《用户体验要素》五层模型 > 前置文档：bookflow-L1-strategy.md v3.0、bookflow-L2-scope.md v3.0、bookflow-L3-structure.md v3.0 --- ## 设计系统：栅格与布局 ### 子系统A 栅格 ``` 整体布局：侧边栏 + 主内容区 ┌──────┬──────────────────────────────────────────────┐ │ │ 顶部栏 (h:56px) │ │ ├──────────────────────────────────────────────┤ │ 侧 │ │ │ 边 │ 主内容区 │ │ 栏 │ max-width: 1440px │ │ w: │ padding: 24px │ │ 240px│ │ │ │ 内部栅格：12列, gap:16px │ │ │ │ │ │ │ │ │ │ └──────┴──────────────────────────────────────────────┘ 统计卡片：占 3 列（4 个一行） 主列表/看板：占 12 列（全宽） 可扩展维度区：占 12 列（全宽），内部分 6+6 两列 ``` ### 子系统B 栅格 ``` 整体布局：顶部导航 + 全宽内容 ┌──────────────────────────────────────────────────────┐ │ 顶部导航栏 (h:64px) │ ├──────────────────────────────────────────────────────┤ │ │ │ 内容区 │ │ max-width: 1200px, 居中 │ │ padding: 32px │ │ │ │ 内部栅格：12列, gap:24px │ │ │ │ │ │ │ │ │ └──────────────────────────────────────────────────────┘ 搜索结果：每行 3 个卡片（各占 4 列） 对照查看：左右各占 6 列 文件列表：占 12 列 ``` --- ## 4A.1 子系统A — 页面线框图 ### 页面A0：仪表盘（全局概览） ``` ┌──────┬──────────────────────────────────────────────────────┐ │ LOGO│ BookFlow Dashboard 🔔 告警 2 gerry ▾│ │ ├──────────────────────────────────────────────────────┤ │ │ │ │ 🏠 │ ┌─ 异常告警条（仅有异常时显示）───────────────────┐ │ │ 仪表 │ │ ⚠️ 翻译服务 2 个失败任务 · DeepSeek Key 额度低 │ │ │ │ └─────────────────────────────────────────────────┘ │ │ ──── │ │ │ 数据 │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │ 处理 │ │ S1 发现 │ │ S2 下载 │ │ S3 OCR │ │ S4 翻译 │ │ │ │ │ ● 在线 │ │ ● 在线 │ │ ● 在线 │ │ ● 在线 │ │ │ 🔍 │ │ 今日 +12 │ │ 队列 3 │ │ 队列 1 │ │ 队列 2 │ │ │ 发现 │ │ 总计 1.3K│ │ 完成 856 │ │ 完成 624 │ │ 完成 341 │ │ │ │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ │ ⬇️ │ │ │ 下载 │ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │ │ │ S5 管道 │ │ S6 闲鱼 │ │ S7 存储 │ │ │ 📄 │ │ 处理中 8 │ │ 店铺 1 │ │ R2: 62GB │ │ │ OCR │ │ 今日完成 │ │ 在售 45 │ │ IPFS:380 │ │ │ │ │ 15 │ │ Cookie ✅│ │ 可用 85% │ │ │ ┌─ │ └─────────┘ └─────────┘ └─────────┘ │ │ └ 翻 │ │ │ 译 │ ┌─ 管道快照（最近 24h）────────────────────────────┐ │ │ │ │ 发现 12 → 下载 8 → OCR 3 → 翻译 2 → 就绪 5 │ │ │ 管道 │ │ ▓▓▓▓▓▓▓▓▓░░ ↑ 失败 1 (翻译 Key 耗尽) │ │ │ 电商 │ └──────────────────────────────────────────────────┘ │ │ │ │ │ 🔗 │ ┌─ 最近活动 ──────────────────────┬─ 资源使用 ─────┐ │ │ 管道 │ │ 10:32 下载完成 design-patterns │ Token 今日 │ │ │ │ │ 10:15 OCR 完成 clean-code 412页 │ 42K / 预算 1M │ │ 🛒 │ │ 09:58 翻译失败 refactoring │ 存储 R2 │ │ │ 闲鱼 │ │ 09:30 发现 5 本新书 │ 62.3GB / 100GB │ │ │ │ │ ... │ CPU 34% │ │ │ 基础 │ └─────────────────────────────────┴────────────────┘ │ │ │ │ │ 📦 │ │ │ 存储 │ │ │ │ │ │ ⚙️ │ │ │ 系统 │ │ └──────┴──────────────────────────────────────────────────────┘ ``` **布局参数：** - 顶部栏：h=56px, 固定定位 - 侧边栏：w=240px, 固定定位, 可折叠至 64px（仅图标） - 服务卡片：4 列网格, 每个卡片 min-h=160px - 管道快照：全宽, h=120px - 底部两栏：左 8 列（活动流）+ 右 4 列（资源用量） --- ### 页面A1：书籍发现 ``` ┌──────┬──────────────────────────────────────────────────────┐ │ │ 🔍 书籍发现 │ │ ├──────────────────────────────────────────────────────┤ │ │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ 今日发现 │ │ 待匹配 │ │ 已入库 │ │ 匹配失败 │ │ │ │ 12 │ │ 5 │ │ 1,302 │ │ 8 │ │ │ │ ↑ 较昨日+3│ │ │ │ │ │ │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ │ ┌─ 发现记录 ──────────────────────────────────────┐ │ │ │ │ 🔍 [搜索书名/ISBN/作者] [按来源筛选▾] │ │ │ │ ├──────────────────────────────────────────────────┤ │ │ │ │ 📘 Design Patterns Anna's ✅已匹配 │ │ │ │ │ E. Gamma · 1994 12.8MB → 已入队 │ │ │ │ ├──────────────────────────────────────────────────┤ │ │ │ │ 📘 Clean Code Anna's ✅已匹配 │ │ │ │ │ R.C. Martin · 2008 8.2MB → 已入队 │ │ │ │ ├──────────────────────────────────────────────────┤ │ │ │ │ 📗 ML Handbook Anna's ❌未找到 │ │ │ │ │ 未找到可用数据源 [重试] │ │ │ │ └──────────────────────────────────────────────────┘ │ │ │ │ │ │ ┌─ 数据源管理 ─────────────────────── [＋ 添加] ──┐ │ │ │ │ ┌──────────────────────────────────────────────┐│ │ │ │ │ │ ✅ Anna's Archive 在线 · 今日发现 12 ││ │ │ │ │ │ 最后爬取: 10min前 · 下次: 6h后 · [编辑][日志]│ │ │ │ │ └──────────────────────────────────────────────┘│ │ │ │ │ ┌──────────────────────────────────────────────┐│ │ │ │ │ │ 📋 Library Genesis 未接入 ││ │ │ │ │ │ 学术书籍为主 · [配置] [启用] ││ │ │ │ │ └──────────────────────────────────────────────┘│ │ │ │ └─────────────────────────────────────────────────┘ │ │ │ │ │ │ ┌─ Amazon 爬虫状态 ────────────────────────────────┐ │ │ │ │ 状态: ● 运行中 · 已爬 5/26 分类 · 今日 +42 条 │ │ │ │ │ 最后运行: 2h前 · 下次: 4h后 · [立即运行][日志] │ │ │ │ └─────────────────────────────────────────────────┘ │ └──────┴──────────────────────────────────────────────────────┘ ``` --- ### 页面A2：下载管理 ``` ┌──────┬──────────────────────────────────────────────────────┐ │ │ ⬇️ 下载管理 │ │ ├──────────────────────────────────────────────────────┤ │ │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ 排队中 │ │ 下载中 │ │ 已完成 │ │ 失败 │ │ │ │ 3 │ │ 1 │ │ 856 │ │ 2 │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ │ ┌─ 下载队列 ──────────────────────────────────────┐ │ │ │ │ 文件名 来源 进度 操作 │ │ │ │ │ design-patterns Anna's ████░ 78% [暂停] │ │ │ │ │ clean-code Anna's 排队 #2 [↑优先] │ │ │ │ │ refactoring Anna's 排队 #3 [↑优先] │ │ │ │ └──────────────────────────────────────────────────┘ │ │ │ │ │ │ ┌─ 下载历史 ──────────────────────────────────────┐ │ │ │ │ pragmatic-prog Anna's 12.8MB R2✅ 10:32 │ │ │ │ │ effective-java Anna's 9.4MB R2✅ 09:15 │ │ │ │ │ ... │ │ │ │ └──────────────────────────────────────────────────┘ │ │ │ │ │ │ ┌─ 存储目标管理 ───────────────────── [＋ 添加] ──┐ │ │ │ │ ┌──────────────────────────────────────────────┐ │ │ │ │ │ │ ✅ 本地磁盘 /data/downloads · 120GB 可用 │ │ │ │ │ │ │ ✅ Cloudflare R2 bucket:books · 62.3GB 已用 │ │ │ │ │ │ │ ✅ IPFS Pinata 380 pins · 45GB 已用 │ │ │ │ │ │ └──────────────────────────────────────────────┘ │ │ │ │ └─────────────────────────────────────────────────┘ │ └──────┴──────────────────────────────────────────────────────┘ ``` --- ### 页面A4：翻译管理 ``` ┌──────┬──────────────────────────────────────────────────────┐ │ │ 🌐 翻译管理 [＋ 新任务] │ │ ├──────────────────────────────────────────────────────┤ │ │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ 排队中 │ │ 翻译中 │ │ 已完成 │ │ 失败 │ │ │ │ 2 │ │ 1 │ │ 341 │ │ 0 │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ │ Token: 今日 42K · 本周 312K · 本月 1,245K │ │ │ │ │ │ ┌─ 翻译队列 ──────────────────────────────────────┐ │ │ │ │ 文件名 方向 章节 进度 引擎 │ │ │ │ │ design-patterns EN→ZH 12/38 ████░ DSK#3 │ │ │ │ │ clean-code EN→ZH 排队#1 ░░░░░ 等待 │ │ │ │ └──────────────────────────────────────────────────┘ │ │ │ │ │ │ ┌─ 翻译历史 ──────────────────────────────────────┐ │ │ │ │ pragmatic-prog EN→ZH 128K tok 15m ✅ │ │ │ │ │ refactoring EN→ZH 95K tok 11m ✅ │ │ │ │ │ dsa-handbook EN→ZH 200K tok 22m ✅ │ │ │ │ └──────────────────────────────────────────────────┘ │ │ │ │ │ │ ┌─ 供应商管理 ─────────────────────── [＋ 添加] ──┐ │ │ │ │ ┌──────────────────────────────────────────────┐│ │ │ │ │ │ ✅ OpenAI 1 账号 · 额度 80% [编辑][密钥]│ │ │ │ │ │ ✅ DeepSeek 1 账号 · 额度 45% [编辑][密钥]│ │ │ │ │ │ ✅ Ollama 本地 1 账号 · 在线 [编辑][配置] │ │ │ │ │ │ 📋 Anthropic 0 账号 · 未接入 [配置][启用] │ │ │ │ │ └──────────────────────────────────────────────┘│ │ │ │ └─────────────────────────────────────────────────┘ │ │ │ │ │ │ ┌─ 密钥池详情（展开 DeepSeek 后）──────────────────┐ │ │ │ │ Key #1 sk-xxx...f3e2 可用 20% ✅ │ │ │ │ │ Key #2 sk-xxx...a1b0 已耗尽 ❌ 已禁用 │ │ │ │ │ [＋ 添加 Key] │ │ │ │ └─────────────────────────────────────────────────┘ │ └──────┴──────────────────────────────────────────────────────┘ ``` --- ### 页面A5：管道看板 ``` ┌──────┬──────────────────────────────────────────────────────┐ │ │ 🔗 管道看板 [批量入队] [筛选▾] │ │ ├──────────────────────────────────────────────────────┤ │ │ │ │ │ ┌─ 六阶段看板（横向滚动）─────────────────────────┐ │ │ │ │ │ │ │ │ │ 发现(12) 下载(8) OCR(3) 翻译(2) 就绪(5) 上架(2)│ │ │ │ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │ │ │ │ │ │DP-01 │ │DP-02 │ │CC-01 │ │PP-01 │ ... │ │ │ │ │ │Anna's│ │78% │ │73% │ │31% │ │ │ │ │ │ │✅已匹配│ │ │ │ │ │ │ │ │ │ │ │ └──────┘ └──────┘ └──────┘ └──────┘ │ │ │ │ │ ┌──────┐ ┌──────┐ │ │ │ │ │ │RC-01 │ │EJ-01 │ ... │ │ │ │ │ │❌未找│ │排队 │ │ │ │ │ │ └──────┘ └──────┘ │ │ │ │ │ │ │ │ │ └──────────────────────────────────────────────────┘ │ │ │ │ │ │ （点击卡片 → 右侧滑出详情面板） │ │ │ │ └──────┴──────────────────────────────────────────────────────┘ ┌── 详情面板 (w:480px) ──┐ │ ← 返回 Design Patterns│ │ E. Gamma et al. 1994 │ ├────────────────────────┤ │ 成果物追踪 │ │ │ │ ● 发现 ─── 元数据 ✅ │ │ ● 下载 ─── 文件 ✅ │ │ ● 上传 ─── R2 ✅ │ │ ● 格式 ─── 图片型 ✅ │ │ ◐ OCR ─── 73% 处理中 │ │ ○ 翻译 ─── 待处理 │ │ ○ 就绪 │ │ ○ 上架 │ ├────────────────────────┤ │ [重试] [跳过] [移除] │ └────────────────────────┘ ``` --- ### 页面A6：闲鱼电商 ``` ┌──────┬──────────────────────────────────────────────────────┐ │ │ 🛒 闲鱼电商 │ │ ├──────────────────────────────────────────────────────┤ │ │ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ 在售商品 │ │ 今日订单 │ │ AI 客服 │ │ CS 状态 │ │ │ │ 45 │ │ 3 │ │ 对话 2 │ │ ● 正常 │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ │ ┌─ 店铺管理 ─────────────────────── [＋ 添加店铺] ─┐ │ │ │ │ ┌──────────────────────────────────────────────┐ │ │ │ │ │ │ ✅ 闲鱼店铺 #1 在售 45 · 今日 +3 订单 │ │ │ │ │ │ │ Cookie: ✅ 有效 (剩 12天) · [管理][编辑] │ │ │ │ │ │ │ │ │ │ │ │ │ │ 商品列表： │ │ │ │ │ │ │ 📘 Design Patterns ¥29.9 在售 [下架] │ │ │ │ │ │ │ 📘 Clean Code ¥24.9 在售 [下架] │ │ │ │ │ │ │ 📗 Effective Java ¥34.9 在售 [下架] │ │ │ │ │ │ │ ... (分页) │ │ │ │ │ │ │ │ │ │ │ │ │ │ 最近订单： │ │ │ │ │ │ │ 10:32 Design Patterns ¥29.9 已发货 ✅ │ │ │ │ │ │ │ 09:15 Clean Code ¥24.9 已发货 ✅ │ │ │ │ │ │ └──────────────────────────────────────────────┘ │ │ │ │ │ ┌──────────────────────────────────────────────┐ │ │ │ │ │ │ 📋 闲鱼店铺 #2 未接入 │ │ │ │ │ │ │ [配置] [启用] │ │ │ │ │ │ └──────────────────────────────────────────────┘ │ │ │ │ └─────────────────────────────────────────────────┘ │ │ │ │ │ │ ┌─ AI 客服状态 ───────────────────────────────────┐ │ │ │ │ 当前对话: 2 个 · 今日回复: 34 条 · 满意率: 92% │ │ │ │ │ [查看对话] [配置回复策略] │ │ │ │ └─────────────────────────────────────────────────┘ │ └──────┴──────────────────────────────────────────────────────┘ ``` --- ### 页面A8：系统监控 ``` ┌──────┬──────────────────────────────────────────────────────┐ │ │ ⚙️ 系统监控 │ │ ├──────────────────────────────────────────────────────┤ │ │ │ │ │ ┌─ 服务注册表 ────────────────────────────────────┐ │ │ │ │ 服务名 端口 状态 运行时间 操作 │ │ │ │ │ bookflow-gateway 11110 ✅ UP 15d 8h [日志] │ │ │ │ │ status-monitor 11119 ✅ UP 15d 8h [日志] │ │ │ │ │ Prefect Server 4200 ✅ UP 15d 8h [日志] │ │ │ │ │ xianyu-bot 9000 ✅ UP 3d 2h [日志] │ │ │ │ │ cloudflared — ✅ UP 2d 15h [日志] │ │ │ │ └──────────────────────────────────────────────────┘ │ │ │ │ │ │ ┌─ 资源使用 ──────────────────────────────────────┐ │ │ │ │ CPU: 34% ████████░░░░░░░░░░░░ │ │ │ │ │ RAM: 12.4/32GB ████████░░░░░░ │ │ │ │ │ Disk: 180/500GB ████████░░░░ │ │ │ │ │ Docker: 17 容器 / 13 运行中 │ │ │ │ └──────────────────────────────────────────────────┘ │ │ │ │ │ │ ┌─ Cloudflare Tunnel ─────────────────────────────┐ │ │ │ │ Tunnel: bookflow (0a8ddfc7...) │ │ │ │ │ 状态: ✅ 4 QUIC 连接 (lax01/lax08/lax10) │ │ │ │ │ 子域名路由: 13 条规则 · 全部 200 OK │ │ │ │ └──────────────────────────────────────────────────┘ │ └──────┴──────────────────────────────────────────────────────┘ ``` --- ## 4B.1 子系统B 用户侧 — 页面线框图 ### 页面B0：首页（搜索入口） ``` ┌──────────────────────────────────────────────────────────────┐ │ 📖 BookFlow [首页] [我的文件] [我的任务] [登录] │ ├──────────────────────────────────────────────────────────────┤ │ │ │ │ │ │ │ PDF Translate │ │ 翻译、下载、对比 — 一站搞定 │ │ │ │ ┌──────────────────────────────────┐ │ │ │ 🔍 搜索书名、作者或 ISBN... │ [搜索] │ │ └──────────────────────────────────┘ │ │ │ │ 热门：Design Patterns · Clean Code · Refactoring │ │ │ │ │ │ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │ │ │ 📥 下载原文 │ │ 🌐 AI 翻译 │ │ 📖 在线对照 │ │ │ │ │ │ │ │ │ │ │ │ PDF/EPUB │ │ DeepSeek │ │ 左原文右译文 │ │ │ │ 直接下载 │ │ 智能翻译 │ │ 同步滚动 │ │ │ └──────────────┘ └──────────────┘ └──────────────┘ │ │ │ │ Free: 每月 200 页免费翻译 │ │ [查看定价方案] │ │ │ └──────────────────────────────────────────────────────────────┘ ``` --- ### 页面B1：搜索结果 ``` ┌──────────────────────────────────────────────────────────────┐ │ 📖 BookFlow [首页] [我的文件] [我的任务] [gerry ▾] │ ├──────────────────────────────────────────────────────────────┤ │ │ │ ┌──────────────────────────────────┐ │ │ │ 🔍 design patterns │ [搜索] │ │ └──────────────────────────────────┘ │ │ 找到 8 个结果 · 搜索用时 0.12s │ │ │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ 📘 Design Patterns: Elements of Reusable... │ │ │ │ E. Gamma, R. Helm, R. Johnson, J. Vlissides · 1994 │ │ │ │ │ │ │ │ ✅ 可下载 🌐 可翻译 PDF · 12.8 MB │ │ │ │ [📥 下载原文] [🌐 翻译为中文] [👁 查看] │ │ │ ├────────────────────────────────────────────────────────┤ │ │ │ 📘 Head First Design Patterns │ │ │ │ E. Freeman, B. Robson · 2004 │ │ │ │ │ │ │ │ ✅ 可下载 🌐 可翻译 PDF · 18.2 MB │ │ │ │ [📥 下载原文] [🌐 翻译为中文] [👁 查看] │ │ │ ├────────────────────────────────────────────────────────┤ │ │ │ ... │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ │ [← 上一页] 第 1/1 页 [下一页 →] │ │ │ └──────────────────────────────────────────────────────────────┘ ``` --- ### 页面B2：翻译进度 ``` ┌──────────────────────────────────────────────────────────────┐ │ 📖 BookFlow [首页] [我的文件] [我的任务] [gerry ▾] │ ├──────────────────────────────────────────────────────────────┤ │ │ │ ← 返回搜索结果 │ │ │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ Design Patterns: Elements of Reusable... │ │ │ │ E. Gamma et al. · 1994 │ │ │ │ │ │ │ │ 🌐 正在翻译为中文... │ │ │ │ │ │ │ │ ████████████████░░░░░░░░░░ 67% │ │ │ │ 章节 26/38 · 预计剩余 5 分钟 │ │ │ │ 引擎: DeepSeek · Token: 86K 已用 │ │ │ │ │ │ │ │ 完成后自动跳转至对照查看 │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ │ 您也可以在「我的任务」中查看进度 │ │ │ └──────────────────────────────────────────────────────────────┘ ``` --- ### 页面B3：对照查看（核心页面） ``` ┌──────────────────────────────────────────────────────────────┐ │ 📖 BookFlow [首页] [我的文件] [我的任务] [gerry ▾] │ ├──────────────────────────────────────────────────────────────┤ │ ← 返回 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. │ │ │ │ │ │ │ │ │ │ Each pattern describes │ 每个模式都描述了一个 │ │ │ │ a problem that occurs │ 在我们的环境中反复 │ │ │ │ over and over again... │ 出现的问题... │ │ │ │ │ │ │ │ ├──────────────────────────┴──────────────────────────────┤ │ │ │ 第 1 章 / 共 41 章 ◀ 上一章 下一章 ▶ │ │ │ └─────────────────────────────────────────────────────────┘ │ └──────────────────────────────────────────────────────────────┘ ``` **对照查看交互：** - 左右面板各自独立滚动，但默认同步 - 同步滚动：滚一侧，另一侧同步对齐到对应段落 - 可关闭同步：点击面板间的「锁定」图标切换 - 章节导航：底部章切换，左右面板同步跳转 --- ### 页面B4：我的文件 ``` ┌──────────────────────────────────────────────────────────────┐ │ 📖 BookFlow [首页] [我的文件] [我的任务] [gerry ▾] │ ├──────────────────────────────────────────────────────────────┤ │ │ │ 我的文件 存储空间: 120MB/5GB │ │ │ │ [全部] [原文] [译文] [对照] 🔍 搜索文件... │ │ │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ 📘 Design Patterns (原文) │ │ │ │ PDF · 12.8MB · 保留至 2026-07-15 │ │ │ │ [📥 下载] [👁 查看] [🗑 删除] │ │ │ ├────────────────────────────────────────────────────────┤ │ │ │ 📗 Design Patterns (中文翻译) │ │ │ │ Markdown · 2.1MB · 保留至 2026-07-15 │ │ │ │ [📥 下载] [👁 查看] [📖 对照] [🗑 删除] │ │ │ ├────────────────────────────────────────────────────────┤ │ │ │ 📘 Clean Code (原文) │ │ │ │ PDF · 8.2MB · 保留至 2026-07-15 │ │ │ │ [📥 下载] [👁 查看] [🗑 删除] │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ │ [← 上一页] 第 1/3 页 [下一页 →] │ │ │ └──────────────────────────────────────────────────────────────┘ ``` --- ### 页面B5：我的任务 ``` ┌──────────────────────────────────────────────────────────────┐ │ 📖 BookFlow [首页] [我的文件] [我的任务] [gerry ▾] │ ├──────────────────────────────────────────────────────────────┤ │ │ │ 我的任务 │ │ │ │ [进行中 (1)] [已完成] [失败] │ │ │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ 🔄 Design Patterns — 翻译为中文 │ │ │ │ ████████████████░░░░░░░░░░ 67% │ │ │ │ 章节 26/38 · 预计剩余 5 分钟 · DeepSeek │ │ │ │ 提交于 10:15 · [查看进度] [取消] │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ │ ── 已完成 ── │ │ │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ ✅ Clean Code — 翻译为中文 15 min │ │ │ │ 128K tokens · DeepSeek · 完成于 09:32 │ │ │ │ [📥 下载] [📖 对照查看] │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ └──────────────────────────────────────────────────────────────┘ ``` --- ## 4B.2 子系统B 管理员侧 — 页面线框图 ### 页面B-Admin0：运营概览 ``` ┌──────────────────────────────────────────────────────────────┐ │ 🛡️ BookFlow Admin [概览] [用户] [业务] [异常] [内容] [系统]│ ├──────────────────────────────────────────────────────────────┤ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ 今日注册 │ │ 搜索次数 │ │ 翻译次数 │ │ 下载次数 │ │ │ │ 12 │ │ 458 │ │ 34 │ │ 89 │ │ │ │ ↑ 20% │ │ ↑ 5% │ │ ↓ 2% │ │ ↑ 12% │ │ │ └──────────┘ └──────────┘ └──────────┘ └──────────┘ │ │ │ │ ⚠️ 异常：翻译失败 5 · 下载失败 2 · 无结果搜索 15 │ │ │ │ ┌─ 用户层级分布 ─────────┐ ┌─ 热门无结果搜索 ───────────┐ │ │ │ Free: 1,245 ┃████████ │ │ "机器学习实战" (8次) │ │ │ │ Pro: 89 ┃█ │ │ "算法导论中文版" (5次) │ │ │ │ Max: 12 ┃░ │ │ "深入理解计算机系统" (4次) │ │ │ │ API: 3 ┃░ │ │ [加入发现队列] │ │ │ └────────────────────────┘ └────────────────────────────┘ │ │ │ │ ┌─ 趋势（近 7 天）──────────────────────────────────────┐ │ │ │ 搜索 ▁▂▃▂▅▃▄ 翻译 ▁▁▂▃▂▄ 下载 ▂▃▂▃▅▄ │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ │ ┌─ 最新文章 ────────────────────────────────────────────┐ │ │ │ "2026年5月编程书籍排行榜" · 草稿 · 待发布 │ │ │ │ "PDF翻译工具对比" · 已发布 · 浏览 1,234 │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ └──────────────────────────────────────────────────────────────┘ ``` --- ### 页面B-Admin4：异常追踪 ``` ┌──────────────────────────────────────────────────────────────┐ │ 🛡️ BookFlow Admin [概览] [用户] [业务] [异常] [内容] [系统]│ ├──────────────────────────────────────────────────────────────┤ │ │ │ 异常追踪 │ │ │ │ [全部] [翻译失败(5)] [下载失败(2)] [无结果搜索(15)] │ │ │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ ❌ 翻译失败 · refactoring.md │ │ │ │ 用户: user@example.com · 原因: Key 额度耗尽 │ │ │ │ 时间: 2026-04-29 09:58 · 状态: 未处理 │ │ │ │ [重试] [忽略] [查看详情] │ │ │ ├────────────────────────────────────────────────────────┤ │ │ │ ❌ 翻译失败 · dsa-handbook.md │ │ │ │ 用户: user2@example.com · 原因: 文件损坏 │ │ │ │ 时间: 2026-04-29 08:32 · 状态: 未处理 │ │ │ │ [重试] [忽略] [查看详情] │ │ │ ├────────────────────────────────────────────────────────┤ │ │ │ ❌ 下载失败 · ml-handbook.pdf │ │ │ │ 用户: user3@example.com · 原因: 源站不可用 │ │ │ │ 时间: 2026-04-29 07:15 · 状态: 未处理 │ │ │ │ [重试] [忽略] [查看详情] │ │ │ ├────────────────────────────────────────────────────────┤ │ │ │ 🔍 无结果 · "机器学习实战" │ │ │ │ 搜索 8 次 · 最近: 2026-04-29 10:05 │ │ │ │ [加入发现队列] [忽略] │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ └──────────────────────────────────────────────────────────────┘ ``` --- ### 页面B-Admin5：内容管理（SEO） ``` ┌──────────────────────────────────────────────────────────────┐ │ 🛡️ BookFlow Admin [概览] [用户] [业务] [异常] [内容] [系统]│ ├──────────────────────────────────────────────────────────────┤ │ │ │ 内容管理 [＋ 新建文章] │ │ │ │ [全部] [已发布] [草稿] │ │ │ │ ┌────────────────────────────────────────────────────────┐ │ │ │ 📝 2026年5月编程书籍排行榜 │ │ │ │ 草稿 · 关键词: 编程书籍, 排行榜 · 内链 3 · 外链 2 │ │ │ │ 创建: 04-28 · [编辑] [发布] [删除] │ │ │ ├────────────────────────────────────────────────────────┤ │ │ │ 📝 PDF翻译工具对比：2026年终极指南 │ │ │ │ 已发布 · 浏览 1,234 · 关键词: PDF翻译 · SEO 评分 A │ │ │ │ 发布: 04-25 · [编辑] [下架] [查看SEO] │ │ │ ├────────────────────────────────────────────────────────┤ │ │ │ ... │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ │ ┌─ 关键词管理 ──────────────────────────────────────────┐ │ │ │ PDF翻译(12篇) · 编程书籍(8篇) · 翻译工具(6篇) │ │ │ │ 中英对照(5篇) · OCR工具(4篇) · [＋ 添加关键词] │ │ │ └────────────────────────────────────────────────────────┘ │ │ │ └──────────────────────────────────────────────────────────────┘ ``` --- ## 4C.1 全局组件规范 ### 侧边栏（子系统A） ``` 收起时 (64px): 展开时 (240px): ┌──────┐ ┌──────────────┐ │ 📖 │ │ 📖 BookFlow │ │ │ ├──────────────┤ │ 🏠 │ │ 🏠 仪表盘 │ │ │ │ │ │ 🔍 │ │ ── 数据处理 ──│ │ │ │ 🔍 书籍发现 │ │ ⬇️ │ │ ⬇️ 下载管理 │ │ │ │ 📄 PDF转换 │ │ 📄 │ │ 🌐 翻译管理 │ │ │ │ │ │ 🌐 │ │ ── 管道电商 ──│ │ │ │ 🔗 管道看板 │ │ 🔗 │ │ 🛒 闲鱼电商 │ │ │ │ │ │ 🛒 │ │ ── 基础设施 ──│ │ │ │ 📦 云存储 │ │ 📦 │ │ ⚙️ 系统监控 │ │ │ │ │ │ ⚙️ │ └──────────────┘ └──────┘ ``` **交互：** - 默认展开，点击折叠按钮收起至 64px - 收起时只显示图标，hover 显示 tooltip - 当前页面高亮（背景色 + 左边框） - 分组标题（数据处理/管道电商/基础设施）不可点击 ### 顶部栏（子系统A） ``` ┌──────────────────────────────────────────────────────┐ │ [≡] 折叠侧边栏 🔔 2 gerry ▾ │ │ │ │ 告警下拉： │ │ ┌──────────────────────────────┐ │ │ │ ⚠️ 翻译失败 2 个任务 │ │ │ │ ⚠️ DeepSeek Key 额度 < 50% │ │ │ │ [查看全部] │ │ │ └──────────────────────────────┘ │ └──────────────────────────────────────────────────────┘ ``` ### 顶部导航（子系统B） ``` ┌──────────────────────────────────────────────────────┐ │ 📖 BookFlow [首页] [我的文件] [我的任务] [gerry▾]│ │ │ │ gerry 下拉： │ │ ┌──────────────────────────────┐ │ │ │ 👤 账号信息 │ │ │ │ 📊 用量统计 │ │ │ │ 💎 升级 Pro │ │ │ │ ────────── │ │ │ │ 🚪 退出 │ │ │ └──────────────────────────────┘ │ └──────────────────────────────────────────────────────┘ ``` ### 统计卡片（通用） ``` ┌──────────────┐ │ 标题 │ │ │ │ 数字 │ │ 变化趋势 ↗ │ │ │ └──────────────┘ 尺寸: min-w=180px, h=auto (自适应) 变体: 默认 / 成功(绿) / 警告(橙) / 错误(红) ``` ### 可扩展维度列表项（子系统A通用） ``` ┌──────────────────────────────────────────────────────┐ │ ✅ 名称 关键指标 · 状态文本 │ │ 副标题/描述信息 │ │ [编辑] [暂停/启用] [查看日志] │ └──────────────────────────────────────────────────────┘ ┌──────────────────────────────────────────────────────┐ │ 📋 名称（未接入） │ │ 描述信息 │ │ [配置] [启用] │ └──────────────────────────────────────────────────────┘ ``` ### 进度条（通用） ``` 翻译进度: ████████████████░░░░░░░░░░ 67% 章节 26/38 下载进度: ████████████████████░░░░░░ 82% 10.5/12.8 MB 小尺寸（列表行内）: ████████░░ 31% ``` --- *L4 框架层 v1.0 完成。定义了子系统A 9 个页面线框图 + 子系统B 用户侧 6 个页面 + 管理员侧 3 个页面的线框布局，以及全局组件（侧边栏、顶部栏、统计卡片、可扩展维度列表、进度条）的交互规范和尺寸参数。*