From 5251199205d25eec5b544e7556e9f1426c7f8019 Mon Sep 17 00:00:00 2001 From: ila Date: Tue, 4 Aug 2026 09:04:52 +0800 Subject: [PATCH] docs(design): update Bell workflow --- docs/design/bell/index.html | 187 ++++++++---------------------------- 1 file changed, 42 insertions(+), 145 deletions(-) diff --git a/docs/design/bell/index.html b/docs/design/bell/index.html index 496057e..eaceefe 100644 --- a/docs/design/bell/index.html +++ b/docs/design/bell/index.html @@ -70,7 +70,7 @@ .site strong { display: block; font-size: 15px; } .site span { color: var(--muted); font-size: 12px; } .top-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; } - .btn { min-height: 40px; border: 1px solid var(--line); border-radius: 9px; padding: 8px 13px; background: var(--surface-2); color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 750; transition: .2s ease; } + .btn { min-height: 40px; border: 1px solid var(--line); border-radius: 9px; padding: 8px 13px; background: var(--surface-2); color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 750; text-decoration: none; transition: .2s ease; } .btn:hover { border-color: var(--primary); } .btn:disabled { cursor: not-allowed; opacity: .5; } .btn-primary { background: var(--primary-strong); border-color: var(--primary-strong); color: white; } @@ -173,6 +173,14 @@ .rule-card p { margin: 0 0 14px; color: var(--muted); } .rule-card dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 7px; color: var(--muted); } .rule-card dd { margin: 0; color: var(--text); } + .rule-card-actions { margin-top: 14px; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 7px; border-top: 1px solid var(--line); } + .rule-context { margin-bottom: 12px; padding: 11px 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid rgba(56,189,248,.34); border-radius: 10px; background: rgba(56,189,248,.08); } + .rule-context[hidden] { display: none; } + .rule-context p { margin: 0; color: var(--muted); } + .linked-zone { grid-column: 1/-1; padding: 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); } + .linked-zone strong, .linked-zone small { display: block; } + .linked-zone small { color: var(--muted); } + .workflow-note { grid-column: 1/-1; margin: 0; padding: 10px 11px; border-left: 3px solid var(--primary); background: var(--primary-soft); color: var(--muted); font-size: 12px; } .chain-grid { grid-template-columns: minmax(0, 1.4fr) minmax(300px, .8fr); } .chain-row { padding: 13px 14px; display: grid; grid-template-columns: 40px 1fr auto; gap: 11px; align-items: center; border-bottom: 1px solid var(--line); } .chain-row:last-child { border-bottom: 0; } @@ -199,6 +207,7 @@ .skeleton i:nth-child(2) { width: 72%; } @keyframes shimmer { to { background-position: -200% 0; } } dialog { width: min(610px, calc(100% - 28px)); max-height: 88dvh; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: 0 24px 80px rgba(0,0,0,.5); } + #ruleDialog { width: min(760px, calc(100% - 28px)); } dialog::backdrop { background: rgba(4,7,15,.68); backdrop-filter: blur(4px); } .dialog-head, .dialog-foot { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .dialog-head h2 { margin: 0; font-size: 17px; } @@ -221,150 +230,8 @@ .nav .count { position: absolute; margin: -24px 0 0 25px; } .duty-grid { grid-template-columns: 285px minmax(390px, 1fr); } .action-panel { grid-column: 1/-1; } - .action-scroll { max-height: none; display: grid; grid-template-columns: repeat(3, 1fr); } - .disposition { border-top: 0; border-left: 1px solid var(--line); } - } - @media (max-width: 850px) { - :root { --sidebar: 0px; } - .app { display: block; padding-bottom: 66px; } - .sidebar { display: none; } - .topbar { padding: 8px 12px; } - .site span, .top-actions .select { display: none; } - .content { padding: 12px; } - .duty-grid, .chain-grid, .chart-grid { grid-template-columns: 1fr; } - .alert-list, .action-scroll { max-height: none; } - .action-scroll { display: block; } - .disposition { border-left: 0; border-top: 1px solid var(--line); } - .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } - .rule-grid { grid-template-columns: 1fr 1fr; } - .fact-grid { grid-template-columns: repeat(2, 1fr); } - .mobile-nav { position: fixed; z-index: 50; left: 8px; right: 8px; bottom: 8px; display: grid; grid-template-columns: repeat(5, 1fr); padding: 5px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); } - .mobile-nav button { min-height: 48px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); display: grid; place-items: center; font-size: 11px; } - .mobile-nav button.active { color: #c9c1ff; background: var(--primary-soft); } - } - @media (max-width: 560px) { - .page-head { display: grid; } - .stats, .rule-grid { grid-template-columns: 1fr; } - .form-grid { grid-template-columns: 1fr; } - .form-field.full { grid-column: auto; } - .video-stage { margin-inline: 8px; } - .fact-grid { margin-inline: 8px; } - .evidence-summary { display: grid; } - .disposition-actions { grid-template-columns: 1fr; } - } - @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } - - - - - -
PROTOTYPE - 仅供枚举交互，非实现依据
-
- - -
-
-
青藤寄宿学校 · 值班中心客户侧私有实例 · 当前仅匿名安全规则
-
- - - -
-
- -
-
- -
-

实时值班台

先确认高危预警，再查看证据与升级状态；重复投递不会生成重复处置。

值班组在线
-
-
-

待处置预警

6 个未 ack
-
-
-
- -
-
高危 · S1

危险区域闯入

北围墙 01 · 23:14:08 · EVT-01J8…7A2

-
-
- - - person · 0.92北围墙 01 · 事件片段事发前 8s · 事发后 12s · 匿名目标 - -
00:11 / 00:20
-
-
-
规则非授权人员进入
置信度0.92
持续时间8.4s
证据状态已校验
-
-
仅显示与本事件关联的 20 秒证据。常态录像仍在客户 NVR，本页不暴露流地址或摄像头凭据。
-
- - -
-
- -
-

事件中心

事件是不可变事实；预警与处置结果作为关联记录单独展示。

-
-
今日事件47较昨日 -8%
已触发预警18规则命中后独立创建
误报反馈5进入标注队列
证据可用率97.9%1 个片段可重试
-
-
共 47 条
- - - -
事件编号时间点位规则事实预警结果证据
EVT-01J8…7A223:14:08北围墙 01非授权人员进入已确认Alert #1842处置中可用
EVT-01J8…69P22:48:31宿舍东通道区域聚集已记录未触发试运行样本可用
EVT-01J8…52C22:19:04实验楼入口危险区域闯入已确认Alert #1839误报重试中
-
- -
-

规则策略

继承来源、试运行和正式发布清晰分开；空间区域在 Sense 编辑。

-
-
正式生效

非授权人员进入

危险区域 × 全天 × 持续 3 秒

覆盖范围
4 个点位
继承来源
站点模板
今日命中
8
-
试运行

区域内聚集

人数 ≥ 6 × 持续 20 秒 × 夜间

覆盖范围
3 个点位
继承来源
设备覆盖
样本命中
14
-
草稿

方向越线

警戒线 A → B × 上学时段

覆盖范围
1 个点位
继承来源
设备草稿
最近修改
2h 前
+ .action-scroll { max-height: none; display: grid; grid-template-columns: rep…4257 tokens truncated…t>覆盖范围
3 个点位
检测区域
3 个区域版本
继承来源
设备覆盖
样本命中
14
+
草稿

方向越线

警戒线 A → B × 上学时段

覆盖范围
1 个点位
检测区域
宿舍东通道 · 警戒线 v3
继承来源
设备草稿
最近修改
2h 前
查看警戒线
@@ -394,6 +261,18 @@ +

配置告警规则

规则草稿 · 尚未正式生效
+
+
+
+
+
空间坐标由摄像头详情维护区域版本变化不会绕过规则试运行或自动正式发布。编辑检测区域
+
+
+
+

产品流程：先确认摄像头和检测区域，再配置业务条件；试运行样本达到现场评审要求后，才允许正式发布。

+
+

标记为误报

这只会追加事件 outcome，不会修改原始事件事实和证据。

创建限时静默

到期自动恢复；S1 高危事件与设备离线运维告警不受此静默影响。

 @@ -436,8 +315,26 @@ $('#muteButton').addEventListener('click',()=>$('#muteDialog').showModal()); $('#confirmMute').addEventListener('click',e=>{if(!$('#muteCause').value.trim()){e.preventDefault();notify('请填写静默原因。');$('#muteCause').focus();return;}notify('已创建限时静默，到期将自动恢复并通知值班组。');}); + const ruleDialog = $('#ruleDialog'); + function openRuleEditor() { ruleDialog.showModal(); } + $('#openRuleDialog').addEventListener('click', openRuleEditor); + $('#continueRuleDraft').addEventListener('click', openRuleEditor); + $$('[data-edit-rule]').forEach(button=>button.addEventListener('click', openRuleEditor)); + $('#ruleCamera').addEventListener('change',e=>{ $('#editRuleZone').href=`../sense/index.html?view=device-detail&camera=${encodeURIComponent(e.target.value)}&return=bell-rule`; notify('已切换摄像头，请确认检测区域版本与画面仍匹配。'); }); + $('#saveRuleDraft').addEventListener('click',()=>notify($('#startDryRun').checked?'规则草稿已保存并进入试运行，不会触发正式预警。':'规则草稿已保存，尚未开始试运行。')); + $('#publishTrialRule').addEventListener('click',()=>{if(confirm('正式发布后将影响 3 个点位并启动预警链。确认发布当前试运行版本？')){$('#trialBadge').className='badge success';$('#trialBadge').textContent='正式生效';notify('规则版本已正式发布，变更已记录审计并可回滚。');}}); + let remain=102; setInterval(()=>{if($('#ackState').textContent==='已 ack'||remain<=0)return;remain--;const m=String(Math.floor(remain/60)).padStart(2,'0'),s=String(remain%60).padStart(2,'0');$('#countdown').textContent=`${m}:${s}`;},1000); + const routeParams = new URLSearchParams(location.search); + if (routeParams.get('view')) switchView(routeParams.get('view')); + if (routeParams.has('camera')) { + switchView('rules'); $('#ruleContext').hidden=false; + const camera=routeParams.get('camera'); if([...$('#ruleCamera').options].some(option=>option.value===camera)) $('#ruleCamera').value=camera; + $('#editRuleZone').href=`../sense/index.html?view=device-detail&camera=${encodeURIComponent(camera)}&return=bell-rule`; + notify('已保留摄像头与检测区域上下文，可继续配置规则。'); + } +