@allbluecn/web-app 0.5.1 → 0.6.1

package/src/components/story/peek-panel.tsx

@@ -15,7 +15,7 @@
 // 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 { useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useHotkey } from "@tanstack/react-hotkeys";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -33,11 +33,12 @@ import {
   getLinkedPrdsFn,
   getLinkedDocsFn,
 } from "@/server/serverFns/story";
+import { listIterationsFn } from "@/server/serverFns/iteration";
 import type { StoryDetail, UserBrief, CommentWithReplies, ActivityItem, RelationsData } from "./types";
 import type { StoryState } from "./constants";
 import { StoryDetailBody } from "./detail/story-detail-body";
 import { StoryPanelHeader } from "./story-panel-header";
-import type { PeekMode } from "./story-panel-header";
+import type { PeekMode, PeekRelationKind, PeekBreadcrumbItem } from "./story-panel-header";
 
 export type { PeekMode };
 
@@ -70,6 +71,13 @@ interface StoryPeekPanelProps {
   onTransferred?: () => void;
 }
 
+interface PeekLocation {
+  storyId: string;
+  identifier?: string;
+  projectId?: string;
+  relationKind: PeekRelationKind;
+}
+
 interface PeekData {
   story: StoryDetail;
   comments: CommentWithReplies[];
@@ -77,6 +85,7 @@ interface PeekData {
   labels: { id: string; name: string; color: string }[];
   stories: { id: string; identifier: string; name: string; state: StoryState }[];
   relationsData: RelationsData;
+  iterations: import("@/server/serverFns/iteration/schemas").IterationSummary[];
 }
 
 export function StoryPeekPanel({
@@ -100,25 +109,61 @@ export function StoryPeekPanel({
   const { t } = useTranslation("story");
   const [data, setData] = useState<PeekData | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [refreshing, setRefreshing] = useState(false);
+  const [history, setHistory] = useState<PeekLocation[]>([]);
+  const [rootIdentifier, setRootIdentifier] = useState<string | undefined>();
+  const [rootProjectId, setRootProjectId] = useState<string | undefined>();
+
+  const effectiveStoryId = history.length > 0 ? history[history.length - 1].storyId : storyId;
+
+  const onNavigateInPanel = useCallback((targetId: string, targetIdentifier?: string, relationKind: PeekRelationKind = "child") => {
+    setHistory((prev) => {
+      const currentId = prev.length > 0 ? prev[prev.length - 1].storyId : storyId;
+      return [...prev, { storyId: targetId, identifier: targetIdentifier, relationKind, parentId: currentId }];
+    });
+  }, [storyId]);
+
+  const onBackInPanel = useCallback(() => {
+    setHistory((prev) => prev.slice(0, -1));
+  }, []);
+
+  useEffect(() => {
+    setHistory([]);
+  }, [storyId]);
 
   useEffect(() => {
     let cancelled = false;
-    setData(null);
     setError(null);
+    // 跳转时保留旧内容（不 setData(null)）：同步卸载含 TipTap 等重节点的详情树会
+    // 阻塞主线程，导致顶部 MorphIcon 关闭/返回按钮的形变动画掉帧卡顿。
+    // 改为半透明遮罩过渡，新数据到达后经 key 变化整体替换。
+    setRefreshing(data !== null);
     (async () => {
       try {
-        const story = await getStoryDetailFn({ data: { storyId } });
-        const [comments, activities, labels, storiesResult, childrenStories, dependencies, links, attachments, prds, docs] = await Promise.all([
-          listCommentsFn({ data: { storyId } }),
-          listActivitiesFn({ data: { storyId, take: 50 } }),
+        const story = await getStoryDetailFn({ data: { storyId: effectiveStoryId } });
+        if (history.length === 0) {
+          setRootIdentifier(story.identifier);
+          setRootProjectId(story.projectId);
+        } else {
+          // 回填当前层 projectId：跨项目父子/依赖跳转时，面包屑各级需显示各自项目图标
+          setHistory((prev) => {
+            const last = prev[prev.length - 1];
+            if (!last || last.projectId === story.projectId) return prev;
+            return prev.map((h, i) => (i === prev.length - 1 ? { ...h, projectId: story.projectId } : h));
+          });
+        }
+        const [comments, activities, labels, storiesResult, childrenStories, dependencies, links, attachments, prds, docs, iterationsResult] = await Promise.all([
+          listCommentsFn({ data: { storyId: effectiveStoryId } }),
+          listActivitiesFn({ data: { storyId: effectiveStoryId, take: 50 } }),
           listLabelsFn(),
           listStoriesFn({ data: { projectId: story.projectId } }),
-          listChildStoriesFn({ data: { parentId: storyId } }),
-          getDependenciesFn({ data: { storyId } }),
-          getLinksFn({ data: { storyId } }),
-          getAttachmentsFn({ data: { storyId } }),
-          getLinkedPrdsFn({ data: { storyId } }),
-          getLinkedDocsFn({ data: { storyId } }),
+          listChildStoriesFn({ data: { parentId: effectiveStoryId } }),
+          getDependenciesFn({ data: { storyId: effectiveStoryId } }),
+          getLinksFn({ data: { storyId: effectiveStoryId } }),
+          getAttachmentsFn({ data: { storyId: effectiveStoryId } }),
+          getLinkedPrdsFn({ data: { storyId: effectiveStoryId } }),
+          getLinkedDocsFn({ data: { storyId: effectiveStoryId } }),
+          story.projectId ? listIterationsFn({ data: { projectId: story.projectId, includeArchived: false } }) : Promise.resolve({ items: [] }),
         ]);
         const relationsData: RelationsData = {
           hierarchy: {
@@ -131,33 +176,82 @@ export function StoryPeekPanel({
           attachments,
           knowledge: { prds, docs },
         };
-        if (!cancelled) setData({ story, comments, activities: activities.items, labels: labels, stories: storiesResult.items.map((s) => ({ id: s.id, identifier: s.identifier, name: s.name, state: s.state })), relationsData });
+        if (!cancelled) {
+          setData({ story, comments, activities: activities.items, labels: labels, stories: storiesResult.items.map((s) => ({ id: s.id, identifier: s.identifier, name: s.name, state: s.state })), relationsData, iterations: iterationsResult.items });
+          setRefreshing(false);
+        }
       } catch (e) {
-        if (!cancelled) setError(e instanceof Error ? e.message : t("peek.loadFailed"));
+        if (!cancelled) {
+          setError(e instanceof Error ? e.message : t("peek.loadFailed"));
+          setRefreshing(false);
+        }
       }
     })();
     return () => {
       cancelled = true;
     };
-  }, [storyId]);
+  }, [effectiveStoryId]);
 
   useHotkey("Escape", onClose, {
-    enabled: mode === "side-peek",
+    enabled: mode === "side-peek" && history.length === 0,
   });
 
   const canArchive = data?.story
     ? (data.story.state === "done" || data.story.state === "cancelled") && !data.story.archived
     : false;
 
+  const closeType: "collapse" | "close" | "back" =
+    history.length > 0
+      ? "back"
+      : mode === "side-peek"
+        ? "collapse"
+        : "close";
+
+  const handleClose = useCallback(() => {
+    if (history.length > 0) {
+      onBackInPanel();
+    } else {
+      onClose();
+    }
+  }, [history.length, onBackInPanel, onClose]);
+
+  const breadcrumbItems: PeekBreadcrumbItem[] = useMemo(() => {
+    const rootId = rootIdentifier;
+    const currentId = data?.story.identifier;
+    const items: PeekBreadcrumbItem[] = [];
+
+    if (history.length === 0) {
+      return items;
+    }
+
+    const entry = history[history.length - 1];
+    const parentLabel = entry.relationKind === "child" ? t("peek.parentStory") : t("peek.currentStory");
+    const childLabel = entry.relationKind === "child" ? t("peek.childStory") : t("peek.dependentStory");
+
+    items.push({
+      identifier: history.length >= 2 ? history[history.length - 2].identifier ?? rootId : rootId,
+      projectId: history.length >= 2 ? history[history.length - 2].projectId ?? rootProjectId : rootProjectId,
+      label: parentLabel,
+      onClick: () => onBackInPanel(),
+    });
+
+    items.push({
+      identifier: currentId,
+      projectId: data?.story.projectId ?? undefined,
+      label: childLabel,
+    });
+
+    return items;
+  }, [history, rootIdentifier, rootProjectId, data?.story.identifier, data?.story.projectId, t, onBackInPanel]);
+
   const header = (
     <StoryPanelHeader
-      closeType={mode === "side-peek" ? "collapse" : "close"}
-      onClose={onClose}
+      closeType={closeType}
+      onClose={handleClose}
       onFullscreen={onFullscreen}
       mode={mode}
       onModeChange={onModeChange}
       storyId={storyId}
-      identifier={data?.story.identifier}
       canArchive={canArchive}
       onPrevious={onPrevious}
       onNext={onNext}
@@ -172,7 +266,10 @@ export function StoryPeekPanel({
   );
 
   const body = (
-    <div className="flex min-h-0 flex-1 flex-col overflow-y-auto px-8" style={{ scrollbarGutter: "stable" } as React.CSSProperties}>
+    <div
+      className={`flex min-h-0 flex-1 flex-col overflow-y-auto px-8 transition-opacity duration-200${refreshing ? " pointer-events-none opacity-50" : ""}`}
+      style={{ scrollbarGutter: "stable" } as React.CSSProperties}
+    >
 
       {error && <div className="w-full p-6 text-sm text-destructive">{t("peek.loadFailed")}: {error}</div>}
       {!error && !data && (
@@ -230,12 +327,15 @@ export function StoryPeekPanel({
           labels={data.labels}
           stories={data.stories}
           projects={projects}
+          iterations={data.iterations}
           relationsData={data.relationsData}
           onRelationsUpdate={(next) => setData((d) => d ? { ...d, relationsData: typeof next === "function" ? next(d.relationsData) : next } : d)}
           onAppendActivities={(items) => setData((d) => d ? { ...d, activities: [...d.activities, ...items] } : d)}
           onAppendComment={(c) => setData((d) => d ? { ...d, comments: [...d.comments, c] } : d)}
           onRemoveComment={(id) => setData((d) => d ? { ...d, comments: d.comments.filter((c) => c.id !== id) } : d)}
           onStoryUpdate={(s) => setData((d) => d ? { ...d, story: s } : d)}
+          onNavigateInPanel={onNavigateInPanel}
+          breadcrumbItems={breadcrumbItems}
         />
       )}
     </div>

package/src/components/story/relations/link-manage-dialog.tsx

@@ -76,7 +76,7 @@ export function LinkManageDialog({
     setSubmitting(true);
     try {
       if (editing) {
-        await updateLink({
+        const updated = await updateLink({
           data: {
             linkId: editing.id,
             url: form.url,
@@ -85,6 +85,7 @@ export function LinkManageDialog({
           },
         });
         toast.success(t("linkDialog.updated"));
+        if (updated.activity) onActivity?.(updated.activity);
         onUpdate(
           data.map((l) =>
             l.id === editing.id

package/src/components/story/relations/story-ref-row.tsx

@@ -36,11 +36,10 @@ import {
   unarchiveStoryFn,
   deleteStoryFn,
 } from "@/server/serverFns/story";
-import { PriorityEditor, StateEditor, AssigneeEditor, DateEditor, LabelsEditor } from "../inline-editors";
+import { PriorityEditor, StateEditor, AssigneeEditor, DateEditor, LabelsEditor, DependencyTypeSelect } from "../inline-editors";
 import { NameConfirmDialog } from "@/components/shared/name-confirm-dialog";
 import { cn } from "@/lib/utils";
-import { ProjectIconDisplay } from "@/components/project/project-icon";
-import { Badge } from "@/components/ui/badge";
+import { LucideIconByName } from "@/components/shared/lucide-icon-picker/lucide-icon-by-name";
 import { dependencyTypeOption } from "../constants";
 import type { DisplayProperty } from "../display/types";
 import type { StoryPatch } from "../display/group-fields";
@@ -50,6 +49,7 @@ import type {
   DependencyEdgeType,
   DependencyGroup,
 } from "../types";
+import type { DependencyTypeOption } from "../constants";
 
 /** 行内编辑/归档/删除后回传给面板的补丁载荷（StoryPatch 字段 + 面板控制信号） */
 export type StoryRelationPatch = StoryPatch & {
@@ -72,8 +72,10 @@ export interface StoryRefRowProps {
   /** 移除关系：子需求=移除子需求，依赖=移除依赖 */
   onRemove: (storyId: string) => void;
   removeMenuLabel: string;
-  /** 依赖行类型标签：传 depType + group 时行内渲染类型 Badge */
+  /** 依赖行类型标签：传 depType + group 时行内渲染可编辑的类型选择器 */
   dependencyMeta?: { depType: DependencyEdgeType; group: keyof DependencyGroup };
+  /** 依赖类型就地编辑回调（依赖列表场景；children 列表不传） */
+  onDependencyTypeChange?: (otherStoryId: string, key: DependencyTypeOption["key"]) => void;
   /** 当前需求编号（tooltip 中以编号替代「我」指代当前需求） */
   currentIdentifier?: string;
 }
@@ -92,6 +94,7 @@ export function StoryRefRow({
   onRemove,
   removeMenuLabel,
   dependencyMeta,
+  onDependencyTypeChange,
   currentIdentifier,
 }: StoryRefRowProps) {
   const { t } = useTranslation("story");
@@ -190,7 +193,7 @@ export function StoryRefRow({
                 className="shrink-0"
                 style={{ color: "oklch(80.517% 0.20237 152.675 / 0.909)" }}
               >
-                <ProjectIconDisplay name={storyProjectInfo.icon} size={14} />
+                <LucideIconByName name={storyProjectInfo.icon} size={14} />
               </span>
             </TooltipTrigger>
             <TooltipContent side="top" sideOffset={6} className="flex flex-col items-start gap-0.5 text-xs">
@@ -199,7 +202,7 @@ export function StoryRefRow({
             </TooltipContent>
           </Tooltip>
         ) : storyProjectInfo ? (
-          <ProjectIconDisplay
+          <LucideIconByName
             name={storyProjectInfo.icon}
             size={14}
             className="shrink-0 text-muted-foreground"
@@ -224,26 +227,13 @@ export function StoryRefRow({
           <span className="font-mono text-xs text-muted-foreground shrink-0">{storyState.identifier}</span>
         )}
         {dependencyMeta && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Badge variant="outline" className="max-w-56 shrink-0 truncate text-[10px] font-normal text-muted-foreground">
-                {t(dependencyTypeOption(dependencyMeta.group, dependencyMeta.depType).badgeLabelKey, {
-                  identifier: storyState.identifier,
-                })}
-              </Badge>
-            </TooltipTrigger>
-            <TooltipContent side="top" className="text-xs">
-              {t(
-                currentIdentifier
-                  ? dependencyTypeOption(dependencyMeta.group, dependencyMeta.depType).tooltipLabelKey
-                  : dependencyTypeOption(dependencyMeta.group, dependencyMeta.depType).badgeLabelKey,
-                {
-                  identifier: storyState.identifier,
-                  me: currentIdentifier,
-                },
-              )}
-            </TooltipContent>
-          </Tooltip>
+          <DependencyTypeSelect
+            variant="badge"
+            value={dependencyTypeOption(dependencyMeta.group, dependencyMeta.depType).key}
+            onChange={(key) => onDependencyTypeChange?.(storyState.id, key)}
+            identifier={storyState.identifier}
+            currentIdentifier={currentIdentifier}
+          />
         )}
         <span className="min-w-0 flex-1 truncate font-medium">{storyState.name}</span>
       </button>
@@ -263,7 +253,7 @@ export function StoryRefRow({
         <DateEditor value={storyState.targetDate} onChange={(v) => updateField({ targetDate: v })} label={t("children.dueDate")} icon={CalendarCheck} overdue={overdue} />
       )}
       {properties.includes("labels") && (
-        <LabelsEditor labelIds={currentLabelIds} labels={labels} onChange={(v) => updateField({ labelIds: v })} variant="button" />
+        <LabelsEditor labelIds={currentLabelIds} labels={labels} onChange={(v) => updateField({ labelIds: v })} variant="button" aiContext={{ name: () => storyState.name }} />
       )}
       <DropdownMenu>
         <DropdownMenuTrigger asChild>

package/src/components/story/story-panel-header.tsx

@@ -20,9 +20,9 @@ import type { ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "@tanstack/react-router";
 import {
+  Archive,
   ArrowLeft,
   ArrowRight,
-  Archive,
   ChevronDown,
   ChevronUp,
   Link2,
@@ -59,6 +59,14 @@ export const PEEK_MODE_OPTIONS: { value: PeekMode; label: string; icon: typeof P
 ];
 
 export type PanelCloseType = "collapse" | "close" | "back";
+export type PeekRelationKind = "child" | "dependency";
+
+export interface PeekBreadcrumbItem {
+  identifier?: string;
+  projectId?: string;
+  label: string;
+  onClick?: () => void;
+}
 
 export interface StoryPanelHeaderProps {
   closeType?: PanelCloseType;
@@ -86,6 +94,7 @@ export interface StoryPanelHeaderProps {
   hideCopyLink?: boolean;
   hideMoreMenu?: boolean;
   hideTransfer?: boolean;
+  breadcrumbItems?: PeekBreadcrumbItem[];
 }
 
 export function StoryPanelHeader({
@@ -114,6 +123,7 @@ export function StoryPanelHeader({
   hideCopyLink = false,
   hideMoreMenu = false,
   hideTransfer = false,
+  breadcrumbItems,
 }: StoryPanelHeaderProps) {
   const { t } = useTranslation("story");
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -121,28 +131,24 @@ export function StoryPanelHeader({
 
   const currentMode = PEEK_MODE_OPTIONS.find((o) => o.value === mode) ?? PEEK_MODE_OPTIONS[0];
   const CurrentModeIcon = currentMode.icon;
+  const closeTooltip = closeType === "back" ? t("panel.back") : closeType === "collapse" ? t("panel.collapse") : t("panel.close");
+  // 形变动画（MorphIcon）因主线程阻塞掉帧卡顿已移除，静态切换图标
+  const CloseIcon = closeType === "back" ? ArrowLeft : closeType === "collapse" ? ArrowRight : X;
 
-  const closeButton =
-    closeType === "back" ? (
-      <Button variant="ghost" size="icon" className="size-8" aria-label={t("panel.back")} onClick={onClose}>
-        <ArrowLeft className="size-4" />
-      </Button>
-    ) : (
-      <Button
-        variant="ghost"
-        size="icon"
-        className="size-8"
-        onClick={onClose}
-        aria-label={closeType === "collapse" ? t("panel.collapse") : t("panel.close")}
-      >
-        {closeType === "collapse" ? <ArrowRight className="size-4" /> : <X className="size-4" />}
-      </Button>
-    );
+  const closeButton = (
+    <Button
+      variant="ghost"
+      size="icon"
+      className="size-8 panel-close-btn"
+      onClick={onClose}
+      aria-label={closeTooltip}
+    >
+      <CloseIcon className="size-4" />
+    </Button>
+  );
 
   const closeButtonWithLink = backTo ? <Link to={backTo}>{closeButton}</Link> : closeButton;
 
-  const closeTooltip = closeType === "back" ? t("panel.back") : closeType === "collapse" ? t("panel.collapse") : t("panel.close");
-
   const handleCopyLink = async () => {
     const url = storyId ? `${window.location.origin}/stories/${storyId}` : window.location.href;
     try {

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

@@ -35,7 +35,7 @@ import type { SavedView } from "./views/view-types";
 import { DisplayDropdown } from "./display/display-dropdown";
 import type { DisplayOptions } from "./display/types";
 import { StoryFilterToggle, StoryFilterRow, AppliedFilters, type FilterCondition, type FilterKey } from "./filters";
-import { ProjectIconDisplay } from "@/components/project/project-icon";
+import { LucideIconByName } from "@/components/shared/lucide-icon-picker/lucide-icon-by-name";
 import { CreateProjectDialog } from "@/components/project/create-project-dialog";
 import type { UserBrief } from "./types";
 
@@ -121,7 +121,7 @@ export function StoryToolbar({ filters, filterConditions, onFilterChange, onFilt
                {filters.projectId === "__archived__" ? (
                  <Archive className="size-4 text-muted-foreground" />
                ) : filters.projectId ? (
-                 <ProjectIconDisplay name={projects.find((p) => p.id === filters.projectId)?.icon ?? ""} size={16} className="text-muted-foreground" />
+                 <LucideIconByName name={projects.find((p) => p.id === filters.projectId)?.icon ?? ""} size={16} className="text-muted-foreground" />
                ) : (
                  <Trees className="size-4 text-muted-foreground" />
                )}
@@ -149,7 +149,7 @@ export function StoryToolbar({ filters, filterConditions, onFilterChange, onFilt
                  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">
-                   <ProjectIconDisplay name={p.icon} size={16} className="text-muted-foreground" />
+                   <LucideIconByName name={p.icon} size={16} className="text-muted-foreground" />
                    <span className="truncate">{p.name}</span>
                  </span>
                  {p.displayId && (

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

@@ -18,7 +18,7 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { GitCompareArrows, GitPullRequest, Check } from "lucide-react";
-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 { Separator } from "@/components/ui/separator";
 import {
@@ -194,7 +194,7 @@ export function TransferStoryPopover({
                         isSelected ? "bg-accent" : "hover:bg-muted"
                       }`}
                     >
-                      <ProjectIconDisplay name={p.icon} size={16} />
+                      <LucideIconByName name={p.icon} size={16} />
                       <span className="min-w-0 flex-1 truncate">{p.name}</span>
                       {p.displayId && (
                         <span className="shrink-0 rounded-sm bg-muted px-1.5 py-0.5 text-[10px] font-normal text-muted-foreground">

package/src/components/story/types.ts

@@ -51,6 +51,7 @@ export interface StoryListItem {
   labels: { id: string; name: string; color: string }[];
   createdAt: string;
   updatedAt: string;
+  iteration?: { id: string; name: string } | null;
 }
 
 export interface StoryDetail extends StoryListItem {

package/src/components/story/views/create-view-dialog.tsx

@@ -31,7 +31,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { Button } from "@/components/ui/button";
-import { ProjectIconDisplay } from "@/components/project/project-icon";
+import { LucideIconByName } from "@/components/shared/lucide-icon-picker/lucide-icon-by-name";
 import { cn } from "@/lib/utils";
 import { StoryFilterRow } from "../filters/filter-row";
 import { createDefaultCondition, type FilterCondition } from "../filters/filter-types";
@@ -160,7 +160,7 @@ export function CreateViewDialog({ open, onOpenChange, mode, initialValues, view
                   className="h-8 gap-1.5 border-0 bg-muted/50 px-2.5 text-sm font-medium"
                 >
                   {selectedProject ? (
-                    <ProjectIconDisplay name={selectedProject.icon} size={16} />
+                    <LucideIconByName name={selectedProject.icon} size={16} />
                   ) : (
                     <Trees className="size-4 text-muted-foreground" />
                   )}
@@ -190,7 +190,7 @@ export function CreateViewDialog({ open, onOpenChange, mode, initialValues, view
                       className={`flex w-full items-center justify-between gap-2 rounded px-2 py-1.5 text-sm ${projectId === p.id ? "bg-accent font-medium" : "hover:bg-muted"}`}
                     >
                       <span className="flex min-w-0 items-center gap-2">
-                        <ProjectIconDisplay name={p.icon} size={16} />
+                        <LucideIconByName name={p.icon} size={16} />
                         <span className="truncate">{p.name}</span>
                       </span>
                       {p.displayId && (