335 lines
17 KiB
Markdown
335 lines
17 KiB
Markdown
# 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
|
||
验收: 代理测试连通性; 日志可导出。
|