feat: 迁移自定义功能至 1.5.9.9 版本

包含音乐源限制、CI 防 OOM 优化、数据库连接池优化、管理端权限及 UI 细节定制等功能

app/components/Auth/OAuthButtons.vue

@@ -1,117 +1,194 @@
 <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">{{ locale.divider }}</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 flex-wrap justify-center gap-4">
+    <div class="oauth-buttons">
       <button
-        v-for="provider in enabledProviders"
-        :key="provider.key"
+        v-if="config.public.oauth.github"
         type="button"
-        :class="providerButtonClass(provider)"
-        :title="formatLocale(locale.loginWith, provider.name)"
-        @click="loginWith(provider)"
+        class="oauth-btn oauth-btn-github"
+        title="使用 GitHub 登录"
+        @click="loginWith('github')"
       >
-        <AuthProvidersGitHubIcon v-if="provider.key === 'github'" />
-        <AuthProvidersCasdoorIcon v-else-if="provider.key === 'casdoor'" />
-        <AuthProvidersGoogleIcon v-else-if="provider.key === 'google'" />
-        <Icon
-          v-else-if="provider.routeProvider === 'aggregate'"
-          :name="getAggregateOAuthLoginTypeIcon(provider.loginType)"
-          :size="26"
-        />
-        <Shield v-else :size="18" />
+        <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>
-import { Shield } from '@lucide/vue'
-import { useLocale } from '~/utils/locale'
-import Icon from '~/components/UI/Icon.vue'
-import { getAggregateOAuthLoginTypeIcon } from '~/utils/oauth'
-
-const { oauthProviders, refreshSiteConfig } = useSiteConfig()
-const route = useRoute()
-const { auth } = useLocale()
-const locale = computed(() => auth.value?.oauthButtons || {})
-const formatLocale = (value, ...args) => {
-  if (typeof value === 'function') return value(...args)
-  if (typeof value === 'string') {
-    return value.replace(/{(\d+)}/g, (match, index) =>
-      args[Number(index)] !== undefined ? String(args[Number(index)]) : match
-    )
-  }
-  return 'OAuth 登录'
+<script setup lang="ts">
+interface Props {
+  alwaysShow?: boolean
 }
-
-onMounted(async () => {
-  await refreshSiteConfig()
+const props = withDefaults(defineProps<Props>(), {
+  alwaysShow: false
 })
-
-const enabledProviders = computed(() => oauthProviders.value || [])
+const config = useRuntimeConfig()
 
 const hasEnabledProviders = computed(() => {
-  return enabledProviders.value.length > 0
+  return config.public.oauth && Object.values(config.public.oauth).some((enabled) => enabled)
 })
 
-const providerButtonClass = (provider) => {
-  const key = provider.routeProvider || provider.key
-  const baseClass =
-    '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)]'
+const showPlaceholderHint = computed(() => props.alwaysShow && !hasEnabledProviders.value)
 
-  if (key === 'github') {
-    return `${baseClass} hover:bg-[var(--panel-bg-subtle)] hover:text-text-primary hover:border-[var(--panel-bg-subtle)]`
-  }
-  if (key === 'casdoor') {
-    return `${baseClass} hover:border-[var(--oauth-casdoor-green)]`
-  }
-  if (key === 'google') {
-    return `${baseClass} hover:bg-bg-secondary hover:text-black hover:border-[var(--panel-border)]`
-  }
-  if (key === 'aggregate') {
-    const aggregateClasses = {
-      qq: 'hover:bg-[var(--oauth-qq)] hover:text-text-primary hover:border-[var(--oauth-qq)]',
-      wx: 'hover:bg-[var(--oauth-wx)] hover:text-text-primary hover:border-[var(--oauth-wx)]',
-      alipay: 'hover:bg-[var(--oauth-alipay)] hover:text-text-primary hover:border-[var(--oauth-alipay)]',
-      sina: 'hover:bg-[var(--oauth-sina)] hover:text-text-primary hover:border-[var(--oauth-sina)]',
-      baidu: 'hover:bg-[var(--oauth-baidu)] hover:text-text-primary hover:border-[var(--oauth-baidu)]',
-      douyin: 'hover:bg-[var(--panel-bg-darkest)] hover:text-text-primary hover:border-[var(--oauth-douyin)]',
-      huawei: 'hover:bg-[var(--oauth-huawei)] hover:text-text-primary hover:border-[var(--oauth-huawei)]',
-      xiaomi: 'hover:bg-[var(--oauth-xiaomi)] hover:text-text-primary hover:border-[var(--oauth-xiaomi)]',
-      gitee: 'hover:bg-[var(--oauth-gitee)] hover:text-text-primary hover:border-[var(--oauth-gitee)]',
-      gitea:
-        '[--gitea-cutout:var(--bg-secondary)] hover:[--gitea-cutout:var(--text-primary)] hover:bg-bg-secondary hover:text-black hover:border-primary',
-      bilibili: 'hover:bg-[var(--oauth-bilibili)] hover:text-text-primary hover:border-[var(--oauth-bilibili)]',
-      kuaishou: 'hover:bg-[var(--oauth-kuaishou)] hover:text-text-primary hover:border-[var(--oauth-kuaishou)]'
-    }
-    return `${baseClass} ${aggregateClasses[provider.loginType] || ''}`
-  }
-  if (key === 'oauth2') {
-    return `${baseClass} hover:bg-[var(--status-success-icon)] hover:text-text-primary hover:border-[var(--status-success-icon)]`
-  }
-
-  return `${baseClass} hover:border-primary-40 hover:text-primary`
-}
-
-const loginWith = (provider) => {
-  const queryRedirect = route.query.redirect
-  const redirect = Array.isArray(queryRedirect) ? queryRedirect[0] : queryRedirect
-  const safeRedirect =
-    redirect?.startsWith('/') && !redirect.startsWith('//') && !redirect.startsWith('/\\')
-      ? redirect
-      : null
-  const query = new URLSearchParams()
-  if (provider.loginType) query.set('type', provider.loginType)
-  if (safeRedirect) query.set('redirect', safeRedirect)
-  const queryString = query.toString()
-  const routeProvider = provider.routeProvider || provider.key
-  // 外部导航到 API 端点
-  navigateTo(`/api/auth/${routeProvider}${queryString ? `?${queryString}` : ''}`, {
-    external: true
-  })
+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>