@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/story/views/create-view-dialog.tsx

@@ -32,9 +32,10 @@ import {
 import { Button } from "@/components/ui/button";
 import { LucideIconPicker } from "@/components/shared-kit/icons/lucide-icon-picker";
 import { LucideIconByName } from "@/components/shared-kit/icons/lucide-icon-picker/lucide-icon-by-name";
-import { StoryFilterRow } from "../filters/filter-row";
-import { createDefaultCondition, type FilterCondition } from "../filters/filter-types";
-import { renderViewIcon, VIEW_ICONS, type SavedView, type ViewProjectInfo } from "./view-types";
+import { StoryFilterRow } from "../filters";
+import { createDefaultCondition, type FilterCondition } from "../filters/field-configs";
+import { VIEW_ICONS, type SavedView, type ViewProjectInfo } from "./view-types";
+import { ViewIcon } from "@/components/shared-kit/views/view-icon";
 import type { UserBrief } from "../types";
 import { m } from "@/paraglide/messages.js";
 
@@ -142,7 +143,7 @@ export function CreateViewDialog({ open, onOpenChange, mode, initialValues, view
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-260 -mt-50">
+      <DialogContent className="sm:max-w-[min(65rem,calc(100%-4rem))] max-w-[calc(100%-4rem)] max-h-[calc(100dvh-2rem)] [@media(min-height:64rem)]:-mt-50 overflow-y-auto">
         <DialogHeader>
           <DialogTitle className="text-xl">{mode === "edit" ? m.story_view_editView() : m.story_view_createView()}</DialogTitle>
         </DialogHeader>
@@ -226,7 +227,6 @@ export function CreateViewDialog({ open, onOpenChange, mode, initialValues, view
                 {updateOpen && !selectedView && (
                   <div className="absolute top-full left-0 right-0 mt-1 rounded-md border bg-background z-20 max-h-40 overflow-y-auto">
                     {views.length > 0 ? views.map((view) => {
-                      const VIcon = renderViewIcon(view.icon);
                       return (
                         <button
                           key={view.id}
@@ -234,7 +234,7 @@ export function CreateViewDialog({ open, onOpenChange, mode, initialValues, view
                           onClick={() => handleSelectView(view)}
                           className="flex w-full items-center gap-2 px-2.5 py-1.5 text-sm hover:bg-muted"
                         >
-                          <VIcon className="size-4 text-muted-foreground" />
+                          <ViewIcon name={view.icon} className="size-4 text-muted-foreground" />
                           <span className="truncate">{view.name}</span>
                         </button>
                       );

package/src/components/story/views/kanban-view.tsx

@@ -0,0 +1,618 @@
+// 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/>.
+
+/**
+ * story 看板视图（UI 对齐四期 PR-14 任务 42）：外壳与机械件全部消费共享
+ * KanbanBoardView（shared-kit/list-kit/kanban——本文件 1593 行蓝本在任务 24
+ * 参数化为共享组件，此处反向切换，Q10 债务清偿）。capabilities 全开：
+ * - manualOrder：列内/跨列排序落库（reorderStoriesFn）+ 手动排序自动切换 toast
+ * - subGroups：列内子分组（折叠状态沿用 story.kanban.collapsedSubGroups 存量键）
+ * - columnDrag：列序持久化（onPersistColumnOrder）
+ *
+ * story 特有业务留消费方（经 config 接线）：
+ * - 分组字段 patch 映射（GROUP_FIELD / toGroupFieldPatch，跨列拖拽 = 改字段）
+ * - PeekPatch 通道（onStoryPatched，拖拽/内联编辑落库后供 PeekPanel 实时同步）
+ * - 虚列全集（groupUniverse → ghostColumnKeys，拖拽期虚显被隐藏的空列）
+ * - 列 meta（buildGroupMeta + resolveColumnTint，图标/文案/列底色）
+ * - TaskCard / TaskCardGhost / LabelsRow / inline editors（renderCard/renderGhostCard）
+ * - onAutoSwitchManual 的手动排序切换 toast（排序键决策归消费方，共享层不掌握）
+ *
+ * memo 契约（共享层 JSDoc）：config 内函数字段与 subGrouping.membership 须引用
+ * 稳定（useMemo/useCallback），否则列内 memo 与 dnd 缓存失效、组件本地乐观成员表
+ * 被重置（拖拽中卡片分区跳变）。
+ */
+
+import { memo, useCallback, useMemo } from "react";
+import { useServerFn } from "@tanstack/react-start";
+import {
+  KanbanBoardView,
+  type KanbanModuleConfig,
+  type KanbanSubGroupMeta,
+  type KanbanSubGrouping,
+} from "@/components/shared-kit/list-kit/kanban/kanban-board-view";
+// kanban 拖拽提交决策纯函数已落共享层（任务 24）：此处消费共享实现并 re-export
+// 保活既有 kanban-drop-subgroup 回归的 import 路径（复审 P2-7，任务 42）
+export {
+  resolveDropSubKey,
+  resolveSubKeyForDrop,
+} from "@/components/shared-kit/list-kit/kanban/drop-commit";
+import { manualOrderSwitchPatch } from "@/components/shared-kit/list-kit/kanban/manual-order";
+import { Card, CardContent } from "@/components/ui/card";
+import { UserAvatar } from "@/components/shared-kit";
+import { CalendarCheck, CalendarPlus2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { toast } from "@/components/ui/toast";
+import { toastError } from "@/lib/toast-error";
+import { m } from "@/paraglide/messages.js";
+import { updateStoryFn, reorderStoriesFn } from "@/server/serverFns/story";
+import type { StoryListItem, UserBrief } from "../types";
+import { GROUP_FIELD, toGroupFieldPatch, type StoryPatch } from "../display/group-fields";
+import { buildGroupMeta, groupUniverse, resolveColumnTint } from "../display/group-resolver";
+import { COLLAPSED_SUBGROUPS_KEY } from "../display/use-collapsed-subgroups";
+import { useFitCount } from "../display/use-fit-count";
+import { DateEditor, PriorityEditor, StateEditor } from "../inline-editors";
+import { PRIORITY_LABEL, STATE_LABEL, STATE_ICON, STATE_COLOR } from "../constants";
+import { PriorityIcon } from "../priority-icon";
+import type {
+  DisplayOptions,
+  DisplayProperty,
+  GroupContext,
+  GroupNode,
+} from "../display/types";
+
+type ColumnValue = Record<string, StoryListItem[]>;
+
+interface KanbanViewProps {
+  groups: GroupNode[];
+  displayFilters: DisplayOptions;
+  users: UserBrief[];
+  labels: { id: string; name: string; color: string }[];
+  projects: GroupContext["projects"];
+  onRefresh: () => void;
+  onOpenStory: (id: string) => void;
+  /** 看板不消费（board 数据面为客户端全量分组）；table/timeline 视图分页用 */
+  onLoadMore: () => void;
+  /** 看板不消费，同上 */
+  hasMore: boolean;
+  activeViewId?: string;
+  onPersistColumnOrder?: (order: string[]) => Promise<void>;
+  onUpdateFilters?: (patch: Partial<DisplayOptions>) => void;
+  /** 卡片字段落库成功通知（内联编辑 / 拖拽换列），供 PeekPanel 实时同步 */
+  onStoryPatched?: (storyId: string, patch: StoryPatch) => void;
+}
+
+/** 按已保存列序重排：未出现在 columnOrder 里的列追加到末尾 */
+function applyColumnOrder(base: ColumnValue, columnOrder?: string[]): ColumnValue {
+  if (!columnOrder || columnOrder.length === 0) return base;
+  const ordered: ColumnValue = {};
+  for (const key of columnOrder) {
+    if (key in base) ordered[key] = base[key];
+  }
+  for (const key of Object.keys(base)) {
+    if (!(key in ordered)) ordered[key] = base[key];
+  }
+  return ordered;
+}
+
+// 依据 groups + 已保存列序构造服务端权威列集合（共享层渲染期同步的同步源）
+function buildColumns(groups: GroupNode[], columnOrder?: string[]): ColumnValue {
+  const base: ColumnValue = {};
+  for (const group of groups) {
+    base[group.key] = group.items;
+  }
+  return applyColumnOrder(base, columnOrder);
+}
+
+/** 子分组元数据（跨列合并去重，保留首次出现顺序） */
+function buildSubMeta(groups: GroupNode[]): Record<string, KanbanSubGroupMeta> {
+  const map: Record<string, KanbanSubGroupMeta> = {};
+  for (const group of groups) {
+    for (const sub of group.subGroups ?? []) {
+      if (map[sub.key]) continue;
+      map[sub.key] = {
+        key: sub.key,
+        label: sub.label,
+        icon: sub.icon,
+        color: sub.color,
+        order: Object.keys(map).length,
+      };
+    }
+  }
+  return map;
+}
+
+/** 需求 → 子分组 key（多项子分组如 labels 取首个匹配区，避免同列内重复渲染同一张卡） */
+function buildMembership(groups: GroupNode[]): Record<string, string> {
+  const map: Record<string, string> = {};
+  for (const group of groups) {
+    for (const sub of group.subGroups ?? []) {
+      for (const story of sub.items) {
+        if (map[story.id] === undefined) map[story.id] = sub.key;
+      }
+    }
+  }
+  return map;
+}
+
+/** 按子分组顺序稳定排序（同一区内保持原排序） */
+function orderBySubGroups(
+  items: StoryListItem[],
+  membership: Record<string, string>,
+  subMeta: Record<string, KanbanSubGroupMeta>,
+): StoryListItem[] {
+  return [...items].sort(
+    (a, b) =>
+      (subMeta[membership[a.id] ?? ""]?.order ?? Number.MAX_SAFE_INTEGER) -
+      (subMeta[membership[b.id] ?? ""]?.order ?? Number.MAX_SAFE_INTEGER),
+  );
+}
+
+export function KanbanView({
+  groups,
+  displayFilters,
+  users,
+  labels,
+  projects,
+  onRefresh,
+  onOpenStory,
+  onPersistColumnOrder,
+  onUpdateFilters,
+  onStoryPatched,
+}: KanbanViewProps) {
+  const updateStory = useServerFn(updateStoryFn);
+  const reorderStories = useServerFn(reorderStoriesFn);
+
+  const { groupBy, columnOrder, orderBy, properties, subGroupBy } = displayFilters;
+  const hasSubGroups = subGroupBy !== "none";
+  /** 子分组是否可跨区改字段：labels/createdBy 为多值/不可改维度，只做视觉分区 */
+  const subGroupField = GROUP_FIELD[subGroupBy];
+  const canMoveAcrossSubGroups = hasSubGroups && subGroupField != null;
+
+  const groupCtx = useMemo<GroupContext>(
+    () => ({ users, labels, projects }),
+    [labels, projects, users],
+  );
+  const universeNodes = useMemo(() => groupUniverse(groupBy, groupCtx), [groupBy, groupCtx]);
+  const groupMeta = useMemo(
+    () => buildGroupMeta(groups, universeNodes),
+    [groups, universeNodes],
+  );
+
+  const subMeta = useMemo(() => buildSubMeta(groups), [groups]);
+  const serverMembership = useMemo(() => buildMembership(groups), [groups]);
+
+  // 服务端权威列集合：子分组开启时按成员表排序（共享层渲染期同步该值，
+  // 拖拽乐观值不被覆盖；卡片顺序与分区切分同源自洽，见共享 handleValueChange）
+  const serverColumns = useMemo(() => {
+    const base = buildColumns(groups, columnOrder);
+    if (!hasSubGroups) return base;
+    const ordered: ColumnValue = {};
+    for (const [key, items] of Object.entries(base)) {
+      ordered[key] = orderBySubGroups(items, serverMembership, subMeta);
+    }
+    return ordered;
+  }, [groups, columnOrder, hasSubGroups, serverMembership, subMeta]);
+
+  // 子分组数据（共享 KanbanSubGrouping）：membership 引用稳定契约——仅在服务端
+  // 权威 groups 变化时产生新引用，禁止渲染期新建字面量
+  const subGrouping = useMemo<KanbanSubGrouping | undefined>(() => {
+    if (!hasSubGroups) return undefined;
+    return {
+      membership: serverMembership,
+      meta: subMeta,
+      dimension: subGroupBy,
+      moveAcross: canMoveAcrossSubGroups,
+      storageKey: COLLAPSED_SUBGROUPS_KEY,
+    };
+  }, [hasSubGroups, serverMembership, subMeta, subGroupBy, canMoveAcrossSubGroups]);
+
+  /** 卡片内联编辑（日期等）落库：与列拖拽同一提交路径（写库 → 刷新） */
+  const handleFieldPatch = useCallback(
+    async (storyId: string, patch: StoryPatch) => {
+      try {
+        await updateStory({ data: { storyId, ...patch } });
+        onStoryPatched?.(storyId, patch);
+        onRefresh();
+      } catch (e) {
+        onRefresh();
+        toastError(e, m.story_row_updateFailed());
+      }
+    },
+    [onRefresh, onStoryPatched, updateStory],
+  );
+
+  // 共享组件 memo 契约：config 函数字段引用稳定 → config 整体 useMemo
+  const config = useMemo<KanbanModuleConfig<StoryListItem>>(
+    () => ({
+      columns: serverColumns,
+      columnMeta: (key) => {
+        const node = groupMeta[key];
+        return {
+          label: node?.label ?? key,
+          icon: node?.icon,
+          iconClassName: node?.color?.split(" ").find((c) => c.startsWith("text")),
+          tint: resolveColumnTint(key, groupBy, groupCtx),
+        };
+      },
+      cardKey: (story) => story.id,
+      renderCard: (story) => (
+        <TaskCard
+          story={story}
+          properties={properties}
+          showPriorityBadge={groupBy !== "priority"}
+          showStateBadge={groupBy !== "state"}
+          onPatch={handleFieldPatch}
+        />
+      ),
+      renderGhostCard: (story) => (
+        <TaskCardGhost
+          story={story}
+          properties={properties}
+          showPriorityBadge={groupBy !== "priority"}
+          showStateBadge={groupBy !== "state"}
+        />
+      ),
+      onOpenItem: (story) => onOpenStory(story.id),
+      // 跨列拖拽 = 改分组字段（决策层保证本回调只在跨列 move 时被调用）。
+      // 目标子分组已由共享决策层按「提交后的实际相邻卡片」解析（不能用成员表旧值，
+      // 详见共享 resolveDropSubKey 注释）；与权威成员表同值跳过零冗余写。
+      onDropToColumn: async (storyId, destKey, meta) => {
+        const field = GROUP_FIELD[groupBy];
+        const patch: StoryPatch = {};
+        if (field != null) {
+          Object.assign(patch, toGroupFieldPatch(field, destKey));
+        }
+        const destSubKey = meta?.subKey;
+        if (
+          destSubKey &&
+          subGroupField != null &&
+          destSubKey !== serverMembership[storyId]
+        ) {
+          Object.assign(patch, toGroupFieldPatch(subGroupField, destSubKey));
+        }
+        if (Object.keys(patch).length === 0) return;
+        await updateStory({ data: { storyId, ...patch } });
+        onStoryPatched?.(storyId, patch);
+      },
+      // 同列跨子分组（任务 42 必带③，蓝本同列也发子组字段 patch）：只写子组字段，
+      // 列字段不动；与权威成员表同值跳写（纯组内排序的 subKey == 现值）
+      onSubGroupMove: async (storyId, destKey, subKey) => {
+        if (subGroupField == null) return;
+        if (subKey === serverMembership[storyId]) return;
+        const patch = toGroupFieldPatch(subGroupField, subKey);
+        await updateStory({ data: { storyId, ...patch } });
+        onStoryPatched?.(storyId, patch);
+        // 文案带上落点：「已更新分组到 已取消-高」（与跨列拖拽同一口径）
+        const groupLabel = groupMeta[destKey]?.label ?? destKey;
+        const subLabel = subMeta[subKey]?.label;
+        toast.success(
+          m.story_kanban_groupUpdatedTo({
+            target: subLabel ? `${groupLabel}-${subLabel}` : groupLabel,
+          }),
+        );
+      },
+      capabilities: {
+        manualOrder: {
+          onReorder: async (orders) => {
+            if (orders.length > 0) await reorderStories({ data: { items: orders } });
+          },
+          onAutoSwitchManual: async () => {
+            // 排序键不是 manual 时 boardOrder 不被读取，拖拽结果会被排回原位
+            const manualPatch = manualOrderSwitchPatch(orderBy, true);
+            if (manualPatch) {
+              onUpdateFilters?.(manualPatch);
+              toast.info(m.story_kanban_manualOrderEnabled());
+            }
+          },
+        },
+        subGroups: hasSubGroups,
+        columnDrag: onPersistColumnOrder
+          ? { onColumnOrderCommit: onPersistColumnOrder }
+          : undefined,
+      },
+      onRefresh,
+      // 拖拽期虚显被隐藏的空列（showEmptyGroups=false 时缺失列的虚线壳）
+      ghostColumnKeys: universeNodes.map((node) => node.key),
+      subGrouping,
+    }),
+    [
+      canMoveAcrossSubGroups,
+      groupBy,
+      groupCtx,
+      groupMeta,
+      handleFieldPatch,
+      hasSubGroups,
+      onOpenStory,
+      onPersistColumnOrder,
+      onRefresh,
+      onStoryPatched,
+      onUpdateFilters,
+      orderBy,
+      properties,
+      reorderStories,
+      serverColumns,
+      serverMembership,
+      subGroupField,
+      subGrouping,
+      subMeta,
+      universeNodes,
+      updateStory,
+    ],
+  );
+
+  return <KanbanBoardView config={config} />;
+}
+
+/** 标签行 `gap-1`（0.25rem）对应的像素值，供宽度自适应测量使用 */
+const LABEL_GAP_PX = 4;
+
+/**
+ * 落点预览用的静态卡片镜像：排版与 TaskCard 一致，但不挂 Popover / Tooltip / useFitCount
+ * 等 hooks。落点每次变化都要挂载/卸载它，用真 TaskCard 会连带这些 hooks 的挂载成本
+ * （实测拖拽帧中位 8ms → 10ms，且偶发 646ms 尖刺）；纯 div 镜像的挂载成本可忽略。
+ */
+const TaskCardGhost = memo(function TaskCardGhost({
+  story,
+  properties,
+  showPriorityBadge,
+  showStateBadge,
+}: {
+  story: StoryListItem;
+  properties: DisplayProperty[];
+  showPriorityBadge: boolean;
+  showStateBadge: boolean;
+}) {
+  const StateIcon = STATE_ICON[story.state];
+  const startDate = story.startDate ? new Date(story.startDate.slice(0, 10)) : null;
+  const targetDate = story.targetDate ? new Date(story.targetDate.slice(0, 10)) : null;
+  return (
+    <Card className="w-full gap-0 py-3">
+      <CardContent className="space-y-2.5 px-3">
+        <div className="flex items-center justify-between gap-1.5">
+          <span className="font-mono text-xs font-medium text-muted-foreground">
+            {story.identifier}
+          </span>
+          <div className="flex shrink-0 items-center gap-1">
+            {showPriorityBadge && (
+              <span className="inline-flex items-center gap-1 rounded-sm border border-border px-1.5 py-0.5">
+                <PriorityIcon priority={story.priority} />
+                <span className="text-xs">
+                  {PRIORITY_LABEL[story.priority]?.() ?? story.priority}
+                </span>
+              </span>
+            )}
+            {showStateBadge && (
+              <span className="inline-flex items-center gap-1 rounded-sm border border-border px-1.5 py-0.5">
+                {StateIcon && (
+                  <StateIcon
+                    className={cn(
+                      "size-3",
+                      STATE_COLOR[story.state].split(" ").find((c) => c.startsWith("text")),
+                    )}
+                  />
+                )}
+                <span className="text-xs">
+                  {STATE_LABEL[story.state]?.() ?? story.state}
+                </span>
+              </span>
+            )}
+          </div>
+        </div>
+        <div className="line-clamp-2 text-sm leading-snug font-medium">{story.name}</div>
+        <div className="flex flex-wrap items-center gap-1.5">
+          {properties.includes("labels") &&
+            story.labels.slice(0, 4).map((label) => (
+              <span
+                key={label.id}
+                className="inline-flex shrink-0 items-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-xs font-medium whitespace-nowrap text-muted-foreground"
+              >
+                <span
+                  className="size-1.5 shrink-0 rounded-full"
+                  style={{ backgroundColor: label.color }}
+                />
+                {label.name}
+              </span>
+            ))}
+          {properties.includes("assignee") && story.assignee && (
+            // 落点淡化卡不挂 UserAvatar（其 NotionAvatar 嵌套 SVG 每次挂载实测 ~80ms，
+            // 落点每次变化都要重挂载 → 跨列拖拽逐列出现 80ms 长任务）。首字母圆几乎零成本，
+            // 50% 透明度下与真头像视觉差异可忽略。
+            <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground uppercase">
+              {story.assignee.username.slice(0, 1)}
+            </span>
+          )}
+          {properties.includes("startDate") && startDate && (
+            <span className="flex items-center gap-1 text-xs text-muted-foreground">
+              <CalendarPlus2 className="size-3.5" />
+              {m.story_inline_dateShort({
+                month: startDate.getMonth() + 1,
+                day: startDate.getDate(),
+              })}
+            </span>
+          )}
+          {properties.includes("dueDate") && targetDate && (
+            <span className="flex items-center gap-1 text-xs text-muted-foreground">
+              <CalendarCheck className="size-3.5" />
+              {m.story_inline_dateShort({
+                month: targetDate.getMonth() + 1,
+                day: targetDate.getDate(),
+              })}
+            </span>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+});
+
+function LabelChip({ label }: { label: { id: string; name: string; color: string } }) {
+  return (
+    <span className="inline-flex shrink-0 items-center gap-1 rounded-full bg-muted px-1.5 py-0.5 text-xs font-medium whitespace-nowrap text-muted-foreground">
+      <span
+        className="size-1.5 shrink-0 rounded-full"
+        style={{ backgroundColor: label.color }}
+      />
+      {label.name}
+    </span>
+  );
+}
+
+/**
+ * 标签行：不折行 + 按容器宽度自适应显示数量，剩余以 +N 汇总。
+ * 隐藏测量层渲染全量标签供取宽（`invisible absolute` 不参与布局），测量未就绪时回落全显。
+ */
+function LabelsRow({ labels }: { labels: { id: string; name: string; color: string }[] }) {
+  const { containerRef, measureRef, indicatorRef, visibleCount } = useFitCount(
+    labels.length,
+    LABEL_GAP_PX,
+  );
+
+  return (
+    <div
+      ref={containerRef}
+      className="relative flex w-full flex-nowrap items-center gap-1 overflow-hidden"
+    >
+      {labels.slice(0, visibleCount).map((label) => (
+        <LabelChip key={label.id} label={label} />
+      ))}
+      {visibleCount < labels.length && (
+        <span className="shrink-0 text-xs text-muted-foreground">
+          +{labels.length - visibleCount}
+        </span>
+      )}
+      <div
+        ref={measureRef}
+        aria-hidden
+        className="pointer-events-none invisible absolute top-0 left-0 flex flex-nowrap gap-1"
+      >
+        {labels.map((label) => (
+          <LabelChip key={label.id} label={label} />
+        ))}
+      </div>
+      <span
+        ref={indicatorRef}
+        aria-hidden
+        className="pointer-events-none invisible absolute top-0 left-0 text-xs"
+      >
+        +{labels.length}
+      </span>
+    </div>
+  );
+}
+
+const TaskCard = memo(function TaskCard({
+  story,
+  properties,
+  showPriorityBadge,
+  showStateBadge,
+  onPatch,
+}: {
+  story: StoryListItem;
+  properties: DisplayProperty[];
+  showPriorityBadge: boolean;
+  showStateBadge: boolean;
+  onPatch?: (storyId: string, patch: StoryPatch) => Promise<void>;
+}) {
+  const overdue = !!(
+    story.targetDate &&
+    story.state !== "done" &&
+    story.state !== "cancelled" &&
+    new Date(story.targetDate.slice(0, 10)) <
+      new Date(new Date().toISOString().slice(0, 10))
+  );
+
+  const patch = useCallback(
+    (next: StoryPatch) => {
+      if (onPatch) void onPatch(story.id, next);
+    },
+    [onPatch, story.id],
+  );
+
+  return (
+    <Card
+      // 卡片点击打开由共享层 OpenableCard 统一接线（stopPropagation 防冒泡到
+      // 视图区 backdrop）；cursor-pointer/hover 阴影是看板卡片恒定的可点击 affordance
+      className="w-full gap-0 py-3 cursor-pointer transition-shadow hover:shadow-md"
+    >
+      <CardContent className="space-y-2.5 px-3">
+        <div className="flex items-center justify-between gap-1.5">
+          <span className="font-mono text-xs font-medium text-muted-foreground">
+            {story.identifier}
+          </span>
+          <div
+            className="flex shrink-0 items-center gap-1"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {showPriorityBadge && (
+              <PriorityEditor
+                value={story.priority}
+                onChange={(next) => patch({ priority: next })}
+                variant={story.priority === "none" ? "button" : "chip"}
+              />
+            )}
+            {showStateBadge && (
+              <StateEditor
+                value={story.state}
+                onChange={(next) => patch({ state: next })}
+              />
+            )}
+          </div>
+        </div>
+        <div className="line-clamp-2 text-sm leading-snug font-medium">
+          {story.name}
+        </div>
+        <div className="flex flex-wrap items-center gap-1.5">
+          {properties.includes("labels") && story.labels.length > 0 && (
+            <LabelsRow labels={story.labels} />
+          )}
+          {properties.includes("assignee") && story.assignee && (
+            <UserAvatar
+              name={story.assignee.username}
+              avatarConfig={story.assignee.avatarConfig}
+              bgShape="circle"
+              bgColor={story.assignee.bgColor}
+              size="sm"
+            />
+          )}
+          {properties.includes("startDate") && story.startDate && (
+            <div className="flex shrink-0" onClick={(e) => e.stopPropagation()}>
+              <DateEditor
+                variant="ghost"
+                value={story.startDate}
+                onChange={(v) => patch({ startDate: v })}
+                label={m.story_row_startDate()}
+                icon={CalendarPlus2}
+              />
+            </div>
+          )}
+          {properties.includes("dueDate") && story.targetDate && (
+            <div className="flex shrink-0" onClick={(e) => e.stopPropagation()}>
+              <DateEditor
+                variant="ghost"
+                value={story.targetDate}
+                onChange={(v) => patch({ targetDate: v })}
+                label={m.story_row_dueDate()}
+                icon={CalendarCheck}
+                overdue={overdue}
+              />
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+});

package/src/components/story/views/{__tests__ → story-list/__tests__}/use-flat-rows.test.ts

@@ -18,7 +18,7 @@
 import { describe, expect, it } from "vitest";
 import { renderHook } from "@testing-library/react";
 import { useFlatRows } from "../use-flat-rows";
-import type { GroupNode } from "../../display/types";
+import type { GroupNode } from "../../../display/types";
 
 const story = (id: string) => ({ id }) as any;