# EveryPublish 页面线框图全集（ASCII）

> 2026-08-20 · 与 docs/delivery-plan.md 日计划对应（D5-D7 页面开发按本图实现）。标注行=推荐使用的 TDesign 组件与 starter 模板。

## 0. 通用布局骨架（除登录页外所有网页端页面共用）

+------------------------------------------------------------------+
| Logo EveryPublish             🔔通知(角标)      头像 ▾            |
+-------------+----------------------------------------------------+
| 侧边菜单     | 面包屑: 首页 / 发布管理 / 任务列表                   |
| 工作台       | +------------------------------------------------+|
| 发布管理 ▾   | |                                                ||
|  任务列表    | |              页面内容区(各页不同)               ||
|  新建发布    | |                                                ||
|  排期日历    | |                                                ||
| 素材库       | |                                                ||
| 账号管理     | |                                                ||
| 审核中心     | |                                                ||
| 通知与挑战   | |                                                ||
| 成员与权限   | |                                                ||
| 设置 ▾       | +------------------------------------------------+|
| 审计日志     |                                                    |
+-------------+----------------------------------------------------+

组件: Layout + Menu(侧边) + Breadcrumb + Dropdown(头像) + Badge(通知角标)
说明: admin 角色在头像下拉出现「平台管理」入口，跳 /admin 域（同骨架，菜单替换）。

## 1. 登录页（isFullPage 全屏，无侧边菜单）

+-----------------------------------------------------------+
|                                                           |
|                    [Logo EveryPublish]                    |
|            +---------------------------------+           |
|            | 账号    [___________________]   |           |
|            | 密码    [___________________]   |           |
|            | [x] 记住我        忘记密码?     |           |
|            |          [  登  录  ]          |           |
|            +---------------------------------+           |
|                                                           |
+-----------------------------------------------------------+

组件: Form + Input + Checkbox + Button; 模板: pages/Login 改造(去第三方登录)
验收: 登录成功进入工作台; 失败提示; refresh 自动续期。

## 2. 仪表盘（工作台）

+------------------------------------------------------------------+
| [今日发布:12] [成功:10] [失败:2] [待处理挑战:1]                     |
| Agent 在线状态: ● 在线(1台) 最后心跳 3s 前         [查看设备]       |
| 最近任务:                                                        |
| | 素材 | 标题         | 平台 | 状态   | 时间     | 操作  |       |
| | 图   | xxx          | 抖音 | 已发布 | 10:32    | 查看  |       |
| | 图   | yyy          | 快手 | 失败   | 10:30    | 重试  |       |
+------------------------------------------------------------------+

组件: Card + Statistic(可用 echarts 现成卡片或纯文本) + Table + Tag + Badge
模板: pages/Dashboard/Base 改造
验收: 数字与后端统计一致; Agent 状态实时。

## 3. 任务列表（发布管理）

+------------------------------------------------------------------+
| 筛选: [状态▾全部] [平台▾全部] [日期范围] [搜索标题____] [查询][重置] |
| [ + 新建发布 ]                                                   |
| | 素材 | 标题      | 平台    | 账号 | 排期时间 | 状态    | 操作      | |
| | 图   | xxx       | 抖音    | 官号 | 10:30    | 已发布  | 查看/重试 | |
| | 图   | yyy       | 小红书  | 官号 | 明天09:00| 待审核  | 查看/取消 | |
| ...                                                             |
| < 1 2 3 ... 10 >  共 123 条                                      |
+------------------------------------------------------------------+

组件: Table + Select + DateRangePicker + Input + Button + Tag + Pagination + Popconfirm(取消)
模板: pages/List/Base
验收: 筛选/分页正确; 重试与取消二次确认; 状态实时刷新。

## 4. 新建发布（分步向导）

+------------------------------------------------------------------+
| 步骤条: ① 选择素材  →  ② 平台与账号  →  ③ 编辑内容  →  ④ 定时与提交 |
|                                                                  |
| 步骤①: 素材卡片网格(点选)                     [从素材库选择][上传]  |
|  +------+ +------+ +------+                                      |
|  | 缩略图 | | 缩略图 | | 缩略图 |   (选中高亮✓)                    |
|  | 名称  | | 名称  | | 名称  |                                    |
|  +------+ +------+ +------+                                      |
| 步骤②: [x]抖音 [x]快手 [x]小红书 [x]B站   每平台: [账号▾官方号]     |
| 步骤③: 标题[________________] 话题[#____] 描述[多行textarea]      |
|        右侧: 各平台发布预览卡片                                    |
| 步骤④: (•)立即发布 ( )定时 [日期时间选择器]   [提交审核]           |
+------------------------------------------------------------------+

组件: Steps + Grid(Card选择) + Upload + Checkbox + Select + Input + Textarea + Radio + DatePicker
模板: pages/Form/Step
验收: 必填校验; 提交后进入待审核/直接排期(视配置)。

## 5. 排期日历

+------------------------------------------------------------------+
| [◀ 2026年8月 ▶] [今天]          图例: ●待发 ●已发 ●失败          |
|  一   二   三   四   五   六   日                                  |
|         1    2    3    4    5    6                                |
|  7    8    9   [10●2] 11   12   13      (右侧/下方列出当日任务)    |
| 14   15   16   17   18   19   20       | 09:00 xxx 抖音 待审核 |   |
| ...                                        | 14:00 yyy B站  已发布 | |
+------------------------------------------------------------------+

组件: Calendar(TDesign 1.x, 若无则以卡片网格自绘) + List + Tag
模板: 新建页面
验收: 月视图任务点正确; 点击日期过滤当日任务。

## 6. 任务详情（Drawer 侧滑）

+------------------------------------------------------------------+
| X 任务详情 #1024                                    [重试][关闭]  |
| 基本信息: 标题 / 平台 / 账号 / 创建人 / 排期时间                   |
| 事件时间线:                                                      |
|  ● 10:29:30  任务下发 Agent                                      |
|  ● 10:30:01  开始上传素材(进度 100%)                              |
|  ● 10:32:10  平台审核通过, 已发布                                 |
|  ● 10:32:11  回执截图 [缩略图][查看大图]  链接: https://...       |
| 失败场景: 失败原因红色标注 + [重试]                                |
+------------------------------------------------------------------+

组件: Drawer + Descriptions + Timeline + ImageViewer + Tag + Button
模板: pages/Detail/Base 改造
验收: 事件流完整; 截图可放大; 失败原因可见。

## 7. 素材库

+------------------------------------------------------------------+
| [上传素材] 分组:[全部▾] 搜索:[____]           视图:[卡片][列表]    |
| +--------+ +--------+ +--------+                                 |
| | 缩略图  | | 缩略图  | | 缩略图  |                                |
| | 名称.mp4| | 名称.jpg| | ...    |                                |
| | 128MB  | | 2.1MB  | |        |                                |
| | [预览][删除] | [预览][删除] | |        |                         |
| +--------+ +--------+ +--------+                                 |
| 上传弹窗: [拖拽文件到此处]  进度条: ▓▓▓▓▓▓░░ 80%                  |
+------------------------------------------------------------------+

组件: Upload(dragger) + Progress + Grid + ImageViewer + Select + Input + Popconfirm
模板: pages/List/Card
验收: 大文件上传进度; sha256 入库; 预览/删除正常。

## 8. 账号台账 + 绑定挑战弹窗

+------------------------------------------------------------------+
| [ + 绑定账号 ]                                                   |
| | 平台 | 账号昵称 | 状态  | 健康度 | 代理  | 最后活跃 | 操作      | |
| | 抖音 | xxx官方  | 已绑定 | ●良好  | 无    | 2小时前  | 重扫/解绑 | |
| | 快手 | yyy      | 登录过期 | ●差  | 无    | 5天前   | 重新扫码 | |
| +--------------------------------------------------------------+ |
| 绑定弹窗: 选择平台[▾] → 二维码展示区 → 状态: 等待扫码...           |
|           [刷新二维码]   (二维码由 token 本地渲染, 非截图)         |
+------------------------------------------------------------------+

组件: Table + Dialog + Select + Button + Tag + Badge + qrcode.react(唯一新增依赖)
模板: pages/List/Base + Dialog
验收: 发起绑定→Agent 取码→弹窗显示→手机扫码→台账变绿。

## 9. 审核中心

+------------------------------------------------------------------+
| 待审列表:                                                        |
| | 素材 | 标题 | 平台数 | 提交人 | 提交时间 | 操作              |   |
| | 图   | xxx  | 3      | 运营A  | 10:00    | [预览][通过][驳回] |   |
| 预览 Drawer: 左侧各平台 Tab 预览效果; 右侧批注框                   |
| [通过] 或 [驳回 + 批注原因______]                                 |
+------------------------------------------------------------------+

组件: Table + Drawer + Tabs + Textarea + Button
模板: pages/List/Base + Drawer
验收: 通过→排期; 驳回→回草稿+通知提交人。

## 10. 挑战中心（通知与挑战）

+------------------------------------------------------------------+
| 待处理:  [类型] 二维码登录  [平台]抖音  [账号]xxx [时间]2分钟前 [处理] |
| 已完成:  短信验证码     小红书      ...          1小时前      ✓已解决 |
| QR 弹窗: 二维码展示(自动刷新) 提示: 请用抖音APP扫码               |
| 验证码弹窗: 已发送至手机尾号 1234  [输入框______] [提交] (可重输2次) |
+------------------------------------------------------------------+

组件: List/Table + Dialog + Input + Button + Tag + qrcode.react
验收: 五类挑战均可人工完成; 超时挂起可一键重发。

## 11. 通知

+------------------------------------------------------------------+
| [全部已读]                                                        |
| ● 10:32 任务#1024 抖音 发布失败: 风控拦截          [查看]  已读   |
| ○ 10:00 抖音官方号 登录即将过期, 请重新扫码       [去扫码] 未读   |
| ○ 09:30 成员 运营B 提交了待审核任务               [去审核] 未读   |
+------------------------------------------------------------------+

组件: List + Badge + Button
验收: 事件产生即推送; 已读状态持久。

## 12. 成员与权限

+------------------------------------------------------------------+
| [ + 邀请成员 ]                                                   |
| | 姓名 | 手机 | 角色 | 状态 | 加入时间 | 操作           |        |
| | 张A  | 138.. | 管理员 | 正常 | 08-01   | 改角色/停用    |        |
| | 李B  | 139.. | 运营   | 正常 | 08-10   | 改角色/停用    |        |
| 邀请弹窗: 角色[▾运营] → 生成邀请链接 [复制]                       |
+------------------------------------------------------------------+

组件: Table + Dialog + Select + Button + Message(复制成功)
模板: pages/User
验收: 角色权限隔离生效; 停用成员无法登录。

## 13. 设置（四个子页）

+------------------------------------------------------------------+
| Tab: [工作区资料] [安全] [通知渠道] [Agent设备]                    |
| 资料: 名称[____] Logo[上传] 简介[____]              [保存]        |
| 安全: 2FA 开关 [○关(默认)] 登录设备: |Win Chrome| 杭州 | [吊销]  | |
| 通知渠道: 企微[○开 配置] 钉钉[○关] 邮件[○关]                       |
| Agent设备: | 设备名 | 状态●在线 | 版本 | 最后心跳 | [吊销][指令] | |
+------------------------------------------------------------------+

组件: Tabs + Form + Switch + Upload + Table + Popconfirm
验收: 2FA 默认关; 吊销设备后客户端失联。

## 14. 审计日志

+------------------------------------------------------------------+
| 筛选: [操作人____] [动作▾] [时间范围]      [查询]                 |
| | 时间 | 操作人 | 动作 | 对象 | 详情                    |        |
| | 10:30| 张A    | 通过 | 任务#1024 | 审核通过             |        |
| | 10:00| 李B    | 提交 | 任务#1024 | 提交待审核           |        |
+------------------------------------------------------------------+

组件: Table + Select + DateRangePicker + Input
验收: 全操作可查。

## 15. admin · 租户管理

+------------------------------------------------------------------+
| | 租户名称 | 套餐 | 成员数 | Agent数 | 状态 | 创建时间 | 操作 |    |
| | 某某科技 | 试用 | 5      | 1      | 正常 | 08-01    | [停用]|    |
+------------------------------------------------------------------+

组件: Table + Popconfirm
验收: 停用后租户不可登录。

## 16. admin · Agent 总览

+------------------------------------------------------------------+
| | 租户 | 设备名 | 版本 | 在线 | 最后心跳 | 操作            |       |
| | 某某 | PC-01  | 0.1  | ●在线 | 3s前     | [吊销][远程指令] |       |
+------------------------------------------------------------------+

组件: Table + Badge + Popconfirm
验收: 在线状态实时; 吊销即时生效。

## 17. 客户端 · 配对引导（首次启动）

+----------------------------------------------------------+
|  EveryPublish 发布助手                       [—][□][X]   |
|                                                          |
|  第一步: 在网页端 设置→Agent设备 获取配对码                |
|  配对码: [______]                                        |
|                      [ 绑 定 ]                           |
|  状态: 绑定成功 ✓ / 失败原因(红字)                        |
+----------------------------------------------------------+

组件: WinUI 原生 (StackPanel/TextBox/Button/InfoBar)
验收: 5 分钟完成配对; 失败有明确原因。

## 18. 客户端 · 托盘菜单

+--------------------+
| ● 已连接(延迟 12ms)|
| 待发任务: 3        |
| 打开面板           |
| 重新扫码           |
| 查看日志           |
| 退出               |
+--------------------+

组件: H.NotifyIcon 托盘菜单(Win32 interop)
验收: 最小化到托盘; 状态随连接实时变化。

## 19. 客户端 · 主面板

+----------------------------------------------------------+
| 服务器: ● 已连接  延迟 12ms   版本 0.1.0                  |
| 账号:                                                    |
| | 平台 | 状态  | 健康度 | 操作             |              |
| | 抖音 | 已绑定 | ●良好  | [重新扫码]       |              |
| | 快手 | 过期  | ●差    | [扫码修复]       |              |
| 待发任务: 3   今日已发: 5                                 |
| [打开日志] [设置]                                         |
+----------------------------------------------------------+

组件: WinUI 原生 (ListView/GridView/ProgressRing)
验收: 状态与服务器一致; 扫码入口直达挑战窗口。

## 20. 客户端 · 扫码挑战窗口

+----------------------------------------------------------+
| 请使用 抖音APP 扫描二维码登录                             |
|  ▓▓▓▓▓▓▓▓  (二维码, token 本地渲染) ▓▓▓▓▓▓▓▓             |
| 状态: 等待扫码... → 已扫码,请在手机确认 → 登录成功         |
| [刷新二维码] [取消]                                       |
+----------------------------------------------------------+

组件: WinUI + QRCoder(C#)
验收: 码过期自动刷新; 状态实时。

## 21. 客户端 · 验证码输入窗口

+----------------------------------------------------------+
| 小红书 需要短信验证码                                     |
| 已发送至 138****1234                                      |
| [______]        [提交] (剩余重试 2 次)                    |
+----------------------------------------------------------+

组件: WinUI TextBox/Button
验收: 回传服务器→Agent 回填; 错误可重输。

## 22. 客户端 · 设置（代理与日志）

+----------------------------------------------------------+
| Tab: [代理] [日志] [关于]                                 |
| 代理: 每账号代理配置: 抖音官号 → [socks5://____] [测试]    |
| 日志: 文本区(滚动) + [导出] [清空]                        |
| 关于: 版本 0.1.0  [检查更新]                              |
+----------------------------------------------------------+

组件: WinUI Pivot + TextBox + Button
验收: 代理测试连通性; 日志可导出。