diff --git a/src/layouts/default/header/components/user-dropdown/index.vue b/src/layouts/default/header/components/user-dropdown/index.vue
index cc9cf054462855e6b0e0a6dd58c26950f5f9193a..d44a127eed11f6e62a973828801e58131dd4e001 100644
--- a/src/layouts/default/header/components/user-dropdown/index.vue
+++ b/src/layouts/default/header/components/user-dropdown/index.vue
@@ -17,6 +17,13 @@
 <!--          :text="t('layout.header.tooltipLock')"-->
 <!--          icon="ion:lock-closed-outline"-->
 <!--        />-->
+        <MenuItem
+          v-for="item in roleList"
+          :key="item.roleNum"
+          :text="t(item.roleName)"
+          icon="ant-design:user-outlined"
+        />
+        <Menu.Divider />
         <MenuItem
           key="logout"
           :text="t('layout.header.dropdownItemLoginOut')"
@@ -31,9 +38,9 @@
   // components
   import { Dropdown, Menu } from 'ant-design-vue';
 
-  import { defineComponent, computed } from 'vue';
+  import { defineComponent, computed, ref } from 'vue';
 
-  import { DOC_URL } from '/@/settings/siteSetting';
+  // import { DOC_URL } from '/@/settings/siteSetting';
 
   import { useUserStore } from '/@/store/modules/user';
   import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
@@ -43,9 +50,11 @@
 
   import headerImg from '/@/assets/images/header.jpg';
   import { propTypes } from '/@/utils/propTypes';
-  import { openWindow } from '/@/utils';
+  // import { openWindow } from '/@/utils';
 
   import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
+  import { RoleEnum } from '/@/enums/roleEnum';
+  import { usePermission } from '/@/hooks/web/usePermission';
 
   type MenuEvent = 'logout' | 'doc' | 'lock';
 
@@ -72,12 +81,15 @@
         const { userName: realName = '', avatar, desc } = userStore.getUserInfo || {};
         return { realName, avatar: avatar || headerImg, desc };
       });
+      const { changeRole } = usePermission();
+      const roleList = ref([]);
+      roleList.value = userStore.getUserInfo.roleList;
+      // const [register, { openModal }] = useModal();
+      const [register] = useModal();
 
-      const [register, { openModal }] = useModal();
-
-      function handleLock() {
-        openModal(true);
-      }
+      // function handleLock() {
+      //   openModal(true);
+      // }
 
       //  login out
       function handleLoginOut() {
@@ -85,21 +97,26 @@
       }
 
       // open doc
-      function openDoc() {
-        openWindow(DOC_URL);
-      }
+      // function openDoc() {
+      //   openWindow(DOC_URL);
+      // }
 
       function handleMenuClick(e: { key: MenuEvent }) {
-        switch (e.key) {
-          case 'logout':
-            handleLoginOut();
-            break;
-          case 'doc':
-            openDoc();
-            break;
-          case 'lock':
-            handleLock();
-            break;
+        // switch (e.key) {
+        //   case 'logout':
+        //     handleLoginOut();
+        //     break;
+        //   case 'doc':
+        //     openDoc();
+        //     break;
+        //   case 'lock':
+        //     handleLock();
+        //     break;
+        // }
+        if (e.key === 'logout') {
+          handleLoginOut();
+        } else {
+          changeRole(RoleEnum[e.key]);
         }
       }
 
@@ -111,6 +128,8 @@
         getShowDoc,
         register,
         getUseLockPage,
+        changeRole,
+        roleList,
       };
     },
   });