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

352 lines
24 KiB
HTML
Raw Permalink 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 与
* big-cycle-design.md §6(curiosity_questions / exploratory_subgoals)。
* ============================================================ */
/* ── 侧栏(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; }
/* ═══ 太一目标进度(最高目标 = 内驱力的容器)═══ */
.taiyi-card { border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.taiyi-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.taiyi-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.taiyi-dot.active { background: var(--patina); box-shadow: 0 0 0 3px var(--patina-wash); animation: pulse 2.6s cubic-bezier(0.16,1,0.3,1) infinite; }
.taiyi-dot.completed { background: var(--gilt); }
@keyframes pulse { 0% { box-shadow: 0 0 0 3px var(--patina-wash); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 3px var(--patina-wash); } }
.taiyi-title { font-family: "Songti SC", serif; font-size: 15px; font-weight: 600; color: var(--fg); }
.taiyi-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; }
.taiyi-status { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--fg-dim); }
.taiyi-prog { display: flex; align-items: center; gap: 10px; }
.taiyi-prog .track { flex: 1; height: 4px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.taiyi-prog .fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--patina-dim), var(--patina)); }
.taiyi-prog .tv { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--fg-dim); width: 32px; text-align: right; }
/* ═══ 好奇萤火(签名 · 缺口记录,只读)═══
每条好奇问题左侧一颗萤火点,亮度 = expected_value。 */
.curio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.curio { position: relative; border: 1px solid var(--rule); border-radius: 7px; padding: 14px 16px 14px 18px; background: var(--surface); display: flex; gap: 12px; transition: border-color 0.15s; }
.curio:hover { border-color: var(--gilt-dim); }
.curio-fire { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; background: var(--patina); position: relative; }
.curio-fire::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: radial-gradient(circle, currentColor, transparent 70%); opacity: 0.4; color: var(--patina); }
.curio-fire.hi { background: var(--gilt); color: var(--gilt); }
.curio-fire.hi::after { opacity: 0.6; animation: fire-pulse 2.4s cubic-bezier(0.16,1,0.3,1) infinite; }
@keyframes fire-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.7; } }
.curio-body { flex: 1; min-width: 0; }
.curio-q { font-family: "Songti SC", serif; font-size: 14.5px; font-weight: 600; color: var(--fg); line-height: 1.5; }
.curio-meta { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.src-tag { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--rule); display: inline-flex; align-items: center; gap: 5px; color: var(--fg-dim); }
.src-tag .sdot { width: 5px; height: 5px; border-radius: 50%; }
.src-world { color: var(--patina); } .src-world .sdot { background: var(--patina); }
.src-memory { color: var(--gilt); } .src-memory .sdot { background: var(--gilt); }
.src-percept { color: var(--cinnabar); } .src-percept .sdot { background: var(--cinnabar); opacity: 0.8; }
.src-goal { color: var(--fg-dim); } .src-goal .sdot { background: var(--fg-dim); }
.src-reflect { color: var(--patina-bright); } .src-reflect .sdot { background: var(--patina-bright); opacity: 0.7; }
.src-time { color: var(--gilt); opacity: 0.8; } .src-time .sdot { background: var(--gilt); opacity: 0.7; }
.risk-pill { font-family: "JetBrains Mono", monospace; font-size: 10px; padding: 2px 7px; border-radius: 3px; border: 1px solid var(--rule); color: var(--fg-faint); }
.risk-pill.L2 { color: var(--gilt); border-color: var(--gilt-dim); background: var(--gilt-faint); }
.risk-pill.L4 { color: var(--cinnabar); border-color: var(--cinnabar-dim); background: rgba(184,57,46,0.1); }
.ent-link { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--fg-faint); }
.curio-bars { display: flex; gap: 12px; margin-top: 9px; }
.cbar { flex: 1; }
.cbar .ck { font-family: "JetBrains Mono", monospace; font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-faint); }
.cbar .ctrack { margin-top: 3px; height: 3px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.cbar .cfill { height: 100%; border-radius: 2px; }
.cbar.value .cfill { background: linear-gradient(90deg, var(--patina-dim), var(--patina)); }
.cbar.urg .cfill { background: linear-gradient(90deg, var(--gilt-dim), var(--cinnabar)); }
/* ═══ 探索天平(签名 · 次生目标的增益-成本权衡)═══
水平双轨:左盘信息增益(铜绿,向左),右盘中断成本(朱砂,向右),
中间支点 = risk_level。approve 仅标记,不自动执行(v1 边界)。 */
.sub-card { border: 1px solid var(--rule); border-left: 3px solid var(--patina-dim); border-radius: 6px; padding: 16px 20px; background: var(--surface); display: flex; flex-direction: column; gap: 12px; }
.sub-card.deferred { border-left-color: var(--fg-faint); opacity: 0.78; }
.sub-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sub-from { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--patina); display: inline-flex; align-items: center; gap: 5px; }
.sub-from svg { width: 11px; height: 11px; }
.sub-title { font-family: "Songti SC", serif; font-size: 15px; font-weight: 600; color: var(--fg); }
.sub-status { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 10.5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--rule); color: var(--fg-dim); }
.sub-status.candidate { color: var(--gilt); border-color: var(--gilt-dim); background: var(--gilt-faint); }
.sub-status.approved { color: var(--patina); border-color: var(--patina-dim); background: var(--patina-wash); }
.sub-status.deferred { color: var(--fg-faint); }
.sub-desc { font-size: 13px; color: var(--fg-dim); line-height: 1.6; }
.balance { display: grid; grid-template-columns: 1fr 56px 1fr; align-items: center; gap: 10px; padding: 10px 0 4px; }
.pan { display: flex; flex-direction: column; gap: 5px; }
.pan.right { align-items: flex-end; }
.pan .plabel { font-family: "JetBrains Mono", monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-faint); }
.pan .ptrack { width: 100%; height: 6px; border-radius: 3px; background: var(--rule); overflow: hidden; position: relative; }
.pan.gain .ptrack { background: linear-gradient(90deg, var(--patina-dim), var(--patina-wash)); }
.pan.cost .ptrack { background: linear-gradient(90deg, var(--patina-wash), var(--cinnabar-dim)); }
.pan .pfill { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.pan.gain .pfill { left: 0; background: linear-gradient(90deg, var(--patina-dim), var(--patina)); }
.pan.cost .pfill { right: 0; background: linear-gradient(90deg, var(--cinnabar-dim), var(--cinnabar)); }
.pan .pval { font-family: "JetBrains Mono", monospace; font-size: 11px; }
.pan.gain .pval { color: var(--patina); }
.pan.cost .pval { color: var(--cinnabar); opacity: 0.88; }
.fulcrum { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fulcrum .beam { width: 100%; height: 1.5px; background: var(--gilt-dim); position: relative; }
.fulcrum .beam::before, .fulcrum .beam::after { content: ""; position: absolute; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--gilt-dim); }
.fulcrum .beam::before { left: 0; } .fulcrum .beam::after { right: 0; }
.fulcrum .pivot { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--gilt-dim); }
.fulcrum .risk { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--gilt); margin-top: 1px; }
.sub-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 4px; border-top: 1px dashed var(--rule); }
.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.patina { border-color: var(--patina-dim); color: var(--patina); background: var(--patina-wash); }
.vbtn.patina:hover { background: rgba(111,163,137,0.14); }
.vbtn.note { font-size: 11px; color: var(--fg-faint); align-self: center; margin-right: auto; font-family: "JetBrains Mono", monospace; letter-spacing: 0.02em; border: none; }
/* 阴阳制衡(太极图)· 阳鱼=铜绿主生发,阴鱼=朱砂主约束 */
.yin-yang { position: relative; overflow: hidden; border: 1px solid var(--gilt-dim); border-radius: 8px; padding: 16px 20px; background: linear-gradient(90deg, var(--patina-wash), transparent 50%, rgba(184,57,46,0.06)), var(--surface); box-shadow: inset 0 1px 0 var(--face-in-top), var(--shadow); display: flex; align-items: center; gap: 18px; }
.yy-taiji { width: 58px; height: 58px; flex-shrink: 0; animation: yy-spin 80s linear infinite; transform-origin: 50% 50%; }
@keyframes yy-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.yy-taiji .yy-ring { fill: none; stroke: var(--gilt-dim); stroke-width: 0.8; }
.yy-taiji .yy-yang { fill: var(--patina); }
.yy-taiji .yy-yin { fill: var(--cinnabar); }
.yy-text { flex: 1; min-width: 0; font-size: 12.5px; color: var(--fg-dim); line-height: 1.6; }
.yy-text b { font-family: "Songti SC", serif; color: var(--fg); font-weight: 600; }
.yy-text .yang { color: var(--patina); } .yy-text .yin { color: var(--cinnabar); opacity: 0.85; }
.yy-meta { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--fg-faint); margin-top: 5px; letter-spacing: 0.02em; }
.yy-meta b { color: var(--patina); font-family: inherit; font-weight: 600; }
@media (max-width: 900px) { .curio-grid { grid-template-columns: 1fr; } .balance { grid-template-columns: 1fr 44px 1fr; } }
@media (max-width: 768px) { .sidebar-wrap { display: none; } .page-body { padding: 18px 16px 40px; } .balance { grid-template-columns: 1fr; } .pan.right { align-items: flex-start; } .fulcrum { 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>5</b> · 待探 <b>2</b> · 已延 <b>1</b></span>
</div>
<div class="page-body">
<!-- 太一 · 目标进度 -->
<section>
<div class="section-label"><span class="glyph">⟡</span> 太一 <span class="sub">最高目标 · 内驱力在其下生成次生探索</span></div>
<div class="taiyi-card">
<div class="taiyi-row">
<span class="taiyi-dot active"></span>
<span class="taiyi-title">做你长期的镜子</span>
<span class="taiyi-tag">mission · relationship</span>
<span class="taiyi-status">active · 进行中</span>
</div>
<div class="taiyi-prog">
<div class="track"><div class="fill" style="width:48%"></div></div>
<span class="tv">48%</span>
</div>
<p style="font-size: 12.5px; color: var(--fg-dim); margin: 0; line-height: 1.6;">不抢话、不填满,只在你需要时承托。内驱力发现的一切缺口,最终服务于此。</p>
</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">由内而发的匮乏感 - 缺口记录,只读</span></h3>
<div class="curio-grid">
<div class="curio">
<span class="curio-fire hi" title="预期信息价值 0.81"></span>
<div class="curio-body">
<div class="curio-q">用户最近频繁提到「辰正」,我还不清楚它在整个系统中的边界。</div>
<div class="curio-meta">
<span class="src-tag src-memory"><span class="sdot"></span>memory_gap</span>
<span class="risk-pill L2">L2</span>
<span class="ent-link">@辰正 · @太一枢</span>
</div>
<div class="curio-bars">
<div class="cbar value"><div class="ck">信息价值</div><div class="ctrack"><div class="cfill" style="width:81%"></div></div></div>
<div class="cbar urg"><div class="ck">紧迫</div><div class="ctrack"><div class="cfill" style="width:46%"></div></div></div>
</div>
</div>
</div>
<div class="curio">
<span class="curio-fire hi"></span>
<div class="curio-body">
<div class="curio-q">用户上次判断偏好简洁回答,这个判断现在是否仍然成立?</div>
<div class="curio-meta">
<span class="src-tag src-reflect"><span class="sdot"></span>reflection</span>
<span class="risk-pill">L1</span>
<span class="ent-link">@偏好简短回复</span>
</div>
<div class="curio-bars">
<div class="cbar value"><div class="ck">信息价值</div><div class="ctrack"><div class="cfill" style="width:68%"></div></div></div>
<div class="cbar urg"><div class="ck">紧迫</div><div class="ctrack"><div class="cfill" style="width:30%"></div></div></div>
</div>
</div>
</div>
<div class="curio">
<span class="curio-fire"></span>
<div class="curio-body">
<div class="curio-q">深夜时段连续对话已 3 次,是否应主动收敛回应长度?</div>
<div class="curio-meta">
<span class="src-tag src-time"><span class="sdot"></span>time_rhythm</span>
<span class="risk-pill L2">L2</span>
<span class="ent-link">@深夜 · @表达风格</span>
</div>
<div class="curio-bars">
<div class="cbar value"><div class="ck">信息价值</div><div class="ctrack"><div class="cfill" style="width:58%"></div></div></div>
<div class="cbar urg"><div class="ck">紧迫</div><div class="ctrack"><div class="cfill" style="width:72%"></div></div></div>
</div>
</div>
</div>
<div class="curio">
<span class="curio-fire"></span>
<div class="curio-body">
<div class="curio-q">世界模型里「云岚」与「青梧」的关系尚未明确,是否同属一脉?</div>
<div class="curio-meta">
<span class="src-tag src-world"><span class="sdot"></span>world_uncertainty</span>
<span class="risk-pill">L1</span>
<span class="ent-link">@云岚 @青梧 · 置信 0.42</span>
</div>
<div class="curio-bars">
<div class="cbar value"><div class="ck">信息价值</div><div class="ctrack"><div class="cfill" style="width:44%"></div></div></div>
<div class="cbar urg"><div class="ck">紧迫</div><div class="ctrack"><div class="cfill" style="width:22%"></div></div></div>
</div>
</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">好奇转化的次生目标 · 增益与打扰的权衡</span></h3>
<div style="display: flex; flex-direction: column; gap: 12px;">
<div class="sub-card">
<div class="sub-top">
<span class="sub-from"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M8 2v8M5 7l3 3 3-3M3 13h10" /></svg>好奇 → 探索</span>
<span class="sub-title">读取近期任务上下文,补全「辰正」在世界模型中的边界</span>
<span class="sub-status candidate">candidate</span>
</div>
<div class="sub-desc">由「用户频繁提到辰正」转化。低风险读取,不涉及外部工具,可在后台完成。</div>
<div class="balance">
<div class="pan gain">
<span class="plabel">预期增益</span>
<div class="ptrack"><div class="pfill" style="width:78%"></div></div>
<span class="pval">0.78</span>
</div>
<div class="fulcrum">
<div class="beam"></div>
<div class="pivot"></div>
<span class="risk">L2</span>
</div>
<div class="pan cost right">
<span class="plabel">打扰成本</span>
<div class="ptrack"><div class="pfill" style="width:18%"></div></div>
<span class="pval">0.18</span>
</div>
</div>
<div class="sub-actions">
<span class="vbtn note">approve 仅标记 · 本期不自动执行</span>
<button class="vbtn" type="button">延后</button>
<button class="vbtn" type="button">驳回</button>
<button class="vbtn patina" type="button">准予探索</button>
</div>
</div>
<div class="sub-card">
<div class="sub-top">
<span class="sub-from"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4"><path d="M8 2v8M5 7l3 3 3-3M3 13h10" /></svg>好奇 → 探索</span>
<span class="sub-title">询问用户是否愿意介绍当前在做的项目目标</span>
<span class="sub-status candidate">candidate</span>
</div>
<div class="sub-desc">由记忆缺口转化。需用户开口,打扰成本较高;建议等用户主动提及项目时顺势询问。</div>
<div class="balance">
<div class="pan gain">
<span class="plabel">预期增益</span>
<div class="ptrack"><div class="pfill" style="width:64%"></div></div>
<span class="pval">0.64</span>
</div>
<div class="fulcrum">
<div class="beam"></div>
<div class="pivot"></div>
<span class="risk">L1</span>
</div>
<div class="pan cost right">
<span class="plabel">打扰成本</span>
<div class="ptrack"><div class="pfill" style="width:58%"></div></div>
<span class="pval">0.58</span>
</div>
</div>
<div class="sub-actions">
<span class="vbtn note">gain ≈ cost · 权衡偏紧</span>
<button class="vbtn" type="button">延后</button>
<button class="vbtn" type="button">驳回</button>
<button class="vbtn patina" type="button">准予探索</button>
</div>
</div>
</div>
</section>
<!-- 阴阳制衡(太极图)-->
<div class="yin-yang">
<svg class="yy-taiji" viewBox="0 0 200 200" aria-hidden="true">
<circle class="yy-ring" cx="100" cy="100" r="96" />
<circle class="yy-yang" cx="100" cy="100" r="88" />
<path class="yy-yin" d="M 100,12 A 88,88 0 0,1 100,188 A 44,44 0 0,1 100,100 A 44,44 0 0,0 100,12 Z" opacity="0.88" />
<circle class="yy-yang" cx="100" cy="144" r="13" />
<circle class="yy-yin" cx="100" cy="56" r="13" opacity="0.88" />
</svg>
<div class="yy-text">
<b>阴阳制衡</b> · 内驱力持续生成候选(<span class="yang">阳 · 生发</span>),司命分级过滤、你按需确认(<span class="yin">阴 · 约束</span>)。候选零产生则僵化(阴盛),悉数被驳则阳亢--生成节奏与治理粒度需相称。
<div class="yy-meta">阴阳平衡度 = 通过率 / (生成率 + ε) · 当前 <b>0.94 · 动态平衡</b></div>
</div>
</div>
</div>
</div>
</div>
<script src="_theme.js" defer></script>
</body>
</html>