@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/testcase/testcase-toolbar.tsx

@@ -15,62 +15,109 @@
 // 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 生成）。
-// 任务 9：视图切换改用 views/view-switcher（list↔table 保持筛选），新增保存视图
-// 选择器与 groupBy 维度选择（displayOptions.groupBy，任务 8 移交）。AI 生成按钮
-// （任务 21）：接通 ai/generate-dialog，testGeneration 门控紧凑渲染（harness 先例）。
-// 项目作用域由按钮自持（花名册懒加载），工具栏不再需要透传 projects。
-import { Plus, Search, Funnel, ClipboardList, ChartColumn } from "lucide-react";
+// 用例列表顶部工具栏。任务 19：换 ToolbarShell 三列网格壳（story-toolbar 消费
+// 先例）——左簇项目 Popover/视图选择器/总数、中列居中搜索（≤530 图标按钮 +
+// Popover 接管）、右簇视图切换/新建/更多；测试计划与项目统计入口收纳进「更多」
+// 菜单，导出接 CSV 链路（任务 45：exportTestCasesFn + Blob 下载，范围=当前
+// scope/筛选/搜索），AI 生成入口同收进菜单（A 案补丁：
+// useFeature 门控保留，锁定/模块缺失禁用）；任务 20：右簇挂 DisplayDropdown
+// （显示选项域，分组裸 Select 的正式补位）；任务 21：右簇首位挂 FilterToggle
+// （onToggleFilterBar 死 prop 起真），below 渲染 FilterRow + AppliedFilters
+// 取代旧 TestCaseFilterBar 三 Select——右簇达设计终态 4 元素。紧凑档（行宽
+// <920）新建收纳进菜单（portal 后容器查询失效，useToolbarCompact JS 判定）。
+import { useEffect, useState } from "react";
+import { ChevronDown, ClipboardList, ChartColumn, Sparkles } from "lucide-react";
+import {
+  ALL_PROJECTS_ICON,
+  CREATE_ICON,
+  EXPORT_ICON,
+  MORE_ICON,
+  SEARCH_ICON,
+} from "@/components/shared-kit/list-kit/icon-semantics";
+import { ToolbarShell, useToolbarCompact } from "@/components/shared-kit/list-kit/toolbar-shell";
+import { LucideIconByName } from "@/components/shared-kit/icons/lucide-icon-picker/lucide-icon-by-name";
+import { CreateProjectDialog } from "@/components/project/create-project-dialog";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { Separator } from "@/components/ui/separator";
 import { Link } from "@tanstack/react-router";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
-import { GenerateTestCasesButton } from "./ai/generate-dialog";
+import { useFeature } from "@/components/billing/use-feature";
+import { listProjectsBriefFn } from "@/server/serverFns/project";
+import {
+  GenerateTestCasesDialog,
+  type ProjectBrief,
+} from "./ai/generate-dialog";
 import {
-  TestCaseFilterBar,
-  hasActiveFilters,
-  type TestCaseFilterState,
+  AppliedFilters,
+  TestcaseFilterRow,
+  TestcaseFilterToggle,
+  serializeFilters,
+  type TestcaseFilterCondition,
 } from "./filters";
+import { exportTestCasesFn } from "@/server/serverFns/testcase/testcase-export";
+import {
+  csvExportFileName,
+  downloadCsvFile,
+} from "@/components/shared-kit/list-kit/csv-download";
+import { toast } from "@/components/ui/toast";
+import { toastError } from "@/lib/toast-error";
+import type { FolderNodeDto } from "./folder-tree";
+import type { UserBrief } from "@/components/story/types";
 import { ViewSelectorButton } from "./views/view-selector-button";
 import { ViewSwitcher } from "./views/view-switcher";
-import type { TestCaseGroupByOption, TestCaseSavedView, TestCaseViewType } from "./views/view-types";
+import { TestCaseDisplayDropdown } from "./display/display-dropdown";
+import type { TestCaseDisplayOptions } from "./display/field-configs";
+import type { TestCaseSavedView, TestCaseViewType } from "./views/view-types";
 import { m } from "@/paraglide/messages.js";
+import { getLocale } from "@/paraglide/runtime.js";
 import { useToolbarSearch } from "@/hooks/use-toolbar-search";
 
 /** 向后兼容别名（list-view 原导入名；类型与 TestCaseViewType 同一） */
 export type TestCaseView = TestCaseViewType;
 
-const GROUP_BY_OPTIONS: { value: TestCaseGroupByOption; label: () => string }[] = [
-  { value: "none", label: m.testcase_groupBy_none },
-  { value: "folder", label: m.testcase_groupBy_folder },
-  { value: "state", label: m.testcase_groupBy_state },
-  { value: "priority", label: m.testcase_groupBy_priority },
-];
-
 interface TestCaseToolbarProps {
   total: number;
-  /** 作用域项目（任务 21 审查接线）：透传 AI 生成入口做选 Story 预过滤 */
+  /** 作用域项目：项目选择 Popover 消费；undefined = 全部项目 */
   projectId?: string | null;
+  /** 项目花名册（任务 17）：项目选择 Popover 消费 */
+  projects: { id: string; name: string; displayId: string | null; icon: string }[];
+  /** 项目切换（任务 17）：传 undefined 表示全部项目聚合 scope */
+  onProjectChange: (projectId: string | undefined) => void;
+  /** 新建项目成功（任务 17）：页面侧刷新项目花名册 */
+  onProjectCreated?: () => void;
   search?: string;
-  filters: TestCaseFilterState;
+  /** 筛选条件（任务 21，FilterCondition 三段式；serializeFilters 后传 serverFn） */
+  filterConditions: TestcaseFilterCondition[];
+  /** 筛选行显隐 */
   filterBarVisible: boolean;
+  /** FilterToggle 消费（任务 19 死 prop 中间态自本任务起起真） */
   onToggleFilterBar: () => void;
   onSearchChange: (search: string | undefined) => void;
-  onFiltersChange: (filters: TestCaseFilterState) => void;
+  onFilterConditionsChange: (conditions: TestcaseFilterCondition[]) => void;
+  /** 成员花名册（assigneeId 字段值编辑器/chip 消费） */
+  users: UserBrief[];
+  /** 模块树花名册（folder 字段值编辑器/chip 消费，单项目 scope） */
+  folders: FolderNodeDto[];
+  /** 显示选项（任务 20）：DisplayDropdown 消费 + 变更回调 */
+  displayFilters: TestCaseDisplayOptions;
+  onDisplayOptionsChange: (patch: Partial<TestCaseDisplayOptions>) => void;
   view: TestCaseViewType;
   onViewChange: (view: TestCaseViewType) => void;
-  groupBy: TestCaseGroupByOption;
-  onGroupByChange: (groupBy: TestCaseGroupByOption) => void;
   views: TestCaseSavedView[];
   activeViewId: string;
   onApplyView: (view: TestCaseSavedView) => void;
+  onEditView: (view: TestCaseSavedView) => void;
+  onDeleteView: (view: TestCaseSavedView) => void;
   onAddView: () => void;
   onCreateClick: () => void;
 }
@@ -78,19 +125,26 @@ interface TestCaseToolbarProps {
 export function TestCaseToolbar({
   total,
   projectId,
+  projects,
+  onProjectChange,
+  onProjectCreated,
   search,
-  filters,
+  filterConditions,
   filterBarVisible,
   onToggleFilterBar,
   onSearchChange,
-  onFiltersChange,
+  onFilterConditionsChange,
+  users,
+  folders,
+  displayFilters,
+  onDisplayOptionsChange,
   view,
   onViewChange,
-  groupBy,
-  onGroupByChange,
   views,
   activeViewId,
   onApplyView,
+  onEditView,
+  onDeleteView,
   onAddView,
   onCreateClick,
 }: TestCaseToolbarProps) {
@@ -99,72 +153,273 @@ export function TestCaseToolbar({
     onSearch: onSearchChange,
     transform: (value) => value.trim() || undefined,
   });
+  // ── 项目选择 Popover（任务 17，story-toolbar 同款）──
+  const [projectOpen, setProjectOpen] = useState(false);
+  const [createProjectOpen, setCreateProjectOpen] = useState(false);
+  // 紧凑档（行宽 <920）：驱动「更多」菜单的新建项（菜单 portal 到 body，
+  // 脱离 @container 祖先后容器查询类失效，须 JS 判定）
+  const { ref: toolbarRowRef, compact } = useToolbarCompact();
+  // ── AI 生成入口（任务 19 A 案补丁：原右簇按钮收进「更多」菜单，收纳不删除）──
+  // 门控与懒加载花名册照 GenerateTestCasesButton 原语义：锁定/模块缺失 → 菜单项
+  // 禁用；点击开弹窗时才拉项目花名册（列表/详情页零预取成本）
+  const {
+    enabled: genEnabled,
+    loading: genLoading,
+    unavailable: genUnavailable,
+  } = useFeature("testGeneration");
+  const genLocked = !genLoading && !genEnabled;
+  const [genOpen, setGenOpen] = useState(false);
+  const [genProjects, setGenProjects] = useState<ProjectBrief[] | null>(null);
+  // ── CSV 导出（任务 45 TC-E）：导出范围=当前 scope/筛选/搜索；busy 态防重复 ──
+  const [exporting, setExporting] = useState(false);
+  const handleExportCsv = async () => {
+    if (exporting) return;
+    setExporting(true);
+    try {
+      const { csv, truncated } = await exportTestCasesFn({
+        data: {
+          projectId: projectId ?? undefined,
+          filters: serializeFilters(filterConditions),
+          search,
+          locale: getLocale(),
+        },
+      });
+      downloadCsvFile(csv, csvExportFileName("testcases"));
+      // 上限截断提示（R10）：csv 已含前 20000 行，如实告知未全量
+      if (truncated) toast.warning(m.list_kit_export_truncated());
+    } catch (e) {
+      toastError(e, m.list_kit_export_failed());
+    } finally {
+      setExporting(false);
+    }
+  };
+  useEffect(() => {
+    if (!genOpen || genProjects) return;
+    let cancelled = false;
+    listProjectsBriefFn()
+      .then((rows) => {
+        if (!cancelled) setGenProjects(rows);
+      })
+      .catch(() => {
+        if (!cancelled) setGenProjects([]);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [genOpen, genProjects]);
+  // 项目按钮展示文案：按钮、Tooltip 共用（Tooltip 替代被禁用的 HTML title 属性）
+  const projectLabel = projectId
+    ? (projects.find((p) => p.id === projectId)?.name ?? m.story_toolbar_project())
+    : m.story_toolbar_allProjects();
 
   return (
-    <div className="flex flex-col gap-3">
-      <div className="flex items-center gap-2">
-        <ViewSelectorButton
-          views={views}
-          activeViewId={activeViewId}
-          onApplyView={onApplyView}
-          onAddView={onAddView}
-        />
-
-        <span className="shrink-0 text-xs text-muted-foreground">{m.testcase_toolbar_total({ count: total })}</span>
-
-        <div className="relative flex flex-[1_0_auto] justify-center">
-          <div className="relative w-60">
-            <Search className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-            <Input
-              value={localSearch}
-              onChange={(e) => handleSearchChange(e.target.value)}
-              placeholder={m.testcase_toolbar_search()}
-              className="h-8 w-full pl-8"
-            />
+    <ToolbarShell
+      rowRef={toolbarRowRef}
+      left={
+        <>
+          <div className="group/project flex shrink-0 items-center gap-2">
+            <Popover open={projectOpen} onOpenChange={setProjectOpen}>
+              <Tooltip>
+                <TooltipTrigger render={<PopoverTrigger render={<Button variant="ghost" size="sm" className="h-8 max-w-48 shrink-0 justify-start gap-1.5 border-0 px-2.5 text-sm font-medium hover:bg-muted @max-[780px]:border @max-[780px]:border-border @max-[780px]:bg-background dark:@max-[780px]:border-input dark:@max-[780px]:bg-input/30 @max-[780px]:px-2" />} />}>
+                  {projectId ? (
+                    <LucideIconByName name={projects.find((p) => p.id === projectId)?.icon ?? ""} size={16} className="shrink-0 text-muted-foreground" />
+                  ) : (
+                    <ALL_PROJECTS_ICON className="size-4 shrink-0 text-muted-foreground" />
+                  )}
+                  <span className="truncate @max-[780px]:hidden">{projectLabel}</span>
+                </TooltipTrigger>
+                <TooltipContent>{projectLabel}</TooltipContent>
+              </Tooltip>
+              <PopoverContent className="w-56 p-1" align="start">
+                <div className="[&>button+button]:mt-1">
+                  <button
+                    type="button"
+                    onClick={() => { onProjectChange(undefined); setProjectOpen(false); }}
+                    className={`flex w-full items-center justify-between gap-2 rounded px-2 py-1.5 text-sm ${!projectId ? "bg-accent font-medium" : "hover:bg-muted"}`}
+                  >
+                    <span className="flex items-center gap-2">
+                      <ALL_PROJECTS_ICON className="size-4 text-muted-foreground" />
+                      {m.story_toolbar_allProjects()}
+                    </span>
+                    <span className="shrink-0 rounded-sm bg-muted px-1.5 py-0.5 text-[10px] font-normal text-muted-foreground">ALL</span>
+                  </button>
+                  {projects.map((p) => (
+                    <button
+                      key={p.id}
+                      type="button"
+                      onClick={() => { onProjectChange(p.id); setProjectOpen(false); }}
+                      className={`flex w-full items-center justify-between gap-2 rounded px-2 py-1.5 text-sm ${projectId === p.id ? "bg-accent font-medium" : "hover:bg-muted"}`}
+                    >
+                      <span className="flex min-w-0 items-center gap-2">
+                        <LucideIconByName name={p.icon} size={16} className="text-muted-foreground" />
+                        <span className="truncate">{p.name}</span>
+                      </span>
+                      {p.displayId && (
+                        <span className="shrink-0 rounded-sm bg-muted px-1.5 py-0.5 text-[10px] font-normal text-muted-foreground">{p.displayId}</span>
+                      )}
+                    </button>
+                  ))}
+                </div>
+                <Separator orientation="horizontal" data-horizontal />
+                <button
+                  type="button"
+                  onClick={() => { setProjectOpen(false); setCreateProjectOpen(true); }}
+                  className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-sm text-muted-foreground hover:bg-muted hover:text-foreground"
+                >
+                  <CREATE_ICON className="size-4" />
+                  {m.story_toolbar_createProject()}
+                </button>
+              </PopoverContent>
+            </Popover>
+            <ChevronDown className={cn("size-4 shrink-0 text-muted-foreground", projectOpen ? "rotate-0" : "-rotate-90 group-hover/project:rotate-0")} />
           </div>
-        </div>
 
-        <div className="flex shrink-0 items-center gap-2">
-          {/* 测试计划入口（任务 13）：计划列表独立路由 /test-cases/plans */}
-          <Button variant="ghost" size="sm" className="h-8 gap-1.5 px-2.5" render={<Link to="/test-cases/plans" />} nativeButton={false}>
-            <ClipboardList className="size-4" />
-            {m.testcase_plan_entry()}
-          </Button>
-          {/* 项目统计入口（任务 36，规格 §12 项目级统计页签）：/test-cases/stats 轻路由 */}
-          <Button variant="ghost" size="sm" className="h-8 gap-1.5 px-2.5" render={<Link to="/test-cases/stats" />} nativeButton={false}>
-            <ChartColumn className="size-4" />
-            {m.testcase_stats_entry()}
-          </Button>
-          <Button
-            variant="ghost"
-            size="sm"
-            className={cn("h-8 gap-1.5 px-2.5", (filterBarVisible || hasActiveFilters(filters)) && "text-primary")}
-            onClick={onToggleFilterBar}
-          >
-            <Funnel className="size-4" />
-            {m.testcase_toolbar_filter()}
-          </Button>
-          <Select value={groupBy ?? null} onValueChange={(v) => onGroupByChange((v ?? "none") as TestCaseGroupByOption)}>
-            <SelectTrigger aria-label={m.testcase_groupBy_label()} className="h-8 w-auto min-w-20 text-sm">
-              <SelectValue placeholder={m.testcase_groupBy_label()} />
-            </SelectTrigger>
-            <SelectContent>
-              {GROUP_BY_OPTIONS.map((g) => (
-                <SelectItem key={g.value} value={g.value}>
-                  {g.label()}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
+          <ViewSelectorButton
+            views={views}
+            activeViewId={activeViewId}
+            onApplyView={onApplyView}
+            onEditView={onEditView}
+            onDeleteView={onDeleteView}
+            onAddView={onAddView}
+          />
+
+          <span className="shrink-0 text-xs text-muted-foreground @max-[1100px]:hidden">{m.testcase_toolbar_total({ count: total })}</span>
+        </>
+      }
+      search={
+        <>
+          <SEARCH_ICON className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            value={localSearch}
+            onChange={(e) => handleSearchChange(e.target.value)}
+            placeholder={m.testcase_toolbar_search()}
+            className="h-8 w-full pl-8 text-sm md:text-sm"
+          />
+        </>
+      }
+      searchFallback={
+        /* 窄容器：搜索降级为图标按钮，输入框移入 Popover */
+        <Popover>
+          <PopoverTrigger render={<Button variant="outline" size="icon" className="hidden h-8 w-8 shrink-0 @max-[530px]:flex" aria-label={m.testcase_toolbar_search()} />}>
+            <SEARCH_ICON className="size-4 text-muted-foreground" />
+          </PopoverTrigger>
+          <PopoverContent className="w-60 p-2" align="center">
+            <div className="relative">
+              <SEARCH_ICON className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                autoFocus
+                value={localSearch}
+                onChange={(e) => handleSearchChange(e.target.value)}
+                placeholder={m.testcase_toolbar_search()}
+                className="h-8 w-full pl-8 text-sm md:text-sm"
+              />
+            </div>
+          </PopoverContent>
+        </Popover>
+      }
+      right={
+        <>
+          {/* 筛选开关（任务 21，story/bug 同位：右簇首位）；onToggleFilterBar
+              切换 below 的 FilterRow 显隐 */}
+          <TestcaseFilterToggle
+            visible={filterBarVisible}
+            conditions={filterConditions}
+            onToggle={onToggleFilterBar}
+          />
+          {/* 显示选项（任务 20）；projectId 供 resolveGroupKeys 做 folder 仅
+              单项目 scope 的下拉过滤（scope=all 隐藏「模块」项） */}
+          <TestCaseDisplayDropdown
+            filters={displayFilters}
+            onChange={onDisplayOptionsChange}
+            projectId={projectId ?? undefined}
+          />
           <ViewSwitcher view={view} onViewChange={onViewChange} />
-          <GenerateTestCasesButton projectId={projectId} variant="outline" className="h-8 gap-1.5" />
-          <Button size="sm" className="h-8" onClick={onCreateClick}>
-            <Plus className="size-4" />
-            {m.testcase_toolbar_newCase()}
+          <Button size="sm" onClick={onCreateClick} className="h-8 @max-[920px]:hidden">
+            <CREATE_ICON className="size-4" /> <span>{m.testcase_toolbar_newCase()}</span>
           </Button>
-        </div>
-      </div>
-      {filterBarVisible && <TestCaseFilterBar value={filters} onChange={onFiltersChange} />}
-    </div>
+          <DropdownMenu>
+            <Tooltip>
+              <TooltipTrigger render={<DropdownMenuTrigger render={<Button variant="outline" size="icon" aria-label={m.testcase_toolbar_more()} className="h-8 w-8 @max-[920px]:border-transparent! @max-[920px]:bg-primary! @max-[920px]:text-primary-foreground! @max-[920px]:hover:bg-primary/80!" />} />}>
+                <MORE_ICON className="size-4 @max-[920px]:hidden" />
+                <CREATE_ICON className="size-4 hidden @max-[920px]:block" />
+              </TooltipTrigger>
+              <TooltipContent>{m.testcase_toolbar_more()}</TooltipContent>
+            </Tooltip>
+            <DropdownMenuContent align="end" className="w-44 space-y-1.5 py-1.5">
+              {compact && (
+                <>
+                  <DropdownMenuItem onClick={onCreateClick}>
+                    <CREATE_ICON className="size-4 mr-2 h-6" />
+                    {m.testcase_toolbar_newCase()}
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                </>
+              )}
+              {/* 测试计划入口（任务 13）：计划列表独立路由 /test-cases/plans */}
+              <DropdownMenuItem render={<Link to="/test-cases/plans" />}>
+                <ClipboardList className="size-4 mr-2 h-6" />
+                {m.testcase_plan_entry()}
+              </DropdownMenuItem>
+              {/* 项目统计入口（任务 36，规格 §12 项目级统计页签）：/test-cases/stats 轻路由 */}
+              <DropdownMenuItem render={<Link to="/test-cases/stats" />}>
+                <ChartColumn className="size-4 mr-2 h-6" />
+                {m.testcase_stats_entry()}
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              {/* CSV 导出（任务 45 TC-E）：范围=当前 scope/筛选/搜索；busy 禁用防重复 */}
+              <DropdownMenuItem disabled={exporting} onClick={handleExportCsv}>
+                <EXPORT_ICON className="size-4 mr-2 h-6" />
+                {m.list_kit_toolbar_export()}
+              </DropdownMenuItem>
+              {/* AI 生成（A 案补丁）：门控锁定/模块缺失时禁用；onClick 开生成弹窗
+                  （弹窗本体挂 below，菜单关闭卸载内容树不影响弹窗存续） */}
+              <DropdownMenuItem
+                disabled={genLocked || genUnavailable}
+                onClick={() => setGenOpen(true)}
+              >
+                <Sparkles className="size-4 mr-2 h-6" />
+                {m.testcase_toolbar_aiGenerate()}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </>
+      }
+      below={
+        <>
+          {filterBarVisible && (
+            <TestcaseFilterRow
+              conditions={filterConditions}
+              onChange={onFilterConditionsChange}
+              onClearAll={() => onFilterConditionsChange([])}
+              onCancel={() => onFilterConditionsChange([])}
+              onSaveAsView={onAddView}
+              users={users}
+              folders={folders}
+              projectId={projectId ?? undefined}
+            />
+          )}
+          <AppliedFilters
+            conditions={filterConditions}
+            onRemove={(id) => onFilterConditionsChange(filterConditions.filter((c) => c.id !== id))}
+            onClearAll={() => onFilterConditionsChange([])}
+            users={users}
+            folders={folders}
+          />
+          {genOpen && genProjects && (
+            <GenerateTestCasesDialog
+              open={genOpen}
+              onOpenChange={setGenOpen}
+              projects={genProjects}
+              projectId={projectId}
+            />
+          )}
+          <CreateProjectDialog
+            open={createProjectOpen}
+            onOpenChange={setCreateProjectOpen}
+            onSuccess={onProjectCreated}
+          />
+        </>
+      }
+    />
   );
 }