@zhang_libo/resource-hub 1.0.2

package/public/admin/AdminCategories.jsx

@@ -0,0 +1,310 @@
+const PRESET_COLORS = ['#4F46E5', '#8B5CF6', '#14B8A6', '#F59E0B', '#F43F5E', '#2563EB', '#0EA5E9', '#64748B'];
+
+function AdminCategories() {
+  const state = window.useAppState();
+  const dispatch = window.useAppDispatch();
+  const { request } = window.useApi();
+  const { Plus, Edit2, Trash2, Loader, Check } = lucide;
+  const { getCategoryTone } = window.helpers;
+
+  const categories = state?.categories || [];
+  const [showModal, setShowModal] = React.useState(false);
+  const [editTarget, setEditTarget] = React.useState(null); // null = create
+  const [form, setForm] = React.useState({ name: '', color: '#4F46E5' });
+  const [formError, setFormError] = React.useState('');
+  const [saving, setSaving] = React.useState(false);
+  const [deleteTarget, setDeleteTarget] = React.useState(null);
+  const [deleting, setDeleting] = React.useState(false);
+  const [page, setPage] = React.useState(1);
+  const PAGE_SIZE = 20;
+
+  const openCreate = () => { setEditTarget(null); setForm({ name: '', color: '#4F46E5' }); setFormError(''); setShowModal(true); };
+  const openEdit = (cat) => { setEditTarget(cat); setForm({ name: cat.name, color: cat.color }); setFormError(''); setShowModal(true); };
+
+  const handleSave = async () => {
+    if (!form.name.trim()) { setFormError('类别名称不能为空'); return; }
+    setSaving(true);
+    try {
+      if (editTarget) {
+        const { ok, data } = await request(`/api/categories/${editTarget.id}`, {
+          method: 'PUT', body: JSON.stringify({ name: form.name.trim(), color: form.color }),
+        });
+        if (ok) {
+          dispatch({ type: 'UPDATE_CATEGORY', category: data.data });
+          dispatch({ type: 'ADD_TOAST', toastType: 'success', message: '类别已更新' });
+          setShowModal(false);
+        } else {
+          setFormError(data.error || '更新失败');
+        }
+      } else {
+        const { ok, data } = await request('/api/categories', {
+          method: 'POST', body: JSON.stringify({ name: form.name.trim(), color: form.color }),
+        });
+        if (ok) {
+          dispatch({ type: 'ADD_CATEGORY', category: data.data });
+          dispatch({ type: 'ADD_TOAST', toastType: 'success', message: '类别已创建' });
+          setShowModal(false);
+        } else {
+          setFormError(data.error || '创建失败');
+        }
+      }
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return;
+    setDeleting(true);
+    try {
+      const { ok, data } = await request(`/api/categories/${deleteTarget.id}`, { method: 'DELETE' });
+      if (ok) {
+        dispatch({ type: 'DELETE_CATEGORY', id: deleteTarget.id });
+        dispatch({ type: 'ADD_TOAST', toastType: 'success', message: '类别已删除' });
+        setDeleteTarget(null);
+      } else {
+        dispatch({ type: 'ADD_TOAST', toastType: 'error', message: data.error || '删除失败' });
+      }
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  const totalPages = Math.ceil(categories.length / PAGE_SIZE);
+  const pageData = categories.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE);
+
+  const headerPanelStyle = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: '12px',
+    flexWrap: 'wrap',
+    marginBottom: '18px',
+    padding: '18px 20px',
+    background: 'var(--surface-elevated)',
+    border: '1px solid var(--border)',
+    borderRadius: '18px',
+    boxShadow: 'var(--shadow-card)',
+  };
+  const primaryButtonStyle = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '6px',
+    minHeight: '38px',
+    padding: '0 16px',
+    background: 'var(--brand)',
+    color: '#fff',
+    border: '1px solid var(--brand)',
+    borderRadius: '12px',
+    cursor: 'pointer',
+    fontSize: '14px',
+    fontWeight: 700,
+    boxShadow: '0 10px 20px color-mix(in srgb, var(--brand) 16%, transparent)',
+  };
+  const secondaryButtonStyle = {
+    minHeight: '38px',
+    padding: '0 16px',
+    border: '1px solid var(--control-border)',
+    background: 'var(--surface-elevated)',
+    color: 'var(--text-primary)',
+    borderRadius: '12px',
+    cursor: 'pointer',
+    fontSize: '14px',
+    fontWeight: 600,
+    boxShadow: 'var(--shadow-control)',
+  };
+  const tableShellStyle = {
+    background: 'var(--surface-elevated)',
+    border: '1px solid var(--border)',
+    borderRadius: '18px',
+    overflowX: 'auto',
+    boxShadow: 'var(--shadow-card)',
+  };
+  const thStyle = {
+    padding: '0 18px',
+    textAlign: 'left',
+    fontSize: '12px',
+    fontWeight: 700,
+    color: 'var(--text-secondary)',
+    letterSpacing: '0.02em',
+  };
+  const tdStyle = { padding: '0 18px', fontSize: '14px', color: 'var(--text-primary)' };
+  const iconButtonStyle = (tone = 'neutral') => ({
+    width: '32px',
+    height: '32px',
+    borderRadius: '10px',
+    border: `1px solid ${tone === 'danger' ? 'color-mix(in srgb, var(--danger) 20%, var(--control-border))' : 'var(--control-border)'}`,
+    background: tone === 'danger'
+      ? 'color-mix(in srgb, var(--danger) 8%, var(--surface-elevated))'
+      : 'var(--surface-elevated)',
+    color: tone === 'danger' ? 'var(--danger)' : 'var(--text-secondary)',
+    cursor: 'pointer',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxShadow: 'var(--shadow-control)',
+  });
+  const pagerButtonStyle = (disabled) => ({
+    width: '36px',
+    height: '36px',
+    border: '1px solid var(--control-border)',
+    background: 'var(--surface-elevated)',
+    borderRadius: '10px',
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    color: disabled ? 'var(--text-tertiary)' : 'var(--text-primary)',
+    boxShadow: 'var(--shadow-control)',
+    opacity: disabled ? 0.6 : 1,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  });
+  const modalLabelStyle = { fontSize: '13px', fontWeight: 600, color: 'var(--text-primary)', display: 'block', marginBottom: '6px' };
+  const modalInputStyle = (error = false) => ({
+    width: '100%',
+    padding: '10px 12px',
+    border: `1px solid ${error ? 'var(--danger)' : 'var(--control-border)'}`,
+    borderRadius: '10px',
+    background: 'var(--surface-elevated)',
+    color: 'var(--text-primary)',
+    fontSize: '14px',
+    outline: 'none',
+    boxSizing: 'border-box',
+  });
+
+  return (
+    <div>
+      <div style={headerPanelStyle}>
+        <div style={{ display: 'grid', gap: '4px' }}>
+          <h2 style={{ fontSize: '26px', fontWeight: 800, color: 'var(--text-primary)', margin: 0, letterSpacing: '-0.03em' }}>类别管理</h2>
+          <div style={{ fontSize: '13px', color: 'var(--text-secondary)', lineHeight: 1.5 }}>管理资源分类名称与配色，保持后台和结果页的类别语义一致。</div>
+        </div>
+        <button onClick={openCreate} style={primaryButtonStyle}>
+          <Plus size={15} /> 新增类别
+        </button>
+      </div>
+
+      <div style={tableShellStyle}>
+        <table style={{ width: '100%', minWidth: '640px', borderCollapse: 'collapse' }}>
+          <thead>
+            <tr style={{ background: 'var(--surface-muted)', height: '46px' }}>
+              <th style={thStyle}>名称</th>
+              <th style={thStyle}>颜色</th>
+              <th style={thStyle}>资源数</th>
+              <th style={{ ...thStyle, width: '120px' }}>操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            {pageData.length === 0 ? (
+              <tr><td colSpan={4} style={{ ...tdStyle, textAlign: 'center', height: '88px', color: 'var(--text-secondary)' }}>暂无类别</td></tr>
+            ) : pageData.map(cat => (
+              <tr
+                key={cat.id}
+                style={{ height: '56px', borderTop: '1px solid color-mix(in srgb, var(--border) 86%, transparent)', background: 'var(--surface-elevated)', transition: 'background 150ms ease' }}
+                onMouseEnter={e => { e.currentTarget.style.background = 'var(--surface-hover)'; }}
+                onMouseLeave={e => { e.currentTarget.style.background = 'var(--surface-elevated)'; }}
+              >
+                <td style={{ ...tdStyle, fontWeight: 600 }}>{cat.name}</td>
+                <td style={tdStyle}>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                    <span
+                      style={{
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: '8px',
+                        minHeight: '30px',
+                        padding: '0 10px',
+                        borderRadius: '999px',
+                        background: getCategoryTone(cat, cat.id).soft,
+                        border: `1px solid ${getCategoryTone(cat, cat.id).border}`,
+                      }}
+                    >
+                      <span style={{ width: '12px', height: '12px', borderRadius: '50%', background: cat.color, flexShrink: 0 }} />
+                      <span style={{ fontSize: '12px', color: 'var(--text-secondary)', fontFamily: 'monospace' }}>{cat.color}</span>
+                    </span>
+                  </div>
+                </td>
+                <td style={{ ...tdStyle, fontWeight: 600 }}>{cat.resourceCount ?? 0}</td>
+                <td style={tdStyle}>
+                  <div style={{ display: 'flex', gap: '8px' }}>
+                    <button onClick={() => openEdit(cat)} style={iconButtonStyle('neutral')}>
+                      <Edit2 size={14} />
+                    </button>
+                    <button onClick={() => setDeleteTarget(cat)} style={iconButtonStyle('danger')}>
+                      <Trash2 size={14} />
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div style={{ display: 'flex', justifyContent: 'center', gap: '8px', marginTop: '16px' }}>
+          <button onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page === 1}
+            style={pagerButtonStyle(page === 1)}>
+            <lucide.ChevronLeft size={14} />
+          </button>
+          <span style={{ padding: '6px 12px', fontSize: '14px', color: 'var(--text-secondary)', minWidth: '72px', textAlign: 'center' }}>{page} / {totalPages}</span>
+          <button onClick={() => setPage(p => Math.min(totalPages, p + 1))} disabled={page === totalPages}
+            style={pagerButtonStyle(page === totalPages)}>
+            <lucide.ChevronRight size={14} />
+          </button>
+        </div>
+      )}
+
+      {/* Create/Edit Modal */}
+      <window.Modal isOpen={showModal} onClose={() => setShowModal(false)} title={editTarget ? '编辑类别' : '新增类别'} width="480px">
+        <div>
+          <div style={{ marginBottom: '16px' }}>
+            <label style={modalLabelStyle}>类别名称</label>
+            <input value={form.name} onChange={e => { setForm(f => ({ ...f, name: e.target.value })); setFormError(''); }}
+              style={modalInputStyle(Boolean(formError))} placeholder="输入类别名称" disabled={saving} />
+            {formError && <div style={{ fontSize: '12px', color: 'var(--danger)', marginTop: '4px' }}>{formError}</div>}
+          </div>
+          <div style={{ marginBottom: '20px' }}>
+            <label style={modalLabelStyle}>颜色</label>
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', marginBottom: '10px' }}>
+              {PRESET_COLORS.map(c => (
+                <button key={c} onClick={() => setForm(f => ({ ...f, color: c }))} style={{
+                  width: '30px', height: '30px', borderRadius: '50%', background: c, border: 'none', cursor: 'pointer',
+                  outline: form.color === c ? `3px solid ${c}` : '3px solid transparent',
+                  outlineOffset: '2px',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                }}>
+                  {form.color === c && <Check size={14} color="#fff" />}
+                </button>
+              ))}
+            </div>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <input type="color" value={form.color} onChange={e => setForm(f => ({ ...f, color: e.target.value }))}
+                style={{ width: '38px', height: '32px', border: '1px solid var(--control-border)', borderRadius: '8px', cursor: 'pointer', padding: '0', background: 'var(--surface-elevated)' }} />
+              <input value={form.color} onChange={e => setForm(f => ({ ...f, color: e.target.value }))}
+                style={{ ...modalInputStyle(false), flex: 1, padding: '8px 10px', fontFamily: 'monospace' }} placeholder="#4F46E5" />
+            </div>
+          </div>
+          <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end', paddingTop: '16px', borderTop: '1px solid var(--border)' }}>
+            <button onClick={() => setShowModal(false)} disabled={saving} style={secondaryButtonStyle}>取消</button>
+            <button onClick={handleSave} disabled={saving} style={{ ...primaryButtonStyle, opacity: saving ? 0.8 : 1, cursor: saving ? 'not-allowed' : 'pointer' }}>
+              {saving && <Loader size={14} />} 保存
+            </button>
+          </div>
+        </div>
+      </window.Modal>
+
+      {/* Delete confirm */}
+      <window.ConfirmDialog
+        isOpen={!!deleteTarget}
+        onClose={() => setDeleteTarget(null)}
+        onConfirm={handleDelete}
+        title="删除类别"
+        message={`确认删除类别「${deleteTarget?.name}」？${deleteTarget?.resourceCount > 0 ? `关联的 ${deleteTarget.resourceCount} 个资源将失去类别归属。` : ''}删除后不可恢复。`}
+        loading={deleting}
+      />
+    </div>
+  );
+}
+
+window.AdminCategories = AdminCategories;

package/public/admin/AdminConfig.jsx

@@ -0,0 +1,254 @@
+function AdminConfig() {
+  const dispatch = window.useAppDispatch();
+  const { request } = window.useApi();
+  const { t } = window.useI18n();
+  const { Save, Loader } = lucide;
+
+  const [form, setForm] = React.useState({
+    siteTitle: '',
+    siteSubtitle: '',
+    logoUrl: '',
+    tokenExpiry: 60,
+    resetTokenExpiry: 60,
+    enableRegister: true,
+    restrictEmailDomain: false,
+    emailDomainWhitelist: '',
+  });
+  const [errors, setErrors] = React.useState({});
+  const [loading, setLoading] = React.useState(true);
+  const [saving, setSaving] = React.useState(false);
+  const localizableConfigValues = new Set(['资源导航系统', '统一管理与访问你的资源', '登录以访问全部资源导航']);
+  const getLocalizedConfigValue = (value) => (localizableConfigValues.has(value) ? t(value) : value);
+
+  React.useEffect(() => {
+    async function load() {
+      const { ok, data } = await request('/api/config/system/full');
+      if (ok && data.data) {
+        const cfg = data.data;
+        setForm({
+          siteTitle: cfg.siteTitle || '',
+          siteSubtitle: cfg.siteSubtitle || '',
+          logoUrl: cfg.logoUrl || '',
+          tokenExpiry: cfg.tokenExpiry ?? 60,
+          resetTokenExpiry: cfg.resetTokenExpiry ?? 60,
+          enableRegister: cfg.enableRegister !== false,
+          restrictEmailDomain: cfg.restrictEmailDomain === true,
+          emailDomainWhitelist: cfg.emailDomainWhitelist || '',
+        });
+      }
+      setLoading(false);
+    }
+    load();
+  }, []);
+
+  const handleSave = async () => {
+    setSaving(true);
+    setErrors({});
+    try {
+      const payload = {
+        siteTitle: form.siteTitle,
+        siteSubtitle: form.siteSubtitle,
+        logoUrl: form.logoUrl,
+        tokenExpiry: Number(form.tokenExpiry),
+        resetTokenExpiry: Number(form.resetTokenExpiry),
+        enableRegister: form.enableRegister,
+        restrictEmailDomain: form.restrictEmailDomain,
+        emailDomainWhitelist: form.restrictEmailDomain ? form.emailDomainWhitelist : '',
+      };
+
+      const { ok, data } = await request('/api/config/system', {
+        method: 'PUT',
+        body: JSON.stringify(payload),
+      });
+      if (ok) {
+        dispatch({
+          type: 'SET_CONFIG',
+          config: {
+            siteTitle: data.data.siteTitle,
+            siteSubtitle: data.data.siteSubtitle,
+            logoUrl: data.data.logoUrl,
+            enableRegister: data.data.enableRegister,
+          },
+        });
+        dispatch({ type: 'ADD_TOAST', toastType: 'success', message: '系统配置已保存' });
+      } else {
+        if (data.code === 'VALIDATION_ERROR' && data.fields) {
+          setErrors(data.fields);
+        }
+        dispatch({ type: 'ADD_TOAST', toastType: 'error', message: data.error || '保存失败' });
+      }
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const inputStyle = (field) => ({
+    width: '100%', padding: '9px 12px', boxSizing: 'border-box',
+    border: `1px solid ${errors[field] ? 'var(--danger)' : 'var(--control-border)'}`,
+    borderRadius: '10px',
+    background: 'var(--surface-elevated)',
+    backgroundColor: 'var(--surface-elevated)',
+    color: 'var(--text-primary)',
+    fontSize: '14px', outline: 'none',
+  });
+  const labelStyle = { fontSize: '13px', fontWeight: 600, color: 'var(--text-primary)', display: 'block', marginBottom: '6px' };
+  const fieldStyle = { marginBottom: '20px' };
+  const headerPanelStyle = {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: '12px',
+    flexWrap: 'wrap',
+    marginBottom: '18px',
+    padding: '18px 20px',
+    background: 'var(--surface-elevated)',
+    border: '1px solid var(--border)',
+    borderRadius: '18px',
+    boxShadow: 'var(--shadow-card)',
+  };
+  const primaryButtonStyle = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '6px',
+    minHeight: '38px',
+    padding: '0 18px',
+    background: 'var(--brand)',
+    color: '#fff',
+    border: '1px solid var(--brand)',
+    borderRadius: '12px',
+    cursor: 'pointer',
+    fontSize: '14px',
+    fontWeight: 700,
+    boxShadow: '0 10px 20px color-mix(in srgb, var(--brand) 16%, transparent)',
+  };
+  const panelStyle = {
+    background: 'var(--surface-elevated)',
+    border: '1px solid var(--border)',
+    borderRadius: '18px',
+    padding: '24px',
+    maxWidth: '680px',
+    boxShadow: 'var(--shadow-card)',
+  };
+
+  if (loading) {
+    return (
+      <div>
+        <h2 style={{ fontSize: '18px', fontWeight: 700, color: 'var(--text-primary)', marginBottom: '20px' }}>系统配置</h2>
+        <window.Skeleton rows={6} type="form" />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div style={headerPanelStyle}>
+        <div style={{ display: 'grid', gap: '4px' }}>
+          <h2 style={{ fontSize: '26px', fontWeight: 800, color: 'var(--text-primary)', margin: 0, letterSpacing: '-0.03em' }}>系统配置</h2>
+          <div style={{ fontSize: '13px', color: 'var(--text-secondary)', lineHeight: 1.5 }}>维护站点基础信息、注册策略与安全有效期配置。</div>
+        </div>
+        <button onClick={handleSave} disabled={saving} style={{ ...primaryButtonStyle, opacity: saving ? 0.8 : 1, cursor: saving ? 'not-allowed' : 'pointer' }}>
+          {saving ? <Loader size={15} /> : <Save size={15} />}
+          保存配置
+        </button>
+      </div>
+
+      <div style={panelStyle}>
+        <div style={fieldStyle}>
+          <label style={labelStyle}>站点标题</label>
+          <input value={getLocalizedConfigValue(form.siteTitle)} onChange={e => setForm(f => ({ ...f, siteTitle: e.target.value }))}
+            className="rh-admin-input" style={inputStyle('siteTitle')} placeholder="资源导航系统" disabled={saving} />
+          {errors.siteTitle && <div style={{ fontSize: '12px', color: 'var(--danger)', marginTop: '4px' }}>{errors.siteTitle}</div>}
+        </div>
+
+        <div style={fieldStyle}>
+          <label style={labelStyle}>站点副标题</label>
+          <input value={getLocalizedConfigValue(form.siteSubtitle)} onChange={e => setForm(f => ({ ...f, siteSubtitle: e.target.value }))}
+            className="rh-admin-input" style={inputStyle('siteSubtitle')} placeholder="统一管理与访问你的资源" disabled={saving} />
+          {errors.siteSubtitle && <div style={{ fontSize: '12px', color: 'var(--danger)', marginTop: '4px' }}>{errors.siteSubtitle}</div>}
+        </div>
+
+        <div style={fieldStyle}>
+          <label style={labelStyle}>站点 Logo URL</label>
+          <input value={form.logoUrl} onChange={e => setForm(f => ({ ...f, logoUrl: e.target.value }))}
+            className="rh-admin-input" style={inputStyle('logoUrl')} placeholder="留空则使用默认图标" disabled={saving} />
+          {errors.logoUrl && <div style={{ fontSize: '12px', color: 'var(--danger)', marginTop: '4px' }}>{errors.logoUrl}</div>}
+          <div style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginTop: '4px' }}>留空时显示品牌色首字母图标</div>
+        </div>
+
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: '16px', ...fieldStyle }}>
+          <div>
+            <label style={labelStyle}>Token 有效期（分钟）</label>
+            <input type="number" value={form.tokenExpiry} min={5} max={43200}
+              onChange={e => setForm(f => ({ ...f, tokenExpiry: e.target.value }))}
+              className="rh-admin-input" style={inputStyle('tokenExpiry')} placeholder="60" disabled={saving} />
+            {errors.tokenExpiry && <div style={{ fontSize: '12px', color: 'var(--danger)', marginTop: '4px' }}>{errors.tokenExpiry}</div>}
+          </div>
+          <div>
+            <label style={labelStyle}>重置链接有效期（分钟）</label>
+            <input type="number" value={form.resetTokenExpiry} min={5} max={43200}
+              onChange={e => setForm(f => ({ ...f, resetTokenExpiry: e.target.value }))}
+              className="rh-admin-input" style={inputStyle('resetTokenExpiry')} placeholder="60" disabled={saving} />
+            {errors.resetTokenExpiry && <div style={{ fontSize: '12px', color: 'var(--danger)', marginTop: '4px' }}>{errors.resetTokenExpiry}</div>}
+          </div>
+        </div>
+
+        <div style={{ ...fieldStyle, display: 'flex', alignItems: 'center', gap: '12px' }}>
+          <label style={{ ...labelStyle, marginBottom: 0, flex: 1 }}>开放注册</label>
+          <button
+            onClick={() => setForm(f => ({ ...f, enableRegister: !f.enableRegister }))}
+            disabled={saving}
+            style={{
+              width: '44px', height: '24px', borderRadius: '12px', border: 'none',
+              cursor: saving ? 'not-allowed' : 'pointer',
+              background: form.enableRegister ? 'var(--brand)' : 'var(--bg-tertiary)',
+              position: 'relative', transition: 'background 200ms', flexShrink: 0,
+            }}>
+            <div style={{
+              position: 'absolute', top: '2px', width: '20px', height: '20px',
+              borderRadius: '50%', background: '#fff',
+              left: form.enableRegister ? '22px' : '2px', transition: 'left 200ms',
+              boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
+            }} />
+          </button>
+          <span style={{ fontSize: '13px', color: 'var(--text-secondary)', flexShrink: 0 }}>
+            {form.enableRegister ? '已开启' : '已关闭'}
+          </span>
+        </div>
+
+        <div style={{ ...fieldStyle, display: 'flex', alignItems: 'center', gap: '12px' }}>
+          <label style={{ ...labelStyle, marginBottom: 0, flex: 1 }}>限制注册邮箱域名</label>
+          <button
+            onClick={() => setForm(f => ({ ...f, restrictEmailDomain: !f.restrictEmailDomain }))}
+            disabled={saving}
+            style={{
+              width: '44px', height: '24px', borderRadius: '12px', border: 'none',
+              cursor: saving ? 'not-allowed' : 'pointer',
+              background: form.restrictEmailDomain ? 'var(--brand)' : 'var(--bg-tertiary)',
+              position: 'relative', transition: 'background 200ms', flexShrink: 0,
+            }}>
+            <div style={{
+              position: 'absolute', top: '2px', width: '20px', height: '20px',
+              borderRadius: '50%', background: '#fff',
+              left: form.restrictEmailDomain ? '22px' : '2px', transition: 'left 200ms',
+              boxShadow: '0 1px 3px rgba(0,0,0,0.2)',
+            }} />
+          </button>
+          <span style={{ fontSize: '13px', color: 'var(--text-secondary)', flexShrink: 0 }}>
+            {form.restrictEmailDomain ? '已开启' : '已关闭'}
+          </span>
+        </div>
+
+        <div style={fieldStyle}>
+          <label style={labelStyle}>邮箱域名白名单</label>
+          <input value={form.emailDomainWhitelist}
+            onChange={e => setForm(f => ({ ...f, emailDomainWhitelist: e.target.value }))}
+            className="rh-admin-input" style={inputStyle('emailDomainWhitelist')} placeholder="example.com,corp.com" disabled={saving || !form.restrictEmailDomain} />
+          {errors.emailDomainWhitelist && <div style={{ fontSize: '12px', color: 'var(--danger)', marginTop: '4px' }}>{errors.emailDomainWhitelist}</div>}
+          <div style={{ fontSize: '12px', color: 'var(--text-tertiary)', marginTop: '4px' }}>多个域名用英文逗号分隔，留空则不限制</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+window.AdminConfig = AdminConfig;