241 lines
12 KiB
HTML
241 lines
12 KiB
HTML
<!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 — 人物资料与沉淀页
|
||
* ============================================================ */
|
||
|
||
.app-main { flex: 1; padding: 24px 28px 56px; max-width: 880px; width: 100%; margin: 0 auto; }
|
||
|
||
/* ── 卡片 ── */
|
||
|
||
.card-title .glyph { color: var(--cinnabar); opacity: 0.7; }
|
||
|
||
/* ── 导入向导 ── */
|
||
.import-form { display: flex; gap: 12px; }
|
||
.import-row { display: grid; grid-template-columns: 2fr 3fr; gap: 12px; }
|
||
.field-label { display: block; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 4px; }
|
||
.field input, .field textarea, .field select { width: 100%; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--glass); color: var(--fg); font-family: inherit; font-size: 13px; transition: border-color 0.15s; }
|
||
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--patina-dim); }
|
||
.field textarea { min-height: 90px; resize: vertical; }
|
||
|
||
.btn-success { background: var(--patina-wash); color: var(--patina); border-color: var(--patina-dim); }
|
||
.btn-success:hover { background: var(--patina-dim); color: var(--fg); }
|
||
.btn-danger { background: var(--cinnabar-wash); color: var(--cinnabar); border-color: var(--cinnabar-dim); }
|
||
.btn-danger:hover { background: var(--cinnabar-dim); color: var(--fg); }
|
||
|
||
|
||
/* ── 导入结果 ── */
|
||
.import-result { border: 1px solid var(--patina-dim); border-radius: 12px; background: var(--patina-wash); padding: 14px 18px; display: flex; align-items: center; gap: 12px; margin-top: 8px; }
|
||
.import-result .icon { font-size: 20px; }
|
||
.import-result .text { font-size: 13px; color: var(--patina); }
|
||
.import-result .text strong { color: var(--fg); }
|
||
|
||
/* ── 候选列表 ── */
|
||
|
||
.section-label .count { font-size: 11px; color: var(--fg-dim); font-weight: 400; }
|
||
.candidate-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
|
||
.candidate-item:last-child { border-bottom: none; }
|
||
.candidate-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
|
||
.candidate-icon.memory { background: var(--patina-wash); color: var(--patina); }
|
||
.candidate-icon.world { background: var(--gilt-faint); color: var(--gilt); }
|
||
.candidate-body { flex: 1; min-width: 0; }
|
||
.candidate-title { font-size: 14px; font-weight: 500; color: var(--fg); }
|
||
.candidate-desc { font-size: 12px; color: var(--fg-dim); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
|
||
.candidate-meta { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--fg-faint); margin-top: 4px; }
|
||
.candidate-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
|
||
|
||
.empty-state { text-align: center; padding: 40px 20px; color: var(--fg-faint); font-size: 13px; }
|
||
|
||
/* ── Tag ── */
|
||
|
||
.tag-memory { border-color: var(--patina-dim); color: var(--patina); background: var(--patina-wash); }
|
||
.tag-world { border-color: var(--gilt-dim); color: var(--gilt); background: var(--gilt-faint); }
|
||
.tag-pending { border-color: var(--gilt-dim); color: var(--gilt); background: var(--gilt-faint); }
|
||
.tag-approved { border-color: var(--patina-dim); color: var(--patina); background: var(--patina-wash); }
|
||
|
||
@media (max-width: 768px) {
|
||
.app-main { padding: 16px 14px 40px; }
|
||
.import-row { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="app-shell">
|
||
<div class="sidebar-mount" data-active="人物"></div>
|
||
<div class="main-area">
|
||
<main class="app-main">
|
||
|
||
<!-- ═══ 面包屑 ═══ -->
|
||
<a class="back-link" href="character-detail-preview.html">← 返回人物详情</a>
|
||
|
||
<!-- ═══ 页头 ═══ -->
|
||
<h1 class="page-title">资料与沉淀</h1>
|
||
<p class="page-sub">为「时崎狂三」导入资料、审核候选沉淀。</p>
|
||
|
||
<!-- ═══ 导入向导 ═══ -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<h2 class="card-title"><span class="glyph">📥</span> 资料导入</h2>
|
||
</div>
|
||
<div class="card-body">
|
||
<div class="import-form">
|
||
<div class="import-row">
|
||
<div class="field">
|
||
<label class="field-label">资料类型</label>
|
||
<select>
|
||
<option>background_story</option>
|
||
<option>character_profile</option>
|
||
<option>chat_history</option>
|
||
<option selected>role_card</option>
|
||
<option>world_setting</option>
|
||
<option>style_sample</option>
|
||
<option>diary</option>
|
||
<option>other</option>
|
||
</select>
|
||
</div>
|
||
<div class="field">
|
||
<label class="field-label">标题（可选）</label>
|
||
<input type="text" placeholder="为这段资料起个标题…" value="时崎狂三 角色卡 v2" />
|
||
</div>
|
||
</div>
|
||
<div class="field">
|
||
<label class="field-label">内容 *</label>
|
||
<textarea placeholder="粘贴人物设定、背景故事、对话记录…">姓名：时崎狂三
|
||
身份：精灵（Nightmare·梦魇）
|
||
能力：刻刻帝（Zafkiel）—— 以自身时间为代价操控时间
|
||
性格：优雅腹黑，内心孤独偏执，温柔而危险
|
||
喜好：黑猫、红茶、古董时钟、肖邦的钢琴曲</textarea>
|
||
</div>
|
||
|
||
<div class="import-result">
|
||
<span class="icon">📄</span>
|
||
<span class="text">已解析 <strong>12</strong> 个条目，<strong>3</strong> 个档案候选待审核。</span>
|
||
<div style="flex:1;"></div>
|
||
<button class="btn btn-primary btn-sm">✦ 触发候选抽取</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ═══ 待审候选 ═══ -->
|
||
<div>
|
||
<div class="section-label">
|
||
📋 待审候选
|
||
<span class="count">（共 5 条待审核）</span>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header" style="padding-bottom:4px;">
|
||
<h2 class="card-title"><span class="glyph">🧠</span> 记忆候选</h2>
|
||
<span class="tag tag-memory">3 条待审</span>
|
||
</div>
|
||
<div class="card-body">
|
||
|
||
<!-- 候选 1 -->
|
||
<div class="candidate-item">
|
||
<div class="candidate-icon memory">🧠</div>
|
||
<div class="candidate-body">
|
||
<div class="candidate-title">狂三在教堂中与折纸对峙</div>
|
||
<div class="candidate-desc">在第 5 话中，狂三在废弃教堂与鸢一折纸展开战斗。她展现出从容不迫的战斗姿态，即使被压制依然保持优雅的微笑。</div>
|
||
<div class="candidate-meta">来源：cycle · 置信度 82% · 2026-07-12 18:24</div>
|
||
</div>
|
||
<div class="candidate-actions">
|
||
<button class="btn btn-success btn-sm">✓ 采纳</button>
|
||
<button class="btn btn-danger btn-sm">✕ 拒绝</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 候选 2 -->
|
||
<div class="candidate-item">
|
||
<div class="candidate-icon memory">🧠</div>
|
||
<div class="candidate-body">
|
||
<div class="candidate-title">狂三对红茶的偏好</div>
|
||
<div class="candidate-desc">狂三在精灵公寓中冲泡大吉岭红茶，提到喜欢第二泡的醇厚口感，加一颗方糖。对速溶咖啡表示「那是凡人的妥协」。</div>
|
||
<div class="candidate-meta">来源：import · 置信度 95% · 2026-07-13 09:12</div>
|
||
</div>
|
||
<div class="candidate-actions">
|
||
<button class="btn btn-success btn-sm">✓ 采纳</button>
|
||
<button class="btn btn-danger btn-sm">✕ 拒绝</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 候选 3 -->
|
||
<div class="candidate-item">
|
||
<div class="candidate-icon memory">🧠</div>
|
||
<div class="candidate-body">
|
||
<div class="candidate-title">狂三与十香的初次相遇</div>
|
||
<div class="candidate-desc">在天宫塔顶，狂三首次与夜刀神十香相遇。她以优雅的姿态自我介绍，语气中带着玩味与好奇。</div>
|
||
<div class="candidate-meta">来源：cycle · 置信度 76% · 2026-07-11 22:05</div>
|
||
</div>
|
||
<div class="candidate-actions">
|
||
<button class="btn btn-success btn-sm">✓ 采纳</button>
|
||
<button class="btn btn-danger btn-sm">✕ 拒绝</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header" style="padding-bottom:4px;">
|
||
<h2 class="card-title"><span class="glyph">🌍</span> 世界实体候选</h2>
|
||
<span class="tag tag-world">2 条待审</span>
|
||
</div>
|
||
<div class="card-body">
|
||
|
||
<!-- 世界实体 1 -->
|
||
<div class="candidate-item">
|
||
<div class="candidate-icon world">🌍</div>
|
||
<div class="candidate-body">
|
||
<div class="candidate-title">刻刻帝（Zafkiel）</div>
|
||
<div class="candidate-desc">狂三的天使，外观为巨大古钟，时钟指针化为长短双枪。拥有十二种时间能力，每种消耗不同的"时间"代价。</div>
|
||
<div class="candidate-meta">类别：artifact · 来源：import · 置信度 88%</div>
|
||
</div>
|
||
<div class="candidate-actions">
|
||
<button class="btn btn-success btn-sm">✓ 采纳</button>
|
||
<button class="btn btn-danger btn-sm">✕ 拒绝</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 世界实体 2 -->
|
||
<div class="candidate-item">
|
||
<div class="candidate-icon world">🌍</div>
|
||
<div class="candidate-body">
|
||
<div class="candidate-title">天宫塔</div>
|
||
<div class="candidate-desc">天宫市标志性建筑，位于市中心。曾是狂三与精灵们多次交战与相遇的场所。顶层观景台可俯瞰整个天宫市。</div>
|
||
<div class="candidate-meta">类别：location · 来源：cycle · 置信度 71%</div>
|
||
</div>
|
||
<div class="candidate-actions">
|
||
<button class="btn btn-success btn-sm">✓ 采纳</button>
|
||
<button class="btn btn-danger btn-sm">✕ 拒绝</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 空状态示例（所有候选已审完时展示） -->
|
||
<!--
|
||
<div class="card">
|
||
<div class="empty-state">暂无待审候选 · 所有记忆与世界实体已审核确认</div>
|
||
</div>
|
||
-->
|
||
|
||
</div>
|
||
|
||
</main>
|
||
</div>
|
||
</div>
|
||
<script src="_theme.js" defer></script>
|
||
|
||
</body>
|
||
</html>
|