perf: 优化租户选择

pull/148/head
xingyu4j 2025-06-18 14:05:43 +08:00
parent 50558e3bde
commit f57eff9ad2
9 changed files with 112 additions and 422 deletions

View File

@ -5,9 +5,10 @@ import type { SystemTenantApi } from '#/api/system/tenant';
import { computed, onMounted, ref, watch } from 'vue';
import { useAccess } from '@vben/access';
import { AuthenticationLoginExpiredModal, useVbenModal } from '@vben/common-ui';
import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
import { useTabs, useWatermark } from '@vben/hooks';
import { isTenantEnable, useTabs, useWatermark } from '@vben/hooks';
import {
AntdProfileOutlined,
BookOpenText,
@ -40,12 +41,10 @@ import { router } from '#/router';
import { useAuthStore } from '#/store';
import LoginForm from '#/views/_core/authentication/login.vue';
//
const tenants = ref<SystemTenantApi.Tenant[]>([]);
const userStore = useUserStore();
const authStore = useAuthStore();
const accessStore = useAccessStore();
const { hasAccessByCodes } = useAccess();
const { destroyWatermark, updateWatermark } = useWatermark();
const { closeOtherTabs, refreshTab } = useTabs();
@ -156,9 +155,17 @@ function handleNotificationOpen(open: boolean) {
handleNotificationGetUnreadCount();
}
//
const tenants = ref<SystemTenantApi.Tenant[]>([]);
const tenantEnable = computed(
() => hasAccessByCodes(['system:tenant:visit']) && isTenantEnable(),
);
/** 获取租户列表 */
async function handleGetTenantList() {
tenants.value = await getSimpleTenantList();
if (tenantEnable.value) {
tenants.value = await getSimpleTenantList();
}
}
/** 处理租户切换 */
@ -235,7 +242,7 @@ watch(
/>
</template>
<template #header-right-1>
<div v-access:code="['system:tenant:visit']">
<div v-if="tenantEnable">
<TenantDropdown
class="mr-2"
:tenant-list="tenants"

View File

@ -1,91 +0,0 @@
<script lang="ts" setup>
// TODO @xingyu 3 layouts components
import { useVbenModal, VbenButton, VbenButtonGroup } from '@vben/common-ui';
import { openWindow } from '@vben/utils';
import { Image, Tag } from 'ant-design-vue';
import { $t } from '#/locales';
const [Modal, modalApi] = useVbenModal({
draggable: true,
overlayBlur: 5,
footer: false,
onCancel() {
modalApi.close();
},
});
</script>
<template>
<Modal class="w-2/5" :title="$t('ui.widgets.qa')">
<div class="mt-2 flex flex-col">
<div class="mt-2 flex flex-row">
<VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
<p class="p-2">项目地址:</p>
<VbenButton
variant="link"
@click="
openWindow('https://gitee.com/yudaocode/yudao-ui-admin-vben')
"
>
Gitee
</VbenButton>
<VbenButton
variant="link"
@click="
openWindow('https://github.com/yudaocode/yudao-ui-admin-vben')
"
>
Github
</VbenButton>
</VbenButtonGroup>
<VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
<p class="p-2">issues:</p>
<VbenButton
variant="link"
@click="
openWindow(
'https://gitee.com/yudaocode/yudao-ui-admin-vben/issues',
)
"
>
Gitee
</VbenButton>
<VbenButton
variant="link"
@click="
openWindow(
'https://github.com/yudaocode/yudao-ui-admin-vben/issues',
)
"
>
Github
</VbenButton>
</VbenButtonGroup>
<VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
<p class="p-2">开发文档:</p>
<VbenButton
variant="link"
@click="openWindow('https://doc.iocoder.cn/quick-start/')"
>
项目文档
</VbenButton>
<VbenButton variant="link" @click="openWindow('https://antdv.com/')">
antdv 文档
</VbenButton>
</VbenButtonGroup>
</div>
<p class="mt-2 flex justify-center">
<span>
<Image src="/wx-xingyu.png" alt="数舵科技" />
</span>
</p>
<p class="mt-2 flex justify-center pt-4 text-sm italic">
本项目采用<Tag color="blue">MIT</Tag>开源协议个人与企业可100%
免费使用
</p>
</div>
</Modal>
</template>

View File

@ -1,11 +1,14 @@
<script lang="ts" setup>
import type { NotificationItem } from '@vben/layouts';
import type { SystemTenantApi } from '#/api/system/tenant';
import { computed, onMounted, ref, watch } from 'vue';
import { useAccess } from '@vben/access';
import { AuthenticationLoginExpiredModal, useVbenModal } from '@vben/common-ui';
import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
import { useWatermark } from '@vben/hooks';
import { isTenantEnable, useTabs, useWatermark } from '@vben/hooks';
import {
AntdProfileOutlined,
BookOpenText,
@ -14,32 +17,36 @@ import {
} from '@vben/icons';
import {
BasicLayout,
Help,
LockScreen,
Notification,
TenantDropdown,
UserDropdown,
} from '@vben/layouts';
import { preferences } from '@vben/preferences';
import { useAccessStore, useUserStore } from '@vben/stores';
import { formatDateTime, openWindow } from '@vben/utils';
import { ElMessage } from 'element-plus';
import {
getUnreadNotifyMessageCount,
getUnreadNotifyMessageList,
updateAllNotifyMessageRead,
updateNotifyMessageRead,
} from '#/api/system/notify/message';
import { getSimpleTenantList } from '#/api/system/tenant';
import { $t } from '#/locales';
import { router } from '#/router';
import { useAuthStore } from '#/store';
import LoginForm from '#/views/_core/authentication/login.vue';
import Help from './components/help.vue';
import TenantDropdown from './components/tenant-dropdown.vue';
const userStore = useUserStore();
const authStore = useAuthStore();
const accessStore = useAccessStore();
const { hasAccessByCodes } = useAccess();
const { destroyWatermark, updateWatermark } = useWatermark();
const { closeOtherTabs, refreshTab } = useTabs();
const notifications = ref<NotificationItem[]>([]);
const unreadCount = ref(0);
@ -148,10 +155,41 @@ function handleNotificationOpen(open: boolean) {
handleNotificationGetUnreadCount();
}
//
const tenants = ref<SystemTenantApi.Tenant[]>([]);
const tenantEnable = computed(
() => hasAccessByCodes(['system:tenant:visit']) && isTenantEnable(),
);
/** 获取租户列表 */
async function handleGetTenantList() {
if (tenantEnable.value) {
tenants.value = await getSimpleTenantList();
}
}
/** 处理租户切换 */
async function handleTenantChange(tenant: SystemTenantApi.Tenant) {
if (!tenant || !tenant.id) {
ElMessage.error('切换租户失败');
return;
}
// 访 ID
accessStore.setVisitTenantId(tenant.id as number);
//
await closeOtherTabs();
//
await refreshTab();
//
ElMessage.success(`切换当前租户为: ${tenant.name}`);
}
// ========== ==========
onMounted(() => {
//
handleNotificationGetUnreadCount();
//
handleGetTenantList();
//
setInterval(
() => {
@ -204,7 +242,14 @@ watch(
/>
</template>
<template #header-right-1>
<TenantDropdown class="mr-2 w-44" />
<div v-if="tenantEnable">
<TenantDropdown
class="mr-2"
:tenant-list="tenants"
:visit-tenant-id="accessStore.visitTenantId"
@success="handleTenantChange"
/>
</div>
</template>
<template #extra>
<AuthenticationLoginExpiredModal

View File

@ -1,91 +0,0 @@
<script lang="ts" setup>
// TODO @xingyu 3 layouts components
import { useVbenModal, VbenButton, VbenButtonGroup } from '@vben/common-ui';
import { openWindow } from '@vben/utils';
import { ElImage, ElTag } from 'element-plus';
import { $t } from '#/locales';
const [Modal, modalApi] = useVbenModal({
draggable: true,
overlayBlur: 5,
footer: false,
onCancel() {
modalApi.close();
},
});
</script>
<template>
<Modal class="w-[40%]" :title="$t('ui.widgets.qa')">
<div class="mt-2 flex flex-col">
<div class="mt-2 flex flex-row">
<VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
<p class="p-2">项目地址:</p>
<VbenButton
variant="link"
@click="
openWindow('https://gitee.com/yudaocode/yudao-ui-admin-vben')
"
>
Gitee
</VbenButton>
<VbenButton
variant="link"
@click="
openWindow('https://github.com/yudaocode/yudao-ui-admin-vben')
"
>
Github
</VbenButton>
</VbenButtonGroup>
<VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
<p class="p-2">issues:</p>
<VbenButton
variant="link"
@click="
openWindow(
'https://gitee.com/yudaocode/yudao-ui-admin-vben/issues',
)
"
>
Gitee
</VbenButton>
<VbenButton
variant="link"
@click="
openWindow(
'https://github.com/yudaocode/yudao-ui-admin-vben/issues',
)
"
>
Github
</VbenButton>
</VbenButtonGroup>
<VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
<p class="p-2">开发文档:</p>
<VbenButton
variant="link"
@click="openWindow('https://doc.iocoder.cn/quick-start/')"
>
项目文档
</VbenButton>
<VbenButton variant="link" @click="openWindow('https://antdv.com/')">
antdv 文档
</VbenButton>
</VbenButtonGroup>
</div>
<p class="mt-2 flex justify-center">
<span>
<ElImage src="/wx-xingyu.png" alt="数舵科技" />
</span>
</p>
<p class="mt-2 flex justify-center pt-4 text-sm italic">
本项目采用<ElTag type="primary">MIT</ElTag>开源协议个人与企业可100%
免费使用
</p>
</div>
</Modal>
</template>

View File

@ -1,67 +0,0 @@
<script lang="ts" setup>
// TODO @puhui999
import type { SystemTenantApi } from '#/api/system/tenant';
import { onMounted, ref } from 'vue';
import { useAccess } from '@vben/access';
import { isTenantEnable, useTabs } from '@vben/hooks';
import { useAccessStore } from '@vben/stores';
import { ElMessage, ElOption, ElSelect } from 'element-plus';
import { getSimpleTenantList } from '#/api/system/tenant';
import { $t } from '#/locales';
const { closeOtherTabs, refreshTab } = useTabs();
const { hasAccessByCodes } = useAccess();
const accessStore = useAccessStore();
const tenantEnable = isTenantEnable();
const value = ref<number>(accessStore.visitTenantId ?? 0); // 访 ID
const tenants = ref<SystemTenantApi.Tenant[]>([]); //
// TODO @xingyu 3
async function handleChange(id: number) {
if (id === null) return;
// 访 ID
accessStore.setVisitTenantId(id);
//
await closeOtherTabs();
//
await refreshTab();
//
const tenant = tenants.value.find((item) => item.id === id);
if (tenant) {
ElMessage.success(`切换当前租户为: ${tenant.name}`);
}
}
onMounted(async () => {
if (!tenantEnable) {
return;
}
tenants.value = await getSimpleTenantList();
});
</script>
<template>
<div v-if="tenantEnable && hasAccessByCodes(['system:tenant:visit'])">
<ElSelect
v-model="value"
:placeholder="$t('page.tenant.placeholder')"
clearable
class="w-40"
@change="handleChange"
>
<ElOption
v-for="item in tenants"
:key="item.id"
:label="item.name"
:value="item.id || 0"
/>
</ElSelect>
</div>
</template>

View File

@ -1,11 +1,14 @@
<script lang="ts" setup>
import type { NotificationItem } from '@vben/layouts';
import type { SystemTenantApi } from '#/api/system/tenant';
import { computed, onMounted, ref, watch } from 'vue';
import { useAccess } from '@vben/access';
import { AuthenticationLoginExpiredModal, useVbenModal } from '@vben/common-ui';
import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
import { useWatermark } from '@vben/hooks';
import { isTenantEnable, useTabs, useWatermark } from '@vben/hooks';
import {
AntdProfileOutlined,
BookOpenText,
@ -14,32 +17,35 @@ import {
} from '@vben/icons';
import {
BasicLayout,
Help,
LockScreen,
Notification,
TenantDropdown,
UserDropdown,
} from '@vben/layouts';
import { preferences } from '@vben/preferences';
import { useAccessStore, useUserStore } from '@vben/stores';
import { formatDateTime, openWindow } from '@vben/utils';
import { message } from '#/adapter/naive';
import {
getUnreadNotifyMessageCount,
getUnreadNotifyMessageList,
updateAllNotifyMessageRead,
updateNotifyMessageRead,
} from '#/api/system/notify/message';
import { getSimpleTenantList } from '#/api/system/tenant';
import { $t } from '#/locales';
import { router } from '#/router';
import { useAuthStore } from '#/store';
import LoginForm from '#/views/_core/authentication/login.vue';
import Help from './components/help.vue';
import TenantDropdown from './components/tenant-dropdown.vue';
const userStore = useUserStore();
const authStore = useAuthStore();
const accessStore = useAccessStore();
const { hasAccessByCodes } = useAccess();
const { destroyWatermark, updateWatermark } = useWatermark();
const { closeOtherTabs, refreshTab } = useTabs();
const notifications = ref<NotificationItem[]>([]);
const unreadCount = ref(0);
@ -148,10 +154,40 @@ function handleNotificationOpen(open: boolean) {
handleNotificationGetUnreadCount();
}
//
const tenants = ref<SystemTenantApi.Tenant[]>([]);
const tenantEnable = computed(
() => hasAccessByCodes(['system:tenant:visit']) && isTenantEnable(),
);
/** 获取租户列表 */
async function handleGetTenantList() {
if (tenantEnable.value) {
tenants.value = await getSimpleTenantList();
}
}
/** 处理租户切换 */
async function handleTenantChange(tenant: SystemTenantApi.Tenant) {
if (!tenant || !tenant.id) {
message.error('切换租户失败');
return;
}
// 访 ID
accessStore.setVisitTenantId(tenant.id as number);
//
await closeOtherTabs();
//
await refreshTab();
//
message.success(`切换当前租户为: ${tenant.name}`);
}
// ========== ==========
onMounted(() => {
//
handleNotificationGetUnreadCount();
//
handleGetTenantList();
//
setInterval(
() => {
@ -204,7 +240,14 @@ watch(
/>
</template>
<template #header-right-1>
<TenantDropdown class="mr-2" />
<div v-if="tenantEnable">
<TenantDropdown
class="mr-2"
:tenant-list="tenants"
:visit-tenant-id="accessStore.visitTenantId"
@success="handleTenantChange"
/>
</div>
</template>
<template #extra>
<AuthenticationLoginExpiredModal

View File

@ -1,90 +0,0 @@
<script lang="ts" setup>
import { useVbenModal, VbenButton, VbenButtonGroup } from '@vben/common-ui';
import { openWindow } from '@vben/utils';
import { NImage, NTag } from 'naive-ui';
import { $t } from '#/locales';
const [Modal, modalApi] = useVbenModal({
draggable: true,
overlayBlur: 5,
footer: false,
onCancel() {
modalApi.close();
},
});
</script>
<template>
<Modal class="w-[40%]" :title="$t('ui.widgets.qa')">
<div class="mt-2 flex flex-col">
<div class="mt-2 flex flex-row">
<VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
<p class="p-2">项目地址:</p>
<VbenButton
variant="link"
@click="
openWindow('https://gitee.com/yudaocode/yudao-ui-admin-vben')
"
>
Gitee
</VbenButton>
<VbenButton
variant="link"
@click="
openWindow('https://github.com/yudaocode/yudao-ui-admin-vben')
"
>
Github
</VbenButton>
</VbenButtonGroup>
<VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
<p class="p-2">issues:</p>
<VbenButton
variant="link"
@click="
openWindow(
'https://gitee.com/yudaocode/yudao-ui-admin-vben/issues',
)
"
>
Gitee
</VbenButton>
<VbenButton
variant="link"
@click="
openWindow(
'https://github.com/yudaocode/yudao-ui-admin-vben/issues',
)
"
>
Github
</VbenButton>
</VbenButtonGroup>
<VbenButtonGroup class="basis-1/3" :gap="2" border size="large">
<p class="p-2">开发文档:</p>
<VbenButton
variant="link"
@click="openWindow('https://doc.iocoder.cn/quick-start/')"
>
项目文档
</VbenButton>
<VbenButton variant="link" @click="openWindow('https://antdv.com/')">
antdv 文档
</VbenButton>
</VbenButtonGroup>
</div>
<p class="mt-2 flex justify-center">
<span>
<NImage src="/wx-xingyu.png" alt="数舵科技" />
</span>
</p>
<p class="mt-2 flex justify-center pt-4 text-sm italic">
本项目采用<NTag color="blue">MIT</NTag>开源协议个人与企业可100%
免费使用
</p>
</div>
</Modal>
</template>

View File

@ -1,62 +0,0 @@
<script lang="ts" setup>
import type { SelectValue } from 'naive-ui/es/select';
import type { SystemTenantApi } from '#/api/system/tenant';
import { onMounted, ref } from 'vue';
import { useAccess } from '@vben/access';
import { isTenantEnable, useTabs } from '@vben/hooks';
import { useAccessStore } from '@vben/stores';
import { NSelect } from 'naive-ui';
import { message } from '#/adapter/naive';
import { getSimpleTenantList } from '#/api/system/tenant';
import { $t } from '#/locales';
const { closeOtherTabs, refreshTab } = useTabs();
const { hasAccessByCodes } = useAccess();
const accessStore = useAccessStore();
const tenantEnable = isTenantEnable();
const value = ref<number>(accessStore.visitTenantId ?? undefined); // 访 ID
const tenants = ref<SystemTenantApi.Tenant[]>([]); //
async function handleChange(id: SelectValue) {
// 访 ID
accessStore.setVisitTenantId(id as number);
//
await closeOtherTabs();
//
await refreshTab();
//
const tenant = tenants.value.find((item) => item.id === id);
if (tenant) {
message.success(`切换当前租户为: ${tenant.name}`);
}
}
onMounted(async () => {
if (!tenantEnable) {
return;
}
tenants.value = await getSimpleTenantList();
});
</script>
<template>
<div v-if="tenantEnable && hasAccessByCodes(['system:tenant:visit'])">
<NSelect
v-model:value="value"
value-field="id"
label-field="name"
:options="tenants"
:placeholder="$t('page.tenant.placeholder')"
allow-clear
class="w-40"
@update:value="handleChange"
/>
</div>
</template>

View File

@ -1,8 +1,6 @@
<script lang="ts" setup>
import { computed } from 'vue';
import { isTenantEnable } from '@vben/hooks';
import {
Button,
DropdownMenu,
@ -35,8 +33,6 @@ const props = defineProps<{
const emit = defineEmits(['success']);
const tenantEnable = isTenantEnable();
//
const tenants = computed(() => props.tenantList ?? []);
@ -50,7 +46,7 @@ async function handleChange(id: number | undefined) {
}
</script>
<template>
<DropdownMenu v-if="tenantEnable">
<DropdownMenu>
<DropdownMenuTrigger as-child>
<Button
variant="outline"