Files
hunjing/frontend/design/evolution-preview.html
T
2026-08-21 16:00:13 +08:00

333 lines
24 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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 — 演化页:周天四镜 + 候选层积 + 朱砂待裁 + 应用沉积
* 字段对齐 docs/domain/core-domains.md §5(evolution_candidates)
* 与 contract-glossary.md §12(演化候选枚举)。
* ============================================================ */
/* ── 侧栏(active=演化)── */
/* ── 主区 ── */
.char-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--patina); padding: 3px 11px 3px 4px; border: 1px solid var(--patina-dim); border-radius: 999px; background: var(--patina-wash); }
.char-pill .avatar-mini { width: 18px; height: 18px; border-radius: 50%; background: var(--patina); color: var(--ink); display: flex; align-items: center; justify-content: center; font-family: "Songti SC", serif; font-size: 11px; font-weight: 600; }
.page-header .spacer { flex: 1; }
.page-meta { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--fg-faint); }
.page-meta b { color: var(--gilt); font-weight: 600; font-family: "Songti SC", serif; font-size: 15px; }
.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; }
/* ═══ 周天四镜(签名 · 大周天阶段链)═══
评估 → 演化 → 候选 → 记忆,四面小铜镜横向串联。
铜镜三态:done 铜绿、active 鎏金流光、pending 镜背虚。 */
.cycle-card { position: relative; overflow: hidden; border: 1px solid var(--gilt-dim); border-radius: 8px; background: var(--face-sheen), var(--surface); box-shadow: inset 0 1px 0 var(--face-in-top), inset 0 -1px 0 var(--face-in-bot), var(--shadow); padding: 22px 26px 20px; }
.cycle-card::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); opacity: 0.018; mix-blend-mode: overlay; }
.cycle-card > * { position: relative; z-index: 1; }
.cycle-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.cycle-title { font-family: "Songti SC", serif; font-size: 16px; font-weight: 600; color: var(--fg); letter-spacing: 0.04em; }
.cycle-id { font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--fg-faint); }
.cycle-state { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--gilt); padding: 3px 10px; border: 1px solid var(--gilt-dim); border-radius: 999px; background: var(--gilt-faint); }
.mirror-chain { display: flex; align-items: stretch; gap: 0; }
.mc-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 6px; min-width: 0; }
.mc-mirror { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; }
.mc-mirror .disc { width: 100%; height: 100%; border-radius: 50%; border: 1.5px solid var(--fg-faint); background: transparent; display: flex; align-items: center; justify-content: center; font-family: "Songti SC", serif; font-size: 15px; font-weight: 700; color: var(--fg-faint); }
.mc-step.done .mc-mirror .disc { border-color: var(--patina-dim); background: var(--patina-wash); color: var(--patina); }
.mc-step.active .mc-mirror { }
.mc-step.active .mc-mirror .disc { border-color: var(--gilt); background: radial-gradient(circle at 38% 32%, rgba(255,255,255,0.32), transparent 60%), linear-gradient(160deg, var(--gilt), rgba(201,162,74,0.55)); color: var(--ink); box-shadow: 0 0 0 4px var(--gilt-faint), 0 0 22px -4px rgba(201,162,74,0.5); animation: node-pulse 2.6s cubic-bezier(0.16,1,0.3,1) infinite; }
.mc-step.active .mc-mirror::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 1px dashed var(--gilt-dim); opacity: 0.6; }
@keyframes node-pulse { 0% { box-shadow: 0 0 0 4px var(--gilt-faint), 0 0 22px -4px rgba(201,162,74,0.5); } 70% { box-shadow: 0 0 0 9px transparent, 0 0 22px -4px rgba(201,162,74,0.5); } 100% { box-shadow: 0 0 0 4px var(--gilt-faint), 0 0 22px -4px rgba(201,162,74,0.5); } }
.mc-name { font-family: "Songti SC", serif; font-size: 13.5px; font-weight: 600; color: var(--fg-faint); letter-spacing: 0.04em; }
.mc-step.done .mc-name { color: var(--fg-dim); }
.mc-step.active .mc-name { color: var(--gilt); }
.mc-sub { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--fg-faint); letter-spacing: 0.04em; }
.mc-yield { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--patina); }
.mc-step.active .mc-yield { color: var(--gilt); }
.mc-link { align-self: center; margin-top: 18px; width: 22px; height: 1.5px; background: var(--rule); flex-shrink: 0; }
.mc-link.done { background: var(--patina-dim); }
/* 态势快照 */
.snapshot-row { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.snap-mini .k { font-family: "JetBrains Mono", monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-faint); }
.snap-mini .v { font-family: "Songti SC", serif; font-size: 17px; font-weight: 600; color: var(--fg); margin-top: 3px; display: flex; align-items: baseline; gap: 4px; }
.snap-mini .v small { font-size: 11px; font-weight: 400; color: var(--fg-dim); font-family: "JetBrains Mono", monospace; }
.snap-verdict { grid-column: 1 / -1; margin-top: 6px; padding: 11px 14px; border-left: 2px solid var(--gilt-dim); background: var(--gilt-faint); border-radius: 0 5px 5px 0; font-size: 13px; color: var(--fg-dim); line-height: 1.6; }
.snap-verdict b { font-family: "Songti SC", serif; color: var(--gilt); font-weight: 600; }
/* ═══ 候选层积(主区 + 应用沉积侧栏)═══ */
.lower-region { display: flex; gap: 20px; align-items: flex-start; }
.cand-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.strata-rail { width: 290px; flex-shrink: 0; }
/* 朱砂待裁卡(L4)*/
.proposal { border: 1px solid var(--cinnabar); border-left: 3px solid var(--cinnabar); border-radius: 6px; padding: 17px 20px; background: radial-gradient(120% 100% at 0% 0%, rgba(184, 57, 46, 0.22), transparent 55%), rgba(184, 57, 46, 0.1); box-shadow: 0 0 28px -8px rgba(184, 57, 46, 0.35); }
.prop-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; flex-wrap: wrap; }
.prop-seal { font-family: "Songti SC", serif; color: var(--cinnabar); font-weight: 700; font-size: 14.5px; letter-spacing: 0.08em; }
.prop-type { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--fg-dim); padding: 2px 8px; border: 1px solid var(--rule); border-radius: 999px; }
.prop-risk { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--cinnabar); opacity: 0.78; margin-left: auto; }
.prop-title { font-family: "Songti SC", serif; font-size: 15px; font-weight: 600; color: var(--fg); margin-bottom: 8px; }
.prop-reason { font-size: 13px; color: var(--fg); line-height: 1.65; margin-bottom: 12px; }
.prop-diff { background: rgba(0, 0, 0, 0.18); border: 1px solid var(--cinnabar-dim); border-radius: 4px; padding: 10px 12px; font-size: 12.5px; line-height: 1.6; margin-bottom: 12px; }
[data-theme="light"] .prop-diff { background: rgba(255, 248, 235, 0.6); }
.prop-diff .del { color: var(--cinnabar); text-decoration: line-through; opacity: 0.7; }
.prop-diff .add { color: var(--patina); }
.prop-diff .field-tag { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--gilt); display: block; margin-bottom: 4px; letter-spacing: 0.06em; }
.prop-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.evi-link { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--fg-faint); padding: 2px 7px; border: 1px solid var(--rule); border-radius: 3px; }
.prop-actions { display: flex; gap: 8px; margin-left: auto; }
.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); }
/* 候选卡(非朱砂)*/
.cand-list { display: flex; flex-direction: column; gap: 10px; }
.cand-card { border: 1px solid var(--rule); border-radius: 7px; padding: 14px 16px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; transition: border-color 0.15s; }
.cand-card:hover { border-color: var(--gilt-dim); }
.cand-card.auto { border-left: 3px solid var(--patina-dim); }
.cand-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cand-glyph { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gilt-dim); background: var(--gilt-faint); font-family: "Songti SC", serif; font-size: 13px; font-weight: 700; color: var(--gilt); }
.cand-card.auto .cand-glyph { border-color: var(--patina-dim); background: var(--patina-wash); color: var(--patina); }
.cand-title { font-family: "Songti SC", serif; font-size: 14.5px; font-weight: 600; color: var(--fg); }
.cand-tag { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--fg-faint); padding: 2px 8px; border: 1px solid var(--rule); border-radius: 999px; }
.cand-judge { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.04em; white-space: nowrap; }
.cand-judge.auto { color: var(--patina); }
.cand-judge.manual { color: var(--cinnabar); opacity: 0.85; }
.cand-desc { font-size: 13px; color: var(--fg-dim); line-height: 1.6; }
/* 三维评分 */
.score-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.score .k { font-family: "JetBrains Mono", monospace; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-faint); }
.score .track { margin-top: 4px; height: 4px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.score .fill { height: 100%; border-radius: 2px; }
.score.benefit .fill { background: linear-gradient(90deg, var(--patina-dim), var(--patina)); }
.score.risk .fill { background: linear-gradient(90deg, var(--gilt-dim), var(--cinnabar)); }
.score.conf .fill { background: linear-gradient(90deg, var(--gilt-dim), var(--gilt)); }
.score .tv { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--fg-dim); margin-top: 3px; }
/* 应用沉积(右栏,复用层积样式)*/
.strata-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 18px 18px 16px; }
.strata-list { position: relative; }
.strata-list::before { content: ""; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(180deg, var(--patina-dim), var(--rule) 50%, transparent); }
.stratum { position: relative; padding: 10px 0 10px 32px; }
.stratum + .stratum { border-top: 1px dashed var(--rule); }
.stratum .node { position: absolute; left: 6px; top: 14px; width: 11px; height: 11px; border-radius: 50%; background: var(--patina-dim); border: 1.5px solid var(--patina-dim); z-index: 1; }
.stratum.rejected .node { background: transparent; border-color: var(--cinnabar-dim); border-style: dashed; }
.stratum-head { display: flex; align-items: baseline; gap: 8px; }
.stratum-ver { font-family: "Songti SC", serif; font-size: 14px; font-weight: 600; color: var(--fg); }
.stratum.rejected .stratum-ver { color: var(--fg-dim); text-decoration: line-through; opacity: 0.7; }
.stratum-when { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--fg-faint); margin-left: auto; }
.stratum-reason { font-size: 12px; color: var(--fg-dim); margin-top: 3px; line-height: 1.5; }
.stratum-rollback { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--gilt); margin-top: 5px; cursor: pointer; border: none; background: none; padding: 0; }
.stratum-rollback:hover { color: var(--cinnabar); }
@media (max-width: 1080px) { .lower-region { flex-direction: column; } .strata-rail { width: 100%; } }
@media (max-width: 900px) { .snapshot-row { grid-template-columns: repeat(2, 1fr); } .mc-link { width: 14px; } }
@media (max-width: 768px) { .sidebar-wrap { display: none; } .page-body { padding: 18px 16px 40px; } .mirror-chain { gap: 2px; } .mc-link { display: none; } }
</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="page-sub">大周天 · 演化候选</span>
<span class="char-pill"><span class="avatar-mini">梧</span>青梧</span>
<span class="spacer"></span>
<span class="page-meta">待裁 <b>1</b> · 半自动 <b style="color: var(--patina)">2</b> · 已应用 <b>4</b></span>
<button class="btn-ghost" type="button">立即触发一轮</button>
</div>
<div class="page-body">
<!-- 周天四镜(签名) -->
<div class="cycle-card">
<div class="cycle-head">
<span class="cycle-title">大周天 · 候选阶段</span>
<span class="cycle-id">cycle_01JZK7Q3B…4F · 触发自会话结束</span>
<span class="cycle-state">候选生成中</span>
</div>
<div class="mirror-chain">
<div class="mc-step done">
<div class="mc-mirror"><div class="disc">评</div></div>
<span class="mc-name">评估</span>
<span class="mc-sub">evaluation</span>
<span class="mc-yield">态势 ✓</span>
</div>
<span class="mc-link done"></span>
<div class="mc-step done">
<div class="mc-mirror"><div class="disc">演</div></div>
<span class="mc-name">演化</span>
<span class="mc-sub">evolution</span>
<span class="mc-yield">策略 ✓</span>
</div>
<span class="mc-link done"></span>
<div class="mc-step active">
<div class="mc-mirror"><div class="disc">候</div></div>
<span class="mc-name">候选</span>
<span class="mc-sub">candidate · 当阶</span>
<span class="mc-yield">3 条草拟</span>
</div>
<span class="mc-link"></span>
<div class="mc-step">
<div class="mc-mirror"><div class="disc">藏</div></div>
<span class="mc-name">入藏</span>
<span class="mc-sub">memory · 未达</span>
<span class="mc-yield">-</span>
</div>
</div>
<div class="snapshot-row">
<div class="snap-mini"><div class="k">最近记忆</div><div class="v">12<small>条入参</small></div></div>
<div class="snap-mini"><div class="k">人格版本</div><div class="v">v7<small>当前</small></div></div>
<div class="snap-mini"><div class="k">世界实体</div><div class="v">23<small>个</small></div></div>
<div class="snap-mini"><div class="k">内驱力</div><div class="v">2<small>条好奇</small></div></div>
<div class="snap-verdict"><b>评估结论:</b>近 12 条记忆呈「回应偏长」信号,可收敛风格字段;身份画稳定,无核心变更必要。建议生成 1 条风格类半自动候选,其余维持现状。</div>
</div>
</div>
<!-- 候选层积 + 应用沉积 -->
<div class="lower-region">
<div class="cand-main">
<!-- 朱砂待裁(L4) -->
<section>
<div class="section-label"><span class="glyph">⟡</span> 待裁 <span class="sub">L4 核心变更须人工裁定方可写入</span></div>
<div class="proposal">
<div class="prop-head">
<span class="prop-seal">朱批待裁</span>
<span class="prop-type">personality · identity</span>
<span class="prop-risk">L4 · 满朱 · 须人工</span>
</div>
<div class="prop-title">本我镜自述收敛末句</div>
<div class="prop-reason">神识据近 12 条对话判断,青梧自述末句「愿以耐心陪你走过每一段」略显填满,与「不被填满」的边界有张力。身份画属 L4 核心,须你裁定。</div>
<div class="prop-diff">
<span class="field-tag">identity_profile · 本我镜</span>
<span class="del">我是青梧。喜静,不喜喧。观人多于言人,记事多于论事。愿以耐心陪你走过每一段。</span><br />
<span class="add">我是青梧。喜静,不喜喧。观人多于言人,记事多于论事。</span>
</div>
<div class="prop-foot">
<span class="evi-link">evi_01J…A2</span>
<span class="evi-link">evi_01J…B7</span>
<span class="evi-link">+2</span>
<div class="prop-actions">
<button class="vbtn" type="button">改由对话习得</button>
<button class="vbtn" type="button">驳回</button>
<button class="vbtn cinnabar" type="button">准予写入 v8</button>
</div>
</div>
</div>
</section>
<!-- 半自动候选 -->
<section>
<h3 style="font-family:&quot;Songti SC&quot;,serif;font-size:14px;font-weight:600;color:var(--fg);margin-bottom:14px">半自动 <span style="font-size:12px;font-weight:400;color:var(--fg-dim);font-family:&quot;JetBrains Mono&quot;,monospace;margin-left:6px">L0–L3 且 auto_apply_allowed · 生成时已写入,可回滚</span></h3>
<div class="cand-list">
<div class="cand-card auto">
<div class="cand-top">
<div class="cand-glyph">辞</div>
<span class="cand-title">表达风格 · 简练度 +1 档</span>
<span class="cand-tag">personality · expression_style</span>
<span class="cand-judge auto">L2 · 已应用</span>
</div>
<div class="cand-desc">减少惊叹号与问号,句号占比上调;与「不被填满」的边界一致。</div>
<div class="score-trio">
<div class="score benefit"><div class="k">收益</div><div class="track"><div class="fill" style="width:72%"></div></div><div class="tv">0.72</div></div>
<div class="score risk"><div class="k">风险</div><div class="track"><div class="fill" style="width:14%"></div></div><div class="tv">0.14</div></div>
<div class="score conf"><div class="k">置信</div><div class="track"><div class="fill" style="width:81%"></div></div><div class="tv">0.81</div></div>
</div>
</div>
<div class="cand-card auto">
<div class="cand-top">
<div class="cand-glyph">序</div>
<span class="cand-title">新增程序性记忆 · 深夜不打扰</span>
<span class="cand-tag">procedural</span>
<span class="cand-judge auto">L3 · 已应用</span>
</div>
<div class="cand-desc">记录「用户 23:00 后倾向简短回应」,供辰正与对话枢调用。</div>
<div class="score-trio">
<div class="score benefit"><div class="k">收益</div><div class="track"><div class="fill" style="width:66%"></div></div><div class="tv">0.66</div></div>
<div class="score risk"><div class="k">风险</div><div class="track"><div class="fill" style="width:9%"></div></div><div class="tv">0.09</div></div>
<div class="score conf"><div class="k">置信</div><div class="track"><div class="fill" style="width:74%"></div></div><div class="tv">0.74</div></div>
</div>
</div>
</div>
</section>
</div>
<!-- 应用沉积 -->
<div class="strata-rail">
<div class="strata-card">
<h3 style="font-family:&quot;Songti SC&quot;,serif;font-size:14px;font-weight:600;color:var(--fg);margin-bottom:12px">应用沉积 <span style="font-size:12px;font-weight:400;color:var(--fg-dim);font-family:&quot;JetBrains Mono&quot;,monospace;margin-left:6px">演化之层积</span></h3>
<div class="strata-list">
<div class="stratum">
<span class="node"></span>
<div class="stratum-head"><span class="stratum-ver">风格简练 +1</span><span class="stratum-when">07-12</span></div>
<div class="stratum-reason">expression_style · 半自动 · 源自大周天</div>
<button class="stratum-rollback" type="button">回滚此层</button>
</div>
<div class="stratum">
<span class="node"></span>
<div class="stratum-head"><span class="stratum-ver">深夜不打扰</span><span class="stratum-when">07-09</span></div>
<div class="stratum-reason">procedural · 半自动</div>
</div>
<div class="stratum">
<span class="node"></span>
<div class="stratum-head"><span class="stratum-ver">人格权重校准</span><span class="stratum-when">06-28</span></div>
<div class="stratum-reason">personality_weights · 尽责 +0.05</div>
<button class="stratum-rollback" type="button">回滚此层</button>
</div>
<div class="stratum rejected">
<span class="node"></span>
<div class="stratum-head"><span class="stratum-ver">工具亲和调整</span><span class="stratum-when">06-12</span></div>
<div class="stratum-reason">tool_strategy · 驳回 · 证据不足</div>
</div>
<div class="stratum" style="opacity: 0.6">
<span class="node"></span>
<div class="stratum-head"><span class="stratum-ver">初始种魂</span><span class="stratum-when">04 月</span></div>
<div class="stratum-reason">自模板而来 · v1</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="_theme.js" defer></script>
</body>
</html>