设置页主题外观精简:删掉暗色皮肤与访客端覆盖段落,只留亮色皮肤;明暗切换说明对齐 vivid 前台行为
This commit is contained in:
1 parent
f6e92ba376
commit
7171c95275
1 file changed
+7
-30
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user