@allbluecn/web-app 0.18.2 → 0.19.0

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

@@ -16,10 +16,13 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useState } from "react";
-import { Plus, Search, Trees, ChevronRight, ChevronDown, Archive, MoreHorizontal, MessagesSquare, Upload, Download } from "lucide-react";
+import { ChevronDown, Archive, MessagesSquare, Upload } 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 { 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 {
   DropdownMenu,
   DropdownMenuContent,
@@ -39,6 +42,7 @@ import { CreateProjectDialog } from "@/components/project/create-project-dialog"
 import type { UserBrief } from "./types";
 import { m } from "@/paraglide/messages.js";
 import { useToolbarSearch } from "@/hooks/use-toolbar-search";
+import { cn } from "@/lib/utils";
 
 export interface StoryFilters {
   projectId?: string;
@@ -76,7 +80,9 @@ export function StoryToolbar({ filters, filterConditions, onFilterChange, onFilt
     onSearch: (search) => onFilterChange({ ...filters, search }),
   });
   const [projectOpen, setProjectOpen] = useState(false);
-  const [projectHover, setProjectHover] = useState(false);
+  // 紧凑档（行宽 <920）：驱动「更多」菜单的添加需求项（菜单 portal 到 body，
+  // 脱离 @container 祖先后容器查询类失效，须 JS 判定）
+  const { ref: toolbarRowRef, compact } = useToolbarCompact();
   const [filterVisible, setFilterVisible] = useState(false);
   const [createProjectOpen, setCreateProjectOpen] = useState(false);
 
@@ -96,96 +102,130 @@ export function StoryToolbar({ filters, filterConditions, onFilterChange, onFilt
     onArchiveAll?.();
   };
 
+  // 项目按钮展示文案：按钮、Tooltip 共用（Tooltip 替代被禁用的 HTML title 属性）
+  const projectLabel = filters.projectId === "__archived__"
+    ? m.story_toolbar_archived()
+    : filters.projectId
+      ? (projects.find((p) => p.id === filters.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">
-        <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" />
-               ) : (
-                 <Trees className="size-4 text-muted-foreground" />
-               )}
-               {filters.projectId === "__archived__" ? m.story_toolbar_archived() : filters.projectId ? (projects.find((p) => p.id === filters.projectId)?.name ?? m.story_toolbar_project()) : m.story_toolbar_allProjects()}
-            </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">
-                <Trees 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={() => { 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.story_toolbar_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.story_toolbar_createProject()}
-            </button>
+    <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.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={() => { 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 />
+                <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.story_toolbar_archived()}
+                  </span>
+                </button>
+                <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>
+          <ViewSelectorButton
+            views={views}
+            activeViewId={activeViewId}
+            projects={projects}
+            onApplyView={onApplyView}
+            onAddView={onAddView}
+          />
+          <span className="shrink-0 text-xs text-muted-foreground @max-[1100px]:hidden">{m.story_toolbar_total({ count: total })}</span>
+        </>
+      }
+      search={
+        <>
+          <SEARCH_ICON 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.story_toolbar_searchPlaceholder()}
+            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" title={m.story_toolbar_searchPlaceholder()} />}>
+            <SEARCH_ICON className="size-4 text-muted-foreground" />
+          </PopoverTrigger>
+          <PopoverContent className="w-60 p-2" align="center">
+            <div className="relative">
+              <SEARCH_ICON className="absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground pointer-events-none" />
+              <Input
+                autoFocus
+                value={localSearch}
+                onChange={(e) => handleSearchChange(e.target.value)}
+                placeholder={m.story_toolbar_searchPlaceholder()}
+                className="h-8 w-full pl-8 text-sm md:text-sm"
+              />
+            </div>
           </PopoverContent>
         </Popover>
-        {projectHover || projectOpen ? <ChevronDown className="size-4 text-muted-foreground" /> : <ChevronRight className="size-4 text-muted-foreground" />}
-        <ViewSelectorButton
-          views={views}
-          activeViewId={activeViewId}
-          projects={projects}
-          onApplyView={onApplyView}
-          onAddView={onAddView}
-        />
-
-        <span className="shrink-0 text-xs text-muted-foreground">{m.story_toolbar_total({ count: total })}</span>
-
-        <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.story_toolbar_searchPlaceholder()}
-              className="h-8 w-full pl-8"
-            />
-          </div>
-        </div>
-
-        <div className="flex items-center gap-2 shrink-0">
+      }
+      right={
+        <>
           <StoryFilterToggle
             visible={filterVisible}
             conditions={filterConditions}
@@ -205,14 +245,24 @@ export function StoryToolbar({ filters, filterConditions, onFilterChange, onFilt
             onAddView={onAddView}
           />
           <ViewSwitcher view={view} onViewChange={onViewChange} />
-          <Button size="sm" onClick={onCreateClick} className="h-8">
-            <Plus className="size-4" /> {m.story_toolbar_addStory()}
+          <Button size="sm" onClick={onCreateClick} className="h-8 @max-[920px]:hidden">
+            <CREATE_ICON className="size-4" /> <span>{m.story_toolbar_addStory()}</span>
           </Button>
           <DropdownMenu>
-            <DropdownMenuTrigger render={<Button variant="outline" size="icon" className="h-8 w-8" />}>
-                <MoreHorizontal className="size-4" />
-              </DropdownMenuTrigger>
+            <DropdownMenuTrigger render={<Button variant="outline" size="icon" className="h-8 w-8 @max-[920px]:border-transparent! @max-[920px]:bg-primary! @max-[920px]:text-primary-foreground! @max-[920px]:hover:bg-primary/80!" title={m.story_toolbar_addStory()} />}>
+              <MORE_ICON className="size-4 @max-[920px]:hidden" />
+              <CREATE_ICON className="size-4 hidden @max-[920px]:block" />
+            </DropdownMenuTrigger>
             <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.story_toolbar_addStory()}
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                </>
+              )}
               <DropdownMenuItem>
                 <MessagesSquare className="size-4 mr-2 h-6" />
                 {m.story_toolbar_collect()}
@@ -224,40 +274,41 @@ export function StoryToolbar({ filters, filterConditions, onFilterChange, onFilt
               {/* <Separator orientation="horizontal" data-horizontal className="-my-1" /> */}
               <DropdownMenuSeparator />
               <DropdownMenuItem>
-                <Download className="size-4 mr-2 h-6" />
+                <EXPORT_ICON className="size-4 mr-2 h-6" />
                 {m.story_toolbar_export()}
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
-        </div>
-      </div>
-
-      {filterVisible && (
-        <StoryFilterRow
-          conditions={filterConditions}
-          onChange={onFilterConditionsChange}
-          onClearAll={handleClearAllFilters}
-          onCancel={() => { onFilterConditionsChange([]); setFilterVisible(false); }}
-          onSaveAsView={onSaveAsView}
-          users={users}
-          labels={labels}
-        />
-      )}
-
-      <AppliedFilters
-        conditions={filterConditions}
-        onRemove={handleRemoveFilterCondition}
-        onClearAll={handleClearAllFilters}
-        onArchiveAll={handleArchiveAll}
-        users={users}
-        labels={labels}
-      />
-
-      <CreateProjectDialog
-        open={createProjectOpen}
-        onOpenChange={setCreateProjectOpen}
-        onSuccess={onProjectCreated}
-      />
-    </div>
+        </>
+      }
+      below={
+        <>
+          {filterVisible && (
+            <StoryFilterRow
+              conditions={filterConditions}
+              onChange={onFilterConditionsChange}
+              onClearAll={handleClearAllFilters}
+              onCancel={() => { onFilterConditionsChange([]); setFilterVisible(false); }}
+              onSaveAsView={onSaveAsView}
+              users={users}
+              labels={labels}
+            />
+          )}
+          <AppliedFilters
+            conditions={filterConditions}
+            onRemove={handleRemoveFilterCondition}
+            onClearAll={handleClearAllFilters}
+            onArchiveAll={handleArchiveAll}
+            users={users}
+            labels={labels}
+          />
+          <CreateProjectDialog
+            open={createProjectOpen}
+            onOpenChange={setCreateProjectOpen}
+            onSuccess={onProjectCreated}
+          />
+        </>
+      }
+    />
   );
-}
+}

package/src/components/story/transfer-story-popover.tsx

@@ -213,7 +213,7 @@ export function TransferStoryPopover({
                 })
               )}
             </div>
-            <Separator orientation="horizontal" data-horizontal className="-my-1" />
+            <Separator orientation="horizontal" data-horizontal />
             <div className="grid grid-cols-2 gap-1.5">
               <Button
                 type="button"

package/src/components/story/types.ts

@@ -151,10 +151,11 @@ export interface StoryAttachmentItem {
   fileHash?: string | null;
 }
 
-// PRD 简要信息
+// 设计简要信息（PRD 文档与 UI 画板同源 Design 表）
 export interface DesignBrief {
   id: string;
   title: string;
+  icon: string;
 }
 
 // 文档简要信息
@@ -188,7 +189,8 @@ export interface RelationsData {
 export type AssociatedItem =
   | { kind: "link"; data: StoryLinkItem }
   | { kind: "attachment"; data: StoryAttachmentItem }
-  | { kind: "doc"; data: DocBrief };
+  | { kind: "doc"; data: DocBrief }
+  | { kind: "design"; data: DesignBrief };
 
 // ====== 依赖关系（对齐 Plane，新模型） ======
 
@@ -206,3 +208,10 @@ export interface DependencyGroup {
   dependsOn: DependencyRow[]; // 此需求依赖的（对方领先，边 targetId = 我）
   dependents: DependencyRow[]; // 依赖此需求的（我领先，边 sourceId = 我）
 }
+
+// ====== Peek 面板内实体叠加层（用例/BUG 行的面板内打开） ======
+// case 携带列表行数据 + 面板已加载的模块树（实体 peek 属性区解析用）；
+// bug 由实体 peek 面板按 id 自取详情。
+export type StoryEntityOverlay =
+  | { kind: "case"; item: import("@/server/serverFns/testcase/types").TestCaseSummary; folders: import("@/components/testcase/folder-tree").FolderNodeDto[] }
+  | { kind: "bug"; id: string };