@allbluecn/web-app 0.5.0 → 0.6.0

package/src/components/iteration/create-iteration-dialog.tsx

@@ -0,0 +1,140 @@
+// 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 { useTranslation } from "react-i18next";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { createIterationsFn, updateIterationsFn } from "@/server/serverFns/iteration";
+import { toast } from "@/components/ui/sonner";
+import type { IterationSummary } from "@/server/serverFns/iteration/schemas";
+
+interface CreateIterationDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  projectId: string;
+  editing?: IterationSummary | null;
+  onSaved?: () => void;
+}
+
+export function CreateIterationDialog({ open, onOpenChange, projectId, editing, onSaved }: CreateIterationDialogProps) {
+  const { t } = useTranslation("iterations");
+  const [name, setName] = useState(editing?.name ?? "");
+  const [startDate, setStartDate] = useState(editing?.startDate ?? "");
+  const [endDate, setEndDate] = useState(editing?.endDate ?? "");
+  const [description, setDescription] = useState(editing?.description ?? "");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSubmit() {
+    setError(null);
+    if (!name.trim()) {
+      toast.error(t("errors.nameRequired"));
+      return;
+    }
+    if (startDate && endDate && startDate > endDate) {
+      toast.error(t("errors.invalidRange"));
+      return;
+    }
+    setLoading(true);
+    try {
+      if (editing) {
+        await updateIterationsFn({
+          data: {
+            id: editing.id,
+            name: name.trim(),
+            description: description.trim() || undefined,
+            ...(startDate ? { startDate } : {}),
+            ...(endDate ? { endDate } : {}),
+          },
+        });
+        toast.success(t("actions.edit"));
+      } else {
+        await createIterationsFn({
+          data: {
+            projectId,
+            name: name.trim(),
+            description: description.trim() || undefined,
+            startDate,
+            endDate,
+          },
+        });
+        toast.success(t("actions.create"));
+      }
+      onSaved?.();
+      onOpenChange(false);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(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>{editing ? t("actions.edit") : t("actions.create")}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4 py-4">
+          <div className="space-y-2">
+            <label className="text-sm font-medium leading-none">{t("fields.name")}</label>
+            <Input
+              placeholder={t("fields.namePlaceholder")}
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); void handleSubmit(); } }}
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <label className="text-sm font-medium leading-none">{t("fields.startDate")}</label>
+              <Input type="date" value={startDate} onChange={(e) => setStartDate(e.target.value)} />
+            </div>
+            <div className="space-y-2">
+              <label className="text-sm font-medium leading-none">{t("fields.endDate")}</label>
+              <Input type="date" value={endDate} onChange={(e) => setEndDate(e.target.value)} />
+            </div>
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm font-medium leading-none">{t("fields.description")}</label>
+            <Textarea
+              placeholder={t("fields.description")}
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              className="min-h-[80px]"
+            />
+          </div>
+          {error && <p className="text-xs text-destructive">{error}</p>}
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>{t("actions.cancel")}</Button>
+          <Button onClick={() => void handleSubmit()} disabled={loading}>{loading ? t("actions.saving") : t("actions.save")}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/iteration/iteration-card.tsx

@@ -0,0 +1,60 @@
+// 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 { Link } from "@tanstack/react-router";
+import { useTranslation } from "react-i18next";
+import { IterationStatusBadge } from "./iteration-status-badge";
+import { IterationProgressBar } from "./iteration-progress-bar";
+import type { IterationSummary } from "@/server/serverFns/iteration/schemas";
+
+export function IterationCard({ item, projectId }: { item: IterationSummary; projectId: string }) {
+  const { t } = useTranslation("iterations");
+  const today = new Date().toISOString().slice(0, 10);
+  const remainingDays = Math.round((Date.parse(item.endDate) - Date.parse(today)) / 86400000);
+  const isOverdue = remainingDays < 0 && item.status === "active";
+
+  return (
+    <Link
+      to="/projects/$projectId/iterations/$iterationId"
+      params={{ projectId, iterationId: item.id }}
+      className="block rounded-lg border bg-card p-4 transition-colors hover:border-primary/50"
+    >
+      <div className="flex items-start justify-between gap-2">
+        <div className="min-w-0">
+          <div className="flex items-center gap-2">
+            <h3 className="truncate text-sm font-semibold">{item.name}</h3>
+            <IterationStatusBadge status={item.status} />
+          </div>
+          <p className="mt-1 text-xs text-muted-foreground">
+            {item.startDate} ~ {item.endDate}
+            {item.status === "active" && !isOverdue && (
+              <span className="ml-2 text-muted-foreground/80">{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>
+      {item.storyCount > 0 && (
+        <div className="mt-3">
+          <IterationProgressBar stateCounts={item.stateCounts} />
+        </div>
+      )}
+    </Link>
+  );
+}

package/src/components/iteration/iteration-editor.tsx

@@ -0,0 +1,116 @@
+// 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 { ChevronDown, X } from "lucide-react";
+import { useTranslation } from "react-i18next";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { Command, CommandEmpty, CommandGroup, CommandItem, CommandList } from "@/components/ui/command";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { setStoryIterationFn } from "@/server/serverFns/iteration";
+import { toast } from "@/components/ui/sonner";
+import type { IterationSummary } from "@/server/serverFns/iteration/schemas";
+
+interface IterationEditorProps {
+  storyId: string;
+  current: { id: string; name: string } | null;
+  options: IterationSummary[];
+  onChanged: (iteration: { id: string; name: string } | null) => void;
+}
+
+export function IterationEditor({ storyId, current, options, onChanged }: IterationEditorProps) {
+  const { t } = useTranslation("iterations");
+  const [open, setOpen] = useState(false);
+  const [pendingId, setPendingId] = useState<string | null>(null);
+  const joinable = options.filter((i) => i.status !== "completed");
+
+  async function executePick(id: string | null) {
+    setPendingId(null);
+    await setStoryIterationFn({ data: { storyId, iterationId: id } });
+    const next = id ? joinable.find((i) => i.id === id) ?? null : null;
+    toast.success(id && next ? t("editor.setSuccess", { name: next.name }) : t("editor.clearSuccess"));
+    onChanged(next ? { id: next.id, name: next.name } : null);
+  }
+
+  function handlePick(id: string | null) {
+    setOpen(false);
+    if (current && id && current.id !== id) {
+      setPendingId(id);
+    } else {
+      void executePick(id);
+    }
+  }
+
+  return (
+    <>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button variant="ghost" size="sm" className="h-6 justify-start gap-1 px-1 text-xs font-normal">
+            {current ? current.name : <span className="text-muted-foreground">{t("editor.placeholder")}</span>}
+            {current ? (
+              <X
+                className="ml-1 size-3 hover:text-destructive"
+                onClick={(e) => { e.stopPropagation(); void executePick(null); }}
+              />
+            ) : null}
+            <ChevronDown className="ml-auto size-3 text-muted-foreground" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-56 p-0" align="start">
+          <Command>
+            <CommandList>
+              <CommandEmpty>{t("editor.none")}</CommandEmpty>
+              <CommandGroup>
+                {joinable.map((i) => (
+                  <CommandItem key={i.id} value={i.id} onSelect={() => handlePick(i.id)}>
+                    {i.name}
+                    <span className="ml-auto text-xs text-muted-foreground">{i.startDate} ~ {i.endDate}</span>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+
+      <AlertDialog open={pendingId !== null} onOpenChange={(v) => { if (!v) setPendingId(null); }}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t("editor.confirmSwitch", { name: current?.name ?? "" })}</AlertDialogTitle>
+            <AlertDialogDescription />
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => setPendingId(null)}>{t("actions.cancel")}</AlertDialogCancel>
+            <AlertDialogAction onClick={() => { if (pendingId) void executePick(pendingId); }}>
+              {t("actions.confirm")}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

package/src/components/iteration/iteration-progress-bar.tsx

@@ -0,0 +1,44 @@
+// 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 { useTranslation } from "react-i18next";
+import { STATE_COLOR } from "@/components/story/constants";
+import type { StoryState } from "@/components/story/constants";
+
+const ORDER: StoryState[] = ["backlog", "todo", "in_progress", "done", "cancelled"];
+
+export function IterationProgressBar({ stateCounts }: { stateCounts: Record<string, number> }) {
+  const { t } = useTranslation("iterations");
+  const total = ORDER.reduce((a, s) => a + (stateCounts[s] ?? 0), 0);
+  const denom = total - (stateCounts.cancelled ?? 0);
+  const percent = denom > 0 ? Math.round(((stateCounts.done ?? 0) / denom) * 100) : 0;
+  return (
+    <div className="space-y-1">
+      <div className="flex h-1.5 w-full overflow-hidden rounded-full bg-muted">
+        {ORDER.map((s) => {
+          const n = stateCounts[s] ?? 0;
+          if (!n) return null;
+          return <div key={s} className={STATE_COLOR[s]} style={{ width: `${(n / Math.max(1, total)) * 100}%` }} />;
+        })}
+      </div>
+      <div className="flex items-center justify-between text-xs text-muted-foreground">
+        <span>{t("progress.total")}: {total}</span>
+        <span>{t("progress.percent")}: {percent}%</span>
+      </div>
+    </div>
+  );
+}

package/src/components/iteration/iteration-status-badge.tsx

@@ -0,0 +1,33 @@
+// 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 { useTranslation } from "react-i18next";
+import { ITERATION_STATUS_META } from "./constants";
+import type { IterationStatus } from "@/lib/iteration/status";
+import { cn } from "@/lib/utils";
+
+export function IterationStatusBadge({ status }: { status: IterationStatus }) {
+  const { t } = useTranslation("iterations");
+  const meta = ITERATION_STATUS_META[status];
+  const Icon = meta.icon;
+  return (
+    <span className={cn("inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium", meta.className)}>
+      <Icon className="size-3" />
+      {t(meta.labelKey)}
+    </span>
+  );
+}

package/src/components/knowledge/dialog/knowledge-form-dialog.tsx

@@ -21,17 +21,14 @@ import { useForm } from "@tanstack/react-form";
 import { useRouter } from "@tanstack/react-router";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
   DialogFooter,
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { IconPicker } from "@/components/shared/icon-picker";
-import { KNOWLEDGE_ICONS } from "@/components/shared/icon-packs/knowledge";
+import { LucideIconPicker } from "@/components/shared/lucide-icon-picker";
 import { createKnowledgeFn, updateKnowledgeFn } from "@/server/serverFns/knowledge";
 import { knowledgeFormSchema, type KnowledgeFormValues } from "../schemas/knowledge-form";
 
@@ -53,7 +50,7 @@ export function KnowledgeFormDialog({ open, onOpenChange, kb, onSuccess }: Knowl
     defaultValues: {
       name: kb?.name ?? "",
       description: kb?.description ?? "",
-      icon: kb?.icon ?? "notebook",
+      icon: kb?.icon ?? "",
     },
     validators: [{ run: knowledgeFormSchema as any, triggers: ['change'] }],
   });
@@ -102,7 +99,7 @@ export function KnowledgeFormDialog({ open, onOpenChange, kb, onSuccess }: Knowl
 
   const handleOpenChange = (newOpen: boolean) => {
     if (newOpen) {
-      form.setFieldValue("icon", kb?.icon ?? "notebook");
+      form.setFieldValue("icon", kb?.icon ?? "");
       form.setFieldValue("name", kb?.name ?? "");
       form.setFieldValue("description", kb?.description ?? "");
       setError("");
@@ -112,27 +109,22 @@ export function KnowledgeFormDialog({ open, onOpenChange, kb, onSuccess }: Knowl
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogContent className="sm:max-w-200">
-        <DialogHeader className="p-4">
-          <DialogTitle>{isEdit ? t('kbForm.title.edit') : t('kbForm.title.create')}</DialogTitle>
-          <DialogDescription>
-            {isEdit ? t('kbForm.description.edit') : t('kbForm.description.create')}
-          </DialogDescription>
+      <DialogContent className="sm:max-w-260 -mt-50">
+        <DialogHeader>
+          <DialogTitle className="text-xl">
+            {isEdit ? t('kbForm.title.edit') : t('kbForm.title.create')}
+          </DialogTitle>
         </DialogHeader>
 
-        <div className="space-y-4 p-4">
-          <div className="flex flex-col gap-3 mb-20">
+        <div className="space-y-3 overflow-y-auto px-4 py-2 max-h-[60vh]">
+          <div className="flex gap-2">
             <form.Field name="icon" children={(field) => (
-              <IconPicker
-                icons={KNOWLEDGE_ICONS}
-                value={field.value ?? "notebook"}
+              <LucideIconPicker
+                value={field.value}
                 onChange={(v) => field.handleChange(v)}
+                modal
               />
             )} />
-          </div>
-
-          <div className="flex flex-col gap-3">
-            <label className="text-sm font-medium ml-2">{t('kbForm.nameLabel')}</label>
             <form.Field name="name" children={(field) => (
               <Input
                 value={field.value ?? ""}
@@ -140,7 +132,7 @@ export function KnowledgeFormDialog({ open, onOpenChange, kb, onSuccess }: Knowl
                 onBlur={field.handleBlur}
                 placeholder={t('kbForm.namePlaceholder')}
                 maxLength={50}
-                autoFocus
+                className="h-10 min-w-0 flex-1"
                 onKeyDown={(e) => {
                   if (e.key === "Enter" && !e.shiftKey) {
                     e.preventDefault();
@@ -151,26 +143,25 @@ export function KnowledgeFormDialog({ open, onOpenChange, kb, onSuccess }: Knowl
             )} />
           </div>
 
-          <div className="flex flex-col gap-3">
-            <label className="text-sm font-medium ml-2">{t('kbForm.descriptionLabel')}</label>
-            <form.Field name="description" children={(field) => (
-              <Textarea
+          <form.Field name="description" children={(field) => (
+            <div className="notion-full-width min-h-50 max-h-150 flex flex-col overflow-y-auto border rounded-md border-border">
+              <textarea
                 value={field.value ?? ""}
                 onChange={(e) => field.handleChange(e.target.value)}
                 onBlur={field.handleBlur}
                 placeholder={t('kbForm.descriptionPlaceholder')}
                 maxLength={200}
-                rows={2}
+                className="flex-1 min-h-0 resize-none bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground"
               />
-            )} />
-          </div>
+            </div>
+          )} />
 
           {error && (
             <p className="text-sm text-destructive break-words">{error}</p>
           )}
         </div>
 
-        <DialogFooter>
+        <DialogFooter className="items-center gap-3">
           <Button variant="outline" onClick={() => handleOpenChange(false)}>
             {t('kbForm.cancel')}
           </Button>