初始化提交

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

+408
View File
@@ -0,0 +1,408 @@
<!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 — 人物页:铜镜名册(激活者镜面,余者镜背)
* ============================================================ */
body {
background: var(--ink);
color: var(--fg);
font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", system-ui, sans-serif;
font-size: 15px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* ── 侧栏(与轨迹页同源,此处 active=人物)── */
/* ── 主区 ── */
.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; }
/* ═══ 激活魂册(镜面材质 hero)═══ */
.soul-card {
position: relative;
overflow: hidden;
border: 1px solid var(--gilt-dim);
border-radius: 8px;
padding: 28px 30px;
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);
}
/* 镜面静态光泽 */
.soul-card::before {
content: "";
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: linear-gradient(130deg, transparent 0%, transparent 28%, rgba(201, 162, 74, 0.025) 34%, rgba(255, 255, 255, 0.06) 40%, rgba(201, 162, 74, 0.025) 48%, transparent 55%, transparent 100%);
background-size: 200% 200%;
background-position: 35% 35%;
opacity: 0.42;
}
/* 铜面颗粒 */
.soul-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;
}
.soul-card > * { position: relative; z-index: 1; }
.soul-top { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.soul-mirror {
width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border: 1.5px solid var(--patina-dim);
background: var(--patina-wash);
position: relative;
}
.soul-mirror .inner {
width: 70px; height: 70px; border-radius: 50%;
background: linear-gradient(160deg, var(--patina-bright), var(--patina));
color: var(--ink);
display: flex; align-items: center; justify-content: center;
font-family: "Songti SC", serif; font-size: 34px; font-weight: 700;
}
.soul-mirror .halo {
position: absolute; inset: -6px; border-radius: 50%;
border: 1px dashed var(--gilt-dim);
opacity: 0.5;
}
.soul-id { flex: 1; min-width: 200px; }
.soul-name { font-family: "Songti SC", serif; font-size: 30px; font-weight: 700; color: var(--fg); letter-spacing: 0.06em; line-height: 1.2; }
.soul-realname { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--fg-faint); margin-top: 4px; letter-spacing: 0.04em; }
.soul-mood { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 13px; color: var(--fg-dim); }
.pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--patina); 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(111, 163, 137, 0.5); }
70% { box-shadow: 0 0 0 6px transparent; }
100% { box-shadow: 0 0 0 0 transparent; }
}
.soul-tag {
font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.08em;
padding: 3px 10px; border-radius: 999px; border: 1px solid var(--patina-dim);
background: var(--patina-wash); color: var(--patina); white-space: nowrap;
}
/* 七阶生命周期站点 */
.lifecycle {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--rule);
}
.lifecycle-label { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 12px; }
.lifecycle-track { display: flex; align-items: center; gap: 0; }
.lc-station { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.lc-dot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--fg-faint); background: transparent; }
.lc-name { font-family: "Songti SC", serif; font-size: 11.5px; color: var(--fg-faint); white-space: nowrap; }
.lc-station.reached .lc-dot { border-color: var(--patina-dim); background: var(--patina-dim); }
.lc-station.reached .lc-name { color: var(--fg-dim); }
.lc-station.current .lc-dot { border-color: var(--gilt); background: 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; }
.lc-station.current .lc-name { color: var(--gilt); font-weight: 600; }
@keyframes node-pulse {
0% { box-shadow: 0 0 0 4px var(--gilt-faint); }
70% { box-shadow: 0 0 0 8px transparent; }
100% { box-shadow: 0 0 0 4px var(--gilt-faint); }
}
.lc-link { flex: 0 0 0; height: 1.5px; align-self: flex-start; margin-top: 4.75px; background: var(--rule); width: 14px; }
.lc-link.reached { background: var(--patina-dim); }
/* 档案字段网格 + 关键指标 */
.soul-grid { margin-top: 22px; display: grid; grid-template-columns: 1fr 240px; gap: 26px; }
.soul-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; }
.field dt { font-family: "JetBrains Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-faint); }
.field dd { margin: 3px 0 0; font-size: 13.5px; color: var(--fg); }
.field dd.mono { font-family: "JetBrains Mono", monospace; font-size: 12.5px; }
.soul-bg { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); grid-column: 1 / -1; }
.soul-bg .lab { font-family: "JetBrains Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-faint); margin-bottom: 6px; }
.soul-bg p { font-family: "Songti SC", serif; font-size: 14px; line-height: 1.8; color: var(--fg-dim); margin: 0; }
.soul-stats { display: flex; flex-direction: column; gap: 10px; }
.soul-stat { background: var(--ink); border: 1px solid var(--rule); border-radius: 6px; padding: 12px 14px; }
.soul-stat .k { font-family: "JetBrains Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-faint); }
.soul-stat .v { font-family: "Songti SC", serif; font-size: 22px; font-weight: 600; color: var(--gilt); margin-top: 2px; }
.soul-stat .v small { font-size: 12px; font-weight: 400; color: var(--fg-dim); font-family: "JetBrains Mono", monospace; margin-left: 3px; }
/* ═══ 名册(镜背卡)═══ */
.roster-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.char-card {
position: relative;
background: linear-gradient(180deg, color-mix(in srgb, var(--night-bronze) 70%, transparent), var(--night-bronze));
border: 1px solid var(--rule);
border-radius: 8px;
padding: 18px 18px 16px;
cursor: pointer;
transition: border-color 0.15s, transform 0.15s;
display: flex;
flex-direction: column;
gap: 12px;
}
.char-card:hover { border-color: var(--gilt-dim); transform: translateY(-2px); }
/* 激活卡 = 镜面(与 hero 同源材质,但更克制) */
.char-card.is-face {
border-color: var(--gilt-dim);
background: var(--face-sheen), var(--surface);
box-shadow: inset 0 1px 0 var(--face-in-top), inset 0 -1px 0 var(--face-in-bot);
}
.char-card.is-paused { opacity: 0.72; }
.cc-top { display: flex; align-items: center; gap: 12px; }
.cc-disc {
width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border: 1.5px solid var(--patina-dim);
background: var(--patina-wash);
}
.cc-disc .inner {
width: 32px; height: 32px; border-radius: 50%;
background: var(--patina-wash);
color: var(--patina);
display: flex; align-items: center; justify-content: center;
font-family: "Songti SC", serif; font-size: 16px; font-weight: 700;
}
.char-card.is-face .cc-disc { border-color: var(--gilt); }
.char-card.is-face .cc-disc .inner { background: linear-gradient(160deg, var(--patina-bright), var(--patina)); color: var(--ink); }
.char-card.is-paused .cc-disc .inner { background: transparent; color: var(--fg-faint); }
.cc-name { font-family: "Songti SC", serif; font-size: 17px; font-weight: 600; color: var(--fg); letter-spacing: 0.04em; }
.cc-sub { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--fg-faint); margin-top: 2px; }
.cc-status { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: 10.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--rule); color: var(--fg-dim); white-space: nowrap; }
.cc-status.live { color: var(--patina); border-color: var(--patina-dim); background: var(--patina-wash); }
.cc-status.face { color: var(--gilt); border-color: var(--gilt-dim); background: var(--gilt-faint); }
.cc-status.dormant { color: var(--fg-faint); }
/* 迷你七阶站点 */
.cc-lc { display: flex; align-items: center; gap: 3px; }
.cc-lc .seg { height: 4px; flex: 1; border-radius: 2px; background: var(--rule); }
.cc-lc .seg.reached { background: var(--patina-dim); }
.cc-lc .seg.current { background: linear-gradient(90deg, var(--gilt-dim), var(--gilt)); }
.cc-stats { display: flex; gap: 14px; padding-top: 10px; border-top: 1px solid var(--rule); }
.cc-stat { display: flex; flex-direction: column; }
.cc-stat .k { font-family: "JetBrains Mono", monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-faint); }
.cc-stat .v { font-family: "Songti SC", serif; font-size: 15px; font-weight: 600; color: var(--fg); }
@media (max-width: 1080px) {
.soul-grid { grid-template-columns: 1fr; }
.roster-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.roster-grid { grid-template-columns: 1fr; }
.soul-fields { grid-template-columns: 1fr; }
.lifecycle-track { overflow-x: auto; }
}
}
</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="spacer"></span>
<span class="page-meta">共 <b>5</b> 位 · 当行 <b style="color: var(--patina)">2</b></span>
<button class="btn-ghost" type="button">+ 新塑人物</button>
</div>
<div class="page-body">
<!-- 激活魂册(镜面 hero) -->
<div class="soul-card">
<div class="soul-top">
<div class="soul-mirror">
<span class="halo"></span>
<div class="inner">梧</div>
</div>
<div class="soul-id">
<div class="soul-name">青梧</div>
<div class="soul-realname">character_01H8KFM3…Q9D · qingwu</div>
<div class="soul-mood">
<span class="pulse-dot"></span>认识你第 41 日 · 沉静 · 探索你的偏好
</div>
</div>
<span class="soul-tag">当前当行</span>
</div>
<!-- 七阶生命周期 -->
<div class="lifecycle">
<div class="lifecycle-label">生辰七阶 · lifecycle</div>
<div class="lifecycle-track">
<div class="lc-station reached"><span class="lc-dot"></span><span class="lc-name">无极</span></div>
<span class="lc-link reached"></span>
<div class="lc-station reached"><span class="lc-dot"></span><span class="lc-name">立名</span></div>
<span class="lc-link reached"></span>
<div class="lc-station reached"><span class="lc-dot"></span><span class="lc-name">已设定</span></div>
<span class="lc-link reached"></span>
<div class="lc-station reached"><span class="lc-dot"></span><span class="lc-name">初识</span></div>
<span class="lc-link reached"></span>
<div class="lc-station current"><span class="lc-dot"></span><span class="lc-name">运行中</span></div>
<span class="lc-link"></span>
<div class="lc-station"><span class="lc-dot"></span><span class="lc-name">暂停</span></div>
<span class="lc-link"></span>
<div class="lc-station"><span class="lc-dot"></span><span class="lc-name">归档</span></div>
</div>
</div>
<div class="soul-grid">
<div class="soul-fields">
<div class="field"><dt>语言</dt><dd>中文 · 宋韵</dd></div>
<div class="field"><dt>模型策略</dt><dd class="mono">default-chat</dd></div>
<div class="field"><dt>隐私等级</dt><dd class="mono">standard</dd></div>
<div class="field"><dt>当前心情</dt><dd>沉静 · 强度 42%</dd></div>
<div class="field"><dt>生辰</dt><dd>熙宁三年 · 寒露</dd></div>
<div class="field"><dt>表达风格</dt><dd>简练含蓄,少用惊叹</dd></div>
<div class="soul-bg">
<div class="lab">背景</div>
<p>出身旧族旁支,少时家道中落,养就沉静自持。善观人不轻断,言简而意周。与人相处不即不离,重长久之意,轻一时之快。</p>
</div>
</div>
<div class="soul-stats">
<div class="soul-stat"><div class="k">藏识</div><div class="v">86<small>条记忆</small></div></div>
<div class="soul-stat"><div class="k">人格</div><div class="v">v7<small>当前版本</small></div></div>
<div class="soul-stat"><div class="k">铭文</div><div class="v">142<small>通往来</small></div></div>
</div>
</div>
</div>
<!-- 名册 -->
<section>
<div class="section-label"><span class="glyph">⟡</span> 全部人物 <span class="sub">铜镜名册</span></div>
<div class="roster-grid">
<!-- 激活(镜面) -->
<div class="char-card is-face">
<div class="cc-top">
<div class="cc-disc"><div class="inner">梧</div></div>
<div><div class="cc-name">青梧</div><div class="cc-sub">第 41 日</div></div>
<span class="cc-status face">当前</span>
</div>
<div class="cc-lc">
<span class="seg reached"></span><span class="seg reached"></span><span class="seg reached"></span><span class="seg reached"></span><span class="seg current"></span><span class="seg"></span><span class="seg"></span>
</div>
<div class="cc-stats">
<div class="cc-stat"><span class="k">藏识</span><span class="v">86</span></div>
<div class="cc-stat"><span class="k">人格</span><span class="v">v7</span></div>
<div class="cc-stat"><span class="k">铭文</span><span class="v">142</span></div>
</div>
</div>
<!-- 叩心枢(当行) -->
<div class="char-card">
<div class="cc-top">
<div class="cc-disc"><div class="inner">守</div></div>
<div><div class="cc-name">叩心枢</div><div class="cc-sub">主动守护 · 系统</div></div>
<span class="cc-status live">当行</span>
</div>
<div class="cc-lc">
<span class="seg reached"></span><span class="seg reached"></span><span class="seg reached"></span><span class="seg reached"></span><span class="seg current"></span><span class="seg"></span><span class="seg"></span>
</div>
<div class="cc-stats">
<div class="cc-stat"><span class="k">藏识</span><span class="v">318</span></div>
<div class="cc-stat"><span class="k">人格</span><span class="v">v4</span></div>
<div class="cc-stat"><span class="k">铭文</span><span class="v">27</span></div>
</div>
</div>
<!-- 云岚(初成) -->
<div class="char-card">
<div class="cc-top">
<div class="cc-disc"><div class="inner">岚</div></div>
<div><div class="cc-name">云岚</div><div class="cc-sub">第 12 日</div></div>
<span class="cc-status">初成</span>
</div>
<div class="cc-lc">
<span class="seg reached"></span><span class="seg reached"></span><span class="seg reached"></span><span class="seg reached"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span>
</div>
<div class="cc-stats">
<div class="cc-stat"><span class="k">藏识</span><span class="v">42</span></div>
<div class="cc-stat"><span class="k">人格</span><span class="v">v3</span></div>
<div class="cc-stat"><span class="k">铭文</span><span class="v">38</span></div>
</div>
</div>
<!-- 墨羽(种魂) -->
<div class="char-card">
<div class="cc-top">
<div class="cc-disc"><div class="inner">墨</div></div>
<div><div class="cc-name">墨羽</div><div class="cc-sub">第 3 日</div></div>
<span class="cc-status dormant">种魂</span>
</div>
<div class="cc-lc">
<span class="seg reached"></span><span class="seg reached"></span><span class="seg reached"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span><span class="seg"></span>
</div>
<div class="cc-stats">
<div class="cc-stat"><span class="k">藏识</span><span class="v">12</span></div>
<div class="cc-stat"><span class="k">人格</span><span class="v">v1</span></div>
<div class="cc-stat"><span class="k">铭文</span><span class="v">6</span></div>
</div>
</div>
<!-- 泠音(暂息) -->
<div class="char-card is-paused">
<div class="cc-top">
<div class="cc-disc"><div class="inner">泠</div></div>
<div><div class="cc-name">泠音</div><div class="cc-sub">暂息 14 日</div></div>
<span class="cc-status dormant">暂息</span>
</div>
<div class="cc-lc">
<span class="seg reached"></span><span class="seg reached"></span><span class="seg reached"></span><span class="seg reached"></span><span class="seg reached"></span><span class="seg current"></span><span class="seg"></span>
</div>
<div class="cc-stats">
<div class="cc-stat"><span class="k">藏识</span><span class="v">203</span></div>
<div class="cc-stat"><span class="k">人格</span><span class="v">v12</span></div>
<div class="cc-stat"><span class="k">铭文</span><span class="v">411</span></div>
</div>
</div>
<!-- 新塑占位 -->
<div class="char-card" style="border-style: dashed; align-items: center; justify-content: center; min-height: 168px; gap: 8px; opacity: 0.6;">
<svg width="28" height="28" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" style="color: var(--fg-faint)"><path d="M8 3v10M3 8h10" /></svg>
<span class="serif" style="font-size: 14px; color: var(--fg-faint)">新塑一位</span>
<span class="mono" style="font-size: 11px; color: var(--fg-faint)">从模板或空白开始</span>
</div>
</div>
</section>
</div>
</div>
</div>
<script src="_theme.js" defer></script>
</body>
</html>