@zhang_libo/resource-hub 1.0.2

package/public/pages/LoginPage.jsx

@@ -0,0 +1,191 @@
+function LoginPage() {
+  const state = window.useAppState();
+  const dispatch = window.useAppDispatch();
+  const { navigate } = window.useRouter();
+  const { request } = window.useApi();
+  const { AlertCircle, Eye, EyeOff, Loader, ShieldCheck } = lucide;
+
+  const [form, setForm] = React.useState({ username: '', password: '' });
+  const [showPassword, setShowPassword] = React.useState(false);
+  const [errors, setErrors] = React.useState({ username: '', password: '', form: '' });
+  const [loading, setLoading] = React.useState(false);
+
+  const config = state?.config || {};
+  const siteTitle = config.siteTitle || 'ResourceHub';
+  const logoLetter = (siteTitle.trim().charAt(0) || 'R').toUpperCase();
+  const authStyles = window.authStyles;
+
+  const validateField = React.useCallback((field, value) => {
+    const normalized = typeof value === 'string' ? value.trim() : value;
+    if (field === 'username') return normalized ? '' : '请输入用户名';
+    if (field === 'password') return value ? '' : '请输入密码';
+    return '';
+  }, []);
+
+  const validateForm = React.useCallback(() => ({
+    username: validateField('username', form.username),
+    password: validateField('password', form.password),
+  }), [form.password, form.username, validateField]);
+
+  const updateField = (field, value) => {
+    setForm((prev) => ({ ...prev, [field]: value }));
+    setErrors((prev) => ({
+      ...prev,
+      [field]: prev[field] ? validateField(field, value) : '',
+      form: '',
+    }));
+  };
+
+  const handleFieldBlur = (field) => {
+    setErrors((prev) => ({
+      ...prev,
+      [field]: validateField(field, form[field]),
+    }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const nextErrors = validateForm();
+    if (nextErrors.username || nextErrors.password) {
+      setErrors({ ...nextErrors, form: '' });
+      return;
+    }
+    setLoading(true);
+    setErrors((prev) => ({ ...prev, form: '' }));
+    try {
+      const { passwordEnc, ts } = await window.security.encryptPasswordWithTs(form.password);
+      const { ok, data } = await request('/api/auth/login', {
+        method: 'POST',
+        body: JSON.stringify({ username: form.username, passwordEnc, ts }),
+      });
+      if (ok) {
+        dispatch({ type: 'LOGIN', user: data.data.user, token: data.data.token });
+        navigate('#/');
+      } else {
+        setErrors((prev) => ({ ...prev, form: '用户名或密码错误，请重新输入' }));
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <window.AuthLayout>
+      <window.AuthCard
+        width="452px"
+        kicker="统一访问入口"
+        title="登录账号"
+        subtitle={config.siteSubtitle || '统一管理与访问你的资源'}
+        logoLetter={logoLetter}
+      >
+          <form onSubmit={handleSubmit}>
+            <div style={authStyles.field}>
+              <label style={authStyles.label}>用户名</label>
+              <input
+                className="rh-auth-input"
+                type="text"
+                value={form.username}
+                name="username"
+                autoComplete="username"
+                autoFocus
+                aria-invalid={!!errors.username}
+                onChange={(e) => updateField('username', e.target.value)}
+                onBlur={() => handleFieldBlur('username')}
+                placeholder="请输入用户名"
+                disabled={loading}
+                style={authStyles.input(!!errors.username)}
+              />
+              {errors.username ? <div style={authStyles.errorText}>{errors.username}</div> : null}
+            </div>
+
+            <div style={{ ...authStyles.field, marginBottom: errors.password ? '14px' : '12px' }}>
+              <label style={authStyles.label}>密码</label>
+              <div style={{ position: 'relative' }}>
+                <input
+                  className="rh-auth-input"
+                  type={showPassword ? 'text' : 'password'}
+                  value={form.password}
+                  name="password"
+                  autoComplete="current-password"
+                  aria-invalid={!!errors.password}
+                  onChange={(e) => updateField('password', e.target.value)}
+                  onBlur={() => handleFieldBlur('password')}
+                  placeholder="请输入密码"
+                  disabled={loading}
+                  style={authStyles.input(!!errors.password, true)}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(v => !v)}
+                  disabled={loading}
+                  aria-label={showPassword ? '隐藏密码' : '显示密码'}
+                  style={{
+                    ...authStyles.passwordToggle,
+                    color: showPassword ? 'var(--brand-strong)' : authStyles.passwordToggle.color,
+                    background: showPassword
+                      ? 'color-mix(in srgb, var(--brand-soft) 72%, transparent)'
+                      : authStyles.passwordToggle.background,
+                  }}
+                >
+                  {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                </button>
+              </div>
+              {errors.password ? <div style={authStyles.errorText}>{errors.password}</div> : null}
+            </div>
+
+            {errors.form && (
+              <div role="alert" aria-live="polite" style={authStyles.errorBanner}>
+                <AlertCircle size={16} style={{ flexShrink: 0 }} />
+                <span>{errors.form}</span>
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={loading}
+              aria-busy={loading}
+              style={{ ...authStyles.primaryButton(loading), marginBottom: '12px' }}
+            >
+              {loading && <Loader size={16} />}
+              {loading ? '登录中...' : '登录'}
+            </button>
+
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'flex-start',
+                gap: '10px',
+                padding: '12px 14px',
+                borderRadius: '12px',
+                background: 'color-mix(in srgb, var(--brand-soft) 54%, var(--surface-elevated))',
+                border: '1px solid color-mix(in srgb, var(--brand) 16%, var(--border))',
+                color: 'var(--text-secondary)',
+                fontSize: '12px',
+                lineHeight: 1.6,
+                marginBottom: '18px',
+              }}
+            >
+              <ShieldCheck size={16} style={{ flexShrink: 0, marginTop: '1px', color: 'var(--brand-strong)' }} />
+              <span>如无法登录或注册，请联系管理员确认账号与注册策略。</span>
+            </div>
+
+            <div style={{ ...authStyles.footerRow, justifyContent: config.enableRegister ? 'space-between' : 'flex-start', gap: '14px', alignItems: 'center' }}>
+              <a href="#/forgot-password" className="rh-auth-text-link">
+                忘记密码？
+              </a>
+              {config.enableRegister ? (
+                <div style={{ display: 'flex', alignItems: 'center', gap: '6px', flexWrap: 'wrap', justifyContent: 'flex-end' }}>
+                  <span style={{ fontSize: '13px', color: 'var(--text-secondary)' }}>没有账号？</span>
+                  <a href="#/register" className="rh-auth-text-link rh-auth-text-link--strong">
+                    注册账号
+                  </a>
+                </div>
+              ) : null}
+            </div>
+          </form>
+      </window.AuthCard>
+    </window.AuthLayout>
+  );
+}
+
+window.LoginPage = LoginPage;

package/public/pages/RegisterPage.jsx

@@ -0,0 +1,137 @@
+function RegisterPage() {
+  const state = window.useAppState();
+  const dispatch = window.useAppDispatch();
+  const { navigate } = window.useRouter();
+  const { request } = window.useApi();
+  const { Loader } = lucide;
+
+  const [form, setForm] = React.useState({ username: '', displayName: '', email: '' });
+  const [errors, setErrors] = React.useState({});
+  const [loading, setLoading] = React.useState(false);
+
+  const config = state?.config;
+
+  const validate = () => {
+    const errs = {};
+    if (!/^[a-zA-Z0-9_]{3,20}$/.test(form.username) || /^\d+$/.test(form.username))
+      errs.username = '用户名3-20位，仅字母数字下划线，不能纯数字';
+    if (!form.displayName || form.displayName.length > 30)
+      errs.displayName = '显示名称不能为空（最多30字符）';
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email))
+      errs.email = '请输入有效的邮箱地址';
+    return errs;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const errs = validate();
+    if (Object.keys(errs).length > 0) { setErrors(errs); return; }
+    setLoading(true);
+    try {
+      const { ok, data } = await request('/api/auth/register', {
+        method: 'POST',
+        body: JSON.stringify({ username: form.username, displayName: form.displayName, email: form.email }),
+      });
+      if (ok) {
+        dispatch({ type: 'ADD_TOAST', toastType: 'success', message: '注册成功！初始密码已发送至邮箱' });
+        if (data.emailPreview) dispatch({ type: 'SET_EMAIL_PREVIEW', emailPreview: data.emailPreview });
+        setTimeout(() => navigate('#/login'), 3000);
+      } else {
+        dispatch({ type: 'ADD_TOAST', toastType: 'error', message: data.error || '注册失败' });
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const inputStyle = (field) => ({
+    width: '100%', padding: '9px 12px',
+    border: `1px solid ${errors[field] ? 'var(--danger)' : 'var(--border)'}`,
+    borderRadius: '8px', background: 'var(--bg-secondary)',
+    color: 'var(--text-primary)', fontSize: '14px',
+    outline: 'none', boxSizing: 'border-box',
+  });
+
+  if (config && config.enableRegister === false) {
+    return (
+      <window.AuthLayout>
+        <div style={{ width: '400px', maxWidth: '100%' }}>
+          <div style={{
+            background: 'color-mix(in srgb, var(--surface-elevated) 94%, var(--surface-muted))', border: '1px solid color-mix(in srgb, var(--outline-strong) 84%, var(--border))',
+            borderRadius: '24px', padding: '36px', textAlign: 'center',
+            boxShadow: 'var(--shadow-modal)',
+          }}>
+            <p style={{ fontSize: '15px', color: 'var(--text-secondary)', marginBottom: '20px' }}>注册功能暂未开放</p>
+            <button onClick={() => navigate('#/login')} style={{
+              padding: '9px 24px', background: 'var(--brand)', color: '#fff',
+              border: 'none', borderRadius: '8px', cursor: 'pointer', fontSize: '14px',
+            }}>去登录</button>
+          </div>
+        </div>
+      </window.AuthLayout>
+    );
+  }
+
+  return (
+    <window.AuthLayout>
+      <div style={{ width: '400px', maxWidth: '100%' }}>
+        <div style={{
+          background: 'color-mix(in srgb, var(--surface-elevated) 94%, var(--surface-muted))', border: '1px solid color-mix(in srgb, var(--outline-strong) 84%, var(--border))',
+          borderRadius: '24px', padding: '36px', boxShadow: 'var(--shadow-modal)',
+        }}>
+          <div style={{ textAlign: 'center', marginBottom: '28px' }}>
+            <div style={{ fontSize: '11px', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--brand)', marginBottom: '10px' }}>
+              邀请与注册
+            </div>
+            <div style={{
+              width: '48px', height: '48px', borderRadius: '12px',
+              background: 'var(--brand)', color: '#fff',
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              fontSize: '20px', fontWeight: 700, margin: '0 auto 16px',
+            }}>R</div>
+            <h1 style={{ fontSize: '20px', fontWeight: 700, color: 'var(--text-primary)', margin: 0 }}>注册账号</h1>
+          </div>
+          <form onSubmit={handleSubmit}>
+            {[
+              { key: 'username', label: '用户名', type: 'text', placeholder: '仅字母数字下划线，3-20位', autoComplete: 'username' },
+              { key: 'displayName', label: '显示名称', type: 'text', placeholder: '显示给其他用户的名称', autoComplete: 'name' },
+              { key: 'email', label: '邮箱', type: 'email', placeholder: 'your@example.com', autoComplete: 'email' },
+            ].map(({ key, label, type, placeholder, autoComplete }) => (
+              <div key={key} style={{ marginBottom: '14px' }}>
+                <label style={{ fontSize: '13px', fontWeight: 500, color: 'var(--text-primary)', display: 'block', marginBottom: '6px' }}>{label}</label>
+                <input
+                  className="rh-auth-input"
+                  type={type} name={key} value={form[key]} placeholder={placeholder}
+                  autoComplete={autoComplete}
+                  onChange={(e) => setForm(f => ({ ...f, [key]: e.target.value }))}
+                  onBlur={() => { const errs = validate(); setErrors(prev => ({ ...prev, [key]: errs[key] })); }}
+                  style={inputStyle(key)} disabled={loading}
+                />
+                {errors[key] && <div style={{ fontSize: '12px', color: 'var(--danger)', marginTop: '4px' }}>{errors[key]}</div>}
+              </div>
+            ))}
+            <button type="submit" disabled={loading} style={{
+              width: '100%', padding: '10px',
+              background: 'var(--brand)', color: '#fff', border: 'none',
+              borderRadius: '8px', cursor: loading ? 'not-allowed' : 'pointer',
+              fontSize: '14px', fontWeight: 600, marginTop: '8px', marginBottom: '16px',
+              opacity: loading ? 0.8 : 1,
+              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px',
+            }}>
+              {loading && <Loader size={15} />}
+              注册
+            </button>
+            <div style={{ textAlign: 'center' }}>
+              <button type="button" onClick={() => navigate('#/login')}
+                style={{ background: 'none', border: 'none', color: 'var(--text-secondary)', cursor: 'pointer', fontSize: '13px' }}>
+                已有账号？<span style={{ color: 'var(--brand)' }}>去登录</span>
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </window.AuthLayout>
+  );
+}
+
+window.RegisterPage = RegisterPage;

package/public/pages/ResetPasswordPage.jsx

@@ -0,0 +1,169 @@
+function ResetPasswordPage() {
+  const dispatch = window.useAppDispatch();
+  const { route, navigate } = window.useRouter();
+  const { request } = window.useApi();
+  const { Loader, Eye, EyeOff } = lucide;
+
+  const token = route.params.token || '';
+  const [form, setForm] = React.useState({ password: '', confirmPassword: '' });
+  const [resetIdentifier] = React.useState(() => window.sessionStorage?.getItem('rh_reset_identifier') || '');
+  const [errors, setErrors] = React.useState({});
+  const [loading, setLoading] = React.useState(false);
+  const [tokenInvalid, setTokenInvalid] = React.useState(false);
+  const [showPw, setShowPw] = React.useState(false);
+  const [showCPw, setShowCPw] = React.useState(false);
+
+  const validate = () => {
+    const errs = {};
+    if (form.password.length < 8 || !/[a-zA-Z]/.test(form.password) || !/[0-9]/.test(form.password))
+      errs.password = '密码至少8位，需包含字母和数字';
+    if (form.password !== form.confirmPassword)
+      errs.confirmPassword = '两次密码不一致';
+    return errs;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const errs = validate();
+    if (Object.keys(errs).length > 0) { setErrors(errs); return; }
+    setLoading(true);
+    try {
+      const { ok, data } = await request('/api/auth/reset-password', {
+        method: 'POST',
+        body: JSON.stringify({
+          token,
+          newPassword: form.password,
+          confirmPassword: form.confirmPassword,
+        }),
+      });
+      if (ok) {
+        window.sessionStorage?.removeItem('rh_reset_identifier');
+        dispatch({ type: 'ADD_TOAST', toastType: 'success', message: '密码已重置，请登录' });
+        navigate('#/login');
+      } else {
+        if (['RESET_TOKEN_INVALID', 'RESET_TOKEN_EXPIRED', 'RESET_TOKEN_USED'].includes(data.code)) {
+          setTokenInvalid(true);
+        } else if (data.code === 'VALIDATION_ERROR' && data.fields) {
+          setErrors(data.fields);
+        }
+        dispatch({ type: 'ADD_TOAST', toastType: 'error', message: data.error || '重置失败' });
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const inputStyle = (field) => ({
+    width: '100%', padding: '9px 40px 9px 12px',
+    border: `1px solid ${errors[field] ? 'var(--danger)' : 'var(--border)'}`,
+    borderRadius: '8px', background: 'var(--bg-primary)',
+    color: 'var(--text-primary)', fontSize: '14px',
+    outline: 'none', boxSizing: 'border-box',
+  });
+
+  if (!token || tokenInvalid) {
+    return (
+      <window.AuthLayout>
+        <div style={{ width: '400px', maxWidth: '100%' }}>
+          <div style={{
+            background: 'color-mix(in srgb, var(--surface-elevated) 94%, var(--surface-muted))', border: '1px solid color-mix(in srgb, var(--outline-strong) 84%, var(--border))',
+            borderRadius: '24px', padding: '36px', textAlign: 'center',
+            boxShadow: 'var(--shadow-modal)',
+          }}>
+            <p style={{ fontSize: '15px', color: 'var(--danger)', marginBottom: '8px', fontWeight: 500 }}>链接已失效或过期</p>
+            <p style={{ fontSize: '14px', color: 'var(--text-secondary)', marginBottom: '20px' }}>请重新发送密码重置链接</p>
+            <button onClick={() => navigate('#/forgot-password')} style={{
+              padding: '9px 24px', background: 'var(--brand)', color: '#fff',
+              border: 'none', borderRadius: '8px', cursor: 'pointer', fontSize: '14px',
+            }}>重新发送重置链接</button>
+          </div>
+        </div>
+      </window.AuthLayout>
+    );
+  }
+
+  return (
+    <window.AuthLayout>
+      <div style={{ width: '400px', maxWidth: '100%' }}>
+        <div style={{
+          background: 'color-mix(in srgb, var(--surface-elevated) 94%, var(--surface-muted))', border: '1px solid color-mix(in srgb, var(--outline-strong) 84%, var(--border))',
+          borderRadius: '24px', padding: '36px', boxShadow: 'var(--shadow-modal)',
+        }}>
+          <div style={{ fontSize: '11px', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--brand)', marginBottom: '10px' }}>
+            重置密码
+          </div>
+          <h1 style={{ fontSize: '20px', fontWeight: 700, color: 'var(--text-primary)', margin: '0 0 24px' }}>设置新密码</h1>
+          <form onSubmit={handleSubmit}>
+            <input
+              type="text"
+              name="username"
+              autoComplete="username"
+              value={resetIdentifier}
+              readOnly
+              tabIndex={-1}
+              style={{
+                position: 'absolute',
+                opacity: 0,
+                pointerEvents: 'none',
+                width: '1px',
+                height: '1px',
+              }}
+            />
+            <div style={{ marginBottom: '14px' }}>
+              <label style={{ fontSize: '13px', fontWeight: 500, color: 'var(--text-primary)', display: 'block', marginBottom: '6px' }}>新密码</label>
+              <div style={{ position: 'relative' }}>
+                <input
+                  className="rh-auth-input"
+                  type={showPw ? 'text' : 'password'} name="new-password" value={form.password}
+                  autoComplete="new-password"
+                  placeholder="至少8位，含字母和数字"
+                  onChange={(e) => setForm(f => ({ ...f, password: e.target.value }))}
+                  onBlur={() => { const errs = validate(); setErrors(prev => ({ ...prev, password: errs.password })); }}
+                  style={inputStyle('password')} disabled={loading}
+                />
+                <button type="button" onClick={() => setShowPw(v => !v)}
+                  style={{ position: 'absolute', right: '10px', top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-secondary)' }}>
+                  {showPw ? <EyeOff size={16} /> : <Eye size={16} />}
+                </button>
+              </div>
+              <window.PasswordStrength password={form.password} />
+              {errors.password && <div style={{ fontSize: '12px', color: 'var(--danger)', marginTop: '4px' }}>{errors.password}</div>}
+            </div>
+            <div style={{ marginBottom: '24px' }}>
+              <label style={{ fontSize: '13px', fontWeight: 500, color: 'var(--text-primary)', display: 'block', marginBottom: '6px' }}>确认新密码</label>
+              <div style={{ position: 'relative' }}>
+                <input
+                  className="rh-auth-input"
+                  type={showCPw ? 'text' : 'password'} name="confirm-password" value={form.confirmPassword}
+                  autoComplete="new-password"
+                  placeholder="再次输入新密码"
+                  onChange={(e) => setForm(f => ({ ...f, confirmPassword: e.target.value }))}
+                  onBlur={() => { const errs = validate(); setErrors(prev => ({ ...prev, confirmPassword: errs.confirmPassword })); }}
+                  style={inputStyle('confirmPassword')} disabled={loading}
+                />
+                <button type="button" onClick={() => setShowCPw(v => !v)}
+                  style={{ position: 'absolute', right: '10px', top: '50%', transform: 'translateY(-50%)', background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-secondary)' }}>
+                  {showCPw ? <EyeOff size={16} /> : <Eye size={16} />}
+                </button>
+              </div>
+              {errors.confirmPassword && <div style={{ fontSize: '12px', color: 'var(--danger)', marginTop: '4px' }}>{errors.confirmPassword}</div>}
+            </div>
+            <button type="submit" disabled={loading} style={{
+              width: '100%', padding: '10px',
+              background: 'var(--brand)', color: '#fff', border: 'none',
+              borderRadius: '8px', cursor: loading ? 'not-allowed' : 'pointer',
+              fontSize: '14px', fontWeight: 600,
+              opacity: loading ? 0.8 : 1,
+              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px',
+            }}>
+              {loading && <Loader size={15} />}
+              重置密码
+            </button>
+          </form>
+        </div>
+      </div>
+    </window.AuthLayout>
+  );
+}
+
+window.ResetPasswordPage = ResetPasswordPage;

package/public/pages/SetupPage.jsx

@@ -0,0 +1,157 @@
+function SetupPage() {
+  const dispatch = window.useAppDispatch();
+  const { navigate } = window.useRouter();
+  const { request } = window.useApi();
+  const { Loader } = lucide;
+
+  const [form, setForm] = React.useState({ username: '', displayName: '', email: '', password: '', confirmPassword: '' });
+  const [errors, setErrors] = React.useState({});
+  const [loading, setLoading] = React.useState(false);
+
+  const validate = () => {
+    const errs = {};
+    if (!/^[a-zA-Z0-9_]{3,20}$/.test(form.username) || /^\d+$/.test(form.username))
+      errs.username = '用户名3-20位，仅字母数字下划线，不能纯数字';
+    if (!form.displayName || form.displayName.length > 30)
+      errs.displayName = '显示名称不能为空（最多30字符）';
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email))
+      errs.email = '请输入有效的邮箱地址';
+    if (form.password.length < 8 || !/[a-zA-Z]/.test(form.password) || !/[0-9]/.test(form.password))
+      errs.password = '密码至少8位，需包含字母和数字';
+    if (form.password !== form.confirmPassword)
+      errs.confirmPassword = '两次密码不一致';
+    return errs;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const errs = validate();
+    if (Object.keys(errs).length > 0) { setErrors(errs); return; }
+    setLoading(true);
+    try {
+      const { ok, data } = await request('/api/auth/setup', {
+        method: 'POST',
+        body: JSON.stringify({
+          username: form.username,
+          displayName: form.displayName,
+          email: form.email,
+          password: form.password,
+          confirmPassword: form.confirmPassword,
+        }),
+      });
+      if (ok) {
+        dispatch({ type: 'ADD_TOAST', toastType: 'success', message: '初始化成功！请登录' });
+        window.location.hash = '#/login';
+        window.location.reload();
+      } else {
+        if (data.code === 'VALIDATION_ERROR' && data.fields) {
+          setErrors(data.fields);
+        }
+        dispatch({ type: 'ADD_TOAST', toastType: 'error', message: data.error || '初始化失败' });
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const inputStyle = (field) => ({
+    width: '100%', padding: '9px 12px',
+    border: `1px solid ${errors[field] ? 'var(--danger)' : 'var(--border)'}`,
+    borderRadius: '8px', background: 'var(--bg-secondary)',
+    color: 'var(--text-primary)', fontSize: '14px',
+    outline: 'none', boxSizing: 'border-box',
+  });
+
+  const labelStyle = { fontSize: '13px', fontWeight: 500, color: 'var(--text-primary)', display: 'block', marginBottom: '6px' };
+
+  return (
+    <window.AuthLayout>
+      <div style={{ width: '480px', maxWidth: '100%' }}>
+        <div style={{
+          background: 'color-mix(in srgb, var(--surface-elevated) 94%, var(--surface-muted))',
+          border: '1px solid color-mix(in srgb, var(--outline-strong) 84%, var(--border))',
+          borderRadius: '24px',
+          padding: '36px',
+          boxShadow: 'var(--shadow-modal)',
+        }}>
+          <div style={{ textAlign: 'center', marginBottom: '32px' }}>
+            <div style={{ fontSize: '11px', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--brand)', marginBottom: '10px' }}>
+              首次初始化
+            </div>
+            <div style={{
+              width: '56px', height: '56px', borderRadius: '14px',
+              background: 'var(--brand)', color: '#fff',
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              fontSize: '24px', fontWeight: 700,
+              margin: '0 auto 16px',
+            }}>R</div>
+            <h1 style={{ fontSize: '20px', fontWeight: 700, color: 'var(--text-primary)', margin: '0 0 8px' }}>
+              欢迎使用资源导航系统
+            </h1>
+            <p style={{ fontSize: '14px', color: 'var(--text-secondary)', margin: 0 }}>
+              请先完成初始化，创建管理员账号
+            </p>
+          </div>
+          <form onSubmit={handleSubmit}>
+            {[
+              { key: 'username', label: '管理员用户名', type: 'text', placeholder: '仅字母数字下划线，3-20位', autoComplete: 'username' },
+              { key: 'displayName', label: '管理员显示名称', type: 'text', placeholder: '显示给其他用户的名称', autoComplete: 'name' },
+              { key: 'email', label: '管理员邮箱', type: 'email', placeholder: 'admin@example.com', autoComplete: 'email' },
+            ].map(({ key, label, type, placeholder, autoComplete }) => (
+              <div key={key} style={{ marginBottom: '16px' }}>
+                <label style={labelStyle}>{label}</label>
+                <input
+                  className="rh-auth-input"
+                  type={type} name={key} value={form[key]} placeholder={placeholder}
+                  autoComplete={autoComplete}
+                  onChange={(e) => setForm(f => ({ ...f, [key]: e.target.value }))}
+                  onBlur={() => { const errs = validate(); setErrors(prev => ({ ...prev, [key]: errs[key] })); }}
+                  style={inputStyle(key)} disabled={loading}
+                />
+                {errors[key] && <div style={{ fontSize: '12px', color: 'var(--danger)', marginTop: '4px' }}>{errors[key]}</div>}
+              </div>
+            ))}
+            <div style={{ marginBottom: '16px' }}>
+              <label style={labelStyle}>管理员密码</label>
+              <input
+                className="rh-auth-input"
+                type="password" name="new-password" value={form.password} placeholder="至少8位，含字母和数字"
+                autoComplete="new-password"
+                onChange={(e) => setForm(f => ({ ...f, password: e.target.value }))}
+                onBlur={() => { const errs = validate(); setErrors(prev => ({ ...prev, password: errs.password })); }}
+                style={inputStyle('password')} disabled={loading}
+              />
+              <window.PasswordStrength password={form.password} />
+              {errors.password && <div style={{ fontSize: '12px', color: 'var(--danger)', marginTop: '4px' }}>{errors.password}</div>}
+            </div>
+            <div style={{ marginBottom: '24px' }}>
+              <label style={labelStyle}>确认密码</label>
+              <input
+                className="rh-auth-input"
+                type="password" name="confirm-password" value={form.confirmPassword} placeholder="再次输入密码"
+                autoComplete="new-password"
+                onChange={(e) => setForm(f => ({ ...f, confirmPassword: e.target.value }))}
+                onBlur={() => { const errs = validate(); setErrors(prev => ({ ...prev, confirmPassword: errs.confirmPassword })); }}
+                style={inputStyle('confirmPassword')} disabled={loading}
+              />
+              {errors.confirmPassword && <div style={{ fontSize: '12px', color: 'var(--danger)', marginTop: '4px' }}>{errors.confirmPassword}</div>}
+            </div>
+            <button type="submit" disabled={loading} style={{
+              width: '100%', padding: '10px',
+              background: 'var(--brand)', color: '#fff', border: 'none',
+              borderRadius: '8px', cursor: loading ? 'not-allowed' : 'pointer',
+              fontSize: '14px', fontWeight: 600,
+              opacity: loading ? 0.8 : 1,
+              display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px',
+            }}>
+              {loading && <Loader size={15} />}
+              完成初始化
+            </button>
+          </form>
+        </div>
+      </div>
+    </window.AuthLayout>
+  );
+}
+
+window.SetupPage = SetupPage;