前端: 浅色模式 + 系统自动主题
- 引入语义化 CSS 变量令牌(bg/surface/edge/ink/muted/accent 等), data-theme 三态切换 - theme store(localStorage + 系统偏好跟随), 首屏内联脚本防主题闪烁 - ThemeToggle 组件(浅色/深色/跟随系统) 置于导航与控制台顶栏 - 全量替换硬编码 zinc/emerald/red 类为令牌, 图表基线/状态色随主题适配 - 浅色对比度校准(accent/err/warn 深浅各一套) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -41,49 +41,49 @@ onMounted(load)
|
||||
<div class="mx-auto max-w-2xl">
|
||||
<div class="mb-6">
|
||||
<h1 class="text-lg font-semibold">系统配置</h1>
|
||||
<p class="text-sm text-zinc-500">注册策略等平台级配置</p>
|
||||
<p class="text-sm text-muted">注册策略等平台级配置</p>
|
||||
</div>
|
||||
|
||||
<div class="card space-y-5 p-6">
|
||||
<div v-if="loading" class="py-8 text-center text-sm text-zinc-600">加载中…</div>
|
||||
<div v-if="loading" class="py-8 text-center text-sm text-muted">加载中…</div>
|
||||
<template v-else>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<p class="mb-1.5 text-xs font-medium text-zinc-400">注册模式</p>
|
||||
<p class="mb-1.5 text-xs font-medium text-muted">注册模式</p>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
class="flex-1 rounded-md border px-3 py-2 text-sm transition"
|
||||
:class="config.registration_mode === 'open' ? 'border-accent bg-accent/10 text-emerald-300' : 'border-zinc-700 text-zinc-400'"
|
||||
:class="config.registration_mode === 'open' ? 'border-accent bg-accent/10 text-accent' : 'border-edge2 text-muted'"
|
||||
@click="config.registration_mode = 'open'"
|
||||
>
|
||||
开放注册
|
||||
</button>
|
||||
<button
|
||||
class="flex-1 rounded-md border px-3 py-2 text-sm transition"
|
||||
:class="config.registration_mode === 'invite' ? 'border-accent bg-accent/10 text-emerald-300' : 'border-zinc-700 text-zinc-400'"
|
||||
:class="config.registration_mode === 'invite' ? 'border-accent bg-accent/10 text-accent' : 'border-edge2 text-muted'"
|
||||
@click="config.registration_mode = 'invite'"
|
||||
>
|
||||
邀请码
|
||||
</button>
|
||||
</div>
|
||||
<p class="mt-1.5 text-xs text-zinc-600">邀请模式下注册需填写有效邀请码(invite_codes 配置)</p>
|
||||
<p class="mt-1.5 text-xs text-muted">邀请模式下注册需填写有效邀请码(invite_codes 配置)</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="mb-1.5 text-xs font-medium text-zinc-400">邀请码(逗号分隔)</p>
|
||||
<p class="mb-1.5 text-xs font-medium text-muted">邀请码(逗号分隔)</p>
|
||||
<input
|
||||
v-model="config.invite_codes"
|
||||
placeholder="code1,code2"
|
||||
class="h-10 w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 font-mono text-xs outline-none focus:border-accent"
|
||||
class="h-10 w-full rounded-md border border-edge2 bg-surface px-3 font-mono text-xs outline-none focus:border-accent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between rounded-md border border-zinc-800 bg-zinc-900/60 px-4 py-3">
|
||||
<div class="flex items-center justify-between rounded-md border border-edge bg-surface/60 px-4 py-3">
|
||||
<div>
|
||||
<p class="text-sm text-zinc-300">其他配置项</p>
|
||||
<p class="text-xs text-zinc-600">汇率、限流阈值、维护开关在后续里程碑开放</p>
|
||||
<p class="text-sm text-ink">其他配置项</p>
|
||||
<p class="text-xs text-muted">汇率、限流阈值、维护开关在后续里程碑开放</p>
|
||||
</div>
|
||||
<span class="font-mono text-xs text-zinc-600">M3+</span>
|
||||
<span class="font-mono text-xs text-muted">M3+</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user