add NavBarActionMenu.vue

src/pages/customer/CustomerList.vue

@@ -72,28 +72,13 @@
 			<div v-if="!pageResult.list.length" class="load-state" v-text="isLoading ? '正在加载客户' : '暂无客户数据'" />
 			<div v-if="pageResult.list.length" class="load-state" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
 		</t-pull-down-refresh>
-		<div class="bottom-actions">
-			<t-button
-				v-can="permissionCodes.customer.export"
-				theme="primary"
-				variant="outline"
-				class="export bg-white"
-				:loading="isExporting"
-				:disabled="isExporting"
-				@click="doExport"
-			>
-				<template #icon>
-					<t-icon name="download" />
-				</template>
-				导出
-			</t-button>
-		</div>
 		<tag-selector
 			v-model="selectedTagIdList"
 			v-model:visible="tagSelectorVisible"
 			@change="handleTagFilterChanged"
 		/>
 	</div>
+	<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
 </template>
 
 <script setup lang="ts">
@@ -105,6 +90,7 @@ import TagSelector from "@/components/TagSelector.vue";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { Customer } from "@/types/Customer";
+import type { NavBarAction } from "@/types/NavBarAction";
 import type { Tag } from "@/types/Tag";
 import { getCustomerPhotoURL } from "@/utils/customer";
 import { corePermissionCodes, gaoRoleCodes, permissionCodes } from "@/utils/permission";
@@ -121,6 +107,32 @@ const isRefreshing = ref(false);
 const isExporting = ref(false);
 const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
 const canReadTag = computed(() => userStore.hasPermissions(corePermissionCodes.tag.read));
+const canCreateCustomer = computed(() => userStore.hasPermissions(permissionCodes.customer.create));
+const canExportCustomer = computed(() => userStore.hasPermissions(permissionCodes.customer.export));
+const canShowActionMenu = computed(() => canCreateCustomer.value || canExportCustomer.value);
+
+const actionList = computed<NavBarAction[]>(() => {
+	const list: NavBarAction[] = [];
+	if (canCreateCustomer.value) {
+		list.push({
+			action: toCreate,
+			theme: "primary",
+			icon: "add",
+			key: "create",
+			text: "新增客户"
+		});
+	}
+	if (canExportCustomer.value) {
+		list.push({
+			action: doExport,
+			icon: "download",
+			key: "export",
+			loading: isExporting.value,
+			text: "导出 Excel"
+		});
+	}
+	return list;
+});
 
 // ---------- 标签筛选 ----------
 
@@ -199,9 +211,7 @@ onMounted(loadData);
 
 onMounted(() => {
 	navBarStore.clearRight();
-	if (userStore.hasPermissions(permissionCodes.customer.create)) {
-		navBarStore.setRightText("添加", "var(--td-brand-color)", toCreate);
-	}
+	navBarStore.setCustomRightVisible(canShowActionMenu.value);
 });
 
 watch(keyword, async () => {
@@ -244,7 +254,7 @@ async function doExport(): Promise<void> {
 
 <style scoped lang="less">
 .customer-list {
-	padding: var(--app-nav-height) 0 5.5rem 0;
+	padding: var(--app-nav-height) 0 1rem 0;
 
 	.filter {
 		gap: .5rem;
@@ -288,7 +298,7 @@ async function doExport(): Promise<void> {
 	}
 
 	.list-wrapper {
-		padding: 1rem 0 4rem 0;
+		padding: 1rem 0;
 
 		.items {
 
@@ -318,19 +328,6 @@ async function doExport(): Promise<void> {
 		}
 	}
 
-	.bottom-actions {
-		gap: .75rem;
-		left: 1rem;
-		right: 1rem;
-		display: flex;
-		bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
-		position: fixed;
-
-		.export {
-			flex: 1;
-		}
-
-	}
 }
 
 :global(html.theme-dark) {