docs(design): restore complete Sense prototype
This commit is contained in:
@@ -258,7 +258,144 @@
|
|||||||
.zone-settings { order: 3; }
|
.zone-settings { order: 3; }
|
||||||
.camera-grid { grid-template-columns: 1fr; }
|
.camera-grid { grid-template-columns: 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 { 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-h…3676 tokens truncated…>
|
.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: var(--primary); background: var(--primary-soft); }
|
||||||
|
}
|
||||||
|
@media (max-width: 560px) {
|
||||||
|
.stats, .system-grid { grid-template-columns: 1fr; }
|
||||||
|
.page-head { display: grid; }
|
||||||
|
.page-actions { width: 100%; }
|
||||||
|
.page-actions .btn { flex: 1; }
|
||||||
|
.form-grid { grid-template-columns: 1fr; }
|
||||||
|
.form-field.full { grid-column: auto; }
|
||||||
|
.editor-stage { min-height: 0; }
|
||||||
|
.coordinate-row { grid-template-columns: 1fr 1fr; }
|
||||||
|
.coordinate-row .btn { grid-column: 1/-1; }
|
||||||
|
}
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<svg aria-hidden="true" width="0" height="0" style="position:absolute">
|
||||||
|
<symbol id="i-grid" viewBox="0 0 24 24"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></symbol>
|
||||||
|
<symbol id="i-video" viewBox="0 0 24 24"><rect x="3" y="5" width="14" height="14" rx="2"/><path d="m17 10 4-2v8l-4-2z"/></symbol>
|
||||||
|
<symbol id="i-camera" viewBox="0 0 24 24"><path d="M5 7h3l1.4-2h5.2L16 7h3a2 2 0 0 1 2 2v9H3V9a2 2 0 0 1 2-2Z"/><circle cx="12" cy="12.5" r="3"/></symbol>
|
||||||
|
<symbol id="i-zone" viewBox="0 0 24 24"><path d="m5 5 14 2-2 12-12-3Z"/><circle cx="5" cy="5" r="1.5"/><circle cx="19" cy="7" r="1.5"/><circle cx="17" cy="19" r="1.5"/><circle cx="5" cy="16" r="1.5"/></symbol>
|
||||||
|
<symbol id="i-upload" viewBox="0 0 24 24"><path d="M12 16V4m0 0L7 9m5-5 5 5"/><path d="M4 15v5h16v-5"/></symbol>
|
||||||
|
<symbol id="i-pulse" viewBox="0 0 24 24"><path d="M3 12h4l2-6 4 12 2-6h6"/></symbol>
|
||||||
|
<symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/></symbol>
|
||||||
|
<symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
|
||||||
|
<symbol id="i-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2m0 16v2M4.9 4.9l1.4 1.4m11.4 11.4 1.4 1.4M2 12h2m16 0h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></symbol>
|
||||||
|
<symbol id="i-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-9"/><path d="M10 21h4"/></symbol>
|
||||||
|
<symbol id="i-chevron" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></symbol>
|
||||||
|
<symbol id="i-pointer" viewBox="0 0 24 24"><path d="m5 3 14 8-6 2-3 6Z"/></symbol>
|
||||||
|
<symbol id="i-line" viewBox="0 0 24 24"><path d="m4 18 16-12"/><circle cx="4" cy="18" r="2"/><circle cx="20" cy="6" r="2"/></symbol>
|
||||||
|
<symbol id="i-undo" viewBox="0 0 24 24"><path d="M9 7 4 12l5 5"/><path d="M5 12h8a6 6 0 0 1 6 6"/></symbol>
|
||||||
|
<symbol id="i-trash" viewBox="0 0 24 24"><path d="M4 7h16M9 7V4h6v3m-9 0 1 14h10l1-14"/></symbol>
|
||||||
|
<symbol id="i-alert" viewBox="0 0 24 24"><path d="M12 3 2 20h20Z"/><path d="M12 9v4m0 3v.01"/></symbol>
|
||||||
|
<symbol id="i-check" viewBox="0 0 24 24"><path d="m5 12 4 4L19 6"/></symbol>
|
||||||
|
<symbol id="i-refresh" viewBox="0 0 24 24"><path d="M20 6v5h-5M4 18v-5h5"/><path d="M18 9a7 7 0 0 0-12-2M6 15a7 7 0 0 0 12 2"/></symbol>
|
||||||
|
<symbol id="i-more" viewBox="0 0 24 24"><circle cx="5" cy="12" r="1"/><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/></symbol>
|
||||||
|
<symbol id="i-wifi" viewBox="0 0 24 24"><path d="M4 9a12 12 0 0 1 16 0M7 13a8 8 0 0 1 10 0m-7 4a3 3 0 0 1 4 0M12 20v.01"/></symbol>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<div class="prototype-banner">PROTOTYPE - 仅供枚举交互，非实现依据</div>
|
||||||
|
<div class="app">
|
||||||
|
<aside class="sidebar" aria-label="Sense 主导航">
|
||||||
|
<div class="brand"><div class="brand-mark">Y</div><div class="brand-copy"><strong>YoVision</strong><small>Sense · Edge Console</small></div></div>
|
||||||
|
<div class="nav-label">Workspace</div>
|
||||||
|
<nav class="nav">
|
||||||
|
<button data-view="overview"><svg class="icon"><use href="#i-grid"/></svg><span>运行总览</span></button>
|
||||||
|
<button data-view="monitor"><svg class="icon"><use href="#i-video"/></svg><span>实时监控</span><span class="count">4</span></button>
|
||||||
|
<button data-view="devices" aria-current="page"><svg class="icon"><use href="#i-camera"/></svg><span>摄像头</span><span class="count">16</span></button>
|
||||||
|
<button data-view="onboarding"><svg class="icon"><use href="#i-upload"/></svg><span>接入任务</span><span class="count">1</span></button>
|
||||||
|
<button data-view="system"><svg class="icon"><use href="#i-pulse"/></svg><span>系统状态</span></button>
|
||||||
|
</nav>
|
||||||
|
<div class="sidebar-foot"><div class="online-row"><span class="dot"></span><strong>边缘节点在线</strong></div><div class="copy">sense-edge-01<br><span class="mono">v0.1-prototype</span></div></div>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<main class="main" id="main-content" tabindex="-1">
|
||||||
|
<header class="topbar">
|
||||||
|
<div class="site-select"><div><strong>青藤寄宿学校</strong><span> / 主校区 · 16 / 16 路</span></div><svg class="icon"><use href="#i-chevron"/></svg></div>
|
||||||
|
<div class="top-actions">
|
||||||
|
<select class="select" id="stateSelect" aria-label="原型状态演示">
|
||||||
|
<option value="normal">正常状态</option><option value="loading">加载中</option><option value="empty">空数据</option><option value="error">连接失败</option>
|
||||||
|
</select>
|
||||||
|
<button class="btn icon-btn" id="themeToggle" aria-label="切换明暗主题" title="切换明暗主题"><svg class="icon"><use href="#i-sun"/></svg></button>
|
||||||
|
<button class="btn icon-btn" aria-label="查看运维通知" title="查看运维通知"><svg class="icon"><use href="#i-bell"/></svg></button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<section class="state-layer" id="stateLayer" aria-live="polite"></section>
|
||||||
|
|
||||||
|
<section class="view" data-page="overview">
|
||||||
|
<div class="page-head"><div><h1>运行总览</h1><p>先判断是否影响业务，再进入设备或分片定位原因。</p></div><div class="page-actions"><button class="btn"><svg class="icon"><use href="#i-refresh"/></svg>立即对账</button></div></div>
|
||||||
|
<div class="grid stats">
|
||||||
|
<article class="card stat"><div class="stat-top"><span>在线设备</span><svg class="icon"><use href="#i-camera"/></svg></div><strong>15 / 16</strong><span class="trend">93.8% · 1 路重连中</span></article>
|
||||||
|
<article class="card stat"><div class="stat-top"><span>活跃媒体流</span><svg class="icon"><use href="#i-video"/></svg></div><strong>15</strong><span class="trend">主/子码流均衡</span></article>
|
||||||
|
<article class="card stat"><div class="stat-top"><span>待收敛项</span><svg class="icon"><use href="#i-refresh"/></svg></div><strong>2</strong><span class="muted">配置 1 · 时间漂移 1</span></article>
|
||||||
|
<article class="card stat"><div class="stat-top"><span>今日设备告警</span><svg class="icon"><use href="#i-alert"/></svg></div><strong>3</strong><span class="muted">与业务预警分开</span></article>
|
||||||
|
</div>
|
||||||
|
<div class="grid split">
|
||||||
|
<article class="card"><div class="card-head"><h2>分片健康</h2><span class="badge success">全部可用</span></div><div class="card-body health-list">
|
||||||
|
<div class="health-row"><span>media-01</span><strong>8 / 32</strong><div class="meter"><i style="width:25%"></i></div></div>
|
||||||
|
<div class="health-row"><span>media-02</span><strong>8 / 32</strong><div class="meter"><i style="width:25%"></i></div></div>
|
||||||
|
<div class="health-row"><span>推理绑定</span><strong>16 / 16</strong><div class="meter"><i style="width:100%;background:var(--violet)"></i></div></div>
|
||||||
|
</div></article>
|
||||||
|
<article class="card"><div class="card-head"><h2>需要处理</h2><span class="badge warning">2 项</span></div><div class="card-body">
|
||||||
|
<p><strong>北围墙 03</strong><br><span class="muted">断线 02:14 · 正在第 4 次重连</span></p>
|
||||||
|
<p><strong>实验楼入口 02</strong><br><span class="muted">时间漂移 +3.8s · 建议重新校时</span></p>
|
||||||
|
</div></article>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="view" data-page="monitor">
|
||||||
|
<div class="page-head"><div><h1>实时监控</h1><p>默认只并发预览 4 路子码流；切页会释放上一页播放器。</p></div><div class="page-actions"><span class="badge info">第 1 / 4 页</span><button class="btn">布局 2 × 2</button></div></div>
|
||||||
|
<div class="grid camera-grid" id="cameraGrid"></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="view active" data-page="devices">
|
||||||
|
<div class="page-head"><div><h1>摄像头</h1><p>期望态与实际态分开展示；连接地址和凭据始终脱敏。</p></div><div class="page-actions"><button class="btn">扫描设备</button><button class="btn btn-primary" id="openCameraDialog"><svg class="icon"><use href="#i-plus"/></svg>添加摄像头</button></div></div>
|
||||||
|
<article class="card">
|
||||||
|
<div class="card-head"><div class="toolbar"><div class="search"><svg class="icon"><use href="#i-search"/></svg><input class="field" aria-label="搜索摄像头" placeholder="名称、序列号或点位"></div><select class="select" aria-label="设备状态筛选"><option>全部状态</option><option>异常</option><option>重连中</option></select></div><span class="muted">已用 16 / 128</span></div>
|
||||||
|
<div class="table-wrap"><table><thead><tr><th><input type="checkbox" aria-label="选择全部设备"></th><th>设备</th><th>期望态</th><th>实际态</th><th>最后在线</th><th>时间漂移</th><th>媒体分片</th><th>检测区域</th><th>操作</th></tr></thead><tbody id="deviceRows"></tbody></table></div>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="view" data-page="device-detail">
|
||||||
|
<div class="context-strip" id="ruleReturnContext" hidden><p><strong>来自 Bell 规则草稿：</strong>已保留“非授权人员进入”的摄像头上下文；保存检测区域后可返回继续配置。</p><a class="btn" id="returnToBell" href="../bell/index.html?view=rules&camera=CAM-S2-001&zone=ZONE-007">返回规则草稿</a></div>
|
||||||
|
<div class="breadcrumb"><button id="backToDevices">摄像头</button><span>/</span><span id="deviceBreadcrumb">北围墙 01</span></div>
|
||||||
|
<div class="page-head"><div><h1 id="deviceDetailName">北围墙 01</h1><p><span id="deviceDetailSerial" class="mono">CAM-S2-001</span> · 当前摄像头的接入、画面与空间配置。</p></div><div class="page-actions"><span class="badge success" id="calibrationBadge">区域已校准</span><button class="btn" id="simulateCalibration">模拟画面参数变化</button></div></div>
|
||||||
|
<div class="detail-tabs" role="tablist" aria-label="摄像头详情">
|
||||||
|
<button role="tab" data-detail-tab="info" aria-selected="false">基本信息</button>
|
||||||
|
<button class="active" role="tab" data-detail-tab="zones" aria-selected="true">画面与检测区域</button>
|
||||||
|
<button role="tab" data-detail-tab="health" aria-selected="false">流与健康</button>
|
||||||
|
<button role="tab" data-detail-tab="history" aria-selected="false">操作记录</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<section class="detail-panel" data-detail-panel="info" hidden>
|
||||||
|
<div class="grid split"><article class="card"><div class="card-head"><h2>设备信息</h2><span class="badge success">在线</span></div><div class="card-body"><p><strong>点位：</strong>北围墙</p><p><strong>协议：</strong>ONVIF / RTSP</p><p><strong>凭据：</strong>已安全保存，页面不可见</p></div></article><article class="card"><div class="card-head"><h2>期望态</h2><span class="badge info">启用</span></div><div class="card-body"><p>媒体分片：media-01</p><p>Profile：子码流 704 × 576 · 5 FPS</p></div></article></div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="detail-panel" data-detail-panel="zones">
|
||||||
|
<div class="page-head"><div><h2 style="margin:0 0 4px">画面与检测区域</h2><p>区域依附当前摄像头坐标系；这里只保存空间几何，不发布告警规则。</p></div><div class="page-actions"><span class="badge info" id="draftBadge">区域 v7</span><button class="btn">区域版本记录</button></div></div>
|
||||||
|
<div class="zone-layout">
|
||||||
|
<section class="card zone-workspace" aria-label="区域绘制工作区">
|
||||||
|
<div class="editor-tools" role="toolbar" aria-label="区域绘制工具">
|
||||||
|
<button class="tool-btn" data-tool="pointer" aria-pressed="false" title="选择对象"><svg class="icon"><use href="#i-pointer"/></svg><span>选择</span></button>
|
||||||
|
<button class="tool-btn active" data-tool="polygon" aria-pressed="true" title="绘制多边形"><svg class="icon"><use href="#i-zone"/></svg><span>多边形</span></button>
|
||||||
|
<button class="tool-btn" data-tool="line" aria-pressed="false" title="绘制方向警戒线"><svg class="icon"><use href="#i-line"/></svg><span>警戒线</span></button>
|
||||||
|
<span class="tool-divider"></span>
|
||||||
|
<button class="tool-btn" id="undoPoint" title="撤销最后一个点"><svg class="icon"><use href="#i-undo"/></svg><span>撤销</span></button>
|
||||||
|
<button class="tool-btn" id="clearPoints" title="清空当前草稿"><svg class="icon"><use href="#i-trash"/></svg><span>清空</span></button>
|
||||||
|
</div>
|
||||||
|
<div class="editor-stage">
|
||||||
|
<svg id="zoneCanvas" viewBox="0 0 960 540" role="img" aria-label="北围墙 01 子码流快照及区域叠加；可点击添加多边形顶点">
|
||||||
|
<defs><linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"><stop stop-color="#10283b"/><stop offset="1" stop-color="#07111d"/></linearGradient><pattern id="scan" width="8" height="8" patternUnits="userSpaceOnUse"><path d="M0 8h8" stroke="#ffffff" stroke-opacity=".035"/></pattern></defs>
|
||||||
|
<rect width="960" height="540" fill="url(#sky)"/><path d="M0 330 160 250 330 315 510 235 690 310 820 225 960 282V540H0Z" fill="#13283a"/><rect y="410" width="960" height="130" fill="#101a22"/><path d="M0 414h960M0 472h960" stroke="#5c7489" stroke-opacity=".45"/><path d="M170 300v240m230-245v245m250-250v250m190-280v280" stroke="#6f879b" stroke-width="4"/><path d="M0 345h960" stroke="#7890a4" stroke-width="5"/><rect width="960" height="540" fill="url(#scan)"/>
|
||||||
<polygon points="105,365 285,310 535,335 505,466 135,472" fill="#38bdf8" fill-opacity=".18" stroke="#38bdf8" stroke-width="4" stroke-dasharray="10 7"/>
|
<polygon points="105,365 285,310 535,335 505,466 135,472" fill="#38bdf8" fill-opacity=".18" stroke="#38bdf8" stroke-width="4" stroke-dasharray="10 7"/>
|
||||||
<g fill="#07111d" stroke="#7dd3fc" stroke-width="4"><circle cx="105" cy="365" r="7"/><circle cx="285" cy="310" r="7"/><circle cx="535" cy="335" r="7"/><circle cx="505" cy="466" r="7"/><circle cx="135" cy="472" r="7"/></g>
|
<g fill="#07111d" stroke="#7dd3fc" stroke-width="4"><circle cx="105" cy="365" r="7"/><circle cx="285" cy="310" r="7"/><circle cx="535" cy="335" r="7"/><circle cx="505" cy="466" r="7"/><circle cx="135" cy="472" r="7"/></g>
|
||||||
<line x1="650" y1="340" x2="855" y2="430" stroke="#fbbf24" stroke-width="5"/><path d="m760 382 30-2-18 24" fill="none" stroke="#fbbf24" stroke-width="5"/><g id="draftLayer"></g>
|
<line x1="650" y1="340" x2="855" y2="430" stroke="#fbbf24" stroke-width="5"/><path d="m760 382 30-2-18 24" fill="none" stroke="#fbbf24" stroke-width="5"/><g id="draftLayer"></g>
|
||||||
@@ -418,4 +555,3 @@
|
|||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user