feat(web): 首页换成和工作区同一套外壳，补上账号设置页

首页原来是居中窄栏，点进工作区又变全屏，进出像换了个网站。现在把首页也做成
全宽 + 左侧栏（SideRail 抽出来给首页和账号页共用），工作区卡片改成网格，
新建工作区是网格里的虚线卡片——宽度不再跳。

账号页 /account：基本信息（头像首字母、昵称、只读手机号、加入时间）、
登录密码（设置/修改 + 确认输入）、退出登录。工作区侧栏底部的用户块点进去就是它。

e2e account.mjs 14 项全绿，其中一条断言进工作区后侧栏宽度和首页差值 < 1px。

web/src/pages/Account.tsx

@@ -0,0 +1,244 @@
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "../App";
+import { SideRail } from "../components/SideRail";
+import { Button, Field, InlineAlert } from "../components/ui";
+import { ApiError, api } from "../lib/client";
+import type { User } from "../lib/types";
+
+/**
+ * 账号设置：昵称、登录密码、退出登录。
+ *
+ * 密码是**可选**的第二条登录路径：没设过的人一直走验证码，
+ * 界面上的文案要能让人看懂"现在设的是第一道密码"还是"在改已有的密码"。
+ */
+/** 小节标题：一行标题 + 一句"这是干嘛的"，比光秃秃的 h2 省解释。 */
+function SectionLabel({ hint, children }: { hint?: string; children: React.ReactNode }) {
+  return (
+    <div>
+      <h2 className="text-sm font-medium text-ink-800">{children}</h2>
+      {hint ? <p className="mt-0.5 text-2xs text-ink-400">{hint}</p> : null}
+    </div>
+  );
+}
+
+export function AccountPage() {
+  const { user, loading, reload, signOut } = useAuth();
+  const navigate = useNavigate();
+
+  const [nickname, setNickname] = useState("");
+  const [profileBusy, setProfileBusy] = useState(false);
+  const [profileMsg, setProfileMsg] = useState<string | null>(null);
+  const [profileError, setProfileError] = useState<string | null>(null);
+
+  const [oldPassword, setOldPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [pwdBusy, setPwdBusy] = useState(false);
+  const [pwdMsg, setPwdMsg] = useState<string | null>(null);
+  const [pwdError, setPwdError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!loading && !user) navigate("/login", { replace: true });
+  }, [loading, user, navigate]);
+
+  useEffect(() => {
+    if (user?.nickname) setNickname(user.nickname);
+  }, [user?.nickname]);
+
+  const hasPassword = Boolean(user?.has_password);
+
+  async function saveProfile(event: React.FormEvent) {
+    event.preventDefault();
+    setProfileBusy(true);
+    setProfileMsg(null);
+    setProfileError(null);
+    try {
+      await api.patch<User>("/auth/me", { nickname: nickname.trim() });
+      await reload();
+      setProfileMsg("昵称已更新");
+    } catch (err) {
+      setProfileError(err instanceof ApiError ? err.message : "保存失败");
+    } finally {
+      setProfileBusy(false);
+    }
+  }
+
+  async function savePassword(event: React.FormEvent) {
+    event.preventDefault();
+    setPwdMsg(null);
+    setPwdError(null);
+    if (newPassword !== confirm) {
+      setPwdError("两次输入的新密码不一样");
+      return;
+    }
+    setPwdBusy(true);
+    try {
+      await api.post("/auth/password", {
+        password: newPassword,
+        ...(hasPassword ? { old_password: oldPassword } : {}),
+      });
+      await reload();
+      setOldPassword("");
+      setNewPassword("");
+      setConfirm("");
+      setPwdMsg(hasPassword ? "密码已修改，下次可用新密码登录" : "密码已设置，之后可以用密码登录");
+    } catch (err) {
+      setPwdError(err instanceof ApiError ? err.message : "保存失败");
+    } finally {
+      setPwdBusy(false);
+    }
+  }
+
+  return (
+    <div className="flex min-h-full flex-col bg-paper-100 lg:flex-row">
+      <SideRail />
+
+      <main className="min-w-0 flex-1">
+        <div className="w-full px-5 py-6 lg:px-8 lg:py-8 xl:px-12 2xl:px-16">
+          <div className="mb-7">
+            <h1 className="font-display text-2xl font-semibold">账号设置</h1>
+            <p className="mt-2 text-sm text-ink-500">
+              这里改的是你自己：昵称、登录密码、退出登录。工作区里的成员与权限在各自的工作区里管。
+            </p>
+          </div>
+
+          <div className="grid items-start gap-4 lg:grid-cols-[minmax(0,1.15fr)_minmax(0,1fr)]">
+            <section className="card p-5">
+              <SectionLabel hint="别人在成员列表里看到的名字">基本信息</SectionLabel>
+
+              <form className="mt-4 space-y-4" onSubmit={saveProfile}>
+                <div className="flex items-center gap-3">
+                  <span className="grid h-12 w-12 place-items-center rounded-full bg-primary-900 text-base font-semibold text-paper-50">
+                    {(user?.nickname ?? "我").trim().slice(0, 1).toUpperCase()}
+                  </span>
+                  <div className="min-w-0">
+                    <div className="truncate text-sm font-medium text-ink-800">
+                      {user?.nickname ?? "—"}
+                    </div>
+                    <div className="text-2xs text-ink-400">
+                      {user?.created_at
+                        ? `加入于 ${new Date(user.created_at).toLocaleDateString("zh-CN")}`
+                        : "—"}
+                    </div>
+                  </div>
+                </div>
+
+                <Field label="昵称">
+                  <input
+                    className="input"
+                    value={nickname}
+                    maxLength={32}
+                    aria-label="昵称"
+                    onChange={(e) => setNickname(e.target.value)}
+                  />
+                </Field>
+
+                <Field label="手机号">
+                  <input
+                    className="input bg-paper-100 text-ink-500"
+                    value={user?.phone ?? ""}
+                    readOnly
+                    aria-label="手机号"
+                  />
+                </Field>
+                <p className="-mt-2 text-2xs leading-relaxed text-ink-400">
+                  手机号就是登录账号，暂不支持自助换号；换号等于换账号，需要单独处理。
+                </p>
+
+                {profileMsg && <InlineAlert tone="success">{profileMsg}</InlineAlert>}
+                {profileError && <InlineAlert>{profileError}</InlineAlert>}
+
+                <Button
+                  type="submit"
+                  variant="primary"
+                  size="sm"
+                  disabled={profileBusy || !nickname.trim() || nickname.trim() === user?.nickname}
+                >
+                  {profileBusy ? "保存中…" : "保存昵称"}
+                </Button>
+              </form>
+            </section>
+
+            <div className="space-y-4">
+              <section className="card p-5">
+                <SectionLabel hint="验证码始终可用，密码是可选的第二条路">登录密码</SectionLabel>
+
+                <p className="mt-3 text-xs leading-relaxed text-ink-500">
+                  {hasPassword
+                    ? "已设置密码。登录页可以选「密码」进入；改密码要先输当前密码。"
+                    : "还没有设置密码。现在只能用手机号 + 验证码登录；设一个密码，换手机或短信不通时也能进。"}
+                </p>
+
+                <form className="mt-4 space-y-3" onSubmit={savePassword}>
+                  {hasPassword ? (
+                    <Field label="当前密码">
+                      <input
+                        type="password"
+                        className="input"
+                        autoComplete="current-password"
+                        value={oldPassword}
+                        aria-label="当前密码"
+                        onChange={(e) => setOldPassword(e.target.value)}
+                      />
+                    </Field>
+                  ) : null}
+
+                  <Field label={hasPassword ? "新密码" : "密码"}>
+                    <input
+                      type="password"
+                      className="input"
+                      autoComplete="new-password"
+                      placeholder="至少 8 位，字母和数字都要有"
+                      value={newPassword}
+                      aria-label={hasPassword ? "新密码" : "密码"}
+                      onChange={(e) => setNewPassword(e.target.value)}
+                    />
+                  </Field>
+
+                  <Field label="再输一次">
+                    <input
+                      type="password"
+                      className="input"
+                      autoComplete="new-password"
+                      value={confirm}
+                      aria-label="确认密码"
+                      onChange={(e) => setConfirm(e.target.value)}
+                    />
+                  </Field>
+
+                  {pwdMsg && <InlineAlert tone="success">{pwdMsg}</InlineAlert>}
+                  {pwdError && <InlineAlert>{pwdError}</InlineAlert>}
+
+                  <Button
+                    type="submit"
+                    variant="primary"
+                    size="sm"
+                    disabled={
+                      pwdBusy ||
+                      newPassword.length < 8 ||
+                      !confirm ||
+                      (hasPassword && !oldPassword)
+                    }
+                  >
+                    {pwdBusy ? "保存中…" : hasPassword ? "修改密码" : "设置密码"}
+                  </Button>
+                </form>
+              </section>
+
+              <section className="card p-5">
+                <SectionLabel hint="在这台设备上清掉登录状态">退出</SectionLabel>
+                <p className="mt-3 text-xs leading-relaxed text-ink-500">
+                  退出只会清掉这台浏览器里的令牌；工作区里的数据不受影响。
+                </p>
+                <Button variant="ghost" size="sm" className="mt-3" onClick={signOut}>
+                  退出登录
+                </Button>
+              </section>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}