feat: optimize routes and registration UX

src/web/pages/auth/OAuthSlot.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 export interface OAuthSlotProps {
   t: (text: string) => string;
   variant?: 'user';
+  mode?: 'login' | 'register';
 }
 
 /**
@@ -15,27 +16,44 @@ export interface OAuthSlotProps {
  * This component intentionally performs no network I/O, no navigation, and
  * does not touch `authSession`. Tests assert that property.
  */
-export default function OAuthSlot({ t }: OAuthSlotProps) {
+const OAUTH_PROVIDER_KEYS = [
+  { key: 'google', label: 'Google' },
+  { key: 'github', label: 'GitHub' },
+  { key: 'wechat', label: '微信' },
+];
+
+export default function OAuthSlot({ t, mode = 'login' }: OAuthSlotProps) {
+  const title = mode === 'register' ? t('第三方账号快速注册') : t('第三方登录');
+  const desc = mode === 'register'
+    ? t('OAuth 接入后可自动创建账号并绑定同一用户身份。')
+    : t('即将支持配置后的 OAuth 提供商。');
+
   return (
     <div
       data-testid="oauth-slot"
       className="login-oauth-slot"
-      style={{
-        marginTop: 16,
-        padding: '12px 0',
-        borderTop: '1px dashed var(--color-border)',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        gap: 6,
-        fontSize: 12,
-        color: 'var(--color-text-muted)',
-      }}
+      data-mode={mode}
     >
-      <span>{t('第三方登录')}</span>
-      <span style={{ fontSize: 11 }}>
-        {t('即将上线，敬请期待')}
-      </span>
+      <div className="login-oauth-divider">
+        <span>{title}</span>
+      </div>
+      <div className="login-oauth-provider-row" aria-label={title}>
+        {OAUTH_PROVIDER_KEYS.map((provider) => (
+          <button
+            key={provider.key}
+            type="button"
+            className="login-oauth-provider"
+            disabled
+            aria-disabled="true"
+            data-provider={provider.key}
+            title={t('等待管理员配置 OAuth 后启用')}
+          >
+            <span className="login-oauth-provider-mark">{provider.label.slice(0, 1)}</span>
+            <span>{provider.label}</span>
+          </button>
+        ))}
+      </div>
+      <p className="login-oauth-desc">{desc}</p>
     </div>
   );
 }