804 lines
24 KiB
HTML
804 lines
24 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN" data-theme="dark">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>魂镜 · 轨迹页设计预览</title>
|
||
<link rel="stylesheet" href="tokens.css" />
|
||
<link rel="stylesheet" href="_base.css" />
|
||
<link rel="stylesheet" href="_chrome.css" />
|
||
<style>
|
||
/* ============================================================
|
||
* 铜镜鉴心 v2.1 — 与 chat-redesign-preview.html / 登录页同源
|
||
* 轨迹页：一次九枢运行 = 一卦六爻的旅程
|
||
* ============================================================ */
|
||
|
||
/* 页眉 */ — 预览态固定展开，以呈现导航上下文
|
||
* ============================================================ */
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
/* ============================================================
|
||
* 主区
|
||
* ============================================================ */
|
||
|
||
/* 页眉 */
|
||
|
||
.run-id {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 12.5px;
|
||
color: var(--fg-faint);
|
||
padding: 3px 10px;
|
||
border: 1px solid var(--rule);
|
||
border-radius: 999px;
|
||
}
|
||
.page-header .spacer {
|
||
flex: 1;
|
||
}
|
||
.trace-link {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 12px;
|
||
color: var(--gilt);
|
||
text-decoration: none;
|
||
padding: 4px 11px;
|
||
border: 1px solid var(--gilt-dim);
|
||
border-radius: 999px;
|
||
background: var(--gilt-faint);
|
||
transition: border-color 0.15s, color 0.15s;
|
||
}
|
||
.trace-link:hover {
|
||
border-color: var(--gilt);
|
||
color: var(--fg);
|
||
}
|
||
|
||
/* 状态徽章 */
|
||
.badge {
|
||
font-size: 12px;
|
||
padding: 2px 10px;
|
||
border-radius: 999px;
|
||
font-weight: 500;
|
||
letter-spacing: 0.02em;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
white-space: nowrap;
|
||
border: 1px solid transparent;
|
||
}
|
||
.badge-dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
flex-shrink: 0;
|
||
}
|
||
.badge-warning {
|
||
background: var(--gilt-faint);
|
||
color: var(--gilt);
|
||
border-color: var(--gilt-dim);
|
||
}
|
||
.badge-success {
|
||
background: var(--patina-wash);
|
||
color: var(--patina);
|
||
border-color: var(--patina-dim);
|
||
}
|
||
.badge-danger {
|
||
background: rgba(184, 57, 46, 0.12);
|
||
color: var(--cinnabar);
|
||
border-color: var(--cinnabar-dim);
|
||
}
|
||
.badge-neutral {
|
||
background: var(--surface);
|
||
color: var(--fg-dim);
|
||
border-color: var(--rule);
|
||
}
|
||
.pulse-dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: var(--gilt);
|
||
flex-shrink: 0;
|
||
animation: pulse 2.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
|
||
}
|
||
@keyframes pulse {
|
||
0% {
|
||
box-shadow: 0 0 0 0 rgba(201, 162, 74, 0.5);
|
||
}
|
||
70% {
|
||
box-shadow: 0 0 0 6px transparent;
|
||
}
|
||
100% {
|
||
box-shadow: 0 0 0 0 transparent;
|
||
}
|
||
}
|
||
|
||
/* 正文区 */
|
||
|
||
/* 概览统计条 */
|
||
.stat-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 10px;
|
||
}
|
||
.stat-mini {
|
||
background: var(--surface);
|
||
border: 1px solid var(--rule);
|
||
border-radius: 6px;
|
||
padding: 12px 14px;
|
||
}
|
||
.stat-mini .k {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 11px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
color: var(--fg-faint);
|
||
}
|
||
.stat-mini .v {
|
||
font-size: 19px;
|
||
font-weight: 600;
|
||
color: var(--fg);
|
||
margin-top: 4px;
|
||
font-family: "Songti SC", serif;
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 4px;
|
||
}
|
||
.stat-mini .v small {
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
color: var(--fg-dim);
|
||
font-family: "JetBrains Mono", monospace;
|
||
}
|
||
|
||
/* 两栏：轨迹脊柱 + 语境轨 */
|
||
.trace-region {
|
||
display: flex;
|
||
gap: 20px;
|
||
align-items: flex-start;
|
||
}
|
||
.trace-spine {
|
||
flex: 1;
|
||
min-width: 0;
|
||
background: var(--surface);
|
||
border: 1px solid var(--rule);
|
||
border-radius: 8px;
|
||
padding: 22px 24px 26px;
|
||
}
|
||
.context-rail {
|
||
width: 300px;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
}
|
||
|
||
.section-label .sub {
|
||
font-size: 12px;
|
||
letter-spacing: 0.04em;
|
||
color: var(--fg-dim);
|
||
opacity: 0.75;
|
||
}
|
||
.section-label .glyph {
|
||
color: var(--gilt);
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* ── 六爻脊柱（签名）──
|
||
初→上 六阶，每阶一爻象 + 站名 + 旁出事件。
|
||
爻象三态：阳爻(已过·铜绿实) / 动爻(当爻·鎏金流光) / 阴爻(未达·虚线)。 */
|
||
.hex-spine {
|
||
position: relative;
|
||
padding-left: 0;
|
||
}
|
||
.yao-stage {
|
||
position: relative;
|
||
padding-left: 44px;
|
||
padding-bottom: 4px;
|
||
}
|
||
.yao-stage + .yao-stage {
|
||
padding-top: 18px;
|
||
}
|
||
/* 脊柱竖线：贯穿所有爻节左侧 */
|
||
.hex-spine::before {
|
||
content: "";
|
||
position: absolute;
|
||
left: 17px;
|
||
top: 12px;
|
||
bottom: 12px;
|
||
width: 1px;
|
||
background: linear-gradient(
|
||
180deg,
|
||
var(--patina-dim),
|
||
var(--rule) 30%,
|
||
var(--rule) 70%,
|
||
transparent
|
||
);
|
||
}
|
||
/* 爻节圆点 */
|
||
.yao-node {
|
||
position: absolute;
|
||
left: 11px;
|
||
top: 6px;
|
||
width: 13px;
|
||
height: 13px;
|
||
border-radius: 50%;
|
||
background: var(--ink);
|
||
border: 1.5px solid var(--fg-faint);
|
||
z-index: 1;
|
||
}
|
||
.yao-stage.done .yao-node {
|
||
background: var(--patina);
|
||
border-color: var(--patina);
|
||
}
|
||
.yao-stage.active .yao-node {
|
||
background: var(--ink);
|
||
border: 2px solid var(--gilt);
|
||
box-shadow: 0 0 0 4px var(--gilt-faint);
|
||
animation: node-pulse 2.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
|
||
}
|
||
@keyframes node-pulse {
|
||
0% {
|
||
box-shadow: 0 0 0 4px var(--gilt-faint);
|
||
}
|
||
70% {
|
||
box-shadow: 0 0 0 9px transparent;
|
||
}
|
||
100% {
|
||
box-shadow: 0 0 0 4px var(--gilt-faint);
|
||
}
|
||
}
|
||
|
||
.yao-head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 8px;
|
||
}
|
||
.yao-idx {
|
||
font-family: "Songti SC", serif;
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
color: var(--fg-faint);
|
||
width: 16px;
|
||
text-align: center;
|
||
flex-shrink: 0;
|
||
}
|
||
.yao-stage.done .yao-idx {
|
||
color: var(--patina);
|
||
}
|
||
.yao-stage.active .yao-idx {
|
||
color: var(--gilt);
|
||
}
|
||
.yao-name {
|
||
font-family: "Songti SC", serif;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: var(--fg-dim);
|
||
letter-spacing: 0.04em;
|
||
}
|
||
.yao-stage.done .yao-name {
|
||
color: var(--fg);
|
||
}
|
||
.yao-stage.active .yao-name {
|
||
color: var(--gilt);
|
||
}
|
||
.yao-sub {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 11px;
|
||
color: var(--fg-faint);
|
||
letter-spacing: 0.06em;
|
||
margin-left: 4px;
|
||
}
|
||
/* 爻象条：阳爻实 / 阴爻虚（与对话页六爻同构） */
|
||
.yao-bar {
|
||
height: 6px;
|
||
width: 54px;
|
||
border-radius: 2px;
|
||
flex-shrink: 0;
|
||
margin-left: auto;
|
||
overflow: hidden;
|
||
}
|
||
.yao-stage.pending .yao-bar {
|
||
background: repeating-linear-gradient(
|
||
90deg,
|
||
var(--rule) 0 4px,
|
||
transparent 4px 8px
|
||
);
|
||
}
|
||
.yao-stage.done .yao-bar {
|
||
background: linear-gradient(90deg, var(--patina-dim), var(--patina));
|
||
}
|
||
.yao-stage.active .yao-bar {
|
||
background: linear-gradient(
|
||
90deg,
|
||
var(--gilt-dim),
|
||
var(--gilt),
|
||
var(--gilt-dim)
|
||
);
|
||
background-size: 200% 100%;
|
||
animation: hex-shimmer 2.4s linear infinite;
|
||
}
|
||
@keyframes hex-shimmer {
|
||
0% {
|
||
background-position: 200% 0;
|
||
}
|
||
100% {
|
||
background-position: -200% 0;
|
||
}
|
||
}
|
||
|
||
/* 爻下事件丝蔓 */
|
||
.yao-events {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
.ev {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 9px;
|
||
padding: 6px 10px;
|
||
border-radius: 5px;
|
||
background: var(--patina-wash);
|
||
border: 1px solid var(--rule);
|
||
font-size: 12.5px;
|
||
line-height: 1.5;
|
||
}
|
||
.ev.warn {
|
||
background: var(--gilt-faint);
|
||
border-color: var(--gilt-dim);
|
||
}
|
||
.ev.risk {
|
||
background: rgba(184, 57, 46, 0.1);
|
||
border-color: var(--cinnabar-dim);
|
||
}
|
||
.ev-tag {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 11px;
|
||
color: var(--patina);
|
||
flex-shrink: 0;
|
||
padding-top: 1px;
|
||
white-space: nowrap;
|
||
}
|
||
.ev.warn .ev-tag {
|
||
color: var(--gilt);
|
||
}
|
||
.ev.risk .ev-tag {
|
||
color: var(--cinnabar);
|
||
}
|
||
.ev-time {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 11px;
|
||
color: var(--fg-faint);
|
||
margin-left: auto;
|
||
padding-top: 1px;
|
||
white-space: nowrap;
|
||
flex-shrink: 0;
|
||
}
|
||
.ev-body {
|
||
color: var(--fg-dim);
|
||
min-width: 0;
|
||
}
|
||
.ev-body .mono-line {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 11.5px;
|
||
color: var(--fg-faint);
|
||
margin-top: 3px;
|
||
word-break: break-all;
|
||
}
|
||
|
||
/* 待确认行止卡（动爻处的特化事件） */
|
||
.halt-card {
|
||
margin-top: 8px;
|
||
border: 1px solid var(--cinnabar-dim);
|
||
border-left: 3px solid var(--cinnabar);
|
||
border-radius: 5px;
|
||
padding: 13px 15px;
|
||
background:
|
||
radial-gradient(
|
||
120% 100% at 0% 0%,
|
||
rgba(184, 57, 46, 0.14),
|
||
transparent 60%
|
||
),
|
||
var(--surface);
|
||
}
|
||
.halt-card .vh {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 7px;
|
||
}
|
||
.halt-card .seal {
|
||
font-family: "Songti SC", serif;
|
||
color: var(--cinnabar);
|
||
font-weight: 700;
|
||
font-size: 14px;
|
||
letter-spacing: 0.06em;
|
||
}
|
||
.halt-card .risk {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 11px;
|
||
color: var(--cinnabar);
|
||
opacity: 0.75;
|
||
margin-left: auto;
|
||
}
|
||
.halt-card .vb {
|
||
font-size: 13px;
|
||
color: var(--fg);
|
||
line-height: 1.6;
|
||
}
|
||
.halt-card .vb code {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 12px;
|
||
color: var(--gilt);
|
||
background: var(--gilt-faint);
|
||
padding: 1px 5px;
|
||
border-radius: 3px;
|
||
}
|
||
.halt-card .va {
|
||
display: flex;
|
||
gap: 8px;
|
||
margin-top: 11px;
|
||
}
|
||
.vbtn {
|
||
font-family: inherit;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
padding: 6px 14px;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
border: 1px solid var(--rule);
|
||
background: transparent;
|
||
color: var(--fg);
|
||
transition: background 0.12s, border-color 0.12s;
|
||
}
|
||
.vbtn:hover {
|
||
background: var(--surface-hi);
|
||
}
|
||
.vbtn.cinnabar {
|
||
border-color: var(--cinnabar);
|
||
color: var(--cinnabar);
|
||
background: rgba(184, 57, 46, 0.08);
|
||
}
|
||
.vbtn.cinnabar:hover {
|
||
background: rgba(184, 57, 46, 0.16);
|
||
}
|
||
|
||
/* 语境轨：行运语境卡 */
|
||
.ctx-card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--rule);
|
||
border-radius: 8px;
|
||
padding: 16px 18px;
|
||
}
|
||
.ctx-card .ctx-title {
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 11px;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
color: var(--fg-faint);
|
||
margin-bottom: 12px;
|
||
}
|
||
.ctx-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 7px 0;
|
||
border-top: 1px solid var(--rule);
|
||
font-size: 13px;
|
||
}
|
||
.ctx-row:first-of-type {
|
||
border-top: none;
|
||
}
|
||
.ctx-row .k {
|
||
color: var(--fg-faint);
|
||
font-size: 12px;
|
||
}
|
||
.ctx-row .v {
|
||
color: var(--fg);
|
||
font-family: "JetBrains Mono", monospace;
|
||
font-size: 12.5px;
|
||
text-align: right;
|
||
}
|
||
.ctx-row .v.serif {
|
||
font-family: "Songti SC", serif;
|
||
font-size: 14px;
|
||
}
|
||
.ctx-goal {
|
||
font-family: "Songti SC", serif;
|
||
font-size: 14px;
|
||
line-height: 1.6;
|
||
color: var(--fg);
|
||
padding: 10px 0 4px;
|
||
}
|
||
|
||
/* 用量条 */
|
||
.usage-bar {
|
||
margin-top: 10px;
|
||
height: 5px;
|
||
border-radius: 3px;
|
||
background: var(--rule);
|
||
overflow: hidden;
|
||
display: flex;
|
||
}
|
||
.usage-bar .seg-in {
|
||
background: var(--patina-dim);
|
||
}
|
||
.usage-bar .seg-out {
|
||
background: var(--gilt-dim);
|
||
}
|
||
|
||
@media (max-width: 1000px) {
|
||
.trace-region {
|
||
flex-direction: column;
|
||
}
|
||
.context-rail {
|
||
width: 100%;
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
}
|
||
.context-rail .ctx-card {
|
||
flex: 1;
|
||
min-width: 240px;
|
||
}
|
||
.stat-row {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="app-shell">
|
||
<!-- ════════ 侧栏（展开态） ════════ -->
|
||
<div class="sidebar-mount" data-active="轨迹"></div>
|
||
|
||
<!-- ════════ 主区 ════════ -->
|
||
<div class="main-area">
|
||
<!-- 页眉 -->
|
||
<div class="page-header">
|
||
<span class="page-title">轨迹</span>
|
||
<span class="run-id">run_01JZK4M7Q9X3BN8RT2PVH6CYD0</span>
|
||
<span class="badge badge-warning">
|
||
<span class="badge-dot" style="background: var(--gilt)"></span>
|
||
待确认
|
||
</span>
|
||
<span class="spacer"></span>
|
||
<a href="#" class="trace-link">
|
||
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3L3 6l3 3M3 6h7a3 3 0 0 1 3 3v1" /></svg>
|
||
trace_01JZK4M7Q9
|
||
</a>
|
||
</div>
|
||
|
||
<!-- 正文 -->
|
||
<div class="page-body">
|
||
<!-- 概览统计 -->
|
||
<div class="stat-row">
|
||
<div class="stat-mini">
|
||
<div class="k">阶段</div>
|
||
<div class="v">四<span class="sub">/ 六爻 · 行事</span></div>
|
||
</div>
|
||
<div class="stat-mini">
|
||
<div class="k">耗时</div>
|
||
<div class="v">3.2<small>s · 进行中</small></div>
|
||
</div>
|
||
<div class="stat-mini">
|
||
<div class="k">事件</div>
|
||
<div class="v">8<small>条 · 0 心跳</small></div>
|
||
</div>
|
||
<div class="stat-mini">
|
||
<div class="k">token</div>
|
||
<div class="v">1,376<small>入 1284 / 出 92</small></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 轨迹脊柱 + 语境轨 -->
|
||
<div class="trace-region">
|
||
<!-- 六爻脊柱（签名元素） -->
|
||
<div class="trace-spine">
|
||
<div class="section-label">
|
||
<span class="glyph">⟡</span> 六爻 <span class="sub">本次运行之行止</span>
|
||
</div>
|
||
|
||
<div class="hex-spine">
|
||
<!-- 初 · 起意（done） -->
|
||
<div class="yao-stage done">
|
||
<span class="yao-node"></span>
|
||
<div class="yao-head">
|
||
<span class="yao-idx">初</span>
|
||
<span class="yao-name">起意</span>
|
||
<span class="yao-sub">intent</span>
|
||
<span class="yao-bar"></span>
|
||
</div>
|
||
<div class="yao-events">
|
||
<div class="ev">
|
||
<span class="ev-tag">run.started</span>
|
||
<span class="ev-body">行运启程，源起 <em style="font-style: normal; color: var(--fg)">chat.message</em></span>
|
||
<span class="ev-time">14:02:01</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 二 · 察势（done） -->
|
||
<div class="yao-stage done">
|
||
<span class="yao-node"></span>
|
||
<div class="yao-head">
|
||
<span class="yao-idx">二</span>
|
||
<span class="yao-name">察势</span>
|
||
<span class="yao-sub">perceive</span>
|
||
<span class="yao-bar"></span>
|
||
</div>
|
||
<div class="yao-events">
|
||
<div class="ev">
|
||
<span class="ev-tag">memory.retrieved</span>
|
||
<span class="ev-body">
|
||
检出 4 条相关记忆，用于本次回应
|
||
<div class="mono-line">偏好简短回复 · 置信 0.88 · 近期睡眠偏晚 · 0.75</div>
|
||
</span>
|
||
<span class="ev-time">14:02:02</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 三 · 定策（done） -->
|
||
<div class="yao-stage done">
|
||
<span class="yao-node"></span>
|
||
<div class="yao-head">
|
||
<span class="yao-idx">三</span>
|
||
<span class="yao-name">定策</span>
|
||
<span class="yao-sub">plan · 洛书规划</span>
|
||
<span class="yao-bar"></span>
|
||
</div>
|
||
<div class="yao-events">
|
||
<div class="ev warn">
|
||
<span class="ev-tag">safety.decision</span>
|
||
<span class="ev-body">司命预检 · L1 浅描 · 准予通行</span>
|
||
<span class="ev-time">14:02:03</span>
|
||
</div>
|
||
<div class="ev">
|
||
<span class="ev-tag">plan.created</span>
|
||
<span class="ev-body">洛书 ReAct 规划完成，拟先落栈记忆再简短回应</span>
|
||
<span class="ev-time">14:02:04</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 四 · 行事（active · 当爻） -->
|
||
<div class="yao-stage active">
|
||
<span class="yao-node"></span>
|
||
<div class="yao-head">
|
||
<span class="yao-idx">四</span>
|
||
<span class="yao-name">行事</span>
|
||
<span class="yao-sub">act · 当爻</span>
|
||
<span class="yao-bar"></span>
|
||
</div>
|
||
<div class="yao-events">
|
||
<div class="ev warn">
|
||
<span class="ev-tag">tool.requires_confirmation</span>
|
||
<span class="ev-body">工具 <code style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--gilt)">memory.write</code> 请求落栈一条记忆，需你确认</span>
|
||
<span class="ev-time">14:02:05</span>
|
||
</div>
|
||
<!-- 待确认行止卡 -->
|
||
<div class="halt-card">
|
||
<div class="vh">
|
||
<span class="seal">行止待裁</span>
|
||
<span class="risk">REQUIRES_CONFIRMATION</span>
|
||
</div>
|
||
<div class="vb">
|
||
青梧欲将「用户近期睡眠偏晚」写入长期记忆。此条来自上下文推断，置信 0.75，敏感度 <code>personal</code>。
|
||
</div>
|
||
<div class="va">
|
||
<button class="vbtn cinnabar" type="button">准予落栈</button>
|
||
<button class="vbtn" type="button">驳回</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 五 · 归真（pending） -->
|
||
<div class="yao-stage pending">
|
||
<span class="yao-node"></span>
|
||
<div class="yao-head">
|
||
<span class="yao-idx">五</span>
|
||
<span class="yao-name">成象</span>
|
||
<span class="yao-sub">manifest · 神识推理 + 言灵 · 未达</span>
|
||
<span class="yao-bar"></span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 上 · 入藏（pending） -->
|
||
<div class="yao-stage pending">
|
||
<span class="yao-node"></span>
|
||
<div class="yao-head">
|
||
<span class="yao-idx">上</span>
|
||
<span class="yao-name">返照</span>
|
||
<span class="yao-sub">reflect · 记忆候选 + 反思 · 未达</span>
|
||
<span class="yao-bar"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 语境轨 -->
|
||
<div class="context-rail">
|
||
<div class="ctx-card">
|
||
<div class="ctx-title">行运语境</div>
|
||
<div class="ctx-row">
|
||
<span class="k">人物</span>
|
||
<span class="v serif">青梧</span>
|
||
</div>
|
||
<div class="ctx-row">
|
||
<span class="k">模型</span>
|
||
<span class="v">claude-sonnet-5</span>
|
||
</div>
|
||
<div class="ctx-row">
|
||
<span class="k">来源</span>
|
||
<span class="v">chat.message</span>
|
||
</div>
|
||
<div class="ctx-row">
|
||
<span class="k">会话</span>
|
||
<span class="v">session_01JZ…A8</span>
|
||
</div>
|
||
<div class="ctx-row">
|
||
<span class="k">启程</span>
|
||
<span class="v">14:02:01</span>
|
||
</div>
|
||
<div class="ctx-row">
|
||
<span class="k">最近</span>
|
||
<span class="v">14:02:05</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ctx-card">
|
||
<div class="ctx-title">所图</div>
|
||
<p class="ctx-goal">为青梧设定回应中的边界感。察觉用户疲惫时，不过度追问，以简短承托。</p>
|
||
</div>
|
||
|
||
<div class="ctx-card">
|
||
<div class="ctx-title">用量</div>
|
||
<div class="ctx-row" style="border-top: none">
|
||
<span class="k">输入</span>
|
||
<span class="v">1,284 tok</span>
|
||
</div>
|
||
<div class="usage-bar">
|
||
<span class="seg-in" style="width: 93%"></span>
|
||
<span class="seg-out" style="width: 7%"></span>
|
||
</div>
|
||
<div class="ctx-row">
|
||
<span class="k">输出</span>
|
||
<span class="v">92 tok</span>
|
||
</div>
|
||
<div class="ctx-row">
|
||
<span class="k">合计</span>
|
||
<span class="v" style="color: var(--gilt)">1,376 tok</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="_theme.js" defer></script>
|
||
|
||
</body>
|
||
</html>
|