BYW-VoiceHub/app/components/Auth/OAuthButtons.vue

<template>
  <div v-if="hasEnabledProviders" class="oauth-buttons-section">
    <div class="oauth-divider">
      <span>或使用第三方账号登录</span>
    </div>
    <div class="oauth-buttons">
      <button
        v-if="config.public.oauth.github"
        type="button"
        class="oauth-btn oauth-btn-github"
        title="使用 GitHub 登录"
        @click="loginWith('github')"
      >
        <AuthProvidersGitHubIcon />
      </button>

      <button
        v-if="config.public.oauth.google"
        type="button"
        class="oauth-btn oauth-btn-google"
        title="使用 Google 登录"
        @click="loginWith('google')"
      >
        <AuthProvidersGoogleIcon />
      </button>

      <button
        v-if="config.public.oauth.aggregate"
        type="button"
        class="oauth-btn oauth-btn-wechat"
        title="使用微信登录"
        @click="loginWith('aggregate')"
      >
        <svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor" aria-hidden="true">
          <path d="M8.69 3.5C5.06 3.5 2.12 6.03 2.12 9.14c0 1.79 1.04 3.37 2.66 4.41l-.68 2.05 2.56-1.28c.52.11 1.06.17 1.61.17h.51c-.08-.36-.11-.73-.08-1.09H8.69c-2.59 0-4.69-1.93-4.69-4.31s2.1-4.31 4.69-4.31h1.37c.25-.98 1.09-1.7 2.09-1.7.43 0 .83.13 1.17.36C12.61 3.06 10.76 3.5 8.69 3.5zM10.4 5.62c-.93 0-1.69.76-1.69 1.69s.76 1.69 1.69 1.69 1.69-.76 1.69-1.69-.76-1.69-1.69-1.69zm7.19.91c-2.13 0-3.86 1.7-3.86 3.8s1.73 3.8 3.86 3.8c.5 0 1.02-.1 1.47-.27L21.5 15l-.67-1.95c1.21-.88 2-2.24 2-3.72 0-2.1-1.73-3.8-3.84-3.8-.1 0-.2 0-.4.01zm-1.84 2.69c-.66 0-1.2.54-1.2 1.2s.54 1.2 1.2 1.2 1.2-.54 1.2-1.2-.54-1.2-1.2-1.2z"/>
        </svg>
      </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: var(--bg-tertiary, #24292e);
  color: var(--text-primary, #ffffff);
  border-color: var(--border-secondary, #24292e);
}

.oauth-btn-google:hover {
  background: var(--card-bg, #ffffff);
  color: var(--text-primary, #111111);
  border-color: #dadce0;
}

.oauth-btn-wechat {
  width: 56px;
  height: 56px;
  background: #07C160;
  color: #ffffff;
  border-color: #07C160;
  box-shadow: 0 4px 12px rgba(7, 193, 96, 0.25);
}

.oauth-btn-wechat:hover {
  background: #06ad56;
  color: #ffffff;
  border-color: #06ad56;
  box-shadow: 0 6px 18px rgba(7, 193, 96, 0.35);
}

.oauth-btn-wechat:active {
  background: #059a4c;
  border-color: #059a4c;
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(7, 193, 96, 0.25);
}

.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>