@allbluecn/web-app 0.3.0

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

@@ -0,0 +1,352 @@
+// 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 { useCallback, useEffect, useRef, useState } from "react"
+import { CalendarCheck, CalendarPlus2, Sprout } from "lucide-react"
+import { UserAvatar } from "@allbluecn/ui"
+import { useForm } from "@tanstack/react-form"
+import { useTranslation } from "react-i18next"
+import { ProjectIconDisplay } from "@/components/project/project-icon"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+
+import { Checkbox } from "@/components/ui/checkbox"
+import { Switch } from "@/components/ui/switch"
+import { Calendar } from "@/components/ui/calendar"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+
+import { createStoryFn } from "@/server/serverFns/story"
+import { ensureBuiltinProjectFn } from "@/server/serverFns/project"
+import { STORY_STATES } from "./constants"
+import type { StoryPriority, StoryState } from "./constants"
+import type { UserBrief } from "./types"
+import { serializeStoryDescription } from "./types"
+import { StateEditor, PriorityEditor, AssigneeEditor, DateEditor, LabelsEditor } from "./inline-editors"
+import { createStorySchema, type CreateStoryValues } from "./schemas/story-create"
+
+import { NotionDocEditor } from "@allbluecn/tiptap/notion-like"
+import { StoryAiToolbar } from "./ai/story-ai-toolbar"
+import { useStoryAiModel } from "./ai/use-story-ai-model"
+
+interface CreateStoryDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  users: UserBrief[]
+  projects: { id: string; name: string; displayId: string | null; icon: string }[]
+  labels: { id: string; name: string; color: string }[]
+  initialStartDate?: string
+  initialState?: string
+  initialParentId?: string
+  initialProjectId?: string
+  onSuccess?: (story: { id: string; name: string; identifier?: string }) => void
+}
+
+export function CreateStoryDialog({
+  open,
+  onOpenChange,
+  users,
+  projects,
+  labels,
+  initialStartDate,
+  initialState,
+  initialParentId,
+  initialProjectId,
+  onSuccess,
+}: CreateStoryDialogProps) {
+  const { t } = useTranslation("story")
+  const form = useForm({
+    defaultValues: {
+      name: "",
+      projectId: "",
+      state: initialState ?? "backlog",
+      priority: "none",
+      assigneeId: "none",
+      startDate: initialStartDate ?? "",
+      targetDate: "",
+      labelIds: [] as string[],
+    },
+    validators: [{ run: createStorySchema, triggers: ['change'] }] as any,
+  })
+
+  const [description, setDescription] = useState<{ html: string; markdown: string }>({
+    html: "",
+    markdown: "",
+  })
+  const [projectOpen, setProjectOpen] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [continuousCreate, setContinuousCreate] = useState(false)
+  const [error, setError] = useState("")
+  const [isEditorFocused, setIsEditorFocused] = useState(false)
+  const [aiGenerating, setAiGenerating] = useState(false)
+  const { model: aiModel, setModel: setAiModel, groups: aiGroups } = useStoryAiModel()
+  const editorRef = useRef<HTMLDivElement | null>(null)
+  const tiptapEditorRef = useRef<any>(null)
+
+  const onEditorReady = useCallback((editor: any) => {
+    tiptapEditorRef.current = editor
+  }, [])
+
+  useEffect(() => {
+    if (open) {
+      form.setFieldValue("name", "")
+      form.setFieldValue("state", initialState ?? "backlog")
+      form.setFieldValue("priority", "none")
+      form.setFieldValue("assigneeId", "none")
+      form.setFieldValue("startDate", initialStartDate ?? "")
+      form.setFieldValue("targetDate", "")
+      form.setFieldValue("labelIds", [])
+      if (initialProjectId) {
+        form.setFieldValue("projectId", initialProjectId)
+      } else {
+        ensureBuiltinProjectFn().then((p) => form.setFieldValue("projectId", p.id)).catch(() => {})
+      }
+      setDescription({ html: "", markdown: "" })
+      setIsEditorFocused(false)
+    }
+  }, [open, initialStartDate, initialState, initialProjectId, form])
+
+  useEffect(() => {
+    if (!open) return
+    const handlePointerDown = (e: PointerEvent) => {
+      if (!editorRef.current) return
+      if (!editorRef.current.contains(e.target as Node)) {
+        setIsEditorFocused(false)
+      }
+    }
+    document.addEventListener("pointerdown", handlePointerDown)
+    return () => document.removeEventListener("pointerdown", handlePointerDown)
+  }, [open])
+
+  const onEditorFocus = useCallback(() => {
+    setIsEditorFocused(true)
+  }, [])
+
+  const showHint = !isEditorFocused && !description.markdown.trim()
+
+  const handleSubmit = async () => {
+    const values = form.state.values
+    if (!values.name.trim()) {
+      setError(t("create.requireTitle"))
+      return
+    }
+    setLoading(true)
+    setError("")
+    try {
+      const res = await createStoryFn({
+        data: {
+          name: values.name.trim(),
+          description: description.markdown.trim()
+            ? serializeStoryDescription(description.html, description.markdown)
+            : undefined,
+          projectId: values.projectId,
+          parentId: initialParentId,
+          state: values.state as "backlog" | "todo" | "in_progress" | "done" | "cancelled",
+          priority: values.priority as "urgent" | "high" | "medium" | "low" | "none",
+          assigneeId: values.assigneeId === "none" ? undefined : values.assigneeId,
+          startDate: values.startDate || undefined,
+          targetDate: values.targetDate || undefined,
+          labelIds: values.labelIds,
+        },
+      })
+      form.reset()
+      setDescription({ html: "", markdown: "" })
+      if (!continuousCreate) onOpenChange(false)
+      onSuccess?.({
+        id: res.id,
+        name: res.name,
+        identifier: res.identifier,
+      })
+    } catch (err) {
+      setError(err instanceof Error ? err.message : t("create.failed"))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const selectedUser = users.find((u) => u.id === form.state.values.assigneeId)
+  const selectedProject = projects.find((p) => p.id === form.state.values.projectId)
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(v) => {
+        if (!loading) onOpenChange(v)
+      }}
+    >
+      <DialogContent className="sm:max-w-260 -mt-50">
+        <DialogHeader>
+          <DialogTitle className="text-xl">{t("create.title")}</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-3 overflow-y-auto px-4 py-2 max-h-[60vh]">
+          <div className="space-y-3">
+            <form.Field name="projectId" children={(field) => (
+              <Popover open={projectOpen} onOpenChange={setProjectOpen}>
+                <PopoverTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-8 gap-1.5 border-0 bg-muted/50 px-2.5 text-sm font-medium"
+                  >
+                    {selectedProject ? (
+                      <ProjectIconDisplay name={selectedProject.icon} size={16} />
+                    ) : (
+                      <Sprout className="size-4 text-muted-foreground" />
+                    )}
+                    {selectedProject?.name ?? t("group.no_project")}
+                  </Button>
+                </PopoverTrigger>
+                <PopoverContent className="w-56 p-1" align="start">
+                  {projects.map((p) => (
+                    <button
+                      key={p.id}
+                      type="button"
+                      onClick={() => field.handleChange(p.id)}
+                      className={`flex w-full items-center justify-between gap-2 rounded px-2 py-1.5 text-sm ${field.value === p.id ? "bg-accent font-medium" : "hover:bg-muted"}`}
+                    >
+                      <span className="flex min-w-0 items-center gap-2">
+                        <ProjectIconDisplay name={p.icon} size={16} />
+                        <span className="truncate">{p.name}</span>
+                      </span>
+                      {p.displayId && (
+                        <span className="shrink-0 rounded-sm bg-muted px-1.5 py-0.5 text-[10px] font-normal text-muted-foreground">
+                          {p.displayId}
+                        </span>
+                      )}
+                    </button>
+                  ))}
+                </PopoverContent>
+              </Popover>
+            )} />
+
+            <div className="space-y-2">
+              <form.Field name="name" children={(field) => (
+                <Input
+                  id="story-name"
+                  value={field.value}
+                  onChange={(e) => field.handleChange(e.target.value)}
+                  placeholder={t("column.title")}
+                  maxLength={200}
+                  className="text-lg h-10"
+                />
+              )} />
+            </div>
+
+            <div
+              className={`notion-full-width min-h-50 max-h-150 flex flex-col overflow-y-auto border rounded-md border-border relative${showHint ? " story-editor-no-placeholder" : ""}`}
+              ref={editorRef}
+              onPointerDown={onEditorFocus}
+              onFocus={onEditorFocus}
+            >
+              <div className="relative min-h-0 flex-1 overflow-y-auto">
+                <div className="h-full">
+                  <NotionDocEditor
+                    content={description}
+                    onChange={(c) => setDescription(c)}
+                    showHeader={false}
+                    hideDragHandle
+                    hideAi
+                    onEditorReady={onEditorReady}
+                    editorClassName="story-editor !ml-0"
+                    disableMobileFullscreen
+                  />
+                </div>
+                {showHint && (
+                  <div className="pointer-events-none absolute top-3 left-4 text-sm text-muted-foreground select-none">
+                    {t("create.addDescription")}
+                  </div>
+                )}
+              </div>
+
+                <div className="flex items-center gap-1 shrink-0 mr-2 mb-1">
+                  <div className="mr-auto px-4 pb-0 text-[11px] text-muted-foreground/60 leading-none justify-start">
+                    {t("create.shortcuts")}
+                  </div>
+                  <StoryAiToolbar
+                    description={description.markdown}
+                    title={form.state.values.name}
+                    mode="editor"
+                    editorRef={tiptapEditorRef}
+                    model={aiModel}
+                    groups={aiGroups}
+                    onModelChange={setAiModel}
+                    onGenerating={setAiGenerating}
+                    showAcceptance={false}
+                  />
+                </div>
+            </div>
+
+            <div className="flex flex-wrap items-center gap-1.5">
+              <form.Field name="state" children={(field) => (
+                <StateEditor value={field.value as StoryState} onChange={(v) => field.handleChange(v)} variant="button" />
+              )} />
+              <form.Field name="priority" children={(field) => (
+                <PriorityEditor value={field.value as StoryPriority} onChange={(v) => field.handleChange(v)} variant="button" />
+              )} />
+              <form.Field name="assigneeId" children={(field) => (
+                <AssigneeEditor assignee={selectedUser ?? null} users={users} onChange={(v) => field.handleChange(v ?? "none")} variant="button" />
+              )} />
+              <form.Field name="startDate" children={(field) => (
+                <DateEditor value={field.value || null} onChange={(v) => field.handleChange(v ?? "")} label={t("create.startDate")} icon={CalendarPlus2} />
+              )} />
+              <form.Field name="targetDate" children={(field) => (
+                <DateEditor value={field.value || null} onChange={(v) => field.handleChange(v ?? "")} label={t("create.dueDate")} icon={CalendarCheck} />
+              )} />
+              <form.Field name="labelIds" children={(field) => (
+                <LabelsEditor labelIds={field.value as string[]} labels={labels} onChange={(v) => field.handleChange(v as string[])} variant="button" />
+              )} />
+            </div>
+
+            {error && <p className="text-sm text-destructive break-words">{error}</p>}
+          </div>
+        </div>
+
+        <DialogFooter className="items-center gap-3">
+          <label className="flex cursor-pointer items-center gap-1.5 text-xs text-muted-foreground select-none">
+            <Switch
+              checked={continuousCreate}
+              onCheckedChange={setContinuousCreate}
+              size="sm"
+            />
+            {t("create.continuous")}
+          </label>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={loading}
+          >
+            {t("create.cancel")}
+          </Button>
+          <Button onClick={handleSubmit} disabled={loading || aiGenerating}>
+            {loading ? t("create.creating") : t("create.create")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/story/detail/__tests__/activity-timeline.test.tsx

@@ -0,0 +1,151 @@
+// 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, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import { ActivityTimeline } from "../activity-timeline";
+import type { ActivityItem, UserBrief } from "../../types";
+
+vi.mock("@/server/serverFns/project", () => ({
+  listProjectsBriefFn: vi.fn().mockResolvedValue([]),
+}));
+
+vi.mock("@allbluecn/ui", () => ({
+  UserAvatar: ({ name }: { name: string }) => (
+    <span data-testid="avatar">{name}</span>
+  ),
+}));
+
+class ResizeObserverMock {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+}
+vi.stubGlobal("ResizeObserver", ResizeObserverMock);
+
+const mkUser = (username: string): UserBrief => ({
+  id: username,
+  username,
+  email: `${username}@x`,
+  avatarConfig: null,
+  bgShape: null,
+  bgColor: null,
+});
+
+const baseUser = mkUser("alice");
+const T0 = "2026-01-01T10:00:00.000Z";
+const T1 = "2026-01-01T10:01:00.000Z";
+
+function mkActivity(over: Partial<ActivityItem> & { action: string }): ActivityItem {
+  return {
+    id: over.id ?? `a-${Math.random().toString(36).slice(2)}`,
+    user: over.user ?? baseUser,
+    action: over.action,
+    field: over.field ?? null,
+    oldValue: over.oldValue ?? null,
+    newValue: over.newValue ?? null,
+    createdAt: over.createdAt ?? new Date().toISOString(),
+    isAI: over.isAI ?? false,
+  };
+}
+
+describe("ActivityTimeline 合并显示", () => {
+  it("合并的字段变更逐条渲染 diff 块，且每条块带装饰图标（与单条一致）", async () => {
+    const bob = mkUser("bob");
+    const carol = mkUser("carol");
+    const dave = mkUser("dave");
+    const activities: ActivityItem[] = [
+      mkActivity({
+        action: "assignee_changed",
+        field: "assignee",
+        oldValue: "bob",
+        newValue: "carol",
+        createdAt: T0,
+      }),
+      mkActivity({
+        action: "assignee_changed",
+        field: "assignee",
+        oldValue: "carol",
+        newValue: "dave",
+        createdAt: T1,
+      }),
+    ];
+
+    render(
+      <ActivityTimeline activities={activities} users={[bob, carol, dave]} />,
+    );
+
+    // 合并徽章（waitFor 吸收 listProjectsBriefFn 异步 setState）
+    await waitFor(() => expect(screen.getByText("合并 2 次")).toBeTruthy());
+    // 头像序列：行头(alice) + 两个 diff 块 × 左右各一个装饰 = [alice, bob, carol, carol, dave]
+    const avatars = screen.getAllByTestId("avatar").map((n) => n.textContent);
+    expect(avatars).toEqual(["alice", "bob", "carol", "carol", "dave"]);
+  });
+
+  it("单条记录保持单 diff 样式，左右各一个装饰图标", async () => {
+    const bob = mkUser("bob");
+    const carol = mkUser("carol");
+    const activities: ActivityItem[] = [
+      mkActivity({
+        action: "assignee_changed",
+        field: "assignee",
+        oldValue: "bob",
+        newValue: "carol",
+        createdAt: T0,
+      }),
+    ];
+
+    render(<ActivityTimeline activities={activities} users={[bob, carol]} />);
+
+    await waitFor(() => expect(screen.queryByText(/合并/)).toBeNull());
+    // 行头(alice) + 单个 diff 左右各一个装饰 = [alice, bob, carol]
+    const avatars = screen.getAllByTestId("avatar").map((n) => n.textContent);
+    expect(avatars).toEqual(["alice", "bob", "carol"]);
+  });
+
+  it("开始/截止日期变更只显示日期，不带时间（兼容历史 ISO 记录）", async () => {
+    const activities: ActivityItem[] = [
+      // date-only（新记录格式）
+      mkActivity({
+        action: "startDate_changed",
+        field: "startDate",
+        oldValue: "2026-08-05",
+        newValue: "2026-08-07",
+        createdAt: T0,
+      }),
+      // 历史 ISO（含时间），应只显示日期部分
+      mkActivity({
+        action: "targetDate_changed",
+        field: "targetDate",
+        oldValue: "2026-08-31T00:00:00.000Z",
+        newValue: "2026-09-05T00:00:00.000Z",
+        createdAt: T1,
+      }),
+    ];
+
+    render(<ActivityTimeline activities={activities} />);
+
+    await waitFor(() =>
+      expect(screen.getByText("2026-08-05")).toBeTruthy(),
+    );
+    // 日期正文不含 "T"，避免展示时间
+    expect(screen.queryByText(/T00:00:00/)).toBeNull();
+    // 历史 ISO 记录也只显示日期部分（可见 + 隐藏测量渲染均无时间）
+    expect(screen.getAllByText("2026-08-31").length).toBeGreaterThanOrEqual(1);
+    expect(screen.getAllByText("2026-09-05").length).toBeGreaterThanOrEqual(1);
+  });
+});

package/src/components/story/detail/activity-tabs.tsx

@@ -0,0 +1,92 @@
+// 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 { ActivityTimeline } from "./activity-timeline";
+import { CommentThread } from "./comment-thread";
+import type { CommentWithReplies, ActivityItem, UserBrief } from "../types";
+
+interface ActivityTabsProps {
+  storyId: string;
+  comments: CommentWithReplies[];
+  activities: ActivityItem[];
+  users: UserBrief[];
+  onAppendComment?: (comment: CommentWithReplies) => void;
+  onRemoveComment?: (commentId: string) => void;
+}
+
+export function ActivityTabs({ storyId, comments, activities, users, onAppendComment, onRemoveComment }: ActivityTabsProps) {
+  const { t } = useTranslation("story");
+  const [activeTab, setActiveTab] = useState<"all" | "activities" | "comments">("all");
+
+  const tabLabels = {
+    all: t("activityTab.all"),
+    activities: t("activityTab.activities"),
+    comments: t("activityTab.comments", { count: comments.length }),
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="sticky top-0 z-30 bg-popover flex gap-2 border-b px-2">
+        {(Object.keys(tabLabels) as Array<keyof typeof tabLabels>).map((tab) => (
+          <button
+            key={tab}
+            onClick={() => setActiveTab(tab)}
+            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+              activeTab === tab
+                ? "border-primary text-foreground"
+                : "border-transparent text-muted-foreground hover:text-foreground"
+            }`}
+          >
+            {tabLabels[tab]}
+          </button>
+        ))}
+      </div>
+
+      {activeTab === "all" && (
+        <div className="space-y-6 px-6">
+          <CommentThread storyId={storyId} comments={comments} onAppendComment={onAppendComment} onRemoveComment={onRemoveComment} />
+          {activities.length > 0 && (
+            <div>
+              <h3 className="mb-4 text-sm font-semibold text-muted-foreground">{t("activityTab.records")}</h3>
+              <ActivityTimeline activities={activities} users={users} />
+            </div>
+          )}
+        </div>
+      )}
+
+      {activeTab === "activities" && (
+        <div className="px-6">
+          {activities.length === 0 ? (
+            <p className="py-8 text-center text-sm text-muted-foreground">
+              {t("activity.empty")}
+            </p>
+          ) : (
+            <ActivityTimeline activities={activities} users={users} />
+          )}
+        </div>
+      )}
+
+      {activeTab === "comments" && (
+        <div className="px-6">
+          <CommentThread storyId={storyId} comments={comments} onAppendComment={onAppendComment} onRemoveComment={onRemoveComment} />
+        </div>
+      )}
+    </div>
+  );
+}