feat(user): 添加用户角色切换功能并调整导航栏布局

- 在 user store 中添加 switchRole action用于切换用户角色
- 在导航栏中加入角色切换功能，允许用户在管理员和经理角色之间切换
- 优化导航栏布局，暂时注释掉公告通知按钮- 更新 API 调用，添加新的 switchRole 函数

src/api/user.ts

@@ -117,6 +117,11 @@ export function create(data: CreateRecord) {
   return axios.post('/api/rest/user', data);
 }
 
+// 用户切换角色
+export function switchRole(id: number) {
+  return axios.patch(`/api/rest/user/switch/${id}`);
+}
+
 // 模糊查询用户列表
 export function queryUserList(params: any) {
   return axios({
@@ -168,9 +173,9 @@ export function code(data: string) {
   return axios.get(`/api/rest/user/send-email?email=${data}`);
 }
 
-export function switchRole(roleId: number) {
+// export function switchRole(roleId: number) {
-  return axios.patch<UserState>(`/api/user/self/switch-role/${roleId}`);
+//   return axios.patch<UserState>(`/api/user/self/switch-role/${roleId}`);
-}
+// }
 
 export function getUserDetail(id: number) {
   return axios.get<UserState>(`/api/user/${id}`);

src/components/navbar/index.vue

@@ -21,21 +21,21 @@
       <Menu v-if="topMenu" />
     </div>
     <ul class="right-side">
-      <li>
+<!--      <li>-->
-        <a-tooltip content="公告通知">
+<!--        <a-tooltip content="公告通知">-->
-          <a-button
+<!--          <a-button-->
-            class="nav-btn"
+<!--            class="nav-btn"-->
-            type="outline"
+<!--            type="outline"-->
-            :shape="'circle'"
+<!--            :shape="'circle'"-->
-            @click="$router.push({ name: 'Bulletins' })"
+<!--            @click="$router.push({ name: 'Bulletins' })"-->
-          >
+<!--          >-->
-            <template #icon>
+<!--            <template #icon>-->
-              <icon-message />
+<!--              <icon-message />-->
-            </template>
+<!--            </template>-->
 
-          </a-button>
+<!--          </a-button>-->
-        </a-tooltip>
+<!--        </a-tooltip>-->
-      </li>
+<!--      </li>-->
       <li>
         <a-tooltip content="消息通知">
           <div class="message-box-trigger">
@@ -150,9 +150,28 @@
         </a-tooltip>
       </li>
 
-<!--      <li>-->
+      <li>
-<!--        <a-button status="normal">{{ userStore.permissions }}</a-button>-->
+<!--        <a-button status="normal">{{ userStore.role.name }}</a-button>-->
-<!--      </li>-->
+        <a-dropdown trigger="click">
+          <a-button status="normal">{{ userStore.role.name }}</a-button>
+          <template #content>
+            <a-doption>
+              <a-space @click="handleSwitchRole(50)">
+                <span>
+                  管理员
+                </span>
+              </a-space>
+            </a-doption>
+            <a-doption>
+              <a-space @click="handleSwitchRole(75)">
+                <span>
+                  经理
+                </span>
+              </a-space>
+            </a-doption>
+          </template>
+        </a-dropdown>
+      </li>
       <li>
         <a-dropdown trigger="click">
           <a-avatar
@@ -261,6 +280,11 @@ const setDropDownVisible = () => {
   triggerBtn.value.dispatchEvent(event);
 };
 
+// 切换角色
+const handleSwitchRole = (roleId: number) => {
+  userStore.switchRole(roleId);
+};
+
 const toggleDrawerMenu = inject('toggleDrawerMenu') as () => void;
 </script>
 

src/store/modules/user/index.ts

@@ -15,6 +15,7 @@ import {
   userDetail,
   deptAudit,
   code,
+  switchRole
 } from '@/api/user';
 import { setToken, clearToken } from '@/utils/auth';
 import { removeRouteListener } from '@/utils/route-listener';
@@ -45,6 +46,19 @@ const useUserStore = defineStore('user', {
   },
 
   actions: {
+    // 用户切换角色
+    async switchRole(role: number) {
+      const res = await switchRole(role);
+      this.resetInfo();
+      // this.setInfo(res.data.user);
+      // // 检查并存储新的 Token
+      // if (res.data.token) {
+      //   setToken(res.data.token);
+      // }
+      window.location.reload();
+    },
+
+
     // Set user's information
     setInfo(partial: Partial<UserState>) {
       this.$patch(partial);