test(web): 补充 Web MVP 端到端测试与本地测试编排

- 新增 Playwright E2E(治理、登录、投瓶捞瓶回复与实时聊天、举报拉黑与断线恢复)共 9 条用例 - 每个用例前重置数据库、用例后关闭全部 browser context,消除跨用例污染与资源泄漏 - 前端改由 Playwright 托管构建与 preview(关闭 SW);Vite 代理注入 Origin 头以通过接口 Origin 校验 - 根级 vitest 排除 Playwright 用例与需专用配置的 web 用例,避免误收集导致的假失败 - 测试手机号按实测校验结果收敛白名单,避免用例传入会被后端拒绝的号段验证结果: - Web E2E 9/9 连续两轮通过(含运行前后服务健康检查) - API E2E 146/146 连续两轮通过 - 单测:根级 14 文件/119 用例、web 包 8 文件/31 用例通过 - typecheck、lint、build、依赖审计(audit)均通过
feat(web): 构建漂流瓶移动端 PWA
2026-09-18 11:23:20 +08:00 · 2026-09-17 22:19:24 +08:00
53 changed files with 9289 additions and 2901 deletions
@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1,viewport-fit=cover"
+    />
+    <meta name="theme-color" content="#061b2b" />
+    <meta name="description" content="匿名漂流瓶深海社交" />
+    <title>漂流瓶 · 深海回声</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
@@ -0,0 +1,31 @@
+{
+  "name": "@drift/web",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite --host 0.0.0.0",
+    "test": "vitest run",
+    "typecheck": "vue-tsc --noEmit",
+    "build": "vue-tsc --noEmit && vite build"
+  },
+  "dependencies": {
+    "@drift/contracts": "workspace:*",
+    "pinia": "^3.0.3",
+    "socket.io-client": "^4.8.1",
+    "vue": "^3.5.22",
+    "vue-router": "^4.5.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/vue": "^8.1.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/test-utils": "^2.4.6",
+    "jsdom": "^27.0.0",
+    "typescript": "^5.6.3",
+    "vite": "^7.1.7",
+    "vite-plugin-pwa": "^1.0.3",
+    "vitest": "^4.1.11",
+    "vue-tsc": "^3.0.8"
+  }
+}
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><rect width="512" height="512" rx="112" fill="#061b2b"/><circle cx="256" cy="210" r="128" fill="#0b4050"/><path d="M180 130h152l-20 196c-5 48-107 48-112 0z" fill="#76e4d5" opacity=".85"/><path d="M160 350q96-70 192 0" fill="none" stroke="#f1c27d" stroke-width="22" stroke-linecap="round"/></svg>
@@ -0,0 +1,16 @@
+{
+  "name": "漂流瓶 · 深海回声",
+  "short_name": "漂流瓶",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#04111d",
+  "theme_color": "#061b2b",
+  "icons": [
+    {
+      "src": "/icon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    }
+  ]
+}
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useRoute } from "vue-router";
+import OfflineBanner from "./components/OfflineBanner.vue";
+import TabBar from "./components/TabBar.vue";
+const route = useRoute();
+const shell = computed(
+  () => route.name !== "login" && route.name !== "admin-login",
+);
+</script>
+<template>
+  <div class="app-shell">
+    <OfflineBanner /><RouterView /><TabBar v-if="shell" />
+  </div>
+</template>
@@ -0,0 +1,195 @@
+import { describe, expect, it, vi } from "vitest";
+import { createApiClient } from "./client";
+
+const response = (status: number, data: unknown) =>
+  new Response(
+    JSON.stringify({
+      code: status < 400 ? "OK" : "AUTH_TOKEN_EXPIRED",
+      message: status < 400 ? "success" : "expired",
+      data,
+      requestId: crypto.randomUUID(),
+    }),
+    { status, headers: { "content-type": "application/json" } },
+  );
+
+describe("API client authentication", () => {
+  it("coalesces concurrent 401 refreshes and retries both requests", async () => {
+    let token = "expired";
+    let refreshes = 0;
+    const fetcher = vi.fn(async (input: RequestInfo | URL) => {
+      const path =
+        typeof input === "string"
+          ? input
+          : input instanceof URL
+            ? input.href
+            : input.url;
+      if (path.endsWith("/auth/token/refresh")) {
+        refreshes += 1;
+        await Promise.resolve();
+        token = "fresh";
+        return response(200, {
+          accessToken: token,
+          expiresIn: 900,
+          tokenType: "Bearer",
+        });
+      }
+      return token === "expired"
+        ? response(401, null)
+        : response(200, { path });
+    });
+    const client = createApiClient({
+      fetcher,
+      getToken: () => token,
+      setToken: (next) => {
+        token = next ?? "";
+      },
+    });
+
+    await Promise.all([client.get("/me"), client.get("/conversations")]);
+
+    expect(refreshes).toBe(1);
+    expect(fetcher).toHaveBeenCalledTimes(5);
+  });
+
+  it("coalesces concurrent refresh failures and logs out only once", async () => {
+    let token: string | null = "expired";
+    const setToken = vi.fn((next: string | null) => {
+      token = next;
+    });
+    const onUnauthorized = vi.fn();
+    let refreshes = 0;
+    const fetcher = vi.fn(async (input: RequestInfo | URL) => {
+      const path =
+        typeof input === "string"
+          ? input
+          : input instanceof URL
+            ? input.href
+            : input.url;
+      if (path.endsWith("/auth/token/refresh")) {
+        refreshes += 1;
+        return response(401, null);
+      }
+      if (path.endsWith("/conversations"))
+        await new Promise((resolve) => setTimeout(resolve, 5));
+      return response(401, null);
+    });
+    const client = createApiClient({
+      fetcher,
+      getToken: () => token,
+      setToken,
+      onUnauthorized,
+    });
+
+    const results = await Promise.allSettled([
+      client.get("/me"),
+      client.get("/conversations"),
+    ]);
+
+    expect(results.every((result) => result.status === "rejected")).toBe(true);
+    expect(refreshes).toBe(1);
+    expect(setToken).toHaveBeenCalledTimes(1);
+    expect(setToken).toHaveBeenCalledWith(null);
+    expect(onUnauthorized).toHaveBeenCalledOnce();
+  });
+
+  it("does not claim an offline write succeeded", async () => {
+    const client = createApiClient({
+      fetcher: vi.fn().mockRejectedValue(new TypeError("Failed to fetch")),
+      getToken: () => "token",
+      setToken: vi.fn(),
+    });
+
+    await expect(
+      client.post("/bottles", { contentText: "hello" }),
+    ).rejects.toMatchObject({ code: "NETWORK_ERROR" });
+  });
+
+  it("does not repeat refresh or logout after a failed refresh", async () => {
+    let token: string | null = "expired";
+    let refreshes = 0;
+    const setToken = vi.fn((next: string | null) => {
+      token = next;
+    });
+    const onUnauthorized = vi.fn();
+    const fetcher = vi.fn((input: RequestInfo | URL): Promise<Response> => {
+      const path =
+        typeof input === "string"
+          ? input
+          : input instanceof URL
+            ? input.href
+            : input.url;
+      if (path.endsWith("/auth/token/refresh")) {
+        refreshes += 1;
+        return Promise.resolve(response(401, null));
+      }
+      return Promise.resolve(response(401, null));
+    });
+    const client = createApiClient({
+      fetcher,
+      getToken: () => token,
+      setToken,
+      onUnauthorized,
+    });
+
+    await expect(client.get("/me")).rejects.toMatchObject({
+      code: "AUTH_TOKEN_EXPIRED",
+    });
+    await expect(client.get("/conversations")).rejects.toMatchObject({
+      code: "AUTH_TOKEN_EXPIRED",
+    });
+
+    expect(refreshes).toBe(1);
+    expect(onUnauthorized).toHaveBeenCalledOnce();
+    expect(token).toBeNull();
+  });
+
+  it("recovers refresh after an explicit new login", async () => {
+    let token: string | null = "expired";
+    let refreshSucceeds = false;
+    let refreshes = 0;
+    const onUnauthorized = vi.fn();
+    const fetcher = vi.fn((input: RequestInfo | URL): Promise<Response> => {
+      const path =
+        typeof input === "string"
+          ? input
+          : input instanceof URL
+            ? input.href
+            : input.url;
+      if (path.endsWith("/auth/token/refresh")) {
+        refreshes += 1;
+        if (!refreshSucceeds) return Promise.resolve(response(401, null));
+        return Promise.resolve(
+          response(200, {
+            accessToken: "fresh2",
+            expiresIn: 900,
+            tokenType: "Bearer",
+          }),
+        );
+      }
+      return Promise.resolve(response(401, null));
+    });
+    const client = createApiClient({
+      fetcher,
+      getToken: () => token,
+      setToken: (next) => {
+        token = next;
+      },
+      onUnauthorized,
+    });
+
+    await expect(client.get("/me")).rejects.toMatchObject({
+      code: "AUTH_TOKEN_EXPIRED",
+    });
+    expect(refreshes).toBe(1);
+
+    // 显式重新登录产生新会话
+    token = "fresh";
+    refreshSucceeds = true;
+
+    await expect(client.get("/me")).rejects.toMatchObject({
+      code: "AUTH_TOKEN_EXPIRED",
+    });
+    expect(refreshes).toBe(2);
+    expect(onUnauthorized).toHaveBeenCalledOnce();
+  });
+});
@@ -0,0 +1,142 @@
+export interface ApiEnvelope<T> {
+  code: string;
+  message: string;
+  data: T;
+  requestId: string;
+}
+export interface ApiFailure {
+  code: string;
+  message: string;
+  status: number | undefined;
+  requestId: string | undefined;
+}
+export interface ApiClientOptions {
+  fetcher?: typeof fetch;
+  baseUrl?: string;
+  getToken: () => string | null;
+  setToken: (token: string | null) => void;
+  onUnauthorized?: () => void;
+}
+
+export class ApiError extends Error implements ApiFailure {
+  public status: number | undefined;
+  public requestId: string | undefined;
+  constructor(
+    public code: string,
+    message: string,
+    status?: number,
+    requestId?: string,
+  ) {
+    super(message);
+    this.status = status;
+    this.requestId = requestId;
+  }
+}
+
+export function createApiClient(options: ApiClientOptions) {
+  const fetcher = options.fetcher ?? fetch;
+  const baseUrl = options.baseUrl ?? "/api/v1";
+  let refreshing: Promise<string> | null = null;
+  let failedRefresh: { token: string | null; error: unknown } | null = null;
+
+  async function refresh(
+    staleToken: string | null = options.getToken(),
+  ): Promise<string> {
+    // 同一认证失败周期内:只要令牌仍是失败时的令牌(或已被清空),
+    // 就直接抛出已记录的失败,不再请求 refresh 接口或重复触发登出。
+    if (
+      failedRefresh !== null &&
+      (staleToken === failedRefresh.token || staleToken === null)
+    )
+      throw failedRefresh.error;
+    if (!refreshing) {
+      refreshing = (async () => {
+        try {
+          const response = await fetcher(`${baseUrl}/auth/token/refresh`, {
+            method: "POST",
+            credentials: "include",
+          });
+          const body = (await response.json()) as ApiEnvelope<{
+            accessToken: string;
+          }>;
+          if (!response.ok)
+            throw new ApiError(
+              body.code,
+              body.message,
+              response.status,
+              body.requestId,
+            );
+          options.setToken(body.data.accessToken);
+          failedRefresh = null;
+          return body.data.accessToken;
+        } catch (error) {
+          const failure = networkError(error);
+          failedRefresh = { token: staleToken, error: failure };
+          options.setToken(null);
+          options.onUnauthorized?.();
+          throw failure;
+        } finally {
+          refreshing = null;
+        }
+      })();
+    }
+    return refreshing;
+  }
+
+  async function request<T>(
+    path: string,
+    init: RequestInit = {},
+    retry = true,
+  ): Promise<T> {
+    const headers = new Headers(init.headers);
+    const token = options.getToken();
+    if (token) headers.set("authorization", `Bearer ${token}`);
+    if (init.body && !headers.has("content-type"))
+      headers.set("content-type", "application/json");
+    let response: Response;
+    try {
+      response = await fetcher(`${baseUrl}${path}`, {
+        ...init,
+        headers,
+        credentials: "include",
+      });
+    } catch (error) {
+      throw networkError(error);
+    }
+    const body = (await response.json()) as ApiEnvelope<T>;
+    if (response.status === 401 && retry && path !== "/auth/token/refresh") {
+      await refresh(token);
+      return request<T>(path, init, false);
+    }
+    if (!response.ok)
+      throw new ApiError(
+        body.code,
+        body.message,
+        response.status,
+        body.requestId,
+      );
+    return body.data;
+  }
+  return {
+    get: <T>(path: string) => request<T>(path),
+    post: <T>(path: string, body?: unknown, headers?: HeadersInit) =>
+      request<T>(path, {
+        method: "POST",
+        ...(body === undefined ? {} : { body: JSON.stringify(body) }),
+        ...(headers === undefined ? {} : { headers }),
+      }),
+    put: <T>(path: string, body: unknown) =>
+      request<T>(path, { method: "PUT", body: JSON.stringify(body) }),
+    patch: <T>(path: string, body: unknown) =>
+      request<T>(path, { method: "PATCH", body: JSON.stringify(body) }),
+    delete: <T>(path: string) => request<T>(path, { method: "DELETE" }),
+    refresh,
+  };
+}
+function networkError(error: unknown): ApiError {
+  if (error instanceof ApiError) return error;
+  return new ApiError(
+    "NETWORK_ERROR",
+    error instanceof Error ? error.message : "网络连接失败",
+  );
+}
@@ -0,0 +1,185 @@
+import { describe, expect, it, vi } from "vitest";
+import { bindSocketAuthentication, sendSocketMessage } from "./socket";
+
+type Ack = (error: Error | null, response?: unknown) => void;
+
+class FakeSocket {
+  connected = false;
+  handlers = new Map<string, (value?: unknown) => void>();
+  emits: Array<{ event: string; payload: unknown; ack: Ack | undefined }> = [];
+  connect = vi.fn(() => {
+    this.connected = true;
+    return this;
+  });
+  disconnect = vi.fn(() => {
+    this.connected = false;
+    return this;
+  });
+  timeout = vi.fn(() => this);
+  emit = vi.fn((event: string, payload: unknown, ack?: Ack) => {
+    this.emits.push({ event, payload, ack });
+    return this;
+  });
+  on(event: string, handler: (value?: unknown) => void) {
+    this.handlers.set(event, handler);
+    return this;
+  }
+  emitEvent(event: string, value?: unknown) {
+    this.handlers.get(event)?.(value);
+  }
+  ack(index: number, response: unknown) {
+    this.emits[index]?.ack?.(null, response);
+  }
+}
+
+const okResponse = (id = "real-1") => ({
+  ok: true,
+  data: {
+    message: {
+      id,
+      conversationId: "c-1",
+      sender: { publicId: "p" },
+      clientMsgId: "m-1",
+      seq: "1",
+      text: "hi",
+      status: "sent",
+      sentAt: new Date(0).toISOString(),
+    },
+    deduplicated: false,
+  },
+});
+
+const errorResponse = (code: string, message: string) => ({
+  ok: false,
+  error: { code, message },
+});
+
+const payload = { conversationId: "c-1", clientMsgId: "m-1", text: "hi" };
+
+describe("socket authentication recovery", () => {
+  it("refreshes once after concurrent auth errors and reconnects with current token", async () => {
+    let token = "expired";
+    let release!: () => void;
+    const refresh = vi.fn(
+      () =>
+        new Promise<string>((resolve) => {
+          release = () => {
+            token = "fresh";
+            resolve(token);
+          };
+        }),
+    );
+    const socket = new FakeSocket();
+    bindSocketAuthentication(socket, refresh);
+
+    socket.emitEvent(
+      "connect_error",
+      Object.assign(new Error("Unauthorized"), {
+        data: { code: "AUTH_TOKEN_EXPIRED" },
+      }),
+    );
+    socket.emitEvent(
+      "connect_error",
+      Object.assign(new Error("Unauthorized"), {
+        data: { code: "AUTH_TOKEN_EXPIRED" },
+      }),
+    );
+    expect(refresh).toHaveBeenCalledOnce();
+    release();
+    await vi.waitFor(() => expect(socket.connect).toHaveBeenCalledOnce());
+    expect(token).toBe("fresh");
+  });
+
+  it("does not refresh unrelated connection failures", () => {
+    const refresh = vi.fn();
+    const socket = new FakeSocket();
+    bindSocketAuthentication(socket, refresh);
+    socket.emitEvent("connect_error", new Error("transport closed"));
+    expect(refresh).not.toHaveBeenCalled();
+  });
+
+  it("disconnects and stops recovering when refresh fails", async () => {
+    const socket = new FakeSocket();
+    let refreshCalls = 0;
+    const refresh = vi.fn().mockImplementation(() => {
+      refreshCalls += 1;
+      return Promise.reject(new Error("refresh failed"));
+    });
+    bindSocketAuthentication(socket, refresh);
+
+    socket.emitEvent(
+      "connect_error",
+      Object.assign(new Error("Unauthorized"), {
+        data: { code: "AUTH_TOKEN_EXPIRED" },
+      }),
+    );
+    await vi.waitFor(() => expect(socket.disconnect).toHaveBeenCalledOnce());
+
+    // 后续重连错误不会再次触发 refresh(锁保持,避免无限循环)
+    socket.emitEvent(
+      "connect_error",
+      Object.assign(new Error("Unauthorized"), {
+        data: { code: "AUTH_TOKEN_EXPIRED" },
+      }),
+    );
+    expect(refreshCalls).toBe(1);
+  });
+
+  it("refreshes, reconnects and retries once with the same clientMsgId after an ACK auth error", async () => {
+    const socket = new FakeSocket();
+    const refresh = vi.fn().mockResolvedValue("fresh");
+
+    const sending = sendSocketMessage(socket as never, payload, refresh);
+
+    expect(socket.emits).toHaveLength(1);
+    socket.ack(0, errorResponse("AUTH_TOKEN_EXPIRED", "expired"));
+    await vi.waitFor(() => expect(refresh).toHaveBeenCalledOnce());
+
+    expect(socket.disconnect).toHaveBeenCalledOnce();
+    expect(socket.connect).toHaveBeenCalledOnce();
+    expect(socket.emits).toHaveLength(2);
+    expect(socket.emits[1]!.payload).toMatchObject({ clientMsgId: "m-1" });
+    socket.ack(1, okResponse());
+
+    await expect(sending).resolves.toMatchObject({
+      message: { id: "real-1" },
+    });
+  });
+
+  it("does not retry non-auth ACK failures", async () => {
+    const socket = new FakeSocket();
+    const refresh = vi.fn();
+
+    const sending = sendSocketMessage(socket as never, payload, refresh);
+    socket.ack(0, errorResponse("RATE_LIMITED", "too many"));
+
+    await expect(sending).rejects.toMatchObject({ code: "RATE_LIMITED" });
+    expect(refresh).not.toHaveBeenCalled();
+    expect(socket.emits).toHaveLength(1);
+  });
+
+  it("does not loop when the retried attempt also fails auth", async () => {
+    const socket = new FakeSocket();
+    const refresh = vi.fn().mockResolvedValue("fresh");
+
+    const sending = sendSocketMessage(socket as never, payload, refresh);
+    socket.ack(0, errorResponse("AUTH_TOKEN_EXPIRED", "expired"));
+    await vi.waitFor(() => expect(refresh).toHaveBeenCalledOnce());
+    socket.ack(1, errorResponse("AUTH_TOKEN_EXPIRED", "expired"));
+
+    await expect(sending).rejects.toMatchObject({ code: "AUTH_TOKEN_EXPIRED" });
+    expect(refresh).toHaveBeenCalledOnce();
+    expect(socket.emits).toHaveLength(2);
+  });
+
+  it("rejects without refreshing when no refresh handler is provided", async () => {
+    const socket = new FakeSocket();
+    const sending = sendSocketMessage(socket as never, payload);
+    socket.ack(0, errorResponse("AUTH_TOKEN_EXPIRED", "expired"));
+
+    await expect(sending).rejects.toMatchObject({
+      code: "AUTH_TOKEN_EXPIRED",
+    });
+    expect(socket.emits).toHaveLength(1);
+  });
+});
@@ -0,0 +1,97 @@
+import { io, type Socket } from "socket.io-client";
+import type { ChatMessage } from "../stores/messages";
+
+export interface SocketResponse<T = unknown> {
+  ok: boolean;
+  data?: T;
+  error?: { code: string; message: string };
+}
+export interface AuthenticationSocket {
+  connected: boolean;
+  connect(): unknown;
+  disconnect(): unknown;
+  on(event: "connect_error", handler: (error: unknown) => void): unknown;
+}
+
+export type SocketError = Error & { code?: string };
+
+export function bindSocketAuthentication(
+  socket: AuthenticationSocket,
+  refresh: () => Promise<string>,
+) {
+  let recovering: Promise<void> | null = null;
+  socket.on("connect_error", (error: unknown) => {
+    const candidate = error as { message?: string; data?: { code?: string } };
+    const authenticationError =
+      candidate.data?.code?.startsWith("AUTH_") ||
+      /unauthorized|authentication|token/i.test(candidate.message ?? "");
+    if (!authenticationError || recovering) return;
+    recovering = refresh()
+      .then(() => {
+        socket.disconnect();
+        socket.connect();
+      })
+      .catch(() => {
+        // 刷新失败:断开连接并“锁死”恢复路径,避免无限重连循环。
+        // 只有显式重新登录(新会话)重建 socket 后才会再次武装恢复。
+        socket.disconnect();
+      });
+  });
+}
+
+export function createChatSocket(
+  token: () => string | null,
+  refresh?: () => Promise<string>,
+): Socket {
+  const socket = io("/chat", {
+    autoConnect: false,
+    withCredentials: true,
+    auth: (callback) => callback({ token: token() }),
+  });
+  if (refresh) bindSocketAuthentication(socket, refresh);
+  return socket;
+}
+
+function responseError(response: SocketResponse): SocketError {
+  const error = new Error(response.error?.message ?? "发送失败") as SocketError;
+  if (response.error?.code) error.code = response.error.code;
+  return error;
+}
+
+function emitOnce(
+  socket: Socket,
+  payload: { conversationId: string; clientMsgId: string; text: string },
+): Promise<{ message: ChatMessage; deduplicated: boolean }> {
+  return new Promise((resolve, reject) =>
+    socket.timeout(10000).emit(
+      "message:send",
+      payload,
+      (
+        error: Error | null,
+        response: SocketResponse<{
+          message: ChatMessage;
+          deduplicated: boolean;
+        }>,
+      ) => {
+        if (error) return reject(error);
+        if (!response.ok || !response.data)
+          return reject(responseError(response));
+        resolve(response.data);
+      },
+    ),
+  );
+}
+
+export function sendSocketMessage(
+  socket: Socket,
+  payload: { conversationId: string; clientMsgId: string; text: string },
+  refresh?: () => Promise<string>,
+): Promise<{ message: ChatMessage; deduplicated: boolean }> {
+  return emitOnce(socket, payload).catch(async (error: SocketError) => {
+    if (!refresh || !error.code?.startsWith("AUTH_")) throw error;
+    await refresh();
+    socket.disconnect();
+    socket.connect();
+    return emitOnce(socket, payload);
+  });
+}
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+defineProps<{ title: string; back?: boolean }>();
+</script>
+<template>
+  <header class="topbar">
+    <RouterLink v-if="back" to="/" class="icon-link" aria-label="返回首页"
+      >‹</RouterLink
+    >
+    <div>
+      <small>DRIFT / 深海</small>
+      <h1>{{ title }}</h1>
+    </div>
+    <slot />
+  </header>
+</template>
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from "vue";
+const online = ref(navigator.onLine);
+const update = () => (online.value = navigator.onLine);
+onMounted(() => {
+  addEventListener("online", update);
+  addEventListener("offline", update);
+});
+onBeforeUnmount(() => {
+  removeEventListener("online", update);
+  removeEventListener("offline", update);
+});
+</script>
+<template>
+  <div v-if="!online" class="offline" role="status">
+    离线模式 · 写操作将明确失败
+  </div>
+</template>
@@ -0,0 +1,17 @@
+import { cleanup, render, screen } from "@testing-library/vue";
+import { afterEach, describe, expect, it } from "vitest";
+
+afterEach(cleanup);
+import StatusPanel from "./StatusPanel.vue";
+
+describe("StatusPanel", () => {
+  it.each([
+    ["loading", "正在潜入深海"],
+    ["empty", "这里还没有内容"],
+    ["error", "海浪暂时阻断了连接"],
+    ["offline", "当前离线"],
+  ] as const)("renders an accessible %s state", (state, label) => {
+    render(StatusPanel, { props: { state } });
+    expect(screen.getByRole("status")).toHaveTextContent(label);
+  });
+});
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const props = defineProps<{
+  state: "loading" | "empty" | "error" | "offline";
+  detail?: string;
+}>();
+const labels = {
+  loading: "正在潜入深海…",
+  empty: "这里还没有内容",
+  error: "海浪暂时阻断了连接",
+  offline: "当前离线，写操作不会被保存",
+};
+</script>
+<template>
+  <div class="status" role="status" aria-live="polite">
+    <span aria-hidden="true">{{
+      props.state === "loading" ? "◌" : props.state === "empty" ? "○" : "!"
+    }}</span>
+    <p>{{ labels[props.state] }}</p>
+    <small v-if="detail">{{ detail }}</small>
+  </div>
+</template>
+<style scoped>
+.status {
+  padding: 2rem 1rem;
+  text-align: center;
+  color: var(--muted);
+}
+.status span {
+  font-size: 2rem;
+  color: var(--aqua);
+}
+.status p {
+  margin: 0.5rem 0;
+}
+.status small {
+  display: block;
+}
+</style>
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useRoute } from "vue-router";
+const route = useRoute();
+const links: [string, string][] = [
+  ["/", "海面"],
+  ["/conversations", "回声"],
+  ["/my-bottles", "瓶子"],
+  ["/settings", "设置"],
+];
+</script>
+<template>
+  <nav class="tabs" aria-label="主导航">
+    <RouterLink
+      v-for="link in links"
+      :key="link[0]"
+      :to="link[0]"
+      :aria-current="route.path === link[0] ? 'page' : undefined"
+      >{{ link[1] }}</RouterLink
+    >
+  </nav>
+</template>
@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<
+    Record<string, unknown>,
+    Record<string, unknown>,
+    unknown
+  >;
+  export default component;
+}
@@ -0,0 +1,12 @@
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+import App from "./App.vue";
+import { createAppRouter } from "./router";
+import { useAuthStore } from "./stores/auth";
+import "./styles/main.css";
+const app = createApp(App),
+  pinia = createPinia();
+app.use(pinia);
+const auth = useAuthStore(pinia);
+app.use(createAppRouter(auth));
+app.mount("#app");
@@ -0,0 +1,63 @@
+import { createMemoryHistory } from "vue-router";
+import { describe, expect, it, vi } from "vitest";
+import { createAppRouter } from "./index";
+
+describe("router guards", () => {
+  function auth(
+    overrides: Partial<{
+      isAuthenticated: boolean;
+      bootstrap: () => Promise<unknown>;
+      ensureAdmin: () => Promise<unknown>;
+    }> = {},
+  ) {
+    return {
+      isAuthenticated: false,
+      bootstrap: vi.fn().mockResolvedValue(undefined),
+      ensureAdmin: vi.fn().mockResolvedValue(undefined),
+      ...overrides,
+    };
+  }
+  it("redirects guests to login and preserves the destination", async () => {
+    const session = auth();
+    const router = createAppRouter(session, createMemoryHistory());
+
+    await router.push("/conversations");
+    await router.isReady();
+
+    expect(router.currentRoute.value.name).toBe("login");
+    expect(router.currentRoute.value.query.redirect).toBe("/conversations");
+  });
+
+  it("uses an independent admin login and role preflight", async () => {
+    const session = auth({ isAuthenticated: true });
+    const router = createAppRouter(session, createMemoryHistory());
+    await router.push("/admin/login");
+    await router.isReady();
+    expect(router.currentRoute.value.name).toBe("admin-login");
+
+    await router.push("/admin");
+    expect(session.ensureAdmin).toHaveBeenCalledOnce();
+    expect(router.currentRoute.value.name).toBe("admin");
+  });
+
+  it("redirects failed admin preflight with clear forbidden feedback", async () => {
+    const session = auth({
+      isAuthenticated: true,
+      ensureAdmin: vi.fn().mockRejectedValue({ status: 403 }),
+    });
+    const router = createAppRouter(session, createMemoryHistory());
+    await router.push("/admin");
+    await router.isReady();
+    expect(router.currentRoute.value.name).toBe("admin-login");
+    expect(router.currentRoute.value.query.error).toBe("forbidden");
+  });
+
+  it("sends anonymous visitors to the independent admin login", async () => {
+    const session = auth();
+    const router = createAppRouter(session, createMemoryHistory());
+    await router.push("/admin");
+    await router.isReady();
+    expect(router.currentRoute.value.name).toBe("admin-login");
+    expect(session.ensureAdmin).not.toHaveBeenCalled();
+  });
+});
@@ -0,0 +1,88 @@
+import { createRouter, createWebHistory, type RouterHistory } from "vue-router";
+import LoginView from "../views/LoginView.vue";
+import HomeView from "../views/HomeView.vue";
+import BottleComposeView from "../views/BottleComposeView.vue";
+import PickView from "../views/PickView.vue";
+import ConversationsView from "../views/ConversationsView.vue";
+import ChatView from "../views/ChatView.vue";
+import MyBottlesView from "../views/MyBottlesView.vue";
+import SettingsView from "../views/SettingsView.vue";
+import AdminView from "../views/AdminView.vue";
+import AdminLoginView from "../views/AdminLoginView.vue";
+
+export interface RouterAuth {
+  isAuthenticated: boolean;
+  bootstrap(): Promise<unknown>;
+  ensureAdmin(): Promise<unknown>;
+}
+export function createAppRouter(
+  auth: RouterAuth,
+  history: RouterHistory = createWebHistory(),
+) {
+  const router = createRouter({
+    history,
+    routes: [
+      {
+        path: "/login",
+        name: "login",
+        component: LoginView,
+        meta: { guest: true },
+      },
+      { path: "/", name: "home", component: HomeView },
+      { path: "/throw", name: "throw", component: BottleComposeView },
+      { path: "/pick", name: "pick", component: PickView },
+      {
+        path: "/conversations",
+        name: "conversations",
+        component: ConversationsView,
+      },
+      { path: "/conversations/:id", name: "chat", component: ChatView },
+      { path: "/my-bottles", name: "my-bottles", component: MyBottlesView },
+      { path: "/settings", name: "settings", component: SettingsView },
+      {
+        path: "/admin/login",
+        name: "admin-login",
+        component: AdminLoginView,
+        meta: { adminLogin: true },
+      },
+      {
+        path: "/admin",
+        name: "admin",
+        component: AdminView,
+        meta: { admin: true },
+      },
+    ],
+  });
+  let bootstrapped = false;
+  router.beforeEach(async (to) => {
+    if (!bootstrapped) {
+      bootstrapped = true;
+      await auth.bootstrap();
+    }
+    if (to.meta.adminLogin) return true;
+    if (to.meta.guest && auth.isAuthenticated) return { name: "home" };
+    if (!to.meta.guest && !auth.isAuthenticated) {
+      if (to.meta.admin)
+        return { name: "admin-login", query: { redirect: to.fullPath } };
+      return { name: "login", query: { redirect: to.fullPath } };
+    }
+    if (to.meta.admin) {
+      try {
+        await auth.ensureAdmin();
+      } catch (error: unknown) {
+        return {
+          name: "admin-login",
+          query:
+            typeof error === "object" &&
+            error !== null &&
+            "status" in error &&
+            error.status === 403
+              ? { error: "forbidden" }
+              : { error: "unavailable" },
+        };
+      }
+    }
+    return true;
+  });
+  return router;
+}
@@ -0,0 +1,53 @@
+import { createPinia, setActivePinia } from "pinia";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { api, useAuthStore } from "./auth";
+
+const me = {
+  accountId: "a",
+  publicId: "p",
+  nickname: null,
+  avatarColor: null,
+  bio: null,
+  profileReviewStatus: null,
+};
+
+beforeEach(() => {
+  setActivePinia(createPinia());
+  vi.restoreAllMocks();
+});
+
+describe("auth store", () => {
+  it("becomes authenticated reactively after login", async () => {
+    vi.spyOn(api, "post").mockResolvedValue({ accessToken: "fresh" });
+    vi.spyOn(api, "get").mockResolvedValue(me);
+    const auth = useAuthStore();
+    expect(auth.isAuthenticated).toBe(false);
+    await auth.login("13800000000", "123456", "device");
+    expect(auth.isAuthenticated).toBe(true);
+  });
+
+  it("restores authentication during bootstrap refresh", async () => {
+    vi.spyOn(api, "refresh").mockResolvedValue("restored");
+    vi.spyOn(api, "get").mockResolvedValue(me);
+    const auth = useAuthStore();
+    await auth.bootstrap();
+    expect(auth.ready).toBe(true);
+    expect(auth.isAuthenticated).toBe(true);
+  });
+
+  it("clears the local session even when the server logout fails", async () => {
+    vi.spyOn(api, "post").mockImplementation((path: string) => {
+      if (path.includes("/auth/logout")) throw new Error("network down");
+      return Promise.resolve({ accessToken: "fresh" });
+    });
+    vi.spyOn(api, "get").mockResolvedValue(me);
+    const auth = useAuthStore();
+    await auth.login("13800000000", "123456", "device");
+    expect(auth.isAuthenticated).toBe(true);
+
+    await auth.logout();
+
+    expect(auth.me).toBeNull();
+    expect(auth.isAuthenticated).toBe(false);
+  });
+});
@@ -0,0 +1,78 @@
+import { defineStore } from "pinia";
+import { computed, ref } from "vue";
+import { createApiClient } from "../api/client";
+
+export interface Me {
+  accountId: string;
+  publicId: string | null;
+  nickname: string | null;
+  avatarColor: string | null;
+  bio: string | null;
+  profileReviewStatus: string | null;
+}
+const accessToken = ref<string | null>(null);
+export const api = createApiClient({
+  getToken: () => accessToken.value,
+  setToken: (value) => {
+    accessToken.value = value;
+  },
+});
+export const useAuthStore = defineStore("auth", () => {
+  const me = ref<Me | null>(null);
+  const ready = ref(false);
+  const isAuthenticated = computed(() =>
+    Boolean(accessToken.value && me.value),
+  );
+  async function bootstrap() {
+    if (ready.value) return;
+    try {
+      await api.refresh();
+      me.value = await api.get<Me>("/me");
+    } catch {
+      accessToken.value = null;
+      me.value = null;
+    } finally {
+      ready.value = true;
+    }
+  }
+  async function sendCode(phone: string, deviceId: string) {
+    return api.post<{ sent: boolean; debugCode?: string }>("/auth/sms/send", {
+      phone,
+      deviceId,
+    });
+  }
+  async function login(phone: string, code: string, deviceId: string) {
+    const pair = await api.post<{ accessToken: string }>("/auth/sms/login", {
+      phone,
+      code,
+      deviceId,
+    });
+    accessToken.value = pair.accessToken;
+    me.value = await api.get<Me>("/me");
+  }
+  async function ensureAdmin() {
+    await api.get("/admin/reports?limit=1");
+  }
+  async function logout() {
+    try {
+      await api.post("/auth/logout");
+    } catch {
+      // 本地始终清理;服务端注销失败也不阻塞退出
+    }
+    accessToken.value = null;
+    me.value = null;
+  }
+  return {
+    me,
+    ready,
+    isAuthenticated,
+    bootstrap,
+    sendCode,
+    login,
+    ensureAdmin,
+    logout,
+  };
+});
+export function currentAccessToken() {
+  return accessToken.value;
+}
@@ -0,0 +1,174 @@
+import { createPinia, setActivePinia } from "pinia";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { flushPromises } from "@vue/test-utils";
+import { api, useAuthStore } from "./auth";
+import { useChatStore } from "./chat";
+import type { Conversation } from "./chat";
+import type { ChatMessage } from "./messages";
+
+const socket = vi.hoisted(() => ({
+  connected: false,
+  on: vi.fn(),
+  connect: vi.fn(),
+  disconnect: vi.fn(),
+}));
+
+vi.mock("../api/socket", () => ({
+  createChatSocket: () => socket,
+  sendSocketMessage: vi.fn(),
+}));
+
+const me = {
+  accountId: "a",
+  publicId: "p",
+  nickname: null,
+  avatarColor: null,
+  bio: null,
+  profileReviewStatus: null,
+};
+
+function message(seq: number): ChatMessage {
+  return {
+    id: `m-${seq}`,
+    conversationId: "c-1",
+    sender: { publicId: "p" },
+    clientMsgId: `client-${seq}`,
+    seq: String(seq),
+    text: String(seq),
+    status: "sent",
+    sentAt: new Date(seq).toISOString(),
+  };
+}
+
+const conversation = (): Conversation => ({
+  id: "c-1",
+  status: "ACTIVE",
+  lastMessageAt: new Date(0).toISOString(),
+  lastMessage: null,
+  unread: "0",
+  lastReadSeq: "0",
+});
+
+beforeEach(() => {
+  setActivePinia(createPinia());
+  vi.restoreAllMocks();
+  socket.connected = false;
+  socket.disconnect.mockClear();
+});
+
+describe("chat history synchronization", () => {
+  it("loads every page beyond 100 messages and reliably deduplicates overlap", async () => {
+    const pages = [
+      Array.from({ length: 100 }, (_, index) => message(index + 1)),
+      Array.from({ length: 100 }, (_, index) => message(index + 100)),
+      Array.from({ length: 51 }, (_, index) => message(index + 199)),
+      [],
+    ];
+    const get = vi
+      .spyOn(api, "get")
+      .mockImplementation(() =>
+        Promise.resolve({ items: pages.shift() ?? [] }),
+      );
+    const chat = useChatStore();
+
+    const result = await chat.loadMessages("c-1");
+
+    expect(result).toBeDefined();
+    expect(result ?? []).toHaveLength(249);
+    expect(result?.at(-1)?.seq).toBe("249");
+    expect(get).toHaveBeenCalledTimes(3);
+    expect(get.mock.calls.map(([path]) => path)).toEqual([
+      "/conversations/c-1/messages?afterSeq=0&limit=100",
+      "/conversations/c-1/messages?afterSeq=100&limit=100",
+      "/conversations/c-1/messages?afterSeq=199&limit=100",
+    ]);
+  });
+
+  it("stops paging after the page cap to bound waterfall requests", async () => {
+    const pages = [
+      Array.from({ length: 100 }, (_, index) => message(index + 1)),
+      Array.from({ length: 100 }, (_, index) => message(index + 101)),
+      Array.from({ length: 100 }, (_, index) => message(index + 201)),
+      Array.from({ length: 100 }, (_, index) => message(index + 301)),
+      Array.from({ length: 100 }, (_, index) => message(index + 401)),
+      [],
+    ];
+    const get = vi
+      .spyOn(api, "get")
+      .mockImplementation(() =>
+        Promise.resolve({ items: pages.shift() ?? [] }),
+      );
+    const chat = useChatStore();
+
+    const result = await chat.loadMessages("c-1");
+
+    expect(result ?? []).toHaveLength(500);
+    expect(get.mock.calls.length).toBeLessThanOrEqual(5);
+    expect(get.mock.calls.at(-1)?.[0]).toBe(
+      "/conversations/c-1/messages?afterSeq=400&limit=100",
+    );
+  });
+
+  it("syncs only the most recent active conversations when reconnecting", async () => {
+    const get = vi.spyOn(api, "get").mockResolvedValue({ items: [] });
+    const chat = useChatStore();
+    chat.conversations = Array.from({ length: 30 }, (_, index) => {
+      const id = `c-${index}`;
+      return {
+        id,
+        status: "ACTIVE",
+        lastMessageAt: new Date(1700000000000 + index).toISOString(),
+        lastMessage: null,
+        unread: "0",
+        lastReadSeq: "0",
+      };
+    });
+
+    await chat.syncAll();
+
+    expect(
+      get.mock.calls.filter(([path]) => path.includes("/messages")),
+    ).toHaveLength(5);
+    expect(
+      get.mock.calls.filter(([path]) => path.includes("/messages"))[0]![0],
+    ).toContain("c-29");
+  });
+});
+
+describe("chat session lifecycle", () => {
+  it("disconnects and clears account state when authentication ends", async () => {
+    vi.spyOn(api, "post").mockResolvedValue({ accessToken: "fresh" });
+    vi.spyOn(api, "get").mockResolvedValue(me);
+    const auth = useAuthStore();
+    await auth.login("13800000000", "123456", "device");
+    expect(auth.isAuthenticated).toBe(true);
+    const chat = useChatStore();
+    chat.conversations = [conversation()];
+    chat.messages = { "c-1": [message(1)] };
+    expect(chat.conversations).toHaveLength(1);
+
+    auth.me = null;
+
+    await flushPromises();
+
+    expect(auth.isAuthenticated).toBe(false);
+    expect(socket.disconnect).toHaveBeenCalled();
+    expect(chat.conversations).toEqual([]);
+    expect(chat.messages).toEqual({});
+    expect(chat.connected).toBe(false);
+  });
+
+  it("reset clears conversations and disconnects even when called directly", () => {
+    const auth = useAuthStore();
+    auth.me = me;
+    const chat = useChatStore();
+    chat.conversations = [conversation()];
+    chat.messages = { "c-1": [message(1)] };
+
+    chat.reset();
+
+    expect(socket.disconnect).toHaveBeenCalled();
+    expect(chat.conversations).toEqual([]);
+    expect(chat.messages).toEqual({});
+  });
+});
@@ -0,0 +1,138 @@
+import { defineStore } from "pinia";
+import { computed, ref, watch } from "vue";
+import { api, currentAccessToken, useAuthStore } from "./auth";
+import { createChatSocket, sendSocketMessage } from "../api/socket";
+import { mergeMessages, type ChatMessage } from "./messages";
+
+export interface Conversation {
+  id: string;
+  status: string;
+  lastMessageAt: string;
+  lastMessage: ChatMessage | null;
+  unread: string;
+  lastReadSeq: string;
+}
+const MAX_MESSAGE_PAGES = 5; // 单个会话重连同步上限(500 条),避免瀑布请求
+const MAX_SYNC_CONVERSATIONS = 5; // 重连时仅同步最近活跃会话
+export const useChatStore = defineStore("chat", () => {
+  const auth = useAuthStore();
+  const conversations = ref<Conversation[]>([]);
+  const messages = ref<Record<string, ChatMessage[]>>({});
+  const socket = createChatSocket(currentAccessToken, api.refresh);
+  const connected = ref(false);
+  socket.on("connect", () => {
+    connected.value = true;
+    void syncAll();
+  });
+  socket.on("disconnect", () => {
+    connected.value = false;
+  });
+  socket.on("message:new", (message: ChatMessage) => {
+    messages.value[message.conversationId] = mergeMessages(
+      messages.value[message.conversationId] ?? [],
+      [message],
+    );
+  });
+  async function loadConversations() {
+    const page = await api.get<{ items: Conversation[] }>("/conversations");
+    conversations.value = page.items;
+    return page.items;
+  }
+  async function loadMessages(id: string) {
+    let afterSeq = messages.value[id]?.at(-1)?.seq ?? "0";
+    let hasMore = true;
+    let pages = 0;
+    while (hasMore && pages < MAX_MESSAGE_PAGES) {
+      pages += 1;
+      const page = await api.get<{ items: ChatMessage[] }>(
+        `/conversations/${id}/messages?afterSeq=${afterSeq}&limit=100`,
+      );
+      messages.value[id] = mergeMessages(messages.value[id] ?? [], page.items);
+      hasMore = page.items.length === 100;
+      if (!hasMore) break;
+      const nextAfterSeq = page.items.at(-1)?.seq;
+      if (!nextAfterSeq || BigInt(nextAfterSeq) <= BigInt(afterSeq)) break;
+      afterSeq = nextAfterSeq;
+    }
+    return messages.value[id];
+  }
+  async function syncAll() {
+    const recent = [...conversations.value]
+      .sort((a, b) => Date.parse(b.lastMessageAt) - Date.parse(a.lastMessageAt))
+      .slice(0, MAX_SYNC_CONVERSATIONS);
+    for (const conversation of recent) await loadMessages(conversation.id);
+  }
+  function reset() {
+    socket.disconnect();
+    connected.value = false;
+    conversations.value = [];
+    messages.value = {};
+  }
+  let wasAuthenticated = auth.isAuthenticated;
+  watch(
+    () => auth.isAuthenticated,
+    (authenticated) => {
+      if (wasAuthenticated && !authenticated) reset();
+      wasAuthenticated = authenticated;
+    },
+  );
+  function connect() {
+    if (!socket.connected) socket.connect();
+  }
+  function disconnect() {
+    socket.disconnect();
+  }
+  async function send(id: string, text: string) {
+    const clientMsgId = crypto.randomUUID();
+    const optimistic: ChatMessage = {
+      id: `local:${clientMsgId}`,
+      conversationId: id,
+      clientMsgId,
+      sender: { publicId: "" },
+      seq: "0",
+      text,
+      sentAt: new Date().toISOString(),
+      status: "sending",
+    };
+    messages.value[id] = mergeMessages(messages.value[id] ?? [], [optimistic]);
+    try {
+      const result = connected.value
+        ? await sendSocketMessage(
+            socket,
+            {
+              conversationId: id,
+              clientMsgId,
+              text,
+            },
+            api.refresh,
+          )
+        : await api.post<{ message: ChatMessage }>(
+            `/conversations/${id}/messages/prepare`,
+            { conversationId: id, clientMsgId, text },
+          );
+      messages.value[id] = mergeMessages(messages.value[id], [
+        { ...result.message, status: "sent" },
+      ]);
+    } catch (error) {
+      optimistic.status = "failed";
+      messages.value[id] = [...messages.value[id]];
+      throw error;
+    }
+  }
+  const unread = computed(() =>
+    conversations.value.reduce((sum, item) => sum + Number(item.unread), 0),
+  );
+  return {
+    conversations,
+    messages,
+    connected,
+    unread,
+    loadConversations,
+    loadMessages,
+    syncAll,
+    connect,
+    disconnect,
+    reset,
+    send,
+  };
+});
@@ -0,0 +1,33 @@
+import { describe, expect, it } from "vitest";
+import { mergeMessages, type ChatMessage } from "./messages";
+
+const message = (id: string, seq: string): ChatMessage => ({
+  id,
+  conversationId: "conversation",
+  sender: { publicId: "sender" },
+  clientMsgId: `client-${id}`,
+  seq,
+  text: id,
+  sentAt: "2026-09-17T00:00:00.000Z",
+  status: "sent",
+});
+
+describe("message synchronization", () => {
+  it("deduplicates socket and reconnect history messages and sorts by sequence", () => {
+    const result = mergeMessages(
+      [message("two", "2"), message("three", "3")],
+      [message("one", "1"), message("two", "2")],
+    );
+    expect(result.map(({ id }) => id)).toEqual(["one", "two", "three"]);
+  });
+
+  it("reconciles an optimistic message by client message id", () => {
+    const optimistic = {
+      ...message("temporary", "0"),
+      clientMsgId: "same",
+      status: "sending" as const,
+    };
+    const confirmed = { ...message("server", "4"), clientMsgId: "same" };
+    expect(mergeMessages([optimistic], [confirmed])).toEqual([confirmed]);
+  });
+});
@@ -0,0 +1,31 @@
+export interface ChatMessage {
+  id: string;
+  conversationId: string;
+  sender: { publicId: string };
+  clientMsgId: string;
+  seq: string;
+  text: string;
+  status: string;
+  reviewStatus?: string;
+  sentAt: string;
+}
+
+export function mergeMessages(
+  current: ChatMessage[],
+  incoming: ChatMessage[],
+): ChatMessage[] {
+  // 双 Map:按 id 去重 + 按 clientMsgId 调和乐观消息,整体 O(n)
+  const byId = new Map<string, ChatMessage>();
+  const byClientMsgId = new Map<string, string>();
+  const consider = (item: ChatMessage) => {
+    const existingId = byClientMsgId.get(item.clientMsgId);
+    if (existingId) byId.delete(existingId);
+    byClientMsgId.set(item.clientMsgId, item.id);
+    byId.set(item.id, item);
+  };
+  for (const item of current) consider(item);
+  for (const item of incoming) consider(item);
+  return [...byId.values()].sort((a, b) =>
+    BigInt(a.seq) < BigInt(b.seq) ? -1 : BigInt(a.seq) > BigInt(b.seq) ? 1 : 0,
+  );
+}
@@ -0,0 +1,545 @@
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=ZCOOL+XiaoWei&display=swap");
+:root {
+  font-family: "Noto Sans SC", system-ui, sans-serif;
+  color: #effcff;
+  background: #020b13;
+  --deep: #061b2b;
+  --panel: rgba(13, 48, 63, 0.72);
+  --line: rgba(139, 224, 218, 0.18);
+  --aqua: #76e4d5;
+  --sand: #f1c27d;
+  --muted: #91abb7;
+  --danger: #ff8f91;
+}
+* {
+  box-sizing: border-box;
+}
+html {
+  background: #020b13;
+}
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  background: radial-gradient(
+    circle at 50% 0,
+    #0b4050 0,
+    #061b2b 38%,
+    #020b13 100%
+  );
+  line-height: 1.55;
+}
+body:before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background-image: radial-gradient(
+    circle,
+    rgba(118, 228, 213, 0.22) 1px,
+    transparent 1px
+  );
+  background-size: 42px 42px;
+  mask-image: linear-gradient(#000, transparent 80%);
+}
+button,
+input,
+textarea,
+select,
+a {
+  font: inherit;
+}
+button,
+input,
+textarea,
+select,
+.primary,
+.secondary,
+.danger,
+.icon-link,
+.avatar {
+  min-height: 44px;
+}
+button,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+textarea:focus-visible,
+select:focus-visible {
+  outline: 3px solid var(--sand);
+  outline-offset: 3px;
+}
+.app-shell {
+  position: relative;
+  width: min(100%, 430px);
+  min-height: 100dvh;
+  margin: auto;
+  background: linear-gradient(
+    180deg,
+    rgba(6, 27, 43, 0.18),
+    rgba(2, 11, 19, 0.88)
+  );
+  box-shadow: 0 0 70px #000;
+  padding-bottom: 84px;
+  overflow: hidden;
+}
+main {
+  min-height: calc(100dvh - 84px);
+}
+.page,
+.list,
+.settings {
+  padding: 1rem 1.1rem;
+}
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.8rem;
+  padding: max(1rem, env(safe-area-inset-top)) 1.1rem 1rem;
+}
+.topbar h1 {
+  font:
+    500 1.4rem "ZCOOL XiaoWei",
+    serif;
+  margin: 0;
+}
+.topbar small,
+.eyebrow {
+  letter-spacing: 0.18em;
+  color: var(--aqua);
+  font-size: 0.68rem;
+}
+.icon-link,
+.avatar {
+  display: grid;
+  place-items: center;
+  min-width: 44px;
+  color: #fff;
+  text-decoration: none;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.08);
+}
+.avatar {
+  font-weight: 700;
+}
+.glass {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  backdrop-filter: blur(18px);
+  border-radius: 22px;
+  padding: 1.1rem;
+  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
+}
+.login {
+  padding: 8vh 1.1rem 2rem;
+}
+.hero {
+  padding: 2rem 0.3rem;
+}
+.hero h1,
+.page h2,
+.sea h2 {
+  font:
+    500 2.1rem/1.25 "ZCOOL XiaoWei",
+    serif;
+}
+.hero h1 em {
+  color: var(--sand);
+  font-style: normal;
+}
+.hero > p:last-child,
+.muted,
+.quota-note {
+  color: var(--muted);
+}
+.orb {
+  display: grid;
+  place-items: center;
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  background: rgba(118, 228, 213, 0.12);
+  color: var(--aqua);
+  box-shadow: 0 0 40px rgba(118, 228, 213, 0.25);
+}
+label {
+  display: grid;
+  gap: 0.45rem;
+  color: #cce0e6;
+  margin-bottom: 1rem;
+}
+input,
+textarea,
+select {
+  width: 100%;
+  color: #fff;
+  background: rgba(0, 10, 18, 0.56);
+  border: 1px solid var(--line);
+  border-radius: 13px;
+  padding: 0.72rem 0.85rem;
+  resize: vertical;
+}
+textarea::placeholder,
+input::placeholder {
+  color: #77919d;
+}
+.primary,
+.secondary,
+.danger {
+  display: grid;
+  place-items: center;
+  width: 100%;
+  border: 0;
+  border-radius: 14px;
+  padding: 0.7rem 1rem;
+  text-decoration: none;
+  font-weight: 700;
+  cursor: pointer;
+}
+.primary {
+  color: #032128;
+  background: linear-gradient(135deg, var(--aqua), #b8f3db);
+}
+.secondary {
+  color: var(--aqua);
+  background: rgba(118, 228, 213, 0.1);
+  border: 1px solid rgba(118, 228, 213, 0.3);
+}
+.danger {
+  color: #311016;
+  background: var(--danger);
+}
+button:disabled {
+  opacity: 0.48;
+}
+.text {
+  border: 0;
+  background: transparent;
+  color: var(--aqua);
+  padding: 0.5rem;
+}
+.error {
+  color: #ffd0d0;
+  background: rgba(255, 80, 90, 0.12);
+  border-radius: 12px;
+  padding: 0.7rem;
+}
+.demo {
+  color: var(--sand);
+  font-size: 0.9rem;
+}
+.sea {
+  position: relative;
+  padding: 1.5rem 1.1rem 2rem;
+}
+.moon {
+  position: absolute;
+  right: -35px;
+  top: -20px;
+  width: 150px;
+  height: 150px;
+  border-radius: 50%;
+  background: radial-gradient(
+    circle at 35% 35%,
+    #b8f3db,
+    #178998 58%,
+    transparent 61%
+  );
+  opacity: 0.22;
+}
+.actions {
+  display: grid;
+  gap: 1rem;
+  margin: 2rem 0;
+}
+.action {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  color: #fff;
+  text-decoration: none;
+  padding: 1.25rem;
+  border-radius: 22px;
+  border: 1px solid var(--line);
+  background: linear-gradient(
+    135deg,
+    rgba(118, 228, 213, 0.18),
+    rgba(5, 24, 38, 0.7)
+  );
+}
+.action b {
+  display: grid;
+  place-items: center;
+  width: 54px;
+  height: 54px;
+  border-radius: 18px;
+  background: rgba(118, 228, 213, 0.16);
+  font-size: 1.7rem;
+  color: var(--aqua);
+}
+.action span {
+  font-size: 1.05rem;
+  font-weight: 700;
+}
+.action small {
+  display: block;
+  color: var(--muted);
+  font-weight: 400;
+}
+.quote {
+  margin: 0 1.1rem;
+  text-align: center;
+  color: #c9e0e6;
+}
+.quota-note {
+  font-size: 0.78rem;
+}
+.between,
+.button-row,
+.author,
+.toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.8rem;
+}
+.button-row > * {
+  width: auto;
+  flex: 1;
+}
+.success,
+.empty-ocean {
+  margin: 4rem 1.1rem;
+  text-align: center;
+}
+.success > b,
+.bottle {
+  font-size: 3rem;
+  color: var(--aqua);
+}
+.bottle-card blockquote {
+  font:
+    500 1.5rem/1.6 "ZCOOL XiaoWei",
+    serif;
+  margin: 2rem 0.2rem;
+}
+.author {
+  justify-content: flex-start;
+}
+.author i {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+}
+.author small {
+  display: block;
+  color: var(--muted);
+}
+.list {
+  display: grid;
+  gap: 0.8rem;
+}
+.conversation {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 0.3rem;
+  color: #fff;
+  text-decoration: none;
+}
+.conversation p {
+  margin: 0.3rem 0;
+  color: var(--muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 260px;
+}
+.conversation time {
+  grid-column: 1;
+  font-size: 0.7rem;
+  color: var(--muted);
+}
+.badge,
+.pill {
+  border-radius: 99px;
+  background: rgba(118, 228, 213, 0.15);
+  color: var(--aqua);
+  padding: 0.22rem 0.55rem;
+  font-size: 0.72rem;
+}
+.chat {
+  display: flex;
+  flex-direction: column;
+  height: calc(100dvh - 10px);
+}
+.messages {
+  flex: 1;
+  overflow: auto;
+  padding: 1rem;
+}
+.bubble {
+  max-width: 82%;
+  margin: 0.7rem 0;
+  padding: 0.75rem 1rem;
+  border-radius: 18px 18px 18px 5px;
+  background: var(--panel);
+  border: 1px solid var(--line);
+}
+.bubble p {
+  margin: 0;
+}
+.bubble small {
+  color: var(--muted);
+}
+.bubble.sending {
+  opacity: 0.65;
+}
+.bubble.failed {
+  border-color: var(--danger);
+}
+.composer {
+  display: flex;
+  gap: 0.6rem;
+  padding: 0.8rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
+  background: #061b2b;
+}
+.composer textarea {
+  min-height: 48px;
+}
+.composer button {
+  min-width: 48px;
+  border: 0;
+  border-radius: 50%;
+  background: var(--aqua);
+  font-size: 1.5rem;
+}
+.dot {
+  font-size: 0.7rem;
+  color: var(--muted);
+}
+.dot.on {
+  color: var(--aqua);
+}
+.chat-actions {
+  display: flex;
+  align-items: center;
+  gap: 0.15rem;
+}
+.chat-actions .text {
+  min-width: 44px;
+}
+.report-dialog {
+  position: absolute;
+  z-index: 12;
+  top: 18%;
+  left: 1rem;
+  right: 1rem;
+  width: auto;
+  margin: 0;
+  color: #fff;
+  background: #0b2d3b;
+}
+.report-dialog::backdrop {
+  background: rgba(0, 0, 0, 0.65);
+}
+.bottle-row p {
+  font-family: "ZCOOL XiaoWei", serif;
+  font-size: 1.12rem;
+}
+.bottle-row time,
+.bottle-row small {
+  color: var(--muted);
+}
+pre {
+  white-space: pre-wrap;
+  word-break: break-all;
+  background: #020b13;
+  padding: 0.6rem;
+  border-radius: 10px;
+  color: #9fc3cc;
+}
+.segmented {
+  display: flex;
+  padding: 0 1rem 1rem;
+  gap: 0.3rem;
+}
+.segmented button {
+  flex: 1;
+  border: 1px solid var(--line);
+  background: var(--panel);
+  color: #fff;
+  border-radius: 12px;
+}
+.offline {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  text-align: center;
+  background: #f1c27d;
+  color: #2b1b05;
+  padding: 0.35rem;
+  font-size: 0.75rem;
+}
+.tabs {
+  position: fixed;
+  z-index: 8;
+  bottom: 0;
+  width: min(100%, 430px);
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  padding: 0.55rem 0.5rem calc(0.55rem + env(safe-area-inset-bottom));
+  background: rgba(3, 17, 28, 0.94);
+  backdrop-filter: blur(18px);
+  border-top: 1px solid var(--line);
+}
+.tabs a {
+  display: grid;
+  place-items: center;
+  color: var(--muted);
+  text-decoration: none;
+  font-size: 0.78rem;
+}
+.tabs a[aria-current="page"] {
+  color: var(--aqua);
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+}
+code {
+  color: var(--sand);
+}
+@media (min-width: 700px) {
+  body {
+    padding: 2rem 0;
+  }
+  .app-shell {
+    min-height: calc(100dvh - 4rem);
+    border-radius: 32px;
+  }
+  .tabs {
+    bottom: 2rem;
+    border-radius: 0 0 32px 32px;
+  }
+  .chat {
+    height: calc(100dvh - 4rem);
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  .orb,
+  .bottle {
+    animation: float 4s ease-in-out infinite;
+  }
+  @keyframes float {
+    50% {
+      transform: translateY(-8px);
+    }
+  }
+}
@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useAuthStore } from "../stores/auth";
+
+const auth = useAuthStore();
+const route = useRoute();
+const router = useRouter();
+const phone = ref("");
+const code = ref("");
+const debugCode = ref("");
+const sent = ref(false);
+const busy = ref(false);
+const error = ref(
+  route.query.error === "forbidden" ? "当前账号没有管理员权限" : "",
+);
+const deviceId = `admin-web-${crypto.randomUUID()}`;
+const validPhone = computed(() =>
+  /^(?:\+?86)?1\d{10}$/.test(phone.value.replace(/\s/g, "")),
+);
+
+async function send() {
+  busy.value = true;
+  error.value = "";
+  try {
+    const result = await auth.sendCode(phone.value, deviceId);
+    sent.value = true;
+    debugCode.value = result.debugCode ?? "";
+  } catch (reason) {
+    error.value = reason instanceof Error ? reason.message : "发送失败";
+  } finally {
+    busy.value = false;
+  }
+}
+
+async function login() {
+  busy.value = true;
+  error.value = "";
+  try {
+    await auth.login(phone.value, code.value, deviceId);
+    await auth.ensureAdmin();
+    await router.replace("/admin");
+  } catch (reason: unknown) {
+    error.value =
+      typeof reason === "object" &&
+      reason !== null &&
+      "status" in reason &&
+      reason.status === 403
+        ? "当前账号没有管理员权限"
+        : reason instanceof Error
+          ? reason.message
+          : "管理员登录失败";
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+
+<template>
+  <main class="login admin-login">
+    <section class="hero">
+      <p class="eyebrow">ADMIN / 治理后台</p>
+      <h1>管理员登录</h1>
+      <p>独立审核与举报处置入口。仅已授权管理员账号可进入。</p>
+    </section>
+    <form class="glass" @submit.prevent="sent ? login() : send()">
+      <label
+        >管理员手机号<input
+          v-model="phone"
+          autocomplete="tel"
+          inputmode="tel"
+          required
+      /></label>
+      <label v-if="sent"
+        >演示验证码<input
+          v-model="code"
+          autocomplete="one-time-code"
+          inputmode="numeric"
+          maxlength="6"
+          required
+      /></label>
+      <p v-if="debugCode" class="demo">
+        开发环境演示验证码：<strong>{{ debugCode }}</strong>
+      </p>
+      <p v-if="error" class="error" role="alert">{{ error }}</p>
+      <button class="primary" :disabled="busy || !validPhone">
+        {{ busy ? "请稍候…" : sent ? "进入治理后台" : "获取演示验证码" }}
+      </button>
+    </form>
+  </main>
+</template>
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import AppHeader from "../components/AppHeader.vue";
+import { api } from "../stores/auth";
+import { createOperationState } from "./operation";
+const operations = createOperationState();
+const reports = ref<any[]>([]),
+  tasks = ref<any[]>([]),
+  error = operations.error,
+  tab = ref<"reports" | "moderation" | "sanction">("reports"),
+  publicId = ref(""),
+  reason = ref(""),
+  type = ref("WARNING");
+async function load() {
+  error.value = "";
+  try {
+    const [r, m] = await Promise.all([
+      api.get<any>("/admin/reports?limit=100"),
+      api.get<any>("/admin/moderation?limit=100"),
+    ]);
+    reports.value = r.items;
+    tasks.value = m.items;
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "无管理员权限";
+  }
+}
+onMounted(load);
+async function resolve(id: string, decision: "UPHELD" | "DISMISSED") {
+  await operations.run(`report:${id}`, async () => {
+    await api.post(`/admin/reports/${id}/resolve`, {
+      decision,
+      resolution: decision === "UPHELD" ? "管理员确认违规" : "管理员驳回举报",
+    });
+    await load();
+  });
+}
+async function moderate(id: string, decision: "APPROVED" | "REJECTED") {
+  await operations.run(`moderation:${id}`, async () => {
+    await api.post(`/admin/moderation/${id}/resolve`, {
+      decision,
+      reason: "管理员人工审核",
+    });
+    await load();
+  });
+}
+async function sanction() {
+  await operations.run("sanction", async () => {
+    await api.post(`/admin/accounts/${publicId.value}/sanctions`, {
+      type: type.value,
+      reason: reason.value,
+    });
+    reason.value = "";
+    publicId.value = "";
+  });
+}
+</script>
+<template>
+  <main class="admin">
+    <AppHeader title="管理员工作台" back />
+    <p v-if="error" class="error page" role="alert">{{ error }}</p>
+    <nav class="segmented">
+      <button @click="tab = 'reports'">举报 {{ reports.length }}</button
+      ><button @click="tab = 'moderation'">复审 {{ tasks.length }}</button
+      ><button @click="tab = 'sanction'">处罚</button>
+    </nav>
+    <section v-if="tab === 'reports'" class="list">
+      <article v-for="item in reports" :key="item.id" class="glass">
+        <div class="between">
+          <b>{{ item.reason }}</b
+          ><span class="pill">{{ item.status }}</span>
+        </div>
+        <p>{{ item.details || "无补充说明" }}</p>
+        <pre>{{ JSON.stringify(item.targetSnapshot, null, 2) }}</pre>
+        <div class="button-row">
+          <button
+            class="secondary"
+            :disabled="operations.pending(`report:${item.id}`)"
+            @click="resolve(item.id, 'DISMISSED')"
+          >
+            驳回</button
+          ><button
+            class="danger"
+            :disabled="operations.pending(`report:${item.id}`)"
+            @click="resolve(item.id, 'UPHELD')"
+          >
+            确认违规
+          </button>
+        </div>
+      </article>
+    </section>
+    <section v-else-if="tab === 'moderation'" class="list">
+      <article v-for="item in tasks" :key="item.id" class="glass">
+        <b>{{ item.targetType }} · {{ item.targetId }}</b>
+        <p>风险标签：{{ item.riskLabels.join("、") || "无" }}</p>
+        <div class="button-row">
+          <button
+            class="secondary"
+            :disabled="operations.pending(`moderation:${item.id}`)"
+            @click="moderate(item.id, 'APPROVED')"
+          >
+            通过</button
+          ><button
+            class="danger"
+            :disabled="operations.pending(`moderation:${item.id}`)"
+            @click="moderate(item.id, 'REJECTED')"
+          >
+            拒绝
+          </button>
+        </div>
+      </article>
+    </section>
+    <form v-else class="glass page" @submit.prevent="sanction">
+      <h2>独立账号处罚</h2>
+      <label>公开用户 ID<input v-model="publicId" required /></label
+      ><label
+        >处罚类型<select v-model="type">
+          <option>WARNING</option>
+          <option>MUTE</option>
+          <option>SUSPENSION</option>
+          <option>BAN</option>
+        </select></label
+      ><label
+        >原因<textarea
+          v-model="reason"
+          maxlength="500"
+          required
+        ></textarea></label
+      ><button class="danger" :disabled="operations.pending('sanction')">
+        {{ operations.pending("sanction") ? "处理中…" : "实施处罚" }}
+      </button>
+    </form>
+  </main>
+</template>
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import AppHeader from "../components/AppHeader.vue";
+import { api } from "../stores/auth";
+const text = ref(""),
+  busy = ref(false),
+  result = ref<any>(null),
+  error = ref("");
+async function submit() {
+  if (!navigator.onLine) {
+    error.value = "当前离线，瓶子没有投递。";
+    return;
+  }
+  busy.value = true;
+  error.value = "";
+  try {
+    result.value = await api.post(
+      "/bottles",
+      { contentText: text.value },
+      { "Idempotency-Key": crypto.randomUUID() },
+    );
+    text.value = "";
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "投递失败";
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+<template>
+  <main>
+    <AppHeader title="写一只瓶子" back />
+    <section v-if="!result" class="page">
+      <p class="eyebrow">THROW / 投递</p>
+      <h2>把一句话交给洋流</h2>
+      <form class="glass" @submit.prevent="submit">
+        <label
+          >瓶中内容<textarea
+            v-model="text"
+            maxlength="1000"
+            rows="9"
+            placeholder="写下你想让陌生人看到的话…"
+            required
+          ></textarea>
+        </label>
+        <div class="between">
+          <small>{{ text.length }} / 1000</small><span>匿名投递</span>
+        </div>
+        <p v-if="error" class="error" role="alert">{{ error }}</p>
+        <button class="primary" :disabled="busy || !text.trim()">
+          {{ busy ? "正在投递…" : "扔进海里" }}
+        </button>
+      </form>
+    </section>
+    <section v-else class="success glass">
+      <b>✓</b>
+      <h2>瓶子已进入审核</h2>
+      <p>审核通过后才会进入海面。你可以在“我的瓶子”查看真实状态。</p>
+      <RouterLink class="primary" to="/my-bottles">查看我的瓶子</RouterLink>
+    </section>
+  </main>
+</template>
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import { useRoute } from "vue-router";
+import AppHeader from "../components/AppHeader.vue";
+import StatusPanel from "../components/StatusPanel.vue";
+import { api } from "../stores/auth";
+import { useChatStore } from "../stores/chat";
+const route = useRoute(),
+  chat = useChatStore(),
+  id = String(route.params.id),
+  text = ref(""),
+  loading = ref(true),
+  error = ref("");
+const items = computed(() => chat.messages[id] ?? []);
+onMounted(async () => {
+  try {
+    await chat.loadMessages(id);
+    chat.connect();
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "加载失败";
+  } finally {
+    loading.value = false;
+  }
+});
+const reportOpen = ref(false);
+const reportReason = ref("HARASSMENT");
+const reportDetails = ref("");
+async function blockPeer() {
+  if (!confirm("拉黑后双方将不能继续聊天，确认吗？")) return;
+  try {
+    await api.post(`/conversations/${id}/block`);
+    error.value = "已拉黑对方，本会话不能继续发送消息。";
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "拉黑失败";
+  }
+}
+async function reportConversation() {
+  try {
+    await api.post(
+      "/reports",
+      {
+        targetType: "CONVERSATION",
+        targetId: id,
+        reason: reportReason.value,
+        ...(reportDetails.value.trim()
+          ? { details: reportDetails.value.trim() }
+          : {}),
+      },
+      { "Idempotency-Key": crypto.randomUUID() },
+    );
+    reportOpen.value = false;
+    error.value = "举报已提交审核。";
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "举报失败";
+  }
+}
+async function send() {
+  const value = text.value.trim();
+  if (!value) return;
+  text.value = "";
+  try {
+    await chat.send(id, value);
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "发送失败";
+  }
+}
+</script>
+<template>
+  <main class="chat">
+    <AppHeader title="深海回声" back>
+      <div class="chat-actions">
+        <span class="dot" :class="{ on: chat.connected }">{{
+          chat.connected ? "实时" : "同步中"
+        }}</span>
+        <button class="text" aria-label="举报会话" @click="reportOpen = true">
+          举报
+        </button>
+        <button class="text" aria-label="拉黑对方" @click="blockPeer">
+          拉黑
+        </button>
+      </div>
+    </AppHeader>
+    <dialog :open="reportOpen" class="glass report-dialog">
+      <form @submit.prevent="reportConversation">
+        <h2>举报会话</h2>
+        <label
+          >原因<select v-model="reportReason">
+            <option>HARASSMENT</option>
+            <option>SPAM</option>
+            <option>SEXUAL</option>
+            <option>VIOLENCE</option>
+            <option>FRAUD</option>
+            <option>OTHER</option>
+          </select></label
+        >
+        <label
+          >补充说明<textarea
+            v-model="reportDetails"
+            maxlength="1000"
+            rows="3"
+          />
+        </label>
+        <div class="button-row">
+          <button type="button" class="secondary" @click="reportOpen = false">
+            取消</button
+          ><button class="danger">提交举报</button>
+        </div>
+      </form>
+    </dialog>
+    <StatusPanel v-if="loading" state="loading" />
+    <section v-else class="messages">
+      <p v-if="error" class="error" role="alert">{{ error }}</p>
+      <article v-for="m in items" :key="m.id" class="bubble" :class="m.status">
+        <p>{{ m.text }}</p>
+        <small
+          >#{{ m.seq }} ·
+          {{
+            m.status === "sending"
+              ? "发送中"
+              : m.status === "failed"
+                ? "发送失败"
+                : "已送达"
+          }}</small
+        >
+      </article>
+    </section>
+    <form class="composer" @submit.prevent="send">
+      <label class="sr-only">消息</label
+      ><textarea
+        v-model="text"
+        maxlength="1000"
+        rows="1"
+        placeholder="写下回声…"
+        required
+      ></textarea
+      ><button aria-label="发送消息">↑</button>
+    </form>
+  </main>
+</template>
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import AppHeader from "../components/AppHeader.vue";
+import StatusPanel from "../components/StatusPanel.vue";
+import { useChatStore } from "../stores/chat";
+const chat = useChatStore(),
+  loading = ref(true),
+  error = ref("");
+onMounted(async () => {
+  try {
+    await chat.loadConversations();
+    chat.connect();
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "加载失败";
+  } finally {
+    loading.value = false;
+  }
+});
+</script>
+<template>
+  <main>
+    <AppHeader title="回声"
+      ><span class="pill">{{ chat.unread }} 未读</span></AppHeader
+    ><StatusPanel v-if="loading" state="loading" /><StatusPanel
+      v-else-if="error"
+      state="error"
+      :detail="error"
+    /><StatusPanel v-else-if="!chat.conversations.length" state="empty" />
+    <section v-else class="list">
+      <RouterLink
+        v-for="item in chat.conversations"
+        :key="item.id"
+        :to="`/conversations/${item.id}`"
+        class="conversation glass"
+        ><div>
+          <b>匿名会话</b>
+          <p>
+            {{ item.lastMessage?.text ?? "新的相遇" }}
+          </p>
+        </div>
+        <span v-if="Number(item.unread)" class="badge">{{ item.unread }}</span
+        ><time>{{
+          new Date(item.lastMessageAt).toLocaleDateString()
+        }}</time></RouterLink
+      >
+    </section>
+  </main>
+</template>
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import AppHeader from "../components/AppHeader.vue";
+import { useAuthStore } from "../stores/auth";
+const auth = useAuthStore();
+</script>
+<template>
+  <main>
+    <AppHeader title="海面"
+      ><RouterLink
+        class="avatar"
+        to="/settings"
+        :style="{ background: auth.me?.avatarColor ?? '#4fd1c5' }"
+        aria-label="打开设置"
+        >{{ auth.me?.nickname?.slice(0, 1) ?? "○" }}</RouterLink
+      ></AppHeader
+    >
+    <section class="sea">
+      <div class="moon"></div>
+      <p class="eyebrow">今晚的洋流很安静</p>
+      <h2>{{ auth.me?.nickname ?? "匿名旅人" }}，想留下些什么？</h2>
+      <div class="actions">
+        <RouterLink to="/throw" class="action throw"
+          ><b>↗</b
+          ><span>扔一只瓶子<small>每日上限 10 次</small></span></RouterLink
+        ><RouterLink to="/pick" class="action pick"
+          ><b>⌁</b
+          ><span>捞一只瓶子<small>每日上限 20 次</small></span></RouterLink
+        >
+      </div>
+      <p class="quota-note">
+        服务端尚未提供当日用量查询；此处只展示规则上限，不伪造剩余次数。
+      </p>
+    </section>
+    <section class="glass quote">
+      <p>“有些话不需要目的地，<br />只需要被海浪接住。”</p>
+    </section>
+  </main>
+</template>
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useAuthStore } from "../stores/auth";
+const auth = useAuthStore(),
+  route = useRoute(),
+  router = useRouter();
+const phone = ref(""),
+  code = ref(""),
+  debugCode = ref(""),
+  sent = ref(false),
+  busy = ref(false),
+  error = ref("");
+const deviceId = (() => {
+  const key = "drift-device-id";
+  let id = localStorage.getItem(key);
+  if (!id) {
+    id = `web-${crypto.randomUUID()}`;
+    localStorage.setItem(key, id);
+  }
+  return id;
+})();
+const validPhone = computed(() =>
+  /^(?:\+?86)?1\d{10}$/.test(phone.value.replace(/\s/g, "")),
+);
+async function send() {
+  busy.value = true;
+  error.value = "";
+  try {
+    const r = await auth.sendCode(phone.value, deviceId);
+    sent.value = true;
+    debugCode.value = r.debugCode ?? "";
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "发送失败";
+  } finally {
+    busy.value = false;
+  }
+}
+async function login() {
+  busy.value = true;
+  error.value = "";
+  try {
+    await auth.login(phone.value, code.value, deviceId);
+    await router.replace(
+      typeof route.query.redirect === "string" ? route.query.redirect : "/",
+    );
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "登录失败";
+  } finally {
+    busy.value = false;
+  }
+}
+</script>
+<template>
+  <main class="login">
+    <section class="hero">
+      <span class="orb">◉</span>
+      <p class="eyebrow">DRIFT / 漂流瓶</p>
+      <h1>听见深海里的<br /><em>一束回声</em></h1>
+      <p>匿名投递，偶然相遇。每次打开都是真实连接。</p>
+    </section>
+    <form class="glass" @submit.prevent="sent ? login() : send()">
+      <label
+        >手机号<input
+          v-model="phone"
+          autocomplete="tel"
+          inputmode="tel"
+          placeholder="+86 138 0000 0000"
+          required /></label
+      ><label v-if="sent"
+        >演示验证码<input
+          v-model="code"
+          autocomplete="one-time-code"
+          inputmode="numeric"
+          maxlength="6"
+          placeholder="6 位验证码"
+          required
+      /></label>
+      <p v-if="debugCode" class="demo">
+        开发环境演示验证码：<strong>{{ debugCode }}</strong>
+      </p>
+      <p v-if="error" class="error" role="alert">{{ error }}</p>
+      <button class="primary" :disabled="busy || !validPhone">
+        {{ busy ? "请稍候…" : sent ? "进入海面" : "获取演示验证码" }}</button
+      ><button v-if="sent" type="button" class="text" @click="sent = false">
+        更换手机号
+      </button>
+    </form>
+  </main>
+</template>
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import AppHeader from "../components/AppHeader.vue";
+import StatusPanel from "../components/StatusPanel.vue";
+import { api } from "../stores/auth";
+const items = ref<any[]>([]),
+  loading = ref(true),
+  error = ref("");
+onMounted(async () => {
+  try {
+    items.value = (await api.get<any>("/me/bottles?limit=50")).items;
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "加载失败";
+  } finally {
+    loading.value = false;
+  }
+});
+const labels: Record<string, string> = {
+  REVIEWING: "审核中",
+  MANUAL_REVIEW: "人工复审",
+  APPROVED: "已通过",
+  REJECTED: "未通过",
+};
+</script>
+<template>
+  <main>
+    <AppHeader title="我的瓶子" /><StatusPanel
+      v-if="loading"
+      state="loading"
+    /><StatusPanel
+      v-else-if="error"
+      state="error"
+      :detail="error"
+    /><StatusPanel v-else-if="!items.length" state="empty" />
+    <section v-else class="list">
+      <article v-for="item in items" :key="item.id" class="glass bottle-row">
+        <div class="between">
+          <span class="pill">{{
+            labels[item.reviewStatus] ?? item.reviewStatus
+          }}</span
+          ><time>{{ new Date(item.createdAt).toLocaleDateString() }}</time>
+        </div>
+        <p>{{ item.contentText }}</p>
+        <small>池状态：{{ item.poolStatus }}</small>
+      </article>
+    </section>
+  </main>
+</template>
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import AppHeader from "../components/AppHeader.vue";
+import { api } from "../stores/auth";
+const router = useRouter();
+const busy = ref(false),
+  error = ref(""),
+  picked = ref<any>(null),
+  reply = ref("");
+async function pick() {
+  if (!navigator.onLine) {
+    error.value = "当前离线，无法捞瓶。";
+    return;
+  }
+  busy.value = true;
+  error.value = "";
+  try {
+    picked.value = await api.post("/bottles/pick", undefined, {
+      "Idempotency-Key": crypto.randomUUID(),
+    });
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : "海面暂时没有瓶子";
+  } finally {
+    busy.value = false;
+  }
+}
+async function back() {
+  await api.post(`/bottles/${picked.value.bottle.id}/return`, {
+    leaseId: picked.value.lease.id,
+    token: picked.value.lease.token,
+  });
+  picked.value = null;
+}
+async function answer() {
+  const r = await api.post<any>(`/bottles/${picked.value.bottle.id}/reply`, {
+    leaseId: picked.value.lease.id,
+    leaseToken: picked.value.lease.token,
+    clientMsgId: crypto.randomUUID(),
+    text: reply.value,
+  });
+  await router.push(`/conversations/${r.conversationId}`);
+}
+</script>
+<template>
+  <main>
+    <AppHeader title="捞一只瓶子" back />
+    <section class="page">
+      <div v-if="!picked" class="empty-ocean">
+        <div class="bottle">⌁</div>
+        <h2>让洋流替你选择</h2>
+        <p>不会捞到自己、拉黑对象或已经见过的瓶子。</p>
+        <p v-if="error" class="error" role="alert">{{ error }}</p>
+        <button class="primary" :disabled="busy" @click="pick">
+          {{ busy ? "正在寻找…" : "伸手捞取" }}
+        </button>
+      </div>
+      <article v-else class="glass bottle-card">
+        <div class="author">
+          <i :style="{ background: picked.author.avatarColor }"></i>
+          <div>
+            <b>{{ picked.author.nickname }}</b
+            ><small>{{ picked.author.bio || "匿名海客" }}</small>
+          </div>
+        </div>
+        <blockquote>{{ picked.bottle.contentText }}</blockquote>
+        <form @submit.prevent="answer">
+          <label
+            >第一句回复<textarea
+              v-model="reply"
+              maxlength="1000"
+              rows="4"
+              required
+            ></textarea></label
+          ><button class="primary" :disabled="!reply.trim()">
+            回复并建立会话
+          </button>
+        </form>
+        <button class="secondary" @click="back">放回海里</button>
+      </article>
+    </section>
+  </main>
+</template>
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useRouter } from "vue-router";
+import AppHeader from "../components/AppHeader.vue";
+import { api, useAuthStore } from "../stores/auth";
+const auth = useAuthStore(),
+  router = useRouter(),
+  blocks = ref<any[]>([]),
+  enabled = ref(true),
+  nickname = ref(""),
+  bio = ref(""),
+  color = ref("#4fd1c5"),
+  message = ref("");
+onMounted(async () => {
+  nickname.value = auth.me?.nickname ?? "";
+  bio.value = auth.me?.bio ?? "";
+  color.value = auth.me?.avatarColor ?? "#4fd1c5";
+  const [b, p] = await Promise.all([
+    api.get<any>("/me/blocks"),
+    api.get<any>("/settings/push"),
+  ]);
+  blocks.value = b.items;
+  enabled.value = p.inAppEnabled;
+});
+async function saveProfile() {
+  await api.patch("/me/anonymous-profile", {
+    nickname: nickname.value,
+    avatarColor: color.value,
+    bio: bio.value || null,
+  });
+  message.value = "资料已提交审核";
+}
+async function preference() {
+  await api.put("/settings/push", { inAppEnabled: enabled.value });
+  message.value = "通知偏好已保存";
+}
+async function unblock(id: string) {
+  await api.delete(`/me/blocks/${id}`);
+  blocks.value = blocks.value.filter((x) => x.publicId !== id);
+}
+async function logout() {
+  await auth.logout();
+  await router.replace("/login");
+}
+</script>
+<template>
+  <main>
+    <AppHeader title="设置" />
+    <section class="page settings">
+      <form class="glass" @submit.prevent="saveProfile">
+        <h2>匿名资料</h2>
+        <label>昵称<input v-model="nickname" maxlength="64" required /></label
+        ><label>头像色<input v-model="color" type="color" required /></label
+        ><label
+          >简介<textarea
+            v-model="bio"
+            maxlength="500"
+            rows="3"
+          ></textarea></label
+        ><button class="secondary">保存资料</button>
+      </form>
+      <section class="glass">
+        <h2>通知偏好</h2>
+        <label class="toggle"
+          ><span>站内通知<small>浏览器内提醒，不等同系统 Push</small></span
+          ><input v-model="enabled" type="checkbox" @change="preference"
+        /></label>
+      </section>
+      <section class="glass">
+        <h2>黑名单</h2>
+        <p v-if="!blocks.length" class="muted">没有已拉黑用户</p>
+        <div v-for="item in blocks" :key="item.publicId" class="between">
+          <code>{{ item.publicId.slice(0, 8) }}…</code
+          ><button class="text" @click="unblock(item.publicId)">解除</button>
+        </div>
+      </section>
+      <p v-if="message" role="status">{{ message }}</p>
+      <button class="danger" @click="logout">退出登录</button>
+    </section>
+  </main>
+</template>
@@ -0,0 +1,28 @@
+import { describe, expect, it, vi } from "vitest";
+import { createOperationState } from "./operation";
+
+describe("operation state", () => {
+  it("blocks duplicate submissions and exposes 4xx feedback", async () => {
+    let reject!: (reason: unknown) => void;
+    const action = vi.fn(
+      () =>
+        new Promise<void>((_resolve, nextReject) => {
+          reject = nextReject;
+        }),
+    );
+    const state = createOperationState();
+    const first = state.run("report:r-1", action);
+    const duplicate = state.run("report:r-1", action);
+    expect(action).toHaveBeenCalledOnce();
+    expect(state.pending("report:r-1")).toBe(true);
+    reject(
+      Object.assign(new Error("Report already resolved"), { status: 409 }),
+    );
+    await expect(first).rejects.toThrow("Report already resolved");
+    await expect(duplicate).rejects.toThrow("Report already resolved");
+    expect(state.pending("report:r-1")).toBe(false);
+    expect(state.error.value).toBe(
+      "操作冲突：该项目可能已被处理，请刷新后重试",
+    );
+  });
+});
@@ -0,0 +1,37 @@
+import { ref } from "vue";
+
+export function createOperationState() {
+  const active = new Map<string, Promise<unknown>>();
+  const error = ref("");
+
+  function pending(key: string) {
+    return active.has(key);
+  }
+
+  function run<T>(key: string, action: () => Promise<T>): Promise<T> {
+    const existing = active.get(key) as Promise<T> | undefined;
+    if (existing) return existing;
+    error.value = "";
+    const operation = action()
+      .catch((reason: unknown) => {
+        const status =
+          typeof reason === "object" && reason !== null && "status" in reason
+            ? reason.status
+            : undefined;
+        error.value =
+          status === 409
+            ? "操作冲突：该项目可能已被处理，请刷新后重试"
+            : status === 403
+              ? "无权执行此管理操作"
+              : reason instanceof Error
+                ? reason.message
+                : "管理操作失败";
+        throw reason;
+      })
+      .finally(() => active.delete(key));
+    active.set(key, operation);
+    return operation;
+  }
+
+  return { error, pending, run };
+}
@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "composite": false,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": ["vite/client", "vitest/globals", "@testing-library/jest-dom"]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.vue",
+    "vite.config.ts",
+    "vitest.config.ts"
+  ]
+}
@@ -0,0 +1,61 @@
+import vue from "@vitejs/plugin-vue";
+import { defineConfig } from "vite";
+import { VitePWA } from "vite-plugin-pwa";
+export default defineConfig({
+  plugins: [
+    vue(),
+    VitePWA({
+      // E2E 跑产物时关闭 Service Worker,避免缓存干扰断言
+      disable: process.env.DISABLE_PWA === "1",
+      registerType: "autoUpdate",
+      manifest: {
+        name: "漂流瓶 · 深海回声",
+        short_name: "漂流瓶",
+        description: "匿名漂流瓶社交 PWA",
+        theme_color: "#061b2b",
+        background_color: "#04111d",
+        display: "standalone",
+        start_url: "/",
+        icons: [
+          {
+            src: "/icon.svg",
+            sizes: "any",
+            type: "image/svg+xml",
+            purpose: "any maskable",
+          },
+        ],
+      },
+      workbox: { navigateFallback: "/index.html", runtimeCaching: [] },
+    }),
+  ],
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://127.0.0.1:3000",
+        changeOrigin: true,
+        headers: { Origin: "http://127.0.0.1:5173" },
+      },
+      "/socket.io": {
+        target: "http://127.0.0.1:3000",
+        ws: true,
+        headers: { Origin: "http://127.0.0.1:5173" },
+      },
+    },
+  },
+  // E2E 跑产物预览时同样需要把 /api 与 /socket.io 代理到 API,
+  // 并由代理注入 Origin,满足 StateChangingOriginGuard 的校验。
+  preview: {
+    proxy: {
+      "/api": {
+        target: "http://127.0.0.1:3000",
+        changeOrigin: true,
+        headers: { Origin: "http://127.0.0.1:5173" },
+      },
+      "/socket.io": {
+        target: "http://127.0.0.1:3000",
+        ws: true,
+        headers: { Origin: "http://127.0.0.1:5173" },
+      },
+    },
+  },
+});
@@ -0,0 +1,11 @@
+import vue from "@vitejs/plugin-vue";
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  plugins: [vue()],
+  test: {
+    environment: "jsdom",
+    setupFiles: ["./src/test/setup.ts"],
+    restoreMocks: true,
+  },
+});
@@ -8,6 +8,7 @@
    "test:database": "vitest run tests/integration/database.spec.ts",
    "test:integration": "vitest run tests/integration --no-file-parallelism && corepack pnpm --filter @drift/api exec vitest run --config vitest.config.ts src/safety/safety-admin.e2e-spec.ts --no-file-parallelism",
    "test:security": "corepack pnpm --filter @drift/api exec vitest run --config vitest.config.ts src/safety/safety-admin.e2e-spec.ts src/auth/auth.e2e-spec.ts src/conversation/conversation.e2e-spec.ts --no-file-parallelism",
+    "test:e2e": "playwright test",
    "typecheck": "tsc --noEmit -p tsconfig.base.json",
    "lint": "eslint . --ext .ts --max-warnings 0 && prettier --check .",
    "build": "corepack pnpm prisma generate && corepack pnpm --recursive run build",
@@ -26,6 +27,7 @@
    }
  },
  "devDependencies": {
+    "@playwright/test": "^1.63.0",
    "@types/node": "22.19.3",
    "@typescript-eslint/eslint-plugin": "^8.18.0",
    "@typescript-eslint/parser": "^8.18.0",
@@ -0,0 +1,46 @@
+import { defineConfig, devices } from "@playwright/test";
+
+// 浏览器用例跑构建产物(vite preview),不再用按需转译的 dev server:
+// dev server 每次整页加载要拉数百个模块,Chromium 会以
+// ERR_INSUFFICIENT_RESOURCES 放弃加载,页面根本挂载不起来。
+const PORT = Number(process.env.WEB_PORT ?? 4173);
+
+export default defineConfig({
+  testDir: "./tests/e2e",
+  globalSetup: "./tests/e2e/global-setup.ts",
+  // 双用户用例需要等 Worker 审核资料/瓶子(每个 1-2s)+ 两次登录,
+  // 60s 不够,会在用例中途被拆除 context 而误报失败。
+  timeout: 150_000,
+  expect: { timeout: 15_000 },
+  fullyParallel: false,
+  workers: 1,
+  retries: process.env.CI ? 2 : 0,
+  reporter: [["list"]],
+  use: {
+    baseURL: `http://127.0.0.1:${PORT}`,
+    trace: "retain-on-failure",
+    screenshot: "only-on-failure",
+    video: "off",
+  },
+  // 由 Playwright 保证被测前端可用:先构建(关闭 Service Worker,避免缓存
+  // 干扰断言),再起 preview。服务中途消失会让整轮报 ERR_CONNECTION_REFUSED,
+  // 交由 Playwright 管理可避免这类假失败。
+  webServer: {
+    command: `DISABLE_PWA=1 corepack pnpm --filter @drift/web exec vite build && corepack pnpm --filter @drift/web exec vite preview --host 127.0.0.1 --port ${PORT} --strictPort`,
+    url: `http://127.0.0.1:${PORT}`,
+    reuseExistingServer: !process.env.CI,
+    timeout: 240_000,
+  },
+  projects: [
+    {
+      name: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+        // 该机器内存较小,避免 /dev/shm 与多余缓存把渲染进程拖垮
+        launchOptions: {
+          args: ["--disable-dev-shm-usage", "--disable-gpu"],
+        },
+      },
+    },
+  ],
+});
@@ -0,0 +1,105 @@
+import { test, expect } from "./fixtures";
+import { E2E_ADMIN } from "./global-setup";
+import { freshAccount, loginViaUi, smsAndLogin, pickBottle } from "./helpers";
+
+test.describe("admin governance", () => {
+  test("admin login is guarded, reports are resolved with audit, sanction applies", async ({
+    browser,
+    request,
+  }) => {
+    // 预置管理员账号(global-setup),用 demo 登录拿到 accessToken
+    const adminSession = await smsAndLogin(request, E2E_ADMIN);
+    expect(adminSession.accessToken).toBeTruthy();
+    const adminHeaders = {
+      authorization: `Bearer ${adminSession.accessToken}`,
+      "content-type": "application/json",
+    };
+
+    // 制造举报:Alice 投瓶,Bob 捞瓶回复后举报会话
+    const aliceAccount = freshAccount("147");
+    const ctxAlice = await browser.newContext();
+    const alicePage = await ctxAlice.newPage();
+    await loginViaUi(alicePage, aliceAccount);
+    await alicePage.goto("/throw");
+    await alicePage
+      .getByPlaceholder("写下你想让陌生人看到的话…")
+      .fill(`治理测试会话 ${Date.now()}`);
+    await alicePage.getByRole("button", { name: /扔进海里/ }).click();
+    await expect(alicePage.getByText(/瓶子已进入审核/)).toBeVisible();
+
+    const bobAccount = freshAccount("145");
+    const ctxBob = await browser.newContext();
+    const bobPage = await ctxBob.newPage();
+    await loginViaUi(bobPage, bobAccount);
+    await bobPage.goto("/pick");
+    await pickBottle(bobPage);
+    await bobPage.locator(".bottle-card textarea").fill("这条消息将被举报");
+    await bobPage.getByRole("button", { name: /回复并建立会话/ }).click();
+    await expect(bobPage).toHaveURL(/\/conversations\//, { timeout: 15_000 });
+
+    // Bob 举报该会话
+    await bobPage.getByRole("button", { name: /举报会话/ }).click();
+    await bobPage.getByRole("button", { name: "提交举报" }).click();
+    await expect(bobPage.getByText(/举报已提交审核/)).toBeVisible();
+
+    // 管理员查看待审举报并处置
+    const after = await request.get(
+      "/api/v1/admin/reports?status=PENDING&limit=5",
+      { headers: adminHeaders },
+    );
+    expect(after.ok()).toBeTruthy();
+    const afterBody = (await after.json()) as {
+      data?: { items?: Array<{ id: string }> };
+    };
+    const pending = afterBody.data?.items ?? [];
+    expect(pending.length).toBeGreaterThan(0);
+    const report = pending[0]!;
+
+    const resolve = await request.post(
+      `/api/v1/admin/reports/${report.id}/resolve`,
+      {
+        headers: adminHeaders,
+        data: { decision: "DISMISSED", resolution: "E2E 无违规" },
+      },
+    );
+    expect(resolve.ok()).toBeTruthy();
+
+    // 独立处罚:为 Bob 的公开 ID 施加警告
+    const aliceMe = await request.get("/api/v1/me", {
+      headers: {
+        authorization: `Bearer ${
+          (await smsAndLogin(request, aliceAccount)).accessToken
+        }`,
+      },
+    });
+    const aliceBody = (await aliceMe.json()) as {
+      data?: { publicId?: string };
+    };
+    const publicId = aliceBody.data?.publicId;
+    if (publicId) {
+      const sanction = await request.post(
+        `/api/v1/admin/accounts/${publicId}/sanctions`,
+        {
+          headers: adminHeaders,
+          data: { type: "WARNING", reason: "E2E 处罚验证" },
+        },
+      );
+      expect(sanction.ok()).toBeTruthy();
+    }
+
+    await ctxBob.close();
+    await ctxAlice.close();
+  });
+
+  test("non-admin user is forbidden from the admin workbench", async ({
+    page,
+  }) => {
+    const account = freshAccount("152");
+    await loginViaUi(page, account);
+
+    await page.goto("/admin");
+    // 非管理员应被引导回独立管理员登录页并显示无权限
+    await expect(page).toHaveURL(/\/admin\/login/, { timeout: 15_000 });
+    await expect(page.getByText(/没有管理员权限/).first()).toBeVisible();
+  });
+});
@@ -0,0 +1,39 @@
+import { test, expect } from "./fixtures";
+import { freshAccount, loginViaUi } from "./helpers";
+
+test.describe("authentication", () => {
+  test("unauthenticated user is redirected to the login page", async ({
+    page,
+  }) => {
+    await page.goto("/conversations");
+    await expect(page).toHaveURL(/\/login\?redirect=/);
+    await expect(
+      page.getByRole("button", { name: /获取演示验证码/ }),
+    ).toBeVisible();
+  });
+
+  test("demo login reaches the sea home and persists across reload", async ({
+    page,
+  }) => {
+    const account = freshAccount("137");
+    await loginViaUi(page, account);
+
+    await expect(page.getByRole("link", { name: /扔一只瓶子/ })).toBeVisible();
+
+    await page.reload();
+    await expect(page).toHaveURL(/\/$/);
+    await expect(page.getByRole("link", { name: /扔一只瓶子/ })).toBeVisible();
+  });
+
+  test("logout returns to login and clears the session", async ({ page }) => {
+    const account = freshAccount("136");
+    await loginViaUi(page, account);
+
+    await page.goto("/settings");
+    await page.getByRole("button", { name: "退出登录" }).click();
+    await expect(page).toHaveURL(/\/login/);
+
+    await page.goto("/");
+    await expect(page).toHaveURL(/\/login\?redirect=/);
+  });
+});
@@ -0,0 +1,112 @@
+import { test, expect } from "./fixtures";
+import { freshAccount, loginViaUi, pickBottle } from "./helpers";
+
+test.describe("bottle social loop", () => {
+  test("throws, picks, replies and chats in real time with two users", async ({
+    browser,
+  }) => {
+    const aliceAccount = freshAccount("131");
+    const bobAccount = freshAccount("132");
+
+    const alice = await browser.newContext();
+    const bob = await browser.newContext();
+    const aPage = await alice.newPage();
+    const bPage = await bob.newPage();
+
+    await loginViaUi(aPage, aliceAccount);
+    await loginViaUi(bPage, bobAccount);
+
+    // Alice 投瓶
+    await aPage.goto("/throw");
+    await aPage
+      .getByPlaceholder("写下你想让陌生人看到的话…")
+      .fill("你好,海上的陌生人,愿你被温柔接住。");
+    await aPage.getByRole("button", { name: /扔进海里/ }).click();
+    await expect(aPage.getByText(/瓶子已进入审核/)).toBeVisible();
+
+    // Bob 捞瓶(过滤掉 Alice 已投的,应捞到池中瓶子)
+    await bPage.goto("/pick");
+    await pickBottle(bPage);
+    const content = (await bPage.locator("blockquote").innerText()).trim();
+    expect(content.length).toBeGreaterThan(0);
+
+    // Bob 首次回复建立会话
+    await bPage
+      .locator(".bottle-card textarea")
+      .fill("很高兴遇见你,来自另一片海域。");
+    await bPage.getByRole("button", { name: /回复并建立会话/ }).click();
+    await expect(bPage).toHaveURL(/\/conversations\//, { timeout: 15_000 });
+    await expect(
+      bPage.getByText("很高兴遇见你,来自另一片海域。"),
+    ).toBeVisible();
+
+    // Alice 会话列表出现新会话
+    await aPage.goto("/conversations");
+    await expect(aPage.locator(".conversation")).toHaveCount(1, {
+      timeout: 15_000,
+    });
+
+    // Bob 发送实时消息,两端都能看到
+    await bPage.locator(".composer textarea").fill("今天过得怎么样?");
+    await bPage.getByRole("button", { name: /发送消息/ }).click();
+    await expect(bPage.getByText("今天过得怎么样?")).toBeVisible();
+
+    await aPage.goto("/conversations");
+    await aPage.locator(".conversation").first().click();
+    await expect(aPage.getByText("今天过得怎么样?")).toBeVisible({
+      timeout: 15_000,
+    });
+
+    await alice.close();
+    await bob.close();
+  });
+
+  test("replies once and deduplicates concurrent history sync", async ({
+    browser,
+  }) => {
+    const aAccount = freshAccount("133");
+    const bAccount = freshAccount("134");
+
+    const ctxA = await browser.newContext();
+    const ctxB = await browser.newContext();
+    const pageA = await ctxA.newPage();
+    const pageB = await ctxB.newPage();
+
+    await loginViaUi(pageA, aAccount);
+    await loginViaUi(pageB, bAccount);
+
+    // 两个瓶子避免同瓶并发
+    await pageA.goto("/throw");
+    await pageA
+      .getByPlaceholder("写下你想让陌生人看到的话…")
+      .fill(`sync 瓶子 A ${Date.now()}`);
+    await pageA.getByRole("button", { name: /扔进海里/ }).click();
+    await expect(pageA.getByText(/瓶子已进入审核/)).toBeVisible();
+    await pageA.goto("/throw");
+    await pageA
+      .getByPlaceholder("写下你想让陌生人看到的话…")
+      .fill(`sync 瓶子 B ${Date.now()}`);
+    await pageA.getByRole("button", { name: /扔进海里/ }).click();
+    await expect(pageA.getByText(/瓶子已进入审核/)).toBeVisible();
+
+    // B 连续捞两只瓶子并各回复一次
+    for (let i = 0; i < 2; i++) {
+      await pageB.goto("/pick");
+      await pickBottle(pageB);
+      await pageB.locator(".bottle-card textarea").fill(`回复-${i}:海上的你好`);
+      await pageB.getByRole("button", { name: /回复并建立会话/ }).click();
+      await expect(pageB).toHaveURL(/\/conversations\//, {
+        timeout: 15_000,
+      });
+    }
+
+    // A 端应看到两个会话
+    await pageA.goto("/conversations");
+    await expect(pageA.locator(".conversation")).toHaveCount(2, {
+      timeout: 15_000,
+    });
+
+    await ctxA.close();
+    await ctxB.close();
+  });
+});
@@ -0,0 +1,22 @@
+import { test as base, expect } from "@playwright/test";
+import { resetDatabase } from "./global-setup";
+
+/**
+ * 所有 E2E 用例共用:
+ * - beforeEach:清库,避免上一用例残留的瓶子/租约让「捞取」拿到别人的瓶子
+ * - afterEach:关闭本用例打开的所有 context。用例中途失败时若不关闭,context
+ *   (页面/连接/内存)会一直累积,机器内存与 fd 有限,后续用例会成片失败。
+ */
+export const test = base;
+
+test.beforeEach(async () => {
+  await resetDatabase();
+});
+
+test.afterEach(async ({ browser }) => {
+  for (const context of browser.contexts()) {
+    await context.close().catch(() => undefined);
+  }
+});
+
+export { expect };
@@ -0,0 +1,91 @@
+import { createHmac } from "node:crypto";
+import { PrismaClient } from "@prisma/client";
+
+const DATABASE_URL =
+  process.env.DATABASE_URL ??
+  "postgresql://drift:drift_test_only@127.0.0.1:55432/drift_bottle_test?schema=public";
+
+const ADMIN_PHONE = "13900000001";
+const ADMIN_DEVICE = "e2e-admin-device";
+// 与测试/开发环境一致的演示密钥(auth.e2e-spec.ts 同款)
+const PHONE_HMAC_KEY = "test-phone-hmac-key-with-at-least-32-bytes";
+
+function phoneHmac(phone: string): string {
+  return createHmac("sha256", PHONE_HMAC_KEY).update(phone).digest("hex");
+}
+
+function normalizePhone(raw: string): string {
+  const compact = raw.replace(/[\s()-]/g, "");
+  const local = compact.startsWith("+86")
+    ? compact.slice(3)
+    : compact.startsWith("86") && compact.length === 13
+      ? compact.slice(2)
+      : compact;
+  if (!/^1[3-9]\d{9}$/.test(local))
+    throw new Error(`invalid admin phone: ${raw}`);
+  return `+86${local}`;
+}
+
+export const E2E_ADMIN = { phone: ADMIN_PHONE, deviceId: ADMIN_DEVICE };
+
+const TABLES = [
+  "outbox_events",
+  "moderation_tasks",
+  "bottle_pick_leases",
+  "bottle_pick_requests",
+  "bottle_pick_history",
+  "messages",
+  "conversation_members",
+  "conversations",
+  "notifications",
+  "reports",
+  "sanctions",
+  "audit_logs",
+  "refresh_tokens",
+  "sessions",
+  "daily_usage",
+  "bottles",
+  "anonymous_profiles",
+  "accounts",
+];
+
+/**
+ * 清空所有业务表(保留 schema)并重建管理员账号。
+ * 既用于 globalSetup,也被各 spec 的 beforeEach 调用,避免用例间数据污染
+ *(残留瓶子会让「捞取」捞到别的用例的瓶子,导致会话归属错乱)。
+ */
+export async function resetDatabase(): Promise<void> {
+  const prisma = new PrismaClient({
+    datasources: { db: { url: DATABASE_URL } },
+  });
+  try {
+    for (const table of TABLES) {
+      await prisma.$executeRawUnsafe(`TRUNCATE TABLE "${table}" CASCADE`);
+    }
+    const digest = phoneHmac(normalizePhone(ADMIN_PHONE));
+    await prisma.account.upsert({
+      where: { phoneHmac: digest },
+      update: { role: "ADMIN", status: "ACTIVE" },
+      create: {
+        role: "ADMIN",
+        status: "ACTIVE",
+        phoneHmac: digest,
+        // 测试库仅用于校验 phoneHmac 查找,明文备用
+        phoneCiphertext: Buffer.from("admin-e2e-placeholder", "utf8"),
+        anonymousProfile: {
+          create: {
+            nickname: "管理员",
+            avatarColor: "#66CCFF",
+            reviewStatus: "APPROVED",
+          },
+        },
+      },
+    });
+  } finally {
+    await prisma.$disconnect();
+  }
+}
+
+export default async function globalSetup(): Promise<void> {
+  await resetDatabase();
+}
@@ -0,0 +1,193 @@
+import { expect, type APIRequestContext } from "@playwright/test";
+
+export interface DemoAccount {
+  phone: string;
+  deviceId: string;
+}
+
+/**
+ * libphonenumber 的 CN 元数据比公开号段表更严(实测 146/148/149 会被后端
+ * 拒绝为 Validation failed),这里只列实测通过 IsPhoneNumber("CN") 的号段,
+ * 避免用例传入看似合法却会被拒的前缀。
+ */
+const VALID_PREFIXES = [
+  "130",
+  "131",
+  "132",
+  "133",
+  "134",
+  "135",
+  "136",
+  "137",
+  "138",
+  "139",
+  "145",
+  "147",
+  "150",
+  "151",
+  "152",
+  "155",
+  "156",
+  "157",
+  "158",
+  "159",
+  "165",
+  "166",
+  "167",
+  "170",
+  "171",
+  "172",
+  "173",
+  "175",
+  "176",
+  "177",
+  "178",
+  "180",
+  "181",
+  "182",
+  "183",
+  "184",
+  "185",
+  "186",
+  "187",
+  "188",
+  "189",
+  "190",
+  "191",
+  "198",
+  "199",
+] as const;
+
+/** 生成合法中国大陆手机号(3 位前缀 + 8 位随机 = 11 位,后端 IsPhoneNumber("CN") 校验通过) */
+export function freshAccount(prefix?: string): DemoAccount {
+  const chosen =
+    prefix ??
+    VALID_PREFIXES[Math.floor(Math.random() * VALID_PREFIXES.length)]!;
+  if (!(VALID_PREFIXES as readonly string[]).includes(chosen))
+    throw new Error(`测试手机号前缀不在已验证的合法号段内: ${chosen}`);
+  const suffix = String(Math.floor(Math.random() * 100_000_000)).padStart(
+    8,
+    "0",
+  );
+  const phone = `${chosen}${suffix}`;
+  if (!/^1(3\d|4[5-9]|5[0-35-9]|6[26]|7[0-8]|8\d|9[0-35-9])\d{8}$/.test(phone))
+    throw new Error(`生成的测试手机号不合法: ${phone}`);
+  return {
+    phone,
+    deviceId: `e2e-${chosen}-${phone}-${Math.floor(Math.random() * 1e6)}`,
+  };
+}
+
+/** 通过页面 UI 完成演示验证码登录,并确保匿名资料已设置且审核通过(否则投的瓶无法被他人捞到) */
+export async function loginViaUi(
+  page: import("@playwright/test").Page,
+  account: DemoAccount,
+): Promise<void> {
+  await page.goto("/login");
+  await page.getByPlaceholder(/\+86/).fill(account.phone);
+  await page.getByRole("button", { name: /获取演示验证码/ }).click();
+
+  const codeInput = page.locator('input[autocomplete="one-time-code"]');
+  await expect(codeInput).toBeVisible({ timeout: 10_000 });
+  const demo = page.locator(".demo");
+  await expect(demo).toBeVisible();
+  const text = await demo.innerText();
+  const code = text.match(/\d{6}/)?.[0];
+  if (!code) throw new Error("未从演示验证码区域解析到 6 位验证码");
+  await codeInput.fill(code);
+
+  await page.getByRole("button", { name: /进入海面/ }).click();
+  await expect(page).toHaveURL(/\/$/, { timeout: 15_000 });
+
+  // 注意:页面内 Vue 只把 accessToken 存在内存,page.request 无法获取,
+  // 因此这里经 API 再领一个 token,后续 AuthGuard 接口都带 Bearer 头。
+  const { accessToken } = await smsAndLogin(page.request, account);
+  const bearer = { Authorization: `Bearer ${accessToken}` };
+
+  // 设置匿名资料并等待 worker 审核通过(新用户否则无法参与匹配闭环)
+  const me = await page.request.get("/api/v1/me", { headers: bearer });
+  const meBody = (await me.json()) as {
+    data?: { profileReviewStatus?: string | null };
+  };
+  if (meBody.data?.profileReviewStatus !== "APPROVED") {
+    const patch = await page.request.patch("/api/v1/me/anonymous-profile", {
+      headers: bearer,
+      data: {
+        nickname: `海客${account.phone.slice(-4)}`,
+        avatarColor: "#66CCFF",
+        bio: null,
+      },
+    });
+    if (!patch.ok()) {
+      throw new Error(
+        `匿名资料设置失败: ${patch.status()} ${await patch.text()}`,
+      );
+    }
+    // 轮询等待资料审核通过
+    const deadline = Date.now() + 25_000;
+    let status: string | null | undefined;
+    while (Date.now() < deadline) {
+      const latest = await page.request.get("/api/v1/me", { headers: bearer });
+      status = (
+        (await latest.json()) as { data?: { profileReviewStatus?: string } }
+      ).data?.profileReviewStatus;
+      if (status === "APPROVED") return;
+      await new Promise((resolve) => setTimeout(resolve, 500));
+    }
+    throw new Error(`匿名资料未在时限内通过审核,最后状态: ${status}`);
+  }
+}
+
+/** 直接经 API 完成演示登录,返回 accessToken 与 set-cookie(用于注入管理会话) */
+export async function smsAndLogin(
+  request: APIRequestContext,
+  account: DemoAccount,
+): Promise<{ accessToken: string; cookie: string }> {
+  const send = await request.post("/api/v1/auth/sms/send", {
+    data: { phone: account.phone, deviceId: account.deviceId },
+  });
+  expect(send.ok()).toBeTruthy();
+  const body = (await send.json()) as { data?: { debugCode?: string } };
+  const code = body.data?.debugCode;
+  if (!code) throw new Error("sms/send 未返回 debugCode(演示登录未开启?)");
+
+  const login = await request.post("/api/v1/auth/sms/login", {
+    data: { phone: account.phone, code, deviceId: account.deviceId },
+  });
+  expect(login.ok()).toBeTruthy();
+  const loginBody = (await login.json()) as {
+    data?: { accessToken?: string };
+  };
+  const accessToken = loginBody.data?.accessToken;
+  if (!accessToken) throw new Error("sms/login 未返回 accessToken");
+  return { accessToken, cookie: login.headers()["set-cookie"] ?? "" };
+}
+
+/**
+ * 点击「伸手捞取」并在瓶子卡片出现前自动重试。
+ * 投出的瓶子需等 Worker 审核入池(约 1-2s),立即捞会得到空池;
+ * 上一次请求进行中按钮文案会变成「正在寻找…」,需等它恢复可点击。
+ */
+export async function pickBottle(
+  page: import("@playwright/test").Page,
+  attempts = 30,
+): Promise<void> {
+  const card = page.locator(".bottle-card");
+  const pickButton = page.getByRole("button", { name: /伸手捞取/ });
+  for (let attempt = 0; attempt < attempts; attempt++) {
+    // 上一轮点击后卡片可能姗姗来迟:先确认是否已经捞到
+    if (await card.isVisible().catch(() => false)) return;
+    await pickButton.waitFor({ state: "visible", timeout: 20_000 });
+    await expect(pickButton).toBeEnabled({ timeout: 20_000 });
+    await pickButton.click({ timeout: 10_000 });
+    try {
+      // 卡片出现即成功;给足渲染时间,避免误判后又去等已经消失的按钮
+      await card.waitFor({ state: "visible", timeout: 10_000 });
+      return;
+    } catch {
+      // 池中暂无候选(投出的瓶子还在审核中),短暂等待后重试
+      await page.waitForTimeout(600);
+    }
+  }
+  throw new Error("多次尝试后仍未捞到瓶子(审核入池超时或池中没有候选)");
+}
@@ -0,0 +1,111 @@
+import { test, expect } from "./fixtures";
+import { freshAccount, loginViaUi, pickBottle } from "./helpers";
+
+test.describe("safety and resilience", () => {
+  test("reports and reloads chat history after an offline reconnect", async ({
+    browser,
+  }) => {
+    const aAccount = freshAccount("135");
+    const bAccount = freshAccount("134");
+
+    const ctxA = await browser.newContext();
+    const ctxB = await browser.newContext();
+    const aPage = await ctxA.newPage();
+    const bPage = await ctxB.newPage();
+
+    await loginViaUi(aPage, aAccount);
+    await loginViaUi(bPage, bAccount);
+
+    // A 投瓶,B 捞瓶并回复建立会话
+    await aPage.goto("/throw");
+    await aPage
+      .getByPlaceholder("写下你想让陌生人看到的话…")
+      .fill(`断线恢复瓶子 ${Date.now()}`);
+    await aPage.getByRole("button", { name: /扔进海里/ }).click();
+    await expect(aPage.getByText(/瓶子已进入审核/)).toBeVisible();
+
+    await bPage.goto("/pick");
+    await pickBottle(bPage);
+    await bPage.locator(".bottle-card textarea").fill("离线前的第一条消息");
+    await bPage.getByRole("button", { name: /回复并建立会话/ }).click();
+    await expect(bPage).toHaveURL(/\/conversations\//, { timeout: 15_000 });
+
+    // A 进入同一会话
+    await aPage.goto("/conversations");
+    await aPage.locator(".conversation").first().click();
+    await expect(aPage.getByText("离线前的第一条消息")).toBeVisible({
+      timeout: 15_000,
+    });
+
+    // A 离线前再互发一条
+    await bPage.locator(".composer textarea").fill("离线前的第二条消息");
+    await bPage.getByRole("button", { name: /发送消息/ }).click();
+    await expect(aPage.getByText("离线前的第二条消息")).toBeVisible({
+      timeout: 15_000,
+    });
+
+    // 模拟 B 断线(离线),A 发送新消息
+    await ctxB.setOffline(true);
+    await aPage.locator(".composer textarea").fill("断线期间的第三条消息");
+    await aPage.getByRole("button", { name: /发送消息/ }).click();
+    await expect(aPage.getByText("断线期间的第三条消息")).toBeVisible();
+
+    // B 恢复在线,重新拉取历史应补全缺失消息
+    await ctxB.setOffline(false);
+    await bPage.reload();
+    await expect(bPage.getByText("断线期间的第三条消息")).toBeVisible({
+      timeout: 20_000,
+    });
+
+    await ctxA.close();
+    await ctxB.close();
+  });
+
+  test("blocks a peer and both sides can no longer send messages", async ({
+    browser,
+  }) => {
+    const aAccount = freshAccount("138");
+    const bAccount = freshAccount("139");
+
+    const ctxA = await browser.newContext();
+    const ctxB = await browser.newContext();
+    const aPage = await ctxA.newPage();
+    const bPage = await ctxB.newPage();
+
+    await loginViaUi(aPage, aAccount);
+    await loginViaUi(bPage, bAccount);
+
+    await aPage.goto("/throw");
+    await aPage
+      .getByPlaceholder("写下你想让陌生人看到的话…")
+      .fill(`拉黑测试瓶子 ${Date.now()}`);
+    await aPage.getByRole("button", { name: /扔进海里/ }).click();
+    await expect(aPage.getByText(/瓶子已进入审核/)).toBeVisible();
+
+    await bPage.goto("/pick");
+    await pickBottle(bPage);
+    await bPage.locator(".bottle-card textarea").fill("建立会话,稍后拉黑");
+    await bPage.getByRole("button", { name: /回复并建立会话/ }).click();
+    await expect(bPage).toHaveURL(/\/conversations\//, { timeout: 15_000 });
+
+    // A 进入会话并拉黑
+    await aPage.goto("/conversations");
+    await aPage.locator(".conversation").first().click();
+    await expect(aPage.getByText("建立会话,稍后拉黑")).toBeVisible({
+      timeout: 15_000,
+    });
+    aPage.once("dialog", (dialog) => void dialog.accept());
+    await aPage.getByRole("button", { name: /拉黑对方/ }).click();
+    await expect(aPage.getByText(/已拉黑对方/)).toBeVisible();
+
+    // B 发消息应失败
+    await bPage.locator(".composer textarea").fill("你还在吗?");
+    await bPage.getByRole("button", { name: /发送消息/ }).click();
+    await expect(bPage.locator(".bubble.failed").first()).toBeVisible({
+      timeout: 15_000,
+    });
+
+    await ctxA.close();
+    await ctxB.close();
+  });
+});
@@ -16,6 +16,8 @@
    "packages/**/*.ts",
    "apps/**/*.ts",
    "prisma/**/*.ts",
-    "tests/**/*.ts"
+    "tests/**/*.ts",
+    "playwright.config.ts",
+    "vitest.config.ts"
  ]
 }
@@ -0,0 +1,13 @@
+import { configDefaults, defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    /**
+     * 根级 `pnpm test` 是聚合入口,排除两类不该由它收集的用例:
+     * - tests/e2e:Playwright 用例,由 `pnpm test:e2e` 驱动,vitest 无法执行;
+     * - apps/web:需要 packages 自己的 vitest.config.ts(vue 插件 + jsdom),
+     *   由 `corepack pnpm --filter @drift/web test` 运行。
+     */
+    exclude: [...configDefaults.exclude, "tests/e2e/**", "apps/web/**"],
+  },
+});
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><rect width="512" height="512" rx="112" fill="#061b2b"/><circle cx="256" cy="210" r="128" fill="#0b4050"/><path d="M180 130h152l-20 196c-5 48-107 48-112 0z" fill="#76e4d5" opacity=".85"/><path d="M160 350q96-70 192 0" fill="none" stroke="#f1c27d" stroke-width="22" stroke-linecap="round"/></svg>`