docs(design): close Sense second-review gaps

docs/design/bell/index.html

@@ -41,6 +41,7 @@
       --shadow: 0 14px 34px rgba(32, 52, 78, .12);
     }
     * { box-sizing: border-box; }
+    [hidden] { display: none !important; }
     html { min-width: 320px; background: var(--bg); }
     body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text); font: 14px/1.5 Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
     button, input, select, textarea { font: inherit; }
@@ -177,6 +178,14 @@
     .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); }
+    .site-grid { grid-template-columns: minmax(260px,.72fr) minmax(520px,1.45fr); }
+    .site-list { padding: 8px; display: grid; gap: 7px; }
+    .site-item { width: 100%; min-height: 62px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); color: var(--text); display: flex; justify-content: space-between; align-items: center; gap: 10px; text-align: left; }
+    .site-item.active { border-color: var(--primary); background: var(--primary-soft); }
+    .site-item small { display: block; color: var(--muted); }
+    .policy-note { margin: 12px 14px 0; padding: 10px 12px; border-left: 3px solid var(--warning); background: rgba(251,191,36,.08); color: var(--muted); }
+    .context-strip { margin-bottom: 12px; padding: 11px 13px; border: 1px solid rgba(56,189,248,.34); border-radius: 10px; background: rgba(56,189,248,.08); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+    .context-strip 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); }
@@ -217,6 +226,7 @@
     .form-field { display: grid; gap: 6px; }
     .form-field.full { grid-column: 1/-1; }
     .form-field label { color: var(--muted); font-size: 12px; font-weight: 700; }
+    .radio-card { display: block; margin-bottom: 9px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2); }
     .toast { position: fixed; right: 20px; bottom: 20px; z-index: 1100; max-width: min(420px, calc(100% - 40px)); padding: 12px 14px; border: 1px solid rgba(52,211,153,.35); border-radius: 10px; background: #0b2c25; color: #d9fff3; box-shadow: var(--shadow); transform: translateY(20px); opacity: 0; pointer-events: none; transition: .2s ease; }
     .toast.show { transform: none; opacity: 1; }
     .muted { color: var(--muted); }
@@ -240,11 +250,14 @@
       .topbar { padding: 8px 12px; }
       .site span, .top-actions .select { display: none; }
       .content { padding: 12px; }
+      .btn, .select, .field, .textarea { min-height: 44px; }
+      .icon-btn { min-width: 44px; }
       .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)); }
+      .site-grid { grid-template-columns: 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); }
@@ -296,6 +309,7 @@
         <button data-view="rules"><svg class="icon"><use href="#i-rule"/></svg><span>规则策略</span></button>
         <button data-view="chains"><svg class="icon"><use href="#i-phone"/></svg><span>升级链</span></button>
         <button data-view="reports"><svg class="icon"><use href="#i-chart"/></svg><span>运营报表</span></button>
+        <button data-view="sites"><svg class="icon"><use href="#i-rule"/></svg><span>站点与 Area</span></button>
         <button data-view="audit"><svg class="icon"><use href="#i-shield"/></svg><span>审计日志</span></button>
       </nav>
       <div class="shift-card"><strong>安保值班组 · 白班</strong><span>08:00–20:00 · 4 人在线</span><div class="shift-bar"><i></i></div></div>
@@ -303,7 +317,7 @@
 
     <main class="main" id="main-content" tabindex="-1">
       <header class="topbar">
-        <div class="site"><strong>青藤寄宿学校 · 值班中心</strong><span>客户侧私有实例 · 当前仅匿名安全规则</span></div>
+        <div class="site"><strong>青藤教育集团 · 青藤寄宿学校</strong><span>当前账号：林工 · 租户管理员 · Asia/Shanghai</span></div>
         <div class="top-actions">
           <select class="select" id="stateSelect" aria-label="原型状态演示"><option value="normal">正常状态</option><option value="loading">加载中</option><option value="weak">弱网 / 证据失败</option><option value="empty">队列为空</option><option value="denied">无权限</option></select>
           <button class="btn icon-btn" id="themeToggle" aria-label="切换明暗主题" title="切换明暗主题"><svg class="icon"><use href="#i-sun"/></svg></button>
@@ -319,13 +333,13 @@
           <div class="duty-grid">
             <section class="card queue" aria-label="待处置预警队列">
               <div class="card-head"><h2>待处置预警</h2><span class="badge danger">6 个未 ack</span></div>
-              <div class="queue-head"><div class="queue-tabs" role="tablist"><button class="active" role="tab" aria-selected="true">全部 9</button><button role="tab">高危 3</button><button role="tab">我的 2</button></div></div>
+              <div class="queue-head"><div class="queue-tabs" aria-label="预警队列筛选"><button class="active" aria-pressed="true">全部 9</button><button aria-pressed="false">高危 3</button><button aria-pressed="false">我的 2</button></div></div>
               <div class="alert-list" id="alertList"></div>
             </section>
 
             <section class="card evidence" aria-label="事件事实与证据">
               <div class="evidence-summary"><div><span class="badge danger" id="selectedSeverity">高危 · S1</span><h2 id="selectedTitle">危险区域闯入</h2><p id="selectedMeta">北围墙 01 · 23:14:08 · EVT-01J8…7A2</p></div><button class="btn icon-btn" aria-label="更多事件操作"><svg class="icon"><use href="#i-more"/></svg></button></div>
-              <div class="evidence-tabs" role="tablist"><button class="active" role="tab" aria-selected="true">视频片段</button><button role="tab">抓拍 2</button><button role="tab">结构化事实</button></div>
+              <div class="evidence-tabs" aria-label="证据类型筛选"><button class="active" aria-pressed="true">视频片段</button><button aria-pressed="false">抓拍 2</button><button aria-pressed="false">结构化事实</button></div>
               <div class="video-stage" id="videoStage">
                 <svg viewBox="0 0 960 540" role="img" aria-label="北围墙 01 事件视频模拟画面，匿名目标进入危险区域">
                   <defs><linearGradient id="bellSky" x1="0" y1="0" x2="0" y2="1"><stop stop-color="#102337"/><stop offset="1" stop-color="#060a11"/></linearGradient><pattern id="bellScan" width="8" height="8" patternUnits="userSpaceOnUse"><path d="M0 8h8" stroke="#fff" stroke-opacity=".035"/></pattern></defs>
@@ -392,9 +406,17 @@
           <div class="grid chart-grid"><article class="card chart"><h2>近 7 日预警量</h2><p>按站点日期汇总；可切换到每路每天误报数。</p><div class="bars" role="img" aria-label="近七日预警量依次为 18、22、15、31、27、24、19"><div class="bar" style="--h:58%"><span>周一</span></div><div class="bar" style="--h:70%"><span>周二</span></div><div class="bar" style="--h:48%"><span>周三</span></div><div class="bar" style="--h:100%"><span>周四</span></div><div class="bar" style="--h:87%"><span>周五</span></div><div class="bar" style="--h:77%"><span>周六</span></div><div class="bar" style="--h:61%"><span>周日</span></div></div></article><article class="card chart"><h2>处置结果</h2><p>本月已闭环事件。</p><div class="donut" role="img" aria-label="正常处置 61%，误报 22%，升级未闭环 17%"></div><div class="legend"><span><i style="background:var(--success)"></i>正常处置 61%</span><span><i style="background:var(--warning)"></i>误报 22%</span><span><i style="background:var(--danger)"></i>未闭环 17%</span></div></article></div>
         </section>
 
+        <section class="view" data-page="sites">
+          <div class="page-head"><div><h1>站点与 Area</h1><p>Bell 是 Tenant、Site、Area、配额与隐私准入策略的唯一真相源；Sense 只消费版本化投影。</p></div><div class="page-actions"><button class="btn">管理角色权限</button><button class="btn btn-primary" id="newSite">新建站点</button></div></div>
+          <div class="grid stats"><article class="card stat"><span>租户</span><strong>1</strong><span class="muted">青藤教育集团</span></article><article class="card stat"><span>站点</span><strong>2</strong><span class="muted">1 个试点中</span></article><article class="card stat"><span>视频配额</span><strong>16 / 128</strong><span class="muted">默认 16，不是硬上限</span></article><article class="card stat"><span>策略投影</span><strong>v42</strong><span class="muted">Sense 2 分钟前已同步</span></article></div>
+          <div class="grid site-grid"><article class="card"><div class="card-head"><h2>站点</h2><button class="btn btn-quiet">筛选</button></div><div class="site-list"><button class="site-item active"><span><strong>青藤寄宿学校</strong><small>site-ivy · S2 校园包</small></span><span class="badge success">启用</span></button><button class="site-item"><span><strong>城东试验点</strong><small>site-east · 未绑定场景包</small></span><span class="badge warning">准备中</span></button></div></article>
+            <article class="card"><div class="card-head"><div><h2>青藤寄宿学校 · Area</h2><span class="muted">层级、报表口径和设备准入共用同一逻辑 ID</span></div><button class="btn btn-primary" id="newArea">新建 Area</button></div><div class="policy-note"><strong>策略变更不会静默处置已有设备。</strong> 若改为“仅非成像”且 Area 内已有摄像头，必须显式迁移设备或取消变更。</div><div class="table-wrap"><table><thead><tr><th>Area</th><th>父级</th><th>capture_policy</th><th>设备</th><th>策略版本</th><th>投影状态</th><th>操作</th></tr></thead><tbody><tr><td><strong>北围墙</strong><br><span class="muted">area-north-wall</span></td><td>校园</td><td><span class="badge success">允许成像</span></td><td>4 视频</td><td>v42</td><td><span class="badge success">已同步</span></td><td><button class="btn" data-edit-area="north">编辑策略</button></td></tr><tr><td><strong>宿舍卧室</strong><br><span class="muted">area-dorm-room</span></td><td>宿舍楼</td><td><span class="badge warning">仅非成像</span></td><td>0 视频 · 1 雷达规划</td><td>v38</td><td><span class="badge success">已同步</span></td><td><button class="btn" data-edit-area="dorm">编辑策略</button></td></tr><tr><td><strong>实验楼入口</strong><br><span class="muted">area-lab-gate</span></td><td>实验楼</td><td><span class="badge success">允许成像</span></td><td>2 视频</td><td>v41</td><td><span class="badge warning">待 Sense 拉取</span></td><td><button class="btn" data-edit-area="lab">编辑策略</button></td></tr></tbody></table></div></article></div>
+        </section>
+
         <section class="view" data-page="audit">
+          <div class="context-strip" id="auditContext" hidden><p><strong>来自 Sense 设备日志：</strong>租户 <span id="auditTenant">—</span> · 站点 <span id="auditSite">—</span> · 设备 <span id="auditDevice">—</span>。已锁定筛选上下文。</p><a class="btn" id="auditReturn" href="../sense/index.html?view=device-detail">返回设备详情 ↗</a></div>
           <div class="page-head"><div><h1>审计日志</h1><p>查询、ack、规则发布和证据下载均可追溯；不记录密码与可复用连接串。</p></div><div class="page-actions"><button class="btn">导出审计记录</button></div></div>
-          <article class="card"><div class="card-head"><div class="search"><svg class="icon"><use href="#i-search"/></svg><input class="field" aria-label="搜索审计日志" placeholder="操作、角色或对象编号"></div><span class="badge info">只读</span></div><div class="table-wrap"><table><thead><tr><th>时间</th><th>角色</th><th>动作</th><th>对象</th><th>结果</th><th>来源</th></tr></thead><tbody>
+          <article class="card"><div class="card-head"><div class="search"><svg class="icon"><use href="#i-search"/></svg><input class="field" id="auditSearch" aria-label="搜索审计日志" placeholder="操作、角色或对象编号"></div><span class="badge info">只读</span></div><div class="table-wrap"><table><thead><tr><th>时间</th><th>角色</th><th>动作</th><th>对象</th><th>结果</th><th>来源</th></tr></thead><tbody id="auditRows">
             <tr><td>23:14:18</td><td>站点值班员</td><td>ACK_ALERT</td><td class="mono">ALT-1842</td><td><span class="badge success">成功</span></td><td>值班室 Web</td></tr><tr><td>22:52:06</td><td>站点管理员</td><td>PUBLISH_RULE</td><td class="mono">RULE-007</td><td><span class="badge success">成功</span></td><td>管理端</td></tr><tr><td>22:20:31</td><td>只读用户</td><td>VIEW_EVIDENCE</td><td class="mono">EVT-01J8…52C</td><td><span class="badge danger">拒绝</span></td><td>响应式 H5</td></tr>
           </tbody></table></div></article>
         </section>
@@ -419,6 +441,10 @@
   <dialog id="falseDialog" aria-labelledby="falseTitle"><form method="dialog"><div class="dialog-head"><h2 id="falseTitle">标记为误报</h2><button class="btn btn-quiet icon-btn" value="cancel" aria-label="关闭对话框">×</button></div><div class="dialog-body"><p>这只会追加事件 outcome，不会修改原始事件事实和证据。</p><div class="form-grid"><div class="form-field full"><label for="falseReason">误报原因</label><select id="falseReason" class="select" required><option value="">请选择</option><option>区域配置不准确</option><option>目标分类错误</option><option>时段策略不准确</option><option>其他</option></select></div><div class="form-field full"><label for="falseNote">补充说明（可选）</label><textarea id="falseNote" class="textarea" placeholder="便于算法团队归因，不填写真实个人信息"></textarea></div><div class="form-field full"><label><input type="checkbox" checked> 进入标注复核队列</label></div></div></div><div class="dialog-foot"><button class="btn" value="cancel">取消</button><button class="btn btn-danger" id="confirmFalse" value="default">确认标记</button></div></form></dialog>
 
   <dialog id="muteDialog" aria-labelledby="muteTitle"><form method="dialog"><div class="dialog-head"><h2 id="muteTitle">创建限时静默</h2><button class="btn btn-quiet icon-btn" value="cancel" aria-label="关闭对话框">×</button></div><div class="dialog-body"><div class="form-grid"><div class="form-field"><label for="muteScope">影响范围</label><select id="muteScope" class="select"><option>北围墙 01 · 当前规则</option><option>北围墙区域</option></select></div><div class="form-field"><label for="muteTime">持续时间</label><select id="muteTime" class="select"><option>30 分钟</option><option>1 小时</option><option>2 小时</option><option>4 小时（上限）</option></select></div><div class="form-field full"><label for="muteCause">原因</label><textarea id="muteCause" class="textarea" required placeholder="例如：现场施工维护，已安排人工巡查"></textarea></div></div><p class="muted">到期自动恢复；S1 高危事件与设备离线运维告警不受此静默影响。</p></div><div class="dialog-foot"><button class="btn" value="cancel">取消</button><button class="btn btn-primary" id="confirmMute" value="default">确认并记录审计</button></div></form></dialog>
+
+  <dialog id="areaDialog" aria-labelledby="areaTitle"><form method="dialog"><div class="dialog-head"><h2 id="areaTitle">编辑 Area 准入策略</h2><button class="btn btn-quiet icon-btn" value="cancel" aria-label="关闭对话框">×</button></div><div class="dialog-body"><div class="form-grid"><div class="form-field"><label for="areaName">Area</label><input id="areaName" class="field" value="北围墙"></div><div class="form-field"><label for="areaParent">父级</label><select id="areaParent" class="select"><option>校园</option><option>教学区</option><option>宿舍楼</option></select></div><div class="form-field full"><label for="areaPolicy">capture_policy</label><select id="areaPolicy" class="select"><option value="video_allowed">允许成像设备</option><option value="non_imaging_only">仅允许非成像设备</option></select></div><div class="form-field full"><label for="areaReason">变更原因</label><textarea id="areaReason" class="textarea" placeholder="必填，进入全局审计"></textarea></div></div><p class="muted">保存生成新策略版本；Sense 投影同步前会显示旧版本，不允许绕过后端准入检查。</p></div><div class="dialog-foot"><button class="btn" value="cancel">取消</button><button type="button" class="btn btn-primary" id="saveAreaPolicy">保存策略版本</button></div></form></dialog>
+
+  <dialog id="policyConflictDialog" aria-labelledby="policyConflictTitle"><form method="dialog"><div class="dialog-head"><h2 id="policyConflictTitle">策略与已有设备冲突</h2><button class="btn btn-quiet icon-btn" value="cancel" aria-label="关闭对话框">×</button></div><div class="dialog-body"><p>北围墙当前有 4 台成像设备。改为“仅非成像”前必须选择显式处置；系统不会自动停用、移动或保留违规设备。</p><label class="radio-card"><input type="radio" name="conflictAction" value="move"> <strong>先迁移 4 台设备到允许成像的 Area</strong><br><span class="muted">创建迁移任务，全部成功后再发布策略。</span></label><label class="radio-card"><input type="radio" name="conflictAction" value="cancel" checked> <strong>取消本次策略变更</strong><br><span class="muted">保持 v42 和现有设备不变。</span></label></div><div class="dialog-foot"><button class="btn" value="cancel">返回编辑</button><button class="btn btn-primary" value="default" id="confirmPolicyConflict">确认选择</button></div></form></dialog>
   <div class="toast" id="toast" role="status" aria-live="polite"></div>
 
   <script>
@@ -440,8 +466,8 @@
 
     function switchView(name) { $$('.view').forEach(v=>v.classList.toggle('active',v.dataset.page===name)); $$('[data-view]').forEach(b=>{const on=b.dataset.view===name;b.toggleAttribute('aria-current',on);b.classList.toggle('active',on);}); $('#stateSelect').value='normal'; renderState('normal'); $('#main-content').focus({preventScroll:true}); }
     $$('[data-view]').forEach(b=>b.addEventListener('click',()=>switchView(b.dataset.view)));
-    $$('.queue-tabs button').forEach(b=>b.addEventListener('click',()=>{$$('.queue-tabs button').forEach(x=>{x.classList.toggle('active',x===b);x.setAttribute('aria-selected',x===b)});notify(`队列已切换到“${b.textContent}”`);}));
-    $$('.evidence-tabs button').forEach(b=>b.addEventListener('click',()=>{$$('.evidence-tabs button').forEach(x=>{x.classList.toggle('active',x===b);x.setAttribute('aria-selected',x===b)});notify(`正在演示“${b.textContent}”标签结构`);}));
+    $$('.queue-tabs button').forEach(b=>b.addEventListener('click',()=>{$$('.queue-tabs button').forEach(x=>{x.classList.toggle('active',x===b);x.setAttribute('aria-pressed',x===b)});notify(`队列已切换到“${b.textContent}”`);}));
+    $$('.evidence-tabs button').forEach(b=>b.addEventListener('click',()=>{$$('.evidence-tabs button').forEach(x=>{x.classList.toggle('active',x===b);x.setAttribute('aria-pressed',x===b)});notify(`正在演示“${b.textContent}”标签结构`);}));
 
     function renderState(state) { const layer=$('#stateLayer'), views=$$('.view'); layer.classList.toggle('show',state!=='normal'); views.forEach(v=>v.style.display=state==='normal'?'':'none'); if(state==='normal')return; const states={
       loading:`<div><div class="skeleton" aria-label="正在加载"><i></i><i></i><i></i><i></i></div><h2>正在读取最新预警状态</h2><p>超过 300ms 显示进度；ack 和升级事实始终从服务端重新读取。</p></div>`,
@@ -458,6 +484,12 @@
     $('#muteButton').addEventListener('click',()=>$('#muteDialog').showModal());
     $('#confirmMute').addEventListener('click',e=>{if(!$('#muteCause').value.trim()){e.preventDefault();notify('请填写静默原因。');$('#muteCause').focus();return;}notify('已创建限时静默，到期将自动恢复并通知值班组。');});
 
+    $$('[data-edit-area]').forEach(button=>button.addEventListener('click',()=>{const isDorm=button.dataset.editArea==='dorm';$('#areaName').value=isDorm?'宿舍卧室':button.dataset.editArea==='lab'?'实验楼入口':'北围墙';$('#areaPolicy').value=isDorm?'non_imaging_only':'video_allowed';$('#areaDialog').showModal();}));
+    $('#newArea').addEventListener('click',()=>{$('#areaName').value='';$('#areaPolicy').value='video_allowed';$('#areaDialog').showModal();});
+    $('#newSite').addEventListener('click',()=>notify('新建站点需先填写时区、场景包、配额和管理员，本原型只枚举入口。'));
+    $('#saveAreaPolicy').addEventListener('click',()=>{if(!$('#areaReason').value.trim()){notify('请填写变更原因。');$('#areaReason').focus();return;}if($('#areaName').value==='北围墙'&&$('#areaPolicy').value==='non_imaging_only'){$('#areaDialog').close();$('#policyConflictDialog').showModal();return;}$('#areaDialog').close();notify('Area 策略新版本已保存，等待 Sense 拉取投影。');});
+    $('#confirmPolicyConflict').addEventListener('click',()=>{const action=$('input[name="conflictAction"]:checked').value;notify(action==='move'?'已创建 4 台设备迁移任务；完成前不会发布策略。':'已取消策略变更，v42 和已有设备保持不变。');});
+
     const ruleDialog = $('#ruleDialog');
     function openRuleEditor() { ruleDialog.showModal(); }
     $('#openRuleDialog').addEventListener('click', openRuleEditor);
@@ -473,6 +505,13 @@
     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.get('view')==='audit' && (routeParams.has('device')||routeParams.has('site'))) {
+      const tenant=routeParams.get('tenant')||'当前租户',site=routeParams.get('site')||'当前站点',device=routeParams.get('device')||'全部设备';
+      $('#auditContext').hidden=false;$('#auditTenant').textContent=tenant;$('#auditSite').textContent=site;$('#auditDevice').textContent=device;$('#auditSearch').value=device;
+      $('#auditRows').insertAdjacentHTML('afterbegin',`<tr><td>10:47:36</td><td>站点管理员</td><td>PAUSE_INFERENCE</td><td class="mono">${device}</td><td><span class="badge success">成功</span></td><td>Sense outbox · relay 已送达</td></tr>`);
+      $('#auditReturn').href=`../sense/index.html?view=device-detail&device=${encodeURIComponent(device)}&return_to=bell-audit`;
+      notify('已应用来自 Sense 的租户、站点和设备审计筛选。');
+    }
     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;