@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/story/__tests__/peek-panel-patch-sync.test.tsx

@@ -0,0 +1,215 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+// 回归：看板卡片编辑经 story-list-view 透传的 storyPatches 实时合并进 PeekPanel。
+// 面板数据来自自身 getStoryDetailFn 拉取，外部（看板内联编辑 / 拖拽换列）落库后
+// 必须经 storyPatches 通道合并进 data.story，否则面板显示的优先级/状态/日期是旧值。
+import { describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+
+vi.mock("@tanstack/react-start", () => ({
+  useServerFn: (fn: unknown) => fn,
+}));
+
+const {
+  getStoryDetailFn,
+  listCommentsFn,
+  listActivitiesFn,
+  listLabelsFn,
+  listStoriesFn,
+  listChildStoriesFn,
+  getDependenciesFn,
+  getLinksFn,
+  getAttachmentsFn,
+  getLinkedDesignsFn,
+  getLinkedDocsFn,
+  listIterationsFn,
+} = vi.hoisted(() => ({
+  getStoryDetailFn: vi.fn(),
+  listCommentsFn: vi.fn(),
+  listActivitiesFn: vi.fn(),
+  listLabelsFn: vi.fn(),
+  listStoriesFn: vi.fn(),
+  listChildStoriesFn: vi.fn(),
+  getDependenciesFn: vi.fn(),
+  getLinksFn: vi.fn(),
+  getAttachmentsFn: vi.fn(),
+  getLinkedDesignsFn: vi.fn(),
+  getLinkedDocsFn: vi.fn(),
+  listIterationsFn: vi.fn(),
+}));
+vi.mock("@/server/serverFns/story", () => ({
+  getStoryDetailFn,
+  listCommentsFn: listCommentsFn.mockResolvedValue([]),
+  listActivitiesFn: listActivitiesFn.mockResolvedValue({ items: [] }),
+  listLabelsFn: listLabelsFn.mockResolvedValue([]),
+  listStoriesFn: listStoriesFn.mockResolvedValue({ items: [] }),
+  listChildStoriesFn: listChildStoriesFn.mockResolvedValue([]),
+  getDependenciesFn: getDependenciesFn.mockResolvedValue({}),
+  getLinksFn: getLinksFn.mockResolvedValue([]),
+  getAttachmentsFn: getAttachmentsFn.mockResolvedValue([]),
+  getLinkedDesignsFn: getLinkedDesignsFn.mockResolvedValue([]),
+  getLinkedDocsFn: getLinkedDocsFn.mockResolvedValue([]),
+  archiveStoryFn: vi.fn(),
+  deleteStoryFn: vi.fn(),
+}));
+vi.mock("@/server/serverFns/iteration", () => ({
+  listIterationsFn,
+}));
+
+const { mockNavigate } = vi.hoisted(() => ({ mockNavigate: vi.fn() }));
+vi.mock("@tanstack/react-router", () => ({
+  useNavigate: () => mockNavigate,
+  Link: (props: Record<string, unknown>) => <a {...props} />,
+}));
+
+vi.mock("@/components/testcase/peek-panel", () => ({
+  TestCasePeekPanel: () => null,
+}));
+vi.mock("@/components/bug/peek-panel", () => ({
+  BugPeekPanel: () => null,
+}));
+// 详情体换桩：只暴露 priority，锁定「面板把 patch 合并进 data.story」这一职责
+vi.mock("../detail/story-detail-body", () => ({
+  StoryDetailBody: (props: { story?: { priority?: string } }) => (
+    <div data-testid="detail-priority">{props.story?.priority ?? "loading"}</div>
+  ),
+}));
+
+import { StoryPeekPanel } from "../peek-panel";
+import type { StoryDetail } from "../types";
+
+function detail(priority: StoryDetail["priority"]): StoryDetail {
+  return {
+    id: "s1",
+    identifier: "PERF-1",
+    name: "性能优化",
+    description: null,
+    state: "in_progress",
+    priority,
+    archived: false,
+    startDate: null,
+    targetDate: null,
+    boardOrder: 0,
+    projectId: null,
+    parentId: null,
+    parent: null,
+    assignee: null,
+    createdBy: {
+      id: "u1",
+      username: "u1",
+      email: "u1@example.com",
+      avatarConfig: null,
+      bgShape: null,
+      bgColor: null,
+    },
+    labels: [],
+    createdAt: "2026-10-01T00:00:00.000Z",
+    updatedAt: "2026-10-01T00:00:00.000Z",
+    sequenceId: 1,
+    updatedBy: null,
+  };
+}
+
+function renderPanel(storyPatches: { storyId: string; patch: Record<string, unknown>; seq: number } | null) {
+  return render(
+    <StoryPeekPanel
+      storyId="s1"
+      users={[]}
+      currentUserId="u1"
+      mode="side-peek"
+      onModeChange={vi.fn()}
+      onClose={vi.fn()}
+      onFullscreen={vi.fn()}
+      onPrevious={vi.fn()}
+      onNext={vi.fn()}
+      prevDisabled={false}
+      nextDisabled={false}
+      onArchived={vi.fn()}
+      onDeleted={vi.fn()}
+      projects={[]}
+      onTransferred={vi.fn()}
+      storyPatches={storyPatches}
+    />,
+  );
+}
+
+describe("PeekPanel 实时同步看板编辑", () => {
+  it("storyPatches 匹配当前需求时合并进面板数据", async () => {
+    vi.mocked(getStoryDetailFn).mockResolvedValue(detail("medium"));
+    vi.mocked(listActivitiesFn).mockResolvedValue({ items: [] });
+
+    const { rerender } = renderPanel(null);
+    expect(await screen.findByTestId("detail-priority")).toHaveTextContent("medium");
+
+    rerender(
+      <StoryPeekPanel
+        storyId="s1"
+        users={[]}
+        currentUserId="u1"
+        mode="side-peek"
+        onModeChange={vi.fn()}
+        onClose={vi.fn()}
+        onFullscreen={vi.fn()}
+        onPrevious={vi.fn()}
+        onNext={vi.fn()}
+        prevDisabled={false}
+        nextDisabled={false}
+        onArchived={vi.fn()}
+        onDeleted={vi.fn()}
+        projects={[]}
+        onTransferred={vi.fn()}
+        storyPatches={{ storyId: "s1", patch: { priority: "urgent" }, seq: 1 }}
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId("detail-priority")).toHaveTextContent("urgent");
+    });
+  });
+
+  it("storyPatches 指向其他需求时不合并", async () => {
+    vi.mocked(getStoryDetailFn).mockResolvedValue(detail("medium"));
+    vi.mocked(listActivitiesFn).mockResolvedValue({ items: [] });
+
+    const { rerender } = renderPanel(null);
+    expect(await screen.findByTestId("detail-priority")).toHaveTextContent("medium");
+
+    rerender(
+      <StoryPeekPanel
+        storyId="s1"
+        users={[]}
+        currentUserId="u1"
+        mode="side-peek"
+        onModeChange={vi.fn()}
+        onClose={vi.fn()}
+        onFullscreen={vi.fn()}
+        onPrevious={vi.fn()}
+        onNext={vi.fn()}
+        prevDisabled={false}
+        nextDisabled={false}
+        onArchived={vi.fn()}
+        onDeleted={vi.fn()}
+        projects={[]}
+        onTransferred={vi.fn()}
+        storyPatches={{ storyId: "other", patch: { priority: "low" }, seq: 1 }}
+      />,
+    );
+
+    expect(screen.getByTestId("detail-priority")).toHaveTextContent("medium");
+  });
+});

package/src/components/story/__tests__/story-list-loading-defer.test.tsx

@@ -0,0 +1,88 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// 首载动画延迟门控（follow-up A）：isLoading=true 但 400ms 内不出现
+// 「数据加载中」动画，超时后才出现；空态不受门控（快请求直接见数据/空态）。
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { cleanup, render, screen, act } from "@testing-library/react";
+
+// createServerFn 需 tanstackStart 插件编译（vitest 无该插件），显式空实现保模块求值
+vi.mock("@/server/serverFns/story", () => ({
+  createStoryFn: vi.fn(),
+  bulkArchiveStoriesFn: vi.fn(),
+  bulkDeleteStoriesFn: vi.fn(),
+  bulkUpdateStoriesFn: vi.fn(),
+  reorderStoriesFn: vi.fn(),
+}));
+// 行/组头/批量工具栏裁掉（各自重 import 链），本文件只测壳层 loading 门控
+vi.mock("../views/story-list/row", () => ({ StoryListRow: () => null }));
+vi.mock("../views/story-list/group", () => ({
+  VirtualGroupHeader: () => null,
+  GroupTailRow: () => null,
+}));
+vi.mock("../views/story-list/batch-toolbar", () => ({ BatchToolbar: () => null }));
+
+import { StoryList } from "../views/story-list";
+import { DEFAULT_DISPLAY_OPTIONS } from "../display/types";
+
+// jsdom 无 ResizeObserver（@tanstack/react-virtual 观察滚动容器需要）
+class NoopResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+
+const baseProps = {
+  groups: [],
+  displayFilters: DEFAULT_DISPLAY_OPTIONS,
+  users: [],
+  labels: [],
+  projects: [],
+  onRefresh: () => {},
+  onPatchStory: () => {},
+  onOpenStory: () => {},
+};
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  vi.stubGlobal("ResizeObserver", NoopResizeObserver);
+});
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+  vi.unstubAllGlobals();
+});
+
+describe("StoryList 首载动画延迟（follow-up A）", () => {
+  it("首载在途 400ms 内不渲染「数据加载中」，超时后出现", async () => {
+    render(<StoryList {...baseProps} isLoading />);
+    await act(async () => {}); // flush effects（deferred 初始 false）
+    expect(screen.queryByText("数据加载中")).not.toBeInTheDocument();
+
+    act(() => {
+      vi.advanceTimersByTime(400);
+    });
+    expect(screen.getByText("数据加载中")).toBeInTheDocument();
+  });
+
+  it("isLoading=false 时空态立即渲染，不受延迟门控", () => {
+    render(<StoryList {...baseProps} isLoading={false} />);
+    expect(screen.getByText(/暂无需求/)).toBeInTheDocument();
+    expect(screen.queryByText("数据加载中")).not.toBeInTheDocument();
+  });
+});

package/src/components/story/__tests__/story-list-view-peek-sync.test.tsx

@@ -0,0 +1,242 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+// 回归：侧边面板（PeekPanel）内字段改动落库后，须回写列表/看板做乐观更新
+// （onStoryPatch 通道，与看板→面板的 storyPatches 方向相反）。
+
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { act, render, waitFor } from "@testing-library/react";
+import React from "react";
+import type { StoryListItem, UserBrief } from "../types";
+
+const mocks = vi.hoisted(() => ({
+  onViewChange: undefined as undefined | ((v: string) => void),
+  tableData: [] as StoryListItem[],
+  onOpenStory: undefined as undefined | ((id: string) => void),
+  peekProps: undefined as
+    | undefined
+    | { onStoryPatch?: (id: string, patch: Record<string, unknown>) => void },
+  patchStory: vi.fn(),
+  listPatch: undefined as undefined | ((id: string, patch: Record<string, unknown>) => void),
+}));
+
+vi.mock("@tanstack/react-router", () => ({
+  useRouteContext: () => ({ session: { user: { id: "user_1" } } }),
+  useNavigate: () => vi.fn(),
+}));
+vi.mock("@/components/ui/toast", () => ({
+  toast: { success: vi.fn(), error: vi.fn(), info: vi.fn() },
+}));
+vi.mock("@/components/ui/alert-dialog", () => ({
+  AlertDialog: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
+  AlertDialogContent: () => null,
+  AlertDialogHeader: () => null,
+  AlertDialogFooter: () => null,
+  AlertDialogTitle: () => null,
+  AlertDialogDescription: () => null,
+  AlertDialogCancel: () => null,
+  AlertDialogAction: () => null,
+}));
+vi.mock("@/components/confirm-dialog", () => ({ ConfirmDialog: () => null }));
+vi.mock("@/server/serverFns/story", () => ({
+  listStoriesFn: vi.fn(() => Promise.resolve({ items: [], total: 0, hasMore: false })),
+  listUsersBriefFn: vi.fn(() => Promise.resolve([])),
+  archiveStoryFn: vi.fn(() => Promise.resolve()),
+}));
+vi.mock("@/server/serverFns/project", () => ({
+  listProjectsBriefFn: vi.fn(() => Promise.resolve([])),
+}));
+vi.mock("@/server/serverFns/story-view", () => ({
+  listStoryViewsFn: vi.fn(() => new Promise(() => {})),
+  createStoryViewFn: vi.fn(() => Promise.resolve(null)),
+  updateStoryViewFn: vi.fn(() => Promise.resolve(null)),
+  deleteStoryViewFn: vi.fn(() => Promise.resolve()),
+}));
+vi.mock("@/server/serverFns/story-display-options", () => ({
+  getStoryDisplayOptionsFn: vi.fn(() => Promise.resolve(null)),
+  updateStoryDisplayOptionsFn: vi.fn(() => Promise.resolve(null)),
+}));
+vi.mock("../display/use-display-options", () => ({
+  useDisplayOptions: () => ({
+    layout: "list",
+    filters: {
+      groupBy: "none",
+      subGroupBy: "none",
+      orderBy: "created",
+      orderDir: "desc",
+      properties: [],
+      showEmptyGroups: false,
+      showSubItems: false,
+      pageSize: 50,
+    },
+    updateFilters: () => {},
+  }),
+}));
+vi.mock("../display/use-paged-story-groups", () => ({
+  usePagedStoryGroups: () => ({
+    groups: [],
+    isLoading: false,
+    refresh: () => {},
+    loadMore: () => {},
+    patchStory: mocks.patchStory,
+  }),
+}));
+vi.mock("../display/use-grouped-stories", () => ({ useGroupedStories: () => [] }));
+vi.mock("../story-toolbar", () => ({
+  StoryToolbar: (props: { onViewChange?: (view: string) => void }) => {
+    mocks.onViewChange = props.onViewChange;
+    return null;
+  },
+}));
+vi.mock("../story-list-table", () => ({
+  StoryListTable: (props: { data: StoryListItem[]; onOpenStory: (id: string) => void }) => {
+    mocks.tableData = props.data;
+    mocks.onOpenStory = props.onOpenStory;
+    return null;
+  },
+}));
+vi.mock("../create-story-dialog", () => ({ CreateStoryDialog: () => null }));
+vi.mock("../views/create-view-dialog", () => ({ CreateViewDialog: () => null }));
+vi.mock("../views/kanban-view", () => ({ KanbanView: () => null }));
+vi.mock("../views/calendar-view", () => ({ CalendarView: () => null }));
+vi.mock("../views/timeline-view", () => ({ TimelineView: () => null }));
+vi.mock("../views/story-list", () => ({
+  StoryList: (props: { onPatchStory?: (id: string, patch: Record<string, unknown>) => void }) => {
+    mocks.listPatch = props.onPatchStory;
+    return null;
+  },
+}));
+vi.mock("../peek-panel", () => ({
+  StoryPeekPanel: (props: { onStoryPatch?: (id: string, patch: Record<string, unknown>) => void }) => {
+    mocks.peekProps = props;
+    return null;
+  },
+}));
+
+import { StoryListView } from "../story-list-view";
+
+const USER: UserBrief = {
+  id: "u9",
+  username: "u9",
+  email: "u9@example.com",
+  avatarConfig: null,
+  bgShape: null,
+  bgColor: null,
+};
+
+function story(): StoryListItem {
+  return {
+    id: "s1",
+    identifier: "PERF-1",
+    name: "原始标题",
+    description: null,
+    state: "todo",
+    priority: "medium",
+    archived: false,
+    startDate: null,
+    targetDate: null,
+    boardOrder: 0,
+    projectId: null,
+    parentId: null,
+    parent: null,
+    assignee: null,
+    createdBy: USER,
+    labels: [],
+    createdAt: "2026-10-01T00:00:00.000Z",
+    updatedAt: "2026-10-01T00:00:00.000Z",
+  };
+}
+
+const PROJECTS = [{ id: "proj_1", name: "项目A", displayId: null, icon: "folder" }];
+
+describe("PeekPanel → 列表/看板 乐观更新", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+    mocks.onViewChange = undefined;
+    mocks.onOpenStory = undefined;
+    mocks.peekProps = undefined;
+    mocks.tableData = [];
+    mocks.listPatch = undefined;
+  });
+
+  it("面板字段落库后回写表格行并同步列表视图分页状态", async () => {
+    const s1 = story();
+    render(
+      <StoryListView
+        stories={{ items: [s1], total: 1 }}
+        users={[USER]}
+        projects={PROJECTS}
+        labels={[{ id: "l1", name: "Bug", color: "#f00" }]}
+      />,
+    );
+
+    // 切到表格视图，拿到行数据与打开入口
+    await waitFor(() => expect(typeof mocks.onViewChange).toBe("function"));
+    act(() => mocks.onViewChange?.("table"));
+    await waitFor(() => expect(mocks.tableData.some((s) => s.id === "s1")).toBe(true));
+
+    // 打开侧边面板
+    act(() => mocks.onOpenStory?.("s1"));
+    await waitFor(() => expect(mocks.peekProps).toBeDefined());
+
+    // 模拟面板改字段落库 → 回传补丁
+    act(() => mocks.peekProps?.onStoryPatch?.("s1", { priority: "high" }));
+
+    await waitFor(() => {
+      const row = mocks.tableData.find((s) => s.id === "s1");
+      expect(row?.priority).toBe("high");
+    });
+    expect(mocks.patchStory).toHaveBeenCalledWith("s1", { priority: "high" });
+  });
+
+  it("name 改动回写到列表行", async () => {
+    const s1 = story();
+    render(
+      <StoryListView stories={{ items: [s1], total: 1 }} users={[USER]} projects={PROJECTS} labels={[]} />,
+    );
+    await waitFor(() => expect(typeof mocks.onViewChange).toBe("function"));
+    act(() => mocks.onViewChange?.("table"));
+    await waitFor(() => expect(mocks.tableData.some((s) => s.id === "s1")).toBe(true));
+    act(() => mocks.onOpenStory?.("s1"));
+    await waitFor(() => expect(mocks.peekProps).toBeDefined());
+
+    act(() => mocks.peekProps?.onStoryPatch?.("s1", { name: "新标题" }));
+
+    await waitFor(() => {
+      expect(mocks.tableData.find((s) => s.id === "s1")?.name).toBe("新标题");
+    });
+  });
+
+  it("列表行内编辑 → 同步看板数据（stories.items）", async () => {
+    const s1 = story();
+    render(
+      <StoryListView stories={{ items: [s1], total: 1 }} users={[USER]} projects={PROJECTS} labels={[]} />,
+    );
+    await waitFor(() => expect(typeof mocks.onViewChange).toBe("function"));
+    act(() => mocks.onViewChange?.("table"));
+    await waitFor(() => expect(mocks.tableData.some((s) => s.id === "s1")).toBe(true));
+    await waitFor(() => expect(typeof mocks.listPatch).toBe("function"));
+
+    act(() => mocks.listPatch?.("s1", { priority: "urgent", targetDate: "2026-10-28" }));
+
+    await waitFor(() => {
+      const row = mocks.tableData.find((s) => s.id === "s1");
+      expect(row?.priority).toBe("urgent");
+      expect(row?.targetDate).toBe("2026-10-28");
+    });
+  });
+});

package/src/components/story/__tests__/story-list-view-restore.test.tsx

@@ -16,11 +16,13 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { render, waitFor } from "@testing-library/react";
+import { act, render, waitFor } from "@testing-library/react";
 import React from "react";
 
 const mocks = vi.hoisted(() => ({
   toolbarProps: [] as Array<{ projectId?: string; search?: string } | undefined>,
+  views: [] as Array<string | undefined>,
+  onViewChange: undefined as undefined | ((view: string) => void),
 }));
 
 vi.mock("@tanstack/react-router", () => ({
@@ -92,15 +94,22 @@ vi.mock("../display/use-grouped-stories", () => ({
 }));
 // 记录每次渲染收到的 filters，用于断言「首渲未读 localStorage、恢复发生在挂载后的 effect」
 vi.mock("../story-toolbar", () => ({
-  StoryToolbar: (props: { filters?: { projectId?: string; search?: string } }) => {
+  StoryToolbar: (props: {
+    filters?: { projectId?: string; search?: string };
+    view?: string;
+    onViewChange?: (view: string) => void;
+  }) => {
     mocks.toolbarProps.push(props.filters);
+    mocks.views.push(props.view);
+    mocks.onViewChange = props.onViewChange;
     return null;
   },
 }));
 vi.mock("../story-list-table", () => ({ StoryListTable: () => null }));
 vi.mock("../create-story-dialog", () => ({ CreateStoryDialog: () => null }));
 vi.mock("../views/create-view-dialog", () => ({ CreateViewDialog: () => null }));
-vi.mock("../views/kanban-board", () => ({ KanbanBoard: () => null }));
+// 看板视图依赖 useServerFn(updateStoryFn/reorderStoriesFn)，与本用例无关，整体桩掉
+vi.mock("../views/kanban-view", () => ({ KanbanView: () => null }));
 vi.mock("../views/calendar-view", () => ({ CalendarView: () => null }));
 vi.mock("../views/timeline-view", () => ({ TimelineView: () => null }));
 vi.mock("../views/story-list", () => ({ StoryList: () => null }));
@@ -113,6 +122,7 @@ const PROJECTS = [{ id: "proj_1", name: "项目A", displayId: null, icon: "folde
 
 function renderView() {
   mocks.toolbarProps.length = 0;
+  mocks.views.length = 0;
   return render(
     <StoryListView
       stories={{ items: [], total: 0 }}
@@ -178,6 +188,38 @@ describe("StoryListView 持久化筛选恢复", () => {
     });
   });
 
+  it("首渲视图为 list（不读 localStorage），恢复发生在挂载后的 effect", async () => {
+    window.localStorage.setItem("story.view", "board");
+    renderView();
+
+    expect(mocks.views[0]).toBe("list");
+    await waitFor(() => {
+      expect(mocks.views.at(-1)).toBe("board");
+    });
+  });
+
+  it("切换视图后写入 localStorage 供下次挂载恢复", async () => {
+    renderView();
+    await waitFor(() => {
+      expect(typeof mocks.onViewChange).toBe("function");
+    });
+
+    act(() => {
+      mocks.onViewChange?.("table");
+    });
+
+    expect(window.localStorage.getItem("story.view")).toBe("table");
+  });
+
+  it("非法残留视图值被忽略（保持默认 list）", async () => {
+    window.localStorage.setItem("story.view", "kanban-v2");
+    renderView();
+
+    await waitFor(() => {
+      expect(mocks.views.at(-1)).toBe("list");
+    });
+  });
+
   it("无残留时不触发额外列表拉取", async () => {
     renderView();
     await waitFor(() => expect(vi.mocked(listUsersBriefFn)).not.toHaveBeenCalled());

package/src/components/story/__tests__/story-list-view-ssr.test.tsx

@@ -70,7 +70,6 @@ vi.mock("../story-toolbar", () => ({ StoryToolbar: () => null }));
 vi.mock("../story-list-table", () => ({ StoryListTable: () => null }));
 vi.mock("../create-story-dialog", () => ({ CreateStoryDialog: () => null }));
 vi.mock("../views/create-view-dialog", () => ({ CreateViewDialog: () => null }));
-vi.mock("../views/kanban-board", () => ({ KanbanBoard: () => null }));
 vi.mock("../views/calendar-view", () => ({ CalendarView: () => null }));
 vi.mock("../views/timeline-view", () => ({ TimelineView: () => null }));
 vi.mock("../views/story-list", () => ({ StoryList: () => null }));