fix: internationalization-related modifications, temporarily hide the entry point

examples/sites/src/components/demo.vue

@@ -123,7 +123,7 @@ const showPreview = inject('showPreview')
 const state = reactive({
   tabValue: 'tab0',
   cmpId: router.currentRoute.value.params.cmpId,
-  langKey: getWord('zh-CN', 'en-US'),
+  langKey: getWord('zh-CN', 'en-US', 'es-LA', 'pt-BR'),
   copyTip: i18nByKey('copyCode'),
   copyIcon: 'i-ti-copy'
 })

examples/sites/src/const.ts

@@ -5,10 +5,15 @@ export const LANG_KEY = '_lang'
 // localStorage中保存语言的value
 export const ZH_CN_LANG = 'zhCN'
 export const EN_US_LANG = 'enUS'
+export const ES_LA_LANG = 'esLA'
+export const PT_BR_LANG = 'ptBR'
+
 // 语言key值对应的路由
 export const LANG_PATH_MAP = {
   [ZH_CN_LANG]: 'zh-CN',
-  [EN_US_LANG]: 'en-US'
+  [EN_US_LANG]: 'en-US',
+  [ES_LA_LANG]: 'es-LA',
+  [PT_BR_LANG]: 'pt-BR'
 }
 
 export const CURRENT_THEME_KEY = 'tiny-current-theme'

examples/sites/src/i18n/en.json

@@ -1,6 +1,8 @@
 {
   "zh-cn": "Chinese",
   "en-us": "English",
+  "es-la": "Spanish",
+  "pt-br": "Portuguese",
   "localeType": "Language Selection",
   "dark": "Dark",
   "light": "Light",

examples/sites/src/i18n/es.json

@@ -0,0 +1,47 @@
+{
+  "zh-cn": "Chinese",
+  "en-us": "English",
+  "es-la": "Spanish",
+  "pt-br": "Portuguese",
+  "localeType": "Language Selection",
+  "dark": "Dark",
+  "light": "Light",
+  "searchPlaceholder": "Search",
+  "home": "Home",
+  "doc": "Docs",
+  "component": "Components",
+  "common": "Common",
+  "apiPreference": "Framework",
+  "apiTiny": "Vue",
+  "yan-shi": "Demo",
+  "demos": "Demos",
+  "api": "API",
+  "name": "Name",
+  "propType": "Type",
+  "defValue": "Default",
+  "typeValue": "Option Value",
+  "desc": "Description",
+  "showCode": "Show Code",
+  "hideCode": "Hide Code",
+  "copyCode": "Copy Code",
+  "doc-owner": "Owner",
+  "copyCodeOk": "Copy Success",
+  "frameAngular": "Angular",
+  "playground": "Open Playground",
+  "changeLanguage": "Change Language",
+  "changeTheme": "Change Components Theme",
+  "changeApiType": "Change Api Type",
+  "backTop": "Back To Top",
+  "overview": "Components Overview",
+  "overviewDesc": "TinyVue provides a wealth of basic UI components for web applications, and we will continue to explore the best UI practices for enterprise-level applications. Welcome to try TinyVue.",
+  "overviewDescPlus": "TinyVuePlus is a component library for Cloud business scenarios based on TinyVue, following the new design specifications of Cloud CloudDesign and utilizing Vite+Vue3+TypeScript technology stack.",
+  "searchComponents": "search components",
+  "apiType": "Components demos code style",
+  "apiStyleOptions": "Options",
+  "apiStyleComposition": "Composition",
+  "demoMode": "Demo display mode",
+  "demoModeSingle": "Single",
+  "demoModeMultiple": "Multiple",
+  "contributor": "Contributors",
+  "noData": "No Data"
+}

examples/sites/src/i18n/index.js

@@ -3,18 +3,27 @@ import { initI18n, t } from '@opentiny/vue-locale'
 import { $local } from '../tools'
 import zh from './zh.json'
 import en from './en.json'
+import esLA from './es.json'
+import ptBR from './pt.json'
+
+const messages = { enUS: { ...en }, zhCN: { ...zh }, esLA: { ...esLA }, ptBR: { ...ptBR } }
+
+const langMap = new Map([
+  ['zhCN', 'zhCN'],
+  ['enUS', 'enUS'],
+  ['esLA', 'esLA'],
+  ['ptBR', 'ptBR']
+])
+
+$local._lang = langMap.get($local._lang) || 'zhCN'
 
-const messages = { enUS: { ...en }, zhCN: { ...zh } }
-// $local._lang = $local._lang !== 'zhCN' && $local._lang !== 'enUS' ? 'zhCN' : $local._lang
-$local._lang = 'zhCN'
 const customCreateI18n = ({ locale, messages }) =>
   createI18n({
     locale, // set locale
     // legacy: false, // 如果要支持compositionAPI，此项必须设置为false。
     fallbackLocale: 'zhCN', // set fallback locale
     messages // set locale messages
   })
-
 const i18n = initI18n({
   createI18n: customCreateI18n,
   i18n: {
@@ -23,7 +32,17 @@ const i18n = initI18n({
   messages
 })
 const i18nByKey = i18n.global.t
-const getWord = (cn, en) => (i18n.global.locale === 'zhCN' ? cn : en)
+const getWord = (cn, en, es, pt) => {
+  const localeMap = new Map([
+    ['zhCN', cn], // 简体中文
+    ['enUS', en], // 英语
+    ['esLA', es], // 西班牙语
+    ['ptBR', pt] // 葡萄牙语
+  ])
+  const currentLocale = i18n.global.locale
+
+  return localeMap.get(currentLocale) ?? cn
+}
 
 export { i18n, i18nByKey, getWord }
 

examples/sites/src/i18n/pt.json

@@ -0,0 +1,47 @@
+{
+  "zh-cn": "Chinese",
+  "en-us": "English",
+  "es-la": "Spanish",
+  "pt-br": "Portuguese",
+  "localeType": "Language Selection",
+  "dark": "Dark",
+  "light": "Light",
+  "searchPlaceholder": "Search",
+  "home": "Home",
+  "doc": "Docs",
+  "component": "Components",
+  "common": "Common",
+  "apiPreference": "Framework",
+  "apiTiny": "Vue",
+  "yan-shi": "Demo",
+  "demos": "Demos",
+  "api": "API",
+  "name": "Name",
+  "propType": "Type",
+  "defValue": "Default",
+  "typeValue": "Option Value",
+  "desc": "Description",
+  "showCode": "Show Code",
+  "hideCode": "Hide Code",
+  "copyCode": "Copy Code",
+  "doc-owner": "Owner",
+  "copyCodeOk": "Copy Success",
+  "frameAngular": "Angular",
+  "playground": "Open Playground",
+  "changeLanguage": "Change Language",
+  "changeTheme": "Change Components Theme",
+  "changeApiType": "Change Api Type",
+  "backTop": "Back To Top",
+  "overview": "Components Overview",
+  "overviewDesc": "TinyVue provides a wealth of basic UI components for web applications, and we will continue to explore the best UI practices for enterprise-level applications. Welcome to try TinyVue.",
+  "overviewDescPlus": "TinyVuePlus is a component library for Cloud business scenarios based on TinyVue, following the new design specifications of Cloud CloudDesign and utilizing Vite+Vue3+TypeScript technology stack.",
+  "searchComponents": "search components",
+  "apiType": "Components demos code style",
+  "apiStyleOptions": "Options",
+  "apiStyleComposition": "Composition",
+  "demoMode": "Demo display mode",
+  "demoModeSingle": "Single",
+  "demoModeMultiple": "Multiple",
+  "contributor": "Contributors",
+  "noData": "No Data"
+}

examples/sites/src/i18n/zh.json

@@ -1,6 +1,8 @@
 {
   "zh-cn": "中文",
   "en-us": "英文",
+  "es-la": "西班牙语",
+  "pt-br": "葡萄牙语",
   "localeType": "语言选择",
   "dark": "深色",
   "light": "浅色",

examples/sites/src/main.js

@@ -20,7 +20,7 @@ import { i18n } from './i18n/index'
 import { router } from './router'
 import App from './App.vue'
 import { appData } from './tools'
-import { ZH_CN_LANG, EN_US_LANG, LANG_PATH_MAP } from './const'
+import { ZH_CN_LANG, EN_US_LANG, LANG_PATH_MAP, ES_LA_LANG, PT_BR_LANG } from './const'
 import demoConfig from '@demos/config.js'
 
 import hljs from 'highlight.js/lib/core'
@@ -31,6 +31,7 @@ import tsPath from 'highlight.js/lib/languages/typescript'
 import docsearch from '@docsearch/js'
 import '@docsearch/css'
 import { doSearchEverySite } from './tools/docsearch'
+import { getLocaleMode } from './tools/utils.js'
 import '@opentiny/vue-theme/dark-theme-index.css'
 
 const envTarget = import.meta.env.VITE_BUILD_TARGET || 'open'
@@ -65,12 +66,19 @@ setTimeout(() => {
 
 const zhPath = LANG_PATH_MAP[ZH_CN_LANG]
 const enPath = LANG_PATH_MAP[EN_US_LANG]
+const esPath = LANG_PATH_MAP[ES_LA_LANG]
+const ptPath = LANG_PATH_MAP[PT_BR_LANG]
 const isZhCn = location.href.includes(`/${zhPath}`)
 const isEnUs = location.href.includes(`/${enPath}`)
-const notMatchLang = (isZhCn && appData.lang !== ZH_CN_LANG) || (isEnUs && appData.lang !== EN_US_LANG)
+const isEsLa = location.href.includes(`/${esPath}`)
+const isPtBr = location.href.includes(`/${ptPath}`)
+const notMatchLang =
+  (isZhCn && appData.lang !== ZH_CN_LANG) ||
+  (isEnUs && appData.lang !== EN_US_LANG) ||
+  (isEsLa && appData.lang !== ES_LA_LANG) ||
+  (isPtBr && appData.lang !== PT_BR_LANG)
 if (notMatchLang) {
-  // appData.lang = isEnUs ? EN_US_LANG : ZH_CN_LANG 官网先屏蔽英文内容
-  appData.lang = isEnUs ? ZH_CN_LANG : ZH_CN_LANG
+  appData.lang = getLocaleMode()
   i18n.global.locale = appData.lang
 }
 

examples/sites/src/router.js

@@ -9,11 +9,10 @@ const Overview = () => import('@/views/overview.vue')
 const Features = () => import('@/views/features.vue')
 
 const context = import.meta.env.VITE_CONTEXT
-
 let routes = [
   // 组件总览
   {
-    path: `${context}:all?/zh-CN/:theme/overview`,
+    path: `${context}:all?/${LANG_PATH_MAP[appData.lang] || 'zh-CN'}/:theme/overview`,
     component: Layout,
     name: 'overview',
     children: [{ name: 'Overview', path: '', component: Overview, meta: { title: '组件总览 | TinyVue' } }]
@@ -27,7 +26,7 @@ let routes = [
   },
   // 组件
   {
-    path: `${context}:all?/zh-CN/:theme/components/:cmpId`,
+    path: `${context}:all?/${LANG_PATH_MAP[appData.lang] || 'zh-CN'}/:theme/components/:cmpId`,
     component: Layout,
     name: 'components',
     children: [{ name: 'Components', path: '', component: Components }]
@@ -43,7 +42,7 @@ let routes = [
   {
     path: '/:pathMatch(.*)*',
     redirect: () => {
-      const langPath = LANG_PATH_MAP[ZH_CN_LANG]
+      const langPath = LANG_PATH_MAP[appData.lang] || LANG_PATH_MAP[ZH_CN_LANG]
       return { path: `${context}${langPath}/${DEFAULT_THEME}/overview` }
     }
   }

examples/sites/src/tools/appData.js

@@ -1,10 +1,8 @@
 import { reactive, computed } from 'vue'
 import { useAutoStore } from './storage'
 import { useMediaQuery } from './useMediaQuery'
-import { ZH_CN_LANG, EN_US_LANG, LANG_KEY, LANG_PATH_MAP } from '../const'
+import { ZH_CN_LANG, LANG_KEY, LANG_PATH_MAP } from '../const'
 
-const zhPath = LANG_PATH_MAP[ZH_CN_LANG]
-const enPath = LANG_PATH_MAP[EN_US_LANG]
 const appData = reactive({
   lang: useAutoStore('local', LANG_KEY, ZH_CN_LANG),
   theme: useAutoStore('local', '_theme', 'light'),
@@ -16,9 +14,10 @@ const appFn = {
     if (name !== appData.lang) {
       let url = location.href
       url = location.href.replace(LANG_PATH_MAP[appData.lang], LANG_PATH_MAP[name])
-      // appData.lang = name 官网先屏蔽英文内容
+      // appData.lang = name // 官网先屏蔽切换语言，默认中文
       appData.lang = ZH_CN_LANG
-      location.replace(url)
+      history.replaceState({}, '', url)
+      location.reload()
     }
   },
   toggleTheme() {

examples/sites/src/tools/storage.js

@@ -1,4 +1,5 @@
 import { ref, watch } from 'vue'
+import { getLocaleMode } from './utils'
 
 function parse(str) {
   if (str === null) return undefined
@@ -58,13 +59,14 @@ const typeMatcher = { session: $session, local: $local, api: null }
  * @returns 响应式ref
  */
 const useAutoStore = (type, key, defaultValue) => {
-  let refVar = ref(typeMatcher[type][key])
+  let refVar = ref(getLocaleMode())
+  typeMatcher[type][key] = refVar.value
+
   watch(refVar, (curr, prev) => {
     typeMatcher[type][key] = curr
   })
-
   refVar.value = refVar.value ?? defaultValue
-  
+
   return refVar
 }
 

examples/sites/src/tools/useApiMode.js

@@ -1,11 +1,12 @@
 import { reactive } from 'vue'
 import { $local } from './storage'
-import { appFn } from './appData'
+import { appFn, appData } from './appData'
 
 const _modeKey = 'tiny-vue-api-mode'
 const _demoModeKey = 'tiny-vue-demo-mode'
+
 const apiModeState = reactive({
-  localeMode: location.href.includes('en-US') ? 'enUS' : 'zhCN',
+  localeMode: appData.lang,
   apiMode: $local[_modeKey] || 'Composition', // 示例风格:  Options: 组合式; Composition: 选项式
   demoMode: $local[_demoModeKey] || 'default' // 示例展示： default:多示例， single:单示例
 })

examples/sites/src/tools/useStyleSettings.js

@@ -15,6 +15,14 @@ const getStyleSettings = (i18nByKey) => {
     //     {
     //       value: 'enUS',
     //       text: i18nByKey('en-us')
+    //     },
+    //     {
+    //       value: 'esLA',
+    //       text: i18nByKey('es-la')
+    //     },
+    //     {
+    //       value: 'ptBR',
+    //       text: i18nByKey('pt-br')
     //     }
     //   ]
     // },

examples/sites/src/tools/utils.js

@@ -1,5 +1,6 @@
 import Contributors from '@/data/contributors'
 import ContributorMap from '@/data/contributorMap'
+import { ZH_CN_LANG, EN_US_LANG, ES_LA_LANG, PT_BR_LANG, LANG_PATH_MAP } from '../const'
 
 const baseUrl = import.meta.env.BASE_URL
 
@@ -103,4 +104,34 @@ const getCmpContributors = (cmpId) => {
   return contributorInfo
 }
 
-export { $clone, $split, $delay, $idle, pubUrl, fetchDemosFile, getCmpContributors }
+const getLocaleMode = () => {
+  const { href, pathname } = location
+  const DEFAULT_LANG = ZH_CN_LANG // 默认语言
+
+  const langCheckMap = new Map([
+    [
+      EN_US_LANG,
+      () => href.includes(`/${LANG_PATH_MAP[EN_US_LANG]}`) || pathname.includes(`/${LANG_PATH_MAP[EN_US_LANG]}/`)
+    ],
+    [
+      ZH_CN_LANG,
+      () => href.includes(`/${LANG_PATH_MAP[ZH_CN_LANG]}`) || pathname.includes(`/${LANG_PATH_MAP[ZH_CN_LANG]}/`)
+    ],
+    [
+      ES_LA_LANG,
+      () => href.includes(`/${LANG_PATH_MAP[ES_LA_LANG]}`) || pathname.includes(`/${LANG_PATH_MAP[ES_LA_LANG]}/`)
+    ],
+    [
+      PT_BR_LANG,
+      () => href.includes(`/${LANG_PATH_MAP[PT_BR_LANG]}`) || pathname.includes(`/${LANG_PATH_MAP[PT_BR_LANG]}/`)
+    ]
+  ])
+
+  for (const [lang, checkFn] of langCheckMap) {
+    if (checkFn()) return lang
+  }
+
+  return DEFAULT_LANG // 无匹配时返回默认
+}
+
+export { $clone, $split, $delay, $idle, pubUrl, fetchDemosFile, getCmpContributors, getLocaleMode }