perf: 优化 租户切换

apps/web-antd/src/layouts/components/tenant-dropdown.vue

@@ -1,63 +1,64 @@
 <script lang="ts" setup>
-import { computed, onMounted, ref } from 'vue';
+import type { SelectValue } from 'ant-design-vue/es/select';
+
+import { onMounted, ref } from 'vue';
 
 import { useAccess } from '@vben/access';
-import { isTenantEnable, useRefresh } from '@vben/hooks';
+import { isTenantEnable, useTabs } from '@vben/hooks';
 import { useAccessStore } from '@vben/stores';
 
-import { Button, Dropdown, Menu } from 'ant-design-vue';
+import { message, Select } from 'ant-design-vue';
 
 import { getTenantList } from '#/api/system/tenant';
+import { $t } from '#/locales';
+import { resetRoutes } from '#/router';
+import { useAuthStore } from '#/store';
 
-const { refresh } = useRefresh();
+const { closeOtherTabs, refreshTab, closeAllTabs } = useTabs();
 
 const { hasAccessByCodes } = useAccess();
 const accessStore = useAccessStore();
 
+const authStore = useAuthStore();
+
 const tenantEnable = isTenantEnable();
 
-const visitTenantList = computed(() => {
-  if (tenantEnable) {
-    const list = accessStore.visitTenantId.map((item) => ({
-      label: item.name,
-      id: item.id,
-    }));
-    return list;
-  }
-  return [];
-});
+const visitTenantList = accessStore.visitTenantId;
 
-const tenant = ref<string>(
-  visitTenantList.value.find((item) => item.id === accessStore.tenantId)
-    ?.label || '切换租户',
-);
+const tenant = ref<SelectValue>(accessStore.tenantId ?? 0);
 
-function handleClick(id: number | undefined) {
-  if (id) {
-    accessStore.setTenantId(id);
-    refresh();
-    window.location.reload();
-  }
+async function handleClick(id: SelectValue) {
+  accessStore.setTenantId(Number(id));
+  await authStore.fetchUserInfo();
+  await resetRoutes();
+  await closeOtherTabs();
+  await closeAllTabs();
+  await refreshTab();
+  message.success($t('page.tenant.success'));
 }
 
 onMounted(async () => {
   if (tenantEnable) {
     const resp = await getTenantList();
-    accessStore.setVisitTenantId(resp);
+    accessStore.setVisitTenantId(
+      resp
+        .map((item) => ({ id: item.id, name: item.name }))
+        .filter((item): item is { id: number; name: string } => !!item.id),
+    );
   }
 });
 </script>
 <template>
-  <Dropdown v-if="tenantEnable && hasAccessByCodes(['system:tenant:visit'])">
-    <template #overlay>
-      <Menu>
-        <template v-for="item in visitTenantList" :key="item.key">
-          <Menu.Item @click="handleClick(item.id)">
-            {{ item.label }}
-          </Menu.Item>
-        </template>
-      </Menu>
-    </template>
-    <Button> {{ tenant }} </Button>
-  </Dropdown>
+  <div v-if="tenantEnable && hasAccessByCodes(['system:tenant:visit'])">
+    <Select
+      v-model:value="tenant"
+      :field-names="{ label: 'name', value: 'id' }"
+      :options="visitTenantList"
+      :placeholder="$t('page.tenant.placeholder')"
+      :dropdown-style="{ position: 'fixed', zIndex: 1666 }"
+      allow-clear
+      class="w-40"
+      @change="handleClick"
+    />
+  </div>
 </template>

apps/web-antd/src/locales/langs/en-US/page.json

@@ -24,5 +24,9 @@
     "confirm": "Confirm",
     "reset": "Reset",
     "search": "Search"
+  },
+  "tenant": {
+    "placeholder": "Please select tenant",
+    "success": "Switch tenant success"
   }
 }

apps/web-antd/src/locales/langs/zh-CN/page.json

@@ -24,5 +24,9 @@
     "confirm": "确认",
     "reset": "重置",
     "search": "搜索"
+  },
+  "tenant": {
+    "placeholder": "请选择租户",
+    "success": "切换租户成功"
   }
 }

packages/stores/src/modules/access.ts

@@ -7,15 +7,8 @@ import { acceptHMRUpdate, defineStore } from 'pinia';
 type AccessToken = null | string;
 
 type VisitTenantId = {
-  accountCount: number;
-  contactMobile: string;
-  contactName: string;
-  expireTime: Date;
-  id?: number;
+  id: number;
   name: string;
-  packageId: number;
-  status: number;
-  website: string;
 };
 
 interface AccessState {