129 lines
18 KiB
HTML
129 lines
18 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 交互原型，直接对齐 go-admin-ui 与 Element Plus">
|
||
<title>YoVision Bell · go-admin-ui 对齐原型</title>
|
||
<link rel="icon" href="data:,">
|
||
<link rel="stylesheet" href="../assets/styles.css">
|
||
<link rel="stylesheet" href="../assets/go-admin-ui.css">
|
||
<link rel="stylesheet" href="./bell.css">
|
||
</head>
|
||
<body class="go-admin-prototype bell-go-admin">
|
||
<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 0 0-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-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></symbol>
|
||
<symbol id="icon-refresh" viewBox="0 0 24 24"><path d="M20 6v5h-5M4 18v-5h5M18 9a7 7 0 0 0-12-2L4 11m16 2-2 4a7 7 0 0 1-12-2"/></symbol>
|
||
<symbol id="icon-fullscreen" viewBox="0 0 24 24"><path d="M8 3H3v5M16 3h5v5M8 21H3v-5M16 21h5v-5"/></symbol>
|
||
<symbol id="icon-user" viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></symbol>
|
||
<symbol id="icon-lock" viewBox="0 0 24 24"><rect x="5" y="10" width="14" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/></symbol>
|
||
<symbol id="icon-arrow" viewBox="0 0 24 24"><path d="M9 18l6-6-6-6"/></symbol>
|
||
</svg>
|
||
|
||
<a class="skip-link" href="#main-content">跳到主要内容</a>
|
||
<div class="app-shell go-admin-shell" data-go-admin-shell>
|
||
<aside class="sidebar sidebar-container" data-sidebar aria-label="Bell 主导航">
|
||
<a class="brand sidebar-logo" href="../index.html">
|
||
<span class="brand-mark">B</span>
|
||
<span class="brand-copy"><span class="brand-name">YoVision Bell</span><span class="brand-subtitle">事件预警与处置</span></span>
|
||
</a>
|
||
<nav class="side-nav el-menu" aria-label="预警处置菜单">
|
||
<div class="menu-group"><svg aria-hidden="true"><use href="#icon-bell"></use></svg><span>预警处置</span><svg class="menu-arrow" aria-hidden="true"><use href="#icon-arrow"></use></svg></div>
|
||
<button class="active el-menu-item" data-view-target="duty" data-title="实时值班台"><svg aria-hidden="true"><use href="#icon-bell"></use></svg><span>实时值班台</span></button>
|
||
<button class="el-menu-item" data-view-target="events" data-title="事件中心"><svg aria-hidden="true"><use href="#icon-file"></use></svg><span>事件中心</span></button>
|
||
<button class="el-menu-item" data-view-target="rules" data-title="规则策略"><svg aria-hidden="true"><use href="#icon-rule"></use></svg><span>规则策略</span></button>
|
||
</nav>
|
||
<div class="side-note"><strong>独立产品边界</strong><span>Bell 使用独立账户、会话和数据库；当前以合成事件验收，不接受 Sense 用户 token。</span></div>
|
||
</aside>
|
||
|
||
<div class="main-column main-container">
|
||
<div class="fixed-header">
|
||
<header class="topbar navbar">
|
||
<div class="topbar-left">
|
||
<button class="navbar-action mobile-menu" type="button" data-mobile-menu aria-label="打开主导航" aria-expanded="false"><svg aria-hidden="true"><use href="#icon-menu"></use></svg></button>
|
||
<button class="navbar-action desktop-collapse" type="button" data-collapse-sidebar aria-label="折叠主导航" aria-expanded="true"><svg aria-hidden="true"><use href="#icon-menu"></use></svg></button>
|
||
<nav class="breadcrumb" aria-label="面包屑"><a href="../index.html">YoVision</a><span>/</span><span>Bell</span><span>/</span><strong data-page-name>实时值班台</strong></nav>
|
||
</div>
|
||
<div class="topbar-actions right-menu">
|
||
<button class="navbar-action" type="button" data-toast="原型搜索仅演示入口，不发送请求" aria-label="全局搜索"><svg aria-hidden="true"><use href="#icon-search"></use></svg></button>
|
||
<button class="navbar-action desktop-only" type="button" data-toast="原型不切换浏览器全屏" aria-label="全屏"><svg aria-hidden="true"><use href="#icon-fullscreen"></use></svg></button>
|
||
<span class="prototype-pill">交互原型 · 非生产数据</span>
|
||
<button class="avatar-button" type="button" data-toast="当前原型用户：王值班员" aria-label="打开用户菜单"><span class="avatar"><svg aria-hidden="true"><use href="#icon-user"></use></svg></span><span class="desktop-only">王值班员</span></button>
|
||
</div>
|
||
</header>
|
||
<nav class="tags-view-container" aria-label="已访问页面">
|
||
<button class="tags-view-item active" data-view-target="duty" data-title="实时值班台" aria-current="page">实时值班台</button>
|
||
<button class="tags-view-item" data-view-target="events" data-title="事件中心">事件中心 <span aria-hidden="true">×</span></button>
|
||
<button class="tags-view-item" data-view-target="rules" data-title="规则策略">规则策略 <span aria-hidden="true">×</span></button>
|
||
</nav>
|
||
</div>
|
||
|
||
<main id="main-content" class="content app-main" tabindex="-1">
|
||
<section class="view active" data-view="duty">
|
||
<div class="page-header compact-header"><div><h1>实时值班台</h1><p>使用合成事件完成 Event → Rule → Alert → ack → close；原始 Event 始终保持不可变。</p></div><div class="page-actions"><button class="btn el-button el-button-primary" data-open-modal="inject-event" title="权限：bell:event:inject；仅开发测试"><svg aria-hidden="true"><use href="#icon-plus"></use></svg>注入合成事件</button></div></div>
|
||
<div class="metric-grid">
|
||
<article class="metric el-card"><div class="metric-label">待确认 Alert</div><div class="metric-value" data-alert-count>3</div><div class="metric-foot"><span class="status status-danger el-tag">1 高危</span></div></article>
|
||
<article class="metric el-card"><div class="metric-label">处理中</div><div class="metric-value">2</div><div class="metric-foot"><span>已明确处置人</span></div></article>
|
||
<article class="metric el-card"><div class="metric-label">今日关闭</div><div class="metric-value">18</div><div class="metric-foot"><strong>中位 3m 42s</strong></div></article>
|
||
<article class="metric el-card"><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 bell-workbench">
|
||
<article class="card el-card alert-workbench"><header class="card-header"><div><h2>待处置预警</h2><p class="card-subtitle">AlertWorkbench · Bell 业务专用组件</p></div><span class="status status-danger el-tag">3 待处理</span></header><div class="card-body alert-list" aria-label="待处置预警列表">
|
||
<button class="alert-row selected" type="button" data-select-alert="危险区域闯入"><span class="severity-bar"></span><span><strong class="alert-title">危险区域闯入</strong><span class="alert-meta"><span>北围墙 01</span><span>2 个 Event</span><span>未确认</span></span></span><time class="activity-time">10:24</time></button>
|
||
<button class="alert-row" type="button" data-select-alert="方向越线"><span class="severity-bar medium"></span><span><strong class="alert-title">反向越过警戒线</strong><span class="alert-meta"><span>宿舍东门 02</span><span>1 个 Event</span><span>处理中</span></span></span><time class="activity-time">10:19</time></button>
|
||
<button class="alert-row" type="button" data-select-alert="区域停留"><span class="severity-bar medium"></span><span><strong class="alert-title">危险区域持续停留</strong><span class="alert-meta"><span>食堂后门 01</span><span>3 个 Event</span><span>未确认</span></span></span><time class="activity-time">10:11</time></button>
|
||
</div></article>
|
||
<article class="card el-card alert-detail"><header class="card-header"><div><h2>危险区域闯入</h2><p class="card-subtitle">Alert BEL-A-20260812-0031</p></div><span class="status status-danger el-tag" data-alert-state>未确认</span></header><div class="card-body">
|
||
<div class="tabs el-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="description-list"><div class="description-row"><span>规则</span><strong>校园高危区域 · v4</strong></div><div class="description-row"><span>处置建议</span><strong>确认现场情况；如无法确认，联系校内保安巡查。</strong></div></div><div class="alert-actions"><button class="btn el-button el-button-primary" data-action="ack-alert" title="权限：bell:alert:ack">确认预警</button><button class="btn el-button" data-action="close-alert" title="权限：bell:alert:close" disabled>完成并关闭</button></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"><div><h3>审计时间线</h3><p class="card-subtitle">AlertAuditTimeline · Bell 业务专用组件</p></div></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 compact-header"><div><h1>事件中心</h1><p>结构化 Event 校验后不可修改；误报和处置结果记录在 Alert/审计事实中。</p></div></div>
|
||
<article class="card el-card box-card"><div class="card-body">
|
||
<form class="search-form el-form el-form-inline" data-go-admin-query data-query-input="#event-filter">
|
||
<div class="form-item"><label for="event-filter">事件关键字</label><input id="event-filter" class="input el-input" data-filter-input="#event-table" placeholder="Producer、Source ID 或规则"></div>
|
||
<div class="form-item"><label for="receipt-status">收据状态</label><select id="receipt-status" class="input el-select"><option>全部状态</option><option>首次接收</option><option>重复收据</option></select></div>
|
||
<div class="form-actions"><button class="btn el-button el-button-primary" type="submit"><svg aria-hidden="true"><use href="#icon-search"></use></svg>搜索</button><button class="btn el-button" type="reset"><svg aria-hidden="true"><use href="#icon-refresh"></use></svg>重置</button></div>
|
||
</form>
|
||
<div class="operation-bar"><div class="operation-actions"><button class="btn el-button el-button-primary" data-open-modal="inject-event" title="权限：bell:event:inject；仅开发测试"><svg aria-hidden="true"><use href="#icon-plus"></use></svg>注入合成事件</button><button class="btn el-button" disabled title="权限：bell:event:export；MVP 暂不开放"><svg aria-hidden="true"><use href="#icon-lock"></use></svg>导出</button></div><span class="permission-hint"><svg aria-hidden="true"><use href="#icon-lock"></use></svg>操作按钮受 RBAC 与环境开关双重控制</span></div>
|
||
<div class="table-wrap"><table id="event-table" class="el-table"><thead><tr><th>Event</th><th>Producer / Source ID</th><th>接收时间</th><th>收据</th><th>Alert</th><th>操作</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 el-tag">首次接收</span></td><td>BEL-A-0031</td><td><button class="btn btn-quiet el-button-link" data-toast="已打开 Event 与 Alert 导航链路">查看链路</button></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 el-tag">重复收据</span></td><td>未重复创建</td><td><button class="btn btn-quiet el-button-link" data-toast="已打开永久幂等收据">查看收据</button></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 el-tag">首次接收</span></td><td>BEL-A-0029</td><td><button class="btn btn-quiet el-button-link" data-toast="已打开 Event 与 Alert 导航链路">查看链路</button></td></tr>
|
||
</tbody></table></div>
|
||
<nav class="pagination-container el-pagination" aria-label="事件列表分页"><span class="pagination-total">共 3 条</span><button type="button" disabled aria-label="上一页">‹</button><button type="button" class="active" aria-current="page">1</button><button type="button" disabled aria-label="下一页">›</button><select class="pagination-size" aria-label="每页条数"><option>10 条/页</option><option>20 条/页</option></select></nav>
|
||
</div></article>
|
||
</section>
|
||
|
||
<section class="view" data-view="rules" hidden>
|
||
<div class="page-header compact-header"><div><h1>规则策略</h1><p>MVP 仅展示事件到 Alert 的基本匹配；自动升级、通知和排班属于后续阶段。</p></div></div>
|
||
<article class="card el-card box-card"><div class="card-body"><div class="operation-bar"><div class="operation-actions"><button class="btn el-button el-button-primary" data-toast="已创建规则草稿，不影响当前发布版本" title="权限：bell:rule:add"><svg aria-hidden="true"><use href="#icon-plus"></use></svg>新建规则草稿</button><button class="btn el-button" disabled title="请先选择规则">批量停用</button></div><span class="permission-hint"><svg aria-hidden="true"><use href="#icon-lock"></use></svg>发布版本不可直接修改</span></div>
|
||
<div class="table-wrap"><table class="el-table"><thead><tr><th>规则名称</th><th>发布版本</th><th>匹配条件</th><th>Alert 严重度</th><th>状态</th><th>操作</th></tr></thead><tbody><tr><td><span class="table-title">校园高危区域</span></td><td>v4</td><td>event.type = zone_intrusion</td><td><span class="status status-danger el-tag">高危</span></td><td><span class="status status-success el-tag">生效</span></td><td><button class="btn btn-quiet el-button-link" data-toast="已进入校园高危区域规则草稿">编辑草稿</button></td></tr><tr><td><span class="table-title">方向越线</span></td><td>v2</td><td>event.type = line_crossing</td><td><span class="status status-warning el-tag">中危</span></td><td><span class="status status-success el-tag">生效</span></td><td><button class="btn btn-quiet el-button-link" data-toast="已进入方向越线规则草稿">编辑草稿</button></td></tr></tbody></table></div>
|
||
</div></article>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-backdrop el-overlay" id="inject-event" aria-hidden="true">
|
||
<section class="modal el-dialog" role="dialog" aria-modal="true" aria-labelledby="inject-title">
|
||
<header class="modal-header el-dialog-header"><h2 id="inject-title">注入合成事件</h2><button class="btn btn-icon btn-quiet dialog-close" data-close-modal aria-label="关闭合成事件窗口">×</button></header>
|
||
<div class="modal-body el-dialog-body"><div class="boundary-note dev-only-note">该入口仅用于开发测试；生产构建必须通过环境开关移除。</div><form class="el-form vertical-form"><div class="form-item"><label for="synthetic-type">事件类型</label><select id="synthetic-type" class="input el-select"><option>危险区域进入</option><option>方向越线</option></select></div><div class="form-item"><label for="synthetic-producer">Producer identity</label><input id="synthetic-producer" class="input el-input" value="producer-lab" readonly></div><div class="form-item"><label for="synthetic-source">Source event ID</label><input id="synthetic-source" class="input el-input" value="evt-demo-0001"></div></form></div>
|
||
<footer class="modal-footer el-dialog-footer"><button class="btn el-button" data-close-modal>取消</button><button class="btn el-button el-button-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>
|
||
<script src="../assets/go-admin-shell.js"></script>
|
||
</body>
|
||
</html>
|