@allbluecn/web-app 0.22.4 → 0.23.1

package/src/components/shared-kit/list-kit/frozen-header.ts

@@ -13,33 +13,146 @@
 // 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/>.
+// along with this program. If not, see <http://www.gnu.org/licenses/>.
 
-export interface FrozenHeader {
-  groupIdx: number;
-  subIdx: number | null;
+/**
+ * 虚拟化列表「吸附组头」统一判定（任务 22：story 列表 / bug 列表 / 看板列内三处共享）。
+ *
+ * 行是绝对定位的虚拟化行，CSS sticky 不生效，故用「等价换算」得到原生 sticky 的
+ * 观感。行为标杆是看板列内吸附子分组头（2026-10-17 用户五轮裁决版，AGENTS.md
+ * 「虚拟化列表内的子分组标题吸附」条目），本函数把它泛化为两层：
+ *
+ * - **主组头层**：吸附在滚动容器顶边（scrollport top，offset 基准 0）。
+ * - **子组头层**：吸附在吸附主组头正下方（offset 基准 subPinTop = 组头行高）。
+ *
+ * **锚点必须是滚动容器顶边（scrollport top），不是内容盒顶**：滚动容器若有上内边距，
+ * 行测量起点（内容盒坐标系）比容器坐标系低 pad px。活跃阈值 / 吸附位 / 顶出量三者
+ * 必须同锚——历史实现锚在内容盒顶会整体偏移 pad px，在「几乎没滚动」的区间里就把
+ * 紧贴组头底边的首行上边框盖掉（看板五轮裁决的「上边框还是被裁了」）。
+ *
+ * 每层语义（与原生 sticky 逐条等价）：
+ * - 组头未滚到吸附位时该层返回 null（在流渲染，自己自然上滑，吸附层完全不参与）
+ * - 越过吸附位后吸附（offset = 0）
+ * - 下一个组头逼近时被逐像素顶出（offset 为负）：主组头被下一个主组头（= 本组
+ *   区段结束边界）顶出；子组头被「下一个子组头」与「下一个主组头（区段结束）」
+ *   中更近者顶出——组切换时子组头随本组区段一起滑出，与原生 sticky 的区段
+ *   语义一致，切换瞬间旧头恰好完全离场、新头恰好就位，零跳变
+ * - 边界（容器坐标恰好等于吸附位）不留容差：此刻吸附层与在流组头**像素重合**，
+ *   切换无视觉跳变；留 1px 容差反而会让吸附层与在流组头错开 1px（同一行画两遍）
+ *
+ * 子组头活跃判定带 parent 归属门（parentGroupOfSub）：主组头切换后，上一个组的
+ * 子组头即使测量上早已越过也不得再吸附（否则新组头下方钉着旧组的子组头）。
+ * parentGroupOfSub 缺项的子组头不做归属约束（看板列内只有一层、无主组头行）。
+ *
+ * @param scrollTop 滚动容器的 scrollTop
+ * @param measurements 虚拟化行测量（start 以内容盒顶端为原点，size 为行高）
+ * @param levels 两层组头行下标与吸附参数
+ * @returns 两层各自的活跃组头行下标与位移；未越过吸附位 / 无可用测量时该层为 null
+ */
+
+/** 单层吸附态：活跃组头行下标 + 相对该层吸附位的纵向位移（px，<= 0，被顶出时为负） */
+export interface FrozenHeaderAnchor {
+  index: number;
+  offset: number;
+}
+
+export interface FrozenHeaderResult {
+  /** 活跃主组头；无主组层（如看板列内）或未越过容器顶边时为 null */
+  group: FrozenHeaderAnchor | null;
+  /** 活跃子组头；无子组越过吸附位（主组头下方 groupHeight 处）时为 null */
+  sub: FrozenHeaderAnchor | null;
+}
+
+export interface FrozenHeaderLevels {
+  /** 主组头行在 rows 中的下标（升序） */
+  groupIndexes: readonly number[];
+  /** 子组头行在 rows 中的下标（升序） */
+  subIndexes: readonly number[];
+  /** 子组头行下标 → 所属主组头行下标 */
+  parentGroupOfSub: ReadonlyMap<number, number>;
+  /**
+   * 滚动容器上内边距（px）：行测量在内容盒坐标系，容器顶边在内容盒坐标 -pad 处。
+   * 看板列内滚动容器 p-2 → 8（SUB_HEADER_STICKY_PAD）；story/bug 列表滚动容器
+   * 无内边距 → 0（缺省）。
+   */
+  pad?: number;
+  /**
+   * 子组头吸附位距容器顶边的偏移（px）= 吸附主组头的行高。story/bug 列表
+   * 组头恒 36px（HEADER_ROW_HEIGHT）；看板列内无主组头行 → 0（缺省）。
+   */
+  subPinTop?: number;
 }
 
 export function computeFrozenHeader(
   scrollTop: number,
-  measurements: ReadonlyArray<{ start: number } | undefined>,
-  groupHeaderIndexes: readonly number[],
-  subGroupHeaderIndexes: readonly number[],
-  parentGroupOfSub: ReadonlyMap<number, number>,
-): FrozenHeader | null {
-  // overscroll（macOS 橡皮筋）下 scrollTop 可能为负，钳制后保证首个组头不被误判为「无活跃组头」
-  const threshold = Math.max(0, scrollTop) + 1;
-  let groupIdx: number | null = null;
-  for (const i of groupHeaderIndexes) {
-    const m = measurements[i];
-    if (m && m.start <= threshold) groupIdx = i;
+  measurements: ReadonlyArray<{ start: number; size: number } | undefined>,
+  levels: FrozenHeaderLevels,
+): FrozenHeaderResult {
+  const { groupIndexes, subIndexes, parentGroupOfSub } = levels;
+  const pad = levels.pad ?? 0;
+  const subPinTop = levels.subPinTop ?? 0;
+  // overscroll（macOS 橡皮筋）下 scrollTop 可能为负，钳制避免首个组头失效
+  const top = Math.max(0, scrollTop);
+  // 容器顶边在内容盒坐标系的位置；组头上缘到达容器顶边 ⇔ m.start <= threshold
+  const threshold = top - pad;
+
+  /* ---- 主组头层：吸附位 = 容器顶边（0），被下一个主组头顶出 ---- */
+  let group: FrozenHeaderAnchor | null = null;
+  let groupPos = -1;
+  for (let k = 0; k < groupIndexes.length; k++) {
+    const m = measurements[groupIndexes[k]];
+    if (m && m.start <= threshold) {
+      group = { index: groupIndexes[k], offset: 0 };
+      groupPos = k;
+    }
+  }
+  if (group) {
+    const groupSize = measurements[group.index]?.size ?? 0;
+    let groupOffset = 0;
+    for (let k = groupPos + 1; k < groupIndexes.length; k++) {
+      const m = measurements[groupIndexes[k]];
+      if (!m) continue;
+      // 下一个主组头上缘（容器坐标 m.start - threshold）触及本组头底边时开始上推
+      groupOffset = Math.min(0, m.start - threshold - groupSize);
+      break;
+    }
+    group = { index: group.index, offset: groupOffset };
   }
-  if (groupIdx == null) return null;
 
-  let subIdx: number | null = null;
-  for (const i of subGroupHeaderIndexes) {
-    const m = measurements[i];
-    if (m && m.start <= threshold && parentGroupOfSub.get(i) === groupIdx) subIdx = i;
+  /* ---- 子组头层：吸附位 = subPinTop，顶出源取更近的同类头/区段结束 ---- */
+  let sub: FrozenHeaderAnchor | null = null;
+  let subPos = -1;
+  const subThreshold = threshold + subPinTop;
+  for (let k = 0; k < subIndexes.length; k++) {
+    const idx = subIndexes[k];
+    const m = measurements[idx];
+    if (!m || m.start > subThreshold) continue;
+    // parent 归属门：归属缺失或归属非当前活跃主组头的子组头不吸附
+    const parent = parentGroupOfSub.get(idx);
+    if (parent !== undefined && (!group || parent !== group.index)) continue;
+    sub = { index: idx, offset: 0 };
+    subPos = k;
   }
-  return { groupIdx, subIdx };
+  if (sub) {
+    const subSize = measurements[sub.index]?.size ?? 0;
+    // 顶出源 = 下一个子组头 / 下一个主组头（区段结束）中容器坐标更小（更近）者
+    let pusherCoord = Infinity;
+    for (let k = subPos + 1; k < subIndexes.length; k++) {
+      const m = measurements[subIndexes[k]];
+      if (!m) continue;
+      pusherCoord = m.start - threshold;
+      break;
+    }
+    for (let k = groupPos + 1; group && k < groupIndexes.length; k++) {
+      const m = measurements[groupIndexes[k]];
+      if (!m) continue;
+      pusherCoord = Math.min(pusherCoord, m.start - threshold);
+      break;
+    }
+    const subOffset =
+      pusherCoord === Infinity ? 0 : Math.min(0, pusherCoord - subPinTop - subSize);
+    sub = { index: sub.index, offset: subOffset };
+  }
+
+  return { group, sub };
 }

package/src/components/shared-kit/list-kit/kanban/frozen-header.ts

@@ -22,6 +22,13 @@
  * 但行是绝对定位的虚拟化行，CSS sticky 不生效，故用「等价换算」得到原生
  * sticky 的观感。
  *
+ * 任务 22 起算法本体抽到共享 `list-kit/frozen-header.ts` 的 computeFrozenHeader
+ * （story 列表 / bug 列表 / 看板列内三处统一），本文件保留看板侧单层签名作适配：
+ * 无主组头层（groupIndexes 空）、pad = SUB_HEADER_STICKY_PAD、subPinTop = 0
+ * （子组头直接吸附在容器顶边 = 列头 CardHeader 正下方）。本文件既有单测
+ * （__tests__/frozen-header.test.ts，2026-10-17 用户五轮裁决语义）原样保留并
+ * 全绿——即「切到共享实现后看板行为零变化」的回归证明。
+ *
  * **锚点必须是滚动容器顶边（scrollport top），不是内容盒顶**：滚动容器有
  * p-2 上内边距，行测量起点（内容盒坐标系）比容器坐标系低
  * SUB_HEADER_STICKY_PAD(8)px。活跃阈值 / 吸附位 / 顶出量三者必须同锚 ——
@@ -41,6 +48,9 @@
  * @param subHeaderIndexes 子分组头行在 rows 中的下标（升序）
  * @returns 活跃子分组头的行下标与位移；未越过容器顶边 / 无可用测量时返回 null
  */
+
+import { computeFrozenHeader } from "../frozen-header";
+
 export interface FrozenSubHeader {
   /** 活跃子分组头的行下标 */
   index: number;
@@ -53,36 +63,19 @@ export interface FrozenSubHeader {
  *  判定阈值 / 吸附位 / 顶出量必须同时计入本值，否则吸附层早 8px 落下、裁掉首卡上边框。 */
 export const SUB_HEADER_STICKY_PAD = 8;
 
+/** 看板列内无主组头层：子组头不做归属约束（parentGroupOfSub 恒空表，模块级复用） */
+const EMPTY_PARENT_OF_SUB = new Map<number, number>();
+
 export function computeFrozenSubHeader(
   scrollTop: number,
   measurements: ReadonlyArray<{ start: number; size: number } | undefined>,
   subHeaderIndexes: readonly number[],
 ): FrozenSubHeader | null {
-  // overscroll（macOS 橡皮筋）下 scrollTop 可能为负，钳制避免首个子组头失效
-  const top = Math.max(0, scrollTop);
-  // 换算到内容盒坐标系：组头上缘到达容器顶边 ⇔ m.start <= top - SUB_HEADER_STICKY_PAD
-  const threshold = top - SUB_HEADER_STICKY_PAD;
-
-  let active = -1;
-  let activePos = -1;
-  for (let k = 0; k < subHeaderIndexes.length; k++) {
-    const m = measurements[subHeaderIndexes[k]];
-    if (m && m.start <= threshold) {
-      active = subHeaderIndexes[k];
-      activePos = k;
-    }
-  }
-  if (active < 0) return null;
-
-  const activeSize = measurements[active]?.size ?? 0;
-  let offset = 0;
-  for (let k = activePos + 1; k < subHeaderIndexes.length; k++) {
-    const m = measurements[subHeaderIndexes[k]];
-    if (!m) continue;
-    // 下一个组头上缘（容器坐标 start - threshold）进入「容器顶边 + 当前组头高」时开始上推
-    offset = Math.min(0, m.start - threshold - activeSize);
-    break;
-  }
-
-  return { index: active, offset };
+  return computeFrozenHeader(scrollTop, measurements, {
+    groupIndexes: [],
+    subIndexes: subHeaderIndexes,
+    parentGroupOfSub: EMPTY_PARENT_OF_SUB,
+    pad: SUB_HEADER_STICKY_PAD,
+    subPinTop: 0,
+  }).sub;
 }

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

@@ -90,6 +90,14 @@ vi.mock("../detail/story-detail-body", () => ({
   ),
 }));
 
+// useAppHotkeys 需要 HotkeysProvider appHotkeys 挂载；单测无全局 Provider，
+import { appHotkeys } from "@/lib/hotkeys/registry"
+// 局部替换该 hook 返回应用声明，其余（useHotkey/useHotkeys）保持官方真实实现
+vi.mock("@tanstack/react-hotkeys", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@tanstack/react-hotkeys")>()
+  return { ...actual, useAppHotkeys: () => appHotkeys }
+})
+
 import { StoryPeekPanel } from "../peek-panel";
 import type { StoryDetail } from "@/shared/story/types";
 

package/src/components/story/__tests__/story-list-table.test.tsx

@@ -0,0 +1,214 @@
+// 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/>.
+
+// 任务 24（阶段 8）：story 表三项验证——
+// ① columnResizingFeature 拖拽手柄：拖拽后 columnSizing 状态提交且列宽即时生效；
+// ② sortFns 按需注册（tree-shaking）：注册表仅含 alphanumeric/text，
+//    未注册内置名不被引用时行为不受影响（basic 由库内部兜底，非注册表消费）。
+// 虚拟化在 jsdom 无布局，桩返回全量虚拟 items（列宽/排序断言不依赖窗口化）。
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import { useMemo } from "react";
+import { useTable } from "@tanstack/react-table";
+
+// 虚拟化桩：全量 items（断言列宽/行序契约，不测窗口化）
+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: () => {},
+      scrollToIndex: () => {},
+    }),
+  };
+});
+
+// 无限滚动哨兵裁掉（IntersectionObserver 依赖，与本任务无关）
+vi.mock("@/components/infinite-scroll-sentinel", () => ({
+  InfiniteScrollSentinel: () => null,
+}));
+
+import { StoryListTable } from "../story-list-table";
+import { createStoryColumns, storyTableFeatures } from "../columns";
+import type { StoryListItem } from "@/shared/story/types";
+import type { DisplayProperty } from "../display/types";
+
+function makeStory(overrides: Partial<StoryListItem> & Pick<StoryListItem, "id" | "identifier">): StoryListItem {
+  const user = {
+    id: "u1",
+    username: "alice",
+    email: "alice@example.com",
+    avatarConfig: null,
+    bgShape: null,
+    bgColor: null,
+  };
+  return {
+    name: `story ${overrides.identifier}`,
+    description: null,
+    state: "todo",
+    priority: "none",
+    archived: false,
+    startDate: null,
+    targetDate: null,
+    boardOrder: 0,
+    projectId: "p1",
+    parentId: null,
+    parent: null,
+    assignee: user,
+    createdBy: user,
+    labels: [],
+    createdAt: "2026-01-01T00:00:00.000Z",
+    updatedAt: "2026-01-02T00:00:00.000Z",
+    ...overrides,
+  };
+}
+
+const baseProps = {
+  onOpenStory: () => {},
+  properties: ["id", "priority", "state"] as DisplayProperty[],
+  orderBy: "manual" as const,
+  onLoadMore: () => {},
+  hasMore: false,
+};
+
+// jsdom 的 rAF 是异步帧，拖拽 move 走 rAF 节流；置为立即执行保证断言确定性。
+beforeEach(() => {
+  vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
+    cb(performance.now());
+    return 1;
+  });
+  vi.stubGlobal("cancelAnimationFrame", () => {});
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+describe("story 列宽拖拽（columnResizingFeature）", () => {
+  it("拖拽手柄提交 columnSizing 且列宽即时生效", () => {
+    const data = [
+      makeStory({ id: "s1", identifier: "S-1" }),
+      makeStory({ id: "s2", identifier: "S-2" }),
+    ];
+    const { container } = render(<StoryListTable data={data} {...baseProps} />);
+
+    // identifier 列定义 size=110；首列手柄 = 第一个 separator
+    const firstHeaderCell = screen.getByText("需求 ID") as HTMLElement;
+    expect(firstHeaderCell.style.width).toBe("110px");
+    const handle = firstHeaderCell.querySelector('[role="separator"]') as HTMLElement;
+    expect(handle).not.toBeNull();
+
+    // mousedown(100) → mousemove(150)：delta +50 → 110 → 160（onChange 模式实时提交）
+    fireEvent.mouseDown(handle, { clientX: 100 });
+    // 拖拽中：columnResizing.isResizingColumn = identifier
+    expect(handle.dataset.resizing).toBe("true");
+    fireEvent.mouseMove(document, { clientX: 150 });
+    expect(firstHeaderCell.style.width).toBe("160px");
+    fireEvent.mouseUp(document, { clientX: 150 });
+    // 拖拽结束：瞬时 resizing 态复位
+    expect(handle.dataset.resizing).toBeUndefined();
+
+    // 列宽生效到行单元格（getSize 消费同一 columnSizing 状态）
+    const bodyCell = container.querySelector("button .overflow-hidden") as HTMLElement | null;
+    expect(bodyCell?.style.width).toBe("160px");
+  });
+
+  it("双击手柄复位列宽（resetSize 回列定义 size）", () => {
+    const data = [makeStory({ id: "s1", identifier: "S-1" })];
+    render(<StoryListTable data={data} {...baseProps} />);
+    const firstHeaderCell = screen.getByText("需求 ID") as HTMLElement;
+    const handle = firstHeaderCell.querySelector('[role="separator"]') as HTMLElement;
+
+    fireEvent.mouseDown(handle, { clientX: 100 });
+    fireEvent.mouseMove(document, { clientX: 200 });
+    fireEvent.mouseUp(document, { clientX: 200 });
+    expect(firstHeaderCell.style.width).toBe("210px");
+
+    fireEvent.doubleClick(handle);
+    expect(firstHeaderCell.style.width).toBe("110px");
+  });
+});
+
+describe("sortFns 按需注册", () => {
+  it("注册表仅含 alphanumeric/text（整包 sortFns 已移除）", () => {
+    expect(Object.keys(storyTableFeatures.sortFns ?? {}).sort()).toEqual([
+      "alphanumeric",
+      "text",
+    ]);
+  });
+
+  it("auto 解析命中已注册的 alphanumeric（编号列自然排序 2 < 10）", () => {
+    const data = [
+      makeStory({ id: "s2", identifier: "S-2" }),
+      makeStory({ id: "s10", identifier: "S-10" }),
+      makeStory({ id: "s1", identifier: "S-1" }),
+    ];
+    render(<SortHarness data={data} />);
+    // 首次点击 = asc：alphanumeric 给出 S-1, S-2, S-10；
+    // 若回落 basic（未注册时的库内兜底）则为字典序 S-1, S-10, S-2，可区分注册是否生效
+    fireEvent.click(screen.getByRole("button", { name: "identifier" }));
+    const ids = screen
+      .getAllByTestId(/^row-/)
+      .map((el) => el.getAttribute("data-testid"));
+    expect(ids).toEqual(["row-S-1", "row-S-2", "row-S-10"]);
+  });
+
+  it("auto 解析命中已注册的 text（纯文字列字典排序）", () => {
+    const data = [
+      makeStory({ id: "s1", identifier: "S-1", state: "todo" }),
+      makeStory({ id: "s2", identifier: "S-2", state: "done" }),
+    ];
+    render(<SortHarness data={data} />);
+    fireEvent.click(screen.getByRole("button", { name: "state" }));
+    const ids = screen
+      .getAllByTestId(/^row-/)
+      .map((el) => el.getAttribute("data-testid"));
+    expect(ids).toEqual(["row-S-2", "row-S-1"]);
+  });
+});
+
+function SortHarness({ data }: { data: StoryListItem[] }) {
+  const columns = useMemo(() => createStoryColumns(), []);
+  const table = useTable({
+    features: storyTableFeatures,
+    data,
+    columns,
+  });
+  return (
+    <div>
+      {table.getHeaderGroups()[0].headers.map((h) => (
+        <button key={h.id} onClick={h.column.getToggleSortingHandler()}>
+          {h.id}
+        </button>
+      ))}
+      {table.getRowModel().rows.map((r) => (
+        <div key={r.id} data-testid={`row-${r.original.identifier}`}>
+          {r.original.identifier}
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/story/columns.tsx

@@ -17,11 +17,13 @@
 
 import {
   columnPinningFeature,
+  columnResizingFeature,
   columnSizingFeature,
   columnVisibilityFeature,
   createSortedRowModel,
   rowSortingFeature,
-  sortFns,
+  sortFn_alphanumeric,
+  sortFn_text,
   tableFeatures,
   type ColumnDef,
 } from "@tanstack/react-table";
@@ -58,8 +60,15 @@ export const storyTableFeatures = tableFeatures({
   rowSortingFeature,
   columnPinningFeature,
   columnSizingFeature,
+  columnResizingFeature,
   columnVisibilityFeature,
-  sortFns,
+  // 按需注册替代 sortFns 整包（tree-shaking）：本表全部排序走 sortFn:'auto'，
+  // 自动解析只会命中 alphanumeric（ISO 日期/编号等含数字字符串）与 text（纯文字），
+  // 未注册的内置名在 dev 下 warn 并回落 sortFn_basic（库内部兜底，不依赖注册表）。
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+  },
   sortedRowModel: createSortedRowModel(),
 });
 

package/src/components/story/peek-panel.tsx

@@ -18,7 +18,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState, type UIEvent } from "react";
 import { createPortal } from "react-dom";
 import { useNavigate } from "@tanstack/react-router";
-import { useHotkey } from "@tanstack/react-hotkeys";
+import { useAppHotkeys, useHotkey } from "@tanstack/react-hotkeys";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import {
@@ -319,7 +319,9 @@ export function StoryPeekPanel({
     };
   }, [effectiveStoryId]);
 
-  useHotkey("Escape", onClose, {
+  // 声明即绑定：close-panel 条目单一来源（lib/hotkeys/registry.ts）
+  const hk = useAppHotkeys();
+  useHotkey(hk["close-panel"], onClose, {
     enabled: mode === "side-peek" && history.length === 0,
   });
 

package/src/components/story/story-list-table.tsx

@@ -78,6 +78,9 @@ export function StoryListTable({ data, onOpenStory, properties, orderBy, onLoadM
     columns,
     state: { sorting, columnVisibility },
     onSortingChange: setSorting,
+    // onChange：拖拽过程实时提交 columnSizing（列宽随手柄即时生效）。
+    // 列宽持久化为内存态（P2 再接 localStorage），刷新后回到列定义 size。
+    columnResizeMode: "onChange",
     initialState: {
       columnPinning: { start: ["identifier", "name"], end: [] },
     },
@@ -113,7 +116,7 @@ export function StoryListTable({ data, onOpenStory, properties, orderBy, onLoadM
               <div
                 key={header.id}
                 style={{ width: header.getSize() }}
-                className="flex h-full items-center gap-1 px-3 text-xs font-medium text-muted-foreground"
+                className="relative flex h-full items-center gap-1 px-3 text-xs font-medium text-muted-foreground"
               >
                 {flexRender(header.column.columnDef.header, header.getContext())}
                 {canSort && (
@@ -126,6 +129,18 @@ export function StoryListTable({ data, onOpenStory, properties, orderBy, onLoadM
                       : <ChevronDown className="size-3" />}
                   </button>
                 )}
+                {header.column.getCanResize() && (
+                  <div
+                    role="separator"
+                    aria-orientation="vertical"
+                    aria-label={`${m.story_table_resizeColumn()}: ${header.id}`}
+                    data-resizing={header.column.getIsResizing() || undefined}
+                    onDoubleClick={() => header.column.resetSize()}
+                    onMouseDown={header.getResizeHandler()}
+                    onTouchStart={header.getResizeHandler()}
+                    className="absolute inset-y-0 right-0 w-1 cursor-col-resize touch-none select-none bg-transparent hover:bg-border data-resizing:bg-primary/50"
+                  />
+                )}
               </div>
             );
           })}