feat: multi-language support

CHANGELOG.zh_CN.md

@@ -2,14 +2,15 @@
 
 ### ✨ Refactor
 
-- 重构整体 layout。更改代码实现方式。代码更精简,并加入多语言支持
+- 重构整体 layout。更改代码实现方式。代码更精简
 - 配置项重构
 - 移除 messageSetting 配置
 
 ### ✨ Features
 
 - 缓存可以配置是否加密,默认生产环境开启 Aes 加密
 - 新增标签页拖拽排序
+- 除示例外加入全局国际化功能，支持中文与英文
 
 ### 🎫 Chores
 

build/vite/plugin/transform/globby/index.ts

@@ -61,13 +61,20 @@ function varTemplate(data: string[][], name: string) {
 
     // lastKey is a data
     let pathValue = v[0].replace(/\//g, '.').split('.');
+    // let scopeKey = '';
+    //   const len=pathValue.length
+    //   const scope=pathValue[len-2]
     let lastKey: string | undefined = pathValue.pop();
 
     let deepValue: Record<any, any> = {};
     if (lastKey) {
-      deepValue[lastKey.replace('_' + pathValue[0], '')] = lastKey;
+      // Solve the problem of files with the same name in different folders
+      const lastKeyList = lastKey.replace('_' + pathValue[0], '').split('_');
+      const key = lastKeyList.pop();
+      if (key) {
+        deepValue[key] = lastKey;
+      }
     }
-
     // Set Deep Value
     deepValue = Object.assign(deepValue, dotProp.get(deepData, pathValue.join('.')));
     dotProp.set(deepData, pathValue.join('.'), deepValue);
@@ -169,7 +176,15 @@ const globTransform = function (config: SharedConfig): Transform {
 
                 if (matchedGroups && matchedGroups.length) {
                   const matchedSegments = matchedGroups[1]; //first everytime "Full Match"
-                  const name = matchedGroups[2] + '_' + matchedSegments.split('/').shift();
+                  const matchList = matchedSegments.split('/').filter(Boolean);
+                  const lang = matchList.shift();
+                  const scope = matchList.pop();
+
+                  // Solve the problem of files with the same name in different folders
+                  const scopeKey = scope ? `${scope}_` : '';
+                  const fileName = matchedGroups[2];
+                  const name = scopeKey + fileName + '_' + lang;
+
                   //send deep way like an (en/modules/system/dashboard) into groups
                   groups.push([matchedSegments + name, file]);
                   return templateRender({
@@ -186,6 +201,10 @@ const globTransform = function (config: SharedConfig): Transform {
             const filesJoined = replaceFiles.join('\n');
 
             urlMap.set(path, filesJoined);
+
+            // console.log('======================');
+            // console.log(filesJoined, varTemplate(groups, name));
+            // console.log('======================');
             return [
               filesJoined,
               compareString(injectPath, groups),

src/components/Menu/src/BasicMenu.tsx

@@ -3,7 +3,17 @@ import './index.less';
 import type { MenuState } from './types';
 import type { Menu as MenuType } from '/@/router/types';
 
-import { computed, defineComponent, unref, reactive, watch, onMounted, ref, toRefs } from 'vue';
+import {
+  computed,
+  defineComponent,
+  unref,
+  reactive,
+  watch,
+  onMounted,
+  ref,
+  toRefs,
+  ComputedRef,
+} from 'vue';
 import { Menu } from 'ant-design-vue';
 import SearchInput from './SearchInput.vue';
 import MenuContent from './MenuContent';
@@ -34,7 +44,7 @@ export default defineComponent({
     const menuState = reactive<MenuState>({
       defaultSelectedKeys: [],
       mode: props.mode,
-      theme: computed(() => props.theme),
+      theme: computed(() => props.theme) as ComputedRef<ThemeEnum>,
       openKeys: [],
       searchValue: '',
       selectedKeys: [],

src/hooks/web/useI18n.ts

@@ -1,8 +1,7 @@
 import { getI18n } from '/@/setup/i18n';
+import projectSetting from '/@/settings/projectSetting';
 
 export function useI18n(namespace?: string) {
-  const { t, ...methods } = getI18n().global;
-
   function getKey(key: string) {
     if (!namespace) {
       return key;
@@ -12,6 +11,18 @@ export function useI18n(namespace?: string) {
     }
     return `${namespace}.${key}`;
   }
+  const normalFn = {
+    t: (key: string) => {
+      return getKey(key);
+    },
+  };
+
+  if (!projectSetting.locale.show || !getI18n()) {
+    return normalFn;
+  }
+
+  const { t, ...methods } = getI18n().global;
+
   return {
     ...methods,
     t: (key: string, ...arg: Parameters<typeof t>) => {

src/hooks/web/useTitle.ts

@@ -0,0 +1,18 @@
+import { watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { useGlobSetting } from '../setting';
+import { useI18n } from './useI18n';
+import { setTitle } from '/@/utils/browser';
+
+export function useTitle() {
+  const { currentRoute } = useRouter();
+  const { t } = useI18n();
+  watch(
+    () => currentRoute.value.path,
+    () => {
+      const globSetting = useGlobSetting();
+      setTitle(t(currentRoute.value.meta.title), globSetting.title);
+    },
+    { immediate: true, flush: 'post' }
+  );
+}

src/layouts/default/header/LayoutBreadcrumb.tsx

@@ -15,6 +15,7 @@ import { compile } from 'path-to-regexp';
 import router from '/@/router';
 
 import { PageEnum } from '/@/enums/pageEnum';
+import { useI18n } from '/@/hooks/web/useI18n';
 
 export default defineComponent({
   name: 'BasicBreadcrumb',
@@ -28,7 +29,7 @@ export default defineComponent({
     const itemList = ref<AppRouteRecordRaw[]>([]);
 
     const { currentRoute, push } = useRouter();
-
+    const { t } = useI18n();
     watch(
       () => currentRoute.value,
       () => {
@@ -88,7 +89,7 @@ export default defineComponent({
               }}
             />
           )}
-          {item.meta.title}
+          {t(item.meta.title)}
         </>
       );
     }

src/layouts/default/menu/useLayoutMenu.ts

@@ -17,7 +17,10 @@ import {
   getShallowMenus,
 } from '/@/router/menus';
 import { permissionStore } from '/@/store/modules/permission';
+import { useI18n } from '/@/hooks/web/useI18n';
+import { cloneDeep } from 'lodash-es';
 
+const { t } = useI18n();
 export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
   // Menu array
   const menusRef = ref<Menu[]>([]);
@@ -42,6 +45,14 @@ export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
     return unref(splitType) === MenuSplitTyeEnum.NONE || !unref(getSplit);
   });
 
+  const getI18nFlatMenus = computed(() => {
+    return setI18nName(flatMenusRef.value, true, false);
+  });
+
+  const getI18nMenus = computed(() => {
+    return setI18nName(menusRef.value, true, true);
+  });
+
   watch(
     [() => unref(currentRoute).path, () => unref(splitType)],
     async ([path]: [string, MenuSplitTyeEnum]) => {
@@ -72,6 +83,18 @@ export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
     genMenus();
   });
 
+  function setI18nName(list: Menu[], clone = false, deep = true) {
+    const menus = clone ? cloneDeep(list) : list;
+    menus.forEach((item) => {
+      if (!item.name.includes('.')) return;
+      item.name = t(item.name);
+      if (item.children && deep) {
+        setI18nName(item.children, false, deep);
+      }
+    });
+    return menus;
+  }
+
   // Handle left menu split
   async function handleSplitLeftMenu(parentPath: string) {
     if (unref(splitLeft)) return;
@@ -109,5 +132,6 @@ export function useSplitMenu(splitType: Ref<MenuSplitTyeEnum>) {
       return;
     }
   }
-  return { flatMenusRef, menusRef };
+
+  return { flatMenusRef: getI18nFlatMenus, menusRef: getI18nMenus };
 }

src/layouts/default/multitabs/TabContent.tsx

@@ -15,6 +15,8 @@ import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
 import { useMultipleTabSetting } from '/@/hooks/setting/useMultipleTabSetting';
 import { useI18n } from '/@/hooks/web/useI18n';
 
+const { t: titleT } = useI18n();
+
 const ExtraContent: FunctionalComponent = () => {
   return (
     <span class={`multiple-tabs-content__extra `}>
@@ -38,7 +40,7 @@ const TabContent: FunctionalComponent<{ tabItem: TabItem }> = (props) => {
 
   return (
     <div class={`multiple-tabs-content__content `} onContextmenu={handleContextMenu}>
-      <span class="ml-1">{meta && meta.title}</span>
+      <span class="ml-1">{meta && titleT(meta.title)}</span>
     </div>
   );
 };

src/locales/lang/en/routes/README.MD

@@ -0,0 +1 @@
+Share with menu

src/locales/lang/en/routes/baisc.ts

@@ -0,0 +1,3 @@
+export default {
+  login: 'Login',
+};

src/locales/lang/en/routes/dashboard.ts

@@ -0,0 +1,6 @@
+export default {
+  dashboard: 'Dashboard',
+  welcome: 'Home',
+  workbench: 'Workbench',
+  analysis: 'Analysis',
+};

src/locales/lang/en/routes/demo/charts.ts

@@ -0,0 +1,7 @@
+export default {
+  charts: 'Chart',
+  map: 'Map',
+  line: 'Line',
+  pie: 'Pie',
+  apexChart: 'ApexChart',
+};

src/locales/lang/en/routes/demo/comp.ts

@@ -0,0 +1,27 @@
+export default {
+  comp: 'Component',
+  basic: 'Basic',
+  transition: 'Animation',
+  countTo: 'Count To',
+
+  scroll: 'Scroll',
+  scrollBasic: 'Basic',
+  scrollAction: 'Scroll Function',
+  virtualScroll: 'Virtual Scroll',
+
+  modal: 'Modal',
+  drawer: 'Drawer',
+  desc: 'Desc',
+
+  lazy: 'Lazy',
+  lazyBasic: 'Basic',
+  lazyTransition: 'Animation',
+
+  verify: 'Verify',
+  verifyDrag: 'Drag ',
+  verifyRotate: 'Picture Restore',
+
+  qrcode: 'QR code',
+  strength: 'Password strength',
+  upload: 'Upload',
+};

src/locales/lang/en/routes/demo/editor.ts

@@ -0,0 +1,8 @@
+export default {
+  editor: 'Editor',
+  markdown: 'Markdown editor',
+
+  tinymce: 'Rich text',
+  tinymceBasic: 'Basic',
+  tinymceForm: 'embedded form',
+};

src/locales/lang/en/routes/demo/excel.ts

@@ -0,0 +1,7 @@
+export default {
+  excel: 'Excel',
+  customExport: 'Select export format',
+  jsonExport: 'JSON data export',
+  arrayExport: 'Array data export',
+  importExcel: 'Import',
+};

src/locales/lang/en/routes/demo/feat.ts

@@ -0,0 +1,17 @@
+export default {
+  feat: 'Page Function',
+  icon: 'Icon',
+  tabs: 'Tabs',
+  contextMenu: 'Context Menu',
+  download: 'Download',
+  clickOutSide: 'ClickOutSide',
+  imgPreview: 'Picture Preview',
+  copy: 'Clipboard',
+  msg: 'Message prompt',
+  watermark: 'Watermark',
+  fullScreen: 'Full Screen',
+  errorLog: 'Error Log',
+  tab: 'Tab with parameters',
+  tab1: 'Tab with parameter 1',
+  tab2: 'Tab with parameter 2',
+};

src/locales/lang/en/routes/demo/form.ts

@@ -0,0 +1,10 @@
+export default {
+  form: 'Form',
+  basic: 'Basic',
+  useForm: 'useForm',
+  refForm: 'RefForm',
+  advancedForm: 'Shrinkable',
+  ruleForm: 'Form validation',
+  dynamicForm: 'Dynamic',
+  customerForm: 'Custom',
+};

src/locales/lang/en/routes/demo/iframe.ts

@@ -0,0 +1,6 @@
+export default {
+  frame: 'External',
+  antv: 'antVue doc (embedded)',
+  doc: 'Project doc (embedded)',
+  docExternal: 'Project doc (external)',
+};

src/locales/lang/en/routes/demo/page.ts

@@ -0,0 +1,27 @@
+export default {
+  page: 'Page',
+
+  form: 'Form',
+  formBasic: 'Basic Form',
+  formStep: 'Step Form',
+  formHigh: 'Advanced Form',
+
+  desc: 'Details',
+  descBasic: 'Basic Details',
+  descHigh: 'Advanced Details',
+
+  result: 'Result',
+  resultSuccess: 'Success',
+  resultFail: 'Failed',
+
+  account: 'Personal',
+  accountCenter: 'Personal Center',
+  accountSetting: 'Personal Settings',
+
+  exception: 'Exception',
+  netWorkError: 'Network Error',
+  notData: 'No data',
+
+  list: 'List page',
+  listCard: 'Card list',
+};

src/locales/lang/en/routes/demo/permission.ts

@@ -0,0 +1,13 @@
+export default {
+  permission: 'Permission',
+
+  front: 'front-end',
+  frontPage: 'Page',
+  frontBtn: 'Button',
+  frontTestA: 'Test page A',
+  frontTestB: 'Test page B',
+
+  back: 'background',
+  backPage: 'Page',
+  backBtn: 'Button',
+};