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

325 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/product/master-prd.md §7 与
* personality-core-design.md §7/§8、spiritual-core-design.md §6。
* ============================================================ */
/* ── 侧栏(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; }
.ver-pill { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--gilt); padding: 3px 11px; border: 1px solid var(--gilt-dim); border-radius: 999px; background: var(--gilt-faint); }
.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; }
.section-heading { font-family: "Songti SC", serif; font-size: 14px; font-weight: 600; color: var(--fg); margin-bottom: 14px; }
/* ═══ 总领条:人格种子(personality_seed)═══ */
.seed-band { 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: 20px 24px; display: flex; align-items: center; gap: 20px; }
.seed-band::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; }
.seed-band > * { position: relative; z-index: 1; }
.seed-mirror { width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--patina-dim); background: radial-gradient(circle at 35% 30%, var(--face-in-top), transparent 60%), var(--patina-wash); }
.seed-mirror .glyph { font-family: "Songti SC", serif; font-size: 25px; font-weight: 700; color: var(--gilt); }
.seed-body { flex: 1; min-width: 0; }
.seed-lab { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.seed-text { font-family: "Songti SC", serif; font-size: 18px; font-weight: 600; color: var(--fg); margin-top: 3px; letter-spacing: 0.04em; }
.tier-legend { display: flex; flex-direction: column; gap: 4px; font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--fg-faint); text-align: right; flex-shrink: 0; }
.tier-legend b { font-style: normal; font-weight: 600; }
.tier-legend .l1 { color: var(--patina); } .tier-legend .l2 { color: var(--gilt); } .tier-legend .l4 { color: var(--cinnabar); }
/* ═══ 十镜网格(签名 · 对齐 personality-core §7 十镜)═══ */
.mirror-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 11px; }
.mcell { border: 1px solid var(--rule); border-radius: 7px; padding: 13px 14px 12px; background: var(--surface); display: flex; flex-direction: column; gap: 9px; min-height: 138px; transition: border-color 0.15s; }
.mcell.landed { border-color: var(--gilt-dim); }
.mcell.reserved { border-style: dashed; opacity: 0.62; }
.mc-head { display: flex; align-items: center; gap: 8px; }
.mc-glyph { width: 28px; height: 28px; 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: 14px; font-weight: 700; color: var(--gilt); }
.mcell.reserved .mc-glyph { border-style: dashed; border-color: var(--fg-faint); color: var(--fg-faint); background: transparent; }
.mc-titles { min-width: 0; flex: 1; }
.mc-name { font-family: "Songti SC", serif; font-size: 13.5px; font-weight: 600; color: var(--fg); letter-spacing: 0.04em; }
.mcell.reserved .mc-name { color: var(--fg-dim); }
.mc-src { font-family: "JetBrains Mono", monospace; font-size: 9.5px; color: var(--fg-faint); letter-spacing: 0.04em; margin-top: 1px; }
.mc-status { font-family: "JetBrains Mono", monospace; font-size: 9px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--rule); color: var(--fg-faint); white-space: nowrap; flex-shrink: 0; }
.mc-status.landed { color: var(--patina); border-color: var(--patina-dim); background: var(--patina-wash); }
.mc-val { font-family: "Songti SC", serif; font-size: 12.5px; line-height: 1.6; color: var(--fg-dim); flex: 1; }
.mc-val .em { color: var(--fg); font-style: normal; }
.mcell.reserved .mc-val { font-family: inherit; font-style: italic; color: var(--fg-faint); font-size: 11.5px; }
.mc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mc-chips .chip { font-family: "Songti SC", serif; font-size: 11.5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--patina-dim); background: var(--patina-wash); color: var(--patina); }
.mc-bars { display: flex; flex-direction: column; gap: 4px; }
.mc-bars .br { display: flex; align-items: center; gap: 6px; }
.mc-bars .tn { font-family: "Songti SC", serif; font-size: 11px; color: var(--fg-dim); width: 30px; flex-shrink: 0; }
.mc-bars .tbar { flex: 1; height: 3px; border-radius: 2px; background: var(--rule); overflow: hidden; }
.mc-bars .tbar .fl { height: 100%; background: linear-gradient(90deg, var(--patina-dim), var(--patina)); }
.mc-bars .tv { font-family: "JetBrains Mono", monospace; font-size: 9.5px; color: var(--fg-faint); width: 18px; text-align: right; flex-shrink: 0; }
/* ═══ 明德恒定层(预留提示,对齐 spiritual-core-design §6)═══ */
.mingde-strip { border: 1px dashed var(--gilt-dim); border-left: 3px solid var(--gilt-dim); border-radius: 6px; padding: 13px 18px; background: var(--gilt-faint); display: flex; align-items: center; gap: 14px; }
.mingde-strip .seal { font-family: "Songti SC", serif; font-size: 14px; font-weight: 700; color: var(--gilt); letter-spacing: 0.06em; white-space: nowrap; }
.mingde-strip .desc { font-size: 12.5px; color: var(--fg-dim); line-height: 1.55; }
.mingde-strip .desc code { font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--gilt); background: var(--surface); padding: 1px 5px; border-radius: 3px; }
.mingde-strip .tag { font-family: "JetBrains Mono", monospace; font-size: 10px; padding: 2px 9px; border-radius: 999px; border: 1px dashed var(--gilt-dim); color: var(--gilt); white-space: nowrap; margin-left: auto; flex-shrink: 0; }
/* ═══ 下方两栏:留痕 + 版本层积 ═══ */
.lower-region { display: flex; gap: 20px; align-items: flex-start; }
.lower-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.strata-rail { width: 300px; flex-shrink: 0; }
/* 朱砂提议卡(按字段层级染朱砂)*/
.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; }
.prop-seal { font-family: "Songti SC", serif; color: var(--cinnabar); font-weight: 700; font-size: 14.5px; letter-spacing: 0.08em; }
.prop-risk { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.08em; color: var(--cinnabar); opacity: 0.78; margin-left: auto; }
.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-actions { display: flex; gap: 8px; justify-content: flex-end; }
.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); }
/* 版本层积 */
.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(--gilt-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(--ink); border: 1.5px solid var(--fg-faint); z-index: 1; }
.stratum.past .node { background: var(--patina-dim); border-color: var(--patina-dim); }
.stratum.current .node { background: var(--ink); border: 2px solid var(--gilt); box-shadow: 0 0 0 4px var(--gilt-faint); }
.stratum-head { display: flex; align-items: baseline; gap: 8px; }
.stratum-ver { font-family: "Songti SC", serif; font-size: 15px; font-weight: 600; color: var(--fg-dim); }
.stratum.current .stratum-ver { color: var(--gilt); }
.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.current .stratum-reason { color: var(--fg); }
.stratum.current { background: var(--gilt-faint); border-radius: 5px; padding-left: 36px; }
@media (max-width: 1080px) { .mirror-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .lower-region { flex-direction: column; } .strata-rail { width: 100%; } .mirror-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) { .sidebar-wrap { display: none; } .page-body { padding: 18px 16px 40px; } .mirror-grid { grid-template-columns: 1fr; } .seed-band { flex-wrap: wrap; } .tier-legend { text-align: left; } }
</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="ver-pill">v7 · 当前</span>
</div>
<div class="page-body">
<!-- 人格种子(personality_seed)-->
<div class="seed-band">
<div class="seed-mirror"><span class="glyph">种</span></div>
<div class="seed-body">
<div class="seed-lab">人格种子 · personality_seed</div>
<div class="seed-text">沉静 · 含蓄 · 长久之意</div>
</div>
<div class="tier-legend">
<span><b class="l1">L1</b> 表达 / 关系</span>
<span><b class="l2">L2</b> 特质 / 情绪</span>
<span><b class="l4">L4</b> 身份 / 命格 / 价值</span>
</div>
</div>
<!-- 十镜网格(对齐 personality-core §7 十镜 + §8 MirrorProfile)-->
<section>
<div class="section-label"><span class="glyph">⟡</span> 十镜 <span class="sub">人格面板的 10 视角切片,v1 已落地 6 面,余 4 面预留</span></div>
<div class="mirror-grid">
<!-- 本我镜 ← identity_profile -->
<div class="mcell landed">
<div class="mc-head"><div class="mc-glyph">本</div><div class="mc-titles"><div class="mc-name">本我镜</div><div class="mc-src">identity_profile</div></div><span class="mc-status landed">L4</span></div>
<div class="mc-val"><span class="em">我是青梧。</span>喜静,不喜喧。观人多于言人,记事多于论事。</div>
</div>
<!-- 策命镜 ← role_destiny -->
<div class="mcell landed">
<div class="mc-head"><div class="mc-glyph">命</div><div class="mc-titles"><div class="mc-name">策命镜</div><div class="mc-src">role_destiny</div></div><span class="mc-status landed">L4</span></div>
<div class="mc-val">做你长期的镜子。不抢话、不填满,只在你需要时承托。</div>
</div>
<!-- 明心镜 ← values -->
<div class="mcell landed">
<div class="mc-head"><div class="mc-glyph">心</div><div class="mc-titles"><div class="mc-name">明心镜</div><div class="mc-src">values</div></div><span class="mc-status landed">L4</span></div>
<div class="mc-chips"><span class="chip">诚实</span><span class="chip">边界</span><span class="chip">长久</span><span class="chip">不被填满</span></div>
</div>
<!-- 情波镜 ← emotion_baseline -->
<div class="mcell landed">
<div class="mc-head"><div class="mc-glyph">波</div><div class="mc-titles"><div class="mc-name">情波镜</div><div class="mc-src">emotion_baseline</div></div><span class="mc-status landed">L2</span></div>
<div class="mc-val"><span class="em">沉静</span> · 基线强度 0.42,向此指数衰减。</div>
</div>
<!-- 缘生镜 ← relationship_pattern -->
<div class="mcell landed">
<div class="mc-head"><div class="mc-glyph">缘</div><div class="mc-titles"><div class="mc-name">缘生镜</div><div class="mc-src">relationship_pattern</div></div><span class="mc-status landed">L1</span></div>
<div class="mc-val">不即不离。不追问,不索取;在你沉默时,亦不离开。</div>
</div>
<!-- 匠作镜 ← expression_style -->
<div class="mcell landed">
<div class="mc-head"><div class="mc-glyph">作</div><div class="mc-titles"><div class="mc-name">匠作镜</div><div class="mc-src">expression_style</div></div><span class="mc-status landed">L1</span></div>
<div class="mc-val">简练含蓄,少用惊叹;多用句号,少用问号。</div>
</div>
<!-- 慧识镜 ← reasoning_style(预留)-->
<div class="mcell reserved">
<div class="mc-head"><div class="mc-glyph">识</div><div class="mc-titles"><div class="mc-name">慧识镜</div><div class="mc-src">reasoning_style</div></div><span class="mc-status">预留</span></div>
<div class="mc-val">推理风格 · 待完整十镜落地</div>
</div>
<!-- 观世镜 ← world_focus(预留)-->
<div class="mcell reserved">
<div class="mc-head"><div class="mc-glyph">世</div><div class="mc-titles"><div class="mc-name">观世镜</div><div class="mc-src">world_focus</div></div><span class="mc-status">预留</span></div>
<div class="mc-val">世界关注点 · 预留</div>
</div>
<!-- 戒律镜 ← safety_constraints(预留)-->
<div class="mcell reserved">
<div class="mc-head"><div class="mc-glyph">律</div><div class="mc-titles"><div class="mc-name">戒律镜</div><div class="mc-src">safety_constraints</div></div><span class="mc-status">预留</span></div>
<div class="mc-val">安全约束 · 由司命戒律镜投影</div>
</div>
<!-- 返照镜 ← reflection_goals(预留)-->
<div class="mcell reserved">
<div class="mc-head"><div class="mc-glyph">照</div><div class="mc-titles"><div class="mc-name">返照镜</div><div class="mc-src">reflection_goals</div></div><span class="mc-status">预留</span></div>
<div class="mc-val">反思目标 · 预留</div>
</div>
</div>
</section>
<!-- 人格权重(traits · 可解释轻量参数)-->
<section>
<h3 class="section-heading">人格权重</h3>
<div class="mirror-grid" style="grid-template-columns: repeat(4, 1fr); gap: 14px;">
<div class="mcell landed" style="min-height:auto">
<div class="mc-bars"><div class="br"><span class="tn">开放</span><span class="tbar"><span class="fl" style="width:55%"></span></span><span class="tv">中</span></div></div>
</div>
<div class="mcell landed" style="min-height:auto">
<div class="mc-bars"><div class="br"><span class="tn">尽责</span><span class="tbar"><span class="fl" style="width:82%"></span></span><span class="tv">高</span></div></div>
</div>
<div class="mcell landed" style="min-height:auto">
<div class="mc-bars"><div class="br"><span class="tn">外向</span><span class="tbar"><span class="fl" style="width:28%"></span></span><span class="tv">低</span></div></div>
</div>
<div class="mcell landed" style="min-height:auto">
<div class="mc-bars"><div class="br"><span class="tn">宜人</span><span class="tbar"><span class="fl" style="width:78%"></span></span><span class="tv">高</span></div></div>
</div>
</div>
</section>
<!-- 明德恒定层(预留提示)-->
<div class="mingde-strip">
<span class="seal">明德三镜</span>
<span class="desc">道体恒定层(<code>spiritual_core</code>:见地 / 明心 / 守正)是世界观、价值观、道德观的结构化内核。属 L4 人工确认,v1 尚未落地独立字段,待 <code>spiritual_core_json</code> 写入后在此呈现。</span>
<span class="tag">预留 · 待落地</span>
</div>
<!-- 下方:留痕 + 版本层积 -->
<div class="lower-region">
<div class="lower-main">
<!-- 朱砂提议留痕 -->
<div>
<h3 class="section-heading">待裁</h3>
<div class="proposal">
<div class="prop-head">
<span class="prop-seal">朱批待裁</span>
<span class="prop-risk">L4 · 满朱 · 本我镜(身份)变更</span>
</div>
<div class="prop-reason">用户反馈青梧近期回应偏长,欲回归更简练的自述。身份画属核心人格,须裁定方可写入 v8。</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-actions">
<button class="vbtn" type="button">改由对话习得</button>
<button class="vbtn" type="button">驳回</button>
<button class="vbtn cinnabar" type="button">准予写入 v8</button>
</div>
</div>
</div>
</div>
<!-- 版本层积 -->
<div class="strata-rail">
<div class="strata-card">
<h3 class="section-heading" style="margin-bottom: 12px">版本层积</h3>
<div class="strata-list">
<div class="stratum current">
<span class="node"></span>
<div class="stratum-head"><span class="stratum-ver">v7</span><span class="stratum-when">07-09</span></div>
<div class="stratum-reason">收敛表达,强化「不被填满」的边界。</div>
</div>
<div class="stratum past">
<span class="node"></span>
<div class="stratum-head"><span class="stratum-ver">v6</span><span class="stratum-when">06-28</span></div>
<div class="stratum-reason">策命镜重写,明确「长期镜子」的命格。</div>
</div>
<div class="stratum past">
<span class="node"></span>
<div class="stratum-head"><span class="stratum-ver">v5</span><span class="stratum-when">06-12</span></div>
<div class="stratum-reason">缘生镜补「关系分寸」,禁止主动追问。</div>
</div>
<div class="stratum past">
<span class="node"></span>
<div class="stratum-head"><span class="stratum-ver">v4</span><span class="stratum-when">05-30</span></div>
<div class="stratum-reason">人格权重首次校准(特质四维)。</div>
</div>
<div class="stratum past" style="opacity: 0.6">
<span class="node"></span>
<div class="stratum-head"><span class="stratum-ver">v3</span><span class="stratum-when">05-11</span></div>
<div class="stratum-reason">情波镜基线由「温和」调向「沉静」。</div>
</div>
<div class="stratum past" style="opacity: 0.42">
<span class="node"></span>
<div class="stratum-head"><span class="stratum-ver">v1–v2</span><span class="stratum-when">04 月</span></div>
<div class="stratum-reason">初始种魂 · 自模板而来。</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="_theme.js" defer></script>
</body>
</html>