@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/testcase/filters/index.tsx

@@ -15,130 +15,38 @@
 // 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/>.
 
-// 用例列表筛选条（P1 骨架：state/type/priority 三维服务端筛选）。
-// 复杂条件组合（FilterCondition 体系）与保存视图在任务 9 落地，届时可叠加。
-import { X } from "lucide-react";
-import { Button } from "@/components/ui/button";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  TEST_CASE_PRIORITY_VALUES,
-  TEST_CASE_STATE_VALUES,
-  TEST_CASE_TYPE_VALUES,
-  type TestCasePriority,
-  type TestCaseState,
-  type TestCaseType,
-} from "@/server/serverFns/testcase/constants";
-import { m } from "@/paraglide/messages.js";
-
-export interface TestCaseFilterState {
-  state?: TestCaseState;
-  type?: TestCaseType;
-  priority?: TestCasePriority;
-}
-
-/** 提取 listTestCasesFn data 所需的服务端筛选字段（空值剔除交给 serverFn optional 语义） */
-export function serializeTestCaseFilters(f: TestCaseFilterState) {
-  return { state: f.state, type: f.type, priority: f.priority };
-}
-
-export function hasActiveFilters(f: TestCaseFilterState): boolean {
-  return Boolean(f.state || f.type || f.priority);
-}
-
-export function stateLabel(state: TestCaseState): string {
-  switch (state) {
-    case "draft":
-      return m.testcase_state_draft();
-    case "in_review":
-      return m.testcase_state_in_review();
-    case "approved":
-      return m.testcase_state_approved();
-    case "deprecated":
-      return m.testcase_state_deprecated();
-  }
-}
-
-export function typeLabel(type: TestCaseType): string {
-  switch (type) {
-    case "functional":
-      return m.testcase_type_functional();
-    case "boundary":
-      return m.testcase_type_boundary();
-    case "exception":
-      return m.testcase_type_exception();
-    case "performance":
-      return m.testcase_type_performance();
-    case "security":
-      return m.testcase_type_security();
-    case "compatibility":
-      return m.testcase_type_compatibility();
-  }
-}
-
-export function priorityLabel(priority: TestCasePriority): string {
-  return priority.toUpperCase();
-}
-
-interface TestCaseFilterBarProps {
-  value: TestCaseFilterState;
-  onChange: (next: TestCaseFilterState) => void;
-}
-
-export function TestCaseFilterBar({ value, onChange }: TestCaseFilterBarProps) {
-  const handleSelect = <K extends keyof TestCaseFilterState>(key: K, raw: string | null) => {
-    onChange({ ...value, [key]: raw === null || raw === "" ? undefined : (raw as TestCaseFilterState[K]) });
-  };
-
-  return (
-    <div className="flex items-center gap-2">
-      <Select value={value.state ?? null} onValueChange={(v) => handleSelect("state", v)}>
-        <SelectTrigger className="h-8 w-auto min-w-24 text-sm">
-          <SelectValue placeholder={m.testcase_filter_state()} />
-        </SelectTrigger>
-        <SelectContent>
-          {TEST_CASE_STATE_VALUES.map((s) => (
-            <SelectItem key={s} value={s}>
-              {stateLabel(s)}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-      <Select value={value.type ?? null} onValueChange={(v) => handleSelect("type", v)}>
-        <SelectTrigger className="h-8 w-auto min-w-24 text-sm">
-          <SelectValue placeholder={m.testcase_filter_type()} />
-        </SelectTrigger>
-        <SelectContent>
-          {TEST_CASE_TYPE_VALUES.map((t) => (
-            <SelectItem key={t} value={t}>
-              {typeLabel(t)}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-      <Select value={value.priority ?? null} onValueChange={(v) => handleSelect("priority", v)}>
-        <SelectTrigger className="h-8 w-auto min-w-24 text-sm">
-          <SelectValue placeholder={m.testcase_filter_priority()} />
-        </SelectTrigger>
-        <SelectContent>
-          {TEST_CASE_PRIORITY_VALUES.map((p) => (
-            <SelectItem key={p} value={p}>
-              {priorityLabel(p)}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-      {hasActiveFilters(value) && (
-        <Button variant="ghost" size="sm" className="h-8 px-2 text-muted-foreground" onClick={() => onChange({})}>
-          <X className="size-3.5" />
-          {m.testcase_filter_clear()}
-        </Button>
-      )}
-    </div>
-  );
-}
+// 用例筛选桶导出 = 共享 createFiltersModule 的五字段实例（UI 对齐二期 TC-B
+// 任务 21：旧 TestCaseFilterBar 三 Select 快速筛选由 FilterCondition 三段式
+// 取代，组件运行时由 shared-kit/list-kit/filters 参数化工厂实例化，此处仅
+// 装配；字段配置与业务渲染器见 ./field-configs）。
+import { createFiltersModule } from "@/components/shared-kit/list-kit/filters";
+import { TESTCASE_FILTERS_MODULE_OPTIONS, TESTCASE_FILTER_FIELD_CONFIGS } from "./field-configs";
+
+const testcaseFilters = createFiltersModule(TESTCASE_FILTER_FIELD_CONFIGS, TESTCASE_FILTERS_MODULE_OPTIONS);
+
+export const TestcaseFilterToggle = testcaseFilters.FilterToggle;
+export const TestcaseFilterRow = testcaseFilters.FilterRow;
+export const AppliedFilters = testcaseFilters.AppliedFilters;
+
+export {
+  deserializeFilters,
+  serializeFilters,
+  createDefaultCondition,
+  deserializeTestcaseFilters,
+  filterConditionSummary,
+  singleValueCondition,
+  getFilterConfig,
+  getFilterLabel,
+  getFilterIcon,
+  FILTER_FIELD_CONFIGS,
+  OPERATOR_LABELS,
+  priorityLabel,
+  stateLabel,
+  typeLabel,
+} from "./field-configs";
+export type {
+  TestcaseFilterCondition,
+  TestcaseFilterKey,
+  FilterOperator,
+  FilterFieldType,
+} from "./field-configs";

package/src/components/testcase/inline-editors/assignee-editor.tsx

@@ -43,9 +43,9 @@ export function AssigneeEditor({ assignee, users, onChange, className }: Assigne
 
   return (
     <Popover open={open} onOpenChange={(v) => { setOpen(v); if (v) setSearch(""); }}>
-      <PopoverTrigger render={<div className={cn("flex items-center", className)} />}>
+      <PopoverTrigger nativeButton={false} render={<div className={cn("flex items-center", className)} />}>
         {assignee ? (
-          <span className="inline-flex cursor-pointer items-center gap-1 rounded-sm border border-border px-1.5 py-0.5">
+          <span className="inline-flex h-7 cursor-pointer items-center gap-1 rounded-md border border-border px-2">
             <UserAvatar
               avatarConfig={assignee.avatarConfig}
               bgShape="circle"
@@ -57,9 +57,9 @@ export function AssigneeEditor({ assignee, users, onChange, className }: Assigne
             <span className="text-xs">{assignee.username}</span>
           </span>
         ) : (
-          <span className="inline-flex cursor-pointer items-center gap-1 rounded-sm border border-border px-1.5 py-0.5 text-xs text-muted-foreground">
-            <CircleUser className="size-3" />
-            {m.testcase_inline_notSelected()}
+          // 无值纯图标按钮（对齐 story InlineTrigger：size-7 icon-only）
+          <span className="inline-flex size-7 cursor-pointer items-center justify-center rounded-md border border-border text-muted-foreground">
+            <CircleUser className="size-3.5" />
           </span>
         )}
       </PopoverTrigger>
@@ -100,7 +100,7 @@ export function AssigneeEditor({ assignee, users, onChange, className }: Assigne
               >
                 <UserAvatar
                   avatarConfig={u.avatarConfig}
-                  bgShape={u.bgShape as "circle" | "rounded" | "square" | null}
+                  bgShape={u.bgShape}
                   bgColor={u.bgColor}
                   name={u.username}
                   size="sm"

package/src/components/testcase/inline-editors/folder-editor.tsx

@@ -57,18 +57,18 @@ export function FolderEditor({ value, folders, onChange, className }: FolderEdit
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger render={<div className={cn("flex items-center", className)} />}>
-        <span className="inline-flex max-w-36 cursor-pointer items-center gap-1 rounded-sm border border-border px-1.5 py-0.5 text-xs">
+      <PopoverTrigger nativeButton={false} render={<div className={cn("flex items-center", className)} />}>
+        <span className="inline-flex max-w-36 cursor-pointer items-center gap-1 rounded-sm border border-border text-xs">
           {current ? (
-            <>
-              <Folder className="size-3 shrink-0 text-muted-foreground" />
+            <span className="inline-flex h-7 items-center gap-1 rounded-md px-2">
+              <Folder className="size-3.5 shrink-0 text-muted-foreground" />
               <span className="truncate">{current.name}</span>
-            </>
+            </span>
           ) : (
-            <>
-              <Inbox className="size-3 shrink-0 text-muted-foreground" />
-              <span className="text-muted-foreground">{m.testcase_folderTree_ungrouped()}</span>
-            </>
+            // 无值纯图标按钮（对齐 story 行内编辑器形态）
+            <span className="inline-flex size-7 items-center justify-center rounded-md text-muted-foreground">
+              <Inbox className="size-3.5" />
+            </span>
           )}
         </span>
       </PopoverTrigger>

package/src/components/testcase/inline-editors/priority-editor.tsx

@@ -18,19 +18,37 @@
 // 用例优先级行内编辑（规格 A5，仿 story/inline-editors/priority-editor 同款交互：
 // 单元格点击即编辑，选项点击即确认并关闭，Esc 关闭不提交）。值域 p0-p3
 // 来自 constants 单一事实源，label 复用 filters/priorityLabel（P0-P3 无需 i18n）。
+// 任务 29：触发器接 shared-kit LevelBadge（徽章形态，§5.1 完整 token），
+// 选项行图标走 LevelBadge icon 变体（只取字色，无底色块）。
 import { useState } from "react";
 import { Check } from "lucide-react";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { LevelBadge, type LevelBadgeMeta } from "@/components/shared-kit/list-kit/level-badge";
 import { TEST_CASE_PRIORITY_VALUES, type TestCasePriority } from "@/server/serverFns/testcase/constants";
 import { priorityLabel } from "../filters";
 import { cn } from "@/lib/utils";
 
-export const TEST_CASE_PRIORITY_COLOR: Record<TestCasePriority, string> = {
-  p0: "text-red-600 dark:text-red-400",
-  p1: "text-orange-600 dark:text-orange-400",
-  p2: "text-blue-600 dark:text-blue-400",
-  p3: "text-muted-foreground",
-};
+// 色板与图标族已集中至 ../constants（§6.3 圆箭头族替换 Flag 族），
+// 此处 re-export 保持既有消费点（plan-detail、generation/draft-card）import 不变。
+import {
+  TEST_CASE_PRIORITY_META,
+  TEST_CASE_PRIORITY_COLOR,
+  TEST_CASE_PRIORITY_BADGE_COLOR,
+} from "../constants";
+export { TEST_CASE_PRIORITY_META, TEST_CASE_PRIORITY_COLOR };
+
+/** LevelBadge meta（badge 形态）：icon/字色引 META 单一来源，徽章底色按 §5.1
+ *  公式配对（constants 的 TEST_CASE_PRIORITY_BADGE_COLOR），label 由 priorityLabel 派生 */
+const PRIORITY_LEVEL_META: Record<string, LevelBadgeMeta> = Object.fromEntries(
+  TEST_CASE_PRIORITY_VALUES.map((p) => [
+    p,
+    {
+      label: priorityLabel(p),
+      icon: TEST_CASE_PRIORITY_META[p].icon,
+      color: TEST_CASE_PRIORITY_BADGE_COLOR[p],
+    },
+  ]),
+);
 
 interface PriorityEditorProps {
   value: TestCasePriority;
@@ -43,34 +61,32 @@ export function PriorityEditor({ value, onChange, className }: PriorityEditorPro
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger render={<div className={cn("flex items-center", className)} />}>
-        <span
-          className={cn(
-            "inline-flex cursor-pointer items-center rounded-sm border border-border px-1.5 py-0.5 text-xs font-medium",
-            TEST_CASE_PRIORITY_COLOR[value],
-          )}
-        >
-          {priorityLabel(value)}
+      <PopoverTrigger nativeButton={false} render={<div className={cn("flex items-center", className)} />}>
+        <span className="cursor-pointer">
+          <LevelBadge level={value} meta={PRIORITY_LEVEL_META} />
         </span>
       </PopoverTrigger>
       <PopoverContent className="w-32 p-1" align="start">
-        {TEST_CASE_PRIORITY_VALUES.map((p) => (
-          <button
-            key={p}
-            type="button"
-            onClick={() => {
-              onChange(p);
-              setOpen(false);
-            }}
-            className={cn(
-              "flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs",
-              value === p ? "bg-accent font-medium" : "hover:bg-muted",
-            )}
-          >
-            <span className={cn("font-medium", TEST_CASE_PRIORITY_COLOR[p])}>{priorityLabel(p)}</span>
-            {value === p && <Check className="ml-auto size-3.5 shrink-0 text-primary" />}
-          </button>
-        ))}
+        {TEST_CASE_PRIORITY_VALUES.map((p) => {
+          return (
+            <button
+              key={p}
+              type="button"
+              onClick={() => {
+                onChange(p);
+                setOpen(false);
+              }}
+              className={cn(
+                "flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs",
+                value === p ? "bg-accent font-medium" : "hover:bg-muted",
+              )}
+            >
+              <LevelBadge level={p} meta={PRIORITY_LEVEL_META} variant="icon" />
+              <span className={cn("font-medium", TEST_CASE_PRIORITY_COLOR[p])}>{priorityLabel(p)}</span>
+              {value === p && <Check className="ml-auto size-3.5 shrink-0 text-primary" />}
+            </button>
+          );
+        })}
       </PopoverContent>
     </Popover>
   );

package/src/components/testcase/inline-editors/state-editor.tsx

@@ -19,18 +19,17 @@
 // 四态流转 MVP 不设闸（控制者裁定：deprecated→draft 恢复即改回，全部转换允许），
 // 值域来自 constants 单一事实源（TEST_CASE_STATE_VALUES 恰四态，「五态」系计划笔误）。
 import { useState } from "react";
-import { Check, CircleDashed, CircleSlash, CheckCircle2, LoaderCircle, type LucideIcon } from "lucide-react";
+import { Check } from "lucide-react";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { extractTextColors } from "@/components/shared-kit/list-kit/level-badge";
 import { TEST_CASE_STATE_VALUES, type TestCaseState } from "@/server/serverFns/testcase/constants";
 import { stateLabel } from "../filters";
 import { cn } from "@/lib/utils";
 
-export const TEST_CASE_STATE_META: Record<TestCaseState, { icon: LucideIcon; color: string }> = {
-  draft: { icon: CircleDashed, color: "text-muted-foreground" },
-  in_review: { icon: LoaderCircle, color: "text-amber-600 dark:text-amber-400" },
-  approved: { icon: CheckCircle2, color: "text-green-600 dark:text-green-400" },
-  deprecated: { icon: CircleSlash, color: "text-muted-foreground" },
-};
+// 色板已集中至 ../constants（/15 公式 + §6.2 图标族），此处 re-export 保持
+// 既有消费点（select-cases-dialog、story related-test-cases）import 不变。
+import { TEST_CASE_STATE_META } from "../constants";
+export { TEST_CASE_STATE_META };
 
 interface StateEditorProps {
   value: TestCaseState;
@@ -41,13 +40,16 @@ interface StateEditorProps {
 export function StateEditor({ value, onChange, className }: StateEditorProps) {
   const [open, setOpen] = useState(false);
   const Icon = TEST_CASE_STATE_META[value].icon;
+  // STATE_META.color 是完整徽章 token（含 bg-*）；触发器/选项为 icon-only 场景，
+  // 只取字色（任务 29 收编一期 Task 7 Ruling 的「图标带无圆角底色块」过渡态）
+  const valueTextColors = extractTextColors(TEST_CASE_STATE_META[value].color);
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger render={<div className={cn("flex items-center", className)} />}>
-        <span className="inline-flex cursor-pointer items-center gap-1 rounded-sm border border-border px-1.5 py-0.5 text-xs">
-          <Icon className={cn("size-3", TEST_CASE_STATE_META[value].color)} />
-          <span className={TEST_CASE_STATE_META[value].color}>{stateLabel(value)}</span>
+      <PopoverTrigger nativeButton={false} render={<div className={cn("flex items-center", className)} />}>
+        <span className="inline-flex h-7 cursor-pointer items-center gap-1 rounded-md border border-border px-2 text-xs">
+          <Icon className={cn("size-3.5", valueTextColors)} />
+          <span className={valueTextColors}>{stateLabel(value)}</span>
         </span>
       </PopoverTrigger>
       <PopoverContent className="w-36 p-1" align="start">
@@ -66,7 +68,7 @@ export function StateEditor({ value, onChange, className }: StateEditorProps) {
                 value === s ? "bg-accent font-medium" : "hover:bg-muted",
               )}
             >
-              <OptionIcon className={cn("size-3.5", TEST_CASE_STATE_META[s].color)} />
+              <OptionIcon className={cn("size-3.5", extractTextColors(TEST_CASE_STATE_META[s].color))} />
               {stateLabel(s)}
               {value === s && <Check className="ml-auto size-3.5 shrink-0 text-primary" />}
             </button>

package/src/components/testcase/inline-editors/type-editor.tsx

@@ -24,6 +24,11 @@ import { TEST_CASE_TYPE_VALUES, type TestCaseType } from "@/server/serverFns/tes
 import { typeLabel } from "../filters";
 import { cn } from "@/lib/utils";
 
+// 色板已集中至 ../constants（六类图标族），此处 re-export 保持
+// 既有消费点（story related-test-cases 等）import 不变。
+import { TEST_CASE_TYPE_META } from "../constants";
+export { TEST_CASE_TYPE_META };
+
 interface TypeEditorProps {
   value: TestCaseType;
   onChange: (value: TestCaseType) => void;
@@ -32,32 +37,38 @@ interface TypeEditorProps {
 
 export function TypeEditor({ value, onChange, className }: TypeEditorProps) {
   const [open, setOpen] = useState(false);
+  const Icon = TEST_CASE_TYPE_META[value].icon;
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger render={<div className={cn("flex items-center", className)} />}>
-        <span className="inline-flex cursor-pointer items-center rounded-sm border border-border px-1.5 py-0.5 text-xs text-muted-foreground">
+      <PopoverTrigger nativeButton={false} render={<div className={cn("flex items-center", className)} />}>
+        <span className="inline-flex h-7 cursor-pointer items-center gap-1 rounded-md border border-border px-2 text-xs text-muted-foreground">
+          <Icon className="size-3.5" />
           {typeLabel(value)}
         </span>
       </PopoverTrigger>
-      <PopoverContent className="w-32 p-1" align="start">
-        {TEST_CASE_TYPE_VALUES.map((t) => (
-          <button
-            key={t}
-            type="button"
-            onClick={() => {
-              onChange(t);
-              setOpen(false);
-            }}
-            className={cn(
-              "flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs",
-              value === t ? "bg-accent font-medium" : "hover:bg-muted",
-            )}
-          >
-            {typeLabel(t)}
-            {value === t && <Check className="ml-auto size-3.5 shrink-0 text-primary" />}
-          </button>
-        ))}
+      <PopoverContent className="w-36 p-1" align="start">
+        {TEST_CASE_TYPE_VALUES.map((t) => {
+          const OptionIcon = TEST_CASE_TYPE_META[t].icon;
+          return (
+            <button
+              key={t}
+              type="button"
+              onClick={() => {
+                onChange(t);
+                setOpen(false);
+              }}
+              className={cn(
+                "flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs",
+                value === t ? "bg-accent font-medium" : "hover:bg-muted",
+              )}
+            >
+              <OptionIcon className="size-3.5 shrink-0 text-muted-foreground" />
+              {typeLabel(t)}
+              {value === t && <Check className="ml-auto size-3.5 shrink-0 text-primary" />}
+            </button>
+          );
+        })}
       </PopoverContent>
     </Popover>
   );

package/src/components/testcase/list/case-row.tsx

@@ -27,7 +27,16 @@
 // （列表本身不重排：扁平游标分页序稳定，分组仅是视觉桶装）。
 import { memo, useCallback, useEffect, useRef } from "react";
 import { useServerFn } from "@tanstack/react-start";
+import { MoreHorizontal, Trash2, Waypoints } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { updateTestCaseFn } from "@/server/serverFns/testcase/testcase-crud";
 import type { TestCaseAutomation, TestCasePriority, TestCaseState, TestCaseType } from "@/server/serverFns/testcase/constants";
 import type { TestCaseSteps, TestCaseSummary } from "@/server/serverFns/testcase/types";
@@ -39,6 +48,7 @@ import { AssigneeEditor } from "../inline-editors/assignee-editor";
 import { FolderEditor } from "../inline-editors/folder-editor";
 import { TypeEditor } from "../inline-editors/type-editor";
 import { cn } from "@/lib/utils";
+import { EntityPresenceBadge } from "@/components/collab/entity-presence-badge";
 import { m } from "@/paraglide/messages.js";
 import { toastError } from "@/lib/toast-error";
 
@@ -87,9 +97,17 @@ interface CaseRowProps {
   onPatchCase: (id: string, patch: Partial<TestCaseSummary>) => void;
   /** 分组触发字段保存成功后刷新分组计数（可选） */
   onRefreshGroups?: () => void;
+  /** identifier 列宽类（默认 w-24 定宽对齐列表页；需求详情面板传 shrink-0 自适应紧凑） */
+  identifierClassName?: string;
+  /** 行尾「更多」菜单：移出关联（提供即渲染 ⋯ 按钮，需求详情面板用） */
+  onRemove?: (id: string) => void;
+  removeMenuLabel?: string;
+  /** 行尾「更多」菜单：删除用例（可选；与 onRemove 同现） */
+  onDelete?: (id: string) => void;
+  deleteMenuLabel?: string;
 }
 
-export const CaseRow = memo(function CaseRow({ caseItem, users, folders, selected, onSelect, onOpen, checked, onToggleSelect, onPatchCase, onRefreshGroups }: CaseRowProps) {
+export const CaseRow = memo(function CaseRow({ caseItem, users, folders, selected, onSelect, onOpen, checked, onToggleSelect, onPatchCase, onRefreshGroups, identifierClassName = "w-24 shrink-0", onRemove, removeMenuLabel, onDelete, deleteMenuLabel }: CaseRowProps) {
   const updateTestCase = useServerFn(updateTestCaseFn);
   // version 本地镜像：乐观 bump 与服务端收敛的基线（连击编辑不回退）
   const versionRef = useRef(caseItem.version);
@@ -159,6 +177,8 @@ export const CaseRow = memo(function CaseRow({ caseItem, users, folders, selecte
       className={cn(
         "group flex h-11 cursor-pointer items-center gap-2 border-b border-border/40 bg-card px-2 text-sm transition-colors hover:bg-muted/40",
         selected && "bg-accent/60 hover:bg-accent/60",
+        // 批量勾选行浅背景（对齐子需求 StoryRefRow 的选中样式，无边框）
+        !selected && checked && "bg-muted/20 hover:bg-muted/20",
       )}
     >
       {onToggleSelect ? (
@@ -173,8 +193,10 @@ export const CaseRow = memo(function CaseRow({ caseItem, users, folders, selecte
           onClick={(e) => e.stopPropagation()}
         />
       ) : null}
-      <span className="w-24 shrink-0 font-mono text-xs text-muted-foreground">{caseItem.identifier}</span>
+      <span className={cn("shrink-0 font-mono text-xs text-muted-foreground", identifierClassName)}>{caseItem.identifier}</span>
       <span className="min-w-0 flex-1 truncate font-medium">{caseItem.title}</span>
+      {/* 在看成员徽标（§7.1 行级 presence）：行 hover 渐显，无在看者不渲染 */}
+      <EntityPresenceBadge module="test-cases" route={`/test-cases/${caseItem.id}`} />
       {/* 编辑器区拦截冒泡：打开弹层不触发行选中 */}
       <div className="flex shrink-0 items-center gap-1" onClick={(e) => e.stopPropagation()}>
         <TypeEditor value={caseItem.type} onChange={setType} />
@@ -183,6 +205,42 @@ export const CaseRow = memo(function CaseRow({ caseItem, users, folders, selecte
         <AssigneeEditor assignee={caseItem.assignee} users={users} onChange={setAssignee} />
         <FolderEditor value={caseItem.folderId} folders={folders} onChange={setFolder} />
       </div>
+      {/* 行尾「更多」菜单（需求详情面板用，对齐 StoryRefRow）：移出关联 / 删除 */}
+      {(onRemove || onDelete) && (
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <Button
+                variant="ghost"
+                size="icon"
+                className="size-7 shrink-0 border border-border/60 rounded hover:bg-muted"
+                onClick={(e) => e.stopPropagation()}
+                aria-label={removeMenuLabel ?? deleteMenuLabel}
+              />
+            }
+          >
+            <MoreHorizontal className="size-4" />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-40" sideOffset={4}>
+            {onRemove && (
+              <DropdownMenuItem onClick={() => onRemove(caseItem.id)}>
+                <Waypoints className="mr-2 size-4" />
+                {removeMenuLabel}
+              </DropdownMenuItem>
+            )}
+            {onRemove && onDelete && <DropdownMenuSeparator />}
+            {onDelete && (
+              <DropdownMenuItem
+                onClick={() => onDelete(caseItem.id)}
+                className="text-destructive focus:text-destructive"
+              >
+                <Trash2 className="mr-2 size-4" />
+                {deleteMenuLabel}
+              </DropdownMenuItem>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
     </div>
   );
 });

package/src/components/testcase/list/grouped-list.tsx

@@ -51,8 +51,9 @@ type FlatRow =
   | { kind: "header"; key: string; label: string; count: number }
   | { kind: "case"; key: string; c: TestCaseSummary };
 
-/** folder 维度组 key（与 listGroupsFn deriveGroupKey 同口径：null → unassigned） */
-function groupKeyOf(groupBy: TestCaseGroupBy, c: TestCaseSummary): string {
+/** folder 维度组 key（与 listGroupsFn deriveGroupKey 同口径：null → unassigned）。
+ *  任务 29 起导出：list-view 的 manual 批量移动按同一 key 桶装组内顺序 */
+export function groupKeyOf(groupBy: TestCaseGroupBy, c: TestCaseSummary): string {
   switch (groupBy) {
     case "folder":
       return c.folderId ?? "unassigned";