prd

「Webhooks」核心页面设计

设计 Webhook 平台的核心页面，包括登录与注册、Dashboard 首页、Webhook 管理、日志与调试、告警与通知、账单与套餐、系统管理（企业版）等模块。

Leeting Yan 10 分钟阅读 4799 字

一、页面信息架构（IA）

mindmap
  root((Webhook 平台))
    登录与注册
      登录页
      注册页
      API Key 管理
    Dashboard 首页
      总览数据
      调用统计图表
      SLA 状态
    Webhook 管理
      列表页
      创建/编辑页
      详情页
    日志与调试
      日志查询页
      日志详情页
      Mock/Replay 页面
    告警与通知
      告警配置页
      通知渠道页
    账单与套餐
      账单中心
      套餐升级/降级
    系统管理（企业版）
      用户与角色
      租户管理
      审计日志

二、页面设计详情

1. 登录与注册

  • 登录页

    • 表单：邮箱 / 密码 / 验证码（可选）。
    • 支持第三方登录：GitHub、Google。
    • 提供「忘记密码」功能。

  • 注册页

    • 表单：邮箱 / 密码 / 确认密码。
    • 邮件验证。

  • API Key 管理

    • 列表展示已有 API Key。
    • 新建/禁用/删除。
    • 每个 Key 仅显示一次明文，之后只可重置。

2. Dashboard 首页

  • 模块布局

    • 顶部：欢迎语 + 当前套餐信息。
    • 中部：统计图表。
    • 底部：最近调用日志预览。

  • 数据卡片

    • 今日调用量、成功率、失败率。
    • 当前套餐使用进度条（例如：已用 50 万/100 万）。

  • 图表

    • 折线图：调用量随时间变化。
    • 饼图：成功 vs 失败分布。

  • 交互要点

    • Hover 展示数据明细。
    • 点击统计卡片可跳转到对应模块。

3. Webhook 管理

  • Webhook 列表页

    • 表格字段：Webhook 名称、URL、事件类型、状态、调用量。
    • 操作：启用/禁用、编辑、删除。
    • 支持搜索与筛选（按事件类型/状态）。

  • 创建/编辑页

    • 表单：

      • 名称（可选）。
      • URL（必填，HTTPS 校验）。
      • 事件类型（下拉选择，可多选）。
      • 重试策略（默认 5 次，指数退避）。
      • 签名密钥（自动生成/手动配置）。

    • 交互：提交后验证 URL 可用性。

  • 详情页

    • 展示该 Webhook 的调用统计（调用量、失败率）。
    • 展示最近调用日志（成功/失败）。
    • 提供「发送测试事件」按钮。

4. 日志与调试

  • 日志查询页

    • 表格字段：时间、事件 ID、Webhook URL、状态码、耗时。
    • 支持筛选：时间范围、状态码、URL。
    • 支持导出 CSV/JSON。

  • 日志详情页

    • 展示：

      • 请求头、请求体。
      • 响应头、响应体。
      • 签名校验结果。

    • 提供「重放」按钮。

  • Mock/Replay 页面

    • 用户可选择事件类型，生成 Mock 请求。
    • 可对失败事件进行重放。

5. 告警与通知

  • 告警配置页

    • 表单：

      • 触发条件（失败率 > x%，延迟 > y ms）。
      • 检测周期（1 分钟、5 分钟、15 分钟）。
      • 重复通知策略。

  • 通知渠道页

    • 渠道列表：邮箱、Slack、飞书、钉钉。
    • 每个渠道可测试发送消息。
    • 状态：已验证/未验证。

6. 账单与套餐

  • 账单中心

    • 展示本月调用量、超额调用量、费用。
    • 历史账单列表（账单号、金额、支付状态）。
    • 下载 PDF 发票。

  • 套餐升级/降级

    • 展示套餐详情对比表。
    • 支持微信/支付宝/Stripe/PayPal 支付。
    • 套餐升级即时生效，降级下个月生效。

7. 系统管理（企业版）

  • 用户与角色

    • 成员列表：姓名、邮箱、角色（管理员/开发者/观察者）。
    • 支持邀请成员（邮件邀请链接）。
    • 角色切换、移除成员。

  • 租户管理

    • 支持一个账号管理多个租户。
    • 提供租户切换入口。

  • 审计日志

    • 记录所有后台操作。
    • 字段：时间、操作人、操作内容、IP 地址。
    • 支持导出。

三、交互与设计风格建议

  • 整体风格：Stripe / Linear 风格 → 极简、科技感、黑白蓝为主色。

  • 交互细节：

    • 表格支持搜索、筛选、分页。
    • 图表交互：Hover 时显示 tooltip。
    • 表单输入时实时校验。

  • 响应式设计：PC 优先，同时兼容移动端。

Webhook 平台页面信息架构与跳转流程

flowchart TD
    %% 用户登录注册入口
    A[登录/注册] --> B[Dashboard 首页]

    %% Dashboard 首页跳转
    B --> C[Webhook 管理列表]
    B --> D[日志与调试]
    B --> E[告警与通知配置]
    B --> F[账单与套餐]
    B --> G[系统管理 企业版]

    %% Webhook 管理流程
    C --> C1[创建 Webhook]
    C --> C2[编辑 Webhook]
    C --> C3[Webhook 详情页]
    C3 --> D

    %% 日志与调试
    D --> D1[日志查询页]
    D --> D2[日志详情页]
    D2 --> D3[重放事件 Replay]
    D --> D4[Mock 测试事件]

    %% 告警与通知
    E --> E1[配置告警规则]
    E --> E2[通知渠道设置]
    E2 --> E3[测试发送消息]

    %% 账单与套餐
    F --> F1[账单中心]
    F --> F2[历史账单]
    F --> F3[套餐升级/降级]
    F3 --> F4[支付页面]

    %% 系统管理
    G --> G1[用户与角色管理]
    G --> G2[租户管理]
    G --> G3[审计日志]

解读

1. 登录与注册

  • 用户首次进入 → 注册账号（或 OAuth 登录）。
  • 登录后跳转到 Dashboard 首页。

2. Dashboard 首页

  • 数据总览（调用量 / 成功率 / 失败率 / 套餐进度）。
  • 作为中心入口，跳转到各模块。

3. Webhook 管理

  • 列表页：展示所有订阅。
  • 创建/编辑页：配置 URL、事件类型、重试策略、签名密钥。
  • 详情页：查看调用统计 & 日志，直接跳转到日志模块。

4. 日志与调试

  • 日志查询：支持搜索过滤。
  • 日志详情：展示请求/响应，支持「重放」。
  • Mock 测试：模拟事件推送。

5. 告警与通知

  • 配置页：设置失败率/延迟阈值。
  • 通知渠道：邮箱、Slack、飞书、钉钉。
  • 测试消息：验证通知渠道是否可用。

6. 账单与套餐

  • 账单中心：查看当月调用量与费用。
  • 历史账单：支持导出。
  • 套餐升级/降级：引导到支付页面。

7. 系统管理（企业版）

  • 用户与角色管理：RBAC。
  • 租户管理：企业多项目隔离。
  • 审计日志：记录关键操作，满足合规。

视觉与交互建议

  • 导航栏结构：

    • 首页 (Dashboard)
    • Webhooks
    • 日志
    • 告警
    • 套餐 & 账单
    • 管理 (仅企业版可见)

  • 交互细节：

    • 列表页 → 点击名称进入详情页。
    • 详情页 → 支持快捷跳转日志。
    • 表单 → 输入 URL 时实时校验格式。
    • 图表 → Hover 显示数据 tooltip。

Webhook 核心页面 Wireframe（低保真）

1. 登录 / 注册页

+---------------------------------------------------+
|                   Webhook 平台 Logo              |
|                                                   |
|  [ 登录 Login ]                                   |
|    - 输入框: 邮箱                                 |
|    - 输入框: 密码                                 |
|    - [ 登录按钮 ]                                 |
|    - [ 使用 GitHub 登录 ] [ 使用 Google 登录 ]    |
|    - 忘记密码?                                    |
|                                                   |
|  [ 注册 Sign Up ]                                 |
|    - 输入框: 邮箱                                 |
|    - 输入框: 密码 / 确认密码                      |
|    - [ 注册按钮 ]                                 |
+---------------------------------------------------+

交互要点：

  • 支持 OAuth 登录。
  • 注册后邮件验证。
  • API Key 生成引导。

2. Dashboard 首页

+---------------------------------------------------+
| 顶部导航: Dashboard | Webhooks | Logs | Alerts | Billing | Admin |
+---------------------------------------------------+
| [卡片] 今日调用量        | [卡片] 成功率 | [卡片] 失败率 |
| [卡片] 当前套餐进度条 (已用 50 万 / 100 万)       |
+---------------------------------------------------+
| [折线图] 调用量趋势 (过去 7 天)                   |
| [饼图] 成功 vs 失败分布                           |
+---------------------------------------------------+
| 最近调用日志 (表格)                                |
| 时间 | URL | 状态码 | 延迟 | 结果 (成功/失败)    |
+---------------------------------------------------+

交互要点：

  • 图表 Hover 显示详细数据。
  • 点击卡片 → 跳转对应模块（如点击调用量进入日志）。

3. Webhook 管理页

Webhook 列表页

+---------------------------------------------------+
| [ 新建 Webhook 按钮 ]                             |
+---------------------------------------------------+
| 表格:                                              |
| 名称 | URL | 事件类型 | 状态 | 调用量 | 操作      |
|---------------------------------------------------|
| OrderEvent | https://xx.com/callback | 订单完成 | 启用 | 5000 | 编辑 删除 |
| Payment    | https://yy.com/pay       | 支付成功 | 禁用 | 1200 | 编辑 删除 |
+---------------------------------------------------+
| [ 搜索框 ] [ 筛选: 启用/禁用 ] [ 按事件类型过滤 ] |

Webhook 创建/编辑页

+---------------------------------------------------+
| 输入框: 名称                                       |
| 输入框: 回调 URL (需 https 校验)                   |
| 下拉框: 事件类型 (可多选)                          |
| 下拉框: 重试策略 (默认5次/指数退避)                |
| 输入框: 签名密钥 (自动生成/手动配置)               |
| [ 保存 ] [ 取消 ]                                 |
+---------------------------------------------------+

4. 日志与调试

日志查询页

+---------------------------------------------------+
| 筛选: 时间范围 | 状态码 | URL | [ 搜索按钮 ]      |
+---------------------------------------------------+
| 表格: 时间 | Event ID | URL | 状态码 | 延迟 | 结果 |
|---------------------------------------------------|
| 12:01 | ev_12345 | https://xx.com | 200 | 180ms | 成功 |
| 12:03 | ev_12346 | https://yy.com | 500 | 230ms | 失败 |
+---------------------------------------------------+
| [ 导出 CSV ] [ 导出 JSON ]                        |

日志详情页

+---------------------------------------------------+
| Event ID: ev_12345                                |
| 请求头: ...                                       |
| 请求体: {...}                                     |
| 响应码: 200                                       |
| 响应体: {...}                                     |
| 延迟: 180ms                                       |
+---------------------------------------------------+
| [ 重放事件 Replay ]                               |
+---------------------------------------------------+

Mock / Replay 页面

+---------------------------------------------------+
| 选择事件类型: [ 支付完成 ] [ 订单完成 ]            |
| 输入框: 目标 URL                                   |
| 按钮: [ 发送测试事件 ]                            |
+---------------------------------------------------+
| 返回结果展示: 请求体 + 响应体                      |
+---------------------------------------------------+

5. 告警与通知配置

告警配置页

+---------------------------------------------------+
| 新建规则:                                          |
| 失败率阈值: [ 5% ]                                 |
| 延迟阈值: [ 200ms ]                                |
| 检测周期: [ 5分钟 ]                                |
| 通知渠道: [ Slack ] [ 邮件 ]                       |
| [ 保存规则 ]                                       |
+---------------------------------------------------+
| 已有规则列表:                                      |
| ID | 阈值条件 | 通知渠道 | 状态 | 操作 (编辑 删除) |

通知渠道页

+---------------------------------------------------+
| 渠道类型: 邮件                                     |
| 输入框: 邮箱地址                                   |
| [ 验证按钮 ] [ 测试发送消息 ]                      |
+---------------------------------------------------+

6. 账单与套餐

账单中心

+---------------------------------------------------+
| 当前套餐: 专业版 (100万次/月) 已用: 75万次        |
| 本月账单: ¥ 299                                   |
| [ 升级套餐 ] [ 降级套餐 ]                         |
+---------------------------------------------------+
| 历史账单列表:                                      |
| 日期 | 套餐 | 调用量 | 金额 | 支付状态 | 下载发票 |

支付页面

+---------------------------------------------------+
| 套餐对比表: 免费版 / 专业版 / 企业版               |
| 支付方式: [ 微信 ] [ 支付宝 ] [ Stripe ] [ PayPal ]|
| [ 确认支付按钮 ]                                   |
+---------------------------------------------------+

7. 系统管理（企业版）

用户与角色管理

+---------------------------------------------------+
| 成员列表:                                          |
| 姓名 | 邮箱 | 角色 (管理员/开发者/观察者) | 操作   |
|---------------------------------------------------|
| 张三 | zhang@xx.com | 管理员 | 移除 改角色        |
| 李四 | li@xx.com    | 开发者 | 移除 改角色        |
+---------------------------------------------------+
| [ 邀请成员 (邮件) ]                                |

租户管理

+---------------------------------------------------+
| 当前租户: Company-A                               |
| 租户列表: Company-A | Company-B                   |
| [ 切换按钮 ]                                       |

审计日志

+---------------------------------------------------+
| 表格: 时间 | 用户 | 操作内容 | IP 地址             |
|---------------------------------------------------|
| 2025-10-01 | 张三 | 删除 Webhook | 192.168.0.1     |
| 2025-10-02 | 李四 | 新建告警规则 | 10.0.0.5        |
+---------------------------------------------------+
| [ 导出 CSV/JSON ]                                 |

Webhook 平台交互流程规格说明（UX Spec）

一、用户旅程概览（User Journey）

journey
    title Webhook 用户体验旅程
    section 注册与登录
      注册账号: 5: 用户
      邮件验证: 4: 用户
      登录 & API Key 获取: 5: 用户
    section Webhook 管理
      创建 Webhook: 5: 用户
      配置事件 & 签名: 4: 用户
      测试调用: 5: 用户
    section 调试与监控
      查看调用日志: 5: 用户
      分析失败原因: 4: 用户
      重放事件 Replay: 5: 用户
    section 告警与通知
      配置告警规则: 4: 用户
      添加通知渠道: 5: 用户
    section 套餐与账单
      查看账单用量: 4: 用户
      升级套餐 & 支付: 5: 用户

二、交互流程（详细规格）

1. 注册与登录

  • 入口：访问平台首页 → 点击「注册」或「登录」。

  • 流程：

    1. 用户输入邮箱 + 密码 → 点击「注册」。
    2. 系统发送验证邮件 → 用户点击链接完成验证。
    3. 用户返回登录页 → 输入邮箱+密码 → 登录成功。
    4. 登录成功后进入 Dashboard 首页，并提示「生成 API Key」。

  • 交互要点：

    • 注册成功后自动跳转提示「请验证邮箱」。
    • 登录失败超过 5 次 → 触发验证码。
    • API Key 仅首次显示完整值，后续仅显示部分，需重置才能重新生成。

2. 创建 Webhook

  • 入口：Dashboard → Webhooks → 点击「新建 Webhook」。

  • 流程：

    1. 用户输入名称、回调 URL（必须 HTTPS）。
    2. 选择订阅事件类型（如支付成功、订单完成）。
    3. 配置重试策略（默认指数退避 5 次）。
    4. 系统自动生成签名密钥（用户可复制保存）。
    5. 点击「保存」 → 跳转 Webhook 列表页。

  • 交互要点：

    • 保存时校验 URL 有效性。
    • 提示「签名密钥仅显示一次，请妥善保存」。
    • 列表页立即显示新建 Webhook。

3. 测试调用

  • 入口：Webhook 详情页 → 「发送测试事件」。

  • 流程：

    1. 系统生成一条模拟事件，推送到目标 URL。
    2. 用户在日志模块中查看请求体/响应体。
    3. 如果失败 → 提示「可重放」。

  • 交互要点：

    • Mock 事件与真实事件结构保持一致。
    • 失败时 Dashboard 顶部显示告警提示。

4. 日志与调试

  • 入口：导航栏 → Logs。

  • 流程：

    1. 默认显示最近 24 小时的调用记录。

    2. 用户可筛选：时间范围、状态码、URL。

    3. 点击某条日志 → 查看详情。

    4. 日志详情中展示：

      • 请求头、请求体
      • 响应码、响应体
      • 延迟、签名验证结果

    5. 点击「重放」按钮 → 重新推送。

  • 交互要点：

    • 表格 Hover 显示更多字段。
    • 日志支持导出 CSV/JSON。
    • 重放时需二次确认。

5. 告警与通知

  • 入口：导航栏 → Alerts。

  • 流程：

    1. 用户新建告警规则 → 配置阈值（失败率 >5%，延迟 >200ms）。
    2. 选择通知渠道（邮件/Slack/飞书/钉钉）。
    3. 触发条件满足时 → 系统自动发送告警通知。

  • 交互要点：

    • 提供「测试发送」功能。
    • 告警规则可启用/禁用。

6. 套餐与账单

  • 入口：导航栏 → Billing。

  • 流程：

    1. 账单中心展示：

      • 当前套餐（免费版/专业版/企业版）
      • 本月调用量（已用/总量）
      • 本月应付金额

    2. 用户点击「升级套餐」。

    3. 弹出套餐对比表 → 用户选择新套餐。

    4. 跳转支付页面 → 支持微信、支付宝、Stripe、PayPal。

    5. 支付成功后立即生效。

  • 交互要点：

    • 套餐升级立即生效，降级次月生效。
    • 历史账单支持 PDF 下载。

7. 企业管理（仅企业版可见）

  • 入口：导航栏 → Admin。

  • 流程：

    1. 用户与角色管理：管理员可邀请成员，分配角色。
    2. 租户管理：支持一个账号管理多个租户。
    3. 审计日志：记录所有后台操作（时间、操作者、动作、IP）。

  • 交互要点：

    • 审计日志必须支持导出。
    • 租户切换有明显提示，避免误操作。

三、整体体验路径（User Flow）

flowchart LR
    A[注册/登录] --> B[Dashboard 首页]
    B --> C[新建 Webhook]
    C --> D[发送测试事件]
    D --> E[查看日志]
    E --> F[失败重放/调试]
    B --> G[告警配置]
    B --> H[账单中心/升级套餐]
    H --> I[支付完成 → 套餐升级]
    B --> J[企业管理 租户/角色/审计日志]

四、体验原则（UX Principles）

  1. 简单直观：开发者最少 3 步即可完成「新建 Webhook → 接收事件 → 查看日志」。
  2. 透明可控：所有推送事件必须可查询、可重放、可告警。
  3. 渐进复杂度：个人开发者体验轻量化，企业客户拥有更丰富配置。
  4. 安全合规：所有页面涉及的敏感数据（签名密钥、API Key）仅一次性显示。
  5. 商业闭环：体验路径自然引导到套餐升级，保证业务转化。

继续阅读

探索更多技术文章

浏览归档，发现更多关于系统设计、工具链和工程实践的内容。

全部文章 返回首页