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/settings-preview.html
+165
View File
@@ -0,0 +1,165 @@
<!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 — 设置页：外观 / 语言 / 通知 / 数据源 / 时区
* ============================================================ */
.page-header .spacer { flex: 1; }
.save-hint { font-size: 12px; color: var(--patina); display: inline-flex; align-items: center; gap: 6px; }
.save-hint .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--patina); }
/* 设置卡片 */
.set-card { border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); padding: 18px 20px; }
.set-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.set-card-title { font-family: "Songti SC", serif; font-size: 16px; font-weight: 600; color: var(--fg); }
.set-card-eng { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--gilt); }
.set-card-desc { font-size: 12.5px; color: var(--fg-dim); margin-bottom: 16px; line-height: 1.55; }
.set-row { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-top: 1px solid var(--rule); }
.set-row:first-of-type { border-top: none; padding-top: 4px; }
.set-row .lab { flex: 1; }
.set-row .lab .t { font-size: 13.5px; color: var(--fg); font-weight: 500; }
.set-row .lab .h { font-size: 11.5px; color: var(--fg-faint); margin-top: 1px; }
.set-row .ctrl { flex-shrink: 0; }
/* 主题选择 */
.theme-pick { display: flex; gap: 8px; }
.theme-opt { display: flex; flex-direction: column; align-items: center; gap: 5px; cursor: pointer; }
.theme-opt .swatch { width: 46px; height: 30px; border-radius: 6px; border: 1.5px solid var(--rule); transition: border-color 0.12s; }
.theme-opt.dark .swatch { background: linear-gradient(135deg, #0c0e0d, #14110d 60%, #1a2a22); }
.theme-opt.light .swatch { background: linear-gradient(135deg, #f5efde, #e7e1d0 60%, #d8e6dc); }
.theme-opt.auto .swatch { background: linear-gradient(90deg, #0c0e0d 50%, #f5efde 50%); }
.theme-opt.sel .swatch { border-color: var(--patina); box-shadow: 0 0 0 2px var(--patina-wash); }
.theme-opt .nm { font-size: 11px; color: var(--fg-dim); }
.theme-opt.sel .nm { color: var(--patina); font-weight: 500; }
/* segment 选择 */
.seg { display: inline-flex; border: 1px solid var(--rule); border-radius: 7px; overflow: hidden; }
.seg button { font-family: inherit; font-size: 12.5px; padding: 6px 14px; background: transparent; color: var(--fg-dim); border: none; cursor: pointer; border-right: 1px solid var(--rule); }
.seg button:last-child { border-right: none; }
.seg button.sel { background: var(--patina-wash); color: var(--patina); font-weight: 500; }
/* 开关 */
.toggle { position: relative; width: 38px; height: 21px; background: var(--rule); border-radius: 999px; cursor: pointer; border: none; padding: 0; flex-shrink: 0; transition: background 0.15s; }
.toggle::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px; border-radius: 50%; background: var(--fg-dim); transition: transform 0.15s, background 0.15s; }
.toggle.on { background: var(--patina-dim); }
.toggle.on::after { transform: translateX(17px); background: var(--patina); }
/* select 样式 */
.sel-styled { font-family: inherit; font-size: 12.5px; padding: 6px 28px 6px 12px; border-radius: 7px; background: var(--surface-hi); color: var(--fg); border: 1px solid var(--rule); cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5L5 6.5L8 3.5' stroke='%239b958a' stroke-width='1.3' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
/* 数据源 */
.src-list { display: flex; flex-direction: column; gap: 8px; }
.src-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 7px; background: var(--surface-hi); }
.src-item .nm { font-family: "JetBrains Mono", monospace; font-size: 12.5px; color: var(--fg); font-weight: 500; }
.src-item .meta { font-size: 11px; color: var(--fg-faint); }
.src-item .spacer { flex: 1; }
@media (max-width: 768px) { .sidebar-wrap { display: none; } .page-body { padding: 18px 16px 40px; } .set-row { flex-direction: column; align-items: flex-start; gap: 8px; } }
</style>
</head>
<body>
<div class="app-shell">
<!-- ════════ 侧栏（active=设置）════════ -->
<div class="sidebar-mount" data-active="设置"></div>
<!-- ════════ 主区 ════════ -->
<div class="main-area">
<div class="page-header">
<span class="page-title">设置</span>
<span class="page-sub">preferences · 偏好与账户</span>
<span class="spacer"></span>
<span class="save-hint"><span class="dot"></span>已自动保存</span>
</div>
<div class="page-body">
<!-- 外观 -->
<div class="set-card">
<div class="set-card-head"><span class="set-card-title">外观</span><span class="set-card-eng">appearance</span></div>
<div class="set-card-desc">琉璃镜主题切换，暗色为夜铜、亮色为素绢，亦可随系统。</div>
<div class="theme-pick">
<div class="theme-opt dark sel" onclick="pickTheme(this,'dark')"><div class="swatch"></div><span class="nm">夜铜</span></div>
<div class="theme-opt light" onclick="pickTheme(this,'light')"><div class="swatch"></div><span class="nm">素绢</span></div>
<div class="theme-opt auto" onclick="pickTheme(this,'auto')"><div class="swatch"></div><span class="nm">跟随系统</span></div>
</div>
<div class="set-row">
<div class="lab"><div class="t">动效强度</div><div class="h">页面过渡与组件动画</div></div>
<div class="ctrl"><div class="seg"><button class="sel">柔和</button><button>标准</button><button>关闭</button></div></div>
</div>
</div>
<!-- 语言与时区 -->
<div class="set-card">
<div class="set-card-head"><span class="set-card-title">语言与时区</span><span class="set-card-eng">locale</span></div>
<div class="set-card-desc">界面语言与时区，影响时间显示格式与辰正计时。</div>
<div class="set-row">
<div class="lab"><div class="t">界面语言</div><div class="h">简体中文 / English</div></div>
<div class="ctrl"><select class="sel-styled"><option>简体中文</option><option>English</option></select></div>
</div>
<div class="set-row">
<div class="lab"><div class="t">时区</div><div class="h">影响辰正时刻与归档时间轴</div></div>
<div class="ctrl"><select class="sel-styled"><option>Asia/Shanghai (UTC+8)</option><option>Asia/Tokyo (UTC+9)</option></select></div>
</div>
<div class="set-row">
<div class="lab"><div class="t">时态制式</div><div class="h">辰正十二时辰 / 24 小时制</div></div>
<div class="ctrl"><div class="seg"><button class="sel">辰正</button><button>24h</button></div></div>
</div>
</div>
<!-- 通知 -->
<div class="set-card">
<div class="set-card-head"><span class="set-card-title">通知</span><span class="set-card-eng">notifications</span></div>
<div class="set-card-desc">工具确认、演化里程碑与记忆审查的通知渠道。</div>
<div class="set-row">
<div class="lab"><div class="t">工具确认请求</div><div class="h">L3 及以上工具调用时推送</div></div>
<div class="ctrl"><button class="toggle on" type="button" onclick="this.classList.toggle('on')"></button></div>
</div>
<div class="set-row">
<div class="lab"><div class="t">演化里程碑</div><div class="h">人格或记忆发生显著演化时</div></div>
<div class="ctrl"><button class="toggle on" type="button" onclick="this.classList.toggle('on')"></button></div>
</div>
<div class="set-row">
<div class="lab"><div class="t">记忆审查提醒</div><div class="h">敏感记忆待复核时每日汇总</div></div>
<div class="ctrl"><button class="toggle" type="button" onclick="this.classList.toggle('on')"></button></div>
</div>
<div class="set-row">
<div class="lab"><div class="t">声音提示</div><div class="h">收到消息时的铜磬音效</div></div>
<div class="ctrl"><button class="toggle" type="button" onclick="this.classList.toggle('on')"></button></div>
</div>
</div>
<!-- 数据源 -->
<div class="set-card">
<div class="set-card-head"><span class="set-card-title">数据源</span><span class="set-card-eng">data sources</span></div>
<div class="set-card-desc">人物与世界的资料来源，决定记忆与归档的同步范围。</div>
<div class="src-list">
<div class="src-item"><span class="nm">local-files</span><span class="meta">本地知识库 · 312 文件</span><span class="spacer"></span><button class="toggle on" type="button" onclick="this.classList.toggle('on')"></button></div>
<div class="src-item"><span class="nm">bowen-web</span><span class="meta">博闻联网检索 · 按需</span><span class="spacer"></span><button class="toggle on" type="button" onclick="this.classList.toggle('on')"></button></div>
<div class="src-item"><span class="nm">camera-feed</span><span class="meta">摄像头读取 · 仅摘要</span><span class="spacer"></span><button class="toggle" type="button" onclick="this.classList.toggle('on')"></button></div>
</div>
</div>
</div>
</div>
</div>
<script>
function pickTheme(el, mode) {
document.querySelectorAll(".theme-opt").forEach((o) => o.classList.remove("sel"));
el.classList.add("sel");
if (mode !== "auto") {
document.documentElement.dataset.theme = mode;
document.getElementById("theme-label").textContent = mode === "dark" ? "夜铜" : "素绢";
}
}
</script>
<script src="_theme.js" defer></script>
</body>
</html>