完善前端

2026-09-21 11:19:07 +08:00
1 parent 7c57d27494
commit b63542add3
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-theme="dark">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>神识阁 · 模型与路由 — 魂镜 Hunjing</title>
+<link rel="stylesheet" href="assets/app.css?v=10">
+</head>
+<body>
+<svg style="display:none" aria-hidden="true"><symbol id="i-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></symbol><symbol id="i-home" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 22V12h6v10"/></symbol><symbol id="i-branch" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></symbol><symbol id="i-user" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></symbol><symbol id="i-book" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></symbol><symbol id="i-layers" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></symbol><symbol id="i-kanban" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 3h4v18H5z"/><path d="M10 3h4v12h-4z"/><path d="M15 3h4v8h-4z"/></symbol><symbol id="i-package" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></symbol><symbol id="i-users" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></symbol><symbol id="i-route" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="19" r="3"/><circle cx="18" cy="5" r="3"/><path d="M12 19h4.5a3.5 3.5 0 0 0 0-7h-9a3.5 3.5 0 0 1 0-7H12"/></symbol><symbol id="i-globe" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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"/></symbol><symbol id="i-bag" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/><line x1="3" y1="6" x2="21" y2="6"/><path d="M16 10a4 4 0 0 1-8 0"/></symbol><symbol id="i-shield" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></symbol><symbol id="i-monitor" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></symbol><symbol id="i-sliders" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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"/></symbol><symbol id="i-key" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"/></symbol><symbol id="i-clock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></symbol><symbol id="i-plus" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></symbol><symbol id="i-check" vieLine truncated
+</svg>
+<div class="app">
+  <aside class="sidebar">
+    <div class="brand">
+      <div class="brand__mark" aria-hidden="true"></div>
+      <div class="brand__text">
+        <div class="brand__name">魂镜</div>
+        <div class="brand__sub">Hunjing</div>
+      </div>
+    </div>
+    <nav class="side-nav" aria-label="主导航"><div class="nav-group"><div class="nav-group__title">常用</div><a class="nav-item" href="home.html"><svg><use href="#i-home"/></svg><span class="cn">镜庭</span><span class="nav-plain">首页</span></a><a class="nav-item" href="conversation.html"><svg><use href="#i-branch"/></svg><span class="cn">镜树</span><span class="nav-plain">对话</span></a><a class="nav-item" href="characters.html"><svg><use href="#i-user"/></svg><span class="cn">镜生</span><span class="nav-plain">角色</span></a><a class="nav-item" href="memory.html"><svg><use href="#i-book"/></svg><span class="cn">息壤</span><span class="nav-plain">记忆</span></a><a class="nav-item" href="avatar.html"><svg><use href="#i-layers"/></svg><span class="cn">形仪</span><span class="nav-plain">形象</span></a></div><div class="nav-group"><div class="nav-group__title">创造</div><a class="nav-item" href="agent-workspace.html"><svg><use href="#i-kanban"/></svg><span class="cn">天工阁</span><span class="nav-plain">任务</span></a><a class="nav-item" href="plugins.html"><svg><use href="#i-package"/></svg><span class="cn">百工坊</span><span class="nav-plain">插件</span></a><a class="nav-item" href="collaboration.html"><svg><use href="#i-users"/></svg><span class="cn">同契台</span><span class="nav-plain">协作</span></a><a class="nav-item is-active" aria-current="page" href="model-gateway.html"><svg><use href="#i-route"/></svg><span class="cn">神识阁</span><span class="nav-plain">模型</span></a></div><div class="nav-group"><div class="nav-group__title">世界</div><a class="nav-item" href="community.html"><svg><use href="#i-globe"/></svg><span class="cn">雅集</span><span class="nav-plain">社区</span></a><a class="nav-item" href="marketplace.html"><svg><use href="#i-bag"/></svg><span class="cn">云市</span><span class="nav-plain">市场</span></a></div><div class="nav-group"><div class="nav-group__title">治理与账户</div><a class="nav-item" href="governance.html"><svg><use href="#i-shield"/></svg><span class="cn">司命台</span><span class="nav-plain">治理</span></a><a class="nav-item" href="devices.html"><svg><use href="#i-monitor"/></svg><span class="cn">器谱</span><span class="nav-plain">设备</span></a><a class="nav-item" href="settings.html"><svg><use href="#i-sliders"/></svg><span class="cn">设置</span><span class="nav-plain">账户</span></a></div></nav>
+    <div class="side-foot">
+      <button class="icon-btn side-fold-btn" data-sidebar-fold aria-label="收起侧栏" title="收起 / 展开侧栏（记忆偏好）"><svg><use href="#i-chevrons"/></svg></button>
+      <span class="avatar avatar--sm avatar--user">舟</span>
+      <span style="font-size:12.5px">云舟</span>
+      <button class="icon-btn" data-theme-toggle style="margin-left:auto" aria-label="切换到月白主题"><svg><use href="#i-moon"/></svg></button>
+    </div>
+  </aside>
+  <main class="main">
+    <header class="topbar">
+      <div class="crumbs"><span class="cn">神识阁</span><span class="crumbs__sep">·</span><span class="here">模型与路由</span></div>
+      <div class="topbar__spacer"></div>
+      <span class="prototype-tag">静态原型 · 待审查</span>
+      <button class="icon-btn" data-theme-toggle aria-label="切换到月白主题"><svg><use href="#i-moon"/></svg></button>
+    </header>
+    <div class="content">
+
+      <div class="realm-banner" role="note">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+        神识是角色的可替换推理能力，不等于角色身份或意识证明。首个可见输出后不切换 Provider；引擎缺失时拒绝执行（fail closed）。
+      </div>
+
+      <section class="section">
+        <div class="section__head"><span class="cn">逻辑模型<span class="cn__plain">能力目录</span></span><span class="more" style="color:var(--text-3);cursor:default">全部 9 个 · 列表即目录</span></div>
+        <div class="grid-cards">
+          <div class="card" style="gap:8px;display:flex;flex-direction:column">
+            <div style="display:flex;align-items:center;gap:8px"><b style="font-family:var(--font-serif);font-size:15px">沉潜 · 深思</b><span class="badge badge--ok" style="margin-left:auto"><span class="badge__dot"></span>可用</span></div>
+            <div style="font-size:12px;color:var(--text-3)">推理 · 128k 上下文 · 函数调用</div>
+            <div style="font-size:12.5px;color:var(--text-2)">¥12.00 / ¥48.00<small style="color:var(--text-3)"> 每 1M token（入/出）</small></div>
+            <div style="font-size:11.5px;color:var(--text-3)">价格快照 v2026-09-01 · 2 个 Endpoint · 故障转移已配置</div>
+          </div>
+          <div class="card" style="gap:8px;display:flex;flex-direction:column">
+            <div style="display:flex;align-items:center;gap:8px"><b style="font-family:var(--font-serif);font-size:15px">惊鸿 · 快速</b><span class="badge badge--ok" style="margin-left:auto"><span class="badge__dot"></span>可用</span></div>
+            <div style="font-size:12px;color:var(--text-3)">轻量 · 32k · 视觉</div>
+            <div style="font-size:12.5px;color:var(--text-2)">¥1.60 / ¥6.40<small style="color:var(--text-3)"> 每 1M token</small></div>
+            <div style="font-size:11.5px;color:var(--text-3)">会话临时选择的默认候选</div>
+          </div>
+          <div class="card" style="gap:8px;display:flex;flex-direction:column">
+            <div style="display:flex;align-items:center;gap:8px"><b style="font-family:var(--font-serif);font-size:15px">丹青 · 图像</b><span class="badge badge--warn" style="margin-left:auto"><span class="badge__dot"></span>降级中</span></div>
+            <div style="font-size:12px;color:var(--text-3)">文生图 / 图生图 · 角色一致性</div>
+            <div style="font-size:12.5px;color:var(--text-2)">¥0.24<small style="color:var(--text-3)"> / 张</small></div>
+            <div style="font-size:11.5px;color:var(--text-3)">主 Endpoint 限流 · 已切备用 · 新任务排队 ≤ 2 分钟</div>
+          </div>
+        </div>
+      </section>
+
+      <section class="section card">
+        <div class="card__head"><span class="cn">路由继承链<span class="cn__plain">上层不可被下层覆盖</span></span></div>
+        <div style="display:flex;flex-direction:column;gap:0">
+          <div class="set-row"><div class="set-row__body"><div class="set-row__t">① 平台硬边界</div><div class="set-row__d">禁用模型与绝对上限，任何下层不可逾越</div></div><span class="badge badge--ok"><span class="badge__dot"></span>生效</span></div>
+          <div class="set-row"><div class="set-row__body"><div class="set-row__t">② 平台目录</div><div class="set-row__d">默认逻辑模型与价格快照</div></div><span class="badge badge--ok"><span class="badge__dot"></span>生效</span></div>
+          <div class="set-row"><div class="set-row__body"><div class="set-row__t">③ 用户偏好 / BYOK</div><div class="set-row__d">你的默认模型与自带密钥</div></div><span class="badge badge--ok"><span class="badge__dot"></span>生效</span></div>
+          <div class="set-row"><div class="set-row__body"><div class="set-row__t">④ 角色覆写</div><div class="set-row__d">青梧未设置覆写</div></div><span class="badge badge--muted"><span class="badge__dot"></span>未设置</span></div>
+          <div class="set-row" style="background:var(--accent-soft);border-radius:var(--radius-sm);padding-left:12px;padding-right:12px"><div class="set-row__body"><div class="set-row__t">⑤ 会话临时选择 <span class="cn__plain">当前生效</span></div><div class="set-row__d">镜树「共读选篇」选择了 惊鸿 · 快速</div></div><span class="badge badge--info"><span class="badge__dot"></span>生效 <span class="mono">session</span></span></div>
+        </div>
+      </section>
+
+      <div class="two-col">
+        <section class="section card">
+          <div class="card__head"><span class="cn">BYOK<span class="cn__plain">自带模型密钥</span></span><button class="btn btn--outline btn--sm" style="margin-left:auto"><svg><use href="#i-plus"/></svg>添加密钥</button></div>
+          <div class="set-row">
+            <svg style="width:16px;height:16px;color:var(--text-3)"><use href="#i-key"/></svg>
+            <div class="set-row__body"><div class="set-row__t mono">byok_a31f…（神思 Provider）</div><div class="set-row__d">2026-08-12 添加 · 存于系统 Keychain · 不写配置与日志</div></div>
+            <button class="btn btn--ghost btn--sm">轮换</button>
+          </div>
+          <div class="set-row">
+            <svg style="width:16px;height:16px;color:var(--text-3)"><use href="#i-key"/></svg>
+            <div class="set-row__body"><div class="set-row__t mono">byok_7c02…（图像 Provider）</div><div class="set-row__d">2026-09-01 添加 · 仅丹青 · 图像使用</div></div>
+            <button class="btn btn--ghost btn--sm">轮换</button>
+          </div>
+          <p style="font-size:12px;color:var(--text-3);margin-top:10px">BYOK 调用按实际用量计费一次，不重复计费（ADR-021）；凭据只经 Header 传递，永不转发至上游之外的日志。</p>
+        </section>
+
+        <section class="section card">
+          <div class="card__head"><span class="cn">本月用量<span class="cn__plain">9 月 1–15 日</span></span><span class="more" style="color:var(--text-3);cursor:default">明细 · Run 级观测见司命台诊断</span></div>
+          <div class="bars" role="img" aria-label="近七日 token 用量条形图：周三最高 8.4 万">
+            <div class="bars__col"><div class="bars__bar" style="height:42%"></div><span class="bars__label">一</span></div>
+            <div class="bars__col"><div class="bars__bar" style="height:55%"></div><span class="bars__label">二</span></div>
+            <div class="bars__col"><div class="bars__bar" style="height:96%"></div><span class="bars__label">三</span></div>
+            <div class="bars__col"><div class="bars__bar" style="height:48%"></div><span class="bars__label">四</span></div>
+            <div class="bars__col"><div class="bars__bar" style="height:30%"></div><span class="bars__label">五</span></div>
+            <div class="bars__col"><div class="bars__bar" style="height:22%"></div><span class="bars__label">六</span></div>
+            <div class="bars__col"><div class="bars__bar" style="height:36%"></div><span class="bars__label">日</span></div>
+          </div>
+          <div class="table-wrap" style="margin-top:14px"><table class="data">
+            <thead><tr><th>指标</th><th>数值</th></tr></thead>
+            <tbody>
+              <tr><td>Token（入/出）</td><td class="mono">486k / 212k</td></tr>
+              <tr><td>Prompt Cache 命中</td><td class="mono">31%</td></tr>
+              <tr><td>P95 TTFT</td><td class="mono">1.4s</td></tr>
+              <tr><td>费用</td><td class="mono">¥18.64</td></tr>
+              <tr><td>错误 / 重试</td><td class="mono">2 / 1</td></tr>
+              <tr><td>未知 usage 记录</td><td class="mono">null（不猜测）</td></tr>
+            </tbody>
+          </table></div>
+        </section>
+      </div>
+
+    </div>
+  </main>
+</div>
+<script src="assets/app.js?v=3"></script>
+</body>
+</html>