Webhook事件列表应使用HTML表格渲染，因其天然适配行列结构；表头用固定，每行用携带唯一标识，时间用ISO 8601格式，类型勾选必须用原生checkbox并严格匹配文档字符串。
Webhook事件列表用HTML表格渲染最稳妥
直接用 <table> 展示事件列表，不是因为“标准”，而是它天然适配事件的行列结构：每行一个事件，列分别是类型、时间、状态、重试次数。用 <code><div> 布局容易在响应式或数据量变大时错位，尤其当事件类型名长度不一（比如 <code>pull_request 和 repository_vulnerability_alert）时。
常见错误是把整个列表塞进一个 <pre class="brush:php;toolbar:false;"></pre> 或纯 <ul></ul> —— 这会让用户无法按列排序、筛选，也难加复选框。
- 表头固定用
<thead>，避免滚动时丢失字段含义 <li>每行事件用 <code><tr data-event-id="123"> 携带唯一标识，方便后续 JS 绑定操作 <li>时间列统一用 <code>ISO 8601格式（如"2024-05-22T14:30:12Z"），前端用new Date()解析更可靠，避免时区歧义 -
value必须和 Webhook 文档定义的事件类型字符串完全一致（区分大小写，含下划线），比如 GitHub 是star，GitLab 是star_event - 不要给每个 checkbox 写独立
id后再用 JS 拼数组——冗余且易漏，直接用document.querySelectorAll('input[name="event_types[]"]:checked') - 全选/反选逻辑里，别用
click()触发，改用checked = true/false赋值，否则可能绕过浏览器原生的change事件监听 -
<summary></summary>里写清已勾选数量，比如事件类型（3/68），用户一眼知道当前状态 - 折叠内容用
<fieldset></fieldset>包裹所有 checkbox，并设disabled属性控制可交互性，比 CSSdisplay:none更语义化 - 不要监听
toggle事件做异步加载——事件类型列表是静态配置，应随 HTML 一起输出，避免首屏交互延迟 - 渲染前统一 normalize：用
event.type || 'unknown'提供兜底值 - 勾选状态回填时，别直接比对字符串，用
includes()判断：selectedTypes.includes(event.type || '') - 如果后端返回的是嵌套结构（如
{ payload: { action: 'opened' }, event: 'issues' }），前端解析逻辑要和文档对齐，别硬猜字段路径
事件类型勾选结构必须用 <input type="checkbox"> + name 数组语义
别用 <div class="checkbox"> 模拟，否则表单提交或 JS 取值时会丢数据。原生 <code><input type="checkbox"> 的 name 属性天然支持同名多值，后端接收时自动转为数组（如 event_types[]=push&event_types[]=pull_request）。
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
勾选项过多时，<details><summary></summary></details> 比下拉菜单更轻量
如果事件类型超过 12 个（比如 GitHub 支持 70+ 种），强行平铺会挤占主列表空间。用原生 <details></details> 折叠比引入 Select2 或自定义下拉组件更简单、无依赖、无障碍友好。
实操注意点：
服务端返回的事件数据格式直接影响前端渲染健壮性
如果后端返回的 JSON 里事件类型字段叫 type，但某些旧事件缺这个字段，或值为 null，前端用 event.type.toLowerCase() 就会报 Cannot read property 'toLowerCase' of null。
安全做法：
最常被忽略的是事件类型的版本兼容性——比如 GitLab 15.0 把 note 拆成 note_hooks 和 note，前端若只认旧名，新事件就永远进不了勾选列表。
