fix: locale cannot apply for independent demo routes

src/features/locales.ts

@@ -1,3 +1,4 @@
+import { SP_ROUTE_PREFIX } from '@/constants';
 import type { IApi } from '@/types';
 import path from 'path';
 import { winPath } from 'umi/plugin-utils';
@@ -112,7 +113,15 @@ const LocalesContainer: FC<{ children: ReactNode }> = (props) => {
         : history.location.pathname.replace(/([^/])\\/$/, '$1')
           .startsWith("${api.config.base!.replace(/\/$/, '')}" + locale.base)
     ));
-    const locale = matched ? matched.id : locales[0].id;
+    let locale = matched ? matched.id : locales[0].id;
+    // using query on demos
+    if(history.location.pathname.startsWith('/${SP_ROUTE_PREFIX}demos')){
+        const params = new URLSearchParams(history.location.search);
+        // match the locale of the query
+        if (params.get('locale')){
+          locale = params.get('locale');
+        }
+    }
     const localeMessages = messages[locale] || {};
 
     // append internal message, for use intl as string template util

suites/theme-mobile/src/builtins/Previewer/index.tsx

@@ -1,4 +1,4 @@
-import { IPreviewerProps, useRouteMeta, useSiteData } from 'dumi';
+import { IPreviewerProps, useLocale, useRouteMeta, useSiteData } from 'dumi';
 import Previewer from 'dumi/theme-default/builtins/Previewer';
 import Device from 'dumi/theme/slots/Device';
 import React, { useCallback, useEffect, useState, type FC } from 'react';
@@ -9,12 +9,14 @@ const MobilePreviewer: FC<IPreviewerProps> = (props) => {
     frontmatter: { mobile = true },
   } = useRouteMeta();
   const { themeConfig } = useSiteData();
+  const locale = useLocale();
   const generateUrl = useCallback((p: typeof props) => {
     const [pathname, search] = p.demoUrl.split('?');
     const params = new URLSearchParams(search);
 
     if (p.compact) params.set('compact', '');
     if (p.background) params.set('background', p.background);
+    if (locale.id) params.set('locale', locale.id);
 
     return `${pathname}?${params.toString()}`.replace(/\?$/, '');
   }, []);