@allbluecn/web-app 0.5.0 → 0.6.0

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" />}
@@ -562,8 +563,9 @@ export function StorySelectDialog({
                     const owner = projectById.get(story.projectId);
                     return (
                       <li key={story.id}>
-                        <button
-                          type="button"
+                        <div
+                          role="button"
+                          tabIndex={0}
                           onClick={() => {
                             if (isMulti) {
                               setSelectedIds((prev) =>
@@ -575,7 +577,21 @@ export function StorySelectDialog({
                               setSelectedIds([story.id]);
                             }
                           }}
-                          className={`flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-left text-sm transition-colors ${
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                              e.preventDefault();
+                              if (isMulti) {
+                                setSelectedIds((prev) =>
+                                  prev.includes(story.id)
+                                    ? prev.filter((id) => id !== story.id)
+                                    : [...prev, story.id],
+                                );
+                              } else {
+                                setSelectedIds([story.id]);
+                              }
+                            }
+                          }}
+                          className={`flex w-full cursor-pointer items-center gap-2.5 rounded-md px-3 py-2 text-left text-sm transition-colors ${
                             isSelected
                               ? "bg-accent ring-1 ring-primary/30"
                               : "hover:bg-muted"
@@ -606,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}
@@ -617,7 +638,7 @@ export function StorySelectDialog({
                           {!isMulti && isSelected && (
                             <Check className="size-4 shrink-0 text-primary" />
                           )}
-                        </button>
+                        </div>
                       </li>
                     );
                   })}
@@ -660,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>
           )}

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/__tests__/attachment-manage-dialog.test.tsx

@@ -0,0 +1,171 @@
+// 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/>.
+
+// jsdom 缺少 ResizeObserver，Radix Dialog 依赖它
+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, waitFor, type RenderResult } from "@testing-library/react";
+import { TooltipProvider } from "@/components/ui/tooltip";
+
+vi.mock("sonner", () => ({
+  toast: { success: vi.fn(), error: vi.fn(), warning: vi.fn(), info: vi.fn() },
+}));
+
+const fns = vi.hoisted(() => ({ uploadFetch: vi.fn() }));
+
+// 上传走 /api/attachments/upload（multipart fetch），mock 全局 fetch
+vi.stubGlobal("fetch", fns.uploadFetch);
+
+function uploadResponse(body: Record<string, unknown>) {
+  return {
+    ok: true,
+    json: () => Promise.resolve(body),
+  };
+}
+
+import { AttachmentManageDialog } from "../attachment-manage-dialog";
+import type { StoryAttachmentItem } from "../../types";
+
+const ATTS: StoryAttachmentItem[] = [
+  { id: "a1", fileName: "设计稿.png", fileSize: 2048, mimeType: "image/png", storageUrl: "/mock-storage/1" },
+  { id: "a2", fileName: "说明.pdf", fileSize: 1048576, mimeType: "application/pdf", storageUrl: "/mock-storage/2" },
+];
+
+function setup(): RenderResult & { onUpdate: ReturnType<typeof vi.fn>; onOpenChange: ReturnType<typeof vi.fn> } {
+  const onUpdate = vi.fn();
+  const onOpenChange = vi.fn();
+  const view = render(
+    <TooltipProvider>
+      <AttachmentManageDialog
+        open
+        onOpenChange={onOpenChange}
+        storyId="s1"
+        data={ATTS}
+        onUpdate={onUpdate}
+      />
+    </TooltipProvider>,
+  );
+  return { ...view, onUpdate, onOpenChange };
+}
+
+function getFileInput() {
+  return document.querySelector('input[type="file"]') as HTMLInputElement;
+}
+
+function stageFile(file: File) {
+  fireEvent.change(getFileInput(), { target: { files: [file] } });
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  fns.uploadFetch.mockResolvedValue(
+    uploadResponse({
+      id: "a3",
+      fileName: "新文件.txt",
+      fileSize: 5,
+      mimeType: "text/plain",
+      storageUrl: "/api/attachments/a3/content",
+    }),
+  );
+});
+
+describe("AttachmentManageDialog", () => {
+  it("不渲染已有附件列表，仅保留上传区", () => {
+    setup();
+    expect(screen.queryByText("设计稿.png")).not.toBeInTheDocument();
+    expect(screen.getByText("点击或拖拽上传")).toBeInTheDocument();
+  });
+
+  it("选择文件后先在弹窗内预览（暂存），点击确认上传才发起 POST", async () => {
+    setup();
+    const file = new File(["hello"], "新文件.txt", { type: "text/plain" });
+    stageFile(file);
+    // 暂存预览：文件名 + 移除按钮出现
+    expect(screen.getByRole("button", { name: "移除" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "移除" })).toBeInTheDocument();
+    // 未确认前不发起上传
+    expect(fns.uploadFetch).not.toHaveBeenCalled();
+    fireEvent.click(screen.getByRole("button", { name: "确认上传" }));
+    await waitFor(() => expect(fns.uploadFetch).toHaveBeenCalled());
+    const [url, init] = fns.uploadFetch.mock.calls[0];
+    expect(url).toBe("/api/attachments/upload");
+    expect(init.method).toBe("POST");
+    const formData = init.body as FormData;
+    expect(formData.get("storyId")).toBe("s1");
+    expect(formData.get("file")).toBeInstanceOf(File);
+  });
+
+  it("确认上传成功后回调 onUpdate（含内容路由 URL）并关闭弹窗", async () => {
+    const { onUpdate, onOpenChange } = setup();
+    const file = new File(["hello"], "新文件.txt", { type: "text/plain" });
+    stageFile(file);
+    fireEvent.click(screen.getByRole("button", { name: "确认上传" }));
+    await waitFor(() => expect(onUpdate).toHaveBeenCalled());
+    const added = onUpdate.mock.calls[0][0][0];
+    expect(added.storageUrl).toBe("/api/attachments/a3/content");
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("描述随确认上传提交到 FormData", async () => {
+    setup();
+    const file = new File(["hello"], "新文件.txt", { type: "text/plain" });
+    stageFile(file);
+    fireEvent.change(screen.getByPlaceholderText("补充说明…"), { target: { value: "测试描述" } });
+    fireEvent.click(screen.getByRole("button", { name: "确认上传" }));
+    await waitFor(() => expect(fns.uploadFetch).toHaveBeenCalled());
+    const formData = fns.uploadFetch.mock.calls[0][1].body as FormData;
+    expect(formData.get("description")).toBe("测试描述");
+  });
+
+  it("上传接口报错时 toast 提示且不回调 onUpdate", async () => {
+    const { toast } = await import("sonner");
+    fns.uploadFetch.mockResolvedValue({ ok: false, json: () => Promise.resolve({ error: "文件大小需在 10MB 以内" }) });
+    const { onUpdate } = setup();
+    const file = new File(["hello"], "新文件.txt", { type: "text/plain" });
+    stageFile(file);
+    fireEvent.click(screen.getByRole("button", { name: "确认上传" }));
+    await waitFor(() => expect(toast.error).toHaveBeenCalled());
+    expect(onUpdate).not.toHaveBeenCalled();
+  });
+
+  it("超过 10MB 的文件被拒绝且不入暂存列表", async () => {
+    const { toast } = await import("sonner");
+    setup();
+    const big = new File([new ArrayBuffer(11 * 1024 * 1024)], "大文件.zip", { type: "application/zip" });
+    stageFile(big);
+    await waitFor(() => expect(toast.error).toHaveBeenCalled());
+    expect(fns.uploadFetch).not.toHaveBeenCalled();
+    expect(screen.queryByText("大文件.zip")).not.toBeInTheDocument();
+  });
+
+  it("取消按钮关闭弹窗", () => {
+    const { onOpenChange } = setup();
+    const file = new File(["hello"], "新文件.txt", { type: "text/plain" });
+    stageFile(file);
+    expect(screen.getByRole("button", { name: "移除" })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole("button", { name: "取消" }));
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+});