refactor(i18n): use JSON with flattened key and namespace (#30114)

Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

web/vitest.setup.ts

@@ -90,12 +90,17 @@ vi.mock('react-i18next', async () => {
   const actual = await vi.importActual<typeof import('react-i18next')>('react-i18next')
   return {
     ...actual,
-    useTranslation: () => ({
+    useTranslation: (defaultNs?: string) => ({
       t: (key: string, options?: Record<string, unknown>) => {
         if (options?.returnObjects)
           return [`${key}-feature-1`, `${key}-feature-2`]
-        if (options)
-          return `${key}:${JSON.stringify(options)}`
+        const ns = options?.ns ?? defaultNs
+        if (options || ns) {
+          const { ns: _ns, ...rest } = options ?? {}
+          const prefix = ns ? `${ns}.` : ''
+          const suffix = Object.keys(rest).length > 0 ? `:${JSON.stringify(rest)}` : ''
+          return `${prefix}${key}${suffix}`
+        }
         return key
       },
       i18n: {