add user invite

src/pages/user/UserList.vue

@@ -1,6 +1,10 @@
 <template>
-	<div v-can="permissionCodes.user.read" class="user-list">
-		<div class="store-menu">
+	<div
+		v-can="permissionCodes.user.read"
+		class="user-list"
+		:class="{ 'has-store-filter': isGlobalManager }"
+	>
+		<div v-if="isGlobalManager" class="store-menu">
 			<t-dropdown-menu v-if="isGlobalManager">
 				<t-dropdown-item
 					v-model="selectedStoreId"
@@ -39,13 +43,12 @@
 			<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>
-		<t-button v-can="permissionCodes.user.create" class="add" theme="primary" type="button" @click="toCreate">
-			<template #icon>
-				<t-icon name="add" />
-			</template>
-			新增
-		</t-button>
+		<div class="actions">
+			<t-button v-can="permissionCodes.user.create" theme="primary" type="button" @click="inviteVisible = true">邀请注册</t-button>
+			<t-button v-can="permissionCodes.user.create" theme="primary" type="button" @click="toCreate">新增用户</t-button>
+		</div>
 	</div>
+	<user-invite v-model:visible="inviteVisible" :store-id="selectedStoreId === allStoreFilterValue ? undefined : selectedStoreId" />
 </template>
 
 <script setup lang="ts">
@@ -60,6 +63,7 @@ import { usePermissionSettingsStore } from "@/store/permissionSettingsStore";
 import { buildFallbackAvatar } from "@/utils/avatar";
 import { buildEffectiveRoleCodeSet, getManagedUserRoleList, getRoleDisplayName } from "@/utils/role";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
+import UserInvite from "@/pages/user/component/UserInvite.vue";
 
 defineOptions({
 	name: "UserList"
@@ -69,6 +73,7 @@ const router = useRouter();
 const userStore = useUserStore();
 const currentStoreStore = useCurrentStoreStore();
 const permissionStore = usePermissionSettingsStore();
+const inviteVisible = ref(false);
 
 const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
 
@@ -242,10 +247,14 @@ onMounted(async () => {
 
 <style scoped lang="less">
 .user-list {
-	padding: calc(var(--app-nav-height) + 4rem) 0 6rem 0;
+	padding: calc(var(--app-nav-height) + 1rem) 0 6rem 0;
 	display: grid;
 	gap: .75rem;
 
+	&.has-store-filter {
+		padding-top: calc(var(--app-nav-height) + 4rem);
+	}
+
 	.store-menu {
 		top: var(--app-nav-height);
 		left: 0;
@@ -273,11 +282,14 @@ onMounted(async () => {
 		}
 	}
 
-	.add {
+	.actions {
 		left: 1rem;
 		right: 1rem;
 		bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
 		position: fixed;
+		gap: .75rem;
+		display: grid;
+		grid-template-columns: 1fr 1fr;
 	}
 }