@allbluecn/web-app 0.5.1 → 0.6.1

package/src/components/story/detail/story-detail-toolbar/associated-attachments-panel.tsx

@@ -35,11 +35,14 @@ import {
   ShieldOff,
   Trash2,
   Unlink,
+  ChartNoAxesGantt,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
 import { FilePreview } from "@/components/story/relations/file-preview";
 import { resolveVideoEmbed } from "@/lib/story/video-embed";
 import { removeLinkFn, removeAttachmentFn, unlinkDocFn, checkLinkEmbeddableFn } from "@/server/serverFns/story";
@@ -47,7 +50,7 @@ import { getDocumentFn } from "@/server/serverFns/knowledge";
 import { sanitize } from "@/lib/sanitize";
 import { formatFileSize, getFaviconUrl, getFileTypeIcon, extractLinkTitle, getMimeTypeLabel } from "../../relations/format";
 import { generalGroupLabel } from "../../relations/general-groups";
-import { KnowledgeIconDisplay } from "@/components/knowledge/knowledge-icon";
+import { LucideIconByName } from "@/components/shared/lucide-icon-picker/lucide-icon-by-name";
 import type { AssociatedItem, RelationsData, StoryLinkItem, StoryAttachmentItem } from "../../types";
 
 export type AssociatedDialogKind = "link" | "attachment" | "knowledge";
@@ -57,6 +60,7 @@ export interface AssociatedAttachmentsPanelProps {
   data: RelationsData;
   onRefresh: (next: (prev: RelationsData) => RelationsData) => void;
   onOpenDialog: (kind: AssociatedDialogKind, editLink?: StoryLinkItem, editAttachment?: StoryAttachmentItem) => void;
+  onAppendActivities?: (items: import("../../types").ActivityItem[]) => void;
 }
 
 // 记住列表/预览显示方式
@@ -297,6 +301,7 @@ export function AssociatedAttachmentsPanel({
   data,
   onRefresh,
   onOpenDialog,
+  onAppendActivities,
 }: AssociatedAttachmentsPanelProps) {
   const { t } = useTranslation("story");
   const removeLink = useServerFn(removeLinkFn);
@@ -305,6 +310,35 @@ export function AssociatedAttachmentsPanel({
   const [mode, setMode] = React.useState<"list" | "preview">("list");
   const [groupCollapsed, setGroupCollapsed] = React.useState<Record<string, boolean>>({});
   const [fullscreenAttachment, setFullscreenAttachment] = React.useState<StoryAttachmentItem | null>(null);
+  const [activeTypeFilters, setActiveTypeFilters] = React.useState<Set<string>>(new Set());
+
+  // 附件类型分组定义
+  const attachmentTypeGroups = React.useMemo(() => {
+    const groups: Array<{ key: string; label: string; count: number }> = [];
+    const typeMap = new Map<string, number>();
+
+    for (const item of data.attachments) {
+      const type = getMimeTypeLabel(item.mimeType, item.fileName);
+      typeMap.set(type, (typeMap.get(type) ?? 0) + 1);
+    }
+
+    const order = ["图片", "视频", "音频", "PDF", "压缩包", "文本", "Word", "表格", "演示", "电子书", "未识别文件"];
+    for (const type of order) {
+      const count = typeMap.get(type) ?? 0;
+      if (count > 0) groups.push({ key: type, label: type, count });
+    }
+
+    return groups;
+  }, [data.attachments]);
+
+  // 根据筛选条件过滤附件
+  const filteredAttachments = React.useMemo(() => {
+    if (activeTypeFilters.size === 0) return data.attachments;
+    return data.attachments.filter((a) => {
+      const type = getMimeTypeLabel(a.mimeType, a.fileName);
+      return activeTypeFilters.has(type);
+    });
+  }, [data.attachments, activeTypeFilters]);
 
   // 下次进入时恢复上次的显示方式（挂载后读取，避免 SSR hydration 不匹配）
   React.useEffect(() => {
@@ -333,16 +367,26 @@ export function AssociatedAttachmentsPanel({
     const linkItems = items.filter((i) => i.kind === "link");
     const attachmentItems = items.filter((i) => i.kind === "attachment");
     const docItems = items.filter((i) => i.kind === "doc");
+
+    // 如果启用了附件类型筛选，则过滤 attachmentItems
+    const filteredAttachmentItems = activeTypeFilters.size > 0
+      ? attachmentItems.filter((item) => {
+          const type = getMimeTypeLabel(item.data.mimeType, item.data.fileName);
+          return activeTypeFilters.has(type);
+        })
+      : attachmentItems;
+
     return [
       { kind: "link" as const, label: t("associatedAttachments.groupLink"), count: linkItems.length, items: linkItems },
-      { kind: "attachment" as const, label: t("associatedAttachments.groupAttachment"), count: attachmentItems.length, items: attachmentItems },
+      { kind: "attachment" as const, label: t("associatedAttachments.groupAttachment"), count: filteredAttachmentItems.length, items: filteredAttachmentItems },
       { kind: "doc" as const, label: t("associatedAttachments.groupKb"), count: docItems.length, items: docItems },
     ].filter((g) => g.count > 0);
-  }, [items, t]);
+  }, [items, t, activeTypeFilters]);
 
   const handleRemoveLink = async (id: string) => {
     try {
-      await removeLink({ data: { linkId: id } });
+      const res = await removeLink({ data: { linkId: id } });
+      if (res?.activity) onAppendActivities?.([res.activity]);
       onRefresh((prev) => ({ ...prev, links: prev.links.filter((l) => l.id !== id) }));
     } catch (err) {
       toast.error((err as Error)?.message || t("linkDialog.removeFailed"));
@@ -351,7 +395,8 @@ export function AssociatedAttachmentsPanel({
 
   const handleRemoveAttachment = async (id: string) => {
     try {
-      await removeAttachment({ data: { attachmentId: id } });
+      const res = await removeAttachment({ data: { attachmentId: id } });
+      if (res?.activity) onAppendActivities?.([res.activity]);
       onRefresh((prev) => ({
         ...prev,
         attachments: prev.attachments.filter((a) => a.id !== id),
@@ -363,7 +408,8 @@ export function AssociatedAttachmentsPanel({
 
   const handleUnlinkDoc = async (docId: string) => {
     try {
-      await unlinkDoc({ data: { storyId, docId } });
+      const res = await unlinkDoc({ data: { storyId, docId } });
+      if (res?.activity) onAppendActivities?.([res.activity]);
       onRefresh((prev) => ({
         ...prev,
         knowledge: { ...prev.knowledge, docs: prev.knowledge.docs.filter((d) => d.id !== docId) },
@@ -558,7 +604,7 @@ export function AssociatedAttachmentsPanel({
         <span className="w-4 shrink-0" aria-hidden />
         <BookOpenText className="size-4 shrink-0 text-muted-foreground" />
         <span className="min-w-0 flex-1 truncate text-sm text-foreground">{item.data.title}</span>
-        <KnowledgeIconDisplay name={item.data.kbIcon} size={14} className="shrink-0 text-muted-foreground" />
+        <LucideIconByName name={item.data.kbIcon} size={14} className="shrink-0 text-muted-foreground" />
         <span className="shrink-0 text-xs text-muted-foreground">{item.data.kbId.startsWith("ext:") ? generalGroupLabel(t, item.data.kbName) : item.data.kbName}</span>
         <div className="flex items-center gap-0.5 shrink-0">{renderActionsInline(item)}</div>
       </div>
@@ -619,7 +665,7 @@ export function AssociatedAttachmentsPanel({
           <span className="min-w-0 truncate text-sm font-medium text-foreground">{item.data.title}</span>
         </div>
         <div className="flex items-center gap-1.5">
-          <KnowledgeIconDisplay name={item.data.kbIcon} size={12} className="shrink-0 text-muted-foreground" />
+          <LucideIconByName name={item.data.kbIcon} size={12} className="shrink-0 text-muted-foreground" />
           <span className="truncate text-xs text-muted-foreground">{item.data.kbId.startsWith("ext:") ? generalGroupLabel(t, item.data.kbName) : item.data.kbName}</span>
         </div>
         <div className="absolute right-2 top-2 hidden gap-0.5 rounded-md border bg-background p-0.5 group-hover:flex">
@@ -693,7 +739,70 @@ export function AssociatedAttachmentsPanel({
                     <ChevronDown className={`size-3 shrink-0 text-muted-foreground transition-transform ${isCollapsed ? "-rotate-90" : "rotate-0"}`} />
                     <span>{group.label}</span>
                     <span className="ml-1 text-xs text-muted-foreground">{group.count}</span>
-                    <div className="ml-auto flex items-center" onClick={(e) => e.stopPropagation()}>
+                    <div className="ml-auto flex items-center gap-1" onClick={(e) => e.stopPropagation()}>
+                      {group.kind === "attachment" && (
+                        <Popover>
+                          <PopoverTrigger asChild>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              className={`size-6 p-0 ${activeTypeFilters.size > 0 ? "bg-muted text-foreground" : ""}`}
+                              aria-label={t("associatedAttachments.filter")}
+                              title={t("associatedAttachments.filter")}
+                            >
+                              <ChartNoAxesGantt className="size-3.5" />
+                              {activeTypeFilters.size > 0 && (
+                                <span className="absolute -right-1 -top-1 size-1.5 rounded-full bg-primary" />
+                              )}
+                            </Button>
+                          </PopoverTrigger>
+                          <PopoverContent align="end" className="w-52 p-2">
+                            <div className="text-xs font-medium text-muted-foreground my-1 px-1">
+                              {t("associatedAttachments.filterByType")}
+                            </div>
+                            <div className="flex flex-wrap gap-1">
+                              <button
+                                type="button"
+                                onClick={() => {
+                                  if (activeTypeFilters.size === attachmentTypeGroups.length) {
+                                    setActiveTypeFilters(new Set());
+                                  } else {
+                                    setActiveTypeFilters(new Set(attachmentTypeGroups.map((g) => g.key)));
+                                  }
+                                }}
+                                className={cn(
+                                  "rounded border px-2 py-0.5 text-xs transition-all",
+                                  activeTypeFilters.size === attachmentTypeGroups.length && attachmentTypeGroups.length > 0
+                                    ? "border-primary bg-primary text-primary-foreground"
+                                    : "border-border text-muted-foreground hover:bg-muted hover:text-foreground",
+                                )}
+                              >
+                                {t("associatedAttachments.filterAll")}
+                              </button>
+                              {attachmentTypeGroups.map((g) => (
+                                <button
+                                  type="button"
+                                  key={g.key}
+                                  onClick={() => {
+                                    const next = new Set(activeTypeFilters);
+                                    if (next.has(g.key)) next.delete(g.key);
+                                    else next.add(g.key);
+                                    setActiveTypeFilters(next);
+                                  }}
+                                  className={cn(
+                                    "rounded border px-2 py-0.5 text-xs transition-all",
+                                    activeTypeFilters.has(g.key)
+                                      ? "border-primary bg-primary text-primary-foreground"
+                                      : "border-border text-muted-foreground hover:bg-muted hover:text-foreground",
+                                  )}
+                                >
+                                  {g.label}({g.count})
+                                </button>
+                              ))}
+                            </div>
+                          </PopoverContent>
+                        </Popover>
+                      )}
                       <Button
                         variant="ghost"
                         size="sm"

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"

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());
@@ -308,6 +367,7 @@ export function StoryDetailDependencyPanel({
       onRemove={handleRemoveRow}
       removeMenuLabel={t("dependency.remove")}
       dependencyMeta={{ depType: row.depType, group }}
+      onDependencyTypeChange={handleDependencyTypeChange}
       currentIdentifier={storyIdentifier}
       onStoryRefresh={handleStoryRefresh}
     />
@@ -364,7 +424,7 @@ export function StoryDetailDependencyPanel({
     return (
       <Collapsible open={!isCollapsed} onOpenChange={(open) => setCollapsed((p) => ({ ...p, [`${sectionKey}:root`]: !open }))}>
         <CollapsibleTrigger asChild>
-          <div className="flex h-9 cursor-pointer items-center gap-1.5 bg-muted/50 px-3 text-sm font-medium hover:text-foreground transition-colors">
+          <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>
@@ -390,7 +450,7 @@ export function StoryDetailDependencyPanel({
     <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

@@ -51,9 +51,10 @@ interface StoryDetailToolbarProps {
   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, onAppendActivities, 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);
@@ -244,6 +245,7 @@ export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data,
         projects={projects}
         labels={labels}
         onAction={handleChildAction}
+        onNavigateInPanel={onNavigateInPanel}
       />
 
       <StoryDetailDependencyPanel
@@ -257,6 +259,8 @@ export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data,
         projects={projects}
         labels={labels}
         onOpenAdd={() => setDependencyDialogOpen(true)}
+        onAppendActivities={onAppendActivities}
+        onNavigateInPanel={onNavigateInPanel}
       />
 
       <AssociatedAttachmentsPanel
@@ -264,6 +268,7 @@ export function StoryDetailToolbar({ storyId, storyIdentifier, projectId, data,
         data={data}
         onRefresh={onRefresh}
         onOpenDialog={handleOpenAssocDialog}
+        onAppendActivities={onAppendActivities}
       />
 
       <StorySelectDialog

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>

package/src/components/story/display/__tests__/group-fields.test.ts

@@ -0,0 +1,107 @@
+// 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 } from "vitest";
+import { GROUP_FIELD, toGroupFieldPatch } from "../group-fields";
+
+describe("GROUP_FIELD", () => {
+  it("state 映射到 state", () => {
+    expect(GROUP_FIELD.state).toBe("state");
+  });
+
+  it("priority 映射到 priority", () => {
+    expect(GROUP_FIELD.priority).toBe("priority");
+  });
+
+  it("assignee 映射到 assigneeId", () => {
+    expect(GROUP_FIELD.assignee).toBe("assigneeId");
+  });
+
+  it("project 映射到 projectId", () => {
+    expect(GROUP_FIELD.project).toBe("projectId");
+  });
+
+  it("createdBy 为 null", () => {
+    expect(GROUP_FIELD.createdBy).toBeNull();
+  });
+
+  it("labels 为 null", () => {
+    expect(GROUP_FIELD.labels).toBeNull();
+  });
+
+  it("none 为 null", () => {
+    expect(GROUP_FIELD.none).toBeNull();
+  });
+});
+
+describe("toGroupFieldPatch", () => {
+  describe("state 字段", () => {
+    it("todo → { state: todo }", () => {
+      expect(toGroupFieldPatch("state", "todo")).toEqual({ state: "todo" });
+    });
+
+    it("backlog → { state: backlog }", () => {
+      expect(toGroupFieldPatch("state", "backlog")).toEqual({ state: "backlog" });
+    });
+
+    it("in_progress → { state: in_progress }", () => {
+      expect(toGroupFieldPatch("state", "in_progress")).toEqual({ state: "in_progress" });
+    });
+
+    it("done → { state: done }", () => {
+      expect(toGroupFieldPatch("state", "done")).toEqual({ state: "done" });
+    });
+
+    it("cancelled → { state: cancelled }", () => {
+      expect(toGroupFieldPatch("state", "cancelled")).toEqual({ state: "cancelled" });
+    });
+  });
+
+  describe("priority 字段", () => {
+    it("high → { priority: high }", () => {
+      expect(toGroupFieldPatch("priority", "high")).toEqual({ priority: "high" });
+    });
+
+    it("urgent → { priority: urgent }", () => {
+      expect(toGroupFieldPatch("priority", "urgent")).toEqual({ priority: "urgent" });
+    });
+
+    it("none → { priority: none }", () => {
+      expect(toGroupFieldPatch("priority", "none")).toEqual({ priority: "none" });
+    });
+  });
+
+  describe("assigneeId 字段", () => {
+    it("unassigned → { assigneeId: null }", () => {
+      expect(toGroupFieldPatch("assigneeId", "unassigned")).toEqual({ assigneeId: null });
+    });
+
+    it("普通 userId → { assigneeId: userId }", () => {
+      expect(toGroupFieldPatch("assigneeId", "u123")).toEqual({ assigneeId: "u123" });
+    });
+  });
+
+  describe("projectId 字段", () => {
+    it("no-project → { projectId: null }", () => {
+      expect(toGroupFieldPatch("projectId", "no-project")).toEqual({ projectId: null });
+    });
+
+    it("普通 projectId → { projectId: projectId }", () => {
+      expect(toGroupFieldPatch("projectId", "proj1")).toEqual({ projectId: "proj1" });
+    });
+  });
+});

package/src/components/story/display/group-resolver.tsx

@@ -17,7 +17,7 @@
 
 import { Sprout, CircleUser } from "lucide-react";
 import { UserAvatar } from "@allbluecn/ui";
-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 { STORY_STATES, STATE_LABEL, STATE_COLOR, STATE_ICON, STORY_PRIORITIES, PRIORITY_LABEL, PRIORITY_ICON } from "../constants";
 import { PRIORITY_COLOR } from "../priority-icon";
@@ -127,7 +127,7 @@ export function resolveGroupIcon(k: string, groupKey: GroupKey, ctx: GroupContex
     }
     if (!project) return undefined;
     const IconComponent = ({ className }: { className?: string }) => (
-      <ProjectIconDisplay name={project.icon} size={16} className={className} />
+      <LucideIconByName name={project.icon} size={16} className={className} />
     );
     return IconComponent;
   }