账号与团队：SQLite 云端空间（个人 / 团队共享 + 自动同步）

- 服务端（Gin + modernc.org/sqlite，data/opsxapi.db WAL）：
  - users/tokens/teams/team_members/workspaces 表；注册登录（加盐哈希 + Bearer 令牌）
  - /api：auth register/login/logout、me（用户+团队+空间）、teams CRUD/邀请成员、workspaces 读写（20MB 上限，成员鉴权）
- 前端：
  - account.ts 客户端 + store 账号态：登录/注册/登出/团队/空间切换
  - 顶栏账号区：未登录「登录」按钮；登录后用户胶囊（头像+空间名+已同步/同步中/失败）+ 空间切换菜单 + ⋯（立即同步/团队管理/退出）
  - 空间模型：本地（localStorage）与云端（SQLite）隔离，切云端空空间自动播种本地数据；云端改动 1.5s 去抖自动同步；切回本地恢复快照
  - 登录/注册弹窗 + 团队管理弹窗（建团队、邮箱邀请）；vite 代理 /api；docs 新增「账号与团队」页
- 验证：curl E2E（注册/冲突 409/错误密码 401/团队共享写/越权 401）+ 浏览器全链路（注册→播种上云 17KB→云端编辑自动同步→本地快照隔离）

packages/ui/src/components/TopBar.tsx

@@ -3,7 +3,7 @@
  */
 import { useEffect, useState } from "react";
 import { useWorkspace } from "../workspaceStore";
-import { ContextMenu, type MenuItem } from "./common";
+import { ContextMenu, cx, type MenuItem } from "./common";
 import { EnvBadge } from "./EnvBadge";
 import { Icon, type IconName } from "./icons";
 import { Logo } from "./Logo";
@@ -31,6 +31,11 @@ export function TopBar() {
   const [newMenu, setNewMenu] = useState<{ x: number; y: number } | null>(null);
   const [exportMenu, setExportMenu] = useState<{ x: number; y: number } | null>(null);
   const [moreMenu, setMoreMenu] = useState<{ x: number; y: number } | null>(null);
+  const [spaceMenu, setSpaceMenu] = useState<{ x: number; y: number } | null>(null);
+  const [accountMenu, setAccountMenu] = useState<{ x: number; y: number } | null>(null);
+  const account = useWorkspace((s) => s.account);
+  const switchSpace = useWorkspace((s) => s.switchSpace);
+  const syncNow = useWorkspace((s) => s.syncNow);
 
   useEffect(() => {
     document.title = "OpsxAPI · 接口工作台";
@@ -89,6 +94,66 @@ export function TopBar() {
     },
   ];
 
+  const activeSpace =
+    account.activeSpaceId === null ? null : account.spaces.find((sp) => sp.id === account.activeSpaceId) ?? null;
+  const spaceName = activeSpace
+    ? `${activeSpace.teamId !== null ? "团队 · " : ""}${activeSpace.name}`
+    : "本地空间";
+
+  const spaceItems: MenuItem[] = [
+    {
+      label: (
+        <span className="flex min-w-0 items-center gap-2">
+          <Icon name="shield-check" size={13} className="ops-faint" />
+          <span className="truncate">本地空间</span>
+          {account.activeSpaceId === null && <span className="ml-auto pl-3 text-[10px] ops-success">● 当前</span>}
+        </span>
+      ),
+      onClick: () => void switchSpace(null),
+    },
+    ...account.spaces.map((sp) => ({
+      label: (
+        <span className="flex min-w-0 items-center gap-2">
+          <Icon name={sp.teamId !== null ? "library" : "shield-check"} size={13} className="ops-faint" />
+          <span className="truncate">{sp.teamId !== null ? `团队 · ${sp.name}` : sp.name}</span>
+          {sp.id === account.activeSpaceId ? (
+            <span className="ml-auto pl-3 text-[10px] ops-success">● 当前</span>
+          ) : (
+            <span className="ops-faint ml-auto pl-3 text-[10px]">
+              {new Date(sp.updatedAt * 1000).toLocaleDateString("zh-CN")}
+            </span>
+          )}
+        </span>
+      ),
+      onClick: () => void switchSpace(sp.id),
+    })),
+  ];
+
+  const accountItems: MenuItem[] = account.user
+    ? [
+        ...(account.activeSpaceId !== null
+          ? [
+              {
+                label: account.syncing ? "同步中…" : account.lastSyncAt ? `已同步 ${new Date(account.lastSyncAt).toLocaleTimeString("zh-CN")}` : "立即同步到云端",
+                icon: <Icon name="arrow-left-right" size={14} />,
+                onClick: () => void syncNow(),
+              },
+            ]
+          : []),
+        { type: "sep" as const },
+        {
+          label: "团队管理…",
+          icon: <Icon name="library" size={14} />,
+          onClick: () => setDialog({ type: "team" }),
+        },
+        {
+          label: "退出登录",
+          icon: <Icon name="circle-x" size={14} />,
+          onClick: () => void useWorkspace.getState().authLogout(),
+        },
+      ]
+    : [];
+
   const moreItems: MenuItem[] = [
     {
       label: "设置…",
@@ -224,6 +289,46 @@ export function TopBar() {
 
         <div className="mx-1 h-5 w-px" style={{ background: "var(--border)" }} />
 
+        {account.user ? (
+          <>
+            <button
+              className="ops-envswitch"
+              title={`当前空间：${spaceName}\n点击切换本地 / 个人 / 团队空间`}
+              onClick={(e) => {
+                const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+                setSpaceMenu((m) => (m ? null : { x: rect.left, y: rect.bottom + 4 }));
+              }}
+            >
+              <span className="ops-user-avatar">{account.user.name.slice(0, 1).toUpperCase()}</span>
+              <span className="max-w-36 truncate">{spaceName}</span>
+              {account.syncing ? (
+                <span className="ops-faint text-[10px]">同步中…</span>
+              ) : account.activeSpaceId !== null ? (
+                <span className={cx("text-[10px]", account.syncError ? "ops-danger" : "ops-success")} title={account.syncError ?? undefined}>
+                  {account.syncError ? "同步失败" : "已同步"}
+                </span>
+              ) : null}
+              <Icon name="chevron-down" size={13} className="ops-faint" />
+            </button>
+            <button
+              className="ops-btn ops-btn-ghost !px-2"
+              title={`${account.user.name}（${account.user.email}）`}
+              onClick={(e) => {
+                const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+                setAccountMenu({ x: rect.right, y: rect.bottom + 4 });
+              }}
+            >
+              <Icon name="ellipsis" size={14} />
+            </button>
+          </>
+        ) : (
+          <button className="ops-btn ops-btn-secondary" onClick={() => setDialog({ type: "auth" })} title="登录 / 注册，开启云端空间">
+            <Icon name="shield-check" size={13} /> 登录
+          </button>
+        )}
+
+        <div className="mx-1 h-5 w-px" style={{ background: "var(--border)" }} />
+
         <button
           className="ops-btn ops-btn-ghost"
           onClick={() => setTheme(settings.theme === "dark" ? "light" : "dark")}
@@ -259,6 +364,14 @@ export function TopBar() {
         </button>
       </div>
 
+      <ContextMenu
+        menu={spaceMenu ? { x: spaceMenu.x, y: spaceMenu.y, items: spaceItems } : null}
+        onClose={() => setSpaceMenu(null)}
+      />
+      <ContextMenu
+        menu={accountMenu ? { x: accountMenu.x, y: accountMenu.y, items: accountItems } : null}
+        onClose={() => setAccountMenu(null)}
+      />
       <ContextMenu
         menu={moreMenu ? { x: moreMenu.x, y: moreMenu.y, items: moreItems } : null}
         onClose={() => setMoreMenu(null)}

packages/ui/src/components/dialogs/AccountDialogs.tsx

@@ -0,0 +1,220 @@
+/**
+ * 账号弹窗：登录 / 注册；团队管理：建团队、邀请成员。
+ */
+import { useState } from "react";
+import { useWorkspace } from "../../workspaceStore";
+import { Modal, cx } from "../common";
+import { Icon } from "../icons";
+
+/* ---------------- 登录 / 注册 ---------------- */
+
+export function AuthDialog() {
+  const authLogin = useWorkspace((s) => s.authLogin);
+  const authRegister = useWorkspace((s) => s.authRegister);
+  const setDialog = useWorkspace((s) => s.setDialog);
+
+  const [mode, setMode] = useState<"login" | "register">("login");
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  const submit = async () => {
+    setBusy(true);
+    setError("");
+    try {
+      if (mode === "login") await authLogin(email, password);
+      else await authRegister(name, email, password);
+      setDialog(null);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Modal
+      title={mode === "login" ? "登录" : "注册账号"}
+      onClose={() => setDialog(null)}
+      width="400px"
+      footer={
+        <div className="flex w-full items-center justify-between">
+          <button
+            className="ops-btn ops-btn-ghost !px-2 text-[12px]"
+            onClick={() => {
+              setMode(mode === "login" ? "register" : "login");
+              setError("");
+            }}
+          >
+            {mode === "login" ? "没有账号？注册" : "已有账号？登录"}
+          </button>
+          <button className="ops-btn ops-btn-primary" disabled={busy} onClick={submit}>
+            {busy ? "请稍候…" : mode === "login" ? "登录" : "注册并登录"}
+          </button>
+        </div>
+      }
+    >
+      <div className="space-y-3">
+        <div className="ops-hint">
+          <Icon name="info" size={14} />
+          <span>账号数据保存在本机服务（SQLite），用于个人 / 团队云端空间同步</span>
+        </div>
+        {mode === "register" && (
+          <div>
+            <label className="ops-label">昵称</label>
+            <input
+              className="ops-input"
+              placeholder="怎么称呼你"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+          </div>
+        )}
+        <div>
+          <label className="ops-label">邮箱</label>
+          <input
+            className="ops-input"
+            type="email"
+            placeholder="you@example.com"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && submit()}
+            autoFocus
+          />
+        </div>
+        <div>
+          <label className="ops-label">密码</label>
+          <input
+            className="ops-input"
+            type="password"
+            placeholder="至少 6 位"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && submit()}
+          />
+        </div>
+        {error && <div className="ops-danger text-[12px]">{error}</div>}
+      </div>
+    </Modal>
+  );
+}
+
+/* ---------------- 团队管理 ---------------- */
+
+export function TeamDialog() {
+  const account = useWorkspace((s) => s.account);
+  const createTeam = useWorkspace((s) => s.createTeam);
+  const addTeamMember = useWorkspace((s) => s.addTeamMember);
+  const setDialog = useWorkspace((s) => s.setDialog);
+
+  const [teamName, setTeamName] = useState("");
+  const [inviteEmail, setInviteEmail] = useState<Record<number, string>>({});
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const [okMsg, setOkMsg] = useState("");
+
+  const doCreate = async () => {
+    if (!teamName.trim()) return;
+    setBusy(true);
+    setError("");
+    try {
+      await createTeam(teamName);
+      setTeamName("");
+      setOkMsg("团队已创建，左侧空间列表可切换到团队空间");
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const doInvite = async (teamId: number) => {
+    const email = (inviteEmail[teamId] ?? "").trim();
+    if (!email) return;
+    setBusy(true);
+    setError("");
+    try {
+      await addTeamMember(teamId, email);
+      setInviteEmail((m) => ({ ...m, [teamId]: "" }));
+      setOkMsg(`已添加成员 ${email}`);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Modal
+      title="团队管理"
+      onClose={() => setDialog(null)}
+      width="560px"
+      footer={
+        <div className="flex w-full items-center justify-between">
+          <span className="ops-faint text-[11px]">团队成员共享同一份云端空间，切换即协同</span>
+          <button className="ops-btn ops-btn-primary" onClick={() => setDialog(null)}>
+            完成
+          </button>
+        </div>
+      }
+    >
+      <div className="space-y-4">
+        <div>
+          <label className="ops-label">新建团队</label>
+          <div className="flex gap-2">
+            <input
+              className="ops-input flex-1"
+              placeholder="团队名称，如：支付网关组"
+              value={teamName}
+              onChange={(e) => setTeamName(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && doCreate()}
+            />
+            <button className="ops-btn ops-btn-secondary" disabled={busy} onClick={doCreate}>
+              <Icon name="plus" size={13} /> 创建
+            </button>
+          </div>
+        </div>
+
+        {account.teams.length === 0 ? (
+          <div className="ops-faint py-4 text-center text-xs">还没有团队，创建一个即可获得团队共享空间</div>
+        ) : (
+          <div className="space-y-2">
+            {account.teams.map((t) => (
+              <div key={t.id} className="rounded-xl px-3 py-2.5" style={{ border: "1px solid var(--border)" }}>
+                <div className="flex items-center gap-2">
+                  <span className="grid h-6 w-6 place-items-center rounded-md" style={{ background: "var(--panel-2)" }}>
+                    <Icon name="library" size={13} />
+                  </span>
+                  <span className="text-[13px] font-medium">{t.name}</span>
+                  <span className={cx("ops-chip")} style={{ padding: "1px 8px", fontSize: 10 }}>
+                    {t.role === "owner" ? "创建者" : "成员"}
+                  </span>
+                  <span className="ops-faint ml-auto text-[11px]">创建者 {t.owner}</span>
+                </div>
+                {t.role === "owner" && (
+                  <div className="mt-2 flex gap-2">
+                    <input
+                      className="ops-input ops-input-sm flex-1"
+                      placeholder="成员邮箱（需已注册）"
+                      value={inviteEmail[t.id] ?? ""}
+                      onChange={(e) => setInviteEmail((m) => ({ ...m, [t.id]: e.target.value }))}
+                      onKeyDown={(e) => e.key === "Enter" && doInvite(t.id)}
+                    />
+                    <button className="ops-btn ops-btn-secondary !py-1 text-[12px]" disabled={busy} onClick={() => doInvite(t.id)}>
+                      添加成员
+                    </button>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {error && <div className="ops-danger text-[12px]">{error}</div>}
+        {okMsg && <div className="ops-success text-[12px]">{okMsg}</div>}
+      </div>
+    </Modal>
+  );
+}