# BookFlow — Layer 5: 表现层 (Surface) > 文档版本：v1.0 > 日期：2026-04-29 > 设计框架：Jesse James Garrett《用户体验要素》五层模型 > 前置文档：bookflow-L4-skeleton.md v1.0 --- ## 5.1 设计令牌 (Design Tokens) ### 子系统A：深色主题 — 内部运维仪表盘 ```css :root[data-theme="dashboard"] { /* 基础色板 */ --bg-primary: #0f1117; /* 主背景 */ --bg-secondary: #1a1d27; /* 侧边栏/卡片背景 */ --bg-elevated: #222533; /* 弹出层/面板 */ --bg-hover: #2a2d3a; /* hover 态 */ /* 文字 */ --text-primary: #e8eaed; /* 主要文字 */ --text-secondary: #9aa0a6; /* 次要文字 */ --text-muted: #5f6368; /* 辅助文字 */ /* 边框 */ --border-primary: #3c4043; /* 主要边框 */ --border-subtle: #2d3039; /* 轻量分割 */ /* 语义色 */ --color-success: #34a853; /* 在线/成功/已完成 */ --color-warning: #fbbc04; /* 警告/额度低 */ --color-error: #ea4335; /* 失败/离线 */ --color-info: #4285f4; /* 进行中/信息 */ --color-processing: #8ab4f8; /* 处理中高亮 */ /* 品牌色 */ --accent: #667eea; /* 主强调色 */ --accent-hover: #7b8ff0; /* 强调 hover */ /* 间距 */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; /* 圆角 */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; /* 字体 */ --font-sans: "Inter", "PingFang SC", "Microsoft YaHei", sans-serif; --font-mono: "JetBrains Mono", "Fira Code", monospace; /* 字号 */ --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-lg: 16px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px; /* 阴影 */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.4); --shadow-lg: 0 8px 24px rgba(0,0,0,0.5); /* 动画 */ --transition-fast: 150ms ease; --transition-base: 250ms ease; } ``` ### 子系统B：浅色主题 — 用户服务 ```css :root[data-theme="customer"] { /* 基础色板 */ --bg-primary: #ffffff; --bg-secondary: #f8f9fa; --bg-elevated: #ffffff; --bg-hover: #f1f3f4; /* 文字 */ --text-primary: #1a1a2e; --text-secondary: #5f6368; --text-muted: #9aa0a6; /* 边框 */ --border-primary: #dadce0; --border-subtle: #e8eaed; /* 语义色 — 同子系统A */ --color-success: #34a853; --color-warning: #fbbc04; --color-error: #ea4335; --color-info: #4285f4; --color-processing: #1a73e8; /* 品牌色 */ --accent: #667eea; --accent-hover: #5a6fd6; /* 间距/圆角/字号/阴影 — 同子系统A */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.08); --shadow-md: 0 4px 12px rgba(0,0,0,0.1); --shadow-lg: 0 8px 24px rgba(0,0,0,0.12); } ``` ### 子系统B 管理员：浅色主题变体 ```css :root[data-theme="admin"] { /* 继承 customer 主题 */ /* 区别：侧边栏用深色（同 dashboard）*/ --admin-sidebar-bg: #1a1d27; --admin-sidebar-text: #e8eaed; } ``` --- ## 5.2 组件样式 ### 按钮 ``` 主要按钮: ┌──────────────┐ │ 翻译为中文 │ bg: --accent, color: #fff, radius: 8px, h: 40px └──────────────┘ hover: --accent-hover 次要按钮: ┌──────────────┐ │ 查看详情 │ border: 1px --border, color: --text, radius: 8px └──────────────┘ 危险按钮: ┌──────────────┐ │ 删除 │ bg: --color-error, color: #fff └──────────────┘ 小按钮（行内操作）: [编辑] [暂停] [日志] h: 28px, font: --text-xs, no bg 图标按钮: [🔔] w: 36px, h: 36px, circle, hover: --bg-hover ``` ### 输入框 ``` 搜索框: ┌────────────────────────────────────┐ │ 🔍 搜索书名、作者或 ISBN... │ h: 48px, radius: 12px, border: 2px └────────────────────────────────────┘ focus: border --accent, shadow glow 普通输入: ┌────────────────────────────────────┐ │ 输入内容 │ h: 36px, radius: 6px └────────────────────────────────────┘ ``` ### 状态指示灯 ``` ● 在线/正常 8px circle, --color-success, pulse 动画 ● 警告 8px circle, --color-warning ● 离线/失败 8px circle, --color-error ● 未接入 8px circle, --text-muted (灰色) ◐ 处理中 8px circle, --color-info, 旋转动画 ``` ### 进度条 ``` 正常: ████████████████░░░░░░ 67% track: --bg-hover, fill: --color-info height: 8px, radius: 4px 警告（额度低）: ████████░░░░░░░░░░░░░░ 31% fill: --color-warning 成功: ████████████████████████ 100% fill: --color-success ``` ### 卡片 ``` 统计卡片: ┌─────────────────────┐ │ 今日发现 │ padding: 16px, bg: --bg-secondary │ │ border-radius: 12px │ 12 │ 字号: 标题 --text-sm, 数字 --text-3xl │ ↑ 较昨日 +3 │ border: 1px --border-subtle └─────────────────────┘ hover: slight lift (--shadow-md) 搜索结果卡片: ┌────────────────────────────────────┐ │ 📘 书名 │ padding: 20px, bg: --bg-elevated │ 作者 · 年份 │ border-radius: 12px │ │ border: 1px --border-primary │ ✅可下载 🌐可翻译 PDF · 12MB │ hover: --shadow-lg + translateY(-2px) │ [下载] [翻译] [查看] │ └────────────────────────────────────┘ ``` ### 标签/Badge ``` 状态 Badge: ┌──────────┐ │ ✅ 可下载 │ bg: rgba(52,168,83,0.12), color: --color-success └──────────┘ radius: 4px, padding: 2px 8px ┌──────────┐ │ 🌐 可翻译 │ bg: rgba(66,133,244,0.12), color: --color-info └──────────┘ ┌──────────┐ │ 📋 需处理 │ bg: rgba(95,99,104,0.12), color: --text-muted └──────────┘ 用户层级: [Free] bg: --bg-hover, color: --text-secondary [Pro] bg: rgba(102,126,234,0.12), color: --accent [Max] bg: rgba(234,179,8,0.12), color: #d4a017 [API] bg: rgba(52,168,83,0.12), color: --color-success ``` ### 表格/列表行 ``` 列表头: ┌───────────────────────────────────────────────────┐ │ 文件名 来源 状态 进度 操作 │ bg: --bg-secondary │──────────────────────────────────────────────────│ font: --text-xs │ │ color: --text-secondary │ (数据行) │ text-transform: uppercase └───────────────────────────────────────────────────┘ 数据行: ┌───────────────────────────────────────────────────┐ │ design-patterns Anna's ████░ 78% [暂停][日志] │ border-bottom: 1px --border-subtle │──────────────────────────────────────────────────│ hover: --bg-hover │ clean-code Anna's 排队 #2 [优先] │ └───────────────────────────────────────────────────┘ ``` --- ## 5.3 布局细节 ### 子系统A 侧边栏 ``` ┌─────────────────────────┐ │ │ 宽: 240px (展开) / 64px (收起) │ 📖 BookFlow │ 背景: --bg-secondary │ │ border-right: 1px --border-primary │ ───────────────────── │ │ │ │ 🏠 仪表盘 │ 当前项: bg --bg-hover + 左边框 3px --accent │ │ 文字: --text-primary │ ── 数据处理 ── │ 分组标题: --text-muted, font-size: --text-xs │ 🔍 书籍发现 │ letter-spacing: 0.5px │ ⬇️ 下载管理 │ │ 📄 PDF转换 │ 图标: 20px, 与文字间距 12px │ 🌐 翻译管理 │ 行高: 40px │ │ │ ── 管道电商 ── │ │ 🔗 管道看板 │ 收起时: 仅图标, 居中, w=40px h=40px │ 🛒 闲鱼电商 │ hover: tooltip 显示名称 │ │ │ ── 基础设施 ── │ 底部: │ 📦 云存储 │ [展开/收起] 切换按钮 │ ⚙️ 系统监控 │ │ │ └─────────────────────────┘ ``` ### 子系统B 顶部导航 ``` ┌──────────────────────────────────────────────────────────┐ │ 📖 BookFlow [首页] [我的文件] [我的任务] [gerry▾]│ │ │ h: 64px │ │ bg: --bg-primary │ │ border-bottom: 1px --border-subtle │ │ fixed top, z-10 │ Logo: 24px icon + "BookFlow" (--text-xl, font-weight 700)│ │ 导航项: font --text-base, color --text-secondary │ │ 当前项: color --accent + bottom border 2px │ │ 间距: 各项 24px │ └──────────────────────────────────────────────────────────┘ ``` --- ## 5.4 响应式断点 子系统A（桌面专用，最低 1280px）： - < 1280px: 侧边栏强制收起至 64px - < 1024px: 不适配（运维工具，仅桌面使用） 子系统B（响应式）： - ≥ 1200px: 完整布局 - 768-1199px: 卡片改为 2 列，对照查看保持左右 - < 768px: 卡片改为 1 列，对照查看改为上下排列 --- ## 5.5 动效 | 场景 | 动效 | 时长 | |------|------|------| | 页面切换 | 淡入 fade-in | 200ms | | 侧边栏展开/收起 | 宽度过渡 width | 250ms ease | | 卡片 hover | 上浮 + 阴影 | 150ms ease | | 详情面板滑出 | 右侧滑入 | 300ms ease-out | | 进度条 | 宽度过渡 | 500ms ease | | 状态灯（在线） | 脉冲 glow | 2s infinite | | 通知弹出 | 顶部滑入 | 300ms ease-out | | 按钮点击 | scale(0.97) | 100ms | --- ## 5.6 HTML 实现方案 ### 技术栈 - **纯 HTML + CSS + Vanilla JS**（子系统A，无构建链） - **Astino / Cloudflare Pages**（子系统B，如需构建链） - 图标: 内联 SVG（不依赖图标库） - 字体: Google Fonts (Inter) + 系统字体 fallback ### 文件结构 ``` 子系统A (dash.pdftranslate.app): dash/ ├── index.html ← 仪表盘 ├── discovery.html ← 书籍发现 ├── download.html ← 下载管理 ├── pdfhub.html ← PDF转换 ├── translator.html ← 翻译管理 ├── pipeline.html ← 管道看板 ├── xianyu.html ← 闲鱼电商 ├── storage.html ← 云存储 ├── system.html ← 系统监控 ├── css/ │ ├── variables.css ← 设计令牌 │ ├── base.css ← 重置 + 基础样式 │ ├── layout.css ← 侧边栏 + 顶栏布局 │ └── components.css ← 组件样式 └── js/ ├── sidebar.js ← 侧边栏交互 └── common.js ← 通用交互 子系统B 用户侧 (www.pdftranslate.app): (由 pdftranslate-app 前端项目实现) 子系统B 管理员 (admin.pdftranslate.app): admin/ ├── index.html ← 运营概览 ├── users.html ← 用户管理 ├── errors.html ← 异常追踪 ├── content.html ← 内容管理 ├── css/ └── js/ ``` --- *L5 表现层 v1.0 完成。定义了子系统A 深色主题 + 子系统B 浅色主题的完整设计令牌、组件样式规范、布局细节、响应式断点、动效规范和 HTML 实现方案。下一步：实现 HTML 原型。*