@allbluecn/web-app 0.18.2 → 0.19.0

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

@@ -15,6 +15,9 @@
 // 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/>.
 
+// 需求详情分类动作（PRD / UI / 测试用例 / BUG）。按钮组与弹窗拆分：
+// Buttons 供 toolbar 主行与溢出测量层共用（collapsedKeys 过滤收拢项），
+// Dialogs 受控 open 由 toolbar 持有——「更多」菜单代理打开与按钮直开同链路。
 import * as React from "react";
 import { m } from '@/paraglide/messages.js'
 import {
@@ -22,53 +25,94 @@ import {
   PenTool,
   Bug,
   FlaskConical,
-  CircleCheckBig,
-  Speech,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { SelectCasesDialog } from "@/components/testcase/detail/select-cases-dialog";
+import { BugSelectDialog } from "@/components/bug/select-bug-dialog";
 
-interface StoryDetailCategoryConfig {
-  key: string;
+export type StoryCategoryKey = "prd" | "ui" | "case" | "bug";
+
+export const STORY_CATEGORY_ITEMS: Array<{
+  key: StoryCategoryKey;
   label: () => string;
   icon: React.ComponentType<{ className?: string }>;
   tooltip: () => string;
-  placeholder: () => string;
-}
-
-const CATEGORIES: StoryDetailCategoryConfig[] = [
-  { key: "prd", label: m.story_categories_prd_label, icon: FileText, tooltip: m.story_categories_prd_tooltip, placeholder: m.story_categories_prd_placeholder },
-  { key: "ui", label: m.story_categories_ui_label, icon: PenTool, tooltip: m.story_categories_ui_tooltip, placeholder: m.story_categories_ui_placeholder },
-  { key: "bug", label: m.story_categories_bug_label, icon: Bug, tooltip: m.story_categories_bug_tooltip, placeholder: m.story_categories_bug_placeholder },
-  { key: "test-case", label: m.story_categories_testCase_label, icon: FlaskConical, tooltip: m.story_categories_testCase_tooltip, placeholder: m.story_categories_testCase_placeholder },
-  { key: "acceptance", label: m.story_categories_acceptance_label, icon: CircleCheckBig, tooltip: m.story_categories_acceptance_tooltip, placeholder: m.story_categories_acceptance_placeholder },
-  { key: "retro", label: m.story_categories_retro_label, icon: Speech, tooltip: m.story_categories_retro_tooltip, placeholder: m.story_categories_retro_placeholder },
+}> = [
+  { key: "prd", label: m.story_categories_prd_label, icon: FileText, tooltip: m.story_categories_prd_tooltip },
+  { key: "ui", label: m.story_categories_ui_label, icon: PenTool, tooltip: m.story_categories_ui_tooltip },
+  { key: "case", label: m.story_categories_testCase_label, icon: FlaskConical, tooltip: m.story_categories_testCase_tooltip },
+  { key: "bug", label: m.story_categories_bug_label, icon: Bug, tooltip: m.story_categories_bug_tooltip },
 ];
 
-export function StoryDetailCategories() {
+export function StoryDetailCategoryButtons({
+  onAction,
+  collapsedKeys,
+}: {
+  onAction: (key: StoryCategoryKey) => void;
+  /** 被收进「更多」的 key（不渲染，宽度让给可见项） */
+  collapsedKeys?: Set<StoryCategoryKey>;
+}) {
+  return (
+    <>
+      {STORY_CATEGORY_ITEMS.map((cat) => {
+        if (collapsedKeys?.has(cat.key)) return null;
+        return (
+          <React.Fragment key={cat.key}>
+            {cat.key === "case" && (
+              <span className="mx-0.5 h-4 w-px shrink-0 bg-muted-foreground/20" />
+            )}
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md"
+              title={cat.tooltip()}
+              data-testid={`story-categories-link-${cat.key}`}
+              onClick={() => onAction(cat.key)}
+            >
+              <cat.icon className="size-3.5 text-muted-foreground" />
+              {cat.label()}
+            </Button>
+          </React.Fragment>
+        );
+      })}
+    </>
+  );
+}
+
+export function StoryDetailCategoryDialogs({
+  storyId,
+  projectId,
+  active,
+  onOpenChange,
+  onLinked,
+  onBugLinked,
+}: {
+  storyId: string;
+  projectId: string | null;
+  /** 当前打开的分类弹窗（null = 全关） */
+  active: StoryCategoryKey | null;
+  onOpenChange: (active: StoryCategoryKey | null) => void;
+  /** 用例关联提交成功（toolbar bump 刷新用例面板） */
+  onLinked: () => void;
+  /** BUG 关联提交成功（刷新 BUG 面板） */
+  onBugLinked?: () => void;
+}) {
   return (
     <>
-      {CATEGORIES.map((cat) => (
-        <React.Fragment key={cat.key}>
-          {cat.key === "bug" && (
-            <span className="mx-0.5 h-4 w-px shrink-0 bg-muted-foreground/20" />
-          )}
-          <Popover>
-            <PopoverTrigger render={<Button variant="ghost"
-                size="sm"
-                className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md"
-                title={cat.tooltip()} />}>
-                <cat.icon className="size-3.5 text-muted-foreground" />
-                {cat.label()}
-              </PopoverTrigger>
-            <PopoverContent align="start" className="w-[320px] p-4">
-              <div className="text-sm text-muted-foreground">
-                {cat.placeholder()}
-              </div>
-            </PopoverContent>
-          </Popover>
-        </React.Fragment>
-      ))}
+      <SelectCasesDialog
+        open={active === "case"}
+        onOpenChange={(open) => onOpenChange(open ? "case" : null)}
+        storyId={storyId}
+        projectId={projectId}
+        onLinked={onLinked}
+      />
+      <BugSelectDialog
+        open={active === "bug"}
+        onOpenChange={(open) => onOpenChange(open ? "bug" : null)}
+        storyId={storyId}
+        projectId={projectId}
+        onLinked={() => onBugLinked?.()}
+      />
     </>
   );
-}
+}