chenxin/hunjing
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化提交

Browse Source
This commit is contained in:
chenxin committed 2026-08-21 16:00:13 +08:00
commit 887c1f449e
963 files changed
+166869
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/design/card-import-preview.html
+370
View File
@@ -0,0 +1,370 @@
<!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 — 角色卡兼容（V1/V2/V3 导入 / 导出）
* 融合设计 §8（魂册降生）
*
* 完整导入流程：拖拽 → 解析 → 预览字段映射 → 冲突检测
* → 确认建立人物 + 道体 + 世谱
* 导出：多格式静态快照，含可选勾选。
* ============================================================ */
.app-main { flex: 1; padding: 24px 28px 56px; max-width: 820px; width: 100%; margin: 0 auto; }
.card-title .glyph { color: var(--gilt); opacity: 0.85; }
/* ── 步骤指示器 ── */
.steps { display: flex; gap: 0; margin-bottom: 20px; }
.step { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--rule); background: var(--surface); font-size: 12.5px; color: var(--fg-faint); position: relative; }
.step:first-child { border-radius: 10px 0 0 10px; }
.step:last-child { border-radius: 0 10px 10px 0; }
.step .idx { font-family: "JetBrains Mono", monospace; font-size: 11px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule); flex-shrink: 0; }
.step.done { color: var(--patina); border-color: var(--patina-dim); background: var(--patina-wash); }
.step.done .idx { background: var(--patina); color: var(--ink); border-color: var(--patina); }
.step.active { color: var(--fg); border-color: var(--gilt-dim); }
.step.active .idx { border-color: var(--gilt); color: var(--gilt); }
/* ── 拖拽上传区 ── */
.dropzone { border: 2px dashed var(--rule); border-radius: 14px; padding: 44px 24px; text-align: center; cursor: pointer; transition: all var(--duration-normal); background: var(--surface); }
.dropzone:hover, .dropzone.drag { border-color: var(--patina); background: var(--patina-wash); transform: translateY(-1px); }
.dropzone .icon { font-size: 38px; margin-bottom: 10px; opacity: 0.8; }
.dropzone .hint { font-size: 14px; color: var(--fg); }
.dropzone .hint strong { color: var(--patina); }
.dropzone .sub { font-size: 12px; color: var(--fg-faint); margin-top: 4px; }
.formats { display: flex; gap: 6px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.dropzone.has-file { border-color: var(--patina-dim); background: var(--patina-wash); border-style: solid; }
/* ── 解析中 ── */
.parsing-card { border: 1px solid var(--gilt-dim); border-radius: 12px; padding: 16px 20px; background: var(--gold-faint, var(--surface)); display: flex; align-items: center; gap: 14px; }
.parsing-card .spinner { width: 20px; height: 20px; border: 2px solid var(--rule); border-top-color: var(--gilt); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.parsing-card .info .fn { font-family: "JetBrains Mono", monospace; font-size: 12px; color: var(--fg); }
.parsing-card .info .st { font-size: 11.5px; color: var(--fg-dim); margin-top: 2px; }
/* ── 字段映射预览 ── */
.field-map { border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; }
.field-map-row { display: grid; grid-template-columns: 1fr 32px 1fr; gap: 0; align-items: center; font-size: 12.5px; border-bottom: 1px solid var(--rule); }
.field-map-row:last-child { border-bottom: none; }
.field-map-row.head { background: var(--surface-hi); font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: 0.06em; color: var(--fg-faint); text-transform: uppercase; }
.field-map-row .src { padding: 9px 14px; color: var(--fg-dim); font-family: "JetBrains Mono", monospace; font-size: 11.5px; }
.field-map-row .dst { padding: 9px 14px; color: var(--patina); font-weight: 500; }
.field-map-row .dst.new { color: var(--gilt); }
.field-map-row .arr { text-align: center; color: var(--fg-faint); font-family: "JetBrains Mono", monospace; font-size: 11px; }
.field-map .summary { padding: 10px 14px; background: var(--patina-wash); border-top: 1px solid var(--patina-dim); font-size: 11.5px; color: var(--patina); font-family: "JetBrains Mono", monospace; }
/* ── 冲突检测 ── */
.conflict-card { border: 1px solid var(--cinnabar-dim); border-radius: 12px; padding: 16px 18px; background: var(--cinnabar-wash); }
.conflict-card .head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.conflict-card .head .seal { font-family: "Songti SC", serif; font-size: 14px; font-weight: 700; color: var(--cinnabar); }
.conflict-card .head .risk { font-family: "JetBrains Mono", monospace; font-size: 10px; color: var(--cinnabar); margin-left: auto; border: 1px solid var(--cinnabar-dim); padding: 2px 7px; border-radius: 4px; }
.conflict-diff { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.conflict-col { border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px; background: var(--surface); }
.conflict-col .lb { font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: 0.1em; color: var(--fg-faint); text-transform: uppercase; margin-bottom: 8px; }
.conflict-col.existing .lb { color: var(--fg-dim); }
.conflict-col.incoming .lb { color: var(--gilt); }
.conflict-col .val { font-size: 13px; color: var(--fg); line-height: 1.5; }
.conflict-col.incoming .val { color: var(--gilt); }
.conflict-actions { display: flex; gap: 8px; margin-top: 14px; }
/* ── 导入结果 ── */
.import-ok { border: 1px solid var(--patina-dim); border-radius: 12px; background: var(--patina-wash); padding: 16px 18px; }
.import-ok-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--patina); margin-bottom: 12px; }
.import-ok-head strong { color: var(--fg); }
.char-created { display: flex; gap: 14px; align-items: center; padding: 12px 14px; border: 1px solid var(--rule); border-radius: 10px; background: var(--ink); }
.char-mirror { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--patina-bright), var(--night-bronze) 70%); display: flex; align-items: center; justify-content: center; font-family: "Songti SC", serif; font-size: 22px; color: #fff; flex-shrink: 0; box-shadow: inset 0 1px 2px rgba(255,255,255,0.2); }
.char-info { flex: 1; min-width: 0; }
.char-name { font-family: "Songti SC", serif; font-size: 16px; font-weight: 600; }
.char-name small { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--fg-faint); font-weight: 400; margin-left: 8px; }
.char-derived { font-size: 12px; color: var(--fg-dim); margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; }
.char-derived code { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--patina); }
.created-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.created-item { font-size: 12px; color: var(--fg-dim); display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.created-item .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.created-item .dot.ok { background: var(--patina); }
.created-item .dot.skip { background: var(--fg-faint); }
/* ── 导入历史 ── */
.history-list { display: flex; flex-direction: column; gap: 6px; }
.history-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--rule); font-size: 12px; }
.history-row:hover { border-color: var(--patina-dim); }
.history-row .ts { font-family: "JetBrains Mono", monospace; font-size: 10.5px; color: var(--fg-faint); }
.history-row .who { flex: 1; color: var(--fg); }
.history-row .badge { font-family: "JetBrains Mono", monospace; font-size: 10px; padding: 2px 7px; border-radius: 4px; }
.history-row .badge.ok { color: var(--patina); background: var(--patina-wash); border: 1px solid var(--patina-dim); }
.history-row .badge.dup { color: var(--gilt); background: var(--gilt-faint); border: 1px solid var(--gilt-dim); }
/* ── 导出 ── */
.export-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.export-row + .export-row { border-top: 1px solid var(--rule); }
.export-body { flex: 1; }
.export-title { font-size: 13.5px; color: var(--fg); }
.export-desc { font-size: 12px; color: var(--fg-dim); margin-top: 2px; }
.export-checks { display: flex; gap: 14px; margin-top: 6px; flex-wrap: wrap; }
.export-check { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--fg-dim); cursor: pointer; }
.export-check input { accent-color: var(--patina); }
.note { font-size: 12.5px; color: var(--fg-dim); line-height: 1.7; }
.note code { font-family: "JetBrains Mono", monospace; font-size: 11.5px; background: var(--surface-hi); padding: 1px 6px; border-radius: 4px; color: var(--patina); }
.note strong { color: var(--fg); font-weight: 500; }
.note .warn { color: var(--cinnabar); }
@media (max-width: 768px) {
.conflict-diff { grid-template-columns: 1fr; }
.field-map-row { grid-template-columns: 1fr 24px 1fr; font-size: 11px; }
}
</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="characters-preview.html">← 返回人物列表</a>
<div class="page-head">
<div>
<h1 class="page-title">角色卡兼容 · 魂册降生</h1>
<p class="page-sub">导入外部角色卡建立人物，或把人物导出为标准角色卡分享。</p>
</div>
</div>
<!-- ═══ 第一步：导入角色卡 ═══ -->
<div class="card" id="section-import">
<div class="card-header">
<h2 class="card-title"><span class="glyph">⬇</span> 导入角色卡</h2>
<span class="tag tag-patina">V1 · V2 · V3</span>
</div>
<div class="card-body">
<!-- 步骤条 -->
<div class="steps">
<span class="step done"><span class="idx">1</span>拖入文件</span>
<span class="step active"><span class="idx">2</span>预览映射</span>
<span class="step"><span class="idx">3</span>冲突检测</span>
<span class="step"><span class="idx">4</span>确认建立</span>
</div>
<!-- 拖拽区（已有文件态） -->
<div class="dropzone has-file">
<div class="icon">🎴</div>
<div class="hint"><strong>时崎狂三_v3.png</strong> · 已识别为 V3 卡</div>
<div class="sub">142 KiB · PNG 内嵌 charx JSON</div>
<div class="formats">
<span class="tag tag-gilt">.png</span>
<span class="tag tag-gilt">v3</span>
<span class="tag tag-patina">自动识别</span>
</div>
</div>
<!-- 字段映射预览 -->
<div style="margin-top:16px;">
<div class="section-label">字段映射预览 <span class="sub">— 卡字段 → 魂镜实体</span></div>
<div class="field-map">
<div class="field-map-row head">
<span style="padding:8px 14px;">角色卡字段</span>
<span></span>
<span style="padding:8px 14px;">魂镜实体 · 字段</span>
</div>
<div class="field-map-row">
<span class="src">data.name</span>
<span class="arr">→</span>
<span class="dst">character.name · 「时崎狂三」</span>
</div>
<div class="field-map-row">
<span class="src">data.nickname</span>
<span class="arr">→</span>
<span class="dst">character.display_name · 「三三」</span>
</div>
<div class="field-map-row">
<span class="src">data.description</span>
<span class="arr">→</span>
<span class="dst">character.description · 人物描述</span>
</div>
<div class="field-map-row">
<span class="src">data.personality</span>
<span class="arr">→</span>
<span class="dst new">道体 personality_summary · 初始快照 🆕</span>
</div>
<div class="field-map-row">
<span class="src">data.first_mes</span>
<span class="arr">→</span>
<span class="dst new">道体 greeting · 初见问候 🆕</span>
</div>
<div class="field-map-row">
<span class="src">data.system_prompt</span>
<span class="arr">→</span>
<span class="dst new">道体增补层 · augment（绝不覆盖 mission）🆕</span>
</div>
<div class="field-map-row">
<span class="src">data.mes_example</span>
<span class="arr">→</span>
<span class="dst new">道体 dialogue_examples · 对话示例 🆕</span>
</div>
<div class="field-map-row">
<span class="src">data.character_book</span>
<span class="arr">→</span>
<span class="dst new">世谱 · 1 本书 · 5 条目 🆕</span>
</div>
<div class="summary">共 8 个字段映射 · 5 个实体操作 · 0 处冲突</div>
</div>
</div>
<!-- 冲突检测区域（本示例无冲突） -->
<div style="margin-top:16px;">
<div class="section-label">冲突检测 <span class="sub">— 同名人物已存在时触发</span></div>
<div style="border:1px solid var(--patina-dim);border-radius:10px;padding:14px 16px;background:var(--patina-wash);font-size:13px;color:var(--patina);display:flex;align-items:center;gap:8px;">
<span>✓</span> 无冲突 · 「时崎狂三」尚未存在于魂册，可直接建立。
</div>
</div>
<!-- 底部操作 -->
<div style="display:flex;gap:8px;margin-top:18px;justify-content:flex-end;">
<button class="btn btn-outline">取消</button>
<button class="btn btn-primary">确认建立人物与道体</button>
</div>
</div>
</div>
<!-- ═══ 冲突场景（独立卡片，仅同名时展示）═══ -->
<div class="card" id="section-conflict" style="display:none;">
<div class="card-header">
<h2 class="card-title"><span class="glyph">⚠</span> 冲突处理</h2>
</div>
<div class="card-body">
<div class="conflict-card">
<div class="head">
<span class="seal">重名冲突</span>
<span class="risk">NEEDS REVIEW</span>
</div>
<div class="conflict-diff">
<div class="conflict-col existing">
<div class="lb">现存 · character_008f6c…</div>
<div class="val">时崎狂三 · 道体 v3（大周天演化 12 轮）<br/>personality_summary 已偏离原始导入值</div>
</div>
<div class="conflict-col incoming">
<div class="lb">导入 · 卡中版本</div>
<div class="val">时崎狂三 · 卡中原版 personality<br/>世谱 5 条目（3 条与现存重复）</div>
</div>
</div>
<p style="font-size:12px;color:var(--fg-dim);margin:12px 0 0;">
<strong>推荐。</strong>新建为独立人物（<code>character_008f6c…_imported</code>），保留现存演化数据不动。世谱可选择合并（去重）或替换。
</p>
<div class="conflict-actions">
<button class="btn btn-primary btn-sm">新建独立人物</button>
<button class="btn btn-outline btn-sm">覆盖现存道体</button>
<button class="btn btn-outline btn-sm">仅合并世谱</button>
<button class="btn btn-ghost btn-sm">取消导入</button>
</div>
</div>
</div>
</div>
<!-- ═══ 导入结果（成功后展示） ═══ -->
<div class="card" id="section-result">
<div class="card-header">
<h2 class="card-title"><span class="glyph">✓</span> 导入结果</h2>
</div>
<div class="card-body">
<div class="import-ok">
<div class="import-ok-head">
<span>✓</span> 导入成功 · <strong>时崎狂三</strong>
</div>
<div class="char-created">
<div class="char-mirror">狂</div>
<div class="char-info">
<div class="char-name">时崎狂三 <small>ID · character_008f6c3a…</small></div>
<div class="char-derived">
<span>显示名 <code>三三</code></span>
<span>道体初始人格 <code>腹黑优雅·时间支配者…</code></span>
<span>世谱 <code>狂三世谱 · 5 条目</code></span>
</div>
</div>
<button class="btn btn-primary btn-sm">查看人物 →</button>
</div>
<div class="created-list">
<div class="created-item"><span class="dot ok"></span> 人物记录 · character_008f6c3a…</div>
<div class="created-item"><span class="dot ok"></span> 道体 · personality_summary + greeting + augment + dialogue_examples</div>
<div class="created-item"><span class="dot ok"></span> 世谱 · 狂三世谱（1 书 · 5 条目）</div>
<div class="created-item"><span class="dot skip"></span> 跳过 · character_book.entries[2] 关键词为空（无效条目）</div>
</div>
</div>
</div>
</div>
<!-- ═══ 导入历史 ═══ -->
<div class="card">
<div class="card-header">
<h2 class="card-title"><span class="glyph">📋</span> 导入记录</h2>
<span class="tag tag-gilt">近 30 日</span>
</div>
<div class="card-body">
<div class="history-list">
<div class="history-row">
<span class="ts">07-25 14:02</span>
<span class="who">时崎狂三</span>
<span style="font-size:11px;color:var(--fg-faint);">时崎狂三_v3.png · 142 KiB</span>
<span class="badge ok">新建</span>
</div>
<div class="history-row">
<span class="ts">07-24 09:18</span>
<span class="who">五更琉璃 · 黑猫</span>
<span style="font-size:11px;color:var(--fg-faint);">kuroneko_v2.json · 8 KiB</span>
<span class="badge ok">新建</span>
</div>
<div class="history-row">
<span class="ts">07-22 22:41</span>
<span class="who">桐谷和人</span>
<span style="font-size:11px;color:var(--fg-faint);">kirito_charx.png · 88 KiB</span>
<span class="badge dup">重名 · 已建独立人物</span>
</div>
</div>
</div>
</div>
<!-- ═══ 导出 ═══ -->
<div class="card">
<div class="card-header">
<h2 class="card-title"><span class="glyph">⬆</span> 导出角色卡</h2>
<span class="tag tag-gilt">静态快照</span>
</div>
<div class="card-body">
<div class="export-row">
<div class="char-mirror" style="width:42px;height:42px;font-size:18px;">狂</div>
<div class="export-body">
<div class="export-title">时崎狂三 · V3 角色卡</div>
<div class="export-desc"><code>.json</code> · name / personality（取道体当前快照）/ character_book（世谱）</div>
<div class="export-checks">
<label class="export-check"><input type="checkbox" checked /> 包含世谱</label>
<label class="export-check"><input type="checkbox" /> 包含对话示例</label>
<label class="export-check"><input type="checkbox" /> 包含初见问候</label>
</div>
</div>
<button class="btn btn-outline btn-sm">⬇ 下载 .json</button>
</div>
<div class="note" style="margin-top:8px;">
<strong>静态快照。</strong>导出的是当前设定快照——<span class="warn">演化维度（人格版本 / 记忆 / 情绪）不会导出</span>，因标准角色卡格式无对应字段。导出仅用于分享「角色设定」给通用角色卡生态。
</div>
</div>
</div>
</main>
</div>
</div>
<script src="_theme.js" defer></script>
</body>
</html>