taozuqin/ST-Bionic-Memory-Ecology
1
0
Fork 0
mirror of https://github.com/Youzini-afk/ST-Bionic-Memory-Ecology.git synced 2026-05-15 22:30:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): add Cognitive View tab + mobile graph redesign + fullscreen overlay

Browse Source 
- Desktop: graph toolbar title → dual tab switcher (实时图谱 | 认知视图)
- Cognitive View: owners list with avatar, metrics grid, chip groups, manual override, space tools, AI Monitor mini
- Mobile: replace unreadable 200px canvas preview with tabbed layout (图谱摘要 | 认知视图)
- Mobile: add fullscreen graph overlay with zoom controls
- Dashboard: simplify cognition card to KV summary + jump-to-view button
- CSS: ~800 lines new styles for all components with responsive breakpoints
- JS: 14 new render functions, event delegation, view switching logic
This commit is contained in:
Youzini-afk
2026-04-08 19:52:00 +08:00
parent a4fed87e6e
commit 8014baabd4
3 changed files with 1445 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

151
ui/panel.html
View File

@@ -213,72 +213,29 @@
<div class="bme-config-card">
<div class="bme-section-header">认知 / 空间</div>
<div class="bme-config-row">
<label>当前召回角色</label>
<label><i class="fa-solid fa-user" style="margin-right:4px;opacity:0.5"></i>当前召回角色</label>
<div class="bme-recent-meta" id="bme-cognition-active-owner">—</div>
</div>
<div class="bme-config-row">
<label>当前地区</label>
<label><i class="fa-solid fa-location-dot" style="margin-right:4px;opacity:0.5"></i>当前地区</label>
<div class="bme-recent-meta" id="bme-cognition-active-region">—</div>
</div>
<div class="bme-config-row">
<label>邻接地区</label>
<label><i class="fa-solid fa-diagram-project" style="margin-right:4px;opacity:0.5"></i>邻接地区</label>
<div class="bme-recent-meta" id="bme-cognition-adjacent-regions">—</div>
</div>
<div class="bme-config-row">
<label>认知角色数</label>
<label><i class="fa-solid fa-users" style="margin-right:4px;opacity:0.5"></i>认知角色数</label>
<div class="bme-recent-meta" id="bme-cognition-owner-count">0</div>
</div>
<ul class="bme-recent-list" id="bme-cognition-owner-list"></ul>
<div id="bme-cognition-detail" class="bme-cognition-detail"></div>
<div class="bme-cognition-tools">
<div class="bme-config-row">
<label for="bme-cognition-manual-region">手动当前地区</label>
<input
id="bme-cognition-manual-region"
class="bme-config-input"
type="text"
placeholder="留空则恢复自动判断"
/>
</div>
<div class="bme-cognition-tool-actions">
<button
class="bme-config-secondary-btn"
id="bme-cognition-region-apply"
type="button"
>
<i class="fa-solid fa-location-dot"></i>
<span>设为当前地区</span>
</button>
<button
class="bme-config-secondary-btn"
id="bme-cognition-region-clear"
type="button"
>
<i class="fa-solid fa-rotate-left"></i>
<span>恢复自动</span>
</button>
</div>
<div class="bme-config-row">
<label for="bme-cognition-adjacency-input">当前地区邻接</label>
<input
id="bme-cognition-adjacency-input"
class="bme-config-input"
type="text"
placeholder="旧城区, 内廷"
/>
</div>
<div class="bme-config-help">
这里的手动覆盖只影响当前聊天图谱。选中一个节点后，可以在上面的角色详情里对该角色标记“强制已知 / 强制隐藏 / 误解”。
</div>
<button
class="bme-config-secondary-btn"
id="bme-cognition-adjacency-save"
type="button"
>
<i class="fa-solid fa-diagram-project"></i>
<span>保存当前地区邻接</span>
</button>
</div>
<button
class="bme-config-secondary-btn bme-cognition-jump-btn"
id="bme-cognition-jump-to-view"
type="button"
>
<i class="fa-solid fa-brain"></i>
<span>在认知视图中查看完整认知 →</span>
</button>
</div>
<div class="bme-config-card">
@@ -289,20 +246,22 @@
<ul class="bme-recent-list" id="bme-ai-monitor-list"></ul>
</div>
<div class="bme-mobile-graph-preview" id="bme-mobile-graph-area">
<canvas id="bme-mobile-graph-canvas"></canvas>
<div class="bme-graph-overlay" id="bme-mobile-graph-overlay" hidden>
<div class="bme-graph-overlay__text" id="bme-mobile-graph-overlay-text">
正在加载当前聊天图谱
</div>
<div class="bme-mobile-graph-section" id="bme-mobile-graph-section">
<div class="bme-mobile-graph-tabs">
<button class="bme-mobile-graph-tab active" data-mobile-view="summary" type="button">
<i class="fa-solid fa-chart-pie"></i> 图谱摘要
</button>
<button class="bme-mobile-graph-tab" data-mobile-view="cognition" type="button">
<i class="fa-solid fa-brain"></i> 认知视图
</button>
</div>
<span class="bme-mobile-graph-label">REALTIME</span>
<div class="bme-mobile-view-pane active" id="bme-mobile-summary-pane" data-mobile-view="summary"></div>
<div class="bme-mobile-view-pane" id="bme-mobile-cognition-pane" data-mobile-view="cognition"></div>
<button class="bme-mobile-fullscreen-btn" id="bme-mobile-open-fullscreen" type="button">
<i class="fa-solid fa-expand"></i> 打开全屏图谱
</button>
</div>
<div
class="bme-graph-statusbar bme-mobile-graph-status"
id="bme-mobile-graph-status"
>
<span><span class="bme-status-dot"></span>NODE_SYNC_ACTIVE</span>
</div>
<div class="bme-section-header">最近提取</div>
@@ -500,9 +459,15 @@
<div class="bme-panel-main">
<div class="bme-graph-workspace" id="bme-graph-workspace">
<div class="bme-graph-toolbar">
<div class="bme-graph-toolbar-title">
<i class="fa-solid fa-diagram-project"></i>
<span>实时图谱</span>
<div class="bme-graph-view-tabs">
<button class="bme-graph-view-tab active" data-graph-view="graph" type="button">
<i class="fa-solid fa-diagram-project"></i>
<span>实时图谱</span>
</button>
<button class="bme-graph-view-tab" data-graph-view="cognition" type="button">
<i class="fa-solid fa-brain"></i>
<span>认知视图</span>
</button>
</div>
<div class="bme-graph-controls">
<button id="bme-graph-zoom-in" title="放大" type="button">
@@ -534,6 +499,30 @@
<span id="bme-status-meta">NODES: 0 | EDGES: 0</span>
</div>
<div class="bme-cognition-workspace" id="bme-cognition-workspace" hidden>
<div class="bme-cog-status-strip" id="bme-cog-status-strip"></div>
<div class="bme-cog-body">
<div class="bme-cog-column bme-cog-column--owners">
<div class="bme-cog-section-title">
<i class="fa-solid fa-users"></i> 角色认知清单
</div>
<div class="bme-cog-owner-scroll" id="bme-cog-owner-list"></div>
<div class="bme-cog-owner-detail" id="bme-cog-owner-detail"></div>
</div>
<div class="bme-cog-column bme-cog-column--space">
<div class="bme-cog-section-title">
<i class="fa-solid fa-map-location-dot"></i> 空间控制台
</div>
<div class="bme-cog-space-tools" id="bme-cog-space-tools"></div>
<div class="bme-cog-section-title" style="margin-top:16px">
<i class="fa-solid fa-wave-square"></i> AI Monitor
</div>
<div class="bme-cog-monitor-mini" id="bme-cog-monitor-mini"></div>
</div>
</div>
</div>
<div class="bme-node-detail" id="bme-node-detail">
<div class="bme-node-detail-header">
<h3 id="bme-detail-title">节点详情</h3>
@@ -2651,4 +2640,26 @@
</button>
</div>
</div>
<div class="bme-fullscreen-graph-overlay" id="bme-fullscreen-graph" hidden>
<div class="bme-fullscreen-graph-toolbar">
<div class="bme-graph-toolbar-title">
<i class="fa-solid fa-diagram-project"></i>
<span>实时图谱（全屏）</span>
</div>
<div class="bme-fullscreen-graph-controls">
<button id="bme-fs-zoom-in" title="放大" type="button">
<i class="fa-solid fa-plus"></i>
</button>
<button id="bme-fs-zoom-out" title="缩小" type="button">
<i class="fa-solid fa-minus"></i>
</button>
<button id="bme-fs-close" title="关闭" type="button">
<i class="fa-solid fa-xmark"></i>
</button>
</div>
</div>
<canvas id="bme-fullscreen-graph-canvas"></canvas>
</div>
</div>