@allbluecn/web-app 0.5.0 → 0.6.0

package/src/components/story/inline-editors/__tests__/state-editor.test.tsx

@@ -0,0 +1,174 @@
+// 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/>.
+
+const MockResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};
+if (typeof globalThis.ResizeObserver === "undefined") {
+  (globalThis as any).ResizeObserver = MockResizeObserver;
+}
+
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { StateEditor } from "../state-editor";
+
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+vi.mock("@/lib/utils", () => ({
+  cn: (...args: string[]) => args.filter(Boolean).join(" "),
+}));
+
+function renderEditor(props: Partial<React.ComponentProps<typeof StateEditor>>) {
+  return render(
+    <TooltipProvider>
+      <StateEditor value="todo" onChange={vi.fn()} {...props} />
+    </TooltipProvider>,
+  );
+}
+
+function getPopoverDialog() {
+  return document.querySelector("[role=dialog]") as HTMLElement | null;
+}
+
+function getOptionButtons() {
+  const dialog = getPopoverDialog();
+  if (!dialog) return [];
+  return [...dialog.querySelectorAll("button")];
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("StateEditor", () => {
+  it("chip variant 渲染当前 state 的 label 作为 chip", () => {
+    renderEditor({ value: "in_progress" });
+    expect(screen.getByText("state.in_progress")).toBeInTheDocument();
+  });
+
+  it("todo 状态渲染对应 chip", () => {
+    renderEditor({ value: "todo" });
+    expect(screen.getByText("state.todo")).toBeInTheDocument();
+  });
+
+  it("backlog 状态渲染对应 chip", () => {
+    renderEditor({ value: "backlog" });
+    expect(screen.getByText("state.backlog")).toBeInTheDocument();
+  });
+
+  it("点击 chip 打开 Popover 显示所有可选 state", async () => {
+    render(
+      <TooltipProvider>
+        <StateEditor value="todo" onChange={vi.fn()} />
+      </TooltipProvider>,
+    );
+    fireEvent.click(screen.getByText("state.todo"));
+    expect(getPopoverDialog()).not.toBeNull();
+    const buttons = getOptionButtons();
+    expect(buttons.map((b) => b.textContent)).toEqual(
+      expect.arrayContaining([
+        expect.stringContaining("state.backlog"),
+        expect.stringContaining("state.todo"),
+        expect.stringContaining("state.in_progress"),
+        expect.stringContaining("state.done"),
+        expect.stringContaining("state.cancelled"),
+      ]),
+    );
+  });
+
+  it("点击不同 state 触发 onChange 并关闭 Popover", async () => {
+    const onChange = vi.fn();
+    render(
+      <TooltipProvider>
+        <StateEditor value="todo" onChange={onChange} />
+      </TooltipProvider>,
+    );
+    fireEvent.click(screen.getByText("state.todo"));
+    expect(getPopoverDialog()).not.toBeNull();
+    const buttons = getOptionButtons();
+    const doneBtn = buttons.find((b) => b.textContent?.includes("state.done"));
+    fireEvent.click(doneBtn!);
+    expect(onChange).toHaveBeenCalledWith("done");
+    expect(getPopoverDialog()).toBeNull();
+  });
+
+  it("已选中的 state 在 Popover 中带 Check 图标（active 类）", () => {
+    render(
+      <TooltipProvider>
+        <StateEditor value="done" onChange={vi.fn()} />
+      </TooltipProvider>,
+    );
+    fireEvent.click(screen.getByText("state.done"));
+    expect(getPopoverDialog()).not.toBeNull();
+    const checkedBtn = getOptionButtons().find((b) => {
+      return b.textContent?.includes("state.done") && b.className.includes("font-medium");
+    });
+    expect(checkedBtn).toBeTruthy();
+  });
+
+  describe("multi 模式", () => {
+    it("selected 为空时显示当前 state 的 chip", () => {
+      renderEditor({ mode: "multi", selected: [] });
+      expect(screen.getByText("state.todo")).toBeInTheDocument();
+    });
+
+    it("selected 有值时渲染对应 state 的多个 chip", () => {
+      renderEditor({ mode: "multi", selected: ["todo", "in_progress"], onMultiChange: vi.fn() });
+      expect(screen.getByText("state.todo")).toBeInTheDocument();
+      expect(screen.getByText("state.in_progress")).toBeInTheDocument();
+    });
+
+    it("点击 multi 选项触发 onMultiChange 而非 onChange", () => {
+      const onChange = vi.fn();
+      const onMultiChange = vi.fn();
+      render(
+        <TooltipProvider>
+          <StateEditor
+            value="todo"
+            mode="multi"
+            selected={["todo"]}
+            onChange={onChange}
+            onMultiChange={onMultiChange}
+          />
+        </TooltipProvider>,
+      );
+      fireEvent.click(screen.getByText("state.todo"));
+      expect(getPopoverDialog()).not.toBeNull();
+      const buttons = getOptionButtons();
+      const targetBtn = buttons.find((b) => b.textContent?.includes("state.in_progress"));
+      fireEvent.click(targetBtn!);
+      expect(onMultiChange).toHaveBeenCalledWith("in_progress");
+      expect(onChange).not.toHaveBeenCalled();
+      expect(getPopoverDialog()).not.toBeNull();
+    });
+  });
+
+  it("variant=button 时渲染 InlineTrigger（无 chip 边框）", () => {
+    renderEditor({ variant: "button", value: "todo" });
+    expect(screen.getByText("state.todo")).toBeInTheDocument();
+    // InlineTrigger 走 Button，外层无 chip 边框（span.border-border 不存在）
+    const chip = screen.getByText("state.todo").closest("span.border-border");
+    expect(chip).toBeNull();
+  });
+});

package/src/components/story/inline-editors/dependency-type-select.tsx

@@ -0,0 +1,180 @@
+// 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/>.
+
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Check, Waypoints } from "lucide-react";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Button, buttonVariants } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { DEPENDENCY_TYPE_OPTIONS, type DependencyTypeOption } from "../constants";
+import { cn } from "@/lib/utils";
+
+const OPTION_GROUPS = ["dependsOn", "dependents"] as const;
+
+/** 按选项配置渲染图标（旋转角度来自 constants 的 iconRotation，用内联 style 避免 JIT 动态类名） */
+function OptionIcon({
+  option,
+  className,
+}: {
+  option: DependencyTypeOption;
+  className?: string;
+}) {
+  return (
+    <option.icon
+      className={cn("size-3.5 shrink-0 text-muted-foreground", className)}
+      style={{
+        transform:
+          option.iconRotation ? `rotate(${option.iconRotation}deg)` : undefined,
+      }}
+    />
+  );
+}
+
+interface DependencyTypeSelectProps {
+  /** 当前选中的依赖类型（受控） */
+  value?: DependencyTypeOption["key"];
+  onChange: (key: DependencyTypeOption["key"]) => void;
+  /** trigger=按钮形态（添加依赖弹窗底部）；badge=行内标签形态（依赖列表就地编辑） */
+  variant?: "trigger" | "badge";
+  /** badge 形态：Badge 文案中插值的对方需求编号 */
+  identifier?: string;
+  /** badge 形态：tooltip 中当前需求编号（传入才使用 tooltips 文案，否则用 labels） */
+  currentIdentifier?: string;
+  /** Popover 开合（受控，Dialog 嵌套场景由外部持有以便统一外部点击关闭） */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+}
+
+export function DependencyTypeSelect({
+  value,
+  onChange,
+  variant = "trigger",
+  identifier,
+  currentIdentifier,
+  open: openProp,
+  onOpenChange,
+  className,
+}: DependencyTypeSelectProps) {
+  const { t } = useTranslation("story");
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const open = openProp ?? uncontrolledOpen;
+  const handleOpenChange = (next: boolean) => {
+    if (openProp === undefined) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  };
+  const current = value
+    ? DEPENDENCY_TYPE_OPTIONS.find((o) => o.key === value)
+    : undefined;
+
+  const content = (
+    <PopoverContent align="start" className="w-80 p-1">
+      {OPTION_GROUPS.map((group, gi) => (
+        <div key={group} className={cn(gi > 0 && "mt-1 border-t pt-1")}>
+          <p className="px-2 py-1 text-xs font-medium text-muted-foreground">
+            {t(`dependency.optionGroups.${group}`)}
+          </p>
+          {DEPENDENCY_TYPE_OPTIONS.filter((o) => o.group === group).map((opt) => {
+            const checked = value === opt.key;
+            return (
+              <button
+                key={opt.key}
+                type="button"
+                onClick={() => {
+                  onChange(opt.key);
+                  handleOpenChange(false);
+                }}
+                className={cn(
+                  "flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-muted",
+                  checked && "font-medium",
+                )}
+              >
+                <OptionIcon option={opt} />
+                <span className="flex-1">{t(opt.optionLabelKey)}</span>
+                {checked && <Check className="size-3.5 shrink-0 text-primary" />}
+              </button>
+            );
+          })}
+        </div>
+      ))}
+    </PopoverContent>
+  );
+
+  if (variant === "badge") {
+    const tooltipKey = current
+      ? currentIdentifier
+        ? current.tooltipLabelKey
+        : current.badgeLabelKey
+      : null;
+    return (
+      <Popover open={open} onOpenChange={handleOpenChange}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <PopoverTrigger asChild>
+              {/* 行打开按钮是 button，此处必须用 span 复刻 Button 样式（button 嵌 button 会 hydration 报错） */}
+              <span
+                className={cn(
+                  buttonVariants({ variant: "outline", size: "sm" }),
+                  "h-7 max-w-56 gap-1 rounded-md px-2 text-xs font-normal",
+                  className,
+                )}
+                onClick={(e) => e.stopPropagation()}
+              >
+                {current && <OptionIcon option={current} />}
+                <span className="truncate">
+                  {current
+                    ? t(current.badgeLabelKey, { identifier: identifier ?? "" })
+                    : t("dependency.typePlaceholder")}
+                </span>
+              </span>
+            </PopoverTrigger>
+          </TooltipTrigger>
+          {tooltipKey && (
+            <TooltipContent side="top" className="text-xs">
+              {t(tooltipKey, {
+                identifier: identifier ?? "",
+                me: currentIdentifier ?? "",
+              })}
+            </TooltipContent>
+          )}
+        </Tooltip>
+        {content}
+      </Popover>
+    );
+  }
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="ghost"
+          size="sm"
+          className={cn("h-9 gap-1.5", !value && "text-muted-foreground", className)}
+        >
+          {current ? (
+            <OptionIcon option={current} className="text-current" />
+          ) : (
+            <Waypoints className="size-3.5" />
+          )}
+          {current ? t(current.optionLabelKey) : t("dependency.typePlaceholder")}
+        </Button>
+      </PopoverTrigger>
+      {content}
+    </Popover>
+  );
+}

package/src/components/story/inline-editors/index.ts

@@ -21,4 +21,5 @@ export { AssigneeEditor } from "./assignee-editor";
 export { DateEditor } from "./date-editor";
 export { LabelsEditor } from "./labels-editor";
 export { TitleEditor } from "./title-editor";
-export { ParentStoryEditor } from "./parent-story-editor";
+export { ParentStoryEditor } from "./parent-story-editor";
+export { DependencyTypeSelect } from "./dependency-type-select";

package/src/components/story/inline-editors/labels-editor.tsx

@@ -16,10 +16,14 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useState } from "react";
-import { Tag, Check } from "lucide-react";
+import { Tag, Check, Loader2, Sparkles } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Checkbox } from "@/components/ui/checkbox";
 import { cn } from "@/lib/utils";
+import { useSession } from "@/lib/auth/auth-client";
+import { toast } from "sonner";
+import { createLabelFn, suggestStoryLabelsFn } from "@/server/serverFns/story";
 import { InlineTrigger } from "./inline-trigger";
 
 interface LabelsEditorProps {
@@ -28,13 +32,29 @@ interface LabelsEditorProps {
   onChange: (labelIds: string[]) => void;
   mode?: "single" | "multi";
   className?: string;
-  /** 渲染形态：chip=有值时显示 chip 列表（默认，筛选场景），button=始终 Button（列表/详情场景） */
   variant?: "chip" | "button";
+  aiContext?: { name: () => string; description?: () => string | undefined };
 }
 
-export function LabelsEditor({ labelIds, labels, onChange, mode = "multi", className, variant = "chip" }: LabelsEditorProps) {
+type AiPanel =
+  | { phase: "idle" }
+  | { phase: "loading" }
+  | {
+      phase: "done";
+      existingLabels: { id: string; name: string; color: string }[];
+      newNames: string[];
+    }
+  | { phase: "error" };
+
+export function LabelsEditor({ labelIds, labels, onChange, mode = "multi", className, variant = "chip", aiContext }: LabelsEditorProps) {
   const { t } = useTranslation("story");
   const [open, setOpen] = useState(false);
+  const { data: session } = useSession();
+  const hasAiKey = session?.user?.hasAiKey ?? false;
+  const [ai, setAi] = useState<AiPanel>({ phase: "idle" });
+  const [selectedExisting, setSelectedExisting] = useState<string[]>([]);
+  const [selectedNew, setSelectedNew] = useState<string[]>([]);
+  const aiEnabled = !!aiContext && hasAiKey;
   const isMulti = mode === "multi";
   const showChip = variant === "chip";
 
@@ -43,6 +63,10 @@ export function LabelsEditor({ labelIds, labels, onChange, mode = "multi", class
       ? labelIds.map((id) => labels.find((l) => l.id === id)?.name).filter(Boolean).join("、")
       : t("inline.notSelected");
 
+  const currentNames = labelIds
+    .map((id) => labels.find((l) => l.id === id)?.name)
+    .filter(Boolean) as string[];
+
   const toggle = (id: string) => {
     if (isMulti) {
       const next = labelIds.includes(id)
@@ -55,6 +79,51 @@ export function LabelsEditor({ labelIds, labels, onChange, mode = "multi", class
     }
   };
 
+  const generateAiSuggestions = async () => {
+    if (!aiContext) return;
+    const name = aiContext.name().trim();
+    if (!name) {
+      toast.error(t("inline.aiNeedName"));
+      return;
+    }
+    setAi({ phase: "loading" });
+    try {
+      const result = await suggestStoryLabelsFn({
+        data: {
+          name,
+          description: aiContext.description?.() || undefined,
+          currentLabelNames: currentNames,
+        },
+      });
+      if (result.existingLabels.length === 0 && result.newNames.length === 0) {
+        setAi({ phase: "error" });
+        toast.error(t("inline.aiEmpty"));
+        return;
+      }
+      setAi({ phase: "done", ...result });
+      setSelectedExisting(result.existingLabels.map((l) => l.id));
+      setSelectedNew(result.newNames);
+    } catch (e) {
+      setAi({ phase: "error" });
+      toast.error(e instanceof Error ? e.message : t("inline.aiFailed"));
+    }
+  };
+
+  const applyAiSuggestions = async () => {
+    if (ai.phase !== "done") return;
+    const newIds: string[] = [];
+    for (const name of selectedNew) {
+      const created = await createLabelFn({ data: { name } });
+      newIds.push(created.id);
+    }
+    const merged = Array.from(new Set([...labelIds, ...selectedExisting, ...newIds]));
+    onChange(merged);
+    toast.success(t("inline.aiApplied", { count: merged.length - labelIds.length }));
+    setAi({ phase: "idle" });
+    setSelectedExisting([]);
+    setSelectedNew([]);
+  };
+
   return (
     <Popover open={open} onOpenChange={setOpen}>
       {showChip && labelIds.length > 0 ? (
@@ -113,6 +182,93 @@ export function LabelsEditor({ labelIds, labels, onChange, mode = "multi", class
             );
           })
         )}
+        {aiEnabled && (
+          <div className="border-t border-border mt-1 pt-1">
+            {ai.phase === "idle" && (
+              <button
+                type="button"
+                onClick={generateAiSuggestions}
+                className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs text-muted-foreground hover:bg-muted"
+              >
+                <Sparkles className="size-3.5" />
+                {t("inline.aiGenerate")}
+              </button>
+            )}
+            {ai.phase === "loading" && (
+              <div className="flex items-center gap-2 px-2 py-1.5 text-xs text-muted-foreground">
+                <Loader2 className="size-3.5 animate-spin" />
+                {t("inline.aiLoading")}
+              </div>
+            )}
+            {(ai.phase === "done" || ai.phase === "error") && (
+              <div className="max-h-44 overflow-y-auto p-1">
+                {ai.phase === "error" ? (
+                  <div className="px-1 py-1.5 text-xs text-destructive">{t("inline.aiFailed")}</div>
+                ) : (
+                  <>
+                    {ai.existingLabels.map((l) => (
+                      <div
+                        key={l.id}
+                        className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs hover:bg-muted cursor-pointer"
+                        onClick={() =>
+                          setSelectedExisting((prev) =>
+                            prev.includes(l.id) ? prev.filter((x) => x !== l.id) : [...prev, l.id],
+                          )
+                        }
+                      >
+                        <Checkbox checked={selectedExisting.includes(l.id)} />
+                        <span className="inline-block size-2.5 rounded-full shrink-0" style={{ backgroundColor: l.color }} />
+                        {l.name}
+                      </div>
+                    ))}
+                    {ai.newNames.map((n) => (
+                      <div
+                        key={n}
+                        className="flex w-full items-center gap-2 rounded px-2 py-1.5 text-xs hover:bg-muted cursor-pointer"
+                        onClick={() =>
+                          setSelectedNew((prev) =>
+                            prev.includes(n) ? prev.filter((x) => x !== n) : [...prev, n],
+                          )
+                        }
+                      >
+                        <Checkbox checked={selectedNew.includes(n)} />
+                        <span className="rounded-sm border border-dashed border-primary/60 px-1 text-[10px] leading-none text-primary">
+                          {t("inline.aiNew")}
+                        </span>
+                        {n}
+                      </div>
+                    ))}
+                    <div className="flex items-center gap-1 pt-1">
+                      <button
+                        type="button"
+                        onClick={applyAiSuggestions}
+                        className="rounded bg-primary px-2 py-1 text-xs text-primary-foreground"
+                      >
+                        {t("inline.aiApply")}
+                      </button>
+                      <button
+                        type="button"
+                        onClick={generateAiSuggestions}
+                        className="rounded px-2 py-1 text-xs text-muted-foreground hover:bg-muted"
+                      >
+                        {t("inline.aiRegenerate")}
+                      </button>
+                    </div>
+                  </>
+                )}
+                {ai.phase === "error" && (
+                  <button
+                    type="button"
+                    onClick={generateAiSuggestions}
+                    className="mt-1 w-full rounded px-2 py-1 text-xs text-muted-foreground hover:bg-muted"
+                  >
+                    {t("inline.aiRegenerate")}
+                  </button>
+                )}
+              </div>
+            )}
+          </div>
+        )}
       </PopoverContent>
     </Popover>
   );