add NavBarActionMenu.vue

src/pages/user/UserList.vue

@@ -45,50 +45,13 @@
 			<div v-if="pageResult.list.length" class="load-state" v-text="isNoMore ? '已经到底了' : '上拉加载更多'" />
 		</t-pull-down-refresh>
 	</div>
-	<teleport v-if="navBarStore.customRightVisible" to="#app-nav-right">
-		<div v-if="canCreateUser" class="user-actions">
-			<t-popover
-				v-model:visible="actionVisible"
-				placement="bottom-right"
-				theme="light"
-			>
-				<t-button class="trigger" theme="primary" variant="text">
-					<template #icon>
-						<t-icon name="add" />
-					</template>
-					<span>新增</span>
-				</t-button>
-				<template #content>
-					<div class="menu">
-						<t-button
-							v-can="permissionCodes.user.create"
-							class="menu-item"
-							variant="text"
-							type="button"
-							@click="toCreate"
-						>
-							<template #icon>
-								<t-icon name="add" />
-							</template>
-							新增用户
-						</t-button>
-						<t-button
-							v-can="permissionCodes.user.create"
-							class="menu-item"
-							variant="text"
-							type="button"
-							@click="openInvite"
-						>
-							<template #icon>
-								<t-icon name="qrcode" />
-							</template>
-							邀请注册
-						</t-button>
-					</div>
-				</template>
-			</t-popover>
-		</div>
-	</teleport>
+	<nav-bar-action-menu
+		v-if="canCreateUser"
+		:actions="actionList"
+		trigger-icon="add"
+		trigger-label="新增"
+		trigger-text="新增"
+	/>
 	<user-invite v-model:visible="inviteVisible" :store-id="currentStoreStore.currentStoreId || undefined" />
 </template>
 
@@ -102,6 +65,7 @@ import type { ManagedUser } from "@/types/ManagedUser";
 import { usePermissionSettingsStore } from "@/store/permissionSettingsStore";
 import { buildFallbackAvatar } from "@/utils/avatar";
 import { getManagedUserRoleList, getRoleDisplayName } from "@/utils/role";
+import type { NavBarAction } from "@/types/NavBarAction";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
 import UserInvite from "@/pages/user/component/UserInvite.vue";
 
@@ -114,12 +78,26 @@ const userStore = useUserStore();
 const currentStoreStore = useCurrentStoreStore();
 const navBarStore = useNavBarStore();
 const permissionStore = usePermissionSettingsStore();
-const actionVisible = ref(false);
 const inviteVisible = ref(false);
 
 const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
 const canCreateUser = computed(() => userStore.hasPermissions(permissionCodes.user.create));
 
+const actionList: NavBarAction[] = [
+	{
+		action: toCreate,
+		icon: "add",
+		key: "create",
+		text: "新增用户"
+	},
+	{
+		action: openInvite,
+		icon: "qrcode",
+		key: "invite",
+		text: "邀请注册"
+	}
+];
+
 const userListOptions = computed(() => ({ storeId: currentStoreStore.currentStoreId }));
 
 // ---------- 列表数据 ----------
@@ -226,7 +204,6 @@ async function fetch(): Promise<void> {
 // ---------- 导航 ----------
 
 async function toCreate(): Promise<void> {
-	actionVisible.value = false;
 	await router.push({
 		path: "/management/users/create",
 		query: currentStoreStore.currentStoreId ? { storeId: currentStoreStore.currentStoreId } : undefined
@@ -234,7 +211,6 @@ async function toCreate(): Promise<void> {
 }
 
 function openInvite(): void {
-	actionVisible.value = false;
 	inviteVisible.value = true;
 }
 
@@ -290,35 +266,6 @@ onUnmounted(() => navBarStore.clearRight());
 	}
 }
 
-.user-actions {
-	--td-popover-padding: 0 .5rem;
-
-	:deep(.t-popover__content) {
-		border-radius: .875rem;
-	}
-
-	.trigger {
-		padding: 0;
-	}
-
-	.menu {
-		gap: .25rem;
-		min-width: 8rem;
-		display: grid;
-		padding: .5rem 0;
-	}
-
-	.menu-item {
-		--td-button-medium-height: 32px;
-		--td-button-medium-padding-horizontal: 10px;
-
-		gap: .25rem;
-		width: 100%;
-		font-weight: unset;
-		justify-content: flex-start;
-	}
-}
-
 :global(html.theme-dark) {
 	.user-list {
 		.item {