@allbluecn/web-app 0.18.2 → 0.19.0

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

@@ -15,21 +15,54 @@
 // 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/>.
 
+// BUG 列表顶部工具栏。任务 31：换 ToolbarShell 三列网格壳（story/testcase 消费
+// 先例同形态）——左簇项目 Popover（ghost+Tooltip，禁 HTML title）/保存视图选择器/
+// 总数（断点 640→1100）、中列居中搜索（≤530 图标按钮 + Popover 接管）、右簇筛选/
+// 显示/视图切换/新建/「更多」菜单；紧凑档（行宽 <920）新建收纳进菜单（portal 后
+// 容器查询失效，useToolbarCompact JS 判定），导出接 CSV 链路（任务 45：exportBugsFn
+// + Blob 下载，testcase 19 对称；bug 无其他低频入口——已归档在项目 Popover 内）。
 import { useState } from "react";
-import { Plus, Search, ChevronRight, ChevronDown, Archive, Bug as BugIcon } from "lucide-react";
+import { ChevronDown, Archive } 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 {
+  csvExportFileName,
+  downloadCsvFile,
+} from "@/components/shared-kit/list-kit/csv-download";
+import { exportBugsFn } from "@/server/serverFns/bug/bug-export";
+import { toast } from "@/components/ui/toast";
+import { toastError } from "@/lib/toast-error";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { Separator } from "@/components/ui/separator";
-import { BugFilterToggle, BugFilterRow, AppliedFilters, type FilterCondition } from "./filters";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+import { BugFilterToggle, BugFilterRow, AppliedFilters, serializeFilters, type FilterCondition } from "./filters";
 import { LucideIconByName } from "@/components/shared-kit/icons/lucide-icon-picker/lucide-icon-by-name";
 import { CreateProjectDialog } from "@/components/project/create-project-dialog";
 import { BugDisplayDropdown } from "./display/display-dropdown";
-import { BugViewSwitcher, type BugView } from "./views/view-switcher";
+import { BugViewSwitcher } from "./views/view-switcher";
+import { ViewSelectorButton } from "./views/view-selector-button";
+import type { BugView, BugViewModel } from "./views/view-types";
 import type { BugDisplayOptions } from "./display/types";
 import type { UserBrief } from "@/components/story/types";
 import { m } from "@/paraglide/messages.js";
+import { getLocale } from "@/paraglide/runtime.js";
 import { useToolbarSearch } from "@/hooks/use-toolbar-search";
+import { cn } from "@/lib/utils";
 
 export interface BugFilters {
   projectId?: string;
@@ -47,27 +80,63 @@ interface BugToolbarProps {
   total: number;
   onCreateClick: () => void;
   onProjectCreated?: () => void;
-  /** 视图布局（list/table）与显示选项下拉：由 bug-list-view 注入，缺席时隐藏对应控件 */
+  /** 视图布局（list|board，任务 34 定版）与显示选项下拉：由 bug-list-view 注入，缺席时隐藏对应控件 */
   view?: BugView;
   onViewChange?: (view: BugView) => void;
   displayFilters?: BugDisplayOptions;
   onDisplayOptionsChange?: (patch: Partial<BugDisplayOptions>) => void;
+  /** 保存视图（任务 30）：左簇选择器 + 显示下拉视图管理区 + 筛选条「存为视图」；
+   * views/handlers 缺席时隐藏对应控件（story-bugs-panel 等无视图场景零感知） */
+  views?: BugViewModel[];
+  activeViewId?: string;
+  onApplyView?: (view: BugViewModel) => void;
+  onEditView?: (view: BugViewModel) => void;
+  onDeleteView?: (view: BugViewModel) => void;
+  onAddView?: () => void;
+  onSaveAsView?: () => void;
 }
 
-export function BugToolbar({ filters, filterConditions, onFilterChange, onFilterConditionsChange, projects, users, labels, total, onCreateClick, onProjectCreated, view, onViewChange, displayFilters, onDisplayOptionsChange }: BugToolbarProps) {
+export function BugToolbar({ filters, filterConditions, onFilterChange, onFilterConditionsChange, projects, users, labels, total, onCreateClick, onProjectCreated, view, onViewChange, displayFilters, onDisplayOptionsChange, views, activeViewId, onApplyView, onEditView, onDeleteView, onAddView, onSaveAsView }: BugToolbarProps) {
   const { localSearch, handleSearchChange } = useToolbarSearch({
     externalValue: filters.search,
     onSearch: (search) => onFilterChange({ ...filters, search }),
   });
   const [projectOpen, setProjectOpen] = useState(false);
-  const [projectHover, setProjectHover] = useState(false);
   const [filterVisible, setFilterVisible] = useState(false);
   const [createProjectOpen, setCreateProjectOpen] = useState(false);
+  // 紧凑档（行宽 <920）：驱动「更多」菜单的新建项（菜单 portal 到 body，
+  // 脱离 @container 祖先后容器查询类失效，须 JS 判定）
+  const { ref: toolbarRowRef, compact } = useToolbarCompact();
 
   const handleFilterToggle = () => {
     setFilterVisible(!filterVisible);
   };
 
+  // ── CSV 导出（任务 45 BUG-F）：范围=当前 scope/筛选/搜索；__archived__ 归档
+  // 视图原样透传（服务端直达 buildListWhere 成员圈定）；busy 态防重复 ──
+  const [exporting, setExporting] = useState(false);
+  const handleExportCsv = async () => {
+    if (exporting) return;
+    setExporting(true);
+    try {
+      const { csv, truncated } = await exportBugsFn({
+        data: {
+          projectId: filters.projectId,
+          filters: serializeFilters(filterConditions),
+          search: filters.search,
+          locale: getLocale(),
+        },
+      });
+      downloadCsvFile(csv, csvExportFileName("bugs"));
+      // 上限截断提示（R10）：csv 已含前 20000 行，如实告知未全量
+      if (truncated) toast.warning(m.list_kit_export_truncated());
+    } catch (e) {
+      toastError(e, m.list_kit_export_failed());
+    } finally {
+      setExporting(false);
+    }
+  };
+
   const handleRemoveFilterCondition = (id: string) => {
     onFilterConditionsChange(filterConditions.filter((c) => c.id !== id));
   };
@@ -76,128 +145,211 @@ export function BugToolbar({ filters, filterConditions, onFilterChange, onFilter
     onFilterConditionsChange([]);
   };
 
-  return (
-    <div className="flex flex-col gap-3">
-      <div className="flex items-center gap-2">
-        <Popover open={projectOpen} onOpenChange={setProjectOpen}>
-          <PopoverTrigger render={<Button variant="outline" size="sm" className="h-8 gap-1.5 border-0 px-2.5 text-sm font-medium shrink-0 hover:bg-muted" onMouseEnter={() => setProjectHover(true)} onMouseLeave={() => setProjectHover(false)} />}>
-               {filters.projectId === "__archived__" ? (
-                 <Archive className="size-4 text-muted-foreground" />
-               ) : filters.projectId ? (
-                 <LucideIconByName name={projects.find((p) => p.id === filters.projectId)?.icon ?? ""} size={16} className="text-muted-foreground" />
-               ) : (
-                 <BugIcon className="size-4 text-muted-foreground" />
-               )}
-               {filters.projectId === "__archived__" ? m.bug_list_archived() : filters.projectId ? (projects.find((p) => p.id === filters.projectId)?.name ?? m.bug_toolbar_project()) : m.bug_toolbar_all_projects()}
-            </PopoverTrigger>
-          <PopoverContent className="w-56 p-1" align="start">
-            <div className="[&>button+button]:mt-1">
-            <button
-              type="button"
-              onClick={() => { onFilterChange({ ...filters, projectId: undefined }); setProjectOpen(false); }}
-              className={`flex w-full items-center justify-between gap-2 rounded px-2 py-1.5 text-sm ${!filters.projectId ? "bg-accent font-medium" : "hover:bg-muted"}`}
-            >
-              <span className="flex items-center gap-2">
-                <BugIcon className="size-4 text-muted-foreground" />
-                {m.bug_toolbar_all_projects()}
-              </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={() => { onFilterChange({ ...filters, projectId: p.id }); setProjectOpen(false); }}
-                 className={`flex w-full items-center justify-between gap-2 rounded px-2 py-1.5 text-sm ${filters.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 className="-my-1.5" />
-             <button
-               type="button"
-               onClick={() => { onFilterChange({ ...filters, projectId: "__archived__" }); setProjectOpen(false); }}
-               className={`flex w-full items-center justify-between gap-2 rounded px-2 py-1.5 text-sm ${filters.projectId === "__archived__" ? "bg-accent font-medium" : "hover:bg-muted"}`}
-             >
-<span className="flex items-center gap-2">
-                  <Archive className="size-4 text-muted-foreground" />
-                  {m.bug_list_archived()}
-                </span>
-             </button>
-             <Separator orientation="horizontal" data-horizontal className="-my-1.5" />
-            <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"
-            >
-              <Plus className="size-4" />
-              {m.bug_toolbar_create_project()}
-            </button>
-          </PopoverContent>
-        </Popover>
-        {projectHover || projectOpen ? <ChevronDown className="size-4 text-muted-foreground" /> : <ChevronRight className="size-4 text-muted-foreground" />}
+  // 项目按钮展示文案：按钮、Tooltip 共用（Tooltip 替代被禁用的 HTML title 属性）
+  const projectLabel = filters.projectId === "__archived__"
+    ? m.bug_list_archived()
+    : filters.projectId
+      ? (projects.find((p) => p.id === filters.projectId)?.name ?? m.bug_toolbar_project())
+      : m.bug_toolbar_all_projects();
 
-        <span className="shrink-0 text-xs text-muted-foreground">{m.bug_toolbar_total({ count: total })}</span>
+  return (
+    <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" />} />}>
+                  {filters.projectId === "__archived__" ? (
+                    <Archive className="size-4 shrink-0 text-muted-foreground" />
+                  ) : filters.projectId ? (
+                    <LucideIconByName name={projects.find((p) => p.id === filters.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={() => { onFilterChange({ ...filters, projectId: undefined }); setProjectOpen(false); }}
+                    className={`flex w-full items-center justify-between gap-2 rounded px-2 py-1.5 text-sm ${!filters.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.bug_toolbar_all_projects()}
+                    </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={() => { onFilterChange({ ...filters, projectId: p.id }); setProjectOpen(false); }}
+                      className={`flex w-full items-center justify-between gap-2 rounded px-2 py-1.5 text-sm ${filters.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 className="-my-1.5" />
+                <button
+                  type="button"
+                  onClick={() => { onFilterChange({ ...filters, projectId: "__archived__" }); setProjectOpen(false); }}
+                  className={`flex w-full items-center justify-between gap-2 rounded px-2 py-1.5 text-sm ${filters.projectId === "__archived__" ? "bg-accent font-medium" : "hover:bg-muted"}`}
+                >
+                  <span className="flex items-center gap-2">
+                    <Archive className="size-4 text-muted-foreground" />
+                    {m.bug_list_archived()}
+                  </span>
+                </button>
+                <Separator orientation="horizontal" data-horizontal className="-my-1.5" />
+                <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.bug_toolbar_create_project()}
+                </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 className="relative flex flex-[1_0_auto] justify-center">
-          <div className="relative w-60">
-            <Search className="absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground pointer-events-none" />
-            <Input
-              value={localSearch}
-              onChange={(e) => handleSearchChange(e.target.value)}
-              placeholder={m.bug_list_search_placeholder()}
-              className="h-8 w-full pl-8"
+          {/* 保存视图选择器（任务 30，testcase 同位：项目按钮之后、总数之前） */}
+          {views && activeViewId !== undefined && onApplyView && onEditView && onDeleteView && onAddView && (
+            <ViewSelectorButton
+              views={views}
+              activeViewId={activeViewId}
+              onApplyView={onApplyView}
+              onEditView={onEditView}
+              onDeleteView={onDeleteView}
+              onAddView={onAddView}
             />
-          </div>
-        </div>
+          )}
 
-        <div className="flex items-center gap-2 shrink-0">
+          <span className="shrink-0 text-xs text-muted-foreground @max-[1100px]:hidden">{m.bug_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.bug_list_search_placeholder()}
+            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.bug_list_search_placeholder()} />}>
+            <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.bug_list_search_placeholder()}
+                className="h-8 w-full pl-8 text-sm md:text-sm"
+              />
+            </div>
+          </PopoverContent>
+        </Popover>
+      }
+      right={
+        <>
           <BugFilterToggle
             visible={filterVisible}
             conditions={filterConditions}
             onToggle={handleFilterToggle}
           />
           {displayFilters && onDisplayOptionsChange && (
-            <BugDisplayDropdown filters={displayFilters} onChange={onDisplayOptionsChange} />
+            <BugDisplayDropdown
+              filters={displayFilters}
+              onChange={onDisplayOptionsChange}
+              views={views}
+              activeViewId={activeViewId}
+              onApplyView={onApplyView}
+              onEditView={onEditView}
+              onDeleteView={onDeleteView}
+              onAddView={onAddView}
+            />
           )}
           {view && onViewChange && <BugViewSwitcher view={view} onViewChange={onViewChange} />}
-          <Button size="sm" onClick={onCreateClick} className="h-8">
-            <Plus className="size-4" /> {m.bug_list_new_bug()}
+          <Button size="sm" onClick={onCreateClick} className="h-8 @max-[920px]:hidden">
+            <CREATE_ICON className="size-4" /> <span>{m.bug_list_new_bug()}</span>
           </Button>
-        </div>
-      </div>
-
-      {filterVisible && (
-        <BugFilterRow
-          conditions={filterConditions}
-          onChange={onFilterConditionsChange}
-          onClearAll={handleClearAllFilters}
-          onCancel={() => { onFilterConditionsChange([]); setFilterVisible(false); }}
-          users={users}
-          labels={labels}
-        />
-      )}
-
-      <AppliedFilters
-        conditions={filterConditions}
-        onRemove={handleRemoveFilterCondition}
-        onClearAll={handleClearAllFilters}
-        users={users}
-        labels={labels}
-      />
-
-      <CreateProjectDialog
-        open={createProjectOpen}
-        onOpenChange={setCreateProjectOpen}
-        onSuccess={onProjectCreated}
-      />
-    </div>
+          <DropdownMenu>
+            <Tooltip>
+              <TooltipTrigger render={<DropdownMenuTrigger render={<Button variant="outline" size="icon" aria-label={m.list_kit_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.list_kit_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.bug_list_new_bug()}
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                </>
+              )}
+              {/* CSV 导出（任务 45 BUG-F）：范围=当前 scope/筛选/搜索；busy 禁用防重复 */}
+              <DropdownMenuItem disabled={exporting} onClick={handleExportCsv}>
+                <EXPORT_ICON className="size-4 mr-2 h-6" />
+                {m.list_kit_toolbar_export()}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </>
+      }
+      below={
+        <>
+          {filterVisible && (
+            <BugFilterRow
+              conditions={filterConditions}
+              onChange={onFilterConditionsChange}
+              onClearAll={handleClearAllFilters}
+              onCancel={() => { onFilterConditionsChange([]); setFilterVisible(false); }}
+              onSaveAsView={onSaveAsView}
+              users={users}
+              labels={labels}
+            />
+          )}
+          <AppliedFilters
+            conditions={filterConditions}
+            onRemove={handleRemoveFilterCondition}
+            onClearAll={handleClearAllFilters}
+            users={users}
+            labels={labels}
+          />
+          <CreateProjectDialog
+            open={createProjectOpen}
+            onOpenChange={setCreateProjectOpen}
+            onSuccess={onProjectCreated}
+          />
+        </>
+      }
+    />
   );
 }

package/src/components/bug/create-bug-dialog.tsx

@@ -198,7 +198,7 @@ export function CreateBugDialog({
       }}
     >
       <DialogContent
-        className="sm:max-w-200 -mt-30"
+        className="sm:max-w-[min(50rem,calc(100%-4rem))] max-w-[calc(100%-4rem)] max-h-[calc(100dvh-2rem)] [@media(min-height:64rem)]:-mt-50 overflow-y-auto"
         onKeyDown={(e) => {
           // 项目 Popover 展开时 Esc 只关 Popover，避免误关整个弹窗
           if (e.key === "Escape" && !loading && !projectOpen) onOpenChange(false);

package/src/components/bug/detail/__tests__/activity-timeline.test.tsx

@@ -71,6 +71,7 @@ const comment = (over: Partial<BugCommentWithReplies> = {}): BugCommentWithRepli
   createdAt: new Date(Date.now() - 60_000).toISOString(),
   updatedAt: new Date(Date.now() - 60_000).toISOString(),
   user: USER,
+  reactions: [],
   replies: [],
   ...over,
 });