feat: 菜单名称国际化

apps/web-antd/src/views/system/menu/data.ts

@@ -1,13 +1,16 @@
+import type { ChangeEvent } from 'ant-design-vue/es/_util/EventInterface';
+
 import type { Recordable } from '@vben/types';
 
 import type { VbenFormSchema } from '#/adapter/form';
 import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemMenuApi } from '#/api/system/menu';
 
-import { h } from 'vue';
+import { h, ref } from 'vue';
 
 import { useAccess } from '@vben/access';
 import { IconifyIcon } from '@vben/icons';
+import { $te } from '@vben/locales';
 import { handleTree, isHttpUrl } from '@vben/utils';
 
 import { z } from '#/adapter/form';
@@ -23,6 +26,8 @@ import {
 
 const { hasAccessByCodes } = useAccess();
 
+export const titleSuffix = ref<string>();
+
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -87,6 +92,20 @@ export function useFormSchema(): VbenFormSchema[] {
       },
       rules: 'required',
     },
+    {
+      fieldName: 'i18nKey',
+      label: $t('common.i18nKey'),
+      component: 'Input',
+      componentProps() {
+        // 不需要处理多语言时就无需这么做
+        return {
+          addonAfter: titleSuffix.value,
+          onChange({ target: { value } }: ChangeEvent) {
+            titleSuffix.value = value && $te(value) ? $t(value) : undefined;
+          },
+        };
+      },
+    },
     {
       fieldName: 'type',
       label: '菜单类型',

apps/web-antd/src/views/system/menu/index.vue

@@ -157,7 +157,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
               class="size-full"
             />
           </div>
-          <span class="flex-auto">{{ $t(row.name) }}</span>
+          <span class="flex-auto">{{
+            $te(row.i18nKey) ? $t(row.i18nKey) : $t(row.name)
+          }}</span>
           <div class="items-center justify-end"></div>
         </div>
       </template>

apps/web-antd/src/views/system/menu/modules/form.vue

@@ -4,6 +4,7 @@ import type { SystemMenuApi } from '#/api/system/menu';
 import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
+import { $te } from '@vben/locales';
 
 import { message } from 'ant-design-vue';
 
@@ -11,7 +12,7 @@ import { useVbenForm } from '#/adapter/form';
 import { createMenu, getMenu, updateMenu } from '#/api/system/menu';
 import { $t } from '#/locales';
 
-import { useFormSchema } from '../data';
+import { titleSuffix, useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
 const formData = ref<SystemMenuApi.Menu>();
@@ -67,6 +68,12 @@ const [Modal, modalApi] = useVbenModal({
       modalApi.lock();
       try {
         data = await getMenu(data.id as number);
+        if (data) {
+          titleSuffix.value =
+            data?.i18nKey && $te(data.i18nKey) ? $t(data.i18nKey) : '';
+        } else {
+          titleSuffix.value = '';
+        }
       } finally {
         modalApi.unlock();
       }