优化多语言处理

2026-03-07 21:09:55 +08:00
parent 3cc28167e0
commit 8f265f8c0c
6 changed files with 193 additions and 36 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,7 +3,10 @@ import "./globals.css"
 import { JetBrains_Mono } from "next/font/google"
 import { NextIntlClientProvider } from "next-intl"
 import { AppI18nProvider } from "@/components/i18n-provider"
+import { getMessagesForLocale } from "@/i18n/messages"
+import { resolveRequestLocale } from "@/i18n/resolve-request-locale"
 import { ThemeProvider } from "@/components/theme-provider"
+import { toIntlLocale } from "@/lib/i18n"

 const jetbrainsMono = JetBrains_Mono({
  subsets: ["latin"],
@@ -15,16 +18,30 @@ export const metadata: Metadata = {
  description: "AI Coding Agent Conversation Manager",
 }

-export default function RootLayout({
+export default async function RootLayout({
  children,
 }: {
  children: React.ReactNode
 }) {
+  const appLocale = await resolveRequestLocale()
+  const initialLocale = toIntlLocale(appLocale)
+  const initialMessages = await getMessagesForLocale(appLocale)
+
  return (
-    <html lang="en" className={jetbrainsMono.variable} suppressHydrationWarning>
+    <html
+      lang={initialLocale}
+      className={jetbrainsMono.variable}
+      suppressHydrationWarning
+    >
      <body>
-        <NextIntlClientProvider locale="en" messages={null}>
-          <AppI18nProvider>
+        <NextIntlClientProvider
+          locale={initialLocale}
+          messages={initialMessages}
+        >
+          <AppI18nProvider
+            initialLocale={initialLocale}
+            initialMessages={initialMessages}
+          >
            <ThemeProvider
              attribute="class"
              defaultTheme="system"
--- a/src/components/i18n-provider.tsx
+++ b/src/components/i18n-provider.tsx
@@ -12,14 +12,18 @@ import {
 import { NextIntlClientProvider, type AbstractIntlMessages } from "next-intl"
 import { getFallbackMessages, getMessagesForLocale } from "@/i18n/messages"
 import {
-  APP_LOCALE_TO_INTL_LOCALE,
-  DEFAULT_LANGUAGE_SETTINGS,
+  fromIntlLocale,
  getSystemLocaleCandidates,
+  LANGUAGE_COOKIE_KEY,
+  LANGUAGE_MODE_COOKIE_KEY,
  LANGUAGE_SETTINGS_STORAGE_KEY,
  normalizeLanguageSettings,
  resolveAppLocale,
+  toIntlLocale,
+  type IntlLocale,
 } from "@/lib/i18n"
 import { getSystemLanguageSettings } from "@/lib/tauri"
+import { AppBootLoading } from "@/components/layout/app-boot-loading"
 import type { AppLocale, SystemLanguageSettings } from "@/lib/types"

 interface AppI18nContextValue {
@@ -48,18 +52,6 @@ function getSystemLocaleServerSnapshot(): string {
  return ""
 }

-function loadPersistedLanguageSettings(): SystemLanguageSettings | null {
-  if (typeof window === "undefined") return null
-
-  try {
-    const raw = window.localStorage.getItem(LANGUAGE_SETTINGS_STORAGE_KEY)
-    if (!raw) return null
-    return normalizeLanguageSettings(JSON.parse(raw) as SystemLanguageSettings)
-  } catch {
-    return null
-  }
-}
-
 function persistLanguageSettings(settings: SystemLanguageSettings) {
  if (typeof window === "undefined") return

@@ -73,6 +65,17 @@ function persistLanguageSettings(settings: SystemLanguageSettings) {
  }
 }

+function persistLanguageCookies(
+  settings: SystemLanguageSettings,
+  appLocale: AppLocale
+) {
+  if (typeof document === "undefined") return
+
+  const maxAge = 60 * 60 * 24 * 365
+  document.cookie = `${LANGUAGE_MODE_COOKIE_KEY}=${settings.mode}; Path=/; Max-Age=${maxAge}; SameSite=Lax`
+  document.cookie = `${LANGUAGE_COOKIE_KEY}=${toIntlLocale(appLocale)}; Path=/; Max-Age=${maxAge}; SameSite=Lax`
+}
+
 export function useAppI18n() {
  const context = useContext(AppI18nContext)
  if (!context) {
@@ -81,14 +84,29 @@ export function useAppI18n() {
  return context
 }

-export function AppI18nProvider({ children }: { children: React.ReactNode }) {
+interface AppI18nProviderProps {
+  children: React.ReactNode
+  initialLocale?: IntlLocale
+  initialMessages?: AbstractIntlMessages
+}
+
+export function AppI18nProvider({
+  children,
+  initialLocale = "en",
+  initialMessages,
+}: AppI18nProviderProps) {
+  const initialAppLocale = fromIntlLocale(initialLocale)
  const [languageSettings, setLanguageSettingsState] =
-    useState<SystemLanguageSettings>(
-      () => loadPersistedLanguageSettings() ?? DEFAULT_LANGUAGE_SETTINGS
-    )
+    useState<SystemLanguageSettings>({
+      mode: "manual",
+      language: initialAppLocale,
+    })
  const [languageSettingsLoaded, setLanguageSettingsLoaded] = useState(false)
  const [messages, setMessages] = useState<AbstractIntlMessages>(
-    getFallbackMessages()
+    initialMessages ?? getFallbackMessages()
+  )
+  const [messagesLocale, setMessagesLocale] = useState<AppLocale>(
+    initialMessages ? initialAppLocale : "en"
  )

  const systemLocaleSnapshot = useSyncExternalStore(
@@ -137,15 +155,22 @@ export function AppI18nProvider({ children }: { children: React.ReactNode }) {
    [languageSettings, systemLocaleCandidates]
  )

-  const intlLocale = APP_LOCALE_TO_INTL_LOCALE[appLocale]
+  useEffect(() => {
+    if (!languageSettingsLoaded) return
+    persistLanguageCookies(languageSettings, appLocale)
+  }, [appLocale, languageSettings, languageSettingsLoaded])

  useEffect(() => {
+    if (appLocale === messagesLocale) {
+      return
+    }
    let cancelled = false

    getMessagesForLocale(appLocale)
      .then((nextMessages) => {
        if (!cancelled) {
          setMessages(nextMessages)
+          setMessagesLocale(appLocale)
        }
      })
      .catch((err) => {
@@ -155,11 +180,15 @@ export function AppI18nProvider({ children }: { children: React.ReactNode }) {
    return () => {
      cancelled = true
    }
-  }, [appLocale])
+  }, [appLocale, messagesLocale])
+
+  const localeReady = appLocale === messagesLocale
+  const appReady = languageSettingsLoaded && localeReady
+  const activeIntlLocale = toIntlLocale(messagesLocale)

  useEffect(() => {
-    document.documentElement.lang = intlLocale
-  }, [intlLocale])
+    document.documentElement.lang = activeIntlLocale
+  }, [activeIntlLocale])

  const contextValue = useMemo<AppI18nContextValue>(
    () => ({
@@ -173,8 +202,8 @@ export function AppI18nProvider({ children }: { children: React.ReactNode }) {

  return (
    <AppI18nContext.Provider value={contextValue}>
-      <NextIntlClientProvider locale={intlLocale} messages={messages}>
-        {children}
+      <NextIntlClientProvider locale={activeIntlLocale} messages={messages}>
+        {appReady ? children : <AppBootLoading />}
      </NextIntlClientProvider>
    </AppI18nContext.Provider>
  )
--- a/src/components/layout/app-boot-loading.tsx
+++ b/src/components/layout/app-boot-loading.tsx
@@ -0,0 +1,14 @@
+"use client"
+
+import { Loader2 } from "lucide-react"
+
+export function AppBootLoading() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background text-foreground">
+      <div className="flex items-center gap-3 px-2 py-1">
+        <Loader2 className="h-4 w-4 animate-spin text-primary" />
+        <span className="text-sm font-medium tracking-tight">codeg</span>
+      </div>
+    </div>
+  )
+}
--- a/src/i18n/request.ts
+++ b/src/i18n/request.ts
@@ -1,7 +1,13 @@
 import { getRequestConfig } from "next-intl/server"
-import enMessages from "@/i18n/messages/en.json"
+import { getMessagesForLocale } from "@/i18n/messages"
+import { resolveRequestLocale } from "@/i18n/resolve-request-locale"
+import { APP_LOCALE_TO_INTL_LOCALE } from "@/lib/i18n"

-export default getRequestConfig(async () => ({
-  locale: "en",
-  messages: enMessages,
-}))
+export default getRequestConfig(async () => {
+  const appLocale = await resolveRequestLocale()
+
+  return {
+    locale: APP_LOCALE_TO_INTL_LOCALE[appLocale],
+    messages: await getMessagesForLocale(appLocale),
+  }
+})
--- a/src/i18n/resolve-request-locale.ts
+++ b/src/i18n/resolve-request-locale.ts
@@ -0,0 +1,51 @@
+import { cookies, headers } from "next/headers"
+import {
+  LANGUAGE_COOKIE_KEY,
+  LANGUAGE_MODE_COOKIE_KEY,
+  parseAcceptLanguageHeader,
+  parseLocaleFromCookieValue,
+  resolveSystemLocale,
+} from "@/lib/i18n"
+import type { AppLocale, LanguageMode } from "@/lib/types"
+
+const FALLBACK_LOCALE: AppLocale = "en"
+
+function parseLanguageModeCookie(value: string | undefined): LanguageMode {
+  return value === "manual" ? "manual" : "system"
+}
+
+export async function resolveRequestLocale(): Promise<AppLocale> {
+  let configuredLocale: AppLocale | null = null
+  let languageMode: LanguageMode = "system"
+
+  try {
+    const cookieStore = await cookies()
+    configuredLocale = parseLocaleFromCookieValue(
+      cookieStore.get(LANGUAGE_COOKIE_KEY)?.value
+    )
+    languageMode = parseLanguageModeCookie(
+      cookieStore.get(LANGUAGE_MODE_COOKIE_KEY)?.value
+    )
+  } catch {
+    // Ignore when request cookies are unavailable (e.g. static export build).
+  }
+
+  if (configuredLocale && languageMode === "manual") {
+    return configuredLocale
+  }
+
+  try {
+    const headerStore = await headers()
+    const candidates = parseAcceptLanguageHeader(
+      headerStore.get("accept-language")
+    )
+    const fromHeader = resolveSystemLocale(candidates)
+    if (fromHeader) {
+      return fromHeader
+    }
+  } catch {
+    // Ignore when request headers are unavailable (e.g. static export build).
+  }
+
+  return configuredLocale ?? FALLBACK_LOCALE
+}
--- a/src/lib/i18n.ts
+++ b/src/lib/i18n.ts
@@ -3,6 +3,8 @@ import type { AppLocale, SystemLanguageSettings } from "@/lib/types"
 export const APP_LOCALES: readonly AppLocale[] = ["en", "zh_cn", "zh_tw"]
 const FALLBACK_APP_LOCALE: AppLocale = "en"
 export const LANGUAGE_SETTINGS_STORAGE_KEY = "codeg.system_language_settings"
+export const LANGUAGE_MODE_COOKIE_KEY = "codeg.language_mode"
+export const LANGUAGE_COOKIE_KEY = "codeg.locale"
 export type IntlLocale = "en" | "zh-CN" | "zh-TW"

 export const DEFAULT_LANGUAGE_SETTINGS: SystemLanguageSettings = {
@@ -16,10 +18,28 @@ export const APP_LOCALE_TO_INTL_LOCALE: Record<AppLocale, IntlLocale> = {
  zh_tw: "zh-TW",
 }

+export const INTL_LOCALE_TO_APP_LOCALE: Record<IntlLocale, AppLocale> = {
+  en: "en",
+  "zh-CN": "zh_cn",
+  "zh-TW": "zh_tw",
+}
+
 export function isAppLocale(value: unknown): value is AppLocale {
  return APP_LOCALES.includes(value as AppLocale)
 }

+export function isIntlLocale(value: unknown): value is IntlLocale {
+  return value === "en" || value === "zh-CN" || value === "zh-TW"
+}
+
+export function toIntlLocale(locale: AppLocale): IntlLocale {
+  return APP_LOCALE_TO_INTL_LOCALE[locale]
+}
+
+export function fromIntlLocale(locale: IntlLocale): AppLocale {
+  return INTL_LOCALE_TO_APP_LOCALE[locale]
+}
+
 export function normalizeLanguageSettings(
  settings: Partial<SystemLanguageSettings> | null | undefined
 ): SystemLanguageSettings {
@@ -34,7 +54,7 @@ export function normalizeLanguageSettings(
  }
 }

-function mapSystemLocaleToAppLocale(localeTag: string): AppLocale | null {
+export function mapLocaleTagToAppLocale(localeTag: string): AppLocale | null {
  const normalized = localeTag.trim().toLowerCase().replace(/_/g, "-")

  if (!normalized) return null
@@ -54,6 +74,26 @@ function mapSystemLocaleToAppLocale(localeTag: string): AppLocale | null {
  return null
 }

+export function parseAcceptLanguageHeader(value: string | null): string[] {
+  if (!value) return []
+
+  return value
+    .split(",")
+    .map((entry) => entry.split(";")[0]?.trim())
+    .filter((entry): entry is string => Boolean(entry))
+}
+
+export function parseLocaleFromCookieValue(
+  value: string | undefined
+): AppLocale | null {
+  if (!value) return null
+
+  if (isAppLocale(value)) return value
+  if (isIntlLocale(value)) return fromIntlLocale(value)
+
+  return mapLocaleTagToAppLocale(value)
+}
+
 export function getSystemLocaleCandidates(): string[] {
  if (typeof navigator === "undefined") return []

@@ -67,7 +107,7 @@ export function getSystemLocaleCandidates(): string[] {

 export function resolveSystemLocale(candidates: string[]): AppLocale | null {
  for (const candidate of candidates) {
-    const resolved = mapSystemLocaleToAppLocale(candidate)
+    const resolved = mapLocaleTagToAppLocale(candidate)
    if (resolved) return resolved
  }