Add demo config for StackBlitz

demo/package.json

@@ -7,7 +7,81 @@
         "dev": "vite",
         "build": "vite build",
         "preview": "vite preview",
-        "dev_en":"vite --mode english"
+        "dev_en": "vite --mode english",
+        "button": "vite --mode button",
+        "icon": "vite --mode icon",
+        "navBar": "vite --mode navBar",
+        "divider": "vite --mode divider",
+        "cell": "vite --mode cell",
+        "switch": "vite --mode switch",
+        "avatar": "vite --mode avatar",
+        "tabs": "vite --mode tabs",
+        "tabBar": "vite --mode tabBar",
+        "steps": "vite --mode steps",
+        "indexBar": "vite --mode indexBar",
+        "radio": "vite --mode radio",
+        "checkbox": "vite --mode checkbox",
+        "input": "vite --mode input",
+        "grids": "vite --mode grids",
+        "swiper": "vite --mode swiper",
+        "placeholder": "vite --mode placeholder",
+        "skeleton": "vite --mode skeleton",
+        "rate": "vite --mode rate",
+        "slider": "vite --mode slider",
+        "badge": "vite --mode badge",
+        "noticeBar": "vite --mode noticeBar",
+        "progress": "vite --mode progress",
+        "progressLoop": "vite --mode progressLoop",
+        "mask": "vite --mode mask",
+        "toast": "vite --mode toast",
+        "loading": "vite --mode loading",
+        "popup": "vite --mode popup",
+        "bottomSheet": "vite --mode bottomSheet",
+        "modal": "vite --mode modal",
+        "dialog": "vite --mode dialog",
+        "actionSheet": "vite --mode actionSheet",
+        "picker": "vite --mode picker",
+        "asyncPicker": "vite --mode asyncPicker",
+        "timePicker": "vite --mode timePicker",
+        "calendar": "vite --mode calendar",
+        "pagination": "vite --mode pagination",
+        "button_en": "vite --mode button_en",
+        "icon_en": "vite --mode icon_en",
+        "navBar_en": "vite --mode navBar_en",
+        "divider_en": "vite --mode divider_en",
+        "cell_en": "vite --mode cell_en",
+        "switch_en": "vite --mode switch_en",
+        "avatar_en": "vite --mode avatar_en",
+        "tabs_en": "vite --mode tabs_en",
+        "tabBar_en": "vite --mode tabBar_en",
+        "steps_en": "vite --mode steps_en",
+        "indexBar_en": "vite --mode indexBar_en",
+        "radio_en": "vite --mode radio_en",
+        "checkbox_en": "vite --mode checkbox_en",
+        "input_en": "vite --mode input_en",
+        "grids_en": "vite --mode grids_en",
+        "swiper_en": "vite --mode swiper_en",
+        "placeholder_en": "vite --mode placeholder_en",
+        "skeleton_en": "vite --mode skeleton_en",
+        "rate_en": "vite --mode rate_en",
+        "slider_en": "vite --mode slider_en",
+        "badge_en": "vite --mode badge_en",
+        "noticeBar_en": "vite --mode noticeBar_en",
+        "progress_en": "vite --mode progress_en",
+        "progressLoop_en": "vite --mode progressLoop_en",
+        "mask_en": "vite --mode mask_en",
+        "toast_en": "vite --mode toast_en",
+        "loading_en": "vite --mode loading_en",
+        "popup_en": "vite --mode popup_en",
+        "bottomSheet_en": "vite --mode bottomSheet_en",
+        "modal_en": "vite --mode modal_en",
+        "dialog_en": "vite --mode dialog_en",
+        "actionSheet_en": "vite --mode actionSheet_en",
+        "picker_en": "vite --mode picker_en",
+        "asyncPicker_en": "vite --mode asyncPicker_en",
+        "timePicker_en": "vite --mode timePicker_en",
+        "calendar_en": "vite --mode calendar_en",
+        "pagination_en": "vite --mode pagination_en"
     },
     "devDependencies": {
         "@sveltejs/vite-plugin-svelte": "^2.0.2",

demo/src/App.svelte

@@ -1,5 +1,5 @@
 <script>
-    import { setContext } from 'svelte';
+    import { setContext, onMount } from 'svelte';
     import Router, { querystring, location, push } from 'svelte-spa-router';
     import { routes, routes_en } from './route';
     import { NavBar, Icon } from '../../components';
@@ -49,6 +49,19 @@
     const toHomeFun = () => {
         push(`/`);
     };
+    const mode = import.meta.env.MODE;
+    // 判断 mode 后三个字符是否是 _en
+    // Determine whether the last three characters of mode are _en
+    const englishMode = mode.slice(-3) === '_en';
+    const devMode = mode === 'development';
+    onMount(() => {
+        if (!devMode) {
+            // 英文模式去掉 mode 后面的 _en 作为 nav
+            // English mode removes _en after mode as nav
+            const nav = englishMode ? mode.slice(0, -3) : mode;
+            push(`/${nav}`);
+        }
+    });
 </script>
 
 <main class="bg-gray9 dark:bg-gray3 text-black dark:text-white/90 relative min-h-screen text-justify w-screen antialiased">

demo/src/main.js

@@ -8,7 +8,12 @@ let urlParams = new URLSearchParams(urlLang);
 // 设置语言
 // Set language
 let lang = urlParams.get('lang') ? urlParams.get('lang') : sessionStorage.getItem('lang') ? sessionStorage.getItem('lang') : 'zh_CN';
-sessionStorage.setItem('lang', import.meta.env.MODE === 'english' ? 'en_US' : lang);
+
+const mode = import.meta.env.MODE;
+// 判断 mode 后三个字符是否是 _en
+// Determine whether the last three characters of mode are _en
+const englishMode = mode.slice(-3) === '_en' || mode === 'english';
+sessionStorage.setItem('lang', englishMode ? 'en_US' : lang);
 setTimeout(() => {
     window.history.replaceState({}, 0, window.location.href.split('?')[0]);
 }, 300);