515 lines
16 KiB
Diff
515 lines
16 KiB
Diff
From 94832e2c825c64036c9d7e9b400809865392830f Mon Sep 17 00:00:00 2001
|
|
From: HenryDu8133 <813367384@qq.com>
|
|
Date: Sat, 12 Sep 2026 12:32:27 +0800
|
|
Subject: [PATCH 48/58] =?UTF-8?q?fix(ui):=20=E5=BC=BA=E5=88=B6=E6=B5=85?=
|
|
=?UTF-8?q?=E8=89=B2=E4=B8=BB=E9=A2=98=E4=B8=8E=E7=99=BB=E5=BD=95=E9=A1=B5?=
|
|
=?UTF-8?q?=E7=BB=86=E8=8A=82=E4=BF=AE=E6=AD=A3?=
|
|
MIME-Version: 1.0
|
|
Content-Type: text/plain; charset=UTF-8
|
|
Content-Transfer-Encoding: 8bit
|
|
|
|
- 主题：将 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)，在浅色背景下保证对比度
|
|
---
|
|
app/assets/css/variables.css | 94 +++++++++-------
|
|
app/components/Auth/LoginForm.vue | 2 +-
|
|
app/components/Auth/OAuthButtons.vue | 158 +++++++++++++++++++++++++--
|
|
app/components/SiteFooter.vue | 10 +-
|
|
app/pages/index.vue | 31 +-----
|
|
app/pages/login.vue | 2 +-
|
|
6 files changed, 218 insertions(+), 79 deletions(-)
|
|
|
|
diff --git a/app/assets/css/variables.css b/app/assets/css/variables.css
|
|
index 30dce2a..88a6536 100644
|
|
--- a/app/assets/css/variables.css
|
|
+++ b/app/assets/css/variables.css
|
|
@@ -1,10 +1,13 @@
|
|
-/* 全局CSS变量 - 统一配色方案 */
|
|
+/* 全局CSS变量 - 统一配色方案（默认浅色ClassicLight，不依赖data-theme也能正常显示） */
|
|
:root {
|
|
+ /* 强制浅色基准值 - 即使 data-theme 缺失也保持浅色 */
|
|
+ color-scheme: light;
|
|
+
|
|
/* 主色调 */
|
|
- --primary: #3b82f6;
|
|
- --primary-hover: #2563eb;
|
|
- --primary-light: rgba(59, 130, 246, 0.1);
|
|
- --primary-border: rgba(59, 130, 246, 0.2);
|
|
+ --primary: #1e40af;
|
|
+ --primary-hover: #1e3a8a;
|
|
+ --primary-light: rgba(30, 64, 175, 0.08);
|
|
+ --primary-border: rgba(30, 64, 175, 0.15);
|
|
|
|
/* 成功色 */
|
|
--success: #10b981;
|
|
@@ -30,25 +33,25 @@
|
|
--info-light: rgba(59, 130, 246, 0.1);
|
|
--info-border: rgba(59, 130, 246, 0.2);
|
|
|
|
- /* 背景色 */
|
|
- --bg-primary: #111111;
|
|
- --bg-secondary: #1a1a1a;
|
|
- --bg-tertiary: #2a2a2a;
|
|
- --bg-quaternary: #3a3a3a;
|
|
- --bg-hover: #1f1f1f;
|
|
-
|
|
- /* 文字颜色 */
|
|
- --text-primary: #ffffff;
|
|
- --text-secondary: #cccccc;
|
|
- --text-tertiary: #888888;
|
|
- --text-quaternary: #666666;
|
|
- --text-disabled: #444444;
|
|
-
|
|
- /* 边框颜色 */
|
|
- --border-primary: #1f1f1f;
|
|
- --border-secondary: #2a2a2a;
|
|
- --border-tertiary: #3a3a3a;
|
|
- --border-quaternary: #4a4a4a;
|
|
+ /* 背景色 (默认 ClassicLight 浅色) */
|
|
+ --bg-primary: #ffffff;
|
|
+ --bg-secondary: #f5f7fa;
|
|
+ --bg-tertiary: #edf0f5;
|
|
+ --bg-quaternary: #d9dee7;
|
|
+ --bg-hover: #f0f3f8;
|
|
+
|
|
+ /* 文字颜色 (默认 ClassicLight 浅色) */
|
|
+ --text-primary: #1a2332;
|
|
+ --text-secondary: #4a5568;
|
|
+ --text-tertiary: #6b7280;
|
|
+ --text-quaternary: #9ca3af;
|
|
+ --text-disabled: #c5cbd3;
|
|
+
|
|
+ /* 边框颜色 (默认 ClassicLight 浅色) */
|
|
+ --border-primary: #e5e7eb;
|
|
+ --border-secondary: #d1d5db;
|
|
+ --border-tertiary: #9ca3af;
|
|
+ --border-quaternary: #6b7280;
|
|
|
|
/* 阴影 */
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|
@@ -132,16 +135,16 @@
|
|
--card-hover-border: var(--border-tertiary);
|
|
--card-shadow: var(--shadow-md);
|
|
|
|
- /* 按钮颜色 */
|
|
+ /* 按钮颜色 - 浅色基准 */
|
|
--btn-primary-bg: var(--primary);
|
|
--btn-primary-hover: var(--primary-hover);
|
|
- --btn-primary-text: var(--text-primary);
|
|
+ --btn-primary-text: #ffffff;
|
|
--btn-primary-border: var(--primary-border);
|
|
|
|
- --btn-secondary-bg: #3a3a3a;
|
|
- --btn-secondary-hover: #4a4a4a;
|
|
- --btn-secondary-text: var(--text-primary);
|
|
- --btn-secondary-border: #555555;
|
|
+ --btn-secondary-bg: #f1f5f9;
|
|
+ --btn-secondary-hover: #e2e8f0;
|
|
+ --btn-secondary-text: #0f172a;
|
|
+ --btn-secondary-border: #cbd5e1;
|
|
|
|
--btn-success-bg: var(--success);
|
|
--btn-success-hover: var(--success-hover);
|
|
@@ -161,12 +164,12 @@
|
|
--btn-disabled-bg: var(--bg-tertiary);
|
|
--btn-disabled-text: var(--text-disabled);
|
|
|
|
- /* 输入框颜色 */
|
|
- --input-bg: var(--bg-tertiary);
|
|
- --input-border: var(--border-tertiary);
|
|
+ /* 输入框颜色 - 浅色基准 */
|
|
+ --input-bg: #ffffff;
|
|
+ --input-border: #d1d5db;
|
|
--input-border-focus: var(--primary);
|
|
--input-text: var(--text-primary);
|
|
- --input-placeholder: var(--text-quaternary);
|
|
+ --input-placeholder: #9ca3af;
|
|
--input-shadow-focus: 0 0 0 3px var(--primary-light);
|
|
|
|
/* 模态框颜色 */
|
|
@@ -197,12 +200,27 @@
|
|
--spinner-primary: var(--primary);
|
|
--spinner-secondary: var(--bg-tertiary);
|
|
|
|
- /* 滚动条颜色 */
|
|
- --scrollbar-track: var(--bg-tertiary);
|
|
- --scrollbar-thumb: var(--bg-quaternary);
|
|
- --scrollbar-thumb-hover: #4a4a4a;
|
|
+ /* 滚动条颜色 - 浅色基准 */
|
|
+ --scrollbar-track: #f1f5f9;
|
|
+ --scrollbar-thumb: #cbd5e1;
|
|
+ --scrollbar-thumb-hover: #94a3b8;
|
|
+
|
|
+ /* Surface 兼容别名 - 部分按钮/容器使用 surface-xxx */
|
|
+ --surface-primary: var(--bg-primary);
|
|
+ --surface-secondary: var(--bg-secondary);
|
|
+ --surface-tertiary: var(--bg-tertiary);
|
|
+ --surface-quaternary: var(--bg-quaternary);
|
|
+}
|
|
+
|
|
+/* 防深色兜底：覆盖 prefers-color-scheme: dark 对表单/根元素的自动影响 */
|
|
+@media (prefers-color-scheme: dark) {
|
|
+ :root {
|
|
+ color-scheme: light;
|
|
+ }
|
|
}
|
|
|
|
+/* 浅色主题叠加层（与 data-theme 无关，确保始终为浅色；保留 data-theme 变量覆盖以兼容切换） */
|
|
+:root,
|
|
:root[data-theme='light'],
|
|
:root[data-theme='ClassicLight'],
|
|
:root[data-theme='ModernLight'] {
|
|
diff --git a/app/components/Auth/LoginForm.vue b/app/components/Auth/LoginForm.vue
|
|
index 4ec8d57..430e302 100644
|
|
--- a/app/components/Auth/LoginForm.vue
|
|
+++ b/app/components/Auth/LoginForm.vue
|
|
@@ -143,7 +143,7 @@
|
|
</button>
|
|
</div>
|
|
|
|
- <AuthOAuthButtons v-if="!isBindMode" />
|
|
+ <AuthOAuthButtons v-if="!isBindMode" :always-show="true" />
|
|
|
|
<div class="form-footer">
|
|
<p class="help-text">不同VoiceHub平台的账号不互通</p>
|
|
diff --git a/app/components/Auth/OAuthButtons.vue b/app/components/Auth/OAuthButtons.vue
|
|
index bcd6ac0..77e08f1 100644
|
|
--- a/app/components/Auth/OAuthButtons.vue
|
|
+++ b/app/components/Auth/OAuthButtons.vue
|
|
@@ -1,15 +1,13 @@
|
|
<template>
|
|
- <div v-if="hasEnabledProviders" class="mt-6 w-full">
|
|
- <div class="flex items-center text-center text-[var(--text-tertiary)] text-xs mb-4">
|
|
- <div class="flex-1 border-b border-[var(--border-color)] opacity-20" />
|
|
- <span class="px-2.5">或使用第三方账号登录</span>
|
|
- <div class="flex-1 border-b border-[var(--border-color)] opacity-20" />
|
|
+ <div v-if="hasEnabledProviders" class="oauth-buttons-section">
|
|
+ <div class="oauth-divider">
|
|
+ <span>或使用第三方账号登录</span>
|
|
</div>
|
|
- <div class="flex justify-center gap-4">
|
|
+ <div class="oauth-buttons">
|
|
<button
|
|
v-if="config.public.oauth.github"
|
|
type="button"
|
|
- class="w-12 h-12 rounded-full border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)] flex items-center justify-center cursor-pointer transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm hover:bg-[var(--bg-tertiary)] hover:bg-[#24292e] hover:text-white hover:border-[#24292e]"
|
|
+ class="oauth-btn oauth-btn-github"
|
|
title="使用 GitHub 登录"
|
|
@click="loginWith('github')"
|
|
>
|
|
@@ -19,7 +17,7 @@
|
|
<button
|
|
v-if="config.public.oauth.google"
|
|
type="button"
|
|
- class="w-12 h-12 rounded-full border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)] flex items-center justify-center cursor-pointer transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm hover:bg-[var(--bg-tertiary)] hover:bg-white hover:text-black hover:border-[#dadce0]"
|
|
+ class="oauth-btn oauth-btn-google"
|
|
title="使用 Google 登录"
|
|
@click="loginWith('google')"
|
|
>
|
|
@@ -29,7 +27,7 @@
|
|
<button
|
|
v-if="config.public.oauth.aggregate"
|
|
type="button"
|
|
- class="w-12 h-12 rounded-full border border-[var(--border-color)] bg-[var(--bg-secondary)] text-[var(--text-primary)] flex items-center justify-center cursor-pointer transition-all duration-200 hover:-translate-y-0.5 hover:shadow-sm hover:bg-[var(--bg-tertiary)] hover:bg-[#12B7F5] hover:text-white hover:border-[#12B7F5]"
|
|
+ class="oauth-btn oauth-btn-aggregate"
|
|
title="使用 QQ / 微信登录"
|
|
@click="loginWith('aggregate')"
|
|
>
|
|
@@ -39,16 +37,158 @@
|
|
</button>
|
|
</div>
|
|
</div>
|
|
+
|
|
+ <div v-else-if="showPlaceholderHint" class="oauth-buttons-section">
|
|
+ <div class="oauth-divider oauth-divider-dim">
|
|
+ <span>第三方登录</span>
|
|
+ </div>
|
|
+ <div class="oauth-empty-hint">
|
|
+ <svg
|
|
+ class="oauth-empty-icon"
|
|
+ fill="none"
|
|
+ stroke="currentColor"
|
|
+ stroke-width="2"
|
|
+ viewBox="0 0 24 24"
|
|
+ >
|
|
+ <path d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
+ </svg>
|
|
+ <p>请联系管理员在 <code>.env</code> 中配置第三方 OAuth 应用后即可启用</p>
|
|
+ </div>
|
|
+ </div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
+interface Props {
|
|
+ alwaysShow?: boolean
|
|
+}
|
|
+const props = withDefaults(defineProps<Props>(), {
|
|
+ alwaysShow: false
|
|
+})
|
|
const config = useRuntimeConfig()
|
|
|
|
const hasEnabledProviders = computed(() => {
|
|
return config.public.oauth && Object.values(config.public.oauth).some((enabled) => enabled)
|
|
})
|
|
|
|
+const showPlaceholderHint = computed(() => props.alwaysShow && !hasEnabledProviders.value)
|
|
+
|
|
const loginWith = (provider: string) => {
|
|
navigateTo(`/api/auth/${provider}`, { external: true })
|
|
}
|
|
</script>
|
|
+
|
|
+<style scoped>
|
|
+.oauth-buttons-section {
|
|
+ width: 100%;
|
|
+ margin-top: 24px;
|
|
+}
|
|
+
|
|
+.oauth-divider {
|
|
+ display: flex;
|
|
+ align-items: center;
|
|
+ text-align: center;
|
|
+ margin: 0 0 18px 0;
|
|
+ color: var(--text-quaternary, #9ca3af);
|
|
+ font-size: 12px;
|
|
+}
|
|
+
|
|
+.oauth-divider::before,
|
|
+.oauth-divider::after {
|
|
+ content: '';
|
|
+ flex: 1;
|
|
+ border-bottom: 1px solid var(--border-secondary, #d1d5db);
|
|
+ opacity: 0.85;
|
|
+}
|
|
+
|
|
+.oauth-divider span {
|
|
+ padding: 0 12px;
|
|
+ white-space: nowrap;
|
|
+}
|
|
+
|
|
+.oauth-divider-dim {
|
|
+ color: var(--text-quaternary, #9ca3af);
|
|
+ opacity: 0.8;
|
|
+}
|
|
+
|
|
+.oauth-buttons {
|
|
+ display: flex;
|
|
+ justify-content: center;
|
|
+ gap: 16px;
|
|
+}
|
|
+
|
|
+.oauth-btn {
|
|
+ width: 48px;
|
|
+ height: 48px;
|
|
+ border-radius: 999px;
|
|
+ border: 1px solid var(--border-secondary, #d1d5db);
|
|
+ background: var(--bg-secondary, #f5f7fa);
|
|
+ color: var(--text-primary, #1a2332);
|
|
+ display: inline-flex;
|
|
+ align-items: center;
|
|
+ justify-content: center;
|
|
+ cursor: pointer;
|
|
+ transition:
|
|
+ transform 0.2s ease,
|
|
+ box-shadow 0.2s ease,
|
|
+ background-color 0.2s ease,
|
|
+ border-color 0.2s ease,
|
|
+ color 0.2s ease;
|
|
+}
|
|
+
|
|
+.oauth-btn:hover {
|
|
+ transform: translateY(-1px);
|
|
+ box-shadow: var(--shadow-sm);
|
|
+}
|
|
+
|
|
+.oauth-btn-github:hover {
|
|
+ background: #24292e;
|
|
+ color: #ffffff;
|
|
+ border-color: #24292e;
|
|
+}
|
|
+
|
|
+.oauth-btn-google:hover {
|
|
+ background: #ffffff;
|
|
+ color: #111111;
|
|
+ border-color: #dadce0;
|
|
+}
|
|
+
|
|
+.oauth-btn-aggregate:hover {
|
|
+ background: #12b7f5;
|
|
+ color: #ffffff;
|
|
+ border-color: #12b7f5;
|
|
+}
|
|
+
|
|
+.oauth-empty-hint {
|
|
+ display: flex;
|
|
+ align-items: center;
|
|
+ justify-content: center;
|
|
+ gap: 10px;
|
|
+ padding: 14px 16px;
|
|
+ border: 1px dashed var(--border-secondary, #d1d5db);
|
|
+ border-radius: var(--radius-lg);
|
|
+ background: var(--bg-tertiary, #edf0f5);
|
|
+ color: var(--text-tertiary, #6b7280);
|
|
+ font-size: 13px;
|
|
+}
|
|
+
|
|
+.oauth-empty-icon {
|
|
+ width: 18px;
|
|
+ height: 18px;
|
|
+ opacity: 0.8;
|
|
+ flex-shrink: 0;
|
|
+}
|
|
+
|
|
+.oauth-empty-hint p {
|
|
+ margin: 0;
|
|
+ line-height: 1.5;
|
|
+}
|
|
+
|
|
+.oauth-empty-hint code {
|
|
+ background: var(--input-bg, #ffffff);
|
|
+ color: var(--primary, #1e40af);
|
|
+ padding: 1px 6px;
|
|
+ border-radius: 4px;
|
|
+ font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
+ font-size: 12px;
|
|
+}
|
|
+</style>
|
|
diff --git a/app/components/SiteFooter.vue b/app/components/SiteFooter.vue
|
|
index 8036a69..c5d528d 100644
|
|
--- a/app/components/SiteFooter.vue
|
|
+++ b/app/components/SiteFooter.vue
|
|
@@ -96,7 +96,7 @@ onMounted(() => {
|
|
text-align: center;
|
|
padding: 20px 0;
|
|
margin-top: 30px;
|
|
- border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
+ border-top: 1px solid var(--border-primary);
|
|
width: 100%;
|
|
}
|
|
|
|
@@ -109,7 +109,7 @@ onMounted(() => {
|
|
}
|
|
|
|
.footer-item {
|
|
- color: rgba(255, 255, 255, 0.6);
|
|
+ color: var(--text-tertiary);
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
}
|
|
@@ -117,7 +117,7 @@ onMounted(() => {
|
|
.footer-item:not(:last-child)::after {
|
|
content: ' | ';
|
|
margin: 0 10px;
|
|
- color: rgba(255, 255, 255, 0.4);
|
|
+ color: var(--text-quaternary);
|
|
}
|
|
|
|
.footer-item a {
|
|
@@ -127,7 +127,7 @@ onMounted(() => {
|
|
}
|
|
|
|
.footer-item a:hover {
|
|
- color: rgba(255, 255, 255, 0.8);
|
|
+ color: var(--text-secondary);
|
|
}
|
|
|
|
.icp-link,
|
|
@@ -139,7 +139,7 @@ onMounted(() => {
|
|
|
|
.icp-link:hover,
|
|
.voicehub-link:hover {
|
|
- color: rgba(255, 255, 255, 0.8);
|
|
+ color: var(--text-secondary);
|
|
}
|
|
|
|
.netlify-badge {
|
|
diff --git a/app/pages/index.vue b/app/pages/index.vue
|
|
index 2a31f7e..e5bc5f6 100644
|
|
--- a/app/pages/index.vue
|
|
+++ b/app/pages/index.vue
|
|
@@ -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 {
|
|
diff --git a/app/pages/login.vue b/app/pages/login.vue
|
|
index f310bad..0ab59a2 100644
|
|
--- a/app/pages/login.vue
|
|
+++ b/app/pages/login.vue
|
|
@@ -312,7 +312,7 @@ onMounted(async () => {
|
|
|
|
.icp-link:hover,
|
|
.voicehub-link:hover {
|
|
- color: rgba(255, 255, 255, 0.8);
|
|
+ color: var(--text-secondary);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
--
|
|
2.45.1.windows.1
|
|
|