feat: seamless-scaling intl

demos/seamless-scaling/.vscode/settings.json

@@ -6,5 +6,6 @@
     { "language": "typescriptreact", "autoFix": true }
   ],
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "i18n-ally.localesPaths": ["src/locales"]
 }

demos/seamless-scaling/package.json

@@ -43,6 +43,7 @@
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.55.0",
+    "react-intl": "^7.1.14",
     "react-resizable-panels": "^2.1.7",
     "recharts": "^2.15.2",
     "sonner": "^2.0.3",

demos/seamless-scaling/src/IntlProvider.tsx

@@ -0,0 +1,51 @@
+import React, { createContext, useEffect, useContext, useMemo } from 'react'
+import { IntlProvider as ReactIntlProvider } from 'react-intl'
+import { messages, getLocaleFromUrl, Locale, getTimeLocale } from './locales'
+
+interface IntlContextValue {
+  locale: Locale
+  timeLocale: string
+}
+
+const IntlContext = createContext<IntlContextValue>({
+  locale: 'zh-CN',
+  timeLocale: 'zh-CN',
+})
+
+export const useLocale = () => useContext(IntlContext)
+
+interface IntlProviderProps {
+  children: React.ReactNode
+}
+
+export function IntlProvider({ children }: IntlProviderProps) {
+  const locale = useMemo(() => getLocaleFromUrl(), [])
+  const timeLocale = useMemo(() => getTimeLocale(locale), [locale])
+
+  const contextValue = useMemo(
+    () => ({
+      locale,
+      timeLocale,
+    }),
+    [locale, timeLocale]
+  )
+
+  useEffect(() => {
+    // 根据语言设置 html lang 属性，用于 CSS :lang() 选择器
+    if (typeof document !== 'undefined') {
+      document.documentElement.lang = locale
+    }
+  }, [locale])
+
+  return (
+    <IntlContext.Provider value={contextValue}>
+      <ReactIntlProvider
+        locale={locale}
+        messages={messages[locale]}
+        defaultLocale="zh-CN"
+      >
+        {children}
+      </ReactIntlProvider>
+    </IntlContext.Provider>
+  )
+}