refactor(projects): mock权限相关数据优化

src/config/map-sdk.ts

@@ -1,6 +1,5 @@
 /** 百度地图sdk地址 */
-export const BAIDU_MAP_SDK_URL =
-  'https://api.map.baidu.com/getscript?v=3.0&ak=KSezYymXPth1DIGILRX3oYN9PxbOQQmU&services=&t=20210201100830&s=1';
+export const BAIDU_MAP_SDK_URL = `https://api.map.baidu.com/getscript?v=3.0&ak=KSezYymXPth1DIGILRX3oYN9PxbOQQmU&services=&t=20210201100830&s=1`;
 
 /** 高德地图sdk地址 */
 export const GAODE_MAP_SDK_URL = 'https://webapi.amap.com/maps?v=2.0&key=e7bd02bd504062087e6563daf4d6721d';

src/enum/business.ts

@@ -1,3 +1,11 @@
+/** 用户角色 */
+export enum EnumUserRole {
+  super = '超级管理员',
+  admin = '管理员',
+  user = '普通用户'
+  // custom = '自定义角色'
+}
+
 /** 登录模块 */
 export enum EnumLoginModule {
   'pwd-login' = '账密登录',

src/router/modules/about.ts

@@ -6,7 +6,7 @@ const about: AuthRoute.Route = {
     title: '关于',
     requiresAuth: true,
     singleLayout: 'basic',
-    permissions: ['super', 'admin', 'test'],
+    permissions: ['super', 'admin', 'user'],
     icon: 'fluent:book-information-24-regular',
     order: 8
   }

src/typings/business.d.ts

@@ -4,10 +4,10 @@ declare namespace Auth {
    * 用户角色类型(前端静态路由用角色类型进行路由权限的控制)
    * - super: 超级管理员(该权限具有所有路由数据)
    * - admin: 管理员
-   * - test: 测试
-   * - normal: 普通用户
+   * - user: 用户
+   * - custom: 自定义角色
    */
-  type RoleType = 'super' | 'admin' | 'test' | 'normal';
+  type RoleType = keyof typeof import('@/enum').EnumUserRole;
 
   /** 用户信息 */
   interface UserInfo {

src/typings/components.d.ts

@@ -0,0 +1,100 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/vue-next/pull/3399
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    BetterScroll: typeof import('./src/components/custom/BetterScroll.vue')['default']
+    CountTo: typeof import('./src/components/custom/CountTo.vue')['default']
+    DarkModeContainer: typeof import('./src/components/common/DarkModeContainer.vue')['default']
+    DarkModeSwitch: typeof import('./src/components/common/DarkModeSwitch.vue')['default']
+    GithubLink: typeof import('./src/components/custom/GithubLink.vue')['default']
+    HoverContainer: typeof import('./src/components/common/HoverContainer.vue')['default']
+    IconAntDesignCloseOutlined: typeof import('~icons/ant-design/close-outlined')['default']
+    IconAntDesignEnterOutlined: typeof import('~icons/ant-design/enter-outlined')['default']
+    IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined')['default']
+    IconCustomActivity: typeof import('~icons/custom/activity')['default']
+    IconCustomAvatar: typeof import('~icons/custom/avatar')['default']
+    IconCustomBanner: typeof import('~icons/custom/banner')['default']
+    IconCustomCast: typeof import('~icons/custom/cast')['default']
+    IconCustomEmptyData: typeof import('~icons/custom/empty-data')['default']
+    IconCustomLogo: typeof import('~icons/custom/logo')['default']
+    IconCustomLogoFill: typeof import('~icons/custom/logo-fill')['default']
+    IconCustomNetworkError: typeof import('~icons/custom/network-error')['default']
+    IconCustomNoPermission: typeof import('~icons/custom/no-permission')['default']
+    IconCustomNotFound: typeof import('~icons/custom/not-found')['default']
+    IconCustomServiceError: typeof import('~icons/custom/service-error')['default']
+    IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen')['default']
+    IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit')['default']
+    IconIcOutlineCheck: typeof import('~icons/ic/outline-check')['default']
+    IconLineMdMenuFoldLeft: typeof import('~icons/line-md/menu-fold-left')['default']
+    IconLineMdMenuUnfoldLeft: typeof import('~icons/line-md/menu-unfold-left')['default']
+    IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin')['default']
+    IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin')['default']
+    IconMdiClose: typeof import('~icons/mdi/close')['default']
+    IconMdiGithub: typeof import('~icons/mdi/github')['default']
+    IconMdiMoonWaningCrescent: typeof import('~icons/mdi/moon-waning-crescent')['default']
+    IconMdiPin: typeof import('~icons/mdi/pin')['default']
+    IconMdiPinOff: typeof import('~icons/mdi/pin-off')['default']
+    IconMdiRefresh: typeof import('~icons/mdi/refresh')['default']
+    IconMdiWechat: typeof import('~icons/mdi/wechat')['default']
+    IconMdiWhiteBalanceSunny: typeof import('~icons/mdi/white-balance-sunny')['default']
+    IconPhCaretDoubleLeftBold: typeof import('~icons/ph/caret-double-left-bold')['default']
+    IconPhCaretDoubleRightBold: typeof import('~icons/ph/caret-double-right-bold')['default']
+    IconSelect: typeof import('./src/components/custom/IconSelect.vue')['default']
+    IconUilSearch: typeof import('~icons/uil/search')['default']
+    ImageVerify: typeof import('./src/components/custom/ImageVerify.vue')['default']
+    LoadingEmptyWrapper: typeof import('./src/components/business/LoadingEmptyWrapper.vue')['default']
+    LoginAgreement: typeof import('./src/components/business/LoginAgreement.vue')['default']
+    NaiveProvider: typeof import('./src/components/common/NaiveProvider.vue')['default']
+    NBreadcrumb: typeof import('naive-ui')['NBreadcrumb']
+    NBreadcrumbItem: typeof import('naive-ui')['NBreadcrumbItem']
+    NButton: typeof import('naive-ui')['NButton']
+    NCard: typeof import('naive-ui')['NCard']
+    NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NColorPicker: typeof import('naive-ui')['NColorPicker']
+    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
+    NDataTable: typeof import('naive-ui')['NDataTable']
+    NDescriptions: typeof import('naive-ui')['NDescriptions']
+    NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem']
+    NDialogProvider: typeof import('naive-ui')['NDialogProvider']
+    NDivider: typeof import('naive-ui')['NDivider']
+    NDrawer: typeof import('naive-ui')['NDrawer']
+    NDrawerContent: typeof import('naive-ui')['NDrawerContent']
+    NDropdown: typeof import('naive-ui')['NDropdown']
+    NEmpty: typeof import('naive-ui')['NEmpty']
+    NForm: typeof import('naive-ui')['NForm']
+    NFormItem: typeof import('naive-ui')['NFormItem']
+    NGradientText: typeof import('naive-ui')['NGradientText']
+    NGrid: typeof import('naive-ui')['NGrid']
+    NGridItem: typeof import('naive-ui')['NGridItem']
+    NInput: typeof import('naive-ui')['NInput']
+    NInputGroup: typeof import('naive-ui')['NInputGroup']
+    NInputNumber: typeof import('naive-ui')['NInputNumber']
+    NList: typeof import('naive-ui')['NList']
+    NListItem: typeof import('naive-ui')['NListItem']
+    NLoadingBarProvider: typeof import('naive-ui')['NLoadingBarProvider']
+    NMenu: typeof import('naive-ui')['NMenu']
+    NMessageProvider: typeof import('naive-ui')['NMessageProvider']
+    NModal: typeof import('naive-ui')['NModal']
+    NNotificationProvider: typeof import('naive-ui')['NNotificationProvider']
+    NPopover: typeof import('naive-ui')['NPopover']
+    NScrollbar: typeof import('naive-ui')['NScrollbar']
+    NSelect: typeof import('naive-ui')['NSelect']
+    NSpace: typeof import('naive-ui')['NSpace']
+    NSpin: typeof import('naive-ui')['NSpin']
+    NStatistic: typeof import('naive-ui')['NStatistic']
+    NSwitch: typeof import('naive-ui')['NSwitch']
+    NTabPane: typeof import('naive-ui')['NTabPane']
+    NTabs: typeof import('naive-ui')['NTabs']
+    NTag: typeof import('naive-ui')['NTag']
+    NThing: typeof import('naive-ui')['NThing']
+    NTimeline: typeof import('naive-ui')['NTimeline']
+    NTimelineItem: typeof import('naive-ui')['NTimelineItem']
+    NTooltip: typeof import('naive-ui')['NTooltip']
+    SystemLogo: typeof import('./src/components/common/SystemLogo.vue')['default']
+    WebSiteLink: typeof import('./src/components/custom/WebSiteLink.vue')['default']
+  }
+}
+
+export { }

src/utils/auth/user.ts

@@ -37,7 +37,7 @@ export function getUserInfo() {
     userId: '',
     userName: '',
     userPhone: '',
-    userRole: 'normal'
+    userRole: 'user'
   };
   const userInfo: Auth.UserInfo = getLocal<Auth.UserInfo>(EnumStorageKey['user-info']) || emptyInfo;
   return userInfo;

src/views/auth-demo/permission/index.vue

@@ -8,7 +8,7 @@
         :value="auth.userInfo.userRole"
         class="w-120px"
         size="small"
-        :options="roleList"
+        :options="options"
         @update:value="auth.updateUserRole"
       />
       <div class="py-12px">
@@ -17,7 +17,7 @@
       <div>
         <n-button v-permission="'super'" class="mr-12px">super可见</n-button>
         <n-button v-permission="'admin'" class="mr-12px">admin可见</n-button>
-        <n-button v-permission="['admin', 'test']">admin和test可见</n-button>
+        <n-button v-permission="['admin', 'user']">admin和test可见</n-button>
       </div>
       <div class="py-12px">
         <n-gradient-text type="primary" :size="20">权限函数 hasPermission</n-gradient-text>
@@ -25,7 +25,7 @@
       <n-space>
         <n-button v-if="hasPermission('super')">super可见</n-button>
         <n-button v-if="hasPermission('admin')">admin可见</n-button>
-        <n-button v-if="hasPermission(['admin', 'test'])">admin和test可见</n-button>
+        <n-button v-if="hasPermission(['admin', 'user'])">admin和user可见</n-button>
       </n-space>
     </n-card>
   </div>
@@ -33,6 +33,8 @@
 
 <script setup lang="ts">
 import { watch } from 'vue';
+import type { SelectOption } from 'naive-ui';
+import { EnumUserRole } from '@/enum';
 import { useAppStore, useAuthStore } from '@/store';
 import { usePermission } from '@/composables';
 
@@ -40,12 +42,19 @@ const app = useAppStore();
 const auth = useAuthStore();
 const { hasPermission } = usePermission();
 
-const roleList = [
-  { label: '超级管理员', value: 'super' },
-  { label: '管理员', value: 'admin' },
-  { label: '测试', value: 'test' }
+interface RoleList {
+  label: string;
+  value: keyof typeof EnumUserRole;
+}
+
+const roleList: RoleList[] = [
+  { label: EnumUserRole.super, value: 'super' },
+  { label: EnumUserRole.admin, value: 'admin' },
+  { label: EnumUserRole.user, value: 'user' }
 ];
 
+const options: SelectOption[] = roleList as unknown as SelectOption[];
+
 watch(
   () => auth.userInfo.userRole,
   async () => {