@allbluecn/web-app 0.18.2 → 0.19.0

package/src/components/story/relations/__tests__/design-select-dialog.test.tsx

@@ -0,0 +1,131 @@
+// 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 { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+
+vi.mock("@tanstack/react-start", () => ({
+  useServerFn: (fn: any) => vi.fn().mockImplementation((args: any) => fn(args)),
+}));
+
+const fns = vi.hoisted(() => ({
+  search: vi.fn(),
+  link: vi.fn(),
+  unlink: vi.fn(),
+}));
+
+vi.mock("@/server/serverFns/story", () => ({
+  searchDesignsFn: fns.search,
+  linkDesignsFn: fns.link,
+  unlinkDesignFn: fns.unlink,
+}));
+
+vi.mock("@/components/ui/toast", () => ({
+  toast: { success: vi.fn(), error: vi.fn(), warning: vi.fn() },
+}));
+
+;
+
+import { DesignSelectDialog } from "../design-select-dialog";
+import type { DesignBrief } from "../../types";
+
+const design = (id: string, title: string, icon = "file"): DesignBrief => ({ id, title, icon });
+
+const LINKED: DesignBrief[] = [design("d1", "已关联设计")];
+
+function setup(mode: "prd" | "ui" | "design" = "design") {
+  const onUpdate = vi.fn();
+  render(
+    <DesignSelectDialog
+      open
+      onOpenChange={() => {}}
+      mode={mode}
+      storyId="s1"
+      linkedDesigns={LINKED}
+      onUpdate={onUpdate}
+    />,
+  );
+  return { onUpdate };
+}
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  fns.search.mockResolvedValue([design("d1", "已关联设计"), design("d2", "落地页"), design("d3", "登录页", "pen")]);
+});
+
+describe("DesignSelectDialog", () => {
+  it("标题随 mode 分流（prd/ui/design）", async () => {
+    const { unmount } = render(
+      <DesignSelectDialog open onOpenChange={() => {}} mode="prd" storyId="s1" linkedDesigns={[]} onUpdate={vi.fn()} />,
+    );
+    await waitFor(() => expect(screen.getByText("关联 PRD")).toBeInTheDocument());
+    unmount();
+    render(
+      <DesignSelectDialog open onOpenChange={() => {}} mode="ui" storyId="s1" linkedDesigns={[]} onUpdate={vi.fn()} />,
+    );
+    await waitFor(() => expect(screen.getByText("关联 UI")).toBeInTheDocument());
+    unmount();
+    setup("design");
+    await waitFor(() => expect(screen.getByText("关联设计")).toBeInTheDocument());
+  });
+
+  it("加载设计列表，已关联项默认勾选且带 badge", async () => {
+    setup();
+    await waitFor(() => expect(screen.getByText("已关联设计")).toBeInTheDocument());
+    expect(screen.getByText("已关联")).toBeInTheDocument();
+  });
+
+  it("切换勾选后确认：新增走 linkDesignsFn、取消走 unlinkDesignFn", async () => {
+    fns.link.mockResolvedValue({ linked: ["d3"], failed: [], activity: null });
+    fns.unlink.mockResolvedValue({ ok: true, activity: null });
+    const { onUpdate } = setup();
+    await waitFor(() => screen.getByText("登录页"));
+    // 勾选 d3（新增）
+    fireEvent.click(screen.getByText("登录页"));
+    // 取消 d1
+    fireEvent.click(screen.getByText("已关联设计"));
+    fireEvent.click(screen.getByRole("button", { name: "确认" }));
+    await waitFor(() => expect(fns.link).toHaveBeenCalledWith({
+      data: { storyId: "s1", designIds: ["d3"] },
+    }));
+    await waitFor(() => expect(fns.unlink).toHaveBeenCalledWith({
+      data: { storyId: "s1", designId: "d1" },
+    }));
+    await waitFor(() => expect(onUpdate).toHaveBeenCalledWith([
+      expect.objectContaining({ id: "d3", title: "登录页" }),
+    ]));
+  });
+
+  it("linkDesignsFn 返回 failed 时 toast warning", async () => {
+    fns.link.mockResolvedValue({ linked: [], failed: [{ designId: "d9", reason: "outOfScope" }], activity: null });
+    const { toast } = await import("@/components/ui/toast");
+    setup();
+    await waitFor(() => screen.getByText("登录页"));
+    fireEvent.click(screen.getByText("登录页"));
+    fireEvent.click(screen.getByRole("button", { name: "确认" }));
+    await waitFor(() => expect(toast.warning).toHaveBeenCalled());
+  });
+
+  it("搜索输入防抖后带 query 重查列表", async () => {
+    setup();
+    await waitFor(() => screen.getByText("登录页"));
+    fireEvent.change(screen.getByRole("textbox"), { target: { value: "登录" } });
+    await waitFor(() =>
+      expect(fns.search).toHaveBeenCalledWith({ data: { query: "登录" } }),
+    );
+  });
+});

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

@@ -300,7 +300,7 @@ export function AttachmentManageDialog({
 
   return (
     <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-lg">
+      <DialogContent className="sm:max-w-[min(65rem,calc(100%-4rem))] max-w-[calc(100%-4rem)] flex max-h-[calc(100dvh-2rem)] [@media(min-height:64rem)]:-mt-50 flex-col overflow-hidden">
         <DialogHeader>
               <DialogTitle className="text-xl">{dialogTitle}</DialogTitle>
         </DialogHeader>

package/src/components/story/relations/design-select-dialog.tsx

@@ -0,0 +1,285 @@
+// 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/>.
+
+// 关联设计弹窗（PRD / UI 共用，骨架同 KnowledgeSelectDialog）：搜索本人设计、
+// 勾选批量增删关联。PRD 文档与 UI 画板同源 Design 表，链接统一落
+// storyDesignLink，详情面板聚合进「设计」组展示。
+import * as React from "react";
+import { useServerFn } from "@tanstack/react-start";
+import { toast } from "@/components/ui/toast";
+import { Search } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Input } from "@/components/ui/input";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useDebouncedCallback, SEARCH_DEBOUNCE_MS } from "@/lib/pacer";
+import {
+  searchDesignsFn,
+  linkDesignsFn,
+  unlinkDesignFn,
+} from "@/server/serverFns/story";
+import { LucideIconByName } from "@/components/shared-kit/icons/lucide-icon-picker/lucide-icon-by-name";
+import type { DesignBrief } from "../types";
+import { m } from "@/paraglide/messages.js";
+import { toastError } from "@/lib/toast-error";
+
+export type DesignSelectMode = "prd" | "ui" | "design";
+
+export interface DesignSelectDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** 仅影响弹窗标题（prd/ui/design），链接数据不分流 */
+  mode: DesignSelectMode;
+  storyId: string;
+  linkedDesigns: DesignBrief[];
+  onUpdate: (designs: DesignBrief[]) => void;
+  /** 关联/解联产生的活动，供时间线即时追加 */
+  onActivity?: (activity: import("../types").ActivityItem) => void;
+}
+
+function dialogTitle(mode: DesignSelectMode): string {
+  if (mode === "prd") return m.story_designDialog_titlePrd();
+  if (mode === "ui") return m.story_designDialog_titleUi();
+  return m.story_designDialog_title();
+}
+
+export function DesignSelectDialog({
+  open,
+  onOpenChange,
+  mode,
+  storyId,
+  linkedDesigns,
+  onUpdate,
+  onActivity,
+}: DesignSelectDialogProps) {
+  const searchDesigns = useServerFn(searchDesignsFn);
+  const linkDesigns = useServerFn(linkDesignsFn);
+  const unlinkDesign = useServerFn(unlinkDesignFn);
+
+  const [items, setItems] = React.useState<DesignBrief[]>([]);
+  const [search, setSearch] = React.useState("");
+  const [selected, setSelected] = React.useState<Set<string>>(new Set());
+  const [loading, setLoading] = React.useState(false);
+  const [submitting, setSubmitting] = React.useState(false);
+
+  const linkedIds = React.useMemo(
+    () => new Set(linkedDesigns.map((d) => d.id)),
+    [linkedDesigns],
+  );
+
+  const loadItems = React.useCallback(
+    async (query: string) => {
+      setLoading(true);
+      try {
+        const rows = await searchDesigns({ data: { query } });
+        setItems(rows as DesignBrief[]);
+      } catch {
+        setItems([]);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [searchDesigns],
+  );
+
+  React.useEffect(() => {
+    if (!open) return;
+    setSelected(new Set(linkedIds));
+    setSearch("");
+    void loadItems("");
+  }, [open]);
+
+  const debouncedSearch = useDebouncedCallback(
+    (q: string) => {
+      void loadItems(q);
+    },
+    { wait: SEARCH_DEBOUNCE_MS },
+  );
+
+  const handleSearch = (q: string) => {
+    setSearch(q);
+    debouncedSearch(q);
+  };
+
+  const toggle = (id: string) => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  // 全选/部分选状态（仅针对当前列表内的条目）
+  const listedIds = React.useMemo(() => items.map((d) => d.id), [items]);
+  const selectedListedCount = React.useMemo(
+    () => listedIds.filter((id) => selected.has(id)).length,
+    [listedIds, selected],
+  );
+  const allSelected = listedIds.length > 0 && selectedListedCount === listedIds.length;
+  const someSelected = selectedListedCount > 0 && !allSelected;
+  const toggleSelectAll = () => {
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (allSelected) {
+        for (const id of listedIds) next.delete(id);
+      } else {
+        for (const id of listedIds) next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const handleConfirm = async () => {
+    if (submitting) return;
+    setSubmitting(true);
+    try {
+      const toAdd = [...selected].filter((id) => !linkedIds.has(id));
+      const toRemove = [...linkedIds].filter((id) => !selected.has(id));
+
+      let nextDesigns = linkedDesigns;
+      if (toRemove.length > 0) {
+        for (const designId of toRemove) {
+          const res = await unlinkDesign({ data: { storyId, designId } });
+          if (res?.activity) onActivity?.(res.activity);
+        }
+        nextDesigns = nextDesigns.filter((d) => !toRemove.includes(d.id));
+      }
+      let failedCount = 0;
+      if (toAdd.length > 0) {
+        const res = await linkDesigns({ data: { storyId, designIds: toAdd } });
+        failedCount = res.failed.length;
+        if (res.linked.length > 0 && res.activity) onActivity?.(res.activity);
+        const addedIds = new Set(res.linked);
+        const byId = new Map(items.map((d) => [d.id, d]));
+        nextDesigns = [
+          ...nextDesigns,
+          ...[...addedIds].map((id) => byId.get(id)).filter((d): d is DesignBrief => Boolean(d)),
+        ];
+      }
+      if (failedCount > 0) {
+        toast.warning(m.story_designDialog_partialFailed({ count: failedCount }));
+      }
+      onUpdate(nextDesigns);
+      onOpenChange(false);
+    } catch (err) {
+      toastError(err, m.story_designDialog_linkFailed());
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[min(65rem,calc(100%-4rem))] max-w-[calc(100%-4rem)] flex max-h-[calc(100dvh-2rem)] [@media(min-height:64rem)]:-mt-50 flex-col overflow-hidden">
+        <DialogHeader>
+          <DialogTitle>{dialogTitle(mode)}</DialogTitle>
+        </DialogHeader>
+
+        <div className="relative">
+          <Search className="absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            value={search}
+            onChange={(e) => handleSearch(e.target.value)}
+            placeholder={m.story_designDialog_searchPlaceholder()}
+            className="pl-8 h-8 text-sm"
+            aria-label={m.story_designDialog_searchPlaceholder()}
+          />
+        </div>
+
+        <div className="h-80 min-h-24 shrink overflow-y-auto rounded-md border p-1">
+          {loading ? (
+            <div className="flex h-full items-center justify-center text-sm text-muted-foreground">…</div>
+          ) : items.length > 0 ? (
+            items.map((row) => (
+              <div
+                key={row.id}
+                role="button"
+                tabIndex={0}
+                aria-pressed={selected.has(row.id)}
+                onClick={() => toggle(row.id)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    toggle(row.id);
+                  }
+                }}
+                className="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 hover:bg-muted/50"
+              >
+                <Checkbox
+                  checked={selected.has(row.id)}
+                  onCheckedChange={() => toggle(row.id)}
+                  onClick={(e) => e.stopPropagation()}
+                  aria-label={row.title}
+                  className="shrink-0"
+                />
+                <LucideIconByName name={row.icon} size={14} className="shrink-0 text-muted-foreground" />
+                <span className="min-w-0 flex-1 truncate text-sm">{row.title}</span>
+                {linkedIds.has(row.id) && (
+                  <Badge variant="secondary" className="shrink-0 text-[10px]">
+                    {m.story_designDialog_linked()}
+                  </Badge>
+                )}
+              </div>
+            ))
+          ) : (
+            <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
+              {m.story_designDialog_empty()}
+            </div>
+          )}
+        </div>
+
+        <DialogFooter className="shrink-0 flex-row flex-wrap items-center justify-between gap-2 sm:justify-between">
+          <div className="flex items-center gap-2 ml-3">
+            <Checkbox
+              id="design-select-all"
+              checked={allSelected}
+              indeterminate={!allSelected && someSelected}
+              onCheckedChange={toggleSelectAll}
+              disabled={listedIds.length === 0}
+              aria-label={m.story_designDialog_selectAll()}
+            />
+            <label
+              htmlFor="design-select-all"
+              className="cursor-pointer text-xs text-muted-foreground select-none"
+            >
+              {m.story_designDialog_selectAll()}
+            </label>
+            <span className="text-xs text-muted-foreground">
+              {m.story_designDialog_selectedCount({ count: selected.size })}
+            </span>
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              {m.story_designDialog_cancel()}
+            </Button>
+            <Button onClick={handleConfirm} disabled={submitting}>
+              {m.story_designDialog_confirm()}
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/story/relations/knowledge-select-dialog.tsx

@@ -263,7 +263,7 @@ export function KnowledgeSelectDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-260 -mt-50">
+      <DialogContent className="sm:max-w-[min(65rem,calc(100%-4rem))] max-w-[calc(100%-4rem)] flex max-h-[calc(100dvh-2rem)] [@media(min-height:64rem)]:-mt-50 flex-col overflow-hidden">
         <DialogHeader>
           <DialogTitle>{m.story_knowledgeDialog_title()}</DialogTitle>
         </DialogHeader>
@@ -280,7 +280,7 @@ export function KnowledgeSelectDialog({
           generalKbsLabel={m.story_knowledgeDialog_generalKbs()}
         />
 
-        <div className="h-80 overflow-y-auto rounded-md border p-1">
+        <div className="h-80 min-h-24 shrink overflow-y-auto rounded-md border p-1">
           {loading ? (
             <div className="flex h-full items-center justify-center text-sm text-muted-foreground">…</div>
           ) : items.length > 0 ? (
@@ -292,7 +292,7 @@ export function KnowledgeSelectDialog({
           )}
         </div>
 
-        <DialogFooter className="items-center justify-between gap-2 sm:justify-between">
+        <DialogFooter className="shrink-0 flex-row flex-wrap items-center justify-between gap-2 sm:justify-between">
           <div className="flex items-center gap-2 ml-3">
             <Checkbox
               id="kb-select-all"

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

@@ -126,13 +126,13 @@ export function LinkManageDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-130">
+      <DialogContent className="sm:max-w-[min(65rem,calc(100%-4rem))] max-w-[calc(100%-4rem)] flex max-h-[calc(100dvh-2rem)] [@media(min-height:64rem)]:-mt-50 flex-col overflow-hidden">
         <DialogHeader>
           <DialogTitle className="text-xl">
             {editing ? m.story_linkDialog_editTitle() : m.story_linkDialog_title()}
           </DialogTitle>
         </DialogHeader>
-        <form onSubmit={handleSubmit} className="flex h-96 flex-col gap-4 overflow-y-auto px-1 pb-1">
+        <form onSubmit={handleSubmit} className="flex h-96 min-h-24 shrink flex-col gap-4 overflow-y-auto px-1 pb-1">
           <div className="space-y-1.5">
             <label htmlFor="link-url" className="text-xs font-medium text-muted-foreground">
               URL