chore: directory migration - gateway→server, web→client/electron

client/electron/src/components/SetupPage.tsx

@@ -0,0 +1,140 @@
+import { useEffect, useRef, useState } from 'react';
+import { useAuthStore } from '../stores/authStore';
+import * as api from '../api/client';
+import { MailboxIcon, SpinnerIcon } from './icons';
+
+/** 首次初始化向导：系统无任何用户时展示，创建首个管理员 */
+export default function SetupPage({ onDone }: { onDone: () => void }) {
+  const bootstrap = useAuthStore(s => s.bootstrap);
+  const [username, setUsername] = useState('admin');
+  const [displayName, setDisplayName] = useState('');
+  const [password, setPassword] = useState('');
+  const [confirm, setConfirm] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const nameRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    nameRef.current?.focus();
+  }, []);
+
+  const mismatch = confirm !== '' && password !== confirm;
+  const ok =
+    username.trim().length >= 2 &&
+    password.length >= 8 &&
+    !mismatch &&
+    !busy;
+
+  const submit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!ok) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await api.setupAdmin({
+        username: username.trim().toLowerCase(),
+        password,
+        display_name: displayName.trim()
+      });
+      // 初始化后直接登录（后端已经种了 cookie），拉取用户态
+      await bootstrap();
+      onDone();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+      setBusy(false);
+    }
+  };
+
+  // 卡片高约 371px，比横屏手机（或软键盘弹出后）的可视高度还高。
+  //
+  // 居中用卡片自己的 `my-auto` 而**不是**容器的 `items-center`：后者在内容超高时
+  // 会让卡片上下同时溢出，而溢出到顶部那段滚不到（scrollTop 最小是 0）——
+  // 实测 568x280 下「登录」按钮完全在视口外，光加 overflow-y-auto 也够不着。
+  // auto margin 在空间不足时自动退化为 0，于是矮屏变成正常的顶对齐可滚布局。
+  return (
+    <div className="h-full overflow-y-auto flex justify-center bg-slate-100">
+      <div className="w-[420px] max-w-[92vw] shrink-0 my-auto bg-white rounded-xl shadow-sm border border-gray-200 p-6 sm:p-8">
+        <div className="flex flex-col items-center mb-6">
+          <div className="w-12 h-12 rounded-xl bg-blue-50 text-blue-600 flex items-center justify-center">
+            <MailboxIcon className="w-6 h-6" />
+          </div>
+          <h1 className="mt-3 text-base font-semibold text-gray-900">初始化系统</h1>
+          <p className="mt-1 text-xs text-gray-500 text-center">
+            这是系统首次启动。创建一个管理员账号以开始使用 AgentMail。
+          </p>
+        </div>
+
+        <form onSubmit={submit} className="space-y-3">
+          <div>
+            <label className="block text-[11px] font-medium text-gray-500 mb-1">
+              管理员用户名 <span className="text-red-400">（即三维地址的 name 位）</span>
+            </label>
+            <input
+              ref={nameRef}
+              value={username}
+              onChange={e => setUsername(e.target.value)}
+              placeholder="admin"
+              spellCheck={false}
+              className="w-full text-sm font-mono border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-400"
+            />
+            <p className="mt-1 text-[10px] text-gray-400">
+              小写字母数字 . _ -，2-64 位；后续可以 `admin@.new` 形式作为收件人
+            </p>
+          </div>
+
+          <div>
+            <label className="block text-[11px] font-medium text-gray-500 mb-1">显示名</label>
+            <input
+              value={displayName}
+              onChange={e => setDisplayName(e.target.value)}
+              placeholder="系统管理员"
+              className="w-full text-sm border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-400"
+            />
+          </div>
+
+          <div>
+            <label className="block text-[11px] font-medium text-gray-500 mb-1">
+              密码 <span className="text-red-400">（至少 8 位）</span>
+            </label>
+            <input
+              type="password"
+              value={password}
+              onChange={e => setPassword(e.target.value)}
+              autoComplete="new-password"
+              className="w-full text-sm border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-100 focus:border-blue-400"
+            />
+          </div>
+
+          <div>
+            <label className="block text-[11px] font-medium text-gray-500 mb-1">确认密码</label>
+            <input
+              type="password"
+              value={confirm}
+              onChange={e => setConfirm(e.target.value)}
+              autoComplete="new-password"
+              className={`w-full text-sm border rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-100 ${
+                mismatch ? 'border-red-300' : 'border-gray-300 focus:border-blue-400'
+              }`}
+            />
+            {mismatch && <p className="mt-1 text-[10px] text-red-500">两次输入的密码不一致</p>}
+          </div>
+
+          {error && (
+            <p className="text-xs text-red-600 bg-red-50 border border-red-100 rounded-md px-2.5 py-1.5">
+              {error}
+            </p>
+          )}
+
+          <button
+            type="submit"
+            disabled={!ok}
+            className="w-full inline-flex items-center justify-center gap-2 py-2 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+          >
+            {busy && <SpinnerIcon className="w-3.5 h-3.5" />}
+            {busy ? '初始化中' : '创建管理员并进入'}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}