@allbluecn/web-app 0.5.0 → 0.6.0

package/src/routes/__root.tsx

@@ -26,8 +26,6 @@ import globalsCss from '@/styles/globals.css?url'
 import type { RouterContext } from '@/lib/router-context'
 import { Providers } from '@/providers'
 import { Toaster } from '@/components/ui/sonner'
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
-import { TanStackRouterDevtools } from '@tanstack/react-router-devtools'
 import { DevtoolsPanel } from '@allblue/devtools'
 import { getSessionFn } from '@/server/serverFns/auth/session'
 import { getLocaleFn } from '@/server/serverFns/locale'
@@ -82,12 +80,6 @@ function RootComponent() {
             <Outlet />
             <ShortcutsPanel />
             <Toaster position="top-center" />
-            {import.meta.env.DEV && (
-              <ReactQueryDevtools initialIsOpen={false} />
-            )}
-            {import.meta.env.DEV && (
-              <TanStackRouterDevtools initialIsOpen={false} />
-            )}
             {import.meta.env.DEV && <DevtoolsPanel />}
           </HotkeysProvider>
         </Providers>

package/src/routes/_nav/inspiration/route.tsx

@@ -0,0 +1,8 @@
+// AUTO-GENERATED by @allbluecn/kernel — DO NOT EDIT
+import { createFileRoute } from '@tanstack/react-router'
+import type { PluginRouteContext } from '@allbluecn/kernel'
+import { inspiration_route_0 } from '@allbluecn/plugins-core/inspiration/routes'
+
+export const Route = createFileRoute('/_nav/inspiration')({
+  component: inspiration_route_0.Component as any,
+})

package/src/routes/_nav/knowledge/index.lazy.tsx

@@ -23,7 +23,7 @@ import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
 import { AnimatedGridPattern } from '@/components/magicui/animated-grid-pattern'
 import { BookOpenTextIcon } from '@/components/animated-icons/book-open-text'
-import { KnowledgeIconDisplay } from '@/components/knowledge/knowledge-icon'
+import { LucideIconByName } from '@/components/shared/lucide-icon-picker/lucide-icon-by-name'
 import { KnowledgeFormDialog } from '@/components/knowledge/dialog/knowledge-form-dialog'
 
 type KnowledgeList = ReturnType<typeof import('@/server/serverFns/knowledge')['listKnowledgeFn']> extends Promise<infer T> ? T : never
@@ -81,7 +81,7 @@ function KnowledgeListPage() {
                 <div className="flex-1">
                   <div className="flex items-start justify-between">
                     <div className="flex size-10 items-center justify-center rounded-lg bg-primary/10">
-                      <KnowledgeIconDisplay name={item.icon} size={20} />
+                      <LucideIconByName name={item.icon} size={20} />
                     </div>
                   </div>
                   <h3 className="mt-4 font-medium text-lg">{item.name}</h3>

package/src/routes/_nav/prd/$id/route.tsx

@@ -0,0 +1,9 @@
+// AUTO-GENERATED by @allbluecn/kernel — DO NOT EDIT
+import { createFileRoute } from '@tanstack/react-router'
+import type { PluginRouteContext } from '@allbluecn/kernel'
+import { prd_route_2 } from '@allbluecn/plugins-core/prd/routes'
+
+export const Route = createFileRoute('/_nav/prd/$id')({
+  beforeLoad: ((ctx: PluginRouteContext) => prd_route_2.beforeLoad(ctx)) as any,
+  component: prd_route_2.Component as any,
+})

package/src/routes/_nav/prd/index.tsx

@@ -0,0 +1,9 @@
+// AUTO-GENERATED by @allbluecn/kernel — DO NOT EDIT
+import { createFileRoute } from '@tanstack/react-router'
+import type { PluginRouteContext } from '@allbluecn/kernel'
+import { prd_route_1 } from '@allbluecn/plugins-core/prd/routes'
+
+export const Route = createFileRoute('/_nav/prd/')({
+  loader: ((ctx: PluginRouteContext) => prd_route_1.loader(ctx)) as any,
+  component: prd_route_1.Component as any,
+})

package/src/routes/_nav/prd/route.tsx

@@ -0,0 +1,8 @@
+// AUTO-GENERATED by @allbluecn/kernel — DO NOT EDIT
+import { createFileRoute } from '@tanstack/react-router'
+import type { PluginRouteContext } from '@allbluecn/kernel'
+import { prd_route_0 } from '@allbluecn/plugins-core/prd/routes'
+
+export const Route = createFileRoute('/_nav/prd')({
+  component: prd_route_0.Component as any,
+})

package/src/routes/_nav/projects/$projectId/$storyId/route.lazy.tsx

@@ -20,25 +20,44 @@ import { useTranslation } from "react-i18next";
 import { ArrowLeft, ChevronRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { ProjectIconDisplay } from "@/components/project/project-icon";
-import { PROJECT_MODULE_META } from "@/lib/project-mock";
+import { LucideIconByName } from "@/components/shared/lucide-icon-picker/lucide-icon-by-name";
+import { PROJECT_MODULE_META } from "@/lib/project-module-meta";
 import type { ProjectModuleItem } from "@/types/project";
 
-const STATUS_VARIANT: Record<string, "default" | "secondary" | "outline" | "destructive"> = {
-  已完成: "secondary",
-  已验收: "default",
-  已关闭: "outline",
-  进行中: "default",
-  待处理: "outline",
+const STATE_VARIANT: Record<string, "default" | "secondary" | "outline" | "destructive"> = {
+  done: "secondary",
+  cancelled: "outline",
+  in_progress: "default",
+  todo: "outline",
+  backlog: "outline",
 };
 
 const PRIORITY_VARIANT: Record<string, "default" | "secondary" | "outline" | "destructive"> = {
-  高: "destructive",
-  中: "secondary",
-  低: "outline",
+  urgent: "destructive",
+  high: "destructive",
+  medium: "secondary",
+  low: "outline",
+  none: "outline",
 };
 
-function ModuleRow({ item, t }: { item: ProjectModuleItem; t: (key: string) => string }) {
+const STATE_LABEL_KEYS: Record<string, string> = {
+  backlog: "state.backlog",
+  todo: "state.todo",
+  in_progress: "state.in_progress",
+  done: "state.done",
+  cancelled: "state.cancelled",
+};
+
+const PRIORITY_LABEL_KEYS: Record<string, string> = {
+  urgent: "priority.urgent",
+  high: "priority.high",
+  medium: "priority.medium",
+  low: "priority.low",
+  none: "priority.none",
+};
+
+function ModuleRow({ item, t }: { item: ProjectModuleItem; t: (key: string, opts?: Record<string, unknown>) => string }) {
+  const stateLabel = STATE_LABEL_KEYS[item.state] ?? item.state;
   return (
     <div className="flex items-center gap-4 px-4 py-3 transition-colors hover:bg-accent/40">
       <div className="min-w-0 flex-1">
@@ -47,9 +66,9 @@ function ModuleRow({ item, t }: { item: ProjectModuleItem; t: (key: string) => s
           {t('module.assigneeLabel')}{item.assignee ?? t('module.unassigned')}
         </p>
       </div>
-      <Badge variant={STATUS_VARIANT[item.status] ?? "outline"}>{item.status}</Badge>
+      <Badge variant={STATE_VARIANT[item.state] ?? "outline"}>{t(`story:${stateLabel}`)}</Badge>
       <Badge variant={PRIORITY_VARIANT[item.priority] ?? "outline"} className="hidden sm:inline-flex">
-        {item.priority}
+        {t(`story:${PRIORITY_LABEL_KEYS[item.priority] ?? item.priority}`)}
       </Badge>
       <span className="hidden text-xs text-muted-foreground md:block">
         {new Intl.DateTimeFormat("zh-CN", { month: "short", day: "numeric" }).format(new Date(item.updatedAt))}
@@ -60,7 +79,7 @@ function ModuleRow({ item, t }: { item: ProjectModuleItem; t: (key: string) => s
 }
 
 function ProjectModulePage() {
-  const { t } = useTranslation('projects');
+  const { t } = useTranslation(["projects", "story"]);
   const { project, items, moduleKey } = Route.useLoaderData();
   const meta = PROJECT_MODULE_META[moduleKey];
   const Icon = meta.icon;
@@ -86,25 +105,33 @@ function ProjectModulePage() {
             <p className="text-sm text-muted-foreground">{meta.description}</p>
           </div>
           <div className="ml-auto flex items-center gap-2">
-            <ProjectIconDisplay name={project.icon} size={20} />
+            <LucideIconByName name={project.icon} size={20} />
             <span className="text-sm text-muted-foreground">{project.name}</span>
           </div>
         </div>
 
         <div className="mb-3 flex items-center justify-between">
           <p className="text-sm text-muted-foreground">
-            {t('module.totalItems', { count: items.length })} · {t('module.mockDataLabel')}
+            {t('projects:module.totalItems', { count: items.length })}
           </p>
-          <Badge variant="outline" className="text-muted-foreground">
-            {t('module.mockBadge')}
-          </Badge>
+          {moduleKey === "requirement" && (
+            <Badge variant="outline" className="text-muted-foreground">
+              {t('projects:module.liveBadge')}
+            </Badge>
+          )}
         </div>
 
-        <div className="divide-y rounded-lg border bg-card">
-          {items.map((item) => (
-            <ModuleRow key={item.id} item={item} t={t} />
-          ))}
-        </div>
+        {items.length === 0 ? (
+          <div className="rounded-lg border bg-card px-4 py-10 text-center text-sm text-muted-foreground">
+            {t('projects:module.empty')}
+          </div>
+        ) : (
+          <div className="divide-y rounded-lg border bg-card">
+            {items.map((item) => (
+              <ModuleRow key={item.id} item={item} t={t} />
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );

package/src/routes/_nav/projects/$projectId/$storyId/route.tsx

@@ -17,10 +17,10 @@
 
 import { createFileRoute, notFound } from "@tanstack/react-router";
 import { getProjectDetailFn } from "@/server/serverFns/project";
+import { listModuleStoriesFn } from "@/server/serverFns/project/module-overview";
 import {
-  listModuleItems,
   PROJECT_MODULE_KEYS,
-} from "@/lib/project-mock";
+} from "@/lib/project-module-meta";
 import type { ProjectModuleKey } from "@/types/project";
 
 export const Route = createFileRoute("/_nav/projects/$projectId/$storyId")({
@@ -32,7 +32,10 @@ export const Route = createFileRoute("/_nav/projects/$projectId/$storyId")({
     const project = await getProjectDetailFn({
       data: { projectId: params.projectId },
     });
-    const items = listModuleItems(params.projectId, moduleKey);
+    const items =
+      moduleKey === "requirement"
+        ? (await listModuleStoriesFn({ data: { projectId: params.projectId } })).items
+        : [];
     return { project, items, moduleKey };
   },
 });

package/src/routes/_nav/projects/$projectId/index.lazy.tsx

@@ -17,17 +17,17 @@
 
 import { createLazyFileRoute, Link, useLoaderData } from "@tanstack/react-router";
 import { useTranslation } from "react-i18next";
-import { Settings, LayoutGrid, Activity as ActivityIcon } from "lucide-react";
+import { Settings, LayoutGrid, Activity as ActivityIcon, CalendarRange } from "lucide-react";
 import { useTheme } from "next-themes";
 import { UserAvatar } from "@allbluecn/ui";
 import type { AvatarConfig, ShapeType } from "@allbluecn/shared";
 import { Button } from "@/components/ui/button";
 import { AvatarGroup } from "@/components/magicui/components/animate/avatar-group";
 import { GlyphMatrix } from "@/components/magicui/glyph-matrix";
-import { ProjectAnimatedIcon } from "@/components/project/project-animated-icon";
+import { LucideIconByName } from "@/components/shared/lucide-icon-picker/lucide-icon-by-name";
 import { ProjectModuleCard } from "@/components/project/project-module-card";
 import { ProjectActivityList } from "@/components/project/project-activity-list";
-import { buildModuleOverview } from "@/lib/project-mock";
+import { PROJECT_MODULE_META, PROJECT_MODULE_KEYS } from "@/lib/project-module-meta";
 import { useMemo } from "react";
 import { formatInTimeZone } from "date-fns-tz";
 import { subDays } from "date-fns";
@@ -63,14 +63,20 @@ function buildContributionData(
 
 function ProjectDetailPage() {
   const { t } = useTranslation('projects');
-  const { project, members, activities } = useLoaderData({
+  const { project, members, activities, moduleOverview } = useLoaderData({
     from: "/_nav/projects/$projectId",
   });
   const { resolvedTheme } = useTheme();
   const glyphColor = resolvedTheme === "dark" ? "#6b7280" : "#9ca3af";
   const timezone = useTimezone();
 
-  const modules = buildModuleOverview(project.id);
+  const modules = PROJECT_MODULE_KEYS.map((key) => ({
+    ...PROJECT_MODULE_META[key],
+    count: moduleOverview[key]?.count ?? 0,
+    lastUpdatedAt: moduleOverview[key]?.lastUpdatedAt
+      ? new Date(moduleOverview[key]!.lastUpdatedAt!)
+      : null,
+  }));
   const contributionData = useMemo(
     () => buildContributionData(activities, timezone),
     [activities, timezone],
@@ -85,16 +91,27 @@ function ProjectDetailPage() {
       </div>
       <div className="relative z-10 mx-auto max-w-6xl px-6 py-6">
         <div className="relative mb-10 mt-2 flex flex-col items-center py-10 text-center">
-          <Button variant="outline" size="sm" asChild className="absolute right-0 top-0">
-            <Link
-              to="/projects/$projectId/settings"
-              params={{ projectId: project.id }}
-            >
-              <Settings className="size-4" />
-              {t('detail.settings')}
-            </Link>
-          </Button>
-          <ProjectAnimatedIcon name={project.icon} size={56} className="mb-4 text-primary" />
+          <div className="absolute right-0 top-0 flex gap-2">
+            <Button variant="outline" size="sm" asChild>
+              <Link
+                to="/projects/$projectId/iterations"
+                params={{ projectId: project.id }}
+              >
+                <CalendarRange className="size-4" />
+                {t('detail.iterations')}
+              </Link>
+            </Button>
+            <Button variant="outline" size="sm" asChild>
+              <Link
+                to="/projects/$projectId/settings"
+                params={{ projectId: project.id }}
+              >
+                <Settings className="size-4" />
+                {t('detail.settings')}
+              </Link>
+            </Button>
+          </div>
+          <LucideIconByName name={project.icon} size={56} className="mb-4 text-primary" />
           <h1 className="text-3xl font-semibold">{project.name}</h1>
           <p className="mt-2 max-w-2xl text-sm text-muted-foreground">
             {project.description || t('detail.noDescription')}

package/src/routes/_nav/projects/$projectId/iterations/$iterationId/route.lazy.tsx

@@ -0,0 +1,289 @@
+// 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 { useState } from "react";
+import { createLazyFileRoute, Link, useLoaderData, useRouter } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+import { CalendarRange, MoreVertical, Pencil, Trash2, Archive, ArchiveX, Plus } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { IterationStatusBadge } from "@/components/iteration/iteration-status-badge";
+import { IterationProgressBar } from "@/components/iteration/iteration-progress-bar";
+import { BurndownChart } from "@/components/iteration/burndown-chart";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { StorySelectDialog } from "@/components/story/inline-editors/story-select-dialog";
+import { listIterationStoriesFn, archiveIterationsFn, deleteIterationsFn, transferUnfinishedFn, getIterationBurndownFn, listIterationsFn, addStoriesToIterationFn } from "@/server/serverFns/iteration";
+import { listProjectsBriefFn } from "@/server/serverFns/project";
+import { toast } from "@/components/ui/sonner";
+import { useQuery } from "@tanstack/react-query";
+import type { IterationSummary } from "@/server/serverFns/iteration/schemas";
+import type { StoryState } from "@/components/story/constants";
+
+interface IterationStoryRow {
+  id: string;
+  identifier: string;
+  name: string;
+  state: StoryState;
+  priority: string;
+  assignee?: { id: string; username: string; email: string; avatarConfig?: any; bgShape?: string; bgColor?: string } | null;
+}
+
+export const Route = createLazyFileRoute("/_nav/projects/$projectId/iterations/$iterationId")({
+  component: IterationDetailPage,
+});
+
+function IterationDetailPage() {
+  const { t } = useTranslation("iterations");
+  const { iteration, stories } = useLoaderData({ from: "/_nav/projects/$projectId/iterations/$iterationId" }) as {
+    iteration: IterationSummary;
+    stories: { items: IterationStoryRow[] };
+  };
+  const projectId = Route.useParams().projectId;
+  const iterationId = Route.useParams().iterationId;
+  const today = new Date().toISOString().slice(0, 10);
+  const remainingDays = Math.round((Date.parse(iteration.endDate) - Date.parse(today)) / 86400000);
+  const isCompleted = iteration.status === "completed";
+  const isOverdue = remainingDays < 0;
+  const [transferOpen, setTransferOpen] = useState(false);
+  const [addStoryOpen, setAddStoryOpen] = useState(false);
+  const router = useRouter();
+
+  const { data: burndown, isLoading: burndownLoading } = useQuery({
+    queryKey: ["iteration-burndown", iterationId],
+    queryFn: () => getIterationBurndownFn({ data: { iterationId } }),
+    enabled: iteration.storyCount > 0,
+  });
+
+  async function handleRemoveStory(storyId: string) {
+    await import("@/server/serverFns/iteration/iteration-stories").then((m) => m.removeStoryFromIterationFn({ data: { storyId } }));
+    toast.success(t("actions.removeStory"));
+  }
+
+  return (
+    <div className="h-full overflow-y-auto">
+      <div className="mx-auto max-w-4xl px-6 py-6">
+        {/* Header */}
+        <div className="mb-6 flex items-start justify-between">
+          <div>
+            <Link to="/projects/$projectId/iterations" params={{ projectId }} className="text-sm text-muted-foreground hover:text-foreground">
+              ← {t("title")}
+            </Link>
+            <div className="mt-2 flex items-center gap-3">
+              <h1 className="text-2xl font-semibold">{iteration.name}</h1>
+              <IterationStatusBadge status={iteration.status} />
+            </div>
+            <p className="mt-1 text-sm text-muted-foreground">
+              {iteration.startDate} ~ {iteration.endDate}
+              {iteration.status === "active" && !isOverdue && (
+                <span className="ml-2">({t("progress.remainingDays", { days: remainingDays })})</span>
+              )}
+              {isOverdue && (
+                <span className="ml-2 text-red-500">{t("progress.overdueDays", { days: Math.abs(remainingDays) })}</span>
+              )}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button variant="outline" size="sm" disabled={isCompleted}>
+              <Pencil className="mr-1 size-4" />
+              {t("actions.edit")}
+            </Button>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm">
+                  <MoreVertical className="size-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem onClick={() => void (async () => {
+                  await archiveIterationsFn({ data: { id: iterationId, archived: !iteration.archived } });
+                  toast.success(iteration.archived ? t("actions.unarchive") : t("actions.archive"));
+                })()}>
+                  {iteration.archived ? <ArchiveX className="mr-2 size-4" /> : <Archive className="mr-2 size-4" />}
+                  {iteration.archived ? t("actions.unarchive") : t("actions.archive")}
+                </DropdownMenuItem>
+                <DropdownMenuItem className="text-destructive" onClick={() => document.getElementById(`delete-iter-${iterationId}`)?.click()}>
+                  <Trash2 className="mr-2 size-4" />
+                  {t("actions.delete")}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <AlertDialog>
+              <AlertDialogTrigger asChild>
+                <Button variant="destructive" size="sm" id={`delete-iter-${iterationId}`} className="hidden">Delete</Button>
+              </AlertDialogTrigger>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>{t("actions.delete")}</AlertDialogTitle>
+                  <AlertDialogDescription>{t("errors.deleteConfirm")}</AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>{t("actions.cancel")}</AlertDialogCancel>
+                  <AlertDialogAction
+                    onClick={async () => {
+                      await deleteIterationsFn({ data: { id: iterationId } });
+                      toast.success(t("actions.delete"));
+                      void router.navigate({ to: "/projects/$projectId/iterations", params: { projectId } });
+                    }}
+                  >
+                    {t("actions.delete")}
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+            {isCompleted && (
+              <Button variant="outline" size="sm" onClick={() => setTransferOpen(true)}>
+                {t("actions.transfer")}
+              </Button>
+            )}
+            {!isCompleted && (
+              <Button variant="outline" size="sm" onClick={() => setAddStoryOpen(true)}>
+                <Plus className="mr-1 size-4" />
+                {t("actions.addStories")}
+              </Button>
+            )}
+          </div>
+        </div>
+
+        {/* Stats + Burndown */}
+        {iteration.storyCount > 0 && (
+          <div className="mb-6 space-y-4">
+            <div className="rounded-lg border bg-card p-4">
+              <IterationProgressBar stateCounts={iteration.stateCounts} />
+            </div>
+            <div className="rounded-lg border bg-card p-4">
+              {burndownLoading ? (
+                <div className="flex h-48 items-center justify-center text-sm text-muted-foreground">加载中...</div>
+              ) : burndown ? (
+                <BurndownChart data={burndown} />
+              ) : null}
+            </div>
+          </div>
+        )}
+
+        {/* Stories list */}
+        <div className="space-y-2">
+          {stories.items.length === 0 ? (
+            <p className="py-8 text-center text-sm text-muted-foreground">{t("empty.description")}</p>
+          ) : (
+            stories.items.map((story) => (
+              <div key={story.id} className="flex items-center gap-3 rounded-lg border bg-card px-4 py-3">
+                <span className="font-mono text-xs text-muted-foreground">{story.identifier}</span>
+                <Link to="/stories/$storyId" params={{ storyId: story.id }} className="flex-1 text-sm font-medium hover:underline">
+                  {story.name}
+                </Link>
+                <span className="text-xs text-muted-foreground">{story.state}</span>
+                <Button variant="ghost" size="sm" className="ml-auto text-muted-foreground" onClick={() => void handleRemoveStory(story.id)}>
+                  {t("actions.removeStory")}
+                </Button>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* Transfer dialog */}
+      <TransferDialog open={transferOpen} onOpenChange={setTransferOpen} iterationId={iterationId} projectId={projectId} onSaved={() => void router.invalidate()} />
+      <AddStoriesDialog open={addStoryOpen} onOpenChange={setAddStoryOpen} iterationId={iterationId} projectId={projectId} onAdded={() => void router.invalidate()} />
+    </div>
+  );
+}
+
+function TransferDialog({ open, onOpenChange, iterationId, projectId, onSaved }: { open: boolean; onOpenChange: (v: boolean) => void; iterationId: string; projectId: string; onSaved?: () => void }) {
+  const { t } = useTranslation("iterations");
+  const [targetId, setTargetId] = useState("");
+  const [loading, setLoading] = useState(false);
+  const { data } = useQuery({
+    queryKey: ["iterations-list", projectId],
+    queryFn: () => listIterationsFn({ data: { projectId, includeArchived: false } }),
+    enabled: open,
+  });
+  const targets = (data?.items ?? []).filter((i: IterationSummary) => i.status !== "completed");
+
+  async function handleTransfer() {
+    if (!targetId) return;
+    setLoading(true);
+    try {
+      const r = await transferUnfinishedFn({ data: { iterationId, targetIterationId: targetId } });
+      toast.success(t("transfer.success", { count: r.count }));
+      onSaved?.();
+      onOpenChange(false);
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "转移失败");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t("transfer.title")}</DialogTitle>
+        </DialogHeader>
+        <p className="text-sm text-muted-foreground">{t("transfer.description")}</p>
+        <div className="space-y-2 py-4">
+          <label className="text-sm font-medium">{t("transfer.target")}</label>
+          <select
+            className="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors"
+            value={targetId}
+            onChange={(e) => setTargetId(e.target.value)}
+          >
+            <option value="">{t("transfer.noTarget") ?? "请选择目标迭代"}</option>
+            {targets.map((i: IterationSummary) => (
+              <option key={i.id} value={i.id}>{i.name} ({i.startDate} ~ {i.endDate})</option>
+            ))}
+          </select>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>{t("actions.cancel")}</Button>
+          <Button onClick={() => void handleTransfer()} disabled={!targetId || loading}>{loading ? "转移中..." : t("actions.transfer")}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function AddStoriesDialog({ open, onOpenChange, iterationId, projectId, onAdded }: { open: boolean; onOpenChange: (v: boolean) => void; iterationId: string; projectId: string; onAdded?: () => void }) {
+  const { t } = useTranslation("iterations");
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  const { data: projects } = useQuery({
+    queryKey: ["projects-brief"],
+    queryFn: () => listProjectsBriefFn(),
+  });
+
+  async function handleSelected(ids: string | string[]) {
+    const storyIds = Array.isArray(ids) ? ids : [ids];
+    if (!storyIds.length) return;
+    await addStoriesToIterationFn({ data: { iterationId, storyIds } });
+    toast.success(t("actions.addStories"));
+    onAdded?.();
+    onOpenChange(false);
+  }
+
+  return (
+    <StorySelectDialog
+      open={open}
+      onOpenChange={onOpenChange}
+      storyId=""
+      projects={projects ?? []}
+      mode="iteration"
+      title={t("actions.addStories")}
+      onSelected={handleSelected}
+    />
+  );
+}

package/src/routes/_nav/projects/$projectId/iterations/$iterationId/route.tsx

@@ -0,0 +1,27 @@
+// 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 { createFileRoute, notFound } from "@tanstack/react-router";
+import { getIterationFn, listIterationStoriesFn } from "@/server/serverFns/iteration";
+
+export const Route = createFileRoute("/_nav/projects/$projectId/iterations/$iterationId")({
+  loader: async ({ params }) => {
+    const iteration = await getIterationFn({ data: { id: params.iterationId } });
+    const stories = await listIterationStoriesFn({ data: { iterationId: params.iterationId } });
+    return { iteration, stories };
+  },
+});