@allbluecn/web-app 0.18.2 → 0.19.0

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

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 // 用例 Peek 侧滑预览面板（规格 A4：三模式与需求页一致）。
-// 复用 story/story-panel-header 的 PeekMode 类型与 PEEK_MODE_OPTIONS（不重写定义），
+// 复用 shared-kit/peek 的 PeekMode 类型与 PEEK_MODE_OPTIONS（不重写定义），
 // 容器宽度/动画类与 story/peek-panel.tsx 保持同值（面板三模式视觉一致性）。
 // 数据面：直接消费列表 TestCaseSummary DTO（title/precondition/steps/priority/type/
 // state/identifier/storyId 全齐，YAGNI 不加详情 serverFn）；「最近执行」P1 仅空态
@@ -30,6 +30,8 @@ import {
   ChevronUp,
   ExternalLink,
   X,
+  ArrowLeft,
+  Folder,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
@@ -41,7 +43,14 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { PEEK_MODE_OPTIONS, type PeekMode } from "@/components/story/story-panel-header";
+import { createPortal } from "react-dom";
+import { PEEK_MODE_OPTIONS, type PeekMode } from "@/components/shared-kit/peek/peek-mode";
+import {
+  PEEK_SIDE_PANEL_WIDTH_CLASS,
+  isDockMode,
+  usePeekDockSlot,
+} from "@/components/shared-kit/peek/dock-slot";
+import { useLayoutResponsive, useDockPresence } from "@/lib/layout-responsive";
 import type { TestCaseSummary } from "@/server/serverFns/testcase/types";
 import type { FolderNodeDto } from "./folder-tree";
 import { priorityLabel, stateLabel, typeLabel } from "./filters";
@@ -51,16 +60,29 @@ export type { PeekMode };
 
 // 与 story/peek-panel.tsx 同值的三模式容器类（复用口径：定义复用 PEEK_MODE_OPTIONS，
 // 容器类为视觉常量，改样式须两处同步——story peek 与本文件）
-const CONTENT_CLASS: Record<Exclude<PeekMode, "side-peek">, string> = {
+const CONTENT_CLASS: Record<"modal" | "full-screen", string> = {
   modal: "top-[8.33%] left-[8.33%] w-[83.33%] h-[83.33%] sm:max-w-none",
   "full-screen": "inset-4 w-auto h-auto sm:max-w-none",
 };
 
+/** 侧边浮窗（side-peek）：贴内容区右缘滑出的浮层层，仅左缘直角。
+    四边统一用 ring-1 的 1px 描边（此前额外叠加 border-l 导致左缘约 2px、显粗）。 */
+const SIDE_PEEK_PANEL_CLASS =
+  "flex flex-col overflow-hidden rounded-r-2xl rounded-l-none bg-popover shadow-xl ring-1 ring-foreground/10 @max-[1399px]:rounded-l-2xl";
+
+/** 侧边面板（side-dock）：四角圆角与右侧内容容器一致（rounded-xl）。
+    停靠时额外加边框（独立卡片）；重叠时自身不加边框（避免与内容容器的边框叠成 2px）。 */
+const SIDE_DOCK_PANEL_CLASS =
+  "flex flex-col overflow-hidden bg-popover rounded-xl";
+const DOCKED_PANEL_BORDER_CLASS = "border border-sidebar-border";
+
 interface TestCasePeekPanelProps {
   /** 列表 DTO（TestCaseSummary 已含面板全部所需字段，无需详情 serverFn） */
   caseItem: TestCaseSummary;
   /** 模块树（属性区解析 folderId 名称） */
   folders: FolderNodeDto[];
+  /** 叠加打开时的上级需求（peek 传入）：关闭按钮变返回箭头 + 渲染面包屑 */
+  breadcrumbParent?: { identifier?: string; projectId?: string };
   mode: PeekMode;
   onModeChange: (mode: PeekMode) => void;
   onClose: () => void;
@@ -73,6 +95,7 @@ interface TestCasePeekPanelProps {
 export function TestCasePeekPanel({
   caseItem,
   folders,
+  breadcrumbParent,
   mode,
   onModeChange,
   onClose,
@@ -83,8 +106,17 @@ export function TestCasePeekPanel({
 }: TestCasePeekPanelProps) {
   const navigate = useNavigate();
   const isSidePeek = mode === "side-peek";
-  const closeLabel = isSidePeek ? m.story_panel_collapse() : m.story_panel_close();
-  const CloseIcon = isSidePeek ? ArrowRight : X;
+  const dockSlot = usePeekDockSlot(mode);
+  const isDock = isDockMode(mode);
+  const { dockOverlay } = useLayoutResponsive();
+  useDockPresence(isDock);
+
+  const closeLabel = breadcrumbParent
+    ? m.story_panel_back()
+    : isSidePeek
+      ? m.story_panel_collapse()
+      : m.story_panel_close();
+  const CloseIcon = breadcrumbParent ? ArrowLeft : isSidePeek ? ArrowRight : X;
   const currentModeOption =
     PEEK_MODE_OPTIONS.find((o) => o.value === mode) ?? PEEK_MODE_OPTIONS[0]!;
   const CurrentModeIcon = currentModeOption.icon;
@@ -122,7 +154,9 @@ export function TestCasePeekPanel({
               className="size-8"
               onClick={onClose}
               aria-label={closeLabel}
-            />
+            >
+              <CloseIcon className="size-4" />
+            </Button>
           }
         />
         <TooltipContent>{closeLabel}</TooltipContent>
@@ -225,7 +259,23 @@ export function TestCasePeekPanel({
     >
       {/* ① 标题区 */}
       <div className="pt-2">
-        <div className="font-mono text-xs text-muted-foreground">{caseItem.identifier}</div>
+        {breadcrumbParent && (
+          <div className="flex items-center gap-1.5 text-sm font-mono text-muted-foreground">
+            <button
+              type="button"
+              onClick={onClose}
+              className="inline-flex items-center gap-1 hover:text-foreground transition-colors cursor-pointer"
+            >
+              <Folder className="size-4 shrink-0 text-muted-foreground" />
+              {breadcrumbParent.identifier}
+            </button>
+            <span className="text-muted-foreground/40 px-1">/</span>
+            <span>{caseItem.identifier}</span>
+          </div>
+        )}
+        {!breadcrumbParent && (
+          <div className="font-mono text-xs text-muted-foreground">{caseItem.identifier}</div>
+        )}
         <h2 className="mt-1 text-xl font-semibold" data-testid="peek-title">
           {caseItem.title}
         </h2>
@@ -318,11 +368,14 @@ export function TestCasePeekPanel({
     </div>
   );
 
-  if (isSidePeek) {
-    return (
+  if (isSidePeek || isDock) {
+    // 侧边面板（dock）：portal 到右侧内容父容器之外的布局槽。槽位就绪且未进入窄屏浮层态时
+    // 才 portal 占位；否则（SSR 首帧 / 布局外渲染 / 窄屏浮层）退化为容器内绝对定位覆盖。
+    const dockLayout = isDock && dockSlot !== null && !dockOverlay;
+    const panel = (
       <div
         data-testid="peek-panel"
-        className="absolute inset-y-0 right-0 z-20 flex w-[min(100%,max(85vw,560px),1200px)] flex-col overflow-hidden rounded-r-2xl rounded-l-none border-l bg-popover shadow-xl ring-1 ring-foreground/10 @max-[1399px]:rounded-l-2xl"
+        className={`${dockLayout ? `relative h-full w-full ${DOCKED_PANEL_BORDER_CLASS}` : `absolute inset-y-0 right-0 z-20 ${PEEK_SIDE_PANEL_WIDTH_CLASS}`} ${isDock ? SIDE_DOCK_PANEL_CLASS : SIDE_PEEK_PANEL_CLASS}`}
         onClick={(e) => {
           // 仅拦截本容器 DOM 内的点击（防止冒泡到列表背景误关 peek）。
           // Radix/Base UI 弹层 portal 到 body、不在本容器 DOM 内，其合成事件冒泡会
@@ -336,6 +389,11 @@ export function TestCasePeekPanel({
         {body}
       </div>
     );
+
+    if (dockLayout && dockSlot) {
+      return createPortal(panel, dockSlot);
+    }
+    return panel;
   }
 
   return (
@@ -348,7 +406,7 @@ export function TestCasePeekPanel({
       <DialogContent
         showCloseButton={false}
         data-testid="peek-panel"
-        className={`flex flex-col gap-0 overflow-hidden p-0 shadow-2xl transition-all duration-300 translate-x-0 translate-y-0 data-open:zoom-in-0 data-closed:zoom-out-0 bg-popover ${CONTENT_CLASS[mode]}`}
+        className={`flex flex-col gap-0 overflow-hidden p-0 shadow-2xl transition-all duration-300 translate-x-0 translate-y-0 data-open:zoom-in-0 data-closed:zoom-out-0 bg-popover ${CONTENT_CLASS[mode as "modal" | "full-screen"]}`}
         initialFocus={false}
       >
         {header}

package/src/components/testcase/plans/plan-list.tsx

@@ -45,7 +45,12 @@ interface PlanListProps {
 }
 
 function formatDate(iso: string): string {
-  return formatTimestamp(iso, "M月d日");
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return "-";
+  return m.testcase_plan_shortDate({
+    month: formatTimestamp(date, "M"),
+    day: formatTimestamp(date, "d"),
+  });
 }
 
 export function PlanList({ projectId, iterations }: PlanListProps) {

package/src/components/testcase/step-editor.tsx

@@ -39,6 +39,18 @@ interface StepEditorProps {
   onChange: (steps: StepDraft[]) => void;
   disabled?: boolean;
   className?: string;
+  /**
+   * 粒度操作分派（任务 22 协同态专用，§7.1 steps 行）：传入时增删/移动/
+   * 改步骤映射到逐操作回调而非整组 onChange——协同绑定层（Y.Array）按单操作
+   * 应用（插入/删除/移动/字段 LWW 各自成为一次 Y 增量，保并发语义）。缺省
+   * undefined = 既有整组 onChange 行为逐字保留（创建对话框等非协同消费方）。
+   */
+  granular?: {
+    onInsertStep: (index: number, step: StepDraft) => void;
+    onRemoveStep: (index: number) => void;
+    onMoveStep: (from: number, to: number) => void;
+    onStepChange: (index: number, patch: Partial<StepDraft>) => void;
+  };
 }
 
 /** 提交侧有效性（对话框禁提交依据）：至少 1 步且每步 action 非空白 */
@@ -46,21 +58,36 @@ export function isStepDraftsValid(steps: StepDraft[]): boolean {
   return steps.length > 0 && steps.every((s) => s.action.trim().length > 0);
 }
 
-export function StepEditor({ value, onChange, disabled, className }: StepEditorProps) {
+export function StepEditor({ value, onChange, disabled, className, granular }: StepEditorProps) {
   // 「dirty 行」跟踪：用户编辑或失焦过的行才显示空 action 红框（新增行不立即报错）。
-  // 按行索引记录，增删/移动时同步重映射保持行对齐。
+  // 按行索引记录，增删/移动时同步重映射保持行对齐。（协同态下远端增删不重映射
+  // 本端 dirty 集——索引可能指错行，仅为外观瑕疵不影响数据。）
   const [dirty, setDirty] = useState<ReadonlySet<number>>(() => new Set<number>());
   const markDirty = (i: number) =>
     setDirty((prev) => (prev.has(i) ? prev : new Set(prev).add(i)));
 
   const setStep = (i: number, patch: Partial<StepDraft>) => {
+    if (granular) {
+      granular.onStepChange(i, patch);
+      return;
+    }
     onChange(value.map((s, idx) => (idx === i ? { ...s, ...patch } : s)));
   };
 
-  const addStep = () => onChange([...value, { action: "", expected: "" }]);
+  const addStep = () => {
+    if (granular) {
+      granular.onInsertStep(value.length, { action: "", expected: "" });
+      return;
+    }
+    onChange([...value, { action: "", expected: "" }]);
+  };
 
   const removeStep = (i: number) => {
     if (value.length <= 1) return;
+    if (granular) {
+      granular.onRemoveStep(i);
+      return;
+    }
     onChange(value.filter((_, idx) => idx !== i));
     setDirty((prev) => {
       const next = new Set<number>();
@@ -75,6 +102,10 @@ export function StepEditor({ value, onChange, disabled, className }: StepEditorP
   const moveStep = (i: number, dir: -1 | 1) => {
     const j = i + dir;
     if (j < 0 || j >= value.length) return;
+    if (granular) {
+      granular.onMoveStep(i, j);
+      return;
+    }
     const next = [...value];
     [next[i], next[j]] = [next[j]!, next[i]!];
     onChange(next);