!238 完成组件官网国际化

Merge pull request !238 from 小九九的爸爸/dev

Author: kagol

.gitignore

@@ -12,4 +12,4 @@ yarn-error.log
 .idea
 devui/vue-devui.ts
 devui/theme/theme.scss
-docs/.vitepress/config/sidebar.ts
+docs/.vitepress/config/sidebar.ts

docs/.vitepress/config/enNav.ts

@@ -0,0 +1,8 @@
+const enNav = [
+ { text: 'Design disciplines', link: '/en-US/design' },
+ { text: 'Component', link: '/en-US/' },
+ { text: 'Version history', link: '/en-US/version' },
+ { text: 'Theme', link: '/en-US/theme' },
+ ]
+ 
+ export default enNav

docs/.vitepress/config/enSidebar.ts

@@ -0,0 +1,101 @@
+const enSidebar = {
+ '/en-US/': [
+ { text: 'Quick Start', link: '/en-US/' },
+ {
+ text: 'General',
+ children: [
+ { text: 'Button', link: '/en-US/components/button/', status: 'completed' },
+ { text: 'Icon', link: '/en-US/components/icon/', status: 'completed' },
+ { text: 'DragDrop', link: '/en-US/components/dragdrop/' },
+ { text: 'Fullscreen', link: '/en-US/components/fullscreen/' },
+ { text: 'Panel', link: '/en-US/components/panel/', status: 'completed' },
+ { text: 'Search', link: '/en-US/components/search/', status: 'completed' },
+ { text: 'Status', link: '/en-US/components/status/', status: 'completed' },
+ { text: 'Sticky', link: '/en-US/components/sticky/' },
+ { text: 'Overlay', link: '/en-US/components/overlay/'}
+ ]
+ },
+ {
+ text: 'Navigation',
+ children: [
+ { text: 'Accordion', link: '/en-US/components/accordion/' },
+ { text: 'Anchor', link: '/en-US/components/anchor/' },
+ { text: 'BackTop', link: '/en-US/components/back-top/' },
+ { text: 'Breadcrumb', link: '/en-US/components/breadcrumb/' },
+ { text: 'Dropdown', link: '/en-US/components/dropdown/' },
+ { text: 'NavSprite', link: '/en-US/components/nav-sprite/' },
+ { text: 'Pagination', link: '/en-US/components/pagination/', status: 'progress' },
+ { text: 'StepsGuide', link: '/en-US/components/steps-guide/' },
+ { text: 'Tabs', link: '/en-US/components/tabs/', status: 'completed' },
+ { text: 'Anchor', link: '/en-US/components/Anchor/' },
+ ]
+ },
+ {
+ text: 'Feedback',
+ children: [
+ { text: 'Alert', link: '/components/alert/', status: 'completed' },
+ { text: 'Drawer', link: '/components/drawer/' },
+ { text: 'Loading', link: '/components/loading/', status: 'completed' },
+ { text: 'Mention', link: '/components/mention/' },
+ { text: 'Modal', link: '/components/modal/' },
+ { text: 'Popover', link: '/components/popover/', status: "progress" },
+ { text: 'ReadTip', link: '/components/read-tip/' },
+ { text: 'Toast', link: '/components/toast/', status: 'completed' },
+ { text: 'Tooltip', link: '/components/tooltip/', status: 'completed' },
+ ]
+ },
+ {
+ text: 'Data Entry',
+ children: [
+ { text: 'AutoComplete', link: '/en-US/components/auto-complete/' },
+ { text: 'Cascader', link: '/en-US/components/cascader/' },
+ { text: 'CategorySearch', link: '/en-US/components/category-search/' },
+ { text: 'Checkbox', link: '/en-US/components/checkbox/', status: 'completed' },
+ { text: 'DatePicker', link: '/en-US/components/date-picker/', status: 'progress' },
+ { text: 'DatePickerPro', link: '/en-US/components/date-picker-pro/' },
+ { text: 'EditableSelect', link: '/en-US/components/editable-select/' },
+ { text: 'Form', link: '/en-US/components/form/' },
+ { text: 'Input', link: '/en-US/components/input/', status: 'completed' },
+ { text: 'InputNumber', link: '/en-US/components/input-number/' },
+ { text: 'MultiAutoComplete', link: '/en-US/components/multi-auto-complete/' },
+ { text: 'Radio', link: '/en-US/components/radio/', status: 'completed' },
+ { text: 'Select', link: '/en-US/components/select/', status: 'progress' },
+ { text: 'Slider', link: '/en-US/components/slider/' },
+ { text: 'Switch', link: '/en-US/components/switch/', status: 'completed' },
+ { text: 'TagInput', link: '/en-US/components/tag-input/', status: 'completed' },
+ { text: 'Textarea', link: '/en-US/components/textarea/' },
+ { text: 'TimePicker', link: '/en-US/components/time-picker/' },
+ { text: 'Transfer', link: '/en-US/components/transfer/' },
+ { text: 'TreeSelect', link: '/en-US/components/tree-select/' },
+ { text: 'Upload', link: '/en-US/components/upload/', status: 'progress' },
+ ]
+ },
+ {
+ text: 'Data Display',
+ children: [
+ { text: 'Avatar', link: '/en-US/components/avatar/', status: 'completed' },
+ { text: 'Badge', link: '/en-US/components/badge/', status: 'completed' },
+ { text: 'Card', link: '/en-US/components/card/', status: 'completed' },
+ { text: 'Carousel', link: '/en-US/components/carousel/', status: 'completed' },
+ { text: 'DataTable', link: '/en-US/components/data-table/' },
+ { text: 'Gantt', link: '/en-US/components/gantt/' },
+ { text: 'ImagePreview', link: '/en-US/components/image-preview/' },
+ { text: 'Progress', link: '/en-US/components/progress/', status: 'completed' },
+ { text: 'QuadrantDiagram', link: '/en-US/components/quadrant-diagram/' },
+ { text: 'Rate', link: '/en-US/components/rate/', status: 'completed' },
+ { text: 'Tag', link: '/en-US/components/tag/' },
+ { text: 'Tree', link: '/en-US/components/tree/' },
+ ]
+ },
+ {
+ text: 'Layout',
+ children: [
+ { text: 'Layout', link: '/en-US/components/layout/' },
+ { text: 'Splitter', link: '/en-US/components/splitter/' }
+ ]
+ },
+ ]
+}
+
+export default enSidebar
+ 

docs/.vitepress/config/index.ts

@@ -16,4 +16,4 @@ const config = {
  },
 };
 
-export default config;
+export default config;

docs/.vitepress/devui-theme/Layout.vue

@@ -80,6 +80,14 @@ const pageClasses = computed(() => {
  }
  ]
 })
+
+// layout组件加载，初始化国际化语言.
+if (location.pathname.indexOf('-') >= 0){
+ const result = location.pathname.match(/[a-zA-Z]*-[A-Z]*/)
+ localStorage.setItem('preferred_lang', result[0])
+}else {
+ localStorage.setItem('preferred_lang', navigator.language);
+}
 </script>
 
 <template>

docs/.vitepress/devui-theme/components/NavBar.vue

@@ -11,6 +11,17 @@ const theme = new Theme("light");
 const darkMode = ref(false);
 const switchText = ref("浅色");
 
+const defaultLanguage = ref(localStorage.getItem('preferred_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]}`
+ }
+}
+
 watch(
  () => darkMode.value,
  (darkMode, prevDarkMode) => {
@@ -19,6 +30,7 @@ watch(
  }
 )
 
+
 defineEmits(['toggle'])
 </script>
 
@@ -30,7 +42,7 @@ defineEmits(['toggle'])
 
  <div class="flex-grow" />
 
- <div class="flex">
+ <div class="flex items-center">
  <div class="nav">
  <NavLinks />
  </div>
@@ -39,6 +51,9 @@ defineEmits(['toggle'])
  <d-switch v-model:checked="darkMode" size="sm"></d-switch>
  <span style="font-size:0.9rem;" class="mb-xxs">{{ switchText }}</span>
  </div>
+ <div style="margin-left: 10px" @click="() => useTranslation( defaultLanguage === 'zh-CN' ? 'en-US' : 'zh-CN' )">
+ {{defaultLanguage === 'zh-CN' ? '中文' : 'English'}}
+ </div>
  </div>
 
  <slot name="search" />
@@ -61,6 +76,9 @@ defineEmits(['toggle'])
  padding: 0.7rem 1.5rem 0.7rem 4rem;
  height: var(--header-height);
  background-color: $devui-base-bg;
+ &:hover {
+ cursor: pointer;
+ }
 }
 
 @media (min-width: 720px) {

docs/.vitepress/devui-theme/components/NavLinks.vue

@@ -5,17 +5,20 @@ import { useLocaleLinks } from '../composables/nav'
 import { useRepo } from '../composables/repo'
 import NavLink from './NavLink.vue'
 import NavDropdownLink from './NavDropdownLink.vue'
+import enNav from '../../config/enNav'
 
 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 )
 </script>
 
 <template>
  <nav v-if="show" class="nav-links">
- <template v-if="theme.nav">
- <div v-for="item in theme.nav" :key="item.text" class="item">
+ <template v-if="translationTheme">
+ <!-- <div v-for="item in theme.nav" :key="item.text" class="item"> -->
+ <div v-for="item in translationTheme" :key="item.text" class="item">
  <NavDropdownLink v-if="item.items" :item="item" />
  <NavLink v-else :item="item" />
  </div>

docs/.vitepress/devui-theme/components/SideBarLinks.vue

@@ -9,4 +9,4 @@ const items = useSideBar()
  <ul v-if="items.length > 0" class="sidebar-links">
  <SideBarLink v-for="item of items" :item="item" />
  </ul>
-</template>
+</template>

docs/.vitepress/devui-theme/composables/sideBar.js

@@ -2,6 +2,8 @@ import { computed } from 'vue';
 import { useRoute, useData } from 'vitepress';
 import { useActiveSidebarLinks } from '../composables/activeSidebarLink';
 import { getSideBarConfig } from '../support/sideBar';
+import enSidebar from '../../config/enSidebar'
+import sidebar from '../../config/sidebar'
 export function useSideBar() {
  const route = useRoute();
  const { site } = useData();
@@ -20,7 +22,7 @@ export function useSideBar() {
  return resolveAutoSidebar(headers, sidebarDepth);
  }
  // now, there's no sidebar setting at frontmatter; let's see the configs
- const themeSidebar = getSideBarConfig(site.value.themeConfig.sidebar, route.data.relativePath);
+ const themeSidebar = getSideBarConfig(localStorage.getItem('preferred_lang') === 'zh-CN' ? sidebar : enSidebar , route.data.relativePath);
  if (themeSidebar === false) {
  return [];
  }

docs/vite.config.ts

@@ -13,4 +13,4 @@ export default defineConfig({
  vueJsx({}),
  svgLoader(),
  ],
-})
+})