@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/story/views/__tests__/calendar-view.test.tsx

@@ -0,0 +1,262 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// Copyright (C) 2026 AllBlue Contributors
+
+// calendar-view reui EventCalendar 组装的 jsdom 渲染 smoke（不模拟拖拽/改期）：
+// ① 月视图出现 7 列星期头，chip 文本含 identifier
+// ② deadline-only（仅 targetDate）chip 带 Clock 图标前缀
+// ③ 点击 chip → onOpenStory 以该 story.id 调用一次
+// ④ isUnscheduled（双日期全无）的 story 出现在底部未排期区、不产生日历事件
+// ⑤ 空数组渲染不抛错
+// jsdom 垫片：getAnimations（Base UI ScrollArea 延迟 timer），与
+// gantt-view-virtualize / timeline-view 测试同惯例（ResizeObserver 与
+// PointerEvent 由全局 src/__tests__/setup.ts 提供，locale 全局钉 zh）。
+if (typeof Element.prototype.getAnimations !== "function") {
+  Element.prototype.getAnimations = () => [];
+}
+
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import { startOfWeek } from "date-fns";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { CalendarView } from "../calendar-view";
+import { resolveDragBlockedToast } from "../calendar/drag-blocked";
+import { formatDateLocal } from "@/lib/datetime";
+import { m } from "@/paraglide/messages.js";
+import type { StoryListItem } from "../../types";
+
+function story(
+  id: string,
+  identifier: string,
+  dates: { startDate: string | null; targetDate: string | null },
+): StoryListItem {
+  return {
+    id,
+    identifier,
+    name: `需求 ${id}`,
+    description: null,
+    state: "todo",
+    priority: "medium",
+    archived: false,
+    startDate: dates.startDate,
+    targetDate: dates.targetDate,
+    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",
+  };
+}
+
+/** 以「今天」为锚构造日期：默认月视图窗口必含今天（仅单日事件适用） */
+function aroundToday(dayOffset: number): string {
+  const d = new Date();
+  d.setDate(d.getDate() + dayOffset);
+  return formatDateLocal(d);
+}
+
+/**
+ * 以「当前周的周一」为锚构造日期：月视图按周行切分多日事件（同行内才合并
+ * 成一条 bar），today+N 在周四至周日会跨入下周行裂成 2 个 chip——多日事件
+ * 必须锚定周一（周一..周五恒在同一周行）。月视图恒渲染 42 格整周行
+ * （event-calendar-lib visibleStart..visibleStart+42），含今天的周行即使跨月
+ * 也完整可见，故周一锚恒在窗口内。
+ */
+function aroundMonday(dayOffset: number): string {
+  const d = startOfWeek(new Date(), { weekStartsOn: 1 });
+  d.setDate(d.getDate() + dayOffset);
+  return formatDateLocal(d);
+}
+
+function setup(stories: StoryListItem[]) {
+  const onCreate = vi.fn();
+  const onOpenStory = vi.fn();
+  const utils = render(
+    <CalendarView
+      stories={stories}
+      onCreate={onCreate}
+      onOpenStory={onOpenStory}
+      orderBy="manual"
+    />,
+  );
+  return { ...utils, onCreate, onOpenStory };
+}
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+describe("CalendarView（reui EventCalendar 组装）", () => {
+  it("月视图出现 7 列星期头，chip 文本含 STORY-1", () => {
+    const scheduled = story("s1", "STORY-1", {
+      startDate: aroundMonday(0),
+      targetDate: aroundMonday(4),
+    });
+    const { container } = setup([scheduled]);
+
+    const headers = container.querySelectorAll(
+      "[data-slot=event-calendar-month-header] [role=columnheader]",
+    );
+    expect(headers).toHaveLength(7);
+
+    const chip = container.querySelector("[data-slot=event-calendar-event]");
+    expect(chip).not.toBeNull();
+    expect(chip!.textContent).toContain("STORY-1");
+  });
+
+  it("deadline-only（仅 targetDate）chip 带 Clock 图标前缀", () => {
+    const deadlineOnly = story("s2", "STORY-2", {
+      startDate: null,
+      targetDate: aroundToday(0),
+    });
+    const { container } = setup([deadlineOnly]);
+
+    const chip = container.querySelector("[data-slot=event-calendar-event]");
+    expect(chip).not.toBeNull();
+    expect(chip!.querySelector("svg.lucide-clock")).not.toBeNull();
+  });
+
+  it("点击 chip → onOpenStory 以该 story.id 调用一次", () => {
+    const singleDay = story("s3", "STORY-3", {
+      startDate: aroundToday(0),
+      targetDate: null,
+    });
+    const { container, onOpenStory } = setup([singleDay]);
+
+    const chip = container.querySelector<HTMLElement>(
+      "[data-slot=event-calendar-event]",
+    );
+    expect(chip).not.toBeNull();
+    fireEvent.click(chip!);
+    expect(onOpenStory).toHaveBeenCalledTimes(1);
+    expect(onOpenStory).toHaveBeenCalledWith("s3");
+  });
+
+  it("isUnscheduled（双日期全无）的 story 出现在未排期区、不产生日历事件", () => {
+    const scheduled = story("s1", "STORY-1", {
+      startDate: aroundToday(0),
+      targetDate: null,
+    });
+    const unscheduled = story("s4", "STORY-4", {
+      startDate: null,
+      targetDate: null,
+    });
+    const { container } = setup([scheduled, unscheduled]);
+
+    // 未排期区出现 STORY-4
+    const zone = container.querySelector(
+      "[data-slot=story-calendar-unscheduled]",
+    );
+    expect(zone).not.toBeNull();
+    expect(zone!.textContent).toContain("STORY-4");
+
+    // 日历事件只有 scheduled 一条，不含 STORY-4
+    const chips = [
+      ...container.querySelectorAll("[data-slot=event-calendar-event]"),
+    ];
+    expect(chips).toHaveLength(1);
+    expect(chips[0].textContent).not.toContain("STORY-4");
+  });
+
+  it("未排期 chip 可拖拽；「排期」按钮点击不冒泡 onOpenStory（chip 本体点击才开 Peek）", () => {
+    const unscheduled = story("s4", "STORY-4", {
+      startDate: null,
+      targetDate: null,
+    });
+    const { container, onOpenStory } = setup([unscheduled]);
+
+    const zone = container.querySelector(
+      "[data-slot=story-calendar-unscheduled]",
+    );
+    expect(zone).not.toBeNull();
+    const buttons = [...zone!.querySelectorAll("button")];
+    // chip 本体：draggable（HTML5 拖入排期的载荷来源）
+    const chip = buttons.find((b) => b.textContent?.includes("STORY-4"));
+    expect(chip).not.toBeUndefined();
+    expect(chip!.getAttribute("draggable")).toBe("true");
+    // 「排期」按钮：click 只开 Popover，不触发 chip 的 onOpenStory
+    const scheduleBtn = buttons.find(
+      (b) => b.textContent === m.story_calendar_schedule(),
+    );
+    expect(scheduleBtn).not.toBeUndefined();
+    expect(scheduleBtn!.getAttribute("aria-expanded")).not.toBe("true");
+    fireEvent.click(scheduleBtn!);
+    expect(onOpenStory).not.toHaveBeenCalled();
+    // 正向断言：弹层确实打开——用触发按钮 aria-expanded=true 而非
+    // popover-content 存在性（Base UI 关闭后 popup 节点仍可能挂 DOM，
+    // 存在性会误判；aria-expanded 是触发器上的受控状态，jsdom 下最稳）
+    expect(scheduleBtn!.getAttribute("aria-expanded")).toBe("true");
+    fireEvent.click(chip!);
+    expect(onOpenStory).toHaveBeenCalledTimes(1);
+    expect(onOpenStory).toHaveBeenCalledWith("s4");
+  });
+
+  it("cancelled chip 只读：无 resize 手柄（对照正常双日期 chip 有两个手柄）", () => {
+    const cancelled = {
+      ...story("sc", "STORY-C", {
+        startDate: aroundMonday(0),
+        targetDate: aroundMonday(4),
+      }),
+      state: "cancelled" as const,
+    };
+    const normal = story("sn", "STORY-N", {
+      startDate: aroundMonday(0),
+      targetDate: aroundMonday(4),
+    });
+    const { container } = setup([cancelled, normal]);
+
+    const chips = [
+      ...container.querySelectorAll("[data-slot=event-calendar-event]"),
+    ];
+    expect(chips).toHaveLength(2);
+    const byText = (text: string) =>
+      chips.find((c) => c.textContent?.includes(text));
+    expect(byText("STORY-C")).toBeDefined();
+    expect(byText("STORY-N")).toBeDefined();
+    // reui 无 data-readonly 属性：readOnly 的 DOM 表现是 resize 手柄缺席
+    expect(
+      byText("STORY-C")!.querySelectorAll(
+        "[data-slot=event-calendar-resize-handle]",
+      ),
+    ).toHaveLength(0);
+    expect(
+      byText("STORY-N")!.querySelectorAll(
+        "[data-slot=event-calendar-resize-handle]",
+      ),
+    ).toHaveLength(2);
+  });
+
+  it("空数组渲染不抛错", () => {
+    const { container } = setup([]);
+    expect(
+      container.querySelector("[data-slot=event-calendar-month-header]"),
+    ).not.toBeNull();
+    // 未排期区恒在：计数为 0
+    expect(
+      container.querySelector("[data-slot=story-calendar-unscheduled]"),
+    ).not.toBeNull();
+  });
+});
+
+describe("resolveDragBlockedToast（onDragBlocked 三分支）", () => {
+  it("readOnly → 只读取消提示；disabled → 不可拉伸提示；interactions-off → null 不弹", () => {
+    expect(resolveDragBlockedToast("readOnly")).toBe(
+      m.story_calendar_readonlyCancelled(),
+    );
+    expect(resolveDragBlockedToast("disabled")).toBe(
+      m.story_calendar_dragBlockedStretch(),
+    );
+    expect(resolveDragBlockedToast("interactions-off")).toBeNull();
+  });
+});

package/src/components/story/views/__tests__/kanban-drop-subgroup.test.ts

@@ -0,0 +1,68 @@
+// 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/>.
+
+// 回归：跨子分组拖动必须按「提交后的相邻卡片」推断目标子分组。
+// 曾经用 membershipRef[storyId]（effect 同步的旧值）→ drop 当帧判定「目标分区 ==
+// 原分区」而不发 patch，表现为拖到「已取消-高」却落进「已取消-低」。
+import { describe, expect, it } from "vitest";
+import { resolveDropSubKey, resolveSubKeyForDrop } from "../kanban-view";
+import type { StoryListItem } from "../../types";
+
+const card = (id: string) => ({ id }) as StoryListItem;
+
+const membership = { a: "high", b: "high", c: "medium", d: "low" };
+
+describe("resolveDropSubKey", () => {
+  it("插到某卡之前：取紧随其后那张卡的子分组（跨子分组落位）", () => {
+    // 拖入后排列：[a, x, b, c, d] → x 紧跟 a（high）→ 目标是 high
+    const items = [card("a"), card("x"), card("b"), card("c"), card("d")];
+    expect(resolveDropSubKey(items, "x", membership)).toBe("high");
+  });
+
+  it("追加到列尾：取前一张卡的子分组", () => {
+    const items = [card("a"), card("b"), card("c"), card("x")];
+    expect(resolveDropSubKey(items, "x", membership)).toBe("medium");
+  });
+
+  it("同列内下移：仍按落点相邻卡判定", () => {
+    // x（原 high）落到 c 与 d 之间 → 后面是 d（low）→ 目标是 low
+    const items = [card("a"), card("b"), card("c"), card("x"), card("d")];
+    expect(resolveDropSubKey(items, "x", membership)).toBe("low");
+  });
+
+  it("找不到该卡时返回 undefined（调用方跳过 patch）", () => {
+    expect(resolveDropSubKey([card("a")], "zzz", membership)).toBeUndefined();
+  });
+
+  it("相邻卡无成员记录时回落到该卡自身", () => {
+    const items = [card("unknown1"), card("x"), card("unknown2")];
+    expect(resolveDropSubKey(items, "x", { x: "low" })).toBe("low");
+  });
+});
+
+describe("resolveSubKeyForDrop", () => {
+  it("优先取 hover 卡所属分组（追加到该分组末尾，而非下一分组）", () => {
+    // 排列：[a(high), x(待落), b(medium), c(low)]，hover 在 a 上 → 归属 high
+    const items = [card("a"), card("x"), card("b"), card("c")];
+    expect(resolveSubKeyForDrop(items, "x", membership, "a")).toBe("high");
+  });
+
+  it("hover 到列本身（无卡）时回落到相邻卡规则", () => {
+    const items = [card("x"), card("c"), card("d")];
+    expect(resolveSubKeyForDrop(items, "x", membership, "in_progress")).toBe("medium");
+  });
+});

package/src/components/story/views/__tests__/kanban-peek-sync.test.tsx

@@ -0,0 +1,184 @@
+// 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/>.
+
+// 回归：side-peek 打开时点击看板卡片应切换详情而非关闭面板。
+// story-list-view 在视图区 wrapper 上挂 onClick={handlePanelBackClick}，
+// 点击非 button/a/[data-no-close] 的元素会关闭面板；看板卡片是 div，
+// 其 onOpenStory 先 setPeek(新id)、冒泡后又 setPeek(null)，净效果=关闭。
+// 同时锁定：卡片内联编辑落库后须通知父级 onStoryPatched，供 PeekPanel 实时同步。
+
+const MockResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+if (typeof globalThis.ResizeObserver === "undefined") {
+  (globalThis as any).ResizeObserver = MockResizeObserver;
+}
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { KanbanView } from "../kanban-view";
+import { PRIORITY_LABEL } from "../../constants";
+import type { DisplayOptions, GroupNode } from "../../display/types";
+import type { StoryListItem } from "../../types";
+
+vi.mock("@tanstack/react-start", () => ({
+  useServerFn: (fn: unknown) => fn,
+}));
+
+const { updateStoryFn, reorderStoriesFn } = vi.hoisted(() => ({
+  updateStoryFn: vi.fn(),
+  reorderStoriesFn: vi.fn(),
+}));
+vi.mock("@/server/serverFns/story", () => ({
+  updateStoryFn,
+  reorderStoriesFn,
+}));
+
+function story(
+  id: string,
+  identifier: string,
+  priority: StoryListItem["priority"],
+): StoryListItem {
+  return {
+    id,
+    identifier,
+    name: identifier,
+    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",
+  };
+}
+
+const column = (items: StoryListItem[], subGroups: GroupNode[]): GroupNode[] => [
+  { key: "in_progress", label: "进行中", items, subGroups },
+];
+
+const displayFilters: DisplayOptions = {
+  groupBy: "state",
+  subGroupBy: "priority",
+  orderBy: "created",
+  orderDir: "desc",
+  properties: [],
+  showEmptyGroups: false,
+  showSubItems: false,
+  pageSize: 100,
+};
+
+function renderBoard(props: {
+  onOpenStory: (id: string) => void;
+  onStoryPatched: (storyId: string, patch: Record<string, unknown>) => void;
+}) {
+  const s1 = story("s1", "PERF-1", "medium");
+  return render(
+    <TooltipProvider>
+      <KanbanView
+        groups={column([s1], [{ key: "medium", label: "中", items: [s1] }])}
+        displayFilters={displayFilters}
+        users={[]}
+        labels={[]}
+        projects={[]}
+        onRefresh={vi.fn()}
+        onOpenStory={props.onOpenStory}
+        onStoryPatched={props.onStoryPatched}
+        onLoadMore={vi.fn()}
+        hasMore={false}
+      />
+    </TooltipProvider>,
+  );
+}
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("看板卡片与 PeekPanel 联动", () => {
+  it("点击卡片不冒泡到外层容器（不触发背景关闭），且调用 onOpenStory", async () => {
+    const onOpenStory = vi.fn();
+    const backdrop = vi.fn();
+    const s1 = story("s1", "PERF-1", "medium");
+    const { container } = render(
+      <div onClick={backdrop}>
+        <TooltipProvider>
+          <KanbanView
+            groups={column([s1], [{ key: "medium", label: "中", items: [s1] }])}
+            displayFilters={displayFilters}
+            users={[]}
+            labels={[]}
+            projects={[]}
+            onRefresh={vi.fn()}
+            onOpenStory={onOpenStory}
+            onLoadMore={vi.fn()}
+            hasMore={false}
+          />
+        </TooltipProvider>
+      </div>,
+    );
+
+    const card = container.querySelector('[data-slot="kanban-item"]');
+    expect(card).not.toBeNull();
+    // 点卡片内容区（真实用户点击落点），事件应止于卡片、不冒泡到外层 backdrop
+    await userEvent.click(card?.querySelector(".line-clamp-2") as Element);
+
+    expect(onOpenStory).toHaveBeenCalledWith("s1");
+    expect(backdrop).not.toHaveBeenCalled();
+  });
+
+  it("卡片内联编辑落库成功后调用 onStoryPatched(storyId, patch)", async () => {
+    updateStoryFn.mockResolvedValue(undefined);
+    const onStoryPatched = vi.fn();
+    const { container } = renderBoard({ onOpenStory: vi.fn(), onStoryPatched });
+
+    const card = container.querySelector('[data-slot="kanban-item"]');
+    const chip = Array.from(card?.querySelectorAll("span") ?? []).find(
+      (el) => el.textContent === PRIORITY_LABEL["medium"](),
+    );
+    expect(chip).not.toBeUndefined();
+    await userEvent.click(chip as Element);
+
+    const option = await screen.findByRole("button", {
+      name: PRIORITY_LABEL["high"](),
+    });
+    await userEvent.click(option);
+
+    await waitFor(() => {
+      expect(onStoryPatched).toHaveBeenCalledWith("s1", { priority: "high" });
+    });
+  });
+});

package/src/components/story/views/__tests__/kanban-view-membership-sync.test.tsx

@@ -0,0 +1,179 @@
+// 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/>.
+
+// 回归：卡片顺序取自 service 侧成员表、分区切分取自本地成员表时，两者若不同帧到达
+// 会切出两个同 key 分区（如两个「中」），React 报 duplicate key 并残留幽灵卡。
+// 场景：同列内改优先级 → 服务端把它排进新区块中间。
+
+const MockResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+if (typeof globalThis.ResizeObserver === "undefined") {
+  (globalThis as any).ResizeObserver = MockResizeObserver;
+}
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { act, render } from "@testing-library/react";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { KanbanView } from "../kanban-view";
+import type { DisplayOptions, GroupNode } from "../../display/types";
+import type { StoryListItem } from "../../types";
+
+vi.mock("@tanstack/react-start", () => ({
+  useServerFn: (fn: unknown) => fn,
+}));
+vi.mock("@/server/serverFns/story", () => ({
+  updateStoryFn: vi.fn(),
+  reorderStoriesFn: vi.fn(),
+}));
+
+function story(
+  id: string,
+  identifier: string,
+  priority: StoryListItem["priority"],
+): StoryListItem {
+  return {
+    id,
+    identifier,
+    name: identifier,
+    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",
+  };
+}
+
+const column = (items: StoryListItem[], subGroups: GroupNode[]): GroupNode[] => [
+  { key: "in_progress", label: "进行中", items, subGroups },
+];
+
+const displayFilters: DisplayOptions = {
+  groupBy: "state",
+  subGroupBy: "priority",
+  orderBy: "created",
+  orderDir: "desc",
+  properties: [],
+  showEmptyGroups: false,
+  showSubItems: false,
+  pageSize: 100,
+};
+
+function renderBoard(groups: GroupNode[]) {
+  return render(
+    <TooltipProvider>
+      <KanbanView
+        groups={groups}
+        displayFilters={displayFilters}
+        users={[]}
+        labels={[]}
+        projects={[]}
+        onRefresh={vi.fn()}
+        onOpenStory={vi.fn()}
+        onLoadMore={vi.fn()}
+        hasMore={false}
+      />
+    </TooltipProvider>,
+  );
+}
+
+/** 分区标题按钮的文案集合（同名分区出现两次即重复 key 的视觉表现） */
+function runHeaderTexts(container: HTMLElement): string[] {
+  return Array.from(container.querySelectorAll("button[aria-expanded]")).map(
+    (el) => el.textContent ?? "",
+  );
+}
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("KanbanView 分区成员表与卡片顺序同源", () => {
+  it("同列内改优先级触发重排时，不产生同 key 分区、卡片不重复渲染", () => {
+    const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    const h1 = story("s-h1", "PERF-100", "high");
+    const h2 = story("s-h2", "PERF-200", "high");
+    const m1 = story("s-m1", "PERF-2337", "medium");
+
+    const { rerender, container } = renderBoard(
+      column([h1, h2, m1], [
+        { key: "high", label: "高", items: [h1, h2] },
+        { key: "medium", label: "中", items: [m1] },
+      ]),
+    );
+
+    const h1After = story("s-h1", "PERF-100", "high");
+    const h2After = story("s-h2", "PERF-200", "high");
+    const m1After = story("s-m1", "PERF-2337", "high");
+    const m2 = story("s-m2", "PERF-300", "medium");
+
+    act(() => {
+      rerender(
+        <TooltipProvider>
+          <KanbanView
+            groups={column([h1After, m1After, h2After, m2], [
+              { key: "high", label: "高", items: [h1After, m1After, h2After] },
+              { key: "medium", label: "中", items: [m2] },
+            ])}
+            displayFilters={displayFilters}
+            users={[]}
+            labels={[]}
+            projects={[]}
+            onRefresh={vi.fn()}
+            onOpenStory={vi.fn()}
+            onLoadMore={vi.fn()}
+            hasMore={false}
+          />
+        </TooltipProvider>,
+      );
+    });
+
+    const duplicateKeyWarnings = errorSpy.mock.calls
+      .map((call) => String(call[0]))
+      .filter((message) => message.includes("same key"));
+    expect(duplicateKeyWarnings).toEqual([]);
+
+    const headers = runHeaderTexts(container);
+    expect(headers).toHaveLength(new Set(headers).size);
+
+    const cardValues = Array.from(
+      container.querySelectorAll('[data-slot="kanban-item"]'),
+    ).map((el) => el.getAttribute("data-value"));
+    expect(cardValues.filter((value) => value?.endsWith("::s-m1"))).toHaveLength(1);
+    expect(cardValues).toHaveLength(new Set(cardValues).size);
+  });
+});