104 lines
10 KiB
HTML
104 lines
10 KiB
HTML
<!-- ============================================================
|
||
design/_nav.html — 统一侧栏片段（全功能版）
|
||
============================================================
|
||
由 _theme.js fetch 注入各页 .sidebar-mount。改这里全站同步。
|
||
|
||
能力：
|
||
· 7 组 20 项导航，每项带 Lucide 图标（折叠态只显图标）
|
||
· 每项带 data-route（hover 显示路由角标，_chrome.css 渲染）
|
||
· logo 鎏金 mark + 折叠按钮（#sidebar-fold 切换 .collapsed）
|
||
· 心智组分层：灵枢（总览）↔ 维度（五行 / 人格 / 内驱力 / 演化）
|
||
· user-card 底部用户信息 + foot-btn 设计系统入口
|
||
· theme-toggle 按钮（#theme-toggle）
|
||
|
||
分组语义（2026-07-27 重组）：
|
||
· 「编排」原「载入」——该组横跨数据载入（魂册降生 / 世谱）
|
||
与运行时编排（符文引擎 / 眉批），「编排」涵盖两者。
|
||
· tavern class 名保留（内部标识，_chrome.css 据此加视觉区分）。
|
||
|
||
折叠：.sidebar-wrap.collapsed → 60px 图标态（_theme.js 控制 + 持久化）
|
||
高亮：data-active 命中 data-nav → .active
|
||
图标 stroke/fill 由 _chrome.css 的 .ico 统一
|
||
============================================================ -->
|
||
<div class="sidebar-wrap">
|
||
<aside class="sidebar">
|
||
<div class="sidebar-topbar">
|
||
<button class="logo" type="button" data-nav="home" title="返回目录 · 五连点见镜启">
|
||
<svg class="logo-mark" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5" /><circle cx="12" cy="12" r="4.5" opacity="0.45" /><circle class="knob" cx="12" cy="12" r="1.6" /></svg>
|
||
魂鏡
|
||
</button>
|
||
<button class="sidebar-foldbtn" id="sidebar-fold" type="button" aria-label="折叠侧栏">
|
||
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M15 18l-6-6 6-6" /></svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="nav-group">
|
||
<div class="nav-group-title">灵台</div>
|
||
<a class="nav-item" data-nav="对话" data-route="/chat" href="chat-redesign-preview.html" title="对话"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" /></svg>对话</a>
|
||
<a class="nav-item" data-nav="轨迹" data-route="/runs/[id]" href="run-trace-preview.html" title="运行轨迹"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12" /></svg>轨迹</a>
|
||
</div>
|
||
|
||
<div class="nav-group">
|
||
<div class="nav-group-title">魂册</div>
|
||
<a class="nav-item" data-nav="人物" data-route="/characters" href="characters-preview.html" title="人物列表"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /></svg>人物</a>
|
||
</div>
|
||
|
||
<div class="nav-group">
|
||
<div class="nav-group-title">心智</div>
|
||
<a class="nav-item nav-item--overview" data-nav="灵枢" data-route="/cosmos" href="cosmos-preview.html" title="灵枢 · 心智总览"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41" /></svg>灵枢</a>
|
||
<div class="nav-divider" role="separator" aria-label="心智维度"></div>
|
||
<a class="nav-item" data-nav="五行" data-route="/wuxing" href="wuxing-preview.html" title="五行生克"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.07-2.14-.22-4.05 2-6 .5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.15.43-2.29 1-3a2.5 2.5 0 0 0 2.5 2.5z" /></svg>五行</a>
|
||
<a class="nav-item" data-nav="人格" data-route="/personality" href="personality-preview.html" title="人格定义"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10" /><path d="M8 14s1.5 2 4 2 4-2 4-2" /><line x1="9" y1="9" x2="9.01" y2="9" /><line x1="15" y1="9" x2="15.01" y2="9" /></svg>人格</a>
|
||
<a class="nav-item" data-nav="内驱力" data-route="/drive" href="drive-preview.html" title="内驱力"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="6" /><circle cx="12" cy="12" r="2" /></svg>内驱力</a>
|
||
<a class="nav-item" data-nav="演化" data-route="/evolution" href="evolution-preview.html" title="大周天演化"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><polyline points="22 7 13.5 15.5 8.5 10.5 2 17" /><polyline points="16 7 22 7 22 13" /></svg>演化</a>
|
||
</div>
|
||
|
||
<div class="nav-group tavern">
|
||
<div class="nav-group-title">编排</div>
|
||
<a class="nav-item" data-nav="魂册降生" data-route="/characters/import" href="card-import-preview.html" title="魂册降生 · 角色卡导入"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><line x1="19" y1="8" x2="19" y2="14" /><line x1="22" y1="11" x2="16" y2="11" /></svg>魂册降生</a>
|
||
<a class="nav-item" data-nav="世谱" data-route="/lorebooks" href="lorebook-preview.html" title="世谱 · 世界设定"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z" /><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z" /></svg>世谱</a>
|
||
<a class="nav-item" data-nav="符文引擎" data-route="/macros" href="rune-engine-preview.html" title="符文引擎 · 占位符显化"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 3l1.9 5.8L20 11l-6.1 2.2L12 19l-1.9-5.8L4 11l6.1-2.2z" /></svg>符文引擎</a>
|
||
<a class="nav-item" data-nav="眉批" data-route="/author-notes" href="margin-notes-preview.html" title="眉批 · 深度注入"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20h9" /><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z" /></svg>眉批</a>
|
||
</div>
|
||
|
||
<div class="nav-group">
|
||
<div class="nav-group-title">内景</div>
|
||
<a class="nav-item" data-nav="世界" data-route="/world" href="world-preview.html" title="世界 · 河图绘形"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10" /><line x1="2" y1="12" x2="22" y2="12" /><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" /></svg>世界</a>
|
||
<a class="nav-item" data-nav="时态" data-route="/time" href="time-preview.html" title="时态 · 时间线"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" /></svg>时态</a>
|
||
</div>
|
||
|
||
<div class="nav-group">
|
||
<div class="nav-group-title">藏识</div>
|
||
<a class="nav-item" data-nav="记忆" data-route="/memory" href="memory-preview.html" title="记忆 · 息壤"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><ellipse cx="12" cy="5" rx="9" ry="3" /><path d="M3 5v14a9 3 0 0 0 18 0V5" /><path d="M3 12a9 3 0 0 0 18 0" /></svg>记忆</a>
|
||
<a class="nav-item" data-nav="归档" data-route="/archive" href="archive-preview.html" title="归档 · 记忆时间河"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><rect x="2" y="4" width="20" height="5" rx="1" /><path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9" /><line x1="10" y1="13" x2="14" y2="13" /></svg>归档</a>
|
||
</div>
|
||
|
||
<div class="nav-group">
|
||
<div class="nav-group-title">百工</div>
|
||
<a class="nav-item" data-nav="工具" data-route="/tools" href="tools-preview.html" title="工具调用"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" /></svg>工具</a>
|
||
<a class="nav-item" data-nav="模型网关" data-route="/models" href="model-gateway-preview.html" title="模型网关"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="2" /><rect x="9" y="9" width="6" height="6" /><path d="M9 2v2M15 2v2M9 20v2M15 20v2M2 9h2M2 15h2M20 9h2M20 15h2" /></svg>模型网关</a>
|
||
<a class="nav-item" data-nav="设置" data-route="/settings" href="settings-preview.html" title="设置"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><line x1="4" y1="21" x2="4" y2="14" /><line x1="4" y1="10" x2="4" y2="3" /><line x1="12" y1="21" x2="12" y2="12" /><line x1="12" y1="8" x2="12" y2="3" /><line x1="20" y1="21" x2="20" y2="16" /><line x1="20" y1="12" x2="20" y2="3" /><line x1="1" y1="14" x2="7" y2="14" /><line x1="9" y1="8" x2="15" y2="8" /><line x1="17" y1="16" x2="23" y2="16" /></svg>设置</a>
|
||
<a class="nav-item siming" data-nav="司命台" data-route="/admin" href="admin-preview.html" title="司命台 · 管理控制台"><svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" /></svg>司命台</a>
|
||
</div>
|
||
|
||
<div class="spacer"></div>
|
||
|
||
<!-- 底部：用户卡 + 设计系统入口 + 主题（「设置」已在百工组，不在此重复） -->
|
||
<div class="user-card">
|
||
<div class="avatar">辰</div>
|
||
<div class="info">
|
||
<div class="name">辰</div>
|
||
<div class="role">司命</div>
|
||
</div>
|
||
</div>
|
||
<a class="foot-btn" href="copper-mirror-redesign-v2.html" title="设计系统 · 北极星基准">
|
||
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10" /><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" /></svg>
|
||
<span class="foot-label">设计系统</span>
|
||
</a>
|
||
<button class="nav-item nav-theme" id="theme-toggle" type="button">
|
||
<svg class="ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" /></svg>
|
||
<span id="theme-label">夜铜</span>
|
||
</button>
|
||
</aside>
|
||
</div>
|