chore: 修改menu

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": false,
-    "source.fixAll.stylelint": false
+    "source.fixAll.eslint": "never",
+    "source.fixAll.stylelint": "never"
   },
   "editor.formatOnSave": true,
   "typescript.tsdk": "node_modules/typescript/lib"

README.md

@@ -100,6 +100,8 @@ export type WAMenu = (ItemType & {
 
 1. 需要关联的权限点写在permission中
 2. 需要选中的应用才展示的菜单使用 group 与apps里的key匹配
+3. 菜单名称需要多语言支持的话需要配置在多语言文件中 且格式为 menu.xxxx 其中xxxx是menu数据的name
+4. 不需要多语言只需要配置title就好了 不需要配置name
 
 ---
 

mock/test/index.ts

@@ -7,7 +7,6 @@ const testMock: MockMethod = [
     method: 'post',
     timeout: 1000,
     response: ({ data }: any) => {
-      console.log('登录请求数据 =>', data)
       return {
         code: 0,
         data: {

src/components/layout/layout.vue

@@ -1,17 +1,17 @@
 <template>
   <a-layout>
-    <a-layout-header class="header">
+    <a-layout-header class="header flex">
       <div class="logo" />
       <!-- App区域 -->
       <a-menu
         theme="dark"
         mode="horizontal"
         :items="appList"
         :selectedKeys="[store.state.common.activeGroup]"
-        @click="(v: any) => handleChangeApp(v?.key)"
+        @click="(v) => handleChangeApp(v?.key)"
         v-if="appList.length > 1"
       ></a-menu>
-      <div class="ml-auto w-[100px]">
+      <div class="ml-auto min-w-[100px] flex">
         <a-dropdown>
           <template #overlay>
             <a-menu @click="(v) => changeLang(v.key)">
@@ -20,15 +20,20 @@
               </a-menu-item>
             </a-menu>
           </template>
-          <a>{{ locale }}</a>
+          <a class="flex items-center text-white"
+            ><img :src="lanSvg" class="w-[20px] h-[20px] mr-[10px]" />{{
+              getLangLable(locale)
+            }}</a
+          >
         </a-dropdown>
         <a-dropdown>
           <template #overlay>
             <a-menu @click="systemLogout">
               <a-menu-item key="1"> 退出登录 </a-menu-item>
             </a-menu>
           </template>
-          <a><Avatar class="avatar ml-[10px]"></Avatar></a
+          <a class="flex items-center ml-[10px]"
+            ><Avatar class="avatar ml-[10px]"></Avatar></a
         ></a-dropdown>
       </div>
     </a-layout-header>
@@ -42,6 +47,7 @@
         <!-- 菜单栏区域 -->
         <a-menu
           mode="inline"
+          theme="dark"
           :style="{ height: '100%', borderRight: 0 }"
           @click="handleClickMenu"
           :selectedKeys="[tab]"
@@ -55,15 +61,13 @@
                     v-if="item.icon"
                     class="h-[15px] mr-[5px]"
                   />
-                  {{ item.title }}
+                  {{ renderName(item) }}
                 </span>
               </template>
-              <template
-                v-if="item.children && item.children.length > 0"
-                v-for="children in item.children"
-                :key="children.key"
-              >
-                <a-menu-item>{{ children.title }}</a-menu-item>
+              <template v-for="children in item.children" :key="children.key">
+                <a-menu-item v-if="item.children && item.children.length > 0">{{
+                  renderName(children)
+                }}</a-menu-item>
               </template>
             </a-sub-menu>
             <a-menu-item
@@ -75,7 +79,7 @@
                 v-if="item.icon"
                 class="h-[15px] mr-[5px]"
               />
-              {{ item.title }}
+              {{ renderName(item) }}
             </a-menu-item>
           </template>
         </a-menu>
@@ -110,16 +114,27 @@ import { RouterView, useRoute, useRouter } from 'vue-router'
 import { Avatar } from 'ant-design-vue'
 import { systemLogout } from '@/utils'
 import { useI18n } from 'vue-i18n'
-import { langMap } from '@/constant'
+import { langMap, getLangLable } from '@/constant'
 import { changeLang } from '@/utils/lang'
+import lanSvg from '@/assets/svg/lan.svg'
+import { WAMenu } from '@/types'
+
 const store = useStore()
-const { locale } = useI18n()
+const { locale, t } = useI18n()
 const router = useRouter()
 const routeData = useRoute()
 
 const path = routeData.path
 const tab = ref(path)
 
+const renderName = (item: WAMenu[0]) => {
+  if (item?.title) {
+    return item.title
+  }
+  const name = `menu.${item.name}`
+  return t(name)
+}
+
 const appList = computed(() => {
   return store.state.common.apps?.map((item) => ({
     key: item.key,

src/constant/index.ts

@@ -11,7 +11,11 @@ export const langMap = [
     value: 'zh-CN'
   },
   {
-    label: 'english',
+    label: 'English',
     value: 'en'
   }
 ]
+
+export const getLangLable = (lang: string) => {
+  return langMap?.find((i) => i.value === lang)?.label || ''
+}

src/locales/en.ts

@@ -1,4 +1,11 @@
 export default {
-  message: "hello",
-  test: "测试",
+  message: 'hello',
+  test: '测试',
+  'menu.workbench': 'workbench',
+  'menu.perm': 'perm test',
+  'menu.perm1': 'perm1',
+  'menu.perm2': 'perm2',
+  'menu.app2': 'app2 perm test',
+  'menu.app2Perm1': 'app2 perm1',
+  'menu.app2Perm2': 'app2 perm2'
 }

src/locales/zh-CN.ts

@@ -1,4 +1,11 @@
 export default {
   message: "你好",
   test: "测试",
+  "menu.workbench": "工作台",
+  "menu.perm": "perm测试",
+  "menu.perm1": "权限页1",
+  "menu.perm2": "权限页2",
+  "menu.app2": "应用2perm测试",
+  "menu.app2Perm1": "应用2权限页1",
+  "menu.app2Perm2": "应用2权限页2",
 }

src/main.ts

@@ -7,6 +7,7 @@ import { store, key } from './store/store'
 import './styles/global.scss'
 import './styles/tailwind.global.scss'
 import { setupI18n } from './locales'
+import SvgIcon from '~virtual/svg-component'
 
 document.title = ''
 

src/menu.ts

@@ -3,50 +3,51 @@ import Workbench from '@/assets/svg/工作台.svg'
 import Perm from '@/assets/svg/员工.svg'
 
 export const apps: { name: string; key: string }[] = [
-  { name: 'app1', key: 'app1' }
+  { name: 'app1', key: 'app1' },
+  { name: 'app1', key: 'app2' }
 ]
 
 export const menu: WAMenu = [
   {
-    title: '工作台',
     key: '/workbench',
+    name: 'workbench',
     icon: Workbench,
     type: 'group'
   },
   {
-    title: 'perm测试',
     key: 'perm',
+    name: 'perm',
     icon: Perm,
     type: 'group',
     group: 'app1',
     children: [
       {
-        title: 'perm1',
         key: '/perm/1',
+        name: 'perm1',
         permission: ['perm-1']
       },
       {
-        title: 'perm2',
         key: '/perm/2',
+        name: 'perm2',
         permission: ['perm-2']
       }
     ]
   },
   {
-    title: 'perm',
     key: 'perm',
     icon: Perm,
     type: 'group',
     group: 'app2',
+    name: 'app2',
     children: [
       {
-        title: 'perm1',
         key: '/perm/1',
+        name: 'app2Perm1',
         permission: ['perm-1']
       },
       {
-        title: 'perm2',
         key: '/perm/2',
+        name: 'app2Perm2',
         permission: ['perm-2']
       }
     ]

src/route.ts

@@ -108,13 +108,18 @@ const route = createRouter({
 const initPerms = async () => {
   const store = useStore()
   const { dispatch, state } = store
+  if (state?.userInfo?.perms) {
+    return {
+      perms: state?.userInfo?.perms
+    }
+  }
   const perms = await getPerms()
   const menus = transformMenuByPerms(menu, perms.data)
   dispatch('userInfo/setPerms', { data: perms.data }) // 存在全局状态
   dispatch('common/changeMenus', { data: menus }) // 修改全局菜单
   transformRoute(perms.data) // vue-route 根据权限操作route
   return {
-    perms
+    perms: perms?.data
   }
 }
 

src/store/modules/userInfo.ts

@@ -2,12 +2,12 @@ import { SETLOGININFO, SETPERMS, SETUSERINFO } from '../actions'
 
 export interface UserState {
   userInfo: Record<string, any>
-  perms: string[]
+  perms: string[] | undefined
 }
 
 const state: UserState = {
   userInfo: {},
-  perms: []
+  perms: undefined
 }
 
 const getters = {}

src/types/index.ts

@@ -11,8 +11,9 @@ export type WARoute = RouteRecordRaw & {
 }
 
 export type WAMenu = (ItemType & {
-  title: string
+  title?: string // 非多语言使用
   key: string
+  name?: string // 多语言需要
   group?: string
   permission?: string[] // 权限标识
   icon?: string // icon地址