@allbluecn/web-app 0.17.1 → 0.18.0

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

@@ -0,0 +1,359 @@
+// 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/>.
+
+// 用例 Peek 侧滑预览面板（规格 A4：三模式与需求页一致）。
+// 复用 story/story-panel-header 的 PeekMode 类型与 PEEK_MODE_OPTIONS（不重写定义），
+// 容器宽度/动画类与 story/peek-panel.tsx 保持同值（面板三模式视觉一致性）。
+// 数据面：直接消费列表 TestCaseSummary DTO（title/precondition/steps/priority/type/
+// state/identifier/storyId 全齐，YAGNI 不加详情 serverFn）；「最近执行」P1 仅空态
+// （执行数据 P2 才有）。↑↓/Esc 走面板热键，「打开详情」navigate 到 $caseId。
+import { useCallback } from "react";
+import { Link, useNavigate } from "@tanstack/react-router";
+import { useHotkey } from "@tanstack/react-hotkeys";
+import {
+  ArrowRight,
+  ChevronDown,
+  ChevronUp,
+  ExternalLink,
+  X,
+} from "lucide-react";
+import { Button } from "@allbluecn/ui/button";
+import { Dialog, DialogContent } from "@allbluecn/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "@allbluecn/ui/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@allbluecn/ui/tooltip";
+import { PEEK_MODE_OPTIONS, type PeekMode } from "@/components/story/story-panel-header";
+import type { TestCaseSummary } from "@/server/serverFns/testcase/types";
+import type { FolderNodeDto } from "./folder-tree";
+import { priorityLabel, stateLabel, typeLabel } from "./filters";
+import { m } from "@/paraglide/messages.js";
+
+export type { PeekMode };
+
+// 与 story/peek-panel.tsx 同值的三模式容器类（复用口径：定义复用 PEEK_MODE_OPTIONS，
+// 容器类为视觉常量，改样式须两处同步——story peek 与本文件）
+const CONTENT_CLASS: Record<Exclude<PeekMode, "side-peek">, 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",
+};
+
+interface TestCasePeekPanelProps {
+  /** 列表 DTO（TestCaseSummary 已含面板全部所需字段，无需详情 serverFn） */
+  caseItem: TestCaseSummary;
+  /** 模块树（属性区解析 folderId 名称） */
+  folders: FolderNodeDto[];
+  mode: PeekMode;
+  onModeChange: (mode: PeekMode) => void;
+  onClose: () => void;
+  onPrevious?: () => void;
+  onNext?: () => void;
+  prevDisabled?: boolean;
+  nextDisabled?: boolean;
+}
+
+export function TestCasePeekPanel({
+  caseItem,
+  folders,
+  mode,
+  onModeChange,
+  onClose,
+  onPrevious,
+  onNext,
+  prevDisabled = false,
+  nextDisabled = false,
+}: 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 currentModeOption =
+    PEEK_MODE_OPTIONS.find((o) => o.value === mode) ?? PEEK_MODE_OPTIONS[0]!;
+  const CurrentModeIcon = currentModeOption.icon;
+
+  // Esc 仅 side-peek 面板注册（modal/full-screen 由 Dialog 自身 Esc → onOpenChange 关闭）
+  useHotkey("Escape", onClose, { enabled: isSidePeek });
+  // ↑↓ 连续 peek：面板打开期间全局生效（焦点不在列表滚动容器时仍可切换）
+  useHotkey(
+    "ArrowUp",
+    () => onPrevious?.(),
+    { enabled: true, preventDefault: true, stopPropagation: true },
+  );
+  useHotkey(
+    "ArrowDown",
+    () => onNext?.(),
+    { enabled: true, preventDefault: true, stopPropagation: true },
+  );
+
+  const handleOpenDetail = useCallback(() => {
+    void navigate({ to: "/test-cases/$caseId", params: { caseId: caseItem.id } });
+  }, [navigate, caseItem.id]);
+
+  const folderName = caseItem.folderId
+    ? (folders.find((f) => f.id === caseItem.folderId)?.name ?? caseItem.folderId)
+    : m.testcase_folderTree_ungrouped();
+
+  const header = (
+    <div className="mt-2 flex h-11 shrink-0 items-center gap-1.5 px-3">
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-8"
+              onClick={onClose}
+              aria-label={closeLabel}
+            />
+          }
+        />
+        <TooltipContent>{closeLabel}</TooltipContent>
+      </Tooltip>
+
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          render={
+            <Button
+              variant="ghost"
+              size="icon"
+              className="size-8"
+              aria-label={m.story_panel_switchLayout()}
+              data-testid="peek-mode-switcher"
+            />
+          }
+        >
+          <CurrentModeIcon className="size-4" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="center" className="w-40" sideOffset={4}>
+          <DropdownMenuRadioGroup
+            value={mode}
+            onValueChange={(v) => onModeChange(v as PeekMode)}
+          >
+            {PEEK_MODE_OPTIONS.map((o) => (
+              <DropdownMenuRadioItem key={o.value} value={o.value}>
+                <o.icon className="mr-2 size-4" />
+                {o.label()}
+              </DropdownMenuRadioItem>
+            ))}
+          </DropdownMenuRadioGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {(onPrevious || onNext) && (
+        <>
+          <div className="mx-1 flex h-4 items-center">
+            <span className="h-full w-px bg-border" />
+          </div>
+          {onPrevious && (
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="size-8"
+                    onClick={onPrevious}
+                    disabled={prevDisabled}
+                    aria-label={m.testcase_peek_prevCase()}
+                  />
+                }
+              >
+                <ChevronUp className="size-4" />
+              </TooltipTrigger>
+              <TooltipContent>{m.testcase_peek_prevCase()}</TooltipContent>
+            </Tooltip>
+          )}
+          {onNext && (
+            <Tooltip>
+              <TooltipTrigger
+                render={
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="size-8"
+                    onClick={onNext}
+                    disabled={nextDisabled}
+                    aria-label={m.testcase_peek_nextCase()}
+                  />
+                }
+              >
+                <ChevronDown className="size-4" />
+              </TooltipTrigger>
+              <TooltipContent>{m.testcase_peek_nextCase()}</TooltipContent>
+            </Tooltip>
+          )}
+        </>
+      )}
+
+      <div className="ml-auto flex items-center gap-1.5">
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8"
+          onClick={handleOpenDetail}
+          data-testid="peek-open-detail"
+        >
+          {m.testcase_peek_openDetail()}
+          <ExternalLink className="size-3.5" />
+        </Button>
+      </div>
+    </div>
+  );
+
+  const body = (
+    <div
+      className="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto px-8 pb-8"
+      style={{ scrollbarGutter: "stable" } as React.CSSProperties}
+    >
+      {/* ① 标题区 */}
+      <div className="pt-2">
+        <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>
+      </div>
+
+      {/* ② 前置条件 */}
+      <section data-testid="peek-precondition">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          {m.testcase_peek_precondition()}
+        </h3>
+        <p className="mt-1.5 whitespace-pre-wrap text-sm">
+          {caseItem.precondition ?? "—"}
+        </p>
+      </section>
+
+      {/* ③ 测试步骤：序号 + action + expected */}
+      <section data-testid="peek-steps">
+        <h3 className="text-sm font-medium text-muted-foreground">{m.testcase_peek_steps()}</h3>
+        <ol className="mt-2 space-y-2.5">
+          {caseItem.steps.steps.map((step) => (
+            <li
+              key={step.order}
+              data-testid={`peek-step-row-${step.order}`}
+              className="flex gap-2.5 text-sm"
+            >
+              <span className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-full bg-muted text-xs text-muted-foreground">
+                {step.order}
+              </span>
+              <div className="min-w-0">
+                <div className="whitespace-pre-wrap">{step.action}</div>
+                {step.expected && (
+                  <div className="mt-0.5 text-xs text-muted-foreground">
+                    {m.testcase_peek_expected()}：{step.expected}
+                  </div>
+                )}
+              </div>
+            </li>
+          ))}
+        </ol>
+      </section>
+
+      {/* ④ 属性 */}
+      <section data-testid="peek-properties">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          {m.testcase_peek_properties()}
+        </h3>
+        <dl className="mt-2 grid grid-cols-[5rem_1fr] gap-x-4 gap-y-1.5 text-sm">
+          <dt className="text-muted-foreground">{m.testcase_filter_type()}</dt>
+          <dd>{typeLabel(caseItem.type)}</dd>
+          <dt className="text-muted-foreground">{m.testcase_filter_priority()}</dt>
+          <dd>{priorityLabel(caseItem.priority)}</dd>
+          <dt className="text-muted-foreground">{m.testcase_filter_state()}</dt>
+          <dd>{stateLabel(caseItem.state)}</dd>
+          <dt className="text-muted-foreground">{m.testcase_peek_assignee()}</dt>
+          <dd>{caseItem.assignee?.username ?? "—"}</dd>
+          <dt className="text-muted-foreground">{m.testcase_peek_folder()}</dt>
+          <dd>{folderName}</dd>
+        </dl>
+      </section>
+
+      {/* ⑤ 关联需求链接 */}
+      <section data-testid="peek-related-story">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          {m.testcase_peek_relatedStory()}
+        </h3>
+        <div className="mt-1.5">
+          {caseItem.storyId ? (
+            <Link
+              to="/stories/$storyId"
+              params={{ storyId: caseItem.storyId }}
+              data-testid="peek-story-link"
+              className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
+            >
+              {m.testcase_peek_viewStory()}
+              <ExternalLink className="size-3.5" />
+            </Link>
+          ) : (
+            <span className="text-sm text-muted-foreground">—</span>
+          )}
+        </div>
+      </section>
+
+      {/* ⑥ 最近执行（P1 空态：执行数据 P2 才有） */}
+      <section data-testid="peek-recent-runs">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          {m.testcase_peek_recentRuns()}
+        </h3>
+        <p className="mt-1.5 text-sm text-muted-foreground">{m.testcase_peek_noRuns()}</p>
+      </section>
+    </div>
+  );
+
+  if (isSidePeek) {
+    return (
+      <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"
+        onClick={(e) => {
+          // 仅拦截本容器 DOM 内的点击（防止冒泡到列表背景误关 peek）。
+          // Radix/Base UI 弹层 portal 到 body、不在本容器 DOM 内，其合成事件冒泡会
+          // 经过这里，若 stopPropagation 会同时终止原生 click 冒泡到 document，
+          // 导致 DismissableLayer 的 outside-dismiss 判定失效（弹窗内 popover 无法关闭）。
+          if (!e.currentTarget.contains(e.target as Node)) return;
+          e.stopPropagation();
+        }}
+      >
+        {header}
+        {body}
+      </div>
+    );
+  }
+
+  return (
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      <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]}`}
+        initialFocus={false}
+      >
+        {header}
+        {body}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/testcase/plans/add-to-plan-bar.tsx

@@ -0,0 +1,64 @@
+// 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/>.
+
+// 用例列表多选批处理条（任务 13 圈选入口，照 bug-list batch-toolbar 最小裁剪）：
+// 已选计数 + 「加入计划」+ 清除选择。选中数 >0 时浮现于工具栏下方。
+import { BrushCleaning, ClipboardList } from "lucide-react";
+import { Button } from "@allbluecn/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@allbluecn/ui/tooltip";
+import { m } from "@/paraglide/messages.js";
+
+interface AddToPlanBarProps {
+  selectedCount: number;
+  busy?: boolean;
+  onAddToPlan: () => void;
+  onClearSelection: () => void;
+}
+
+export function AddToPlanBar({ selectedCount, busy, onAddToPlan, onClearSelection }: AddToPlanBarProps) {
+  if (selectedCount === 0) return null;
+  return (
+    <div data-testid="add-to-plan-bar" className="flex h-9 shrink-0 items-center gap-2 rounded-md border border-border bg-background px-3">
+      <span className="shrink-0 text-xs text-muted-foreground">
+        {m.testcase_plan_batch_selected({ count: selectedCount })}
+      </span>
+      <div className="mx-1 h-4 w-px bg-border" />
+      <Button size="sm" className="h-7 gap-1.5" disabled={busy} onClick={onAddToPlan}>
+        <ClipboardList className="size-3.5" />
+        {m.testcase_plan_batch_addToPlan()}
+      </Button>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <Button
+              variant="ghost"
+              size="icon"
+              aria-label={m.testcase_plan_batch_clear()}
+              className="size-7 text-muted-foreground hover:text-foreground"
+              onClick={onClearSelection}
+            />
+          }
+        >
+          <BrushCleaning className="size-4" />
+        </TooltipTrigger>
+        <TooltipContent side="top" className="text-xs">
+          {m.testcase_plan_batch_clear()}
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  );
+}

package/src/components/testcase/plans/add-to-plan-dialog.tsx

@@ -0,0 +1,146 @@
+// 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/>.
+
+// 圈选加入计划对话框（任务 13）：用例列表多选后选择目标 active 计划。
+// 提交走 addCasesToPlanFn（幂等：重复/非 approved/不存在由服务端跳过并返回明细），
+// 结果按 added/skipped 分档 toast（部分跳过给明细文案）。
+import { useEffect, useState } from "react";
+import { Button } from "@allbluecn/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@allbluecn/ui/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@allbluecn/ui/select";
+import { addCasesToPlanFn, listPlansFn } from "@/server/serverFns/testcase/plans";
+import type { TestPlanSummary } from "@/server/serverFns/testcase/types";
+import { toast } from "@allbluecn/ui/toast";
+import { m } from "@/paraglide/messages.js";
+import { toastError } from "@/lib/toast-error";
+
+interface AddToPlanDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  caseIds: string[];
+  projectId: string | undefined;
+  /** 成功（added>0）后回调：父组件清空多选 */
+  onAdded: () => void;
+}
+
+export function AddToPlanDialog({ open, onOpenChange, caseIds, projectId, onAdded }: AddToPlanDialogProps) {
+  const [plans, setPlans] = useState<TestPlanSummary[]>([]);
+  const [loaded, setLoaded] = useState(false);
+  const [planId, setPlanId] = useState<string>("");
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setPlanId("");
+    let cancelled = false;
+    listPlansFn({ data: { projectId, state: "active" } })
+      .then(({ items }) => {
+        if (cancelled) return;
+        setPlans(items);
+        setLoaded(true);
+      })
+      .catch(() => {
+        if (!cancelled) setLoaded(true);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [open, projectId]);
+
+  const submit = async () => {
+    if (!planId || busy || caseIds.length === 0) return;
+    setBusy(true);
+    try {
+      const result = await addCasesToPlanFn({ data: { planId, caseIds } });
+      const target = plans.find((p) => p.id === planId);
+      onOpenChange(false);
+      if (result.added > 0 && result.skipped.length === 0) {
+        toast.success(
+          m.testcase_plan_add_success({ count: result.added, name: target?.name ?? "" }),
+        );
+      } else if (result.added > 0) {
+        toast.warning(
+          m.testcase_plan_add_partial({ added: result.added, skipped: result.skipped.length }),
+        );
+      } else {
+        toast.warning(
+          m.testcase_plan_add_partial({ added: 0, skipped: result.skipped.length }),
+        );
+      }
+      if (result.added > 0) onAdded();
+    } catch (e) {
+      toastError(e, m.testcase_plan_add_failed());
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !busy && onOpenChange(v)}>
+      <DialogContent className="sm:max-w-sm">
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            void submit();
+          }}
+        >
+          <DialogHeader>
+            <DialogTitle>{m.testcase_plan_add_dialogTitle()}</DialogTitle>
+          </DialogHeader>
+          <div className="flex flex-col gap-3 py-2">
+            {loaded && plans.length === 0 ? (
+              <p className="text-sm text-muted-foreground">{m.testcase_plan_add_empty()}</p>
+            ) : (
+              <Select value={planId} onValueChange={(v) => setPlanId(v ?? "")}>
+                <SelectTrigger className="w-full" aria-label={m.testcase_plan_add_dialogTitle()}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {plans.map((p) => (
+                    <SelectItem key={p.id} value={p.id}>
+                      {p.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            )}
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={busy}>
+              {m.common_button_cancel()}
+            </Button>
+            <Button type="submit" disabled={!planId || busy || plans.length === 0}>
+              {m.testcase_plan_add_submit()}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}