fix(ui): 强制浅色主题与登录页细节修正
- 主题:将 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:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user