63 lines
12 KiB
HTML
63 lines
12 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="description" content="YoVision Bell 当前 MVP 交互原型">
|
||
<title>YoVision Bell · 当前 MVP 原型</title>
|
||
<link rel="stylesheet" href="../assets/styles.css">
|
||
</head>
|
||
<body>
|
||
<svg class="sr-only" aria-hidden="true">
|
||
<symbol id="icon-menu" viewBox="0 0 24 24"><path d="M4 7h16M4 12h16M4 17h16"/></symbol>
|
||
<symbol id="icon-bell" viewBox="0 0 24 24"><path d="M18 8a6 6 0 00-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4"/></symbol>
|
||
<symbol id="icon-file" viewBox="0 0 24 24"><path d="M6 2h8l4 4v16H6zM14 2v5h5M9 13h6m-6 4h6"/></symbol>
|
||
<symbol id="icon-rule" viewBox="0 0 24 24"><path d="M4 6h10m4 0h2M4 12h3m4 0h9M4 18h7m4 0h5"/><circle cx="16" cy="6" r="2"/><circle cx="9" cy="12" r="2"/><circle cx="13" cy="18" r="2"/></symbol>
|
||
<symbol id="icon-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
|
||
<symbol id="icon-activity" viewBox="0 0 24 24"><path d="M3 12h4l2-7 4 14 2-7h6"/></symbol>
|
||
</svg>
|
||
<a class="skip-link" href="#main-content">跳到主要内容</a>
|
||
<div class="app-shell">
|
||
<aside class="sidebar" data-sidebar aria-label="Bell 主导航">
|
||
<a class="brand" href="../index.html" style="text-decoration:none"><span class="brand-mark">B</span><span><span class="brand-name">YoVision Bell</span><span class="brand-subtitle">事件预警与处置</span></span></a>
|
||
<div class="side-label">值班工作区</div>
|
||
<nav class="side-nav">
|
||
<button class="active" data-view-target="duty" data-title="实时值班台"><svg aria-hidden="true"><use href="#icon-bell"></use></svg>实时值班台</button>
|
||
<button data-view-target="events" data-title="事件中心"><svg aria-hidden="true"><use href="#icon-file"></use></svg>事件中心</button>
|
||
<button data-view-target="rules" data-title="规则策略"><svg aria-hidden="true"><use href="#icon-rule"></use></svg>规则策略</button>
|
||
</nav>
|
||
<div class="side-note"><strong>独立产品边界</strong>Bell 使用自己的账户、会话和数据库。当前通过合成事件验收，不接受 Sense 用户 token。</div>
|
||
</aside>
|
||
<div class="main-column">
|
||
<header class="topbar"><div class="topbar-left"><button class="btn btn-icon mobile-menu" data-mobile-menu aria-label="打开主导航" aria-expanded="false"><svg aria-hidden="true"><use href="#icon-menu"></use></svg></button><div><div class="page-eyebrow">青藤学校 · Bell 值班账号</div><h2 class="page-name" data-page-name>实时值班台</h2></div></div><div class="topbar-actions"><span class="prototype-pill">交互原型 · 非生产数据</span><a class="btn" href="../index.html">返回原型入口</a></div></header>
|
||
<main id="main-content" class="content" tabindex="-1">
|
||
<section class="view active" data-view="duty">
|
||
<div class="page-header"><div><h1>实时值班台</h1><p>使用合成事件完成 Event → Rule → Alert → ack → close；原始 Event 始终保持不可变。</p></div><div class="page-actions"><button class="btn btn-primary" data-open-modal="inject-event"><svg aria-hidden="true"><use href="#icon-plus"></use></svg>注入合成事件</button></div></div>
|
||
<div class="metric-grid"><article class="metric"><div class="metric-label">待确认 Alert</div><div class="metric-value" data-alert-count>3</div><div class="metric-foot"><span class="status status-danger">1 高危</span></div></article><article class="metric"><div class="metric-label">处理中</div><div class="metric-value">2</div><div class="metric-foot"><span>已明确处置人</span></div></article><article class="metric"><div class="metric-label">今日关闭</div><div class="metric-value">18</div><div class="metric-foot"><strong>中位 3m 42s</strong></div></article><article class="metric"><div class="metric-label">重复收据</div><div class="metric-value">6</div><div class="metric-foot"><span>均未重复建 Alert</span></div></article></div>
|
||
<div class="grid grid-2">
|
||
<div class="stack" aria-label="待处置预警列表">
|
||
<article class="alert-row selected" role="button" tabindex="0" data-select-alert="危险区域闯入"><span class="severity-bar"></span><div><div class="alert-title">危险区域闯入</div><div class="alert-meta"><span>北围墙 01</span><span>2 个关联 Event</span><span>未确认</span></div></div><span class="activity-time">10:24</span></article>
|
||
<article class="alert-row" role="button" tabindex="0" data-select-alert="方向越线"><span class="severity-bar medium"></span><div><div class="alert-title">反向越过警戒线</div><div class="alert-meta"><span>宿舍东门 02</span><span>1 个 Event</span><span>处理中</span></div></div><span class="activity-time">10:19</span></article>
|
||
<article class="alert-row" role="button" tabindex="0" data-select-alert="区域停留"><span class="severity-bar medium"></span><div><div class="alert-title">危险区域持续停留</div><div class="alert-meta"><span>食堂后门 01</span><span>3 个关联 Event</span><span>未确认</span></div></div><span class="activity-time">10:11</span></article>
|
||
</div>
|
||
<article class="card"><header class="card-header"><div><h2>危险区域闯入</h2><p class="card-subtitle">Alert BEL-A-20260812-0031</p></div><span class="status status-danger" data-alert-state>未确认</span></header><div class="card-body">
|
||
<div class="tabs" role="tablist" data-tabs aria-label="预警详情"><button role="tab" aria-selected="true" data-tab-target="alert-summary">处置摘要</button><button role="tab" aria-selected="false" tabindex="-1" data-tab-target="alert-events">关联 Event</button></div>
|
||
<div id="alert-summary" class="tab-panel active"><div class="stack"><div><span class="metric-label">规则</span><div class="table-title">校园高危区域 · v4</div></div><div><span class="metric-label">处置建议</span><div>确认现场情况；如无法确认，联系校内保安巡查。</div></div><div class="inline"><button class="btn btn-primary" data-action="ack-alert">确认预警</button><button class="btn" data-action="close-alert" disabled>完成并关闭</button></div></div></div>
|
||
<div id="alert-events" class="tab-panel" hidden><div class="activity-list"><div class="activity-item"><div class="activity-icon"><svg aria-hidden="true"><use href="#icon-file"></use></svg></div><div><div class="activity-title">producer-lab / evt-000041</div><div class="activity-meta">不可变 Event · 10:23:48 · 证据引用可用</div></div></div><div class="activity-item"><div class="activity-icon"><svg aria-hidden="true"><use href="#icon-file"></use></svg></div><div><div class="activity-title">producer-lab / evt-000042</div><div class="activity-meta">不可变 Event · 10:23:55 · 同一 Alert 聚合</div></div></div></div></div>
|
||
</div><header class="card-header"><h3>审计时间线</h3></header><div class="card-body timeline" data-alert-timeline><div class="timeline-item"><div class="timeline-title">规则命中并创建 Alert</div><div class="timeline-meta">10:23:56 · system · 规则 v4</div></div><div class="timeline-item"><div class="timeline-title">值班台已显示</div><div class="timeline-meta">10:23:57 · sent/seen 与 ack 分离</div></div></div></article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="view" data-view="events" hidden><div class="page-header"><div><h1>事件中心</h1><p>结构化 Event 校验后不可修改；误报和处置结果记录在 Alert/审计事实中。</p></div><div class="page-actions"><button class="btn btn-primary" data-open-modal="inject-event">注入合成事件</button></div></div><article class="card"><div class="card-body"><div class="toolbar"><div class="field grow"><label for="event-filter">搜索事件</label><input id="event-filter" class="input" data-filter-input="#event-table" placeholder="producer、source event ID 或规则"></div><div class="field"><label for="receipt-status">收据状态</label><select id="receipt-status" class="input"><option>全部</option><option>首次接收</option><option>重复收据</option></select></div></div><div class="table-wrap"><table id="event-table"><thead><tr><th>Event</th><th>Producer / Source ID</th><th>接收时间</th><th>收据</th><th>Alert</th></tr></thead><tbody><tr><td><span class="table-title">危险区域进入</span><span class="table-subtitle">结构化事实已冻结</span></td><td>producer-lab / evt-000042</td><td>10:23:55</td><td><span class="status status-success">首次接收</span></td><td>BEL-A-0031</td></tr><tr><td><span class="table-title">危险区域进入</span><span class="table-subtitle">正文与首次一致</span></td><td>producer-lab / evt-000042</td><td>10:24:03</td><td><span class="status status-neutral">重复收据</span></td><td>未重复创建</td></tr><tr><td><span class="table-title">方向越线</span><span class="table-subtitle">结构化事实已冻结</span></td><td>producer-lab / evt-000039</td><td>10:19:12</td><td><span class="status status-success">首次接收</span></td><td>BEL-A-0029</td></tr></tbody></table></div></div></article></section>
|
||
|
||
<section class="view" data-view="rules" hidden><div class="page-header"><div><h1>规则策略</h1><p>MVP 仅展示事件到 Alert 的基本匹配；自动升级、通知和排班属于后续阶段。</p></div><div class="page-actions"><button class="btn btn-primary" data-toast="已创建规则草稿，不影响当前发布版本">新建规则草稿</button></div></div><div class="grid grid-even"><article class="card"><header class="card-header"><div><h2>校园高危区域</h2><p class="card-subtitle">发布版本 v4</p></div><span class="status status-success">生效</span></header><div class="card-body stack"><div><span class="metric-label">匹配条件</span><div class="table-title">event.type = zone_intrusion</div></div><div><span class="metric-label">Alert 严重度</span><div class="table-title">高危</div></div><button class="btn" data-toast="已进入校园高危区域规则草稿">编辑草稿</button></div></article><article class="card"><header class="card-header"><div><h2>方向越线</h2><p class="card-subtitle">发布版本 v2</p></div><span class="status status-success">生效</span></header><div class="card-body stack"><div><span class="metric-label">匹配条件</span><div class="table-title">event.type = line_crossing</div></div><div><span class="metric-label">Alert 严重度</span><div class="table-title">中危</div></div><button class="btn" data-toast="已进入方向越线规则草稿">编辑草稿</button></div></article></div></section>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-backdrop" id="inject-event" aria-hidden="true"><section class="modal" role="dialog" aria-modal="true" aria-labelledby="inject-title"><header class="modal-header"><h2 id="inject-title">注入合成事件</h2><button class="btn btn-icon btn-quiet" data-close-modal aria-label="关闭合成事件窗口">×</button></header><div class="modal-body stack"><div class="boundary-note" style="margin:0">该入口仅用于开发测试，生产环境必须禁用。</div><div class="field"><label for="synthetic-type">事件类型</label><select id="synthetic-type" class="input"><option>危险区域进入</option><option>方向越线</option></select></div><div class="field"><label for="synthetic-producer">Producer identity</label><input id="synthetic-producer" class="input" value="producer-lab" readonly></div><div class="field"><label for="synthetic-source">Source event ID</label><input id="synthetic-source" class="input" value="evt-demo-0001"></div></div><footer class="modal-footer"><button class="btn" data-close-modal>取消</button><button class="btn btn-primary" data-action="inject-event">注入合成事件</button></footer></section></div>
|
||
<div class="toast-region" data-toast-region aria-live="polite"></div>
|
||
<script src="../assets/app.js"></script>
|
||
</body>
|
||
</html>
|