设置页主题外观精简:删掉暗色皮肤与访客端覆盖段落,只留亮色皮肤;明暗切换说明对齐 vivid 前台行为

This commit is contained in:
Sakurasan committed 2026-10-07 23:55:11 +08:00
1 parent f6e92ba376
commit 7171c95275
1 file changed
+7 -30
+7 -30
View File
@@ -74,9 +74,8 @@ function textToSocial(text) {
// 皮肤已精简:亮端固定纸感,暗端固定墨色(2026 重设计)。下面只做展示。
const lightSkins = [
{ id: 'paper', label: '纸感(默认)', bg: '#faf7f1', fg: '#3d7f9c' }
{ id: 'paper', label: '纸感', bg: '#faf7f1', fg: '#3d7f9c' }
]
const darkSkin = { id: 'ink', label: '墨色', bg: '#191817', fg: '#d9b97c' }
// ---------- 界面与自定义(第二套 UI) ----------
@@ -290,43 +289,21 @@ async function save() {
</p>
</div>
<!-- theme -->
<!-- theme:只管亮色皮肤;暗色端固定墨色,明暗切换在前台主题按钮 -->
<div v-if="tab === 'theme'" class="panel">
<div class="panel-title"><h2>主题外观</h2></div>
<div class="field">
<label>亮色皮肤</label>
<div class="theme-swatches">
<div class="sw on" :style="{ background: lightSkins[0].bg, borderColor: lightSkins[0].fg }" :title="lightSkins[0].label + '(固定)'">
<div class="sw on" :style="{ background: lightSkins[0].bg, borderColor: lightSkins[0].fg }" :title="lightSkins[0].label">
<span :style="{ background: lightSkins[0].fg }">{{ lightSkins[0].label }}</span>
</div>
</div>
<p style="margin: 6px 0 0; font-size: 12px; color: var(--admin-muted);">
亮端固定为纸感。访客在前台选择「自动」且系统偏好浅色时使用。
</p>
</div>
<div class="field">
<label>暗色皮肤</label>
<div class="theme-swatches">
<div
class="sw on"
:style="{ background: darkSkin.bg, borderColor: darkSkin.fg }"
:title="darkSkin.label + '(当前固定)'"
>
<span :style="{ background: darkSkin.fg }">{{ darkSkin.label }}</span>
</div>
</div>
<p style="margin: 6px 0 0; font-size: 12px; color: var(--admin-muted);">
暗色端固定为墨色。访客在前台选择「深色」或「自动 + 系统暗」时启用。
</p>
</div>
<div class="field" style="border-top: 1px solid var(--admin-line); padding-top: 14px;">
<label>访客端的覆盖</label>
<p style="margin: 0; font-size: 12.5px; color: var(--admin-muted); line-height: 1.7;">
访客在前台右下角的主题开关会锁定「浅色」或「深色」,
这两种情况下你选的皮肤会被忽略;他们切回「自动」时才会按上面的规则显示。
<p style="margin: 6px 0 0; font-size: 12px; color: var(--admin-muted); line-height: 1.7;">
亮色端使用这里选的皮肤,深色端固定为墨色。
访客在前台右下角切换「浅色 / 深色 / 自动」:浅色走亮色皮肤,
深色走墨色,「自动」跟随系统明暗偏好——与 vivid 前台的行为一致。
</p>
</div>
</div>