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-aggregate"
        title="使用 QQ / 微信登录"
        @click="loginWith('aggregate')"
      >
        <svg viewBox="0 0 24 24" width="22" height="22" fill="currentColor" aria-hidden="true">
          <path d="M8.5 4C4.9 4 2 6.8 2 10.3c0 2 1.1 3.7 2.8 4.9L4 18l3-1.5c.5.1 1 .2 1.5.2h.6c-.1-.4-.1-.8 0-1.2H8.5C5.5 15.5 3 13.2 3 10.3 3 7.4 5.5 5 8.5 5h1.6c.3-1.1 1.3-1.9 2.5-1.9.5 0 1 .2 1.4.5C13.3 3 10.7 4 8.5 4zM10.1 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm8.4 1.2c-2.5 0-4.5 2-4.5 4.5s2 4.5 4.5 4.5c.6 0 1.2-.1 1.7-.3L22 17.5l-.8-2.3c1.4-1 2.3-2.6 2.3-4.3C23.5 9.2 21.5 7.2 19 7.2c-.5 0-1 0-1.4.1C16.9 7.8 17.9 7.2 19 7.2zM17 9.7c-.8 0-1.5.7-1.5 1.5s.7 1.5 1.5 1.5 1.5-.7 1.5-1.5-.7-1.5-1.5-1.5z"/>
        </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-aggregate:hover {
  background: var(--bg-secondary, #12b7f5);
  color: var(--text-primary, #ffffff);
  border-color: var(--border-secondary, #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>