From 77ab555648b036751eae69bb1be4d901d6a5e464 Mon Sep 17 00:00:00 2001
From: Kagol <kagol@sina.com>
Date: Tue, 6 Sep 2022 21:40:23 +0800
Subject: [PATCH] fix: fix doc 404 close #1310

---
 .../docs/.vitepress/devui-theme/Layout.vue    |  7 ++--
 .../devui-theme/components/HomeFooter.vue     |  2 +-
 .../devui-theme/components/NavBar.vue         | 33 ++++++++++---------
 .../devui-theme/components/NavLinks.vue       |  3 +-
 .../devui-theme/components/PageToc.vue        |  3 +-
 .../devui-theme/composables/sideBar.js        |  6 ++--
 .../docs/.vitepress/devui-theme/const.ts      |  5 +++
 7 files changed, 35 insertions(+), 24 deletions(-)
 create mode 100644 packages/devui-vue/docs/.vitepress/devui-theme/const.ts

diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/Layout.vue b/packages/devui-vue/docs/.vitepress/devui-theme/Layout.vue
index 99843d8582..2996ccec38 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/Layout.vue
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/Layout.vue
@@ -10,6 +10,7 @@ import HomeFooter from './components/HomeFooter.vue'
 import { CONTRIBUTORS_MAP } from './components/PageContributorConfig'
 import PageContributor from './components/PageContributor.vue'
 import { Button } from '@devui/button';
+import { LANG_KEY, ZH_CN, EN_US } from './const';
 
 const Home = defineAsyncComponent(() => import('./components/Home.vue'))
 
@@ -81,13 +82,13 @@ const pageClasses = computed(() => {
 
 // layout组件加载，初始化国际化语言.
 const result = location.pathname.match(/[a-zA-Z]*-[A-Z]*/)
-const langList = ['zh-CN', 'en-US']
+const langList = [ZH_CN, EN_US]
 
 // 避免短横线分隔 (kebab-case）形式的路由命名导致读取语言错误
 if (result && langList.includes(result[0])) {
-  localStorage.setItem('preferred_lang', result[0])
+  localStorage.setItem(LANG_KEY, result[0])
 } else {
-  localStorage.setItem('preferred_lang', navigator.language)
+  localStorage.setItem(LANG_KEY, navigator.language)
 }
 
 // Remove `__VP_STATIC_START__`
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/HomeFooter.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/HomeFooter.vue
index 9de704e7f2..49b246bc9e 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/components/HomeFooter.vue
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/HomeFooter.vue
@@ -23,7 +23,7 @@ const { frontmatter } = useData()
         <ul>
           <li><a href="https://devui.design/" target="_blank">Ng DevUI</a></li>
           <li><a href="https://vue-devui.github.io/" target="_blank">Vue DevUI</a></li>
-          <li><a href="https://react-devui.com/" target="_blank">React DevUI</a></li>
+          <li><a href="https://react-devui.surge.sh/" target="_blank">React DevUI</a></li>
           <li><a href="https://devui.design/admin-page/home" target="_blank">Ng DevUI Admin</a></li>
           <li><a href="https://devui.design/icon/ruleResource" target="_blank">DevUI Icons</a></li>
           <li><a href="https://devcloudfe.github.io/devui-playground" target="_blank">DevUI Playground</a></li>
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBar.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBar.vue
index 38c5961239..1b74fbca6f 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBar.vue
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/NavBar.vue
@@ -13,6 +13,7 @@ import ThemePicker from './ThemePicker.vue'
 import { Locale } from '@devui/locale'
 import enUS from '@devui/locale/lang/en-us'
 import zhCN from '@devui/locale/lang/zh-cn'
+import { LANG_KEY, CURRENT_LANG, ZH_CN, EN_US } from '../const'
 
 // 主题切换
 const THEME_MAP = {
@@ -38,33 +39,33 @@ watch(currentTheme, (newVal) => {
 })
 
 // 国际化
-const defaultLanguage = ref(localStorage.getItem('preferred_lang'))
+const defaultLanguage = ref(CURRENT_LANG)
 function useTranslation(target) {
   defaultLanguage.value = target
-  localStorage.setItem('preferred_lang', target)
-  if (target === 'en-US') {
-    location.pathname = `/en-US${location.pathname}`
-  } else if (target === 'zh-CN') {
-    location.pathname = `${location.pathname.split('/en-US')[1]}`
+  localStorage.setItem(LANG_KEY, target)
+  if (target === EN_US) {
+    location.pathname = `/${EN_US}${location.pathname}`
+  } else if (target === ZH_CN) {
+    location.pathname = location.pathname.split(`/${EN_US}`)[1];
   }
 }
 
 defineEmits(['toggle'])
 
 const LANG_MAP = {
-  'zh-CN': '中文',
-  'en-US': 'English',
+  [ZH_CN]: '中文',
+  [EN_US]: 'English',
 }
 
-const currentLang = ref('zh-CN');
+const currentLang = ref(CURRENT_LANG);
 const app = getCurrentInstance();
 const switchLang = () => {
-  if (currentLang.value === 'zh-CN') {
-    Locale.use('en-US', enUS);
-    currentLang.value = 'en-US';
+  if (currentLang.value === ZH_CN) {
+    Locale.use(EN_US, enUS);
+    currentLang.value = EN_US;
   } else {
-    Locale.use('zh-CN', zhCN);
-    currentLang.value = 'zh-CN';
+    Locale.use(ZH_CN, zhCN);
+    currentLang.value = ZH_CN;
   }
   app.appContext.config.globalProperties.langMessages.value = Locale.messages();
 };
@@ -88,10 +89,10 @@ const switchLang = () => {
           <div
             class="custom-nav-item ml-m"
             style="font-size: 0"
-            @click="() => useTranslation(defaultLanguage === 'zh-CN' ? 'en-US' : 'zh-CN')"
+            @click="() => useTranslation(defaultLanguage === ZH_CN ? EN_US : ZH_CN)"
             v-if="false"
           >
-            <ZhLang v-if="defaultLanguage === 'zh-CN'"></ZhLang>
+            <ZhLang v-if="defaultLanguage === ZH_CN"></ZhLang>
             <EnLang v-else></EnLang>
           </div>
           <div
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/NavLinks.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/NavLinks.vue
index d341e9adb5..20a8c9e43f 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/components/NavLinks.vue
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/NavLinks.vue
@@ -6,12 +6,13 @@ import { useRepo } from '../composables/repo'
 import NavLink from './NavLink.vue'
 import NavDropdownLink from './NavDropdownLink.vue'
 import enNav from '../../config/enNav'
+import { CURRENT_LANG, ZH_CN } from '../const'
 
 const { theme } = useData()
 const localeLinks = useLocaleLinks()
 const repo = useRepo()
 const show = computed(() => theme.value.nav || repo.value || localeLinks.value)
-let translationTheme = computed( () => localStorage.getItem('preferred_lang') === 'zh-CN' ? theme.value.nav : enNav )
+let translationTheme = computed( () => CURRENT_LANG === ZH_CN ? theme.value.nav : enNav )
 </script>
 
 <template>
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/components/PageToc.vue b/packages/devui-vue/docs/.vitepress/devui-theme/components/PageToc.vue
index 5b6a883ba8..742684ae15 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/components/PageToc.vue
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/components/PageToc.vue
@@ -2,6 +2,7 @@
 import { ref, computed } from 'vue'
 import { useToc } from '../composables/useToc'
 import { useActiveSidebarLinks } from '../composables/activeBar'
+import { CURRENT_LANG, ZH_CN } from '../const'
 
 const headers = useToc()
 const marker = ref()
@@ -9,7 +10,7 @@ const container = ref()
 // 滚动监听
 useActiveSidebarLinks(container, marker)
 const forwardText = computed(() => {
-  return localStorage.getItem('preferred_lang') === 'zh-CN' ? '快速前往' : 'Forward'
+  return CURRENT_LANG === ZH_CN ? '快速前往' : 'Forward'
 })
 </script>
 
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/composables/sideBar.js b/packages/devui-vue/docs/.vitepress/devui-theme/composables/sideBar.js
index cbd13ca2e4..5e22e552fe 100644
--- a/packages/devui-vue/docs/.vitepress/devui-theme/composables/sideBar.js
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/composables/sideBar.js
@@ -4,6 +4,8 @@ import { useActiveSidebarLinks } from '../composables/activeSidebarLink';
 import { getSideBarConfig } from '../support/sideBar';
 import enSidebar from '../../config/enSidebar'
 import sidebar from '../../config/sidebar'
+import { CURRENT_LANG, ZH_CN } from '../const';
+
 export function useSideBar() {
     const route = useRoute();
     const { site } = useData();
@@ -17,12 +19,12 @@ export function useSideBar() {
         if (frontSidebar === false) {
             return [];
         }
-        // if it's `atuo`, render headers of the current page
+        // if it's `auto`, render headers of the current page
         if (frontSidebar === 'auto') {
             return resolveAutoSidebar(headers, sidebarDepth);
         }
         // now, there's no sidebar setting at frontmatter; let's see the configs
-        const themeSidebar = getSideBarConfig(localStorage.getItem('preferred_lang') === 'zh-CN' ? sidebar : enSidebar , route.data.relativePath);
+        const themeSidebar = getSideBarConfig(CURRENT_LANG === ZH_CN ? sidebar : enSidebar , route.data.relativePath);
         if (themeSidebar === false) {
             return [];
         }
diff --git a/packages/devui-vue/docs/.vitepress/devui-theme/const.ts b/packages/devui-vue/docs/.vitepress/devui-theme/const.ts
new file mode 100644
index 0000000000..0ed7ffb421
--- /dev/null
+++ b/packages/devui-vue/docs/.vitepress/devui-theme/const.ts
@@ -0,0 +1,5 @@
+export const ZH_CN = 'zh-CN';
+export const EN_US = 'en-US';
+export const DEFAULT_LANG = ZH_CN;
+export const LANG_KEY = 'vue-devui-preferred-lang';
+export const CURRENT_LANG = localStorage.getItem(LANG_KEY) || DEFAULT_LANG;