@allbluecn/web-app 0.4.22 → 0.5.1

package/src/components/story/relations/story-ref-row.tsx

@@ -0,0 +1,319 @@
+// 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 * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Archive, MoreHorizontal, Trash2, Waypoints, CalendarCheck, CalendarPlus2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { useServerFn } from "@tanstack/react-start";
+import { toast } from "sonner";
+import {
+  updateStoryFn,
+  archiveStoryFn,
+  unarchiveStoryFn,
+  deleteStoryFn,
+} from "@/server/serverFns/story";
+import { PriorityEditor, StateEditor, AssigneeEditor, DateEditor, LabelsEditor } from "../inline-editors";
+import { NameConfirmDialog } from "@/components/shared/name-confirm-dialog";
+import { cn } from "@/lib/utils";
+import { ProjectIconDisplay } from "@/components/project/project-icon";
+import { Badge } from "@/components/ui/badge";
+import { dependencyTypeOption } from "../constants";
+import type { DisplayProperty } from "../display/types";
+import type { StoryPatch } from "../display/group-fields";
+import type {
+  StoryListItem,
+  UserBrief,
+  DependencyEdgeType,
+  DependencyGroup,
+} from "../types";
+
+/** 行内编辑/归档/删除后回传给面板的补丁载荷（StoryPatch 字段 + 面板控制信号） */
+export type StoryRelationPatch = StoryPatch & {
+  archived?: boolean;
+  archivedAt?: string | null;
+  deleted?: boolean;
+};
+
+export interface StoryRefRowProps {
+  story: StoryListItem;
+  users: UserBrief[];
+  labels: { id: string; name: string; color: string }[];
+  parentProjectId: string | null;
+  projects: { id: string; name: string; icon: string; displayId: string | null }[];
+  selected: boolean;
+  properties: DisplayProperty[];
+  onToggle: (id: string) => void;
+  onOpenStory: (id: string) => void;
+  onStoryRefresh: (storyId: string, patch: StoryRelationPatch) => void;
+  /** 移除关系：子需求=移除子需求，依赖=移除依赖 */
+  onRemove: (storyId: string) => void;
+  removeMenuLabel: string;
+  /** 依赖行类型标签：传 depType + group 时行内渲染类型 Badge */
+  dependencyMeta?: { depType: DependencyEdgeType; group: keyof DependencyGroup };
+  /** 当前需求编号（tooltip 中以编号替代「我」指代当前需求） */
+  currentIdentifier?: string;
+}
+
+export function StoryRefRow({
+  story,
+  users,
+  labels,
+  parentProjectId,
+  projects,
+  selected,
+  properties,
+  onToggle,
+  onOpenStory,
+  onStoryRefresh,
+  onRemove,
+  removeMenuLabel,
+  dependencyMeta,
+  currentIdentifier,
+}: StoryRefRowProps) {
+  const { t } = useTranslation("story");
+  const [storyState, setStoryState] = React.useState(story);
+  React.useEffect(() => {
+    setStoryState(story);
+  }, [story]);
+  const updateStory = useServerFn(updateStoryFn);
+  const archiveStory = useServerFn(archiveStoryFn);
+  const unarchiveStory = useServerFn(unarchiveStoryFn);
+  const deleteStory = useServerFn(deleteStoryFn);
+  const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
+
+  const crossProject = storyState.projectId !== parentProjectId;
+  const storyProjectInfo = projects.find((p) => p.id === storyState.projectId) ?? null;
+
+  const updateField = async (patch: Record<string, any>) => {
+    const updated = { ...storyState, ...patch };
+    setStoryState(updated);
+    try {
+      await updateStory({ data: { storyId: story.id, ...patch } });
+      onStoryRefresh(story.id, patch);
+    } catch (e) {
+      setStoryState(story);
+      toast.error((e as Error)?.message || t("children.updateFailed"));
+    }
+  };
+
+  const currentLabelIds = storyState.labels.map((l) => l.id);
+  const overdue = !!(
+    storyState.targetDate &&
+    storyState.state !== "done" &&
+    new Date(storyState.targetDate.slice(0, 10)) < new Date(new Date().toISOString().slice(0, 10))
+  );
+
+  const canArchiveSingle = storyState.state === "done" || storyState.state === "cancelled";
+
+  const handleArchive = async () => {
+    if (!canArchiveSingle) {
+      toast.error(t("children.archiveOnlyDone"));
+      return;
+    }
+    try {
+      await archiveStory({ data: { storyId: story.id } });
+      onStoryRefresh(story.id, { archived: true, archivedAt: new Date().toISOString() });
+      toast.success(t("children.archived"));
+    } catch (e) {
+      toast.error((e as Error)?.message || t("children.archiveFailed"));
+    }
+  };
+
+  const handleUnarchive = async () => {
+    try {
+      await unarchiveStory({ data: { storyId: story.id } });
+      onStoryRefresh(story.id, { archived: false, archivedAt: null });
+      toast.success(t("children.unarchived"));
+    } catch (e) {
+      toast.error((e as Error)?.message || t("children.unarchiveFailed"));
+    }
+  };
+
+  const handleDelete = async () => {
+    try {
+      await deleteStory({ data: { storyId: story.id } });
+      onStoryRefresh(story.id, { deleted: true });
+      toast.success(t("children.deleted"));
+    } catch (e) {
+      toast.error((e as Error)?.message || t("children.deleteFailed"));
+    }
+  };
+
+  const showArchived = !storyState.archived;
+
+  return (
+    <div
+      className={`group flex items-center gap-1.5 px-2 py-1.5 text-sm transition-colors ${selected ? "bg-muted/20" : "bg-card hover:bg-accent/40"} border-b border-border/40`}
+    >
+      <Checkbox
+        checked={selected}
+        onCheckedChange={() => onToggle(story.id)}
+        aria-label={t("children.selectStory", { name: story.name })}
+        className={cn(
+          "shrink-0 transition-opacity",
+          selected ? "opacity-100" : "opacity-0 group-hover:opacity-100",
+        )}
+      />
+      <button
+        type="button"
+        onClick={() => onOpenStory(storyState.id)}
+        className="flex h-8 min-w-0 flex-1 items-center gap-2 text-left"
+      >
+        {crossProject && storyProjectInfo ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span
+                className="shrink-0"
+                style={{ color: "oklch(80.517% 0.20237 152.675 / 0.909)" }}
+              >
+                <ProjectIconDisplay name={storyProjectInfo.icon} size={14} />
+              </span>
+            </TooltipTrigger>
+            <TooltipContent side="top" sideOffset={6} className="flex flex-col items-start gap-0.5 text-xs">
+              <span className="opacity-80">{t("children.crossProject")}</span>
+              <span className="font-medium">{storyProjectInfo.name}</span>
+            </TooltipContent>
+          </Tooltip>
+        ) : storyProjectInfo ? (
+          <ProjectIconDisplay
+            name={storyProjectInfo.icon}
+            size={14}
+            className="shrink-0 text-muted-foreground"
+          />
+        ) : null}
+        {crossProject && storyProjectInfo ? (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span
+                className="font-mono text-xs shrink-0"
+                style={{ color: "oklch(80.517% 0.20237 152.675 / 0.909)" }}
+              >
+                {storyState.identifier}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent side="top" sideOffset={6} className="flex flex-col items-start gap-0.5 text-xs">
+              <span className="opacity-80">{t("children.crossProject")}</span>
+              <span className="font-medium">{storyProjectInfo.name}</span>
+            </TooltipContent>
+          </Tooltip>
+        ) : (
+          <span className="font-mono text-xs text-muted-foreground shrink-0">{storyState.identifier}</span>
+        )}
+        {dependencyMeta && (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Badge variant="outline" className="max-w-56 shrink-0 truncate text-[10px] font-normal text-muted-foreground">
+                {t(dependencyTypeOption(dependencyMeta.group, dependencyMeta.depType).badgeLabelKey, {
+                  identifier: storyState.identifier,
+                })}
+              </Badge>
+            </TooltipTrigger>
+            <TooltipContent side="top" className="text-xs">
+              {t(
+                currentIdentifier
+                  ? dependencyTypeOption(dependencyMeta.group, dependencyMeta.depType).tooltipLabelKey
+                  : dependencyTypeOption(dependencyMeta.group, dependencyMeta.depType).badgeLabelKey,
+                {
+                  identifier: storyState.identifier,
+                  me: currentIdentifier,
+                },
+              )}
+            </TooltipContent>
+          </Tooltip>
+        )}
+        <span className="min-w-0 flex-1 truncate font-medium">{storyState.name}</span>
+      </button>
+      {properties.includes("priority") && (
+        <PriorityEditor value={storyState.priority} onChange={(v) => updateField({ priority: v })} variant="button" />
+      )}
+      {properties.includes("state") && (
+        <StateEditor value={storyState.state} onChange={(v) => updateField({ state: v })} variant="button" />
+      )}
+      {properties.includes("assignee") && (
+        <AssigneeEditor assignee={storyState.assignee} users={users} onChange={(v) => updateField({ assigneeId: v })} variant="button" />
+      )}
+      {properties.includes("startDate") && (
+<DateEditor value={storyState.startDate} onChange={(v) => updateField({ startDate: v })} label={t("children.startDate")} icon={CalendarPlus2} />
+        )}
+        {properties.includes("dueDate") && (
+        <DateEditor value={storyState.targetDate} onChange={(v) => updateField({ targetDate: v })} label={t("children.dueDate")} icon={CalendarCheck} overdue={overdue} />
+      )}
+      {properties.includes("labels") && (
+        <LabelsEditor labelIds={currentLabelIds} labels={labels} onChange={(v) => updateField({ labelIds: v })} variant="button" />
+      )}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" size="icon" className="size-7 p-0 ml-auto border border-border/60 rounded hover:bg-muted">
+            <MoreHorizontal className="size-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-40" sideOffset={4}>
+          <DropdownMenuItem onClick={() => onRemove(story.id)}>
+            <Waypoints className="mr-2 size-4" />
+            {removeMenuLabel}
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          {showArchived ? (
+            <>
+              {canArchiveSingle && (
+                <>
+                  <DropdownMenuItem onClick={handleArchive}>
+                    <Archive className="mr-2 size-4" />
+                    {t("children.archive")}
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                </>
+              )}
+              <DropdownMenuItem
+                onClick={() => setDeleteDialogOpen(true)}
+                className="text-destructive focus:text-destructive"
+              >
+                <Trash2 className="mr-2 size-4" />
+                {t("children.delete")}
+              </DropdownMenuItem>
+            </>
+          ) : (
+            <DropdownMenuItem onClick={handleUnarchive}>
+              <Archive className="mr-2 size-4" />
+              {t("children.unarchive")}
+            </DropdownMenuItem>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <NameConfirmDialog
+        open={deleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+        title={t("children.deleteTitle")}
+        description={t("children.deleteDescription")}
+        confirmText={t("children.delete")}
+        expectedName={storyState.identifier ?? storyState.id ?? ""}
+        onConfirm={handleDelete}
+      />
+    </div>
+  );
+}

package/src/components/story/story-list-view.tsx

@@ -170,8 +170,10 @@ export function StoryListView({ stories: initialStories, users: initialUsers, pr
 
   const {
     groups: pagedGroups,
+    isLoading: pagedGroupsLoading,
     refresh: refreshPagedGroups,
     loadMore: loadGroupMore,
+    patchStory: patchPagedStory,
   } = usePagedStoryGroups({
     filters,
     conditions: filterConditions,
@@ -501,7 +503,7 @@ export function StoryListView({ stories: initialStories, users: initialUsers, pr
           )}
           {view === "calendar" && <CalendarView stories={stories.items} onCreate={handleCreate} onOpenStory={handleOpenStory} orderBy={displayFilters.orderBy} />}
           {view === "list" && (
-            <StoryList groups={pagedGroups} displayFilters={displayFilters} users={users} labels={labels} projects={projects} onRefresh={listRefresh} onOpenStory={handleOpenStory} onCreate={handleCreate} onLoadMoreGroup={loadGroupMore} projectContext={projectContext} projectId={projectId} />
+            <StoryList groups={pagedGroups} isLoading={pagedGroupsLoading} displayFilters={displayFilters} users={users} labels={labels} projects={projects} onRefresh={listRefresh} onPatchStory={patchPagedStory} onOpenStory={handleOpenStory} onCreate={handleCreate} onLoadMoreGroup={loadGroupMore} projectContext={projectContext} projectId={projectId} />
           )}
           {view === "timeline" && <TimelineView stories={stories.items} onOpenStory={handleOpenStory} orderBy={displayFilters.orderBy} onLoadMore={loadMore} hasMore={hasMore} />}
         </div>

package/src/components/story/story-panel-header.tsx

@@ -217,7 +217,10 @@ export function StoryPanelHeader({
 
         {!hidePrevNext && (onPrevious || onNext) && (
           <>
-            <Separator orientation="vertical" data-vertical className="h-4 data-vertical:self-center mx-1" />
+            {/* 外层 div 限高：Separator 默认 data-[orientation=vertical]:h-full（属性选择器特异性高于单类），直接写 h-4 无法覆盖，会撑满整个 header 高度 */}
+            <div className="mx-1 flex h-4 items-center">
+              <Separator orientation="vertical" className="h-full" />
+            </div>
             {onPrevious && (
               <Tooltip>
                 <TooltipTrigger asChild>

package/src/components/story/types.ts

@@ -111,9 +111,6 @@ export function serializeStoryDescription(html: string, markdown: string): strin
   return JSON.stringify({ html, markdown });
 }
 
-// 依赖类型
-export type DependencyType = "blocks" | "blocked_by" | "relates_to";
-
 // Story 简要信息（用于关联关系）
 export interface StoryBrief {
   id: string;
@@ -134,21 +131,6 @@ export interface StoryTreeNode {
   children?: StoryTreeNode[];
 }
 
-// 依赖项（去重）
-export interface DependencyItem {
-  id: string;
-  title: string;
-  status: StoryState;
-  type: DependencyType;
-}
-
-// 依赖分组
-export interface DependencyGroup {
-  blocking: DependencyItem[];
-  blockedBy: DependencyItem[];
-  relatesTo: DependencyItem[];
-}
-
 // 链接项
 export interface StoryLinkItem {
   id: string;
@@ -163,7 +145,9 @@ export interface StoryAttachmentItem {
   fileName: string;
   fileSize: number;
   mimeType: string;
+  description?: string | null;
   storageUrl: string;
+  fileHash?: string | null;
 }
 
 // PRD 简要信息
@@ -176,6 +160,11 @@ export interface PrdBrief {
 export interface DocBrief {
   id: string;
   title: string;
+  kbId: string;
+  kbName: string;
+  kbIcon: string;
+  docIcon: string | null;
+  parentId: string | null;
 }
 
 // 关联 Tab 数据汇总
@@ -193,3 +182,26 @@ export interface RelationsData {
     docs: DocBrief[];
   };
 }
+
+/** 关联附件面板统一数据类型 */
+export type AssociatedItem =
+  | { kind: "link"; data: StoryLinkItem }
+  | { kind: "attachment"; data: StoryAttachmentItem }
+  | { kind: "doc"; data: DocBrief };
+
+// ====== 依赖关系（对齐 Plane，新模型） ======
+
+// 规范化存储类型：语义统一为「source 领先于 target」
+export type DependencyEdgeType = "BLOCKS" | "STARTS_BEFORE" | "FINISHES_BEFORE";
+
+// 依赖行 = 完整需求列表项 + 依赖元信息（支撑内联编辑与分组）
+export interface DependencyRow extends StoryListItem {
+  depId: string; // story_dependencies 行 id（移除依赖用）
+  depType: DependencyEdgeType;
+}
+
+// 双视角分组（RelationsData.dependencies 最终形态，任务 2 切换引用）
+export interface DependencyGroup {
+  dependsOn: DependencyRow[]; // 此需求依赖的（对方领先，边 targetId = 我）
+  dependents: DependencyRow[]; // 依赖此需求的（我领先，边 sourceId = 我）
+}

package/src/components/story/views/story-list/batch-toolbar.tsx

@@ -17,7 +17,7 @@
 
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { ArrowUp, ArrowDown, Archive, Trash2, BrushCleaning, CalendarCheck, CalendarPlus2, GitCompareArrows } from "lucide-react";
+import { ArrowUp, ArrowDown, Archive, Trash2, BrushCleaning, CalendarCheck, CalendarPlus2, GitCompareArrows, Waypoints } from "lucide-react";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
@@ -53,6 +53,8 @@ export interface BatchToolbarProps {
   onMoveDown: () => void;
   onArchive: (storyIds: string[]) => void;
   onDelete: (storyIds: string[]) => void;
+  /** 可选：批量移除依赖关系（依赖面板传入时显示按钮；入参为需求 id） */
+  onRemoveRelations?: (storyIds: string[]) => void;
   onBulkUpdate: (patch: StoryPatch) => void;
   onClearSelection: () => void;
   onTransfer: (updatedStories?: Array<{ id: string; identifier: string; projectId: string; parentId: string | null }>) => void;
@@ -76,6 +78,7 @@ export function BatchToolbar({
   onMoveDown,
   onArchive,
   onDelete,
+  onRemoveRelations,
   onBulkUpdate,
   onClearSelection,
   onTransfer,
@@ -141,6 +144,14 @@ export function BatchToolbar({
             </Button>
           }
         />
+        {onRemoveRelations && (
+          <ToolbarIconButton
+            label={t("dependency.remove")}
+            icon={Waypoints}
+            disabled={busy}
+            onClick={() => onRemoveRelations(stories.map((s) => s.id))}
+          />
+        )}
         <ToolbarIconButton label={t("batchToolbar.archive")} icon={Archive} disabled={busy || !canArchive} onClick={() => setArchiveOpen(true)} />
         <ToolbarIconButton label={t("batchToolbar.delete")} icon={Trash2} disabled={busy} onClick={() => setDeleteOpen(true)} />
         <div className="mx-1 h-4 w-px bg-border" />

package/src/components/story/views/story-list/index.tsx

@@ -36,8 +36,9 @@ import { StoryListRow } from "./row";
 import { BatchToolbar } from "./batch-toolbar";
 import { computeMove, canMove } from "./move";
 import { computeGroupCheckState, toggleGroupSelection } from "./group-select";
-import { GROUP_FIELD, toGroupFieldPatch, type GroupField } from "../../display/group-fields";
+import { GROUP_FIELD, toGroupFieldPatch, type GroupField, type StoryPatch } from "../../display/group-fields";
 import type { GroupKey } from "../../display/types";
+import { WavePhysicsLoader } from "@/components/shared/wave-physics-loader";
 
 const HEADER_ROW_HEIGHT = 36;
 const STORY_ROW_HEIGHT = 44;
@@ -45,11 +46,15 @@ const OVERSCAN = 8;
 
 interface StoryListProps {
   groups: PagedGroupNode[];
+  /** 首屏加载中：显示骨架行而非「暂无需求」空态，避免加载期间闪烁空态文案 */
+  isLoading?: boolean;
   displayFilters: DisplayOptions;
   users: UserBrief[];
   labels: { id: string; name: string; color: string }[];
   projects: { id: string; name: string; displayId?: string | null; icon: string }[];
   onRefresh: () => void;
+  /** 行内编辑乐观原地更新（替代整表 refresh，保持未触发规则的行位置不变） */
+  onPatchStory: (storyId: string, patch: StoryPatch) => void;
   onOpenStory: (id: string) => void;
   onCreate?: (startDate?: string, state?: string) => void;
   onLoadMoreGroup?: (groupKey: string, subKey?: string) => void;
@@ -57,7 +62,7 @@ interface StoryListProps {
   projectId?: string;
 }
 
-export function StoryList({ groups, displayFilters, users, labels, projects, onRefresh, onOpenStory, onCreate, onLoadMoreGroup, projectContext, projectId }: StoryListProps) {
+export function StoryList({ groups, isLoading = false, displayFilters, users, labels, projects, onRefresh, onPatchStory, onOpenStory, onCreate, onLoadMoreGroup, projectContext, projectId }: StoryListProps) {
   const { t } = useTranslation("story");
   const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
   const { groupBy, subGroupBy, properties } = displayFilters;
@@ -399,8 +404,8 @@ await bulkUpdateStoriesFn({ data: { storyIds: [...selectedIds], patch } });
              labels={labels}
              properties={properties}
              onOpenStory={onOpenStory}
-             onRefresh={onRefresh}
-             selected={selectedIds.has(row.story.id)}
+              onPatchStory={onPatchStory}
+              selected={selectedIds.has(row.story.id)}
              onToggle={toggleStory}
            />
         </div>
@@ -439,7 +444,13 @@ await bulkUpdateStoriesFn({ data: { storyIds: [...selectedIds], patch } });
         <div style={{ height: totalHeight, position: "relative" }}>
           {virtualRows.map((virtualRow) => renderVirtualRow(virtualRow))}
         </div>
-        {groups.length === 0 && (
+        {isLoading && groups.length === 0 && (
+          <div className="flex flex-col items-center gap-3 py-12" aria-busy="true">
+            <WavePhysicsLoader />
+            <p className="text-sm text-muted-foreground">{t("group.loadingData")}</p>
+          </div>
+        )}
+        {!isLoading && groups.length === 0 && (
           <div className="flex h-40 items-center justify-center text-sm text-muted-foreground">
             {t("table.empty")}
           </div>

package/src/components/story/views/story-list/row.tsx

@@ -39,12 +39,13 @@ interface StoryListRowProps {
   labels: { id: string; name: string; color: string }[];
   properties: DisplayProperty[];
   onOpenStory: (id: string) => void;
-  onRefresh: () => void;
+  /** 行内编辑保存成功后的乐观原地更新回调（未触发分组/排序规则时保持位置不变） */
+  onPatchStory: (storyId: string, patch: StoryPatch) => void;
   selected: boolean;
   onToggle: (id: string) => void;
 }
 
-export const StoryListRow = memo(function StoryListRow({ story, group, indent, isChild, users, labels, properties, onOpenStory, onRefresh, selected, onToggle }: StoryListRowProps) {
+export const StoryListRow = memo(function StoryListRow({ story, group, indent, isChild, users, labels, properties, onOpenStory, onPatchStory, selected, onToggle }: StoryListRowProps) {
   const { t } = useTranslation("story");
   const updateStory = useServerFn(updateStoryFn);
 
@@ -52,12 +53,12 @@ export const StoryListRow = memo(function StoryListRow({ story, group, indent, i
     async (patch: StoryPatch) => {
       try {
         await updateStory({ data: { storyId: story.id, ...patch } });
-        onRefresh();
+        onPatchStory(story.id, patch);
       } catch (e) {
         toast.error((e as Error)?.message || t("row.updateFailed"));
       }
     },
-    [story.id, updateStory, onRefresh, t],
+    [story.id, updateStory, onPatchStory, t],
   );
 
   const setPriority = useCallback((v: StoryPriority) => updateField({ priority: v }), [updateField]);

package/src/components/ui/separator.tsx

@@ -34,7 +34,7 @@ function Separator({
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        "shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
         className
       )}
       {...props}

package/src/hooks/use-notifications.ts

@@ -8,7 +8,9 @@ import type { NotificationSseValue, NotificationItem } from '@allbluecn/shared'
 import { isInDndWindow } from '@allbluecn/shared'
 import { getUnreadCountFn, getNotificationPreferencesFn } from '@/server/serverFns/notifications'
 
+export const NOTIFICATION_ROOT_KEY = ['notifications'] as const
 export const NOTIFICATION_LIST_KEY = ['notifications', 'list'] as const
+export const NOTIFICATION_POPOVER_KEY = ['notifications', 'popover'] as const
 export const NOTIFICATION_UNREAD_KEY = ['notifications', 'unread'] as const
 export const NOTIFICATION_PREFERENCES_KEY = ['notifications', 'preferences'] as const
 
@@ -92,7 +94,8 @@ export function useNotifications(options?: { toastEnabled?: boolean }) {
           const count = (old as { count?: number } | undefined)?.count ?? 0
           return { count: count + 1 }
         })
-        queryClient.invalidateQueries({ queryKey: NOTIFICATION_LIST_KEY })
+        // 通知到达：所有通知相关查询（列表/详情页分页/popover）标记过期
+        queryClient.invalidateQueries({ queryKey: NOTIFICATION_ROOT_KEY })
         if (toastEnabled) {
           const prefs = queryClient.getQueryData<{ dndEnabled: boolean; dndStart: string; dndEnd: string }>(NOTIFICATION_PREFERENCES_KEY)
           const now = new Date()

package/src/lib/__tests__/datetime.test.ts

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { describe, it, expect } from 'vitest'
-import { formatDate, formatRelative, resolveTimezone } from '../datetime'
+import { formatDate, formatRelative, resolveTimezone, formatTimestamp } from '../datetime'
 
 describe('resolveTimezone', () => {
   it('项目时区优先', () => {
@@ -71,4 +71,19 @@ describe('formatRelative', () => {
     const result = formatRelative(date, 'Asia/Shanghai', now)
     expect(result).toMatch(/2026-06-01/)
   })
+})
+
+describe('formatTimestamp', () => {
+  it('固定 Asia/Shanghai 输出，与运行环境 locale/时区无关', () => {
+    expect(formatTimestamp('2026-07-31T08:00:00.000Z')).toBe('2026-07-31 16:00')
+  })
+  it('接受 Date 对象', () => {
+    expect(formatTimestamp(new Date('2026-07-31T08:00:00.000Z'))).toBe('2026-07-31 16:00')
+  })
+  it('自定义格式（监控历史秒级精度）', () => {
+    expect(formatTimestamp('2026-07-31T08:00:05.000Z', 'yyyy-MM-dd HH:mm:ss')).toBe('2026-07-31 16:00:05')
+  })
+  it('无效输入返回占位符不抛错', () => {
+    expect(formatTimestamp('not-a-date')).toBe('-')
+  })
 })