@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/bug/__tests__/peek-modes.test.tsx

@@ -0,0 +1,365 @@
+// 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/>.
+
+// 任务 35（三期 BUG-C）：BUG Peek 四形态。断言面（简报步骤 1 + 控制者补充）：
+// ① mode 切换 localStorage 持久化（bug-list-view 接线：切「侧边面板」→ bug.peekMode=side-dock）
+// ② side-dock 时 portal 到 PEEK_DOCK_SLOT_ID（#peek-dock-panel-slot），槽缺席回退容器内渲染
+// ③ modal / full-screen 用 Dialog（role=dialog）
+// ④ 四形态默认值（side-peek）与非法值回落（isPeekMode 守卫）
+// ⑤ 头部布局切换器（PEEK_MODE_OPTIONS 四选项）与 Esc 仅 side-peek 注册
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { TooltipProvider } from "@/components/ui/tooltip";
+
+const h = vi.hoisted(() => ({
+  listBugGroupsFn: vi.fn(),
+  listBugsInGroupFn: vi.fn(),
+  listAllGroupsItemsFn: vi.fn(),
+  getBugDisplayOptionsFn: vi.fn(),
+  updateBugDisplayOptionsFn: vi.fn(),
+  listBugViewsFn: vi.fn(),
+  createBugViewFn: vi.fn(),
+  updateBugViewFn: vi.fn(),
+  deleteBugViewFn: vi.fn(),
+  createBugFn: vi.fn(),
+  updateBugFn: vi.fn(),
+  bulkArchiveBugsFn: vi.fn(),
+  bulkDeleteBugsFn: vi.fn(),
+  bulkUpdateBugsFn: vi.fn(),
+  reorderBugsFn: vi.fn(),
+  getBugDetailFn: vi.fn(),
+  getBugNeighborsFn: vi.fn(),
+  archiveBugFn: vi.fn(),
+  deleteBugFn: vi.fn(),
+}));
+
+// 部分 mock：行/卡片内联编辑器经 useServerFn 直调被 mock 的 serverFn（view-type.test 同款）
+vi.mock("@tanstack/react-start", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@tanstack/react-start")>();
+  return { ...actual, useServerFn: (fn: unknown) => fn };
+});
+vi.mock("@/server/serverFns/bug", () => h);
+vi.mock("@/server/serverFns/story", () => ({
+  listUsersBriefFn: vi.fn(() => Promise.resolve([])),
+}));
+vi.mock("@/server/serverFns/project", () => ({
+  listProjectsBriefFn: vi.fn(() => Promise.resolve([])),
+}));
+vi.mock("@tanstack/react-router", () => ({
+  useNavigate: () => vi.fn(),
+  Link: ({
+    to,
+    params,
+    ...rest
+  }: { to?: string; params?: Record<string, string> } & React.ComponentProps<"a">) => (
+    <a
+      {...rest}
+      href={
+        typeof to === "string"
+          ? to.replace(/\$(\w+)/g, (_, k: string) => params?.[k] ?? "")
+          : undefined
+      }
+    />
+  ),
+}));
+vi.mock("@/lib/collab/use-presence-list-refresh", () => ({
+  usePresenceListRefresh: vi.fn(),
+}));
+vi.mock("@/components/project/create-project-dialog", () => ({
+  CreateProjectDialog: () => null,
+}));
+// 详情体含 TipTap 重依赖，桩掉（本文件只测四形态容器与接线）
+vi.mock("@/components/bug/detail/bug-detail-body", () => ({
+  BugDetailBody: () => <div data-testid="bug-detail-body" />,
+}));
+
+// jsdom 无 ResizeObserver / 视口高度为 0，虚拟化列表全量平铺（testcase peek-panel 同款）
+vi.mock("@tanstack/react-virtual", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@tanstack/react-virtual")>();
+  return {
+    ...actual,
+    useVirtualizer: (opts: Parameters<typeof actual.useVirtualizer>[0]) => ({
+      getVirtualItems: () =>
+        Array.from({ length: opts.count }, (_, i) => ({ index: i, key: i, start: i * 44, size: 44 })),
+      getTotalSize: () => opts.count * 44,
+      measure: () => {},
+    }),
+  };
+});
+
+import { BugPeekPanel } from "../peek-panel";
+import { BugListView } from "../bug-list-view";
+import type { BugDetail } from "../types";
+import { PEEK_DOCK_SLOT_ID } from "@/lib/peek-dock";
+
+const baseBug: BugDetail = {
+  id: "b1",
+  sequenceId: 1,
+  identifier: "PRJ-B1",
+  title: "登录页白屏",
+  description: null,
+  state: "open",
+  severity: "high",
+  source: "manual",
+  env: null,
+  url: null,
+  totalCount: 1,
+  firstOccurAt: "2026-01-01T00:00:00.000Z",
+  lastOccurAt: "2026-01-01T00:00:00.000Z",
+  archived: false,
+  projectId: "p1",
+  storyId: null,
+  story: null,
+  assignee: null,
+  createdBy: { id: "u1", username: "u", email: "e", avatarConfig: null, bgShape: null, bgColor: null },
+  updatedBy: null,
+  labels: [],
+  boardOrder: 0,
+  reproduceSteps: null,
+  fingerprint: null,
+  userAgent: null,
+  stackSummary: null,
+  repoHints: null,
+  archivedAt: null,
+  screenshotBlobId: null,
+  createdAt: "2026-01-01T00:00:00.000Z",
+  updatedAt: "2026-01-01T00:00:00.000Z",
+};
+
+type PanelProps = React.ComponentProps<typeof BugPeekPanel>;
+
+function renderPanel(over: Partial<PanelProps> = {}) {
+  const props: PanelProps = {
+    bugId: "b1",
+    users: [],
+    labels: [],
+    onClose: vi.fn(),
+    onNavigate: vi.fn(),
+    onFullscreen: vi.fn(),
+    ...over,
+  };
+  const utils = render(
+    <TooltipProvider>
+      <BugPeekPanel {...props} />
+    </TooltipProvider>,
+  );
+  return { ...utils, props };
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  window.localStorage.clear();
+  h.getBugDetailFn.mockResolvedValue(baseBug);
+  h.getBugNeighborsFn.mockResolvedValue({ prevId: null, nextId: null });
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+describe("BugPeekPanel 四形态容器（任务 35）", () => {
+  it("默认（缺省 mode）渲染 side-peek 侧滑容器，无 Dialog", () => {
+    renderPanel();
+
+    expect(screen.getByTestId("peek-panel")).toBeInTheDocument();
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    // side-peek 的关闭按钮为「收起」（区别于其他形态的「关闭」）
+    expect(screen.getByRole("button", { name: "收起" })).toBeInTheDocument();
+  });
+
+  it("side-dock portal 到布局槽（#peek-dock-panel-slot），面板 w-full + rounded-xl；槽缺席时回退容器内渲染", async () => {
+    const slot = document.createElement("div");
+    slot.id = PEEK_DOCK_SLOT_ID;
+    document.body.appendChild(slot);
+
+    const onModeChange = vi.fn();
+    const { unmount } = render(
+      <TooltipProvider>
+        <BugPeekPanel
+          bugId="b1"
+          users={[]}
+          labels={[]}
+          mode="side-dock"
+          onModeChange={onModeChange}
+          onClose={vi.fn()}
+          onNavigate={vi.fn()}
+          onFullscreen={vi.fn()}
+        />
+      </TooltipProvider>,
+    );
+
+    const panel = await screen.findByTestId("peek-panel");
+    expect(panel.parentElement).toBe(slot);
+    // dock 形态：宽度由布局槽给定、面板 w-full 填充；四角圆角与内容容器一致
+    expect(panel).toHaveClass("w-full");
+    expect(panel).toHaveClass("rounded-xl");
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+
+    unmount();
+    slot.remove();
+
+    // 槽缺席（SSR 首帧 / 布局外渲染）：回退容器内渲染，面板不消失
+    render(
+      <TooltipProvider>
+        <BugPeekPanel
+          bugId="b1"
+          users={[]}
+          labels={[]}
+          mode="side-dock"
+          onModeChange={vi.fn()}
+          onClose={vi.fn()}
+          onNavigate={vi.fn()}
+          onFullscreen={vi.fn()}
+        />
+      </TooltipProvider>,
+    );
+    expect(screen.getByTestId("peek-panel")).toBeInTheDocument();
+  });
+
+  it("modal 与 full-screen 渲染 Dialog 容器", () => {
+    const { rerender } = render(
+      <TooltipProvider>
+        <BugPeekPanel
+          bugId="b1"
+          users={[]}
+          labels={[]}
+          mode="modal"
+          onModeChange={vi.fn()}
+          onClose={vi.fn()}
+          onNavigate={vi.fn()}
+          onFullscreen={vi.fn()}
+        />
+      </TooltipProvider>,
+    );
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+
+    rerender(
+      <TooltipProvider>
+        <BugPeekPanel
+          bugId="b1"
+          users={[]}
+          labels={[]}
+          mode="full-screen"
+          onModeChange={vi.fn()}
+          onClose={vi.fn()}
+          onNavigate={vi.fn()}
+          onFullscreen={vi.fn()}
+        />
+      </TooltipProvider>,
+    );
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+  });
+
+  it("Esc 仅 side-peek 注册（side-dock/modal 不因 Esc 关闭）", () => {
+    const sidePeek = renderPanel();
+    fireEvent.keyDown(document.body, { key: "Escape" });
+    expect(sidePeek.props.onClose).toHaveBeenCalledTimes(1);
+    cleanup();
+
+    const dock = renderPanel({ mode: "side-dock", onModeChange: vi.fn() });
+    fireEvent.keyDown(document.body, { key: "Escape" });
+    expect(dock.props.onClose).not.toHaveBeenCalled();
+  });
+});
+
+describe("BugPanelHeader 布局切换器（PEEK_MODE_OPTIONS）", () => {
+  it("mode + onModeChange 就位时展示四选项，选择后回调 onModeChange", async () => {
+    const user = userEvent.setup();
+    const onModeChange = vi.fn();
+    renderPanel({ mode: "side-peek", onModeChange });
+
+    await user.click(await screen.findByTestId("peek-mode-switcher"));
+    const menu = await screen.findByRole("menu");
+    expect(menu).toHaveTextContent("侧边面板");
+    expect(menu).toHaveTextContent("侧边浮窗");
+    expect(menu).toHaveTextContent("居中浮窗");
+    expect(menu).toHaveTextContent("全屏浮窗");
+    expect(screen.getAllByRole("menuitemradio")).toHaveLength(4);
+
+    await user.click(screen.getByRole("menuitemradio", { name: "侧边面板" }));
+    await waitFor(() => {
+      expect(onModeChange).toHaveBeenCalledWith("side-dock");
+    });
+  });
+
+  it("未传 onModeChange（叠加层旧用法）不渲染切换器", () => {
+    renderPanel();
+    expect(screen.queryByTestId("peek-mode-switcher")).not.toBeInTheDocument();
+  });
+});
+
+describe("BugListView 接线（任务 31 预留 → 闭环）", () => {
+  const PROPS = {
+    users: [] as never[],
+    projects: [{ id: "p1", name: "项目A", displayId: "PA", icon: "folder" }],
+    labels: [] as { id: string; name: string; color: string }[],
+  };
+
+  function wireList(bugs: BugDetail[]) {
+    h.listBugGroupsFn.mockResolvedValue({ groups: [{ key: "open", total: bugs.length }] });
+    h.listAllGroupsItemsFn.mockResolvedValue({ grouped: { open: bugs } });
+    h.listBugViewsFn.mockResolvedValue([]);
+    h.getBugDisplayOptionsFn.mockResolvedValue(null);
+    h.updateBugDisplayOptionsFn.mockResolvedValue(null);
+    return render(
+      <TooltipProvider>
+        <BugListView {...PROPS} />
+      </TooltipProvider>,
+    );
+  }
+
+  async function openPeek(user: ReturnType<typeof userEvent.setup>) {
+    await user.click(await screen.findByText("登录页白屏", {}, { timeout: 3000 }));
+    await screen.findByTestId("peek-panel");
+  }
+
+  it("mode 切换 localStorage 持久化：切「侧边面板」→ bug.peekMode=side-dock", async () => {
+    const user = userEvent.setup();
+    wireList([baseBug]);
+
+    await openPeek(user);
+    // 列表默认 side-peek：容器内渲染 + 无 Dialog
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+
+    await user.click(screen.getByTestId("peek-mode-switcher"));
+    await user.click(await screen.findByRole("menuitemradio", { name: "侧边面板" }));
+
+    await waitFor(() => {
+      expect(window.localStorage.getItem("bug.peekMode")).toBe("side-dock");
+    });
+  });
+
+  it("恢复持久化 mode：bug.peekMode=modal 时开 Peek 直出 Dialog；非法值回落默认 side-peek", async () => {
+    const user = userEvent.setup();
+    window.localStorage.setItem("bug.peekMode", "modal");
+    wireList([baseBug]);
+
+    await openPeek(user);
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    cleanup();
+
+    // 非法值（含历史残留）守卫回落默认 side-peek：容器内渲染、无 Dialog
+    window.localStorage.clear();
+    window.localStorage.setItem("bug.peekMode", "bogus");
+    wireList([baseBug]);
+
+    await openPeek(user);
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    expect(screen.getByTestId("peek-panel")).toBeInTheDocument();
+  });
+});

package/src/components/bug/__tests__/saved-views.test.tsx

@@ -0,0 +1,309 @@
+// 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/>.
+
+// 任务 30（三期 BUG-A 收尾）：BUG 保存视图前端接线集成测试。整页 BugListView
+// 真实接线（harness 零复制品）：①筛选条「保存为视图」→ CreateViewDialog 提交
+// createBugViewFn（name/icon/filters 收敛/displayOptions 快照）→ 选择器列表出现；
+// ②应用视图写回 filterConditions（组查询 filters 串）+ displayOptions
+// （updateBugDisplayOptionsFn，五键无 icon 泄漏）；③编辑入口回填 name/icon/筛选
+// → updateBugViewFn 带 id；④删除走 ConfirmDialog → deleteBugViewFn。
+// serverFn 全量 mock（仿 testcase/__tests__/list-view.test.tsx 形态）。
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, waitFor, cleanup } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { TooltipProvider } from "@/components/ui/tooltip";
+
+import { DEFAULT_BUG_DISPLAY_OPTIONS, type BugSavedView } from "../display/types";
+import { BugListView } from "../bug-list-view";
+
+const h = vi.hoisted(() => ({
+  listBugGroupsFn: vi.fn(),
+  listBugsInGroupFn: vi.fn(),
+  listAllGroupsItemsFn: vi.fn(),
+  getBugDisplayOptionsFn: vi.fn(),
+  updateBugDisplayOptionsFn: vi.fn(),
+  listBugViewsFn: vi.fn(),
+  createBugViewFn: vi.fn(),
+  updateBugViewFn: vi.fn(),
+  deleteBugViewFn: vi.fn(),
+  createBugFn: vi.fn(),
+  bulkArchiveBugsFn: vi.fn(),
+  bulkDeleteBugsFn: vi.fn(),
+  bulkUpdateBugsFn: vi.fn(),
+}));
+
+vi.mock("@/server/serverFns/bug", () => h);
+vi.mock("@/server/serverFns/story", () => ({
+  listUsersBriefFn: vi.fn(() => Promise.resolve([])),
+}));
+vi.mock("@/server/serverFns/project", () => ({
+  listProjectsBriefFn: vi.fn(() => Promise.resolve([])),
+  ensureBuiltinProjectFn: vi.fn(() => Promise.resolve(null)),
+}));
+vi.mock("@tanstack/react-router", () => ({
+  useNavigate: () => vi.fn(),
+}));
+vi.mock("@/lib/collab/use-presence-list-refresh", () => ({
+  usePresenceListRefresh: vi.fn(),
+}));
+// 内嵌重依赖对话框/详情面板裁掉（TipTap 编辑器、详情协同链），本文件只测视图链路
+vi.mock("@/components/project/create-project-dialog", () => ({
+  CreateProjectDialog: () => null,
+}));
+vi.mock("../create-bug-dialog", () => ({ CreateBugDialog: () => null }));
+vi.mock("../peek-panel", () => ({ BugPeekPanel: () => null }));
+
+/** bug-views.ts 既有 CRUD 四件的 DTO 行构造（display/types BugSavedView 形状） */
+const viewRow = (over: Partial<BugSavedView>): BugSavedView => ({
+  id: "v1",
+  name: "打开的 BUG",
+  projectId: null,
+  filters: [],
+  displayOptions: { ...DEFAULT_BUG_DISPLAY_OPTIONS },
+  createdAt: "2026-01-01T00:00:00.000Z",
+  updatedAt: "2026-01-01T00:00:00.000Z",
+  ...over,
+});
+
+/** 动态视图清单（listBugViewsFn 返回它；createBugViewFn 追加） */
+let createdRows: BugSavedView[];
+
+const PROPS = {
+  users: [],
+  projects: [{ id: "p1", name: "项目A", displayId: "PA", icon: "folder" }],
+  labels: [],
+};
+
+/** 打开视图选择器 Popover（内置默认视图在触发器位） */
+async function openSelector(user: ReturnType<typeof userEvent.setup>) {
+  await user.click(await screen.findByRole("button", { name: /默认视图/ }, { timeout: 3000 }));
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  window.localStorage.clear();
+  // 视图清单 mock 动态化：createBugViewFn 落入 createdRows，保存后 reload 可见
+  createdRows = [];
+  h.listBugGroupsFn.mockResolvedValue({ groups: [{ key: "open", total: 0 }] });
+  h.listAllGroupsItemsFn.mockResolvedValue({ grouped: { open: [] } });
+  h.listBugsInGroupFn.mockResolvedValue({ items: [], total: 0, hasMore: false });
+  h.getBugDisplayOptionsFn.mockResolvedValue(null);
+  h.updateBugDisplayOptionsFn.mockResolvedValue(null);
+  h.listBugViewsFn.mockImplementation(() => Promise.resolve(createdRows));
+  h.createBugViewFn.mockImplementation(({ data }: { data: { name: string; filters: unknown; displayOptions: Record<string, unknown> } }) => {
+    const row = viewRow({
+      id: "v-new",
+      name: data.name,
+      filters: data.filters as BugSavedView["filters"],
+      // icon 为 displayOptions JSON 的运行时扩展键（类型面 BugDisplayOptions 无此键）
+      displayOptions: data.displayOptions as unknown as BugSavedView["displayOptions"],
+    });
+    createdRows.push(row);
+    return Promise.resolve(row);
+  });
+  h.updateBugViewFn.mockImplementation(({ data }: { data: { id: string } }) =>
+    Promise.resolve(viewRow({ id: data.id })),
+  );
+  h.deleteBugViewFn.mockResolvedValue({ success: true });
+});
+
+afterEach(() => {
+  cleanup();
+});
+
+function renderView() {
+  return render(
+    <TooltipProvider>
+      <BugListView {...PROPS} />
+    </TooltipProvider>,
+  );
+}
+
+describe("BugListView 保存视图接线（任务 30）", () => {
+  it("存为视图：筛选条提交 createBugViewFn（name/icon/filters 收敛/displayOptions 快照）后选择器列表出现", async () => {
+    const user = userEvent.setup();
+    renderView();
+
+    // 筛选条：条件筛选开关 → 添加条件 → 状态（默认值草稿即成条件，state is open）
+    await user.click(await screen.findByRole("button", { name: "筛选" }, { timeout: 3000 }));
+    const addButtons = await screen.findAllByRole("button", { name: /添加条件/ });
+    await user.click(addButtons[0]!);
+    await user.click(await screen.findByRole("button", { name: "状态" }));
+
+    // FilterRow「保存为视图」→ 对话框提交
+    await user.click(await screen.findByRole("button", { name: "保存为视图" }));
+    await user.type(await screen.findByPlaceholderText("视图名称"), "打开的 BUG");
+    await user.click(screen.getByRole("button", { name: "保存" }));
+
+    await waitFor(() => {
+      expect(h.createBugViewFn).toHaveBeenCalledTimes(1);
+    });
+    const data = (h.createBugViewFn.mock.calls[0]![0] as { data: { name: string; projectId: string | null; filters: { property: string; operator: string; value: string }[]; displayOptions: Record<string, unknown> } }).data;
+    expect(data.name).toBe("打开的 BUG");
+    expect(data.projectId).toBeNull();
+    // filters 收敛为三键数组（去 id），当前筛选快照 state is open
+    expect(data.filters).toEqual([{ property: "state", operator: "is", value: "open" }]);
+    // displayOptions 快照当前显示域（五键齐全）+ icon 随行（icon 无独立列，随 displayOptions 透传存储）
+    expect(data.displayOptions).toMatchObject({
+      groupBy: "state",
+      orderBy: "created",
+      orderDir: "desc",
+      pageSize: 100,
+      icon: "list",
+    });
+    expect(data.displayOptions.properties).toContain("state");
+
+    // 保存后 reload → 选择器列表出现新视图（触发器仍为默认视图：创建不自动应用）
+    await openSelector(user);
+    expect(await screen.findByText("打开的 BUG")).toBeInTheDocument();
+  });
+
+  it("应用视图：conditions 写回组查询 filters 串，displayOptions 写回 updateBugDisplayOptionsFn（八键、无 icon 泄漏）", async () => {
+    const user = userEvent.setup();
+    h.listBugViewsFn.mockResolvedValue([
+      viewRow({
+        filters: [{ property: "state", operator: "is", value: "open" }],
+        displayOptions: {
+          groupBy: "severity",
+          orderBy: "created",
+          orderDir: "asc",
+          properties: [...DEFAULT_BUG_DISPLAY_OPTIONS.properties],
+          pageSize: 100,
+          icon: "bug",
+        } as unknown as BugSavedView["displayOptions"],
+      }),
+    ]);
+    renderView();
+
+    await openSelector(user);
+    await user.click(await screen.findByRole("button", { name: "打开的 BUG" }));
+
+    // filterConditions 写回：组查询随新签名重拉，filters 串含视图条件；groupBy 随视图切换
+    await waitFor(
+      () => {
+        expect(h.listBugGroupsFn).toHaveBeenLastCalledWith(
+          expect.objectContaining({
+            data: expect.objectContaining({
+              groupBy: "severity",
+              filters: expect.stringContaining('"property":"state"'),
+            }),
+          }),
+        );
+      },
+      { timeout: 3000 },
+    );
+    const lastFilters = (h.listBugGroupsFn.mock.calls.at(-1)![0] as { data: { filters: string } }).data.filters;
+    expect(lastFilters).toContain('"value":"open"');
+
+    // displayOptions 写回：显示域整组下发（任务 40 起八键 = 五键 + 双层分组三键，
+    // 存量视图 JSON 缺失的新键由 normalizeDisplayOptions 回落默认值；icon 不入显示域持久化行）
+    await waitFor(() => {
+      expect(h.updateBugDisplayOptionsFn).toHaveBeenCalled();
+    });
+    const displayArg = (h.updateBugDisplayOptionsFn.mock.calls.at(-1)![0] as { data: Record<string, unknown> }).data;
+    expect(displayArg).toEqual({
+      groupBy: "severity",
+      orderBy: "created",
+      orderDir: "asc",
+      properties: [...DEFAULT_BUG_DISPLAY_OPTIONS.properties],
+      pageSize: 100,
+      subGroupBy: "none",
+      showEmptyGroups: false,
+      showSubItems: false,
+    });
+    expect(displayArg).not.toHaveProperty("icon");
+  });
+
+  it("编辑入口：回填 name/icon/筛选条件，提交 updateBugViewFn 带视图 id", async () => {
+    const user = userEvent.setup();
+    h.listBugViewsFn.mockResolvedValue([
+      viewRow({
+        filters: [{ property: "state", operator: "is", value: "open" }],
+        displayOptions: { ...DEFAULT_BUG_DISPLAY_OPTIONS, icon: "bug" } as unknown as BugSavedView["displayOptions"],
+      }),
+    ]);
+    renderView();
+
+    await openSelector(user);
+    await user.click(await screen.findByRole("button", { name: "编辑" }));
+
+    // 编辑态标题 + name/icon 回填
+    expect(await screen.findByText("编辑视图")).toBeInTheDocument();
+    const nameInput = screen.getByPlaceholderText("视图名称") as HTMLInputElement;
+    expect(nameInput.value).toBe("打开的 BUG");
+    const iconTrigger = screen.getByRole("button", { name: "选择图标" });
+    expect(iconTrigger.querySelector("svg.lucide-bug")).not.toBeNull();
+    // 筛选条件回填（对话框内嵌 FilterRow 含状态条件行）
+    expect(await screen.findByRole("button", { name: "状态" })).toBeInTheDocument();
+
+    // 改名保存：提交带视图 id（update 路由依据），icon 保留
+    await user.clear(nameInput);
+    await user.type(nameInput, "改名视图");
+    await user.click(screen.getByRole("button", { name: "保存" }));
+
+    await waitFor(() => {
+      expect(h.updateBugViewFn).toHaveBeenCalledTimes(1);
+    });
+    const data = (h.updateBugViewFn.mock.calls[0]![0] as { data: { id: string; name: string; filters: unknown[]; displayOptions: Record<string, unknown> } }).data;
+    expect(data.id).toBe("v1");
+    expect(data.name).toBe("改名视图");
+    expect(data.filters).toEqual([{ property: "state", operator: "is", value: "open" }]);
+    expect(data.displayOptions).toMatchObject({ icon: "bug" });
+  });
+
+  it("删除入口：确认弹窗后 deleteBugViewFn 带 id，列表移除", async () => {
+    const user = userEvent.setup();
+    h.listBugViewsFn.mockResolvedValue([viewRow({ filters: [] })]);
+    renderView();
+
+    await openSelector(user);
+    await user.click(await screen.findByRole("button", { name: "删除" }));
+
+    // 确认弹窗：标题 + 含视图名的描述文案
+    expect(await screen.findByText("删除视图")).toBeInTheDocument();
+    const nameHits = screen.getAllByText(/打开的 BUG/);
+    expect(nameHits.some((el) => el.closest('[role="alertdialog"]'))).toBe(true);
+
+    await user.click(screen.getByRole("button", { name: "确认删除" }));
+    await waitFor(() => {
+      expect(h.deleteBugViewFn).toHaveBeenCalledWith({ data: { id: "v1" } });
+    });
+    // reload（listBugViewsFn 已被删后重置为空集由实现触发）——此处断言删除调用即达意
+  });
+
+  it("显示下拉视图管理区：beforeOptions 列出视图并可应用（story 同位）", async () => {
+    const user = userEvent.setup();
+    h.listBugViewsFn.mockResolvedValue([
+      viewRow({
+        filters: [{ property: "state", operator: "is", value: "open" }],
+        displayOptions: { ...DEFAULT_BUG_DISPLAY_OPTIONS, groupBy: "severity", icon: "bug" } as unknown as BugSavedView["displayOptions"],
+      }),
+    ]);
+    renderView();
+
+    // 打开显示选项下拉 → 视图管理区（可折叠「视图」分组头 + 视图行）→ 点行应用
+    await user.click(await screen.findByTestId("bug-display-trigger", {}, { timeout: 3000 }));
+    expect(await screen.findByText("视图")).toBeInTheDocument();
+    await user.click(await screen.findByText("打开的 BUG"));
+
+    await waitFor(() => {
+      expect(h.updateBugDisplayOptionsFn).toHaveBeenCalled();
+    });
+    const displayArg = (h.updateBugDisplayOptionsFn.mock.calls.at(-1)![0] as { data: Record<string, unknown> }).data;
+    expect(displayArg).toMatchObject({ groupBy: "severity" });
+  });
+});