@allbluecn/web-app 0.17.2 → 0.18.0

package/src/components/settings/personal-team/team/team-member-list.tsx

@@ -15,22 +15,22 @@ import { formatDate } from "@/lib/datetime"
 import { useTimezone } from "@/providers/timezone-provider"
 import { UserAvatar } from "@/components/shared-kit"
 import type { AvatarConfig, ShapeType } from "@allbluecn/kernel"
-import { Badge } from "@/components/ui/badge"
-import { Button } from "@/components/ui/button"
+import { Badge } from "@allbluecn/ui/badge"
+import { Button } from "@allbluecn/ui/button"
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card"
+} from "@allbluecn/ui/card"
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@allbluecn/ui/dropdown-menu"
 import {
   Empty,
   EmptyDescription,
@@ -42,15 +42,15 @@ import {
   InputGroup,
   InputGroupAddon,
   InputGroupInput,
-} from "@/components/ui/input-group"
+} from "@allbluecn/ui/input-group"
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
-import { Separator } from "@/components/ui/separator"
+} from "@allbluecn/ui/select"
+import { Separator } from "@allbluecn/ui/separator"
 import { m } from "@/paraglide/messages.js";
 
 export interface TeamMember {

package/src/components/shared-kit/avatars/notion-avatar.tsx

@@ -15,112 +15,6 @@
 // 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 { useEffect, useState } from "react"
-import type { AvatarConfig, AvatarPart, ShapeType } from "@allbluecn/kernel"
-import { sanitizeSvg } from "../../../lib/sanitize"
-
-const noneParts: AvatarPart[] = ["glasses", "hair", "accessories", "details", "beard"]
-
-const partOrder: AvatarPart[] = [
-  "face",
-  "nose",
-  "mouth",
-  "eyes",
-  "eyebrows",
-  "glasses",
-  "hair",
-  "accessories",
-  "details",
-  "beard",
-]
-
-function getPreviewImagePath(part: AvatarPart, index: number): string {
-  return `/avatar/preview/${part}/${index}.svg`
-}
-
-const SVGFilter = `<defs>
-  <filter id="notion-avatar-filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
-    <feMorphology operator="dilate" radius="20" in="SourceAlpha" result="morphology"/>
-    <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
-    <feComposite in="flood" in2="morphology" operator="in" result="composite"/>
-    <feMerge result="merge">
-      <feMergeNode in="composite" result="mergeNode"/>
-      <feMergeNode in="SourceGraphic" result="mergeNode1"/>
-    </feMerge>
-  </filter>
-</defs>`
-
-function extractInnerSvg(svgText: string): string {
-  return svgText.replace(/<svg[^>]*>/i, "").replace(/<\/svg>/i, "").trim()
-}
-
-const shapeStyle: Record<ShapeType, string> = {
-  circle: "rounded-full",
-  rounded: "rounded-lg",
-  square: "rounded-none",
-}
-
-type NotionAvatarProps = {
-  config: AvatarConfig
-  bgColor?: string
-  shape?: ShapeType
-  className?: string
-  style?: React.CSSProperties
-  flip?: boolean
-}
-
-export function NotionAvatar({
-  config,
-  bgColor = "transparent",
-  shape = "circle",
-  className,
-  style,
-  flip = false,
-}: NotionAvatarProps) {
-  const [svgContent, setSvgContent] = useState<string>("")
-
-  useEffect(() => {
-    async function buildAvatar() {
-      const groups = await Promise.all(
-        partOrder.map(async (part) => {
-          const index = config[part]
-          if (noneParts.includes(part) && index === 0) return ""
-          try {
-            const res = await fetch(getPreviewImagePath(part, index))
-            const svgText = await res.text()
-            const inner = extractInnerSvg(svgText)
-            return `\n<g id="avatar-${part}"${part === "face" ? ' fill="#ffffff"' : ""}>${inner}</g>`
-          } catch {
-            return ""
-          }
-        }),
-      )
-      const flipAttr = flip ? ' transform="scale(-1,1) translate(-1080, 0)"' : ""
-      const avatarSvg = `<svg viewBox="0 0 1080 1080" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%">${SVGFilter}<g id="avatar"${flipAttr}>${groups.join("")}</g></svg>`
-      setSvgContent(avatarSvg)
-    }
-    buildAvatar()
-  }, [config, flip])
-
-  if (!svgContent) {
-    return (
-      <div
-        className={`${shapeStyle[shape]} overflow-hidden bg-muted animate-pulse ${className ?? ""}`}
-        style={{ aspectRatio: "1 / 1", ...style }}
-      />
-    )
-  }
-
-  return (
-    <div
-      className={`${shapeStyle[shape]} ${className ?? ""}`}
-      style={{
-        backgroundColor: bgColor === "transparent" ? undefined : bgColor,
-        aspectRatio: "1 / 1",
-        ...style,
-      }}
-      dangerouslySetInnerHTML={{ __html: sanitizeSvg(svgContent) }}
-    />
-  )
-}
+// 实现已迁至 @allbluecn/ui（任务 6.3 admin→web 解耦）。
+// 本文件仅为转发层，web 内部 shared-kit 导出保持不变。
+export { NotionAvatar } from "@allbluecn/ui/components/notion-avatar"

package/src/components/shared-kit/avatars/user-avatar.tsx

@@ -15,68 +15,6 @@
 // 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 { NotionAvatar } from "./notion-avatar"
-import type { AvatarConfig, ShapeType } from "@allbluecn/kernel"
-
-type UserAvatarProps = {
-  avatarConfig?: AvatarConfig | null
-  bgShape?: ShapeType | null
-  bgColor?: string | null
-  name?: string | null
-  imageUrl?: string | null
-  className?: string
-  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl"
-}
-
-const sizeClasses: Record<string, string> = {
-  xs: "w-5 h-5",
-  sm: "w-6 h-6",
-  md: "w-8 h-8",
-  lg: "w-10 h-10",
-  xl: "w-12 h-12",
-  "2xl": "w-16 h-16",
-  "3xl": "w-20 h-20",
-  "4xl": "w-24 h-24",
-}
-
-export function UserAvatar({
-  avatarConfig,
-  bgShape,
-  bgColor,
-  name,
-  imageUrl,
-  className,
-  size = "md",
-}: UserAvatarProps) {
-  const initial = (name || "U").charAt(0).toUpperCase()
-  const shapeClass =
-    bgShape === "circle" ? "rounded-full" : bgShape === "square" ? "rounded-none" : "rounded-lg"
-
-  if (avatarConfig) {
-    return (
-      <NotionAvatar
-        config={avatarConfig}
-        shape={bgShape ?? "square"}
-        bgColor={bgColor ?? "#fff"}
-        className={`${sizeClasses[size]} shrink-0 ${className ?? ""}`}
-      />
-    )
-  }
-
-  if (imageUrl) {
-    return (
-      <div className={`relative shrink-0 overflow-hidden ${shapeClass} ${sizeClasses[size]} ${className ?? ""}`}>
-        <img src={imageUrl} alt={name || ""} className="h-full w-full object-cover" />
-      </div>
-    )
-  }
-
-  return (
-    <div
-      className={`flex shrink-0 items-center justify-center ${shapeClass} bg-muted text-xs font-medium ${sizeClasses[size]} ${className ?? ""}`}
-    >
-      {initial}
-    </div>
-  )
-}
+// 实现已迁至 @allbluecn/ui（任务 6.3 admin→web 解耦）。
+// 本文件仅为转发层，web 内部 shared-kit 导出保持不变。
+export { UserAvatar } from "@allbluecn/ui/components/user-avatar"

package/src/components/shared-kit/data-viz/contribution-graph-tooltip.tsx

@@ -35,7 +35,7 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from '@/components/ui/select'
+} from '@allbluecn/ui/select'
 
 type ContributionGraphWithTooltipProps = {
   data: Activity[]

package/src/components/shared-kit/dialogs/name-confirm-dialog.tsx

@@ -18,10 +18,10 @@
 import { useState } from "react";
 import * as React from "react";
 import type { ReactNode } from "react";
-import { toast } from "@/components/ui/toast";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { toast } from "@allbluecn/ui/toast";
+import { Button } from "@allbluecn/ui/button";
+import { Input } from "@allbluecn/ui/input";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@allbluecn/ui/tooltip";
 import {
   Dialog,
   DialogContent,
@@ -29,7 +29,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog";
+} from "@allbluecn/ui/dialog";
 import { m } from "@/paraglide/messages.js";
 
 interface NameConfirmDialogProps {

package/src/components/shared-kit/i18n/language-switcher.tsx

@@ -16,13 +16,13 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useRouter, useLocation } from "@tanstack/react-router";
-import { Button } from "@/components/ui/button";
+import { Button } from "@allbluecn/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "@allbluecn/ui/dropdown-menu";
 import { Globe } from "lucide-react";
 import { m } from "@/paraglide/messages.js";
 

package/src/components/shared-kit/i18n/translator-text.tsx

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useState, useEffect } from "react";
-import { useTranslator } from "@/hooks/useTranslator";
+import { useTranslator } from "@/hooks/use-translator";
 import { Loader2 } from "lucide-react";
 import { m } from "@/paraglide/messages.js";
 

package/src/components/shared-kit/icons/lucide-icon-picker/curated-icons.ts

@@ -39,7 +39,7 @@ import {
   GitBranch, GitCommitHorizontal, GitCommitVertical, GitCompare, GitFork, GitGraph, GitMerge, Globe, GraduationCap, Grid2x2Check,
   Grid2x2Plus, Guitar, Hammer, HardDrive, Hash, Headphones, Headset, Heart, HeartPulse, Helicopter,
   Hexagon, Hospital, Hourglass, IdCard, Image, ImageDown, ImagePlus, ImageUp, Images, Inbox,
-  Infinity, Info, Italic, Joystick, Key, KeyRound, Keyboard, Lamp, Landmark, Laptop,
+  Infinity as InfinityIcon, Info, Italic, Joystick, Key, KeyRound, Keyboard, Lamp, Landmark, Laptop,
   Layers, LayoutDashboard, LayoutFreeform, LayoutGrid, LayoutList, LayoutPanelLeft, LayoutTemplate, Leaf, Library,
   Lightbulb, Link, List, ListChecks, ListOrdered, Loader, LoaderCircle, LoaderPinwheel, LocateFixed, Lock,
   LogIn, LogOut, Luggage, Mail, MailCheck, MailOpen, MailPlus, MailSearch, MailWarning, Mailbox,
@@ -460,7 +460,7 @@ export const CURATED_ICONS: CuratedIcon[] = [
     { name: "equal", Icon: Equal, zh: ["等于"] },
     { name: "divide", Icon: Divide, zh: ["除"] },
     { name: "slash", Icon: Slash, zh: ["斜杠"] },
-    { name: "infinity", Icon: Infinity, zh: ["无穷"] },
+    { name: "infinity", Icon: InfinityIcon, zh: ["无穷"] },
     { name: "ampersand", Icon: Ampersand, zh: ["与号"] },
     { name: "copyright", Icon: Copyright, zh: ["版权"] },
     { name: "ghost", Icon: Ghost, zh: ["幽灵"] },

package/src/components/shared-kit/icons/lucide-icon-picker/index.tsx

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { lazy, Suspense, useState, type ReactNode } from "react";
-import { Button } from "@/components/ui/button";
+import { Button } from "@allbluecn/ui/button";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { LucideIconByName } from "./lucide-icon-by-name";
 import { pushRecentIcon } from "./icon-data";

package/src/components/shared-kit/icons/lucide-icon-picker/panel.tsx

@@ -19,7 +19,7 @@ import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
 import { Search } from "lucide-react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { cn } from "@/lib/utils";
-import { Input } from "@/components/ui/input";
+import { Input } from "@allbluecn/ui/input";
 import { CURATED_SEARCH_INDEX, PICKER_SEARCH_INDEX } from "./icon-set";
 import {
   LAB_ICONS_BY_CATEGORY,

package/src/components/shared-kit/theme/theme-surface.tsx

@@ -20,10 +20,10 @@
 // 文案为测试样板硬编码中文（不出现在产品 UI），豁免 i18n。
 
 
-import { Button } from "@/components/ui/button"
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Input } from "@/components/ui/input"
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { Button } from "@allbluecn/ui/button"
+import { Card, CardContent, CardHeader, CardTitle } from "@allbluecn/ui/card"
+import { Input } from "@allbluecn/ui/input"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@allbluecn/ui/tooltip"
 
 export function ThemeSurface() {
   return (

package/src/components/shared-kit/theme/theme-toggle.tsx

@@ -17,7 +17,7 @@
 
 import { useTheme } from "next-themes";
 import { Moon, Sun } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { Button } from "@allbluecn/ui/button";
 import { useEffect, useState } from "react";
 
 export function ThemeToggle() {

package/src/components/shared-kit/timezone/timezone-select.tsx

@@ -18,7 +18,7 @@
 import { useMemo, useState } from 'react'
 import { Check, ChevronsUpDown, Globe } from 'lucide-react'
 import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
+import { Button } from '@allbluecn/ui/button'
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { m } from "@/paraglide/messages.js";

package/src/components/story/__tests__/story-list-view-restore.test.tsx

@@ -0,0 +1,186 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute 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 { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, waitFor } from "@testing-library/react";
+import React from "react";
+
+const mocks = vi.hoisted(() => ({
+  toolbarProps: [] as Array<{ projectId?: string; search?: string } | undefined>,
+}));
+
+vi.mock("@tanstack/react-router", () => ({
+  useRouteContext: () => ({ session: { user: { id: "user_1" } } }),
+  useNavigate: () => vi.fn(),
+}));
+vi.mock("@allbluecn/ui/toast", () => ({
+  toast: { success: vi.fn(), error: vi.fn() },
+}));
+vi.mock("@allbluecn/ui/alert-dialog", () => ({
+  AlertDialog: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
+  AlertDialogContent: () => null,
+  AlertDialogHeader: () => null,
+  AlertDialogFooter: () => null,
+  AlertDialogTitle: () => null,
+  AlertDialogDescription: () => null,
+  AlertDialogCancel: () => null,
+  AlertDialogAction: () => null,
+}));
+vi.mock("@/server/serverFns/story", () => ({
+  listStoriesFn: vi.fn(() => Promise.resolve({ items: [], total: 0, hasMore: false })),
+  listUsersBriefFn: vi.fn(() => Promise.resolve([])),
+  listStoriesInGroupFn: vi.fn(() => Promise.resolve({ items: [], total: 0, hasMore: false })),
+  listStoryGroupsFn: vi.fn(() => Promise.resolve({ groups: [] })),
+  listAllGroupsItemsFn: vi.fn(() => Promise.resolve({ grouped: {} })),
+  archiveStoryFn: vi.fn(() => Promise.resolve()),
+}));
+vi.mock("@/server/serverFns/project", () => ({
+  listProjectsBriefFn: vi.fn(() => Promise.resolve([])),
+}));
+vi.mock("@/server/serverFns/story-view", () => ({
+  listStoryViewsFn: vi.fn(() => new Promise(() => {})),
+  createStoryViewFn: vi.fn(() => Promise.resolve(null)),
+  updateStoryViewFn: vi.fn(() => Promise.resolve(null)),
+  deleteStoryViewFn: vi.fn(() => Promise.resolve()),
+}));
+vi.mock("@/server/serverFns/story-display-options", () => ({
+  getStoryDisplayOptionsFn: vi.fn(() => Promise.resolve(null)),
+  updateStoryDisplayOptionsFn: vi.fn(() => Promise.resolve(null)),
+}));
+// 排除与本用例无关的异步数据链路（800ms 最小加载骨架、分组分页拉取）
+vi.mock("../display/use-display-options", () => ({
+  useDisplayOptions: () => ({
+    layout: "list",
+    filters: {
+      groupBy: "none",
+      subGroupBy: "none",
+      orderBy: "created",
+      orderDir: "desc",
+      properties: [],
+      showEmptyGroups: false,
+      showSubItems: false,
+      pageSize: 50,
+    },
+    updateFilters: () => {},
+  }),
+}));
+vi.mock("../display/use-paged-story-groups", () => ({
+  usePagedStoryGroups: () => ({
+    groups: [],
+    isLoading: false,
+    refresh: () => {},
+    loadMore: () => {},
+    patchStory: () => {},
+  }),
+}));
+vi.mock("../display/use-grouped-stories", () => ({
+  useGroupedStories: () => [],
+}));
+// 记录每次渲染收到的 filters，用于断言「首渲未读 localStorage、恢复发生在挂载后的 effect」
+vi.mock("../story-toolbar", () => ({
+  StoryToolbar: (props: { filters?: { projectId?: string; search?: string } }) => {
+    mocks.toolbarProps.push(props.filters);
+    return null;
+  },
+}));
+vi.mock("../story-list-table", () => ({ StoryListTable: () => null }));
+vi.mock("../create-story-dialog", () => ({ CreateStoryDialog: () => null }));
+vi.mock("../views/create-view-dialog", () => ({ CreateViewDialog: () => null }));
+vi.mock("../views/kanban-board", () => ({ KanbanBoard: () => null }));
+vi.mock("../views/calendar-view", () => ({ CalendarView: () => null }));
+vi.mock("../views/timeline-view", () => ({ TimelineView: () => null }));
+vi.mock("../views/story-list", () => ({ StoryList: () => null }));
+vi.mock("../peek-panel", () => ({ StoryPeekPanel: () => null }));
+
+import { StoryListView } from "../story-list-view";
+import { listStoriesFn, listUsersBriefFn } from "@/server/serverFns/story";
+
+const PROJECTS = [{ id: "proj_1", name: "项目A", displayId: null, icon: "folder" }];
+
+function renderView() {
+  mocks.toolbarProps.length = 0;
+  return render(
+    <StoryListView
+      stories={{ items: [], total: 0 }}
+      users={[]}
+      projects={PROJECTS}
+      labels={[]}
+    />,
+  );
+}
+
+describe("StoryListView 持久化筛选恢复", () => {
+  beforeEach(() => {
+    window.localStorage.clear();
+  });
+
+  it("首渲不反映 localStorage（避免 hydration mismatch），恢复发生在挂载后的 effect", async () => {
+    window.localStorage.setItem("story.projectFilter", "proj_1");
+    window.localStorage.setItem("story.search", "登录");
+    renderView();
+
+    expect(mocks.toolbarProps[0]).toEqual({ projectId: undefined, search: undefined });
+    await waitFor(() => {
+      expect(mocks.toolbarProps.at(-1)).toEqual({ projectId: "proj_1", search: "登录" });
+    });
+  });
+
+  it("恢复项目筛选与搜索词并据此拉取列表", async () => {
+    window.localStorage.setItem("story.projectFilter", "proj_1");
+    window.localStorage.setItem("story.search", "登录");
+    renderView();
+
+    await waitFor(() => {
+      expect(vi.mocked(listStoriesFn)).toHaveBeenCalledWith({
+        data: { archived: false, projectId: "proj_1", search: "登录", filters: undefined },
+      });
+    });
+    await waitFor(() => {
+      expect(vi.mocked(listUsersBriefFn)).toHaveBeenCalledWith({ data: { projectId: "proj_1" } });
+    });
+  });
+
+  it("清理过期残留（项目已删除）后仅按搜索词拉取", async () => {
+    window.localStorage.setItem("story.projectFilter", "proj_deleted");
+    window.localStorage.setItem("story.search", "登录");
+    renderView();
+
+    await waitFor(() => {
+      expect(vi.mocked(listStoriesFn)).toHaveBeenCalledWith({
+        data: { archived: false, projectId: undefined, search: "登录", filters: undefined },
+      });
+    });
+    expect(window.localStorage.getItem("story.projectFilter")).toBeNull();
+  });
+
+  it("已归档特例恢复为 archived 查询", async () => {
+    window.localStorage.setItem("story.projectFilter", "__archived__");
+    renderView();
+
+    await waitFor(() => {
+      expect(vi.mocked(listStoriesFn)).toHaveBeenCalledWith({
+        data: { archived: true, projectId: undefined, search: undefined, filters: undefined },
+      });
+    });
+  });
+
+  it("无残留时不触发额外列表拉取", async () => {
+    renderView();
+    await waitFor(() => expect(vi.mocked(listUsersBriefFn)).not.toHaveBeenCalled());
+    expect(vi.mocked(listStoriesFn)).not.toHaveBeenCalled();
+  });
+});

package/src/components/story/__tests__/story-list-view-ssr.test.tsx

@@ -0,0 +1,94 @@
+// @vitest-environment node
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute 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/>.
+
+/**
+ * SSR 冒烟回归：node 环境无 localStorage/window，renderToString 期间
+ * 任何渲染期（useState 懒初始化、useRef 初始化器、直接 JSX 求值）访问
+ * 浏览器全局都会抛 ReferenceError，SSR 侧 aborted 500。
+ *
+ * StoryListView 曾以 `try { localStorage.getItem() } catch` 包裹懒初始化——
+ * SSR 下吞掉 ReferenceError 侥幸不崩，但静默返回 undefined，与服务端输出不一致。
+ */
+import { renderToString } from "react-dom/server";
+import React from "react";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@tanstack/react-router", () => ({
+  useRouteContext: () => ({ session: { user: { id: "user_1" } } }),
+  useNavigate: () => vi.fn(),
+}));
+vi.mock("@allbluecn/ui/toast", () => ({
+  toast: { success: vi.fn(), error: vi.fn() },
+}));
+vi.mock("@allbluecn/ui/alert-dialog", () => ({
+  AlertDialog: ({ children }: { children?: React.ReactNode }) => <>{children}</>,
+  AlertDialogContent: (() => null),
+  AlertDialogHeader: (() => null),
+  AlertDialogFooter: (() => null),
+  AlertDialogTitle: (() => null),
+  AlertDialogDescription: (() => null),
+  AlertDialogCancel: (() => null),
+  AlertDialogAction: (() => null),
+}));
+vi.mock("@/server/serverFns/story", () => ({
+  listStoriesFn: vi.fn(() => Promise.resolve({ items: [], total: 0, hasMore: false })),
+  listUsersBriefFn: vi.fn(() => Promise.resolve([])),
+  listStoriesInGroupFn: vi.fn(() => Promise.resolve({ items: [], total: 0, hasMore: false })),
+  listStoryGroupsFn: vi.fn(() => Promise.resolve({ groups: [] })),
+  listAllGroupsItemsFn: vi.fn(() => Promise.resolve({ grouped: {} })),
+  archiveStoryFn: vi.fn(() => Promise.resolve()),
+}));
+vi.mock("@/server/serverFns/project", () => ({
+  listProjectsBriefFn: vi.fn(() => Promise.resolve([])),
+}));
+vi.mock("@/server/serverFns/story-view", () => ({
+  listStoryViewsFn: vi.fn(() => Promise.resolve([])),
+  createStoryViewFn: vi.fn(() => Promise.resolve(null)),
+  updateStoryViewFn: vi.fn(() => Promise.resolve(null)),
+  deleteStoryViewFn: vi.fn(() => Promise.resolve()),
+}));
+vi.mock("@/server/serverFns/story-display-options", () => ({
+  getStoryDisplayOptionsFn: vi.fn(() => Promise.resolve(null)),
+  updateStoryDisplayOptionsFn: vi.fn(() => Promise.resolve(null)),
+}));
+vi.mock("../story-toolbar", () => ({ StoryToolbar: () => null }));
+vi.mock("../story-list-table", () => ({ StoryListTable: () => null }));
+vi.mock("../create-story-dialog", () => ({ CreateStoryDialog: () => null }));
+vi.mock("../views/create-view-dialog", () => ({ CreateViewDialog: () => null }));
+vi.mock("../views/kanban-board", () => ({ KanbanBoard: () => null }));
+vi.mock("../views/calendar-view", () => ({ CalendarView: () => null }));
+vi.mock("../views/timeline-view", () => ({ TimelineView: () => null }));
+vi.mock("../views/story-list", () => ({ StoryList: () => null }));
+vi.mock("../peek-panel", () => ({ StoryPeekPanel: () => null }));
+
+import { StoryListView } from "../story-list-view";
+
+describe("StoryListView SSR renderToString 不应访问浏览器全局", () => {
+  it("服务端渲染成功", () => {
+    expect(() =>
+      renderToString(
+        <StoryListView
+          stories={{ items: [], total: 0 }}
+          users={[]}
+          projects={[{ id: "proj_1", name: "项目A", displayId: null, icon: "folder" }]}
+          labels={[]}
+        />,
+      ),
+    ).not.toThrow();
+  });
+});

package/src/components/story/ai/__tests__/use-story-ai-model.test.ts

@@ -24,7 +24,7 @@ vi.mock("@/lib/auth/auth-client", () => ({
   }),
 }))
 
-vi.mock("@/server/serverFns/ai/providers", () => ({
+vi.mock("@/server/serverFns/design/ai/providers", () => ({
   listEnabledModelsFn: vi.fn().mockResolvedValue([
     { providerId: "openai", model: "gpt-4o-mini", providerDisplayName: "OpenAI", modelDisplayName: "GPT-4o mini" },
     { providerId: "anthropic", model: "claude-sonnet-4-5", providerDisplayName: "Anthropic", modelDisplayName: "Claude Sonnet" },