107 lines
14 KiB
HTML
107 lines
14 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 Sense 当前 MVP 交互原型">
|
||
<title>YoVision Sense · 当前 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-grid" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></symbol>
|
||
<symbol id="icon-camera" viewBox="0 0 24 24"><path d="M15 10l4.5-2.5v9L15 14z"/><rect x="3" y="6" width="12" height="12" rx="2"/></symbol>
|
||
<symbol id="icon-monitor" viewBox="0 0 24 24"><rect x="2" y="4" width="20" height="14" rx="2"/><path d="M8 22h8m-4-4v4"/></symbol>
|
||
<symbol id="icon-zone" viewBox="0 0 24 24"><path d="M5 4l14 2 2 12-11 3-7-8z"/><circle cx="5" cy="4" r="1"/><circle cx="19" cy="6" r="1"/><circle cx="21" cy="18" r="1"/><circle cx="10" cy="21" r="1"/><circle cx="3" cy="13" r="1"/></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-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="Sense 主导航">
|
||
<a class="brand" href="../index.html" style="text-decoration:none">
|
||
<span class="brand-mark">S</span><span><span class="brand-name">YoVision Sense</span><span class="brand-subtitle">视频感知管理面</span></span>
|
||
</a>
|
||
<div class="side-label">MVP 工作区</div>
|
||
<nav class="side-nav">
|
||
<button class="active" data-view-target="overview" data-title="运行总览"><svg aria-hidden="true"><use href="#icon-grid"></use></svg>运行总览</button>
|
||
<button data-view-target="devices" data-title="设备接入"><svg aria-hidden="true"><use href="#icon-camera"></use></svg>设备接入</button>
|
||
<button data-view-target="live" data-title="实时监看"><svg aria-hidden="true"><use href="#icon-monitor"></use></svg>实时监看</button>
|
||
<button data-view-target="zones" data-title="区域配置"><svg aria-hidden="true"><use href="#icon-zone"></use></svg>区域配置</button>
|
||
</nav>
|
||
<div class="side-note"><strong>独立产品边界</strong>当前页面不需要 Brain 或 Bell 在线；摄像头凭据只写不读，演示中不展示真实密码。</div>
|
||
</aside>
|
||
|
||
<div class="main-column">
|
||
<header class="topbar">
|
||
<div class="topbar-left">
|
||
<button class="btn btn-icon mobile-menu" type="button" data-mobile-menu aria-label="打开主导航" aria-expanded="false"><svg aria-hidden="true"><use href="#icon-menu"></use></svg></button>
|
||
<div><div class="page-eyebrow">青藤实验站点 · Sense</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="overview">
|
||
<div class="page-header"><div><h1>运行总览</h1><p>设备、媒体与配置的最小可见状态。Brain、Bell 当前均未连接，不影响 Sense 独立运行。</p></div><div class="page-actions"><button class="btn btn-primary" data-open-modal="add-device"><svg aria-hidden="true"><use href="#icon-plus"></use></svg>添加设备</button></div></div>
|
||
<div class="metric-grid">
|
||
<article class="metric"><div class="metric-label">视频设备</div><div class="metric-value">6</div><div class="metric-foot"><strong>5 在线</strong><span>· 1 待激活</span></div></article>
|
||
<article class="metric"><div class="metric-label">MediaMTX 路径</div><div class="metric-value">5/5</div><div class="metric-foot"><strong>已收敛</strong><span>· 12 秒前</span></div></article>
|
||
<article class="metric"><div class="metric-label">区域版本</div><div class="metric-value">8</div><div class="metric-foot"><strong>7 生效</strong><span>· 1 草稿</span></div></article>
|
||
<article class="metric"><div class="metric-label">需要处理</div><div class="metric-value">2</div><div class="metric-foot"><span class="status status-warning">认证 / 校时</span></div></article>
|
||
</div>
|
||
<div class="grid grid-2">
|
||
<article class="card"><header class="card-header"><div><h2>设备与媒体状态</h2><p class="card-subtitle">期望态与实际态的快速对照</p></div><button class="btn btn-quiet" data-view-target="devices">查看设备</button></header><div class="card-body">
|
||
<div class="activity-list">
|
||
<div class="activity-item"><div class="activity-icon"><svg aria-hidden="true"><use href="#icon-camera"></use></svg></div><div><div class="activity-title">北围墙 01</div><div class="activity-meta">主码流 1080p · MediaMTX reader 1</div></div><span class="status status-success">在线</span></div>
|
||
<div class="activity-item"><div class="activity-icon"><svg aria-hidden="true"><use href="#icon-camera"></use></svg></div><div><div class="activity-title">宿舍东门 02</div><div class="activity-meta">ONVIF 认证失败 · 凭据未回显</div></div><span class="status status-danger">需处理</span></div>
|
||
<div class="activity-item"><div class="activity-icon"><svg aria-hidden="true"><use href="#icon-camera"></use></svg></div><div><div class="activity-title">食堂后门 01</div><div class="activity-meta">已发现 · 等待选择 Profile</div></div><span class="status status-warning">待激活</span></div>
|
||
</div>
|
||
</div></article>
|
||
<article class="card"><header class="card-header"><div><h2>独立运行状态</h2><p class="card-subtitle">跨项目未连接不构成故障</p></div></header><div class="card-body stack">
|
||
<div class="activity-item"><div class="activity-icon"><svg aria-hidden="true"><use href="#icon-monitor"></use></svg></div><div><div class="activity-title">Sense Core</div><div class="activity-meta">API、数据库、审计可用</div></div><span class="status status-success">正常</span></div>
|
||
<div class="activity-item"><div class="activity-icon"><svg aria-hidden="true"><use href="#icon-activity"></use></svg></div><div><div class="activity-title">Brain 适配器</div><div class="activity-meta">MVP #8 不要求连接</div></div><span class="status status-neutral">未配置</span></div>
|
||
<div class="activity-item"><div class="activity-icon"><svg aria-hidden="true"><use href="#icon-activity"></use></svg></div><div><div class="activity-title">Bell Connector</div><div class="activity-meta">后续协同工单实现</div></div><span class="status status-neutral">未安装</span></div>
|
||
</div></article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="view" data-view="devices" hidden>
|
||
<div class="page-header"><div><h1>设备接入</h1><p>从发现、验证到激活的单设备闭环；凭据更新后只显示脱敏结果。</p></div><div class="page-actions"><button class="btn btn-primary" data-open-modal="add-device"><svg aria-hidden="true"><use href="#icon-plus"></use></svg>添加设备</button></div></div>
|
||
<article class="card"><div class="card-body">
|
||
<div class="toolbar"><div class="field grow"><label for="device-filter">搜索设备</label><div class="inline"><svg aria-hidden="true"><use href="#icon-search"></use></svg><input id="device-filter" class="input" data-filter-input="#device-table" placeholder="名称、地址或状态"></div></div><div class="field"><label for="device-status">状态</label><select id="device-status" class="input"><option>全部状态</option><option>在线</option><option>需处理</option><option>待激活</option></select></div></div>
|
||
<div class="table-wrap"><table id="device-table"><thead><tr><th>设备</th><th>管理地址</th><th>接入状态</th><th>选定 Profile</th><th>操作</th></tr></thead><tbody>
|
||
<tr><td><span class="table-title">北围墙 01</span><span class="table-subtitle">video · ONVIF</span></td><td>192.168.10.21</td><td><span class="status status-success">在线</span></td><td>MainStream · 1080p</td><td><button class="btn btn-quiet" data-toast="已打开北围墙 01 详情">查看</button></td></tr>
|
||
<tr><td><span class="table-title">宿舍东门 02</span><span class="table-subtitle">video · ONVIF</span></td><td>192.168.10.32</td><td><span class="status status-danger">认证失败</span></td><td>SubStream · 720p</td><td><button class="btn btn-quiet" data-toast="凭据更新窗口仅允许写入，不会回显旧密码">更新凭据</button></td></tr>
|
||
<tr><td><span class="table-title">食堂后门 01</span><span class="table-subtitle">video · 手工添加</span></td><td>192.168.10.45</td><td><span class="status status-warning">待激活</span></td><td>尚未选择</td><td><button class="btn btn-quiet" data-toast="已开始重新探测 Profile">探测</button></td></tr>
|
||
</tbody></table></div>
|
||
</div></article>
|
||
</section>
|
||
|
||
<section class="view" data-view="live" hidden>
|
||
<div class="page-header"><div><h1>实时监看</h1><p>单路视频优先；明确展示加载、失败、重连和当前 Profile。</p></div><div class="page-actions"><select class="input" aria-label="选择摄像头"><option>北围墙 01</option><option>宿舍东门 02</option></select><button class="btn" data-toast="已发起重连，当前画面保持显示">重新连接</button></div></div>
|
||
<div class="grid grid-2"><article class="card"><div class="card-body"><div class="video-stage" role="img" aria-label="北围墙摄像头的模拟实时画面，画面中显示已配置的危险区域"><div class="camera-caption"><span class="status status-success">实时</span>北围墙 01 · MainStream</div><div class="zone-shape"></div><span class="zone-label">危险区域 A</span><span class="video-time">2026-08-12 10:18:24 CST</span></div></div></article><article class="card"><header class="card-header"><h2>播放状态</h2></header><div class="card-body stack"><div><span class="metric-label">协议</span><div class="table-title">WebRTC / MediaMTX</div></div><div><span class="metric-label">源 Profile</span><div class="table-title">MainStream · 1920×1080</div></div><div><span class="metric-label">连接质量</span><div class="table-title">1.8 Mbps · 延迟 340 ms</div></div><div><span class="metric-label">最近重连</span><div class="table-title">无 · 已稳定 04:18:32</div></div></div></article></div>
|
||
</section>
|
||
|
||
<section class="view" data-view="zones" hidden>
|
||
<div class="page-header"><div><h1>区域配置</h1><p>区域与方向线绑定设备和 Profile；分辨率变化时必须显式重新校准。</p></div><div class="page-actions"><button class="btn" data-toast="方向已反转，草稿尚未发布">反转方向</button><button class="btn btn-primary" data-toast="区域草稿已保存为 v8，尚未发布">保存草稿</button></div></div>
|
||
<div class="grid grid-2"><article class="card"><div class="card-body"><div class="video-stage" role="img" aria-label="区域编辑画布，包含五边形危险区域"><div class="camera-caption">北围墙 01 · MainStream · 1920×1080</div><div class="zone-shape"></div><span class="zone-label">危险区域 A · 草稿</span></div></div></article><article class="card"><header class="card-header"><h2>区域属性</h2><span class="status status-warning">草稿 v8</span></header><div class="card-body stack"><div class="field"><label for="zone-name">区域名称</label><input id="zone-name" class="input" value="危险区域 A"></div><div class="field"><label for="zone-rule">区域类型</label><select id="zone-rule" class="input"><option>危险区域</option><option>方向警戒线</option><option>聚集区域</option></select></div><div class="field"><label for="zone-profile">绑定 Profile</label><input id="zone-profile" class="input" value="MainStream · 1920×1080" readonly></div><p class="help">坐标按当前 Profile 归一化保存。切换分辨率后，此版本将进入“需重新校准”。</p><button class="btn btn-primary" data-toast="区域 v8 已发布，v7 保留用于审计">发布区域版本</button></div></article></div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-backdrop" id="add-device" aria-hidden="true">
|
||
<section class="modal" role="dialog" aria-modal="true" aria-labelledby="add-device-title">
|
||
<header class="modal-header"><h2 id="add-device-title">添加视频设备</h2><button class="btn btn-icon btn-quiet" data-close-modal aria-label="关闭添加设备窗口">×</button></header>
|
||
<div class="modal-body stack"><div class="field"><label for="device-name">设备名称</label><input id="device-name" class="input" value="教学楼西门 01"></div><div class="field"><label for="device-address">管理地址</label><input id="device-address" class="input" inputmode="url" value="192.168.10.88"></div><div class="field"><label for="device-user">ONVIF 用户名</label><input id="device-user" class="input" autocomplete="off" value="operator"></div><div class="field"><label for="device-password">密码</label><input id="device-password" class="input" type="password" autocomplete="new-password" placeholder="只写不读，保存后不会回显"><span class="help">原型不会保存输入内容；正式产品中密码不得进入日志或 URL。</span></div></div>
|
||
<footer class="modal-footer"><button class="btn" data-close-modal>取消</button><button class="btn btn-primary" data-action="add-device">保存为待激活</button></footer>
|
||
</section>
|
||
</div>
|
||
<div class="toast-region" data-toast-region aria-live="polite"></div>
|
||
<script src="../assets/app.js"></script>
|
||
</body>
|
||
</html>
|