@allbluecn/web-app 0.17.1 → 0.18.0

package/src/components/testcase/ai/generate-dialog.tsx

@@ -0,0 +1,430 @@
+// 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/>.
+
+// AI 生成测试用例入口（任务 21）：选 Story（复用 story-select-dialog，skipTransfer
+// 先例同 create-testcase-dialog）+ 勾选关联知识库文档上下文（getLinkedDocsFn 拉取，
+// ext: 外部文档不进上下文，服务端另有 5 篇/8K 截断兜底）+ 进度态。
+// 进度态机制：startGenerationFn 是同步长请求（服务端等待 AI 完成后返回终态
+// completed|failed，见 generation.ts——run 先建 running 落库但响应只含终态），
+// 故无需轮询 getGenerationFn，await 期间 loading、返回 failed 展示 error + 重试。
+// 门控：useFeature("testGeneration") 紧凑渲染（harness SandboxPolicyControl 先例）——
+// locked 显示禁用按钮 + 行内升级提示（非 UpgradePrompt 大卡片），unavailable 收敛
+// 紧凑文案。完成跳评审占位路由 /test-cases/generation/$generationId（任务 22 接管）。
+import { useEffect, useState } from "react";
+import { ArrowRight, CircleUser, Link2, Sparkles, X } from "lucide-react";
+import { Link, useNavigate } from "@tanstack/react-router";
+import { Button } from "@allbluecn/ui/button";
+import { Checkbox } from "@allbluecn/ui/checkbox";
+import { Spinner } from "@/components/ui/spinner";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@allbluecn/ui/dialog";
+import { toast } from "@allbluecn/ui/toast";
+import { useFeature } from "@/components/billing/use-feature";
+import { isChina } from "@/lib/deploy-region";
+import { startGenerationFn } from "@/server/serverFns/testcase/generation";
+import { getLinkedDocsFn } from "@/server/serverFns/story";
+import { listProjectsBriefFn } from "@/server/serverFns/project";
+import { StorySelectDialog } from "@/components/story/inline-editors/story-select-dialog";
+import { m } from "@/paraglide/messages.js";
+
+interface ProjectBrief {
+  id: string;
+  name: string;
+  displayId?: string | null;
+  icon: string;
+}
+
+interface LinkedDocBrief {
+  id: string;
+  title: string;
+  kbId: string;
+  kbName: string;
+}
+
+interface GenerateTestCasesDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** StorySelectDialog 项目花名册（需求详情 preset 入口不需要） */
+  projects: ProjectBrief[];
+  /** 作用域项目：透传 StorySelectDialog initialProjectId 做选 Story 预过滤 */
+  projectId?: string | null;
+  /** 需求详情入口预选（不可更换）；工具栏入口为空 → 内嵌选择 */
+  presetStory?: { id: string } | null;
+  onCompleted?: () => void;
+}
+
+/** 服务端 max(5) 对齐：上下文文档勾选上限 */
+const KB_DOC_MAX = 5;
+
+export function GenerateTestCasesDialog({
+  open,
+  onOpenChange,
+  projects,
+  projectId,
+  presetStory,
+  onCompleted,
+}: GenerateTestCasesDialogProps) {
+  const navigate = useNavigate();
+  const [storyId, setStoryId] = useState<string | null>(null);
+  const [storySelectOpen, setStorySelectOpen] = useState(false);
+  const [kbEnabled, setKbEnabled] = useState(false);
+  const [linkedDocs, setLinkedDocs] = useState<LinkedDocBrief[]>([]);
+  const [selectedDocIds, setSelectedDocIds] = useState<Set<string>>(() => new Set());
+  const [docsLoading, setDocsLoading] = useState(false);
+  const [docsError, setDocsError] = useState("");
+  const [generating, setGenerating] = useState(false);
+  const [errorText, setErrorText] = useState("");
+
+  // 每次打开重置（create-testcase-dialog 惯例）；详情入口固定预选
+  useEffect(() => {
+    if (!open) return;
+    setStoryId(presetStory?.id ?? null);
+    setStorySelectOpen(false);
+    setKbEnabled(false);
+    setLinkedDocs([]);
+    setSelectedDocIds(new Set());
+    setDocsLoading(false);
+    setDocsError("");
+    setGenerating(false);
+    setErrorText("");
+  }, [open, presetStory?.id]);
+
+  // 勾选知识库上下文后拉取需求关联文档（plain 文档；ext: 外部文档非
+  // knowledgeDocument 实体，buildKbContext 不识别，客户端直接过滤）
+  useEffect(() => {
+    if (!open || !kbEnabled || !storyId) return;
+    let cancelled = false;
+    setDocsLoading(true);
+    setDocsError("");
+    getLinkedDocsFn({ data: { storyId } })
+      .then((rows) => {
+        if (cancelled) return;
+        const plain = rows
+          .filter((r) => !r.kbId.startsWith("ext:"))
+          .slice(0, KB_DOC_MAX)
+          .map((r) => ({ id: r.id, title: r.title, kbId: r.kbId, kbName: r.kbName }));
+        setLinkedDocs(plain);
+        // 默认全选（≤5 篇），用户可逐篇取消
+        setSelectedDocIds(new Set(plain.map((d) => d.id)));
+      })
+      .catch(() => {
+        if (cancelled) return;
+        setLinkedDocs([]);
+        setSelectedDocIds(new Set());
+        setDocsError(m.testcase_gen_kbLoadFailed());
+      })
+      .finally(() => {
+        if (!cancelled) setDocsLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [open, kbEnabled, storyId]);
+
+  const toggleDoc = (docId: string, checked: boolean) => {
+    setSelectedDocIds((prev) => {
+      const next = new Set(prev);
+      if (checked) next.add(docId);
+      else next.delete(docId);
+      return next;
+    });
+  };
+
+  const handleStart = async () => {
+    if (!storyId || generating) return;
+    const kbDocIds =
+      kbEnabled && selectedDocIds.size > 0 ? [...selectedDocIds].slice(0, KB_DOC_MAX) : undefined;
+    setGenerating(true);
+    setErrorText("");
+    try {
+      const res = await startGenerationFn({
+        data: kbDocIds ? { storyId, kbDocIds } : { storyId },
+      });
+      if (res.run.status === "failed") {
+        // 服务端降级返回 failed run（不抛错）：展示 error + 重试（重发同载荷）
+        setErrorText(res.run.error || m.testcase_gen_failed());
+        return;
+      }
+      toast.success(m.testcase_gen_doneToast());
+      onOpenChange(false);
+      onCompleted?.();
+      navigate({
+        to: "/test-cases/generation/$generationId",
+        params: { generationId: res.run.id },
+      });
+    } catch (e) {
+      // 直接抛错路径（feature 未开通 / AI 未配置等）：展示后可改表单重发
+      setErrorText(e instanceof Error ? e.message : m.testcase_gen_failed());
+    } finally {
+      setGenerating(false);
+    }
+  };
+
+  return (
+    <>
+      <Dialog open={open} onOpenChange={(v) => !generating && onOpenChange(v)}>
+        <DialogContent className="sm:max-w-120" data-testid="testcase-gen-dialog">
+          <DialogHeader>
+            <DialogTitle className="text-xl">{m.testcase_gen_title()}</DialogTitle>
+          </DialogHeader>
+
+          <div className="space-y-3 overflow-y-auto px-1 py-1 max-h-[60vh]">
+            {/* 需求选择 */}
+            <div className="flex flex-wrap items-center gap-1.5">
+              {storyId ? (
+                <span
+                  className="inline-flex max-w-45 items-center gap-1 rounded-sm border border-border px-1.5 py-0.5 text-xs"
+                  data-testid="testcase-gen-storyLinked"
+                >
+                  <Link2 className="size-3 shrink-0 text-muted-foreground" />
+                  <span className="truncate">{m.testcase_gen_storyLinked()}</span>
+                  {!presetStory && (
+                    <button
+                      type="button"
+                      aria-label={m.testcase_gen_clearStory()}
+                      className="shrink-0 rounded-sm p-0.5 text-muted-foreground hover:bg-muted hover:text-foreground"
+                      onClick={() => setStoryId(null)}
+                    >
+                      <X className="size-3" />
+                    </button>
+                  )}
+                </span>
+              ) : (
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="h-6 gap-1 border-0 bg-muted/50 px-1.5 text-xs text-muted-foreground"
+                  disabled={generating}
+                  data-testid="testcase-gen-pickStory"
+                  onClick={() => setStorySelectOpen(true)}
+                >
+                  <CircleUser className="size-3" />
+                  {m.testcase_gen_pickStory()}
+                </Button>
+              )}
+            </div>
+
+            {/* 知识库上下文勾选 */}
+            <div className="space-y-1.5">
+              <label className="flex items-center gap-2 text-sm">
+                <Checkbox
+                  checked={kbEnabled}
+                  onCheckedChange={(c) => setKbEnabled(c === true)}
+                  disabled={generating || !storyId}
+                  data-testid="testcase-gen-kbToggle"
+                />
+                {m.testcase_gen_kbToggle()}
+              </label>
+              {kbEnabled && storyId && (
+                <div className="space-y-1 rounded-md border bg-muted/30 p-2">
+                  <p className="text-xs text-muted-foreground">{m.testcase_gen_kbHint()}</p>
+                  {docsLoading && (
+                    <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                      <Spinner className="size-3" />
+                      {m.testcase_gen_kbLoading()}
+                    </p>
+                  )}
+                  {docsError && <p className="text-xs text-destructive">{docsError}</p>}
+                  {!docsLoading && !docsError && linkedDocs.length === 0 && (
+                    <p className="text-xs text-muted-foreground">{m.testcase_gen_kbEmpty()}</p>
+                  )}
+                  {linkedDocs.map((doc) => (
+                    <label key={doc.id} className="flex items-center gap-2 text-xs">
+                      <Checkbox
+                        checked={selectedDocIds.has(doc.id)}
+                        onCheckedChange={(c) => toggleDoc(doc.id, c === true)}
+                        data-testid={`testcase-gen-kbDoc-${doc.id}`}
+                      />
+                      <span className="truncate" title={doc.title}>
+                        《{doc.kbName}》{doc.title}
+                      </span>
+                    </label>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            {/* 进度态：startGenerationFn 同步长请求，await 期间即为 running */}
+            {generating && (
+              <div
+                className="flex items-center gap-2 rounded-md border bg-muted/30 p-3 text-sm text-muted-foreground"
+                data-testid="testcase-gen-running"
+              >
+                <Spinner className="size-4" />
+                <span>{m.testcase_gen_running()}</span>
+                <span className="text-xs">{m.testcase_gen_runningHint()}</span>
+              </div>
+            )}
+            {errorText && (
+              <p className="text-sm break-words text-destructive" data-testid="testcase-gen-error">
+                {errorText}
+              </p>
+            )}
+          </div>
+
+          <DialogFooter className="items-center gap-3">
+            <Button variant="outline" onClick={() => onOpenChange(false)} disabled={generating}>
+              {m.testcase_view_cancel()}
+            </Button>
+            {!generating && errorText && (
+              <Button
+                variant="outline"
+                onClick={() => void handleStart()}
+                data-testid="testcase-gen-retry"
+              >
+                {m.testcase_gen_retry()}
+              </Button>
+            )}
+            <Button
+              onClick={() => void handleStart()}
+              disabled={generating || !storyId}
+              data-testid="testcase-gen-start"
+            >
+              <Sparkles className="size-4" />
+              {m.testcase_gen_start()}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <StorySelectDialog
+        open={storySelectOpen}
+        onOpenChange={setStorySelectOpen}
+        storyId=""
+        projects={projects}
+        initialProjectId={projectId ?? null}
+        mode="parent"
+        skipTransfer
+        title={m.testcase_gen_pickStory()}
+        onSelected={(id) => {
+          if (typeof id === "string") setStoryId(id);
+        }}
+      />
+    </>
+  );
+}
+
+interface GenerateTestCasesButtonProps {
+  /** 工具栏入口传当前作用域项目（选 Story 预过滤；详情预选入口可不传） */
+  projectId?: string | null;
+  /** 需求详情入口：预选当前 story（打开即不可更换） */
+  presetStory?: { id: string } | null;
+  variant?: "outline" | "ghost" | "default" | "secondary";
+  className?: string;
+  /** 覆盖默认「AI 生成」文案（详情关联区用「生成测试用例」） */
+  label?: string;
+  onCompleted?: () => void;
+}
+
+/**
+ * 门控入口按钮（harness SandboxPolicyControl 紧凑先例）：
+ * loading/enabled → 可点按钮开生成对话框；locked → 禁用按钮 + 行内升级提示；
+ * unavailable（module 缺失）→ 紧凑文案。项目花名册点击打开时懒加载
+ * （convert-bug-button 先例，列表/详情页零预取成本）。
+ */
+export function GenerateTestCasesButton({
+  projectId,
+  presetStory,
+  variant = "outline",
+  className,
+  label,
+  onCompleted,
+}: GenerateTestCasesButtonProps) {
+  const { enabled, loading, unavailable } = useFeature("testGeneration");
+  const [open, setOpen] = useState(false);
+  const [projects, setProjects] = useState<ProjectBrief[] | null>(null);
+
+  useEffect(() => {
+    if (!open || projects) return;
+    let cancelled = false;
+    listProjectsBriefFn()
+      .then((rows) => {
+        if (!cancelled) setProjects(rows);
+      })
+      .catch(() => {
+        if (!cancelled) setProjects([]);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [open, projects]);
+
+  if (unavailable) {
+    return (
+      <span
+        className="text-xs text-muted-foreground"
+        data-testid="testcase-gen-unavailable"
+      >
+        {m.testcase_gen_unavailable()}
+      </span>
+    );
+  }
+
+  const locked = !loading && !enabled;
+  return (
+    <span className="inline-flex items-center gap-1.5">
+      <Button
+        variant={variant}
+        size="sm"
+        className={className}
+        disabled={locked}
+        data-testid="testcase-gen-entry"
+        onClick={() => setOpen(true)}
+      >
+        <Sparkles className="size-4" />
+        {label ?? m.testcase_toolbar_aiGenerate()}
+      </Button>
+      {locked && <LockedFeatureHint />}
+      <GenerateTestCasesDialog
+        open={open}
+        onOpenChange={setOpen}
+        projects={projects ?? []}
+        projectId={projectId}
+        presetStory={presetStory ?? null}
+        onCompleted={onCompleted}
+      />
+    </span>
+  );
+}
+
+/** locked 场景的紧凑升级提示（替代 UpgradePrompt 大卡片，适配工具栏行内布局） */
+function LockedFeatureHint() {
+  if (isChina()) {
+    return (
+      <span className="text-xs text-muted-foreground" data-testid="testcase-gen-locked-hint">
+        {m.billing_comingSoon()}
+      </span>
+    );
+  }
+  return (
+    <span className="inline-flex items-center text-xs text-muted-foreground" data-testid="testcase-gen-locked-hint">
+      <Link
+        to="/pricing"
+        className="inline-flex items-center gap-0.5 text-primary transition-colors hover:underline"
+      >
+        {m.testcase_gen_lockedHint()}
+        <ArrowRight className="size-3" />
+      </Link>
+    </span>
+  );
+}

package/src/components/testcase/automation/artifact-diff.tsx

@@ -0,0 +1,94 @@
+// 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/>.
+
+// 自动化产物 diff 视图（任务 30，简报口径最简实现）：code 等宽字体只读展示
+// （pre/code）+ 行数统计；真正的逐行新旧对比 YAGNI 后置（产物尚无「基线版本」
+// 概念，可比对象缺失）。复制走 navigator.clipboard，下载走 Blob URL + a[download]
+// （简报 Q4：不写 git），blob URL 随 code 变更重建、卸载回收。
+import { useEffect, useMemo, useState } from "react";
+import { Check, Copy, Download } from "lucide-react";
+import { Button } from "@allbluecn/ui/button";
+import { m } from "@/paraglide/messages.js";
+
+interface ArtifactDiffProps {
+  code: string;
+  /** 下载文件名（调用方由 targetPath/kind 推导） */
+  filename: string;
+}
+
+export function ArtifactDiff({ code, filename }: ArtifactDiffProps) {
+  const [copied, setCopied] = useState(false);
+  const blobUrl = useMemo(
+    () => URL.createObjectURL(new Blob([code], { type: "text/plain;charset=utf-8" })),
+    [code],
+  );
+  useEffect(() => () => URL.revokeObjectURL(blobUrl), [blobUrl]);
+  const lineCount = useMemo(() => code.split("\n").length, [code]);
+
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(code);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } catch {
+      // 剪贴板不可用（权限拒绝等）：静默失败，按钮回到常态即可
+    }
+  };
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-xs text-muted-foreground" data-testid="artifact-diff-lines">
+          {m.testcase_artifact_lines({ count: lineCount })}
+        </span>
+        <div className="flex items-center gap-1">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="h-7 gap-1 px-2 text-xs"
+            onClick={() => void copy()}
+            data-testid="artifact-copy"
+          >
+            {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
+            {copied ? m.testcase_artifact_copied() : m.testcase_artifact_copy()}
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="h-7 gap-1 px-2 text-xs"
+            // render 非 button 元素（a[download]）：Base UI 需显式 nativeButton=false
+            nativeButton={false}
+            render={
+              <a href={blobUrl} download={filename} data-testid="artifact-download">
+                <Download className="size-3.5" />
+                {m.testcase_artifact_download()}
+              </a>
+            }
+          />
+        </div>
+      </div>
+      <pre
+        className="max-h-96 overflow-auto rounded-md border bg-muted/30 p-3 font-mono text-xs leading-5"
+        data-testid="artifact-diff-code"
+      >
+        <code>{code}</code>
+      </pre>
+    </div>
+  );
+}