fix: fix doc 404 close DevCloudFE#1310

Author: kagol

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__`

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>

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

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>

packages/devui-vue/docs/.vitepress/devui-theme/components/PageToc.vue

@@ -2,14 +2,15 @@
 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()
 const container = ref()
 // 滚动监听
 useActiveSidebarLinks(container, marker)
 const forwardText = computed(() => {
- return localStorage.getItem('preferred_lang') === 'zh-CN' ? '快速前往' : 'Forward'
+ return CURRENT_LANG === ZH_CN ? '快速前往' : 'Forward'
 })
 </script>
 

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 [];
  }

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;