feat: 切换角色

frontend/src/components/layout/layout-header.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { ref } from "vue";
+import UserInfo from "@/components/layout/layout-info/layout-info.vue";
+import { MenuUnfoldOutlined, MenuFoldOutlined } from "@ant-design/icons-vue";
+
+// 记录图标状态
+const collapsed = ref(false);
+
+const emits = defineEmits(["changeFold"]);
+
+// 修改图标状态同时传递参数给父组件让其变更菜单收缩
+const clickMenuFold = () => {
+  collapsed.value = !collapsed.value;
+  // 父组件需要绑定这个事件
+  emits("changeFold", collapsed.value);
+};
+</script>
+
+<template>
+  <div class="header">
+    <menu-unfold-outlined
+      v-if="collapsed"
+      class="trigger"
+      @click="clickMenuFold"
+    />
+    <menu-fold-outlined v-else class="trigger" @click="clickMenuFold" />
+    <UserInfo />
+  </div>
+</template>
+
+<style scoped>
+.trigger {
+  margin-left: 16px;
+  font-size: 24px;
+}
+
+.right {
+  float: right;
+  margin-right: 16px;
+  font-size: 16px;
+}
+</style>

frontend/src/components/layout/layout-info/layout-info.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import { userStore } from "@/stores/user";
+
+import SelectRole from "./select-role.vue";
+
+const store = userStore();
+const router = useRouter();
+
+const roleChangeRef = ref();
+
+const onClick = ({ key }) => {
+  if (key === "1") {
+    // 点击切换角色
+    roleChangeRef.value?.showModal();
+  } else {
+    store.$reset();
+    router.push("/login");
+  }
+};
+</script>
+
+<template>
+  <div class="right">
+    <a-dropdown>
+      <a class="ant-dropdown-link" @click.prevent>
+        {{ store.userInfo.nickname }} - {{ store.userInfo.roles[0].name }}
+      </a>
+      <template #overlay>
+        <a-menu @click="onClick">
+          <a-menu-item key="1">切换角色</a-menu-item>
+          <a-menu-item key="2">退出登录</a-menu-item>
+        </a-menu>
+      </template>
+    </a-dropdown>
+    <SelectRole ref="roleChangeRef" />
+  </div>
+</template>
+
+<style scoped></style>

frontend/src/components/layout/layout-info/select-role.vue

@@ -0,0 +1,69 @@
+<script setup>
+import { ref, computed } from "vue";
+import { userStore } from "@/stores/user";
+
+const store = userStore();
+
+const loading = ref(false);
+const visible = ref(false);
+
+const currentRoleId = ref(store.userInfo.roles[0].id);
+
+// 角色列表选项
+const options = computed(() => {
+  return store.userInfo.roles.map((role) => ({
+    label: role.name,
+    value: role.id,
+  }));
+});
+
+const showModal = () => {
+  visible.value = true;
+};
+
+const handleOk = () => {
+  loading.value = true;
+  store.userSelectRole(currentRoleId.value);
+  setTimeout(() => {
+    loading.value = false;
+    visible.value = false;
+  }, 1000);
+};
+
+const handleCancel = () => {
+  visible.value = false;
+};
+
+defineExpose({
+  showModal,
+});
+</script>
+
+<template>
+  <div class="select-role">
+    <a-modal v-model:visible="visible" title="切换角色" @ok="handleOk">
+      <template #footer>
+        <a-button key="back" @click="handleCancel">取消</a-button>
+        <a-button
+          key="submit"
+          type="primary"
+          :loading="loading"
+          @click="handleOk"
+          >确定</a-button
+        >
+      </template>
+      <span>选择角色：</span>
+
+      <a-space direction="vertical">
+        <a-select
+          v-model:value="currentRoleId"
+          size="default"
+          style="width: 400px"
+          :options="options"
+        ></a-select>
+      </a-space>
+    </a-modal>
+  </div>
+</template>
+
+<style scoped></style>