Phase C3: Site Settings Refactoring with horizontal sub-tabs and Logo upload

- Replaced vertical card layout with 5 horizontal tabs: 基础设置/Logo设置/邮件配置/短信配置/注册设置
- Added Logo upload tab with drag-drop preview and file upload
- Added Registration Settings tab (allow_register, email/phone verify, default role, welcome message)
- Added logo upload backend endpoint (POST /admin/settings/logo/upload)
- Added modal sub-component CSS classes for dark theme
- Fixed all hardcoded white backgrounds for dark theme
- Added uploadLogo method to adminAPI

backend/python/app/api/admin/settings.py

@@ -267,6 +267,77 @@ async def update_sms_config(
     return {"message": "短信配置已更新"}
 
 
+
+# ============================================================
+# Logo 上传
+# ============================================================
+
+from fastapi import UploadFile, File
+
+@router.post("/logo/upload")
+async def upload_logo(
+    file: UploadFile = File(...),
+    admin_user=Depends(get_current_admin),
+    db: Session = Depends(get_db),
+):
+    """上传平台Logo，保存到本地data目录，返回访问URL"""
+    import os as _os
+    import shutil as _shutil
+
+    # Validate file type
+    allowed_types = ['image/png', 'image/jpeg', 'image/svg+xml', 'image/webp']
+    if file.content_type not in allowed_types:
+        raise HTTPException(status_code=400, detail=f"不支持的文件类型: {file.content_type}，仅支持 PNG/JPG/SVG/WEBP")
+
+    # Validate size (max 2MB)
+    contents = await file.read()
+    if len(contents) > 2 * 1024 * 1024:
+        raise HTTPException(status_code=400, detail="文件大小不能超过 2MB")
+
+    # Save to /app/data/uploads/logos/
+    upload_dir = "/app/data/uploads/logos"
+    _os.makedirs(upload_dir, exist_ok=True)
+
+    # Generate unique filename
+    ext = file.filename.split('.')[-1] if '.' in (file.filename or '') else 'png'
+    filename = f"{uuid.uuid4()}.{ext}"
+    filepath = _os.path.join(upload_dir, filename)
+
+    with open(filepath, 'wb') as f:
+        f.write(contents)
+
+    # Build URL
+    logo_url = f"/data/uploads/logos/{filename}"
+
+    # Update site setting
+    existing = db.query(SiteSetting).filter(SiteSetting.key == "logo").first()
+    if existing:
+        existing.value = logo_url
+        existing.updated_at = datetime.now()
+    else:
+        new_setting = SiteSetting(
+            id=str(uuid.uuid4()),
+            key="logo",
+            value=logo_url,
+        )
+        db.add(new_setting)
+    db.commit()
+
+    LogService.log_audit(
+        admin_id=admin_user.id,
+        admin_name=admin_user.username,
+        action="upload_logo",
+        target_type="site_settings",
+        detail=f"上传Logo: {filename}",
+    )
+
+    return {
+        "code": 0,
+        "data": {"url": logo_url, "filename": filename},
+        "message": "Logo 上传成功",
+    }
+
+
 # ============================================================
 # 邮件测试
 # ============================================================

frontend/src/api/index.ts

@@ -277,6 +277,7 @@ export const adminAPI = {
   getStats: () => get<any>('/admin/dashboard/stats'),
   getRecentLogs: () => get<any[]>('/admin/dashboard/recent-logs'),
   getRecentAudit: () => get<any[]>('/admin/dashboard/recent-audit'),
+    getDailyStats: (days?: number) => get<{ days: number; data: Array<{ date: string; tokens: number }> }>(`/admin/dashboard/daily-stats${days ? `?days=${days}` : ''}`),
   // 用户管理
   getUsers: (params?: any) => {
     const sp = new URLSearchParams();
@@ -588,8 +589,16 @@ export const adminAPI = {
   getAIAppTemplates: () => get<any>('/admin/apps/templates'),
   createAIAppTemplate: (data: any) => post<any>('/admin/apps/templates', data),
   createAIAppFromTemplate: (templateId: string, data: any) => post<any>('/admin/apps/apps/from-template/' + templateId, data),
-  getAIAppCategories: () => get<any>('/admin/apps/categories')
+  getAIAppCategories: () => get<any>('/admin/apps/categories'),
-
+  // Logo 上传
+  uploadLogo: (formData: FormData) => {
+    const token = localStorage.getItem('access_token');
+    return fetch(`/app/api/admin/settings/logo/upload`, {
+      method: 'POST',
+      headers: { 'Authorization': `Bearer ${token}` },
+      body: formData,
+    }).then(res => res.json());
+  },
 
 
 };
@@ -662,4 +671,5 @@ export const evolutionAPI = {
     return get<import('@/types').EvolutionReport[]>(`/evolution/reports${qs}`);
   },
   getReportDetail: (reportId: string) => get<import('@/types').EvolutionReport>(`/evolution/reports/${reportId}`),
+
 };

frontend/src/components/layout/AdminLayout.css

@@ -896,6 +896,66 @@
 }
 
 /* ========== Responsive ========== */
+
+
+/* Modal sub-components */
+.admin-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20px;
+  padding-bottom: 16px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.admin-modal-header h3 {
+  margin: 0 !important;
+}
+
+.admin-modal-close {
+  background: none;
+  border: none;
+  color: #8892B0;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+
+.admin-modal-close:hover {
+  color: #E8ECF4;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.admin-modal-body {
+  margin-bottom: 20px;
+}
+
+.admin-modal-footer {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  padding-top: 16px;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+/* Spinner animation for logo upload */
+.spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid rgba(108, 99, 255, 0.2);
+  border-top-color: #6C63FF;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
 @media (max-width: 768px) {
   .admin-sidebar {
     position: fixed;

frontend/src/pages/admin/SiteSettings.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { adminAPI } from '@/api';
 
 const SVGIcon: React.FC<{ children: React.ReactNode; size?: number }> = ({ children, size = 16 }) => (
@@ -7,7 +7,18 @@ const SVGIcon: React.FC<{ children: React.ReactNode; size?: number }> = ({ child
   </svg>
 );
 
+type TabKey = 'basic' | 'logo' | 'email' | 'sms' | 'registration';
+
+const TABS: { key: TabKey; label: string; icon: React.ReactNode }[] = [
+  { key: 'basic', label: '基础设置', icon: <><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></> },
+  { key: 'logo', label: 'Logo 设置', icon: <><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/></> },
+  { key: 'email', label: '邮件配置', icon: <><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></> },
+  { key: 'sms', label: '短信配置', icon: <><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></> },
+  { key: 'registration', label: '注册设置', icon: <><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></> },
+];
+
 const SiteSettings: React.FC = () => {
+  const [activeTab, setActiveTab] = useState<TabKey>('basic');
   const [brand, setBrand] = useState<Record<string, string>>({
     logo: '', siteName: '', announcement: '', icpNumber: '', contactPhone: '',
   });
@@ -17,6 +28,13 @@ const SiteSettings: React.FC = () => {
   const [sms, setSms] = useState({
     provider: '', api_key: '', api_secret: '', sign_name: '', template_code: '',
   });
+  const [registration, setRegistration] = useState({
+    allow_register: true,
+    require_email_verify: false,
+    require_phone_verify: false,
+    default_role: 'user',
+    welcome_message: '',
+  });
   const [savedMsg, setSavedMsg] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const [testResult, setTestResult] = useState<string | null>(null);
@@ -25,6 +43,9 @@ const SiteSettings: React.FC = () => {
   const [emailTestSubject, setEmailTestSubject] = useState('');
   const [emailTestBody, setEmailTestBody] = useState('');
   const [emailGenerating, setEmailGenerating] = useState(false);
+  const [logoUploading, setLogoUploading] = useState(false);
+  const [logoPreview, setLogoPreview] = useState('');
+  const logoInputRef = useRef<HTMLInputElement>(null);
 
   // AI生成测试邮件内容
   const handleAIGenerateContent = async () => {
@@ -35,7 +56,6 @@ const SiteSettings: React.FC = () => {
       setEmailTestSubject(data.subject || '');
       setEmailTestBody(data.body || '');
     } catch (e) {
-      // 降级：使用客户端预设内容
       const subjects = [
         '【测试】AIFlow邮件服务配置验证',
         'AIFlow平台 - 邮件投递测试',
@@ -53,23 +73,25 @@ const SiteSettings: React.FC = () => {
     }
   };
 
-  // 加载真实配置
+  // Load all configs
   useEffect(() => {
     async function loadConfig() {
       try {
-        const [siteRes, emailRes, smsRes] = await Promise.all([
+        const [siteRes, emailRes, smsRes, regRes] = await Promise.all([
           adminAPI.getSiteSettings(),
           adminAPI.getEmailConfig(),
           adminAPI.getSmsConfig(),
+          adminAPI.getSiteSettings().then((r: any) => ({ data: r?.data?.registration || {} })).catch(() => ({ data: {} })),
         ]);
         if (siteRes?.data) {
           setBrand({
-            logo: siteRes.data.logo || '',
+            logo: siteRes.data.logo || siteRes.data.site_logo || '',
             siteName: siteRes.data.site_name || siteRes.data.siteName || '',
             announcement: siteRes.data.announcement || '',
             icpNumber: siteRes.data.icp_number || siteRes.data.icpNumber || '',
             contactPhone: siteRes.data.contact_phone || siteRes.data.contactPhone || '',
           });
+          setLogoPreview(siteRes.data.logo || siteRes.data.site_logo || '');
         }
         if (emailRes?.data) {
           setMail({
@@ -90,6 +112,19 @@ const SiteSettings: React.FC = () => {
             template_code: smsRes.data.template_code || '',
           });
         }
+        // Try to load registration settings from site settings
+        try {
+          const regData = (siteRes as any)?.data;
+          if (regData?.allow_register !== undefined) {
+            setRegistration({
+              allow_register: regData.allow_register === true || regData.allow_register === 'true',
+              require_email_verify: regData.require_email_verify === true || regData.require_email_verify === 'true',
+              require_phone_verify: regData.require_phone_verify === true || regData.require_phone_verify === 'true',
+              default_role: regData.default_role || 'user',
+              welcome_message: regData.welcome_message || '',
+            });
+          }
+        } catch {}
       } catch (e) {
         console.error('加载配置失败:', e);
       } finally {
@@ -109,23 +144,50 @@ const SiteSettings: React.FC = () => {
     setTimeout(() => setTestResult(null), 5000);
   };
 
-  // 保存品牌设置
+  // Logo upload handler
+  const handleLogoUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    // Preview locally
+    const reader = new FileReader();
+    reader.onload = (ev) => setLogoPreview(ev.target?.result as string);
+    reader.readAsDataURL(file);
+
+    // Upload to server
+    setLogoUploading(true);
+    try {
+      const formData = new FormData();
+      formData.append('file', file);
+      const res = await adminAPI.uploadLogo(formData);
+      const data = (res as any)?.data || res;
+      const url = data?.url || data?.logo_url || '';
+      if (url) {
+        setBrand({ ...brand, logo: url });
+        showSaved('Logo');
+      }
+    } catch (e: any) {
+      showTestResult('Logo 上传失败: ' + (e.detail || e.message || '未知错误'));
+    } finally {
+      setLogoUploading(false);
+    }
+  };
+
   const saveSiteSettings = async () => {
     try {
       await adminAPI.updateSiteSettings({
-        logo: brand.logo,
+        logo: brand.logo || logoPreview,
         site_name: brand.siteName,
         announcement: brand.announcement,
         icp_number: brand.icpNumber,
         contact_phone: brand.contactPhone,
       });
-      showSaved('品牌设置');
+      showSaved('基础设置');
     } catch (e: any) {
-      alert('保存失败: ' + (e.detail || e.message));
+      showTestResult('保存失败: ' + (e.detail || e.message));
     }
   };
 
-  // 保存邮件配置
   const saveEmailConfig = async () => {
     try {
       await adminAPI.updateEmailConfig({
@@ -138,11 +200,10 @@ const SiteSettings: React.FC = () => {
       });
       showSaved('邮件配置');
     } catch (e: any) {
-      alert('保存失败: ' + (e.detail || e.message));
+      showTestResult('保存失败: ' + (e.detail || e.message));
     }
   };
 
-  // 保存短信配置
   const saveSmsConfig = async () => {
     try {
       await adminAPI.updateSmsConfig({
@@ -154,18 +215,31 @@ const SiteSettings: React.FC = () => {
       });
       showSaved('短信配置');
     } catch (e: any) {
-      alert('保存失败: ' + (e.detail || e.message));
+      showTestResult('保存失败: ' + (e.detail || e.message));
+    }
+  };
+
+  const saveRegistrationSettings = async () => {
+    try {
+      await adminAPI.updateSiteSettings({
+        allow_register: String(registration.allow_register),
+        require_email_verify: String(registration.require_email_verify),
+        require_phone_verify: String(registration.require_phone_verify),
+        default_role: registration.default_role,
+        welcome_message: registration.welcome_message,
+      });
+      showSaved('注册设置');
+    } catch (e: any) {
+      showTestResult('保存失败: ' + (e.detail || e.message));
     }
   };
 
-  // 发送测试邮件 - 先保存配置再发送
   const sendTestEmail = async () => {
     if (!emailTestTo.trim()) {
       showTestResult('请输入收件邮箱地址');
       return;
     }
     try {
-      // 测试前先保存邮件配置到数据库，确保使用最新配置
       await adminAPI.updateEmailConfig({
         smtp_host: mail.smtp_host,
         smtp_port: mail.smtp_port,
@@ -193,7 +267,6 @@ const SiteSettings: React.FC = () => {
     setShowEmailTest(true);
   };
 
-  // 发送测试短信
   const sendTestSms = async () => {
     try {
       const res = await adminAPI.testSms();
@@ -204,13 +277,390 @@ const SiteSettings: React.FC = () => {
   };
 
   if (loading) {
-    return <div style={{ padding: 40, textAlign: 'center' }}>加载中...</div>;
+    return <div style={{ padding: 40, textAlign: 'center', color: 'var(--color-text-secondary)' }}>加载中...</div>;
   }
 
+  const FormGroup = ({ label, required, children }: { label: string; required?: boolean; children: React.ReactNode }) => (
+    <div className="admin-form-group">
+      <label className="admin-form-label">
+        {label}
+        {required && <span style={{ color: 'var(--color-error)' }}> *</span>}
+      </label>
+      {children}
+    </div>
+  );
+
+  const FormRow = ({ children }: { children: React.ReactNode }) => (
+    <div className="admin-form-row">{children}</div>
+  );
+
+  const FormActions = ({ children }: { children: React.ReactNode }) => (
+    <div className="admin-form-actions">{children}</div>
+  );
+
+  // ========== Render Tab Content ==========
+  const renderTabContent = () => {
+    switch (activeTab) {
+      // ── 基础设置 ──
+      case 'basic':
+        return (
+          <div className="admin-card">
+            <div className="admin-card-header">
+              <h3 className="admin-card-title">基础信息</h3>
+            </div>
+            <FormRow>
+              <FormGroup label="网站名称" required>
+                <input className="admin-form-input" value={brand.siteName}
+                  onChange={e => setBrand({ ...brand, siteName: e.target.value })}
+                  placeholder="例如: Qihu-AIFlow" />
+              </FormGroup>
+              <FormGroup label="LOGO URL">
+                <input className="admin-form-input" value={brand.logo}
+                  onChange={e => { setBrand({ ...brand, logo: e.target.value }); setLogoPreview(e.target.value); }}
+                  placeholder="https://... 或上传后自动填入" />
+              </FormGroup>
+            </FormRow>
+
+            <FormGroup label="首页公告">
+              <textarea className="admin-form-input admin-form-textarea"
+                value={brand.announcement}
+                onChange={e => setBrand({ ...brand, announcement: e.target.value })}
+                style={{ minHeight: 80 }}
+                placeholder="将在首页顶部显示的公告内容..." />
+            </FormGroup>
+
+            <FormRow>
+              <FormGroup label="备案号">
+                <input className="admin-form-input" value={brand.icpNumber}
+                  onChange={e => setBrand({ ...brand, icpNumber: e.target.value })}
+                  placeholder="例如: 京ICP备XXXXXXXX号" />
+              </FormGroup>
+              <FormGroup label="客服联系方式">
+                <input className="admin-form-input" value={brand.contactPhone}
+                  onChange={e => setBrand({ ...brand, contactPhone: e.target.value })}
+                  placeholder="电话 / 邮箱 / 微信" />
+              </FormGroup>
+            </FormRow>
+
+            <FormActions>
+              <button className="admin-btn admin-btn-primary" onClick={saveSiteSettings}>
+                <SVGIcon><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></SVGIcon>
+                保存设置
+              </button>
+            </FormActions>
+          </div>
+        );
+
+      // ── Logo 设置 ──
+      case 'logo':
+        return (
+          <div className="admin-card">
+            <div className="admin-card-header">
+              <h3 className="admin-card-title">Logo 上传</h3>
+              <span style={{ fontSize: 'var(--text-xs)', color: 'var(--color-text-muted)' }}>
+                建议尺寸 200x60px，支持 PNG/JPG/SVG/WEBP，最大 2MB
+              </span>
+            </div>
+
+            <div style={{
+              display: 'flex', gap: 'var(--space-2xl)', alignItems: 'flex-start',
+              flexWrap: 'wrap' as const,
+            }}>
+              {/* Preview */}
+              <div style={{
+                width: 280, minHeight: 160,
+                border: '2px dashed var(--color-border)',
+                borderRadius: 'var(--radius-lg)',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                background: 'var(--color-bg-elevated)',
+                flexShrink: 0,
+                position: 'relative',
+              }}>
+                {logoPreview ? (
+                  <div style={{ textAlign: 'center' }}>
+                    <img
+                      src={logoPreview}
+                      alt="Logo Preview"
+                      style={{ maxWidth: 240, maxHeight: 80, objectFit: 'contain' }}
+                      onError={(e) => {
+                        (e.target as HTMLImageElement).style.display = 'none';
+                      }}
+                    />
+                    <div style={{ marginTop: 8, fontSize: 'var(--text-xs)', color: 'var(--color-text-muted)' }}>
+                      实时预览
+                    </div>
+                  </div>
+                ) : (
+                  <div style={{ textAlign: 'center', color: 'var(--color-text-muted)' }}>
+                    <SVGIcon size={32}>
+                      <rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
+                    </SVGIcon>
+                    <div style={{ marginTop: 8, fontSize: 'var(--text-sm)' }}>暂无 Logo</div>
+                    <div style={{ fontSize: 'var(--text-xs)' }}>点击上传或拖拽到此处</div>
+                  </div>
+                )}
+                {logoUploading && (
+                  <div style={{
+                    position: 'absolute', inset: 0,
+                    background: 'rgba(0,0,0,0.5)', borderRadius: 'var(--radius-lg)',
+                    display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  }}>
+                    <div className="spinner" />
+                  </div>
+                )}
+              </div>
+
+              {/* Upload Actions */}
+              <div style={{ flex: 1, minWidth: 240 }}>
+                <p style={{ color: 'var(--color-text-secondary)', fontSize: 'var(--text-sm)', marginBottom: 'var(--space-lg)' }}>
+                  上传平台 Logo，将显示在网站标题栏、首页导航等位置。
+                </p>
+
+                <input
+                  ref={logoInputRef}
+                  type="file"
+                  accept="image/png,image/jpeg,image/svg+xml,image/webp"
+                  onChange={handleLogoUpload}
+                  style={{ display: 'none' }}
+                />
+                <div style={{ display: 'flex', gap: 'var(--space-sm)', flexWrap: 'wrap' }}>
+                  <button
+                    className="admin-btn admin-btn-primary"
+                    onClick={() => logoInputRef.current?.click()}
+                    disabled={logoUploading}
+                  >
+                    <SVGIcon><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></SVGIcon>
+                    {logoUploading ? '上传中...' : '选择文件上传'}
+                  </button>
+                  {logoPreview && (
+                    <button
+                      className="admin-btn admin-btn-outline"
+                      onClick={() => {
+                        setLogoPreview('');
+                        setBrand({ ...brand, logo: '' });
+                        if (logoInputRef.current) logoInputRef.current.value = '';
+                      }}
+                    >
+                      <SVGIcon><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></SVGIcon>
+                      移除 Logo
+                    </button>
+                  )}
+                </div>
+
+                {/* URL Fallback */}
+                <div style={{ marginTop: 'var(--space-xl)', paddingTop: 'var(--space-lg)',
+                  borderTop: '1px solid var(--color-border)' }}>
+                  <FormGroup label="或使用外链 URL">
+                    <div style={{ display: 'flex', gap: 'var(--space-sm)' }}>
+                      <input className="admin-form-input"
+                        value={brand.logo}
+                        onChange={e => { setBrand({ ...brand, logo: e.target.value }); setLogoPreview(e.target.value || ''); }}
+                        placeholder="https://example.com/logo.png"
+                        style={{ flex: 1 }} />
+                      <button className="admin-btn admin-btn-primary" onClick={saveSiteSettings}>
+                        保存
+                      </button>
+                    </div>
+                  </FormGroup>
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+
+      // ── 邮件配置 ──
+      case 'email':
+        return (
+          <div className="admin-card">
+            <div className="admin-card-header">
+              <h3 className="admin-card-title">SMTP 邮件服务</h3>
+            </div>
+
+            <FormRow>
+              <FormGroup label="SMTP 服务器" required>
+                <input className="admin-form-input" value={mail.smtp_host}
+                  onChange={e => setMail({ ...mail, smtp_host: e.target.value })}
+                  placeholder="例如: smtp.gmail.com" />
+              </FormGroup>
+              <FormGroup label="端口">
+                <input className="admin-form-input" type="number" value={mail.smtp_port}
+                  onChange={e => setMail({ ...mail, smtp_port: Number(e.target.value) })} />
+              </FormGroup>
+            </FormRow>
+
+            <FormRow>
+              <FormGroup label="用户名" required>
+                <input className="admin-form-input" value={mail.username}
+                  onChange={e => setMail({ ...mail, username: e.target.value })} />
+              </FormGroup>
+              <FormGroup label="密码" required>
+                <input className="admin-form-input" type="password" value={mail.password}
+                  onChange={e => setMail({ ...mail, password: e.target.value })} />
+              </FormGroup>
+            </FormRow>
+
+            <FormRow>
+              <FormGroup label="发件地址" required>
+                <input className="admin-form-input" value={mail.from_address}
+                  onChange={e => setMail({ ...mail, from_address: e.target.value })}
+                  placeholder="noreply@example.com" />
+              </FormGroup>
+              <FormGroup label="安全协议">
+                <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-sm)',
+                  padding: '10px 0', cursor: 'pointer', color: 'var(--color-text-secondary)', fontSize: 'var(--text-sm)' }}>
+                  <input type="checkbox" checked={mail.use_tls}
+                    onChange={e => setMail({ ...mail, use_tls: e.target.checked })}
+                    style={{ accentColor: 'var(--color-accent)' }} />
+                  启用 TLS 加密
+                </label>
+              </FormGroup>
+            </FormRow>
+
+            <FormActions>
+              <button className="admin-btn admin-btn-primary" onClick={saveEmailConfig}>
+                <SVGIcon><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></SVGIcon>
+                保存配置
+              </button>
+              <button className="admin-btn admin-btn-outline" onClick={openEmailTest}>
+                <SVGIcon><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></SVGIcon>
+                发送测试邮件
+              </button>
+            </FormActions>
+          </div>
+        );
+
+      // ── 短信配置 ──
+      case 'sms':
+        return (
+          <div className="admin-card">
+            <div className="admin-card-header">
+              <h3 className="admin-card-title">短信服务</h3>
+            </div>
+
+            <FormRow>
+              <FormGroup label="短信服务商">
+                <select className="admin-form-input" value={sms.provider}
+                  onChange={e => setSms({ ...sms, provider: e.target.value })}>
+                  <option value="">请选择</option>
+                  <option value="阿里云短信">阿里云短信</option>
+                  <option value="腾讯云短信">腾讯云短信</option>
+                  <option value="华为云短信">华为云短信</option>
+                </select>
+              </FormGroup>
+              <FormGroup label="短信签名">
+                <input className="admin-form-input" value={sms.sign_name}
+                  onChange={e => setSms({ ...sms, sign_name: e.target.value })} />
+              </FormGroup>
+            </FormRow>
+
+            <FormRow>
+              <FormGroup label="API Key (AccessKey ID)">
+                <input className="admin-form-input" value={sms.api_key}
+                  onChange={e => setSms({ ...sms, api_key: e.target.value })} />
+              </FormGroup>
+              <FormGroup label="API Secret (AccessKey Secret)">
+                <input className="admin-form-input" type="password" value={sms.api_secret}
+                  onChange={e => setSms({ ...sms, api_secret: e.target.value })} />
+              </FormGroup>
+            </FormRow>
+
+            <FormGroup label="模板编码" required>
+              <input className="admin-form-input" value={sms.template_code}
+                onChange={e => setSms({ ...sms, template_code: e.target.value })}
+                placeholder="例如: SMS_00000001"
+                style={{ maxWidth: 400 }} />
+            </FormGroup>
+
+            <FormActions>
+              <button className="admin-btn admin-btn-primary" onClick={saveSmsConfig}>
+                <SVGIcon><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></SVGIcon>
+                保存配置
+              </button>
+              <button className="admin-btn admin-btn-outline" onClick={sendTestSms}>
+                <SVGIcon><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></SVGIcon>
+                发送测试短信
+              </button>
+            </FormActions>
+          </div>
+        );
+
+      // ── 注册设置 ──
+      case 'registration':
+        return (
+          <div className="admin-card">
+            <div className="admin-card-header">
+              <h3 className="admin-card-title">注册与准入</h3>
+            </div>
+
+            <FormRow>
+              <FormGroup label="允许新用户注册">
+                <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-sm)',
+                  padding: '10px 0', cursor: 'pointer', color: 'var(--color-text-secondary)', fontSize: 'var(--text-sm)' }}>
+                  <input type="checkbox" checked={registration.allow_register}
+                    onChange={e => setRegistration({ ...registration, allow_register: e.target.checked })}
+                    style={{ accentColor: 'var(--color-accent)' }} />
+                  开启注册（关闭后仅管理员可手动创建用户）
+                </label>
+              </FormGroup>
+              <FormGroup label="默认角色">
+                <select className="admin-form-input" value={registration.default_role}
+                  onChange={e => setRegistration({ ...registration, default_role: e.target.value })}>
+                  <option value="user">普通用户</option>
+                  <option value="member">会员</option>
+                  <option value="developer">开发者</option>
+                </select>
+              </FormGroup>
+            </FormRow>
+
+            <FormRow>
+              <FormGroup label="邮箱验证">
+                <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-sm)',
+                  padding: '10px 0', cursor: 'pointer', color: 'var(--color-text-secondary)', fontSize: 'var(--text-sm)' }}>
+                  <input type="checkbox" checked={registration.require_email_verify}
+                    onChange={e => setRegistration({ ...registration, require_email_verify: e.target.checked })}
+                    style={{ accentColor: 'var(--color-accent)' }} />
+                  注册时要求邮箱验证
+                </label>
+              </FormGroup>
+              <FormGroup label="手机验证">
+                <label style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-sm)',
+                  padding: '10px 0', cursor: 'pointer', color: 'var(--color-text-secondary)', fontSize: 'var(--text-sm)' }}>
+                  <input type="checkbox" checked={registration.require_phone_verify}
+                    onChange={e => setRegistration({ ...registration, require_phone_verify: e.target.checked })}
+                    style={{ accentColor: 'var(--color-accent)' }} />
+                  注册时要求短信验证
+                </label>
+              </FormGroup>
+            </FormRow>
+
+            <FormGroup label="欢迎语（注册成功后展示）">
+              <textarea className="admin-form-input admin-form-textarea"
+                value={registration.welcome_message}
+                onChange={e => setRegistration({ ...registration, welcome_message: e.target.value })}
+                style={{ minHeight: 80 }}
+                placeholder="欢迎加入 Qihu-AIFlow！从这里开始你的 AI 创造之旅..." />
+            </FormGroup>
+
+            <FormActions>
+              <button className="admin-btn admin-btn-primary" onClick={saveRegistrationSettings}>
+                <SVGIcon><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></SVGIcon>
+                保存设置
+              </button>
+            </FormActions>
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  // ========== Main Render ==========
   return (
     <div style={{ animation: 'fadeIn var(--transition-normal)' }}>
+      {/* Header */}
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 'var(--space-2xl)' }}>
-        <h1 className="admin-page-title" style={{ marginBottom: 0 }}>网站基础设置</h1>
+        <h1 className="admin-page-title" style={{ marginBottom: 0 }}>站点设置</h1>
         {savedMsg && (
           <span className="admin-badge badge-success" style={{ padding: '6px 14px', fontSize: 'var(--text-sm)' }}>
             <SVGIcon><polyline points="20 6 9 17 4 12"/></SVGIcon>
@@ -219,230 +669,98 @@ const SiteSettings: React.FC = () => {
         )}
       </div>
 
-      {/* Brand Settings */}
+      {/* Horizontal Tab Bar */}
-      <div className="admin-card">
+      <div style={{
-        <div className="admin-card-header">
+        display: 'flex', gap: 0,
-          <h3 className="admin-card-title">
+        borderBottom: '1px solid var(--color-border)',
-            <SVGIcon size={18}><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></SVGIcon>
+        marginBottom: 'var(--space-2xl)',
-            {' '}品牌设置
+        overflowX: 'auto' as const,
-          </h3>
+      }}>
-        </div>
+        {TABS.map(tab => (
-
+          <button
-        <div className="admin-form-row">
+            key={tab.key}
-          <div className="admin-form-group">
+            onClick={() => setActiveTab(tab.key)}
-            <label className="admin-form-label">LOGO URL</label>
+            style={{
-            <input className="admin-form-input" value={brand.logo} onChange={e => setBrand({ ...brand, logo: e.target.value })} />
+              display: 'inline-flex', alignItems: 'center', gap: 6,
-          </div>
+              padding: '10px 18px',
-          <div className="admin-form-group">
+              border: 'none',
-            <label className="admin-form-label">网站名称</label>
+              background: 'transparent',
-            <input className="admin-form-input" value={brand.siteName} onChange={e => setBrand({ ...brand, siteName: e.target.value })} />
+              color: activeTab === tab.key ? 'var(--color-accent)' : 'var(--color-text-muted)',
-          </div>
+              fontSize: 'var(--text-sm)',
-        </div>
+              fontWeight: activeTab === tab.key ? 600 : 400,
-
+              cursor: 'pointer',
-        <div className="admin-form-group">
+              borderBottom: activeTab === tab.key ? '2px solid var(--color-accent)' : '2px solid transparent',
-          <label className="admin-form-label">首页公告</label>
+              transition: 'all var(--transition-fast)',
-          <textarea
+              whiteSpace: 'nowrap' as const,
-            className="admin-form-input admin-form-textarea"
+              marginBottom: -1,
-            value={brand.announcement}
+            }}
-            onChange={e => setBrand({ ...brand, announcement: e.target.value })}
+          >
-            style={{ minHeight: 60 }}
+            <SVGIcon size={15}>{tab.icon}</SVGIcon>
-          />
+            {tab.label}
-        </div>
-
-        <div className="admin-form-row">
-          <div className="admin-form-group">
-            <label className="admin-form-label">备案号</label>
-            <input className="admin-form-input" value={brand.icpNumber} onChange={e => setBrand({ ...brand, icpNumber: e.target.value })} />
-          </div>
-          <div className="admin-form-group">
-            <label className="admin-form-label">客服联系方式</label>
-            <input className="admin-form-input" value={brand.contactPhone} onChange={e => setBrand({ ...brand, contactPhone: e.target.value })} />
-          </div>
-        </div>
-
-        <div className="admin-form-actions">
-          <button className="admin-btn admin-btn-primary" onClick={saveSiteSettings}>
-            <SVGIcon><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></SVGIcon>
-            保存设置
           </button>
-        </div>
+        ))}
       </div>
 
-      {/* Mail Config */}
+      {/* Tab Content */}
-      <div className="admin-card">
+      {renderTabContent()}
-        <div className="admin-card-header">
-          <h3 className="admin-card-title">
-            <SVGIcon size={18}><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></SVGIcon>
-            {' '}邮件配置
-          </h3>
-        </div>
-
-        <div className="admin-form-row">
-          <div className="admin-form-group">
-            <label className="admin-form-label">SMTP服务器</label>
-            <input className="admin-form-input" value={mail.smtp_host} onChange={e => setMail({ ...mail, smtp_host: e.target.value })} />
-          </div>
-          <div className="admin-form-group">
-            <label className="admin-form-label">端口</label>
-            <input className="admin-form-input" type="number" value={mail.smtp_port} onChange={e => setMail({ ...mail, smtp_port: Number(e.target.value) })} />
-          </div>
-        </div>
-
-        <div className="admin-form-row">
-          <div className="admin-form-group">
-            <label className="admin-form-label">用户名</label>
-            <input className="admin-form-input" value={mail.username} onChange={e => setMail({ ...mail, username: e.target.value })} />
-          </div>
-          <div className="admin-form-group">
-            <label className="admin-form-label">密码</label>
-            <input className="admin-form-input" type="password" value={mail.password} onChange={e => setMail({ ...mail, password: e.target.value })} />
-          </div>
-        </div>
-
-        <div className="admin-form-group" style={{ maxWidth: '50%' }}>
-          <label className="admin-form-label">发件地址</label>
-          <input className="admin-form-input" value={mail.from_address} onChange={e => setMail({ ...mail, from_address: e.target.value })} />
-        </div>
-
-        <div className="admin-form-actions">
-          <button className="admin-btn admin-btn-primary" onClick={saveEmailConfig}>
-            <SVGIcon><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></SVGIcon>
-            保存设置
-          </button>
-          <button className="admin-btn admin-btn-outline" onClick={openEmailTest}>
-            <SVGIcon><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></SVGIcon>
-            发送测试邮件
-          </button>
-        </div>
-      </div>
-
-      {/* SMS Config */}
-      <div className="admin-card">
-        <div className="admin-card-header">
-          <h3 className="admin-card-title">
-            <SVGIcon size={18}><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></SVGIcon>
-            {' '}短信配置
-          </h3>
-        </div>
-
-        <div className="admin-form-row">
-          <div className="admin-form-group">
-            <label className="admin-form-label">短信服务商</label>
-            <select className="admin-form-input" value={sms.provider} onChange={e => setSms({ ...sms, provider: e.target.value })}>
-              <option value="">请选择</option>
-              <option value="阿里云短信">阿里云短信</option>
-              <option value="腾讯云短信">腾讯云短信</option>
-              <option value="华为云短信">华为云短信</option>
-            </select>
-          </div>
-          <div className="admin-form-group">
-            <label className="admin-form-label">短信签名</label>
-            <input className="admin-form-input" value={sms.sign_name} onChange={e => setSms({ ...sms, sign_name: e.target.value })} />
-          </div>
-        </div>
-
-        <div className="admin-form-row">
-          <div className="admin-form-group">
-            <label className="admin-form-label">API Key</label>
-            <input className="admin-form-input" value={sms.api_key} onChange={e => setSms({ ...sms, api_key: e.target.value })} />
-          </div>
-          <div className="admin-form-group">
-            <label className="admin-form-label">API Secret</label>
-            <input className="admin-form-input" type="password" value={sms.api_secret} onChange={e => setSms({ ...sms, api_secret: e.target.value })} />
-          </div>
-        </div>
-
-        <div className="admin-form-actions">
-          <button className="admin-btn admin-btn-primary" onClick={saveSmsConfig}>
-            <SVGIcon><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></SVGIcon>
-            保存设置
-          </button>
-          <button className="admin-btn admin-btn-outline" onClick={sendTestSms}>
-            <SVGIcon><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></SVGIcon>
-            发送测试短信
-          </button>
-        </div>
-      </div>
 
       {/* Email Test Modal */}
       {showEmailTest && (
-        <div style={{
+        <div className="admin-modal-overlay" onClick={() => setShowEmailTest(false)}>
-          position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
+          <div className="admin-modal" onClick={e => e.stopPropagation()}>
-          background: 'rgba(0,0,0,0.4)', zIndex: 'var(--z-modal)',
+            <div className="admin-modal-header">
-          display: 'flex', alignItems: 'center', justifyContent: 'center',
+              <h3 style={{ display: 'flex', alignItems: 'center', gap: 8, margin: 0 }}>
-        }} onClick={() => setShowEmailTest(false)}>
+                <SVGIcon size={18}><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></SVGIcon>
-          <div style={{
+                发送测试邮件
-            background: '#fff', borderRadius: 'var(--radius-2xl)', width: 520, maxHeight: '90vh', overflow: 'auto',
-            padding: 'var(--space-3xl)', boxShadow: 'var(--shadow-xl)',
-          }} onClick={e => e.stopPropagation()}>
-            <h3 style={{ fontSize: 'var(--text-lg)', fontWeight: 700, marginBottom: 'var(--space-2xl)' }}>
-              <SVGIcon size={20}><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></SVGIcon>
-              {' '}发送测试邮件
               </h3>
-            <div className="admin-form-group">
+              <button className="admin-modal-close" onClick={() => setShowEmailTest(false)}>
-              <label className="admin-form-label">收件邮箱 <span style={{ color: 'var(--color-error)' }}>*</span></label>
+                <SVGIcon size={18}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></SVGIcon>
-              <input
+              </button>
-                className="admin-form-input"
+            </div>
-                type="email"
+            <div className="admin-modal-body">
-                value={emailTestTo}
+              <FormGroup label="收件邮箱" required>
+                <input className="admin-form-input" type="email" value={emailTestTo}
                   onChange={e => setEmailTestTo(e.target.value)}
-                placeholder="例如: admin@example.com"
+                  placeholder="例如: admin@example.com" />
-              />
+              </FormGroup>
-            </div>
+              <FormGroup label="邮件主题">
-            <div className="admin-form-group">
+                <input className="admin-form-input" value={emailTestSubject}
-              <label className="admin-form-label">邮件主题</label>
+                  onChange={e => setEmailTestSubject(e.target.value)} />
-              <input
+              </FormGroup>
-                className="admin-form-input"
+              <FormGroup label="邮件内容">
-                value={emailTestSubject}
+                <textarea className="admin-form-input admin-form-textarea"
-                onChange={e => setEmailTestSubject(e.target.value)}
-                placeholder="测试邮件标题"
-              />
-            </div>
-            <div className="admin-form-group">
-              <label className="admin-form-label">邮件内容</label>
-              <textarea
-                className="admin-form-input admin-form-textarea"
                   value={emailTestBody}
                   onChange={e => setEmailTestBody(e.target.value)}
-                style={{ minHeight: 120 }}
+                  style={{ minHeight: 120 }} />
-                placeholder="测试邮件内容..."
+              </FormGroup>
-              />
+              <div style={{ marginBottom: 'var(--space-lg)' }}>
-            </div>
+                <button className="admin-btn admin-btn-outline admin-btn-sm"
-            <div style={{ display: 'flex', gap: 'var(--space-sm)', justifyContent: 'space-between', marginBottom: 'var(--space-lg)' }}>
+                  onClick={handleAIGenerateContent} disabled={emailGenerating}>
-              <button
-                className="admin-btn admin-btn-outline admin-btn-sm"
-                onClick={handleAIGenerateContent}
-                disabled={emailGenerating}
-                style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}
-              >
                   <SVGIcon size={12}><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></SVGIcon>
                   {emailGenerating ? '生成中...' : 'AI生成测试内容'}
                 </button>
               </div>
-            <div className="admin-form-actions">
+            </div>
-              <button
+            <div className="admin-modal-footer">
-                className="admin-btn admin-btn-primary"
+              <button className="admin-btn admin-btn-primary" onClick={sendTestEmail} disabled={!emailTestTo.trim()}>
-                onClick={sendTestEmail}
-                disabled={!emailTestTo.trim()}
-              >
                 <SVGIcon><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></SVGIcon>
                 发送测试邮件
               </button>
-              <button className="admin-btn admin-btn-outline" onClick={() => setShowEmailTest(false)}>
+              <button className="admin-btn admin-btn-outline" onClick={() => setShowEmailTest(false)}>取消</button>
-                取消
-              </button>
             </div>
           </div>
         </div>
       )}
 
-      {/* Test Result Toast */}
+      {/* Toast */}
       {testResult && (
         <div style={{
           position: 'fixed', bottom: 24, right: 24, padding: '12px 20px',
           background: testResult.includes('失败') ? 'var(--color-error)' : 'var(--color-success)',
-          color: '#fff', borderRadius: 8, boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+          color: '#fff', borderRadius: 8,
+          boxShadow: '0 4px 12px rgba(0,0,0,0.3)',
           zIndex: 9999, fontSize: 'var(--text-sm)',
+          maxWidth: 420,
         }}>
           {testResult}
         </div>