feat：增加切换租户的功能

src/layout/components/TenantVisit/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <div>
+    <el-select
+      filterable
+      placeholder="请选择租户"
+      class="!w-180px"
+      v-model="value"
+      @change="handleChange"
+      clearable
+    >
+      <el-option v-for="item in tenants" :key="item.id" :label="item.name" :value="item.id" />
+    </el-select>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import * as TenantApi from '@/api/system/tenant'
+import { getVisitTenantId, setVisitTenantId } from '@/utils/auth'
+import { useMessage } from '@/hooks/web/useMessage'
+import { useTagsView } from '@/hooks/web/useTagsView'
+
+const message = useMessage() // 消息弹窗
+const tagsView = useTagsView() // 标签页操作
+
+const value = ref(getVisitTenantId()) // 当前选中的租户 ID
+const tenants = ref<any[]>([]) // 租户列表
+
+const handleChange = (id: number) => {
+  // 设置访问租户 ID
+  setVisitTenantId(id)
+  // 关闭其他标签页，只保留当前页
+  tagsView.closeOther()
+  // 刷新当前页面
+  tagsView.refreshPage()
+  // 提示切换成功
+  const tenant = tenants.value.find((item) => item.id === id)
+  if (tenant) {
+    message.success(`切换当前租户为: ${tenant.name}`)
+  }
+}
+
+onMounted(async () => {
+  tenants.value = await TenantApi.getTenantList()
+})
+</script>

src/layout/components/ToolHeader.vue

@@ -8,8 +8,10 @@ import { Breadcrumb } from '@/layout/components/Breadcrumb'
 import { SizeDropdown } from '@/layout/components/SizeDropdown'
 import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
 import RouterSearch from '@/components/RouterSearch/index.vue'
+import TenantVisit from '@/layout/components/TenantVisit/index.vue'
 import { useAppStore } from '@/store/modules/app'
 import { useDesign } from '@/hooks/web/useDesign'
+import { checkPermi } from '@/utils/permission'
 
 const { getPrefixCls, variables } = useDesign()
 
@@ -41,6 +43,9 @@ const locale = computed(() => appStore.getLocale)
 // 消息图标
 const message = computed(() => appStore.getMessage)
 
+// 租户切换权限
+const hasTenantVisitPermission = computed(() => checkPermi(['system:tenant:visit']))
+
 export default defineComponent({
   name: 'ToolHeader',
   setup() {
@@ -62,6 +67,7 @@ export default defineComponent({
           </div>
         ) : undefined}
         <div class="h-full flex items-center">
+          {hasTenantVisitPermission.value ? <TenantVisit /> : undefined}
           {screenfull.value ? (
             <Screenfull class="custom-hover" color="var(--top-header-text-color)"></Screenfull>
           ) : undefined}