初始化提交

This commit is contained in:
chenxin committed 2026-08-21 16:00:13 +08:00
commit 887c1f449e
963 files changed
+166869

No files matched your search

+803
View File
@@ -0,0 +1,803 @@
<!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>