@allbluecn/web-app 0.5.0 → 0.6.0

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

@@ -0,0 +1,192 @@
+// 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 * as React from "react";
+import { useTranslation } from "react-i18next";
+import { useServerFn } from "@tanstack/react-start";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { addLinkFn, updateLinkFn } from "@/server/serverFns/story";
+import type { StoryLinkItem } from "../types";
+
+export interface LinkManageDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  storyId: string;
+  data: StoryLinkItem[];
+  onUpdate: (links: StoryLinkItem[]) => void;
+  /** 添加链接产生的活动，供时间线即时追加 */
+  onActivity?: (activity: import("../types").ActivityItem) => void;
+  /** 非空时进入编辑态（由合并面板「编辑」触发） */
+  initialEdit?: StoryLinkItem | null;
+}
+
+export function LinkManageDialog({
+  open,
+  onOpenChange,
+  storyId,
+  data,
+  onUpdate,
+  onActivity,
+  initialEdit = null,
+}: LinkManageDialogProps) {
+  const { t } = useTranslation("story");
+  const addLink = useServerFn(addLinkFn);
+  const updateLink = useServerFn(updateLinkFn);
+  const [editing, setEditing] = React.useState<StoryLinkItem | null>(null);
+  const [form, setForm] = React.useState({ url: "", title: "", description: "" });
+  const [submitting, setSubmitting] = React.useState(false);
+
+  React.useEffect(() => {
+    if (open) {
+      setEditing(initialEdit);
+      setForm(
+        initialEdit
+          ? { url: initialEdit.url, title: initialEdit.title ?? "", description: initialEdit.description ?? "" }
+          : { url: "", title: "", description: "" },
+      );
+    }
+  }, [open, initialEdit]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (submitting) return;
+    setSubmitting(true);
+    try {
+      if (editing) {
+        const updated = await updateLink({
+          data: {
+            linkId: editing.id,
+            url: form.url,
+            title: form.title || undefined,
+            description: form.description || undefined,
+          },
+        });
+        toast.success(t("linkDialog.updated"));
+        if (updated.activity) onActivity?.(updated.activity);
+        onUpdate(
+          data.map((l) =>
+            l.id === editing.id
+              ? { ...l, url: form.url, title: form.title || null, description: form.description || null }
+              : l,
+          ),
+        );
+      } else {
+        const created = await addLink({
+          data: {
+            storyId,
+            url: form.url,
+            title: form.title || undefined,
+            description: form.description || undefined,
+          },
+        });
+        toast.success(t("linkDialog.added"));
+        if (created.activity) onActivity?.(created.activity);
+        onUpdate([
+          ...data,
+          {
+            id: created.id,
+            url: created.url,
+            title: created.title,
+            description: created.description,
+          },
+        ]);
+        setForm({ url: "", title: "", description: "" });
+      }
+      setEditing(null);
+      onOpenChange(false);
+    } catch (err) {
+      toast.error((err as Error)?.message || t("linkDialog.saveFailed"));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-130">
+        <DialogHeader>
+          <DialogTitle className="text-xl">
+            {t(editing ? "linkDialog.editTitle" : "linkDialog.title")}
+          </DialogTitle>
+        </DialogHeader>
+        <form onSubmit={handleSubmit} className="flex h-96 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
+            </label>
+            <Input
+              id="link-url"
+              type="url"
+              required
+              placeholder={t("linkDialog.urlPlaceholder")}
+              value={form.url}
+              onChange={(e) => setForm({ ...form, url: e.target.value })}
+              className="h-10 text-base"
+            />
+          </div>
+          <div className="space-y-1.5">
+            <label htmlFor="link-title" className="text-xs font-medium text-muted-foreground">
+              {t("linkDialog.titleOptional")}
+            </label>
+            <Input
+              id="link-title"
+              placeholder={t("linkDialog.titlePlaceholder")}
+              value={form.title}
+              onChange={(e) => setForm({ ...form, title: e.target.value })}
+              className="h-10"
+            />
+          </div>
+          <div className="flex min-h-0 flex-1 flex-col gap-1.5">
+            <label htmlFor="link-desc" className="text-xs font-medium text-muted-foreground">
+              {t("linkDialog.descOptional")}
+            </label>
+            <Textarea
+              id="link-desc"
+              placeholder={t("linkDialog.descPlaceholder")}
+              value={form.description}
+              onChange={(e) => setForm({ ...form, description: e.target.value })}
+              className="min-h-20 flex-1 resize-none"
+            />
+          </div>
+          <div className="flex shrink-0 justify-end gap-2 pt-1">
+            {editing && (
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+              >
+                {t("linkDialog.cancel")}
+              </Button>
+            )}
+            <Button type="submit" disabled={submitting}>
+              {t(editing ? "linkDialog.save" : "linkDialog.add")}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

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 {
@@ -145,7 +146,9 @@ export interface StoryAttachmentItem {
   fileName: string;
   fileSize: number;
   mimeType: string;
+  description?: string | null;
   storageUrl: string;
+  fileHash?: string | null;
 }
 
 // PRD 简要信息
@@ -158,6 +161,11 @@ export interface PrdBrief {
 export interface DocBrief {
   id: string;
   title: string;
+  kbId: string;
+  kbName: string;
+  kbIcon: string;
+  docIcon: string | null;
+  parentId: string | null;
 }
 
 // 关联 Tab 数据汇总
@@ -176,6 +184,12 @@ export interface RelationsData {
   };
 }
 
+/** 关联附件面板统一数据类型 */
+export type AssociatedItem =
+  | { kind: "link"; data: StoryLinkItem }
+  | { kind: "attachment"; data: StoryAttachmentItem }
+  | { kind: "doc"; data: DocBrief };
+
 // ====== 依赖关系（对齐 Plane，新模型） ======
 
 // 规范化存储类型：语义统一为「source 领先于 target」

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 && (