@allbluecn/web-app 0.6.2 → 0.7.0

package/src/components/ui-shared/skeleton.tsx

@@ -0,0 +1,30 @@
+// 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 { cn } from "./utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/src/components/ui-shared/sonner.tsx

@@ -0,0 +1,37 @@
+// 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 { Toaster as Sonner, type ToasterProps, toast } from "sonner"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  return (
+    <Sonner
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4 text-emerald-600 dark:text-emerald-500" />,
+        info: <InfoIcon className="size-4 text-sky-600 dark:text-sky-500" />,
+        warning: <TriangleAlertIcon className="size-4 text-amber-600 dark:text-amber-500" />,
+        error: <OctagonXIcon className="size-4 text-red-600 dark:text-red-500" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster, toast }

package/src/components/ui-shared/switch.tsx

@@ -0,0 +1,48 @@
+// 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 { Switch as SwitchPrimitive } from "radix-ui"
+
+import { cn } from "./utils"
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-[state=checked]:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-[state=checked]:translate-x-[calc(100%-2px)] dark:data-[state=checked]:bg-primary-foreground group-data-[size=default]/switch:data-[state=unchecked]:translate-x-0 group-data-[size=sm]/switch:data-[state=unchecked]:translate-x-0 dark:data-[state=unchecked]:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }

package/src/components/ui-shared/textarea.tsx

@@ -0,0 +1,35 @@
+// 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 { cn } from "./utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }

package/src/components/ui-shared/timezone-provider.tsx

@@ -0,0 +1,55 @@
+// 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 { createContext, useContext, type ReactNode } from 'react'
+import { resolveTimezone } from '@/lib/datetime'
+
+const TimezoneContext = createContext<string>(
+  typeof Intl !== 'undefined'
+    ? Intl.DateTimeFormat().resolvedOptions().timeZone
+    : 'Asia/Shanghai',
+)
+
+/**
+ * 提供用户级全局时区。
+ * 项目时区覆盖由 useProjectTimezone hook 处理（在项目路由组件内调用）。
+ */
+export function TimezoneProvider({
+  userTimezone,
+  children,
+}: {
+  userTimezone?: string | null
+  children: ReactNode
+}) {
+  const tz = resolveTimezone(null, userTimezone)
+  return (
+    <TimezoneContext.Provider value={tz}>{children}</TimezoneContext.Provider>
+  )
+}
+
+export function useTimezone(): string {
+  return useContext(TimezoneContext)
+}
+
+/**
+ * 在项目内使用：合并项目时区与用户时区。
+ * @param projectTz 项目时区（来自 loader 数据），null 表示跟随用户
+ */
+export function useProjectTimezone(projectTz?: string | null): string {
+  const userTz = useContext(TimezoneContext)
+  return resolveTimezone(projectTz, userTz)
+}

package/src/components/ui-shared/tooltip.tsx

@@ -0,0 +1,72 @@
+// 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 { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "./utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }

package/src/components/ui-shared/use-mobile.ts

@@ -0,0 +1,36 @@
+// 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"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/src/components/ui-shared/user-avatar.tsx

@@ -0,0 +1,83 @@
+// 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/>.
+
+"use client"
+
+import { NotionAvatar } from "./notion-avatar"
+import type { AvatarConfig, ShapeType } from "@allbluecn/shared"
+
+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>
+  )
+}

package/src/components/ui-shared/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/components/workspace/schemas/create-workspace.ts

@@ -16,7 +16,7 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { z } from "zod"
-import { getClientI18n } from "@/lib/i18n/client"
+import { getClientI18n } from "@/i18n/client"
 
 export const createWorkspaceSchema = z.object({
   name: z.string().min(1, getClientI18n().t('createWorkspace.nameRequired', { ns: 'workspace' })),

package/src/hooks/use-entity-subscription.ts

@@ -17,7 +17,7 @@
 
 
 import { useEffect, useState } from "react"
-import type { EntityUpdateEvent } from "@allbluecn/shared/interfaces/transport"
+import type { EntityUpdateEvent } from "@allbluecn/shared"
 
 export function useEntitySubscription(entityIds: string[]): EntityUpdateEvent | null {
   const [lastEvent, setLastEvent] = useState<EntityUpdateEvent | null>(null)

package/src/hooks/use-notifications.ts

@@ -4,8 +4,8 @@ import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useRouter } from '@tanstack/react-router'
 import { toast } from 'sonner'
 import { useTranslation } from 'react-i18next'
-import type { NotificationSseValue, NotificationItem } from '@allbluecn/shared'
-import { isInDndWindow } from '@allbluecn/shared'
+import type { NotificationSseValue, NotificationItem } from '@allbluecn/kernel'
+import { isInDndWindow } from '@allbluecn/kernel'
 import { getUnreadCountFn, getNotificationPreferencesFn } from '@/server/serverFns/notifications'
 
 export const NOTIFICATION_ROOT_KEY = ['notifications'] as const

package/src/i18n/__tests__/detect.test.ts

@@ -0,0 +1,48 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+import { describe, it, expect } from 'vitest'
+import { detectLocale } from '../detect'
+
+function mockRequest(overrides: Partial<{ url: string; cookie: string; acceptLanguage: string }> = {}) {
+  const url = new URL(overrides.url ?? 'http://localhost:3000/')
+  const headers = new Headers()
+  if (overrides.cookie) headers.set('cookie', overrides.cookie)
+  if (overrides.acceptLanguage) headers.set('accept-language', overrides.acceptLanguage)
+  return new Request(url, { headers })
+}
+
+describe('detectLocale', () => {
+  it('URL param ?lng=en 优先级最高', () => {
+    const req = mockRequest({ url: 'http://localhost:3000/?lng=en', cookie: 'lng=zh' })
+    expect(detectLocale(req, null)).toBe('en')
+  })
+
+  it('cookie lng 优先级第二', () => {
+    const req = mockRequest({ cookie: 'lng=en' })
+    expect(detectLocale(req, null)).toBe('en')
+  })
+
+  it('User.locale 优先级第三', () => {
+    const req = mockRequest({})
+    expect(detectLocale(req, 'en')).toBe('en')
+  })
+
+  it('Accept-Language 优先级第四', () => {
+    const req = mockRequest({ acceptLanguage: 'en-US,en;q=0.9' })
+    expect(detectLocale(req, null)).toBe('en')
+  })
+
+  it('Accept-Language 中文检测', () => {
+    const req = mockRequest({ acceptLanguage: 'zh-CN,zh;q=0.9,en;q=0.8' })
+    expect(detectLocale(req, null)).toBe('zh')
+  })
+
+  it('不支持的语言回退到 fallbackLng', () => {
+    const req = mockRequest({ acceptLanguage: 'ja-JP,ja;q=0.9' })
+    expect(detectLocale(req, null)).toBe('zh')
+  })
+
+  it('全部缺失时回退到 zh', () => {
+    const req = mockRequest({})
+    expect(detectLocale(req, null)).toBe('zh')
+  })
+})

package/src/i18n/__tests__/integration.test.tsx

@@ -0,0 +1,32 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { I18nextProvider, useTranslation } from 'react-i18next'
+import { createServerI18n } from '../server'
+
+function TestComponent() {
+  const { t } = useTranslation()
+  return <span>{t('button.save')}</span>
+}
+
+describe('I18nextProvider 集成', () => {
+  it('中文 Provider 下渲染中文文案', () => {
+    const i18n = createServerI18n('zh')
+    render(
+      <I18nextProvider i18n={i18n}>
+        <TestComponent />
+      </I18nextProvider>
+    )
+    expect(screen.getByText('保存')).toBeDefined()
+  })
+
+  it('英文 Provider 下渲染英文文案', () => {
+    const i18n = createServerI18n('en')
+    render(
+      <I18nextProvider i18n={i18n}>
+        <TestComponent />
+      </I18nextProvider>
+    )
+    expect(screen.getByText('Save')).toBeDefined()
+  })
+})

package/src/i18n/__tests__/server.test.ts

@@ -0,0 +1,33 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+import { describe, it, expect, afterEach } from 'vitest'
+import { createServerI18n } from '../server'
+
+describe('createServerI18n', () => {
+  afterEach(() => {
+    // Clean up i18next instances to avoid memory leaks between tests
+  })
+
+  it('中文实例翻译 common.key', () => {
+    const i18n = createServerI18n('zh')
+    expect(i18n.t('button.save')).toBe('保存')
+    expect(i18n.t('status.loading')).toBe('加载中…')
+  })
+
+  it('英文实例翻译 common.key', () => {
+    const i18n = createServerI18n('en')
+    expect(i18n.t('button.save')).toBe('Save')
+    expect(i18n.t('status.loading')).toBe('Loading…')
+  })
+
+  it('两个实例语言隔离（不串扰）', () => {
+    const i18nZh = createServerI18n('zh')
+    const i18nEn = createServerI18n('en')
+    expect(i18nZh.t('button.save')).toBe('保存')
+    expect(i18nEn.t('button.save')).toBe('Save')
+  })
+
+  it('缺失 key 回退到中文', () => {
+    const i18n = createServerI18n('en')
+    expect(i18n.exists('button.save')).toBe(true)
+  })
+})

package/src/i18n/client.ts

@@ -0,0 +1,32 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+import i18next, { type i18n as I18nInstance } from 'i18next'
+import { initReactI18next } from 'react-i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+import { resources, fallbackLng, defaultNs, supportedLngs } from './config'
+
+let clientI18n: I18nInstance | null = null
+
+export function getClientI18n(): I18nInstance {
+  if (!clientI18n) {
+    clientI18n = i18next.createInstance()
+    clientI18n
+      .use(initReactI18next)
+      .use(LanguageDetector)
+      .init({
+        fallbackLng,
+        defaultNS: defaultNs,
+        supportedLngs: [...supportedLngs],
+        resources,
+        interpolation: { escapeValue: false },
+        react: { useSuspense: false },
+        detection: {
+          // 与服务端 detectLocale 同源（querystring + cookie），避免 SSR/客户端语言不一致导致 hydration mismatch
+          order: ['querystring', 'cookie'],
+          lookupQuerystring: 'lng',
+          lookupCookie: 'lng',
+          caches: ['cookie'],
+        },
+      })
+  }
+  return clientI18n
+}