update button position

src/pages/user/UserList.vue

@@ -34,11 +34,51 @@
 			<div v-if="!pageResult.list.length" class="load-state" v-text="isLoading ? '正在加载用户' : '暂无用户'" />
 			<div v-if="pageResult.list.length" class="load-state" v-text="isNoMore ? '已经到底了' : '上拉加载更多'" />
 		</t-pull-down-refresh>
-		<div class="actions">
-			<t-button v-can="permissionCodes.user.create" theme="light" type="button" @click="toCreate">新增用户</t-button>
-			<t-button v-can="permissionCodes.user.create" theme="primary" type="button" @click="inviteVisible = true">邀请注册</t-button>
 	</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>
 	<user-invite v-model:visible="inviteVisible" :store-id="currentStoreStore.currentStoreId || undefined" />
 </template>
 
@@ -47,6 +87,7 @@ import { Toast } from "tdesign-mobile-vue";
 import { type Page, type PageResult, UserAPI, type User, useUserStore } from "timi-web";
 import ManagedUserAPI from "@/api/ManagedUserAPI";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
+import { useNavBarStore } from "@/store/navBarStore";
 import type { ManagedUser } from "@/types/ManagedUser";
 import { usePermissionSettingsStore } from "@/store/permissionSettingsStore";
 import { buildFallbackAvatar } from "@/utils/avatar";
@@ -61,10 +102,13 @@ defineOptions({
 const router = useRouter();
 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 userListOptions = computed(() => ({ storeId: currentStoreStore.currentStoreId }));
 
@@ -158,12 +202,18 @@ 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
 	});
 }
 
+function openInvite(): void {
+	actionVisible.value = false;
+	inviteVisible.value = true;
+}
+
 async function toDetail(item: ManagedUser): Promise<void> {
 	if (!item.id) {
 		return;
@@ -173,17 +223,20 @@ async function toDetail(item: ManagedUser): Promise<void> {
 }
 
 onMounted(async () => {
+	navBarStore.setCustomRightVisible(canCreateUser.value);
 	try {
 		await loadData();
 	} catch {
 		Toast.error("用户列表加载失败");
 	}
 });
+
+onUnmounted(() => navBarStore.clearRight());
 </script>
 
 <style scoped lang="less">
 .user-list {
-	padding: calc(var(--app-nav-height) + 1rem) 0 6rem 0;
+	padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
 	display: grid;
 	gap: .75rem;
 
@@ -204,15 +257,34 @@ onMounted(async () => {
 			justify-content: space-between;
 		}
 	}
+}
 
-	.actions {
+.user-actions {
-		left: 1rem;
+	--td-popover-padding: 0 .5rem;
-		right: 1rem;
+
-		bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
+	:deep(.t-popover__content) {
-		position: fixed;
+		border-radius: .875rem;
-		gap: .75rem;
+	}
+
+	.trigger {
+		padding: 0;
+	}
+
+	.menu {
+		gap: .25rem;
+		min-width: 8rem;
 		display: grid;
-		grid-template-columns: 1fr 1fr;
+		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;
 	}
 }