refactor: merge

.gitignore

@@ -34,3 +34,4 @@ stats.html
 /src/typings/components.d.ts
 package-lock.json
 yarn.lock
+/pnpm-lock.yaml

src/App.vue

@@ -15,14 +15,26 @@
 </template>
 
 <script setup lang="ts">
+import { watch } from 'vue';
+import { useRoute } from 'vue-router';
 import { dateZhCN, zhCN } from 'naive-ui';
+import { useI18n } from 'vue-i18n';
 import { subscribeStore, useThemeStore } from '@/store';
 import { useGlobalEvents } from '@/composables';
 
 const theme = useThemeStore();
+const { locale, t } = useI18n();
+const route = useRoute();
 
 subscribeStore();
 useGlobalEvents();
+
+watch(
+ () => locale.value,
+ () => {
+ document.title = route.meta.i18nTitle ? t(route.meta.i18nTitle) : route.meta.title;
+ }
+);
 </script>
 
 <style scoped></style>

src/layouts/common/global-header/components/global-breadcrumb.vue

@@ -9,7 +9,7 @@
  v-if="theme.header.crumb.showIcon"
  class="inline-block align-text-bottom mr-4px text-16px"
  />
- <span>{{ breadcrumb.label }}</span>
+ <span>{{ breadcrumb.i18nTitle ? t(breadcrumb.i18nTitle) : breadcrumb.label }}</span>
  </span>
  </n-dropdown>
  <template v-else>
@@ -19,7 +19,9 @@
  class="inline-block align-text-bottom mr-4px text-16px"
  :class="{ 'text-#BBBBBB': theme.header.inverted }"
  />
- <span :class="{ 'text-#BBBBBB': theme.header.inverted }">{{ breadcrumb.label }}</span>
+ <span :class="{ 'text-#BBBBBB': theme.header.inverted }">{{
+ breadcrumb.i18nTitle ? t(breadcrumb.i18nTitle) : breadcrumb.label
+ }}</span>
  </template>
  </n-breadcrumb-item>
  </template>
@@ -33,6 +35,7 @@ import { routePath } from '@/router';
 import { useRouteStore, useThemeStore } from '@/store';
 import { useRouterPush } from '@/composables';
 import { getBreadcrumbByRouteKey } from '@/utils';
+import { t } from '@/locales';
 
 defineOptions({ name: 'GlobalBreadcrumb' });
 

src/layouts/common/global-header/components/header-menu.vue

@@ -20,6 +20,7 @@ import { useRoute } from 'vue-router';
 import type { MenuOption } from 'naive-ui';
 import { useRouteStore, useThemeStore } from '@/store';
 import { useRouterPush } from '@/composables';
+import { translateMenuLabel } from '@/utils';
 
 defineOptions({ name: 'HeaderMenu' });
 
@@ -28,7 +29,7 @@ const routeStore = useRouteStore();
 const theme = useThemeStore();
 const { routerPush } = useRouterPush();
 
-const menus = computed(() => routeStore.menus as App.GlobalMenuOption[]);
+const menus = computed(() => translateMenuLabel(routeStore.menus as App.GlobalMenuOption[]));
 const activeKey = computed(() => (route.meta?.activeMenu ? route.meta.activeMenu : route.name) as string);
 
 function handleUpdateMenu(_key: string, item: MenuOption) {

src/layouts/common/global-header/components/index.ts

@@ -7,6 +7,7 @@ import ThemeMode from './theme-mode.vue';
 import UserAvatar from './user-avatar.vue';
 import SystemMessage from './system-message.vue';
 import SettingButton from './setting-button.vue';
+import ToggleLang from './toggle-lang.vue';
 
 export {
  MenuCollapse,
@@ -17,5 +18,6 @@ export {
  ThemeMode,
  UserAvatar,
  SystemMessage,
- SettingButton
+ SettingButton,
+ ToggleLang
 };

src/layouts/common/global-header/components/toggle-lang.vue

@@ -0,0 +1,33 @@
+<template>
+ <hover-container class="w-40px h-full">
+ <n-dropdown :options="options" trigger="hover" :value="language" @select="handleSelect">
+ <icon-cil:language class="text-18px outline-transparent" />
+ </n-dropdown>
+ </hover-container>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { localStg } from '@/utils';
+
+const { locale } = useI18n();
+
+const language = ref<I18nType.langType>(localStg.get('lang') || 'zh-CN');
+const options = [
+ {
+ label: '中文',
+ key: 'zh-CN'
+ },
+ {
+ label: 'English',
+ key: 'en'
+ }
+];
+const handleSelect = (key: string) => {
+ language.value = key as I18nType.langType;
+ locale.value = key;
+ localStg.set('lang', key as I18nType.langType);
+};
+</script>
+<style scoped></style>

src/layouts/common/global-header/index.vue

@@ -11,6 +11,7 @@
  <github-site />
  <full-screen />
  <theme-mode />
+ <toggle-lang />
  <system-message />
  <setting-button v-if="showButton" />
  <user-avatar />
@@ -32,7 +33,8 @@ import {
  SettingButton,
  SystemMessage,
  ThemeMode,
- UserAvatar
+ UserAvatar,
+ ToggleLang
 } from './components';
 
 defineOptions({ name: 'GlobalHeader' });

src/layouts/common/global-logo/index.vue

@@ -1,19 +1,15 @@
 <template>
  <router-link :to="routeHomePath" class="flex-center w-full nowrap-hidden">
  <system-logo class="text-32px text-primary" />
- <h2
- v-show="showTitle"
- class="pl-8px text-16px font-bold text-primary transition duration-300 ease-in-out"
- @click="toggleLocal"
- >
+ <h2 v-show="showTitle" class="pl-8px text-16px font-bold text-primary transition duration-300 ease-in-out">
  {{ t('message.system.title') }}
  </h2>
  </router-link>
 </template>
 
 <script setup lang="ts">
 import { routePath } from '@/router';
-import { t, setLocale } from '@/locales';
+import { t } from '@/locales';
 
 defineOptions({ name: 'GlobalLogo' });
 
@@ -25,12 +21,6 @@ interface Props {
 defineProps<Props>();
 
 const routeHomePath = routePath('root');
-
-let flag = true;
-function toggleLocal() {
- flag = !flag;
- setLocale(flag ? 'en' : 'zh-CN');
-}
 </script>
 
 <style scoped></style>

src/layouts/common/global-sider/components/vertical-mix-sider/index.vue

@@ -26,7 +26,9 @@ import { useRoute } from 'vue-router';
 import { useAppStore, useRouteStore, useThemeStore } from '@/store';
 import { useRouterPush } from '@/composables';
 import { useBoolean } from '@/hooks';
+import { translateMenuLabel } from '@/utils';
 import { GlobalLogo } from '@/layouts/common';
+import { t } from '@/locales';
 import { MixMenuCollapse, MixMenuDetail, MixMenuDrawer } from './components';
 
 defineOptions({ name: 'VerticalMixSider' });
@@ -45,13 +47,13 @@ function setActiveParentRouteName(routeName: string) {
 
 const firstDegreeMenus = computed(() =>
  routeStore.menus.map(item => {
- const { routeName, label } = item;
+ const { routeName, label, i18nTitle } = item;
  const icon = item?.icon;
  const hasChildren = Boolean(item.children && item.children.length);
 
  return {
  routeName,
- label,
+ label: i18nTitle ? t(i18nTitle) : label,
  icon,
  hasChildren
  };
@@ -88,7 +90,7 @@ const activeChildMenus = computed(() => {
  routeStore.menus.some(item => {
  const flag = item.routeName === activeParentRouteName.value && Boolean(item.children?.length);
  if (flag) {
- menus.push(...(item.children || []));
+ menus.push(...translateMenuLabel((item.children || []) as App.GlobalMenuOption[]));
  }
  return flag;
  });

src/layouts/common/global-sider/components/vertical-sider/components/vertical-menu.vue

@@ -21,7 +21,7 @@ import { useRoute } from 'vue-router';
 import type { MenuOption } from 'naive-ui';
 import { useAppStore, useRouteStore, useThemeStore } from '@/store';
 import { useRouterPush } from '@/composables';
-import { getActiveKeyPathsOfMenus } from '@/utils';
+import { getActiveKeyPathsOfMenus, translateMenuLabel } from '@/utils';
 
 defineOptions({ name: 'VerticalMenu' });
 
@@ -31,7 +31,7 @@ const theme = useThemeStore();
 const routeStore = useRouteStore();
 const { routerPush } = useRouterPush();
 
-const menus = computed(() => routeStore.menus as App.GlobalMenuOption[]);
+const menus = computed(() => translateMenuLabel(routeStore.menus as App.GlobalMenuOption[]));
 
 const activeKey = computed(() => (route.meta?.activeMenu ? route.meta.activeMenu : route.name) as string);
 const expandedKeys = ref<string[]>([]);

src/layouts/common/global-tab/components/tab-detail/index.vue

@@ -19,7 +19,7 @@
  class="inline-block align-text-bottom text-16px"
  />
  </template>
- {{ item.meta.title }}
+ {{ item.meta.i18nTitle ? t(item.meta.i18nTitle) : item.meta.title }}
  </AdminTab>
  </div>
  <context-menu
@@ -36,6 +36,7 @@
 import { computed, nextTick, reactive, ref, watch } from 'vue';
 import { AdminTab } from '@soybeanjs/vue-materials';
 import { useTabStore, useThemeStore } from '@/store';
+import { t } from '@/locales';
 import { ContextMenu } from './components';
 
 defineOptions({ name: 'TabDetail' });

src/locales/i18n.ts

@@ -1,12 +1,14 @@
 import type { App } from 'vue';
 import { createI18n } from 'vue-i18n';
+import { localStg } from '@/utils';
 import messages from './lang';
 import type { LocaleKey } from './lang';
 
 const i18n = createI18n({
- locale: 'zh-CN',
+ locale: localStg.get('lang') || 'zh-CN',
  fallbackLocale: 'en',
- messages
+ messages,
+ legacy: false
 });
 
 export function setupI18n(app: App) {
@@ -18,5 +20,5 @@ export function t(key: string) {
 }
 
 export function setLocale(locale: LocaleKey) {
- i18n.global.locale = locale;
+ i18n.global.locale.value = locale;
 }

src/locales/lang/en.ts

@@ -11,9 +11,73 @@ const locale: LocaleMessages<I18nType.Schema> = {
  analysis: 'Analysis',
  workbench: 'Workbench'
  },
- about: {
- about: 'About'
- }
+ document: {
+ _value: 'Document',
+ vue: 'Vue Document',
+ vite: 'Vite Document',
+ naive: 'NaiveUI Document',
+ project: 'Project Document',
+ 'project-link': 'Project Document(href)'
+ },
+ component: {
+ _value: 'Component',
+ button: 'Button',
+ card: 'Card',
+ table: 'Table'
+ },
+ plugin: {
+ _value: 'Plugin',
+ charts: {
+ _value: 'Chart',
+ echarts: 'ECharts',
+ antv: 'AntV'
+ },
+ copy: 'Copy',
+ editor: {
+ _value: 'Editor',
+ quill: 'Quill',
+ markdown: 'Markdown'
+ },
+ icon: 'Icon',
+ map: 'Map',
+ print: 'Print',
+ swiper: 'Swiper',
+ video: 'Video'
+ },
+ 'auth-demo': {
+ _value: 'Auth Demo',
+ permission: 'Toggle Permission',
+ super: 'Super Auth'
+ },
+ function: {
+ _value: 'Function',
+ tab: 'System Tab'
+ },
+ exception: {
+ _value: 'Exception',
+ 403: '403',
+ 404: '404',
+ 500: '500'
+ },
+ 'multi-menu': {
+ _value: 'Multi Degree Menu',
+ first: {
+ _value: 'First Degree',
+ second: 'Second Degree',
+ 'second-new': {
+ _value: 'Second Degree With Children',
+ third: 'Third Degree'
+ }
+ }
+ },
+ management: {
+ _value: 'System Management',
+ auth: 'Auth',
+ role: 'Role',
+ route: 'Route',
+ user: 'User'
+ },
+ about: 'About'
  }
  }
 };