@allbluecn/web-app 0.5.0 → 0.6.0

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

@@ -50,24 +50,29 @@ export function StoryDetailCategories() {
   return (
     <>
       {CATEGORIES.map((cat) => (
-        <Popover key={cat.key}>
-          <PopoverTrigger asChild>
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md"
-              title={t(cat.tooltip)}
-            >
-              <cat.icon className="size-3.5 text-muted-foreground" />
-              {t(cat.label)}
-            </Button>
-          </PopoverTrigger>
-          <PopoverContent align="start" className="w-[320px] p-4">
-            <div className="text-sm text-muted-foreground">
-              {t(cat.placeholder)}
-            </div>
-          </PopoverContent>
-        </Popover>
+        <React.Fragment key={cat.key}>
+          {cat.key === "bug" && (
+            <span className="mx-0.5 h-4 w-px shrink-0 bg-muted-foreground/20" />
+          )}
+          <Popover>
+            <PopoverTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md"
+                title={t(cat.tooltip)}
+              >
+                <cat.icon className="size-3.5 text-muted-foreground" />
+                {t(cat.label)}
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="start" className="w-[320px] p-4">
+              <div className="text-sm text-muted-foreground">
+                {t(cat.placeholder)}
+              </div>
+            </PopoverContent>
+          </Popover>
+        </React.Fragment>
       ))}
     </>
   );

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

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import * as React from "react";
-import { useNavigate } from "@tanstack/react-router";
 import { useTranslation } from "react-i18next";
 import {
   Plus,
@@ -66,6 +65,7 @@ export interface StoryDetailChildrenPanelProps {
   projects?: { id: string; name: string; icon: string; displayId: string | null }[];
   labels?: { id: string; name: string; color: string }[];
   onAction: (action: "create" | "select") => void;
+  onNavigateInPanel?: (targetId: string, targetIdentifier?: string, relationKind?: "child" | "dependency") => void;
 }
 
 export function StoryDetailChildrenButton({ onAction }: StoryDetailChildrenButtonProps) {
@@ -131,9 +131,9 @@ export function StoryDetailChildrenPanel({
   projects,
   labels,
   onAction,
+  onNavigateInPanel,
 }: StoryDetailChildrenPanelProps) {
   const { t } = useTranslation("story");
-  const navigate = useNavigate();
   const childrenList = data.children as StoryListItem[];
   const [selectedIds, setSelectedIds] = React.useState<Set<string>>(() => new Set());
   const [busy, setBusy] = React.useState(false);
@@ -176,7 +176,10 @@ export function StoryDetailChildrenPanel({
   };
 
   const handleOpenStory = (id: string) => {
-    navigate({ to: "/stories/$storyId", params: { storyId: id } });
+    if (onNavigateInPanel) {
+      const story = childrenList.find((s) => s.id === id);
+      onNavigateInPanel(id, story?.identifier);
+    }
   };
 
   const handleRemoveChild = async (childId: string) => {
@@ -321,7 +324,7 @@ export function StoryDetailChildrenPanel({
       <Collapsible defaultOpen>
         <CollapsibleTrigger
           asChild
-          className="group flex w-full cursor-pointer items-center gap-2 pb-3 pt-4 text-xs font-semibold hover:text-foreground transition-colors"
+          className="group flex w-full cursor-pointer select-none items-center gap-2 pb-3 pt-4 text-xs font-semibold hover:text-foreground transition-colors"
         >
           <div
             role="button"
@@ -448,6 +451,7 @@ export function StoryDetailChildrenPanel({
                                       children: prev.hierarchy.children.map((c) => c.id === storyId ? { ...c, ...patch } : c),
                                     },
                                   }));
+                                  refreshChildren();
                                 }
                               }}
                             />
@@ -495,6 +499,7 @@ export function StoryDetailChildrenPanel({
                               children: prev.hierarchy.children.map((c) => c.id === storyId ? { ...c, ...patch } : c),
                             },
                           }));
+                          refreshChildren();
                         }
                       }}
                     />

package/src/components/story/detail/story-detail-toolbar/dependency-panel.tsx

@@ -16,7 +16,6 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import * as React from "react";
-import { useNavigate } from "@tanstack/react-router";
 import { useTranslation } from "react-i18next";
 import { Plus, ChevronDown, ChartNoAxesGantt } from "lucide-react";
 import { Button } from "@/components/ui/button";
@@ -26,10 +25,12 @@ import { useServerFn } from "@tanstack/react-start";
 import { toast } from "sonner";
 import {
   removeDependencyFn,
+  updateDependencyFn,
   bulkArchiveStoriesFn,
   bulkDeleteStoriesFn,
   bulkUpdateStoriesFn,
 } from "@/server/serverFns/story";
+import { DEPENDENCY_TYPE_OPTIONS, toDependencyEdge, type DependencyTypeOption } from "../../constants";
 import { BatchToolbar } from "../../views/story-list/batch-toolbar";
 import { useGroupedStories } from "../../display/use-grouped-stories";
 import { VirtualGroupHeader } from "../../views/story-list/group";
@@ -59,6 +60,8 @@ export interface StoryDetailDependencyPanelProps {
   projects?: { id: string; name: string; icon: string; displayId: string | null }[];
   labels?: { id: string; name: string; color: string }[];
   onOpenAdd: () => void;
+  onAppendActivities?: (items: import("../../types").ActivityItem[]) => void;
+  onNavigateInPanel?: (targetId: string, targetIdentifier?: string, relationKind?: "child" | "dependency") => void;
 }
 
 export function StoryDetailDependencyPanel({
@@ -72,10 +75,12 @@ export function StoryDetailDependencyPanel({
   projects,
   labels,
   onOpenAdd,
+  onAppendActivities,
+  onNavigateInPanel,
 }: StoryDetailDependencyPanelProps) {
   const { t } = useTranslation("story");
-  const navigate = useNavigate();
   const removeDependency = useServerFn(removeDependencyFn);
+  const updateDependency = useServerFn(updateDependencyFn);
   const [selectedIds, setSelectedIds] = React.useState<Set<string>>(() => new Set());
   const [busy, setBusy] = React.useState(false);
   const [collapsed, setCollapsed] = React.useState<Record<string, boolean>>({});
@@ -135,7 +140,10 @@ export function StoryDetailDependencyPanel({
   };
 
   const handleOpenStory = (id: string) => {
-    navigate({ to: "/stories/$storyId", params: { storyId: id } });
+    if (onNavigateInPanel) {
+      const story = allRows.find((r) => r.id === id);
+      onNavigateInPanel(id, story?.identifier, "dependency");
+    }
   };
 
   const applyRowsUpdate = (
@@ -155,7 +163,12 @@ export function StoryDetailDependencyPanel({
       ? "dependsOn"
       : "dependents";
     try {
-      await removeDependency({ data: { depId: row.depId } });
+      const res = await removeDependency({ data: { depId: row.depId } });
+      // 两端各有一条记录，只追加当前需求的
+      const mine = (res?.activities ?? [])
+        .filter((a) => a.storyId === storyId)
+        .map(({ storyId: _sid, ...rest }) => rest);
+      if (mine.length > 0) onAppendActivities?.(mine);
       toast.success(t("dependency.removed"));
       applyRowsUpdate((rows) => rows.filter((r) => r.id !== rowId), group);
       setSelectedIds((prev) => {
@@ -168,13 +181,59 @@ export function StoryDetailDependencyPanel({
     }
   };
 
+  const handleDependencyTypeChange = async (
+    otherStoryId: string,
+    key: DependencyTypeOption["key"],
+  ) => {
+    const row = rowById.get(otherStoryId);
+    const option = DEPENDENCY_TYPE_OPTIONS.find((o) => o.key === key);
+    if (!row || !option) return;
+    const edge = toDependencyEdge(option, storyId, otherStoryId);
+    try {
+      const res = await updateDependency({ data: { depId: row.depId, ...edge } });
+      if (!res.ok) {
+        toast.warning(t(`dependency.errors.${res.reason}`));
+        return;
+      }
+      const mine = (res.activities ?? [])
+        .filter((a) => a.storyId === storyId)
+        .map(({ storyId: _sid, ...rest }) => rest);
+      if (mine.length > 0) onAppendActivities?.(mine);
+      toast.success(t("dependency.updated"));
+      // 行的 group 跟随 option 方向：同 group 原地更新，跨 group 移动到另一 section
+      const oldGroup: DependencySection = data.dependsOn.some((r) => r.id === otherStoryId)
+        ? "dependsOn"
+        : "dependents";
+      if (option.group === oldGroup) {
+        applyRowsUpdate(
+          (rows) => rows.map((r) => (r.id === otherStoryId ? { ...r, depType: option.edge } : r)),
+          oldGroup,
+        );
+      } else {
+        const moved = { ...row, depType: option.edge };
+        applyRowsUpdate((rows) => rows.filter((r) => r.id !== otherStoryId), oldGroup);
+        applyRowsUpdate((rows) => [moved, ...rows], option.group);
+      }
+    } catch (e) {
+      toast.error(
+        isNetworkError(e) ? t("dependency.networkFailed") : (e as Error)?.message || t("dependency.updateFailed"),
+      );
+    }
+  };
+
   const handleBulkRemoveRelations = async (storyIds: string[]) => {
     if (storyIds.length === 0) return;
     setBusy(true);
     try {
       for (const id of storyIds) {
         const row = rowById.get(id);
-        if (row) await removeDependency({ data: { depId: row.depId } });
+        if (row) {
+          const res = await removeDependency({ data: { depId: row.depId } });
+          const mine = (res?.activities ?? [])
+            .filter((a) => a.storyId === storyId)
+            .map(({ storyId: _sid, ...rest }) => rest);
+          if (mine.length > 0) onAppendActivities?.(mine);
+        }
       }
       toast.success(t("dependency.removed"));
       setSelectedIds(new Set());
@@ -288,6 +347,8 @@ export function StoryDetailDependencyPanel({
         next.delete(rowId);
         return next;
       });
+    } else {
+      refreshDependencies();
     }
   };
 
@@ -306,6 +367,7 @@ export function StoryDetailDependencyPanel({
       onRemove={handleRemoveRow}
       removeMenuLabel={t("dependency.remove")}
       dependencyMeta={{ depType: row.depType, group }}
+      onDependencyTypeChange={handleDependencyTypeChange}
       currentIdentifier={storyIdentifier}
       onStoryRefresh={handleStoryRefresh}
     />
@@ -354,35 +416,41 @@ export function StoryDetailDependencyPanel({
 
   const renderSection = (
     titleKey: string,
-    group: DependencySection,
+    sectionKey: DependencySection,
     rows: DependencyRow[],
     groups: GroupNode[],
-  ) => (
-    <div>
-      <div className="flex h-9 items-center gap-1.5 bg-muted/50 px-2">
-        <span className="text-sm font-medium">{t(titleKey)}</span>
-        <span className="inline-flex h-4 shrink-0 items-center rounded border px-1.5 text-[10px] font-normal text-muted-foreground whitespace-nowrap">
-          {rows.length}
-        </span>
-      </div>
-      {rows.length === 0 ? (
-        <p className="flex items-center gap-1.5 px-2 py-1.5 text-xs text-muted-foreground">
-          <span className="w-4 shrink-0" aria-hidden />
-          {t("relation.none")}
-        </p>
-      ) : filters.groupBy === "none" ? (
-        rows.map((row) => renderRow(row, group))
-      ) : (
-        groups.map((node) => renderGroupItems(node, group, 0, `${group}:${node.key}`))
-      )}
-    </div>
-  );
+  ) => {
+    const isCollapsed = collapsed[`${sectionKey}:root`] ?? false;
+    return (
+      <Collapsible open={!isCollapsed} onOpenChange={(open) => setCollapsed((p) => ({ ...p, [`${sectionKey}:root`]: !open }))}>
+        <CollapsibleTrigger asChild>
+          <div className="flex h-9 cursor-pointer select-none items-center gap-1.5 bg-muted/50 px-3 text-sm font-medium hover:text-foreground transition-colors">
+            <ChevronDown className={`size-3 shrink-0 text-muted-foreground transition-transform ${isCollapsed ? "-rotate-90" : "rotate-0"}`} />
+            <span>{t(titleKey)}</span>
+            <span className="ml-1 text-xs text-muted-foreground">{rows.length}</span>
+          </div>
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          {rows.length === 0 ? (
+            <p className="flex items-center gap-1.5 px-2 py-1.5 text-xs text-muted-foreground">
+              <span className="w-4 shrink-0" aria-hidden />
+              {t("relation.none")}
+            </p>
+          ) : filters.groupBy === "none" ? (
+            rows.map((row) => renderRow(row, sectionKey))
+          ) : (
+            groups.map((node) => renderGroupItems(node, sectionKey, 0, `${sectionKey}:${node.key}`))
+          )}
+        </CollapsibleContent>
+      </Collapsible>
+    );
+  };
 
   return (
     <Collapsible defaultOpen>
       <CollapsibleTrigger
         asChild
-        className="group flex w-full cursor-pointer items-center gap-2 pb-3 pt-4 text-xs font-semibold hover:text-foreground transition-colors"
+        className="group flex w-full cursor-pointer select-none items-center gap-2 pb-3 pt-4 text-xs font-semibold hover:text-foreground transition-colors"
       >
         <div
           role="button"

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

@@ -19,13 +19,20 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useServerFn } from "@tanstack/react-start";
 import { toast } from "sonner";
+import { LinkIcon, Paperclip, BookOpenText } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import { StoryDetailChildrenButton, StoryDetailChildrenPanel } from "./story-detail-toolbar/children";
 import { StoryDetailDependencies } from "./story-detail-toolbar/dependencies";
 import { StoryDetailDependencyPanel } from "./story-detail-toolbar/dependency-panel";
-import { StoryDetailLinks } from "./story-detail-toolbar/links";
-import { StoryDetailAttachments } from "./story-detail-toolbar/attachments";
-import { StoryDetailKnowledge } from "./story-detail-toolbar/knowledge";
 import { StoryDetailCategories } from "./story-detail-toolbar/categories";
+import {
+  AssociatedAttachmentsPanel,
+  type AssociatedDialogKind,
+} from "./story-detail-toolbar/associated-attachments-panel";
+import { LinkManageDialog } from "../relations/link-manage-dialog";
+import { AttachmentManageDialog } from "../relations/attachment-manage-dialog";
+import { KnowledgeSelectDialog } from "../relations/knowledge-select-dialog";
+import { getLinksFn, getAttachmentsFn, getLinkedDocsFn } from "@/server/serverFns/story";
 import { StorySelectDialog } from "../inline-editors/story-select-dialog";
 import { CreateStoryDialog } from "../create-story-dialog";
 import { addDependenciesFn, getDependenciesFn, listChildStoriesFn } from "@/server/serverFns/story";
@@ -39,15 +46,21 @@ interface StoryDetailToolbarProps {
   projectId: string | null;
   data: RelationsData;
   onRefresh: (next: (prev: RelationsData) => RelationsData) => void;
+  /** 关联类操作产生的活动即时追加到时间线 */
+  onAppendActivities?: (items: import("../types").ActivityItem[]) => void;
   users?: UserBrief[];
   projects?: { id: string; name: string; icon: string; displayId: string | null }[];
   labels?: { id: string; name: string; color: string }[];
+  onNavigateInPanel?: (targetId: string, targetIdentifier?: string, relationKind?: "child" | "dependency") => void;
 }
 
-export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data, onRefresh, users, projects, labels }: StoryDetailToolbarProps) {
+export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data, onRefresh, onAppendActivities, users, projects, labels, onNavigateInPanel }: StoryDetailToolbarProps) {
   const { t } = useTranslation("story");
   const [actionOpen, setActionOpen] = React.useState<"create" | "select" | null>(null);
   const [dependencyDialogOpen, setDependencyDialogOpen] = React.useState(false);
+  const [assocDialogOpen, setAssocDialogOpen] = React.useState<AssociatedDialogKind | null>(null);
+  const [linkInitialEdit, setLinkInitialEdit] = React.useState<import("../types").StoryLinkItem | null>(null);
+  const [editAttachment, setEditAttachment] = React.useState<import("../types").StoryAttachmentItem | null>(null);
   const [dependencyType, setDependencyType] = React.useState<DependencyTypeOption["key"] | undefined>(undefined);
   const addDependencies = useServerFn(addDependenciesFn);
 
@@ -78,6 +91,10 @@ export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data,
       const res = await addDependencies({ data: { items } });
       if (res.created.length > 0) {
         toast.success(t("dependency.added", { count: res.created.length }));
+        const mine = res.activities
+          .filter((a) => a.storyId === storyId)
+          .map(({ storyId: _sid, ...rest }) => rest);
+        if (mine.length > 0) onAppendActivities?.(mine);
       }
       if (res.failed.length > 0) {
         const reasons = [...new Set(res.failed.map((f) => t(`dependency.errors.${f.reason}`)))].join("、");
@@ -117,9 +134,46 @@ export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data,
     }
   };
 
-  const handleCreateSuccess = () => {
+  const handleCreateSuccess = (
+    _story: { id: string; name: string; identifier?: string },
+    activities?: import("../types").ActivityItem[],
+  ) => {
     setActionOpen(null);
     refreshChildren();
+    if (activities && activities.length > 0) onAppendActivities?.(activities);
+  };
+
+  const refreshLinks = async () => {
+    try {
+      const links = await getLinksFn({ data: { storyId } });
+      onRefresh((prev) => ({ ...prev, links }));
+    } catch {
+      // 静默兜底
+    }
+  };
+
+  const refreshAttachments = async () => {
+    try {
+      const attachments = await getAttachmentsFn({ data: { storyId } });
+      onRefresh((prev) => ({ ...prev, attachments }));
+    } catch {
+      // 静默兜底
+    }
+  };
+
+  const refreshKnowledge = async () => {
+    try {
+      const docs = await getLinkedDocsFn({ data: { storyId } });
+      onRefresh((prev) => ({ ...prev, knowledge: { ...prev.knowledge, docs } }));
+    } catch {
+      // 静默兜底
+    }
+  };
+
+  const handleOpenAssocDialog = (kind: AssociatedDialogKind, editLink?: import("../types").StoryLinkItem, editAttachmentItem?: import("../types").StoryAttachmentItem) => {
+    setLinkInitialEdit(editLink ?? null);
+    setEditAttachment(editAttachmentItem ?? null);
+    setAssocDialogOpen(kind);
   };
 
   return (
@@ -133,9 +187,48 @@ export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data,
 
         <span className="mx-0.5 h-4 w-px shrink-0 bg-muted-foreground/20" />
 
-        <StoryDetailLinks storyId={storyId} data={data} onRefresh={onRefresh} />
-        <StoryDetailAttachments storyId={storyId} data={data} onRefresh={onRefresh} />
-        <StoryDetailKnowledge storyId={storyId} data={data} onRefresh={onRefresh} />
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md"
+          onClick={() => handleOpenAssocDialog("link")}
+        >
+          <LinkIcon className="size-3.5 text-muted-foreground" />
+          {t("linkDialog.button")}
+          {data.links.length > 0 && (
+            <span className="ml-0.5 inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
+              {data.links.length}
+            </span>
+          )}
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md"
+          onClick={() => handleOpenAssocDialog("attachment")}
+        >
+          <Paperclip className="size-3.5 text-muted-foreground" />
+          {t("attachmentDialog.button")}
+          {data.attachments.length > 0 && (
+            <span className="ml-0.5 inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
+              {data.attachments.length}
+            </span>
+          )}
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-7 gap-1.5 px-2.5 text-xs font-normal hover:bg-muted rounded-md"
+          onClick={() => handleOpenAssocDialog("knowledge")}
+        >
+          <BookOpenText className="size-3.5 text-muted-foreground" />
+          {t("knowledgeDialog.button")}
+          {data.knowledge.docs.length > 0 && (
+            <span className="ml-0.5 inline-flex min-w-[18px] items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
+              {data.knowledge.docs.length}
+            </span>
+          )}
+        </Button>
 
         <span className="mx-0.5 h-4 w-px shrink-0 bg-muted-foreground/20" />
 
@@ -152,6 +245,7 @@ export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data,
         projects={projects}
         labels={labels}
         onAction={handleChildAction}
+        onNavigateInPanel={onNavigateInPanel}
       />
 
       <StoryDetailDependencyPanel
@@ -165,6 +259,16 @@ export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data,
         projects={projects}
         labels={labels}
         onOpenAdd={() => setDependencyDialogOpen(true)}
+        onAppendActivities={onAppendActivities}
+        onNavigateInPanel={onNavigateInPanel}
+      />
+
+      <AssociatedAttachmentsPanel
+        storyId={storyId}
+        data={data}
+        onRefresh={onRefresh}
+        onOpenDialog={handleOpenAssocDialog}
+        onAppendActivities={onAppendActivities}
       />
 
       <StorySelectDialog
@@ -216,6 +320,53 @@ export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data,
         initialProjectId={projectId ?? undefined}
         onSuccess={handleCreateSuccess}
       />
+
+      <LinkManageDialog
+        open={assocDialogOpen === "link"}
+        onOpenChange={(v) => {
+          if (!v) {
+            setAssocDialogOpen(null);
+            setLinkInitialEdit(null);
+          }
+        }}
+        storyId={storyId}
+        data={data.links}
+        initialEdit={linkInitialEdit}
+        onActivity={(a) => onAppendActivities?.([a])}
+        onUpdate={(links) => {
+          onRefresh((prev) => ({ ...prev, links }));
+          void refreshLinks();
+        }}
+      />
+
+      <AttachmentManageDialog
+        open={assocDialogOpen === "attachment"}
+        onOpenChange={(v) => {
+          if (!v) { setAssocDialogOpen(null); setEditAttachment(null); }
+        }}
+        storyId={storyId}
+        data={data.attachments}
+        editItem={editAttachment}
+        onActivity={(a) => onAppendActivities?.([a])}
+        onUpdate={(attachments) => {
+          onRefresh((prev) => ({ ...prev, attachments }));
+          void refreshAttachments();
+        }}
+      />
+
+      <KnowledgeSelectDialog
+        open={assocDialogOpen === "knowledge"}
+        onOpenChange={(v) => {
+          if (!v) setAssocDialogOpen(null);
+        }}
+        storyId={storyId}
+        linkedDocs={data.knowledge.docs}
+        onActivity={(a) => onAppendActivities?.([a])}
+        onUpdate={(docs) => {
+          onRefresh((prev) => ({ ...prev, knowledge: { ...prev.knowledge, docs } }));
+          void refreshKnowledge();
+        }}
+      />
     </div>
   );
 }

package/src/components/story/detail/story-properties.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 { GitPullRequestArrow, Tag } from "lucide-react";
+import { GitPullRequestArrow, Tag, CalendarRange } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { ChevronDown } from "lucide-react";
@@ -23,6 +23,8 @@ import type { StoryState } from "../constants";
 import type { ActivityItem } from "../types";
 import { ParentStoryEditor } from "../inline-editors/parent-story-editor";
 import { LabelsEditor } from "../inline-editors/labels-editor";
+import { IterationEditor } from "@/components/iteration/iteration-editor";
+import type { IterationSummary } from "@/server/serverFns/iteration/schemas";
 
 interface PropertyItemProps {
   icon: React.ReactNode;
@@ -45,15 +47,20 @@ function PropertyItem({ icon, label, children }: PropertyItemProps) {
 interface StoryPropertiesProps {
   story: {
     id: string;
+    name: string;
+    description?: string | null;
     parentId: string | null;
     parent: { id: string; title: string; status: StoryState; identifier?: string } | null;
     labels: { id: string; name: string; color: string }[];
     projectId?: string | null;
+    iteration?: { id: string; name: string } | null;
   };
   labels?: { id: string; name: string; color: string }[];
   projects?: { id: string; name: string; icon: string; displayId?: string | null }[];
+  iterations?: IterationSummary[];
   onParentChange: (parentId: string | null) => void;
   onLabelsChange: (labelIds: string[]) => void;
+  onIterationChange?: (iteration: { id: string; name: string } | null) => void;
   onActivities?: (activities: ActivityItem[]) => void;
 }
 
@@ -61,8 +68,10 @@ export function StoryProperties({
   story,
   labels,
   projects,
+  iterations,
   onParentChange,
   onLabelsChange,
+  onIterationChange,
   onActivities,
 }: StoryPropertiesProps) {
   const { t } = useTranslation("story");
@@ -71,7 +80,7 @@ export function StoryProperties({
       <div className="px-6 py-4 text-sm font-semibold">{t("properties.title")}</div>
       <CollapsibleContent className="px-6 pb-2 space-y-2">
         <Collapsible defaultOpen>
-          <CollapsibleTrigger className="flex items-center gap-2 pb-4 text-xs font-semibold hover:text-foreground transition-colors">
+          <CollapsibleTrigger className="flex select-none items-center gap-2 pb-4 text-xs font-semibold hover:text-foreground transition-colors">
             {t("properties.basic")}
             <ChevronDown className="size-3" />
           </CollapsibleTrigger>
@@ -98,18 +107,26 @@ export function StoryProperties({
                   labels={labels}
                   onChange={onLabelsChange}
                   variant="button"
+                  aiContext={{ name: () => story.name, description: () => story.description ?? undefined }}
                 />
               </PropertyItem>
             )}
           </CollapsibleContent>
         </Collapsible>
         <Collapsible>
-          <CollapsibleTrigger className="flex items-center gap-2 pb-4 text-xs font-semibold hover:text-foreground transition-colors">
+          <CollapsibleTrigger className="flex select-none items-center gap-2 pb-4 text-xs font-semibold hover:text-foreground transition-colors">
             {t("properties.iteration")}
             <ChevronDown className="size-3" />
           </CollapsibleTrigger>
           <CollapsibleContent className="pb-2">
-            {/* 迭代属性区域 - 预留 */}
+            <PropertyItem icon={<CalendarRange className="size-3.5" />} label={t("properties.iteration")}>
+              <IterationEditor
+                storyId={story.id}
+                current={story.iteration ?? null}
+                options={iterations ?? []}
+                onChanged={(it) => onIterationChange?.(it)}
+              />
+            </PropertyItem>
           </CollapsibleContent>
         </Collapsible>
       </CollapsibleContent>