@allbluecn/web-app 0.5.1 → 0.6.0

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>
   );

package/src/components/story/inline-editors/story-select-dialog.tsx

@@ -19,10 +19,10 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useDebouncedCallback, SEARCH_DEBOUNCE_MS } from "@/lib/pacer";
 import { cn } from "@/lib/utils";
-import { Search, Sprout, ChevronsUpDown, Check, Trees, ListFilter, Flag, Waypoints } from "lucide-react";
+import { Search, Sprout, ChevronsUpDown, Check, Trees, ListFilter, Flag } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Checkbox } from "@/components/ui/checkbox";
-import { ProjectIconDisplay } from "@/components/project/project-icon";
+import { LucideIconByName } from "@/components/shared/lucide-icon-picker/lucide-icon-by-name";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import {
@@ -50,11 +50,11 @@ import {
   STATE_LABEL,
   STORY_STATES,
   STORY_PRIORITIES,
-  DEPENDENCY_TYPE_OPTIONS,
   type StoryState,
   type DependencyTypeOption,
 } from "../constants";
 import { PriorityIcon } from "../priority-icon";
+import { DependencyTypeSelect } from "./dependency-type-select";
 
 interface ParentStoryItem {
   id: string;
@@ -63,6 +63,7 @@ interface ParentStoryItem {
   state: string;
   priority: string;
   projectId: string;
+  iteration?: { id: string; name: string } | null;
 }
 
 interface StorySelectDialogProps {
@@ -73,7 +74,7 @@ interface StorySelectDialogProps {
   initialProjectId?: string | null;
   defaultSelectedParentId?: string | null;
   defaultSelectedParentIds?: string[];
-  mode?: "parent" | "child" | "dependency";
+  mode?: "parent" | "child" | "dependency" | "iteration";
   onSelected: (parentId: string | string[]) => void;
   onActivities?: (activities: ActivityItem[]) => void;
   skipTransfer?: boolean;
@@ -115,7 +116,7 @@ export function StorySelectDialog({
 }: StorySelectDialogProps) {
   const { t } = useTranslation("story");
   const resolvedTitle = title ?? t("select.defaultTitle");
-  const isMulti = mode === "child" || mode === "dependency";
+  const isMulti = mode === "child" || mode === "dependency" || mode === "iteration";
   const [projectFilter, setProjectFilter] = useState<string>(ALL_PROJECTS);
   const [items, setItems] = useState<ParentStoryItem[]>([]);
   const [search, setSearch] = useState("");
@@ -480,7 +481,7 @@ export function StorySelectDialog({
                     >
                       {activeFilterProject ? (
                         <span className="flex items-center gap-1.5">
-                          <ProjectIconDisplay name={activeFilterProject.icon} size={14} />
+                          <LucideIconByName name={activeFilterProject.icon} size={14} />
                           <span className="truncate max-w-[80px]">{activeFilterProject.name}</span>
                         </span>
                       ) : (
@@ -524,7 +525,7 @@ export function StorySelectDialog({
                           }`}
                         >
                           <span className="flex min-w-0 items-center gap-2">
-                            <ProjectIconDisplay name={p.icon} size={14} />
+                            <LucideIconByName name={p.icon} size={14} />
                             <span className="min-w-0 flex-1 truncate">{p.name}</span>
                           </span>
                           {isActive && <Check className="size-3.5 shrink-0 text-primary" />}
@@ -621,9 +622,14 @@ export function StorySelectDialog({
                           <span className="shrink-0 font-mono text-xs text-muted-foreground">
                             {story.identifier}
                           </span>
-                          <span className="min-w-0 flex-1 truncate">
-                            {story.name}
-                          </span>
+                           <span className="min-w-0 flex-1 truncate">
+                             {story.name}
+                           </span>
+                           {mode === "iteration" && story.iteration && (
+                             <span className="shrink-0 text-[10px] text-muted-foreground">
+                               {t("iterations:editor.currentIteration")}: {story.iteration.name}
+                             </span>
+                           )}
                           {owner && (
                             <span className="shrink-0 rounded-sm bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
                               {owner.name}
@@ -675,55 +681,12 @@ export function StorySelectDialog({
                 {selectedCount > 0 ? t("select.selectedCount", { count: selectedCount }) : t("select.pleaseSelect")}
               </span>
               {mode === "dependency" && (
-                <Popover open={depPopoverOpen} onOpenChange={setDepPopoverOpen}>
-                  <PopoverTrigger asChild>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className={cn(
-                        "h-9 gap-1.5",
-                        !dependencyType && "text-muted-foreground",
-                      )}
-                    >
-                      <Waypoints className="size-3.5" />
-                      {dependencyType
-                        ? t(
-                            DEPENDENCY_TYPE_OPTIONS.find((o) => o.key === dependencyType)!
-                              .optionLabelKey,
-                          )
-                        : t("dependency.typePlaceholder")}
-                    </Button>
-                  </PopoverTrigger>
-                  <PopoverContent align="start" className="w-80 p-1">
-                    {(["dependsOn", "dependents"] as const).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 = dependencyType === opt.key;
-                          return (
-                            <button
-                              key={opt.key}
-                              type="button"
-                              onClick={() => {
-                                onDependencyTypeChange?.(opt.key);
-                                setDepPopoverOpen(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",
-                              )}
-                            >
-                              <span className="flex-1">{t(opt.optionLabelKey)}</span>
-                              {checked && <Check className="size-3.5 shrink-0 text-primary" />}
-                            </button>
-                          );
-                        })}
-                      </div>
-                    ))}
-                  </PopoverContent>
-                </Popover>
+                <DependencyTypeSelect
+                  value={dependencyType}
+                  onChange={(key) => onDependencyTypeChange?.(key)}
+                  open={depPopoverOpen}
+                  onOpenChange={setDepPopoverOpen}
+                />
               )}
             </div>
           )}