fix(ui): 强制浅色主题与登录页细节修正
构建并部署 BYW VoiceHub / Preflight 语法与构建检查 (push) Failing after 2m43s
构建并部署 BYW VoiceHub / 构建并推送容器镜像 (push) Skipped
构建并部署 BYW VoiceHub / 部署到生产服务器 (push) Failing after 3s

- 主题:将 CSS 变量默认值由深色改为 ClassicLight 浅色基准(背景/文字/边框/按钮/输入框/滚动条),追加 prefers-color-scheme: dark 下的 color-scheme: light 覆盖,补齐 surface-xxx 别名避免部分组件底色色值缺失
- 语言按钮:删除首页顶栏语言切换按钮及其点击处理逻辑
- 第三方登录:OAuthButtons 重写为使用语义化 CSS 变量而非无效的 --border-color,新增 alwaysShow 选项在未配置 provider 时显示占位提示;登录页强制启用提示
- 页脚与登录页:全部文字颜色与分割线由硬编码 rgba(255*) 改为 var(--text-tertiary/quaternary/border-primary),在浅色背景下保证对比度
This commit is contained in:
2026-09-12 12:32:27 +08:00
parent a82ff6747e
commit 94832e2c82
6 changed files with 216 additions and 77 deletions
+6 -25
View File
@@ -45,18 +45,6 @@
<span class="utility-btn-label">主题</span>
</button>
<!-- 语言切换按钮(占位按钮,当前单语种) -->
<button
class="utility-btn lang-toggle-btn"
type="button"
aria-label="语言"
title="语言"
@click="handleLanguageClick"
>
<Icon name="globe" :size="18" />
<span class="utility-btn-label">语言</span>
</button>
<div v-if="isClientAuthenticated" class="user-info">
<div class="user-details-desktop">
<span class="user-name">{{ user?.name || '用户' }}</span>
@@ -710,11 +698,6 @@ const { isDark, toggleTheme } = useTheme()
const handleToggleTheme = () => {
toggleTheme()
}
const handleLanguageClick = () => {
if (typeof window !== 'undefined' && window.$showNotification) {
window.$showNotification('当前版本暂不支持多语言切换', 'info')
}
}
// 站点配置
const {
@@ -1750,15 +1733,15 @@ if (
gap: 10px;
}
/* 通用工具按钮(主题/语言) */
/* 通用工具按钮(主题) */
.utility-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
background: var(--utility-btn-bg, rgba(255, 255, 255, 0.06));
color: var(--utility-btn-color, rgba(255, 255, 255, 0.78));
border: 1px solid var(--utility-btn-border, rgba(255, 255, 255, 0.12));
background: var(--surface-secondary, var(--bg-secondary));
color: var(--text-primary);
border: 1px solid var(--border-primary);
border-radius: 10px;
font-size: 13px;
font-weight: 500;
@@ -1769,13 +1752,11 @@ if (
color 0.2s ease,
border-color 0.2s ease,
transform 0.15s ease;
backdrop-filter: blur(6px);
}
.utility-btn:hover {
background: var(--utility-btn-hover-bg, rgba(255, 255, 255, 0.12));
color: var(--utility-btn-hover-color, #ffffff);
border-color: var(--utility-btn-hover-border, rgba(255, 255, 255, 0.22));
background: var(--surface-tertiary, var(--bg-tertiary));
border-color: var(--border-secondary);
}
.utility-btn:active {