fix export button position

src/pages/event/EventRecordList.vue

@@ -97,18 +97,7 @@
 			</div>
 		</t-pull-down-refresh>
 	</div>
-	<t-button
+	<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
-		v-can="permissionCodes.eventRecord.export"
-		class="export"
-		theme="primary"
-		:loading="isExporting"
-		@click="exportExcel"
-	>
-		<template #icon>
-			<t-icon name="download" />
-		</template>
-		导出 Excel
-	</t-button>
 	<t-popup v-model="startVisible" placement="bottom">
 		<t-date-time-picker
 			:default-value="dateRange[0]"
@@ -139,6 +128,7 @@ import EventRecordAPI from "@/api/EventRecordAPI";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { EventItem } from "@/types/EventItem";
 import type { EventRecordListItemView, EventRecordPage, EventRecordPageResult } from "@/types/EventRecord";
+import type { NavBarAction } from "@/types/NavBarAction";
 import { getCustomerPhotoURL } from "@/utils/customer";
 import { getErrorMessage } from "@/utils/error";
 import { formatEventNumberValue } from "@/utils/eventValue";
@@ -177,6 +167,7 @@ const startVisible = ref(false);
 const endVisible = ref(false);
 let keywordTimer: number | undefined;
 let initialized = false;
+const isExporting = ref(false);
 
 const canCreateRecord = computed(() => userStore.hasPermissions(permissionCodes.eventRecord.create));
 const dateFilterLabel = computed(() => dateOptions.find(item => item.value === dateFilterType.value)?.label || "今天");
@@ -201,7 +192,32 @@ const selectedNumberEvent = computed(() => {
 	const event = eventList.value.find(item => item.id === actionFilter.value[0]);
 	return event?.valueType === "NUMBER" ? event : undefined;
 });
+const canExportRecord = computed(() => userStore.hasPermissions(permissionCodes.eventRecord.export));
 const canDeleteRecord = computed(() => userStore.hasPermissions(permissionCodes.eventRecord.delete));
+const canShowActionMenu = computed(() => canCreateRecord.value || canExportRecord.value);
+
+const actionList = computed<NavBarAction[]>(() => {
+	const list: NavBarAction[] = [];
+	if (canCreateRecord.value) {
+		list.push({
+			action: toCreate,
+			theme: "primary",
+			icon: "add",
+			key: "create",
+			text: "添加"
+		});
+	}
+	if (canExportRecord.value) {
+		list.push({
+			action: exportExcel,
+			icon: "download",
+			key: "export",
+			loading: isExporting.value,
+			text: "导出 Excel"
+		});
+	}
+	return list;
+});
 
 watch(keyword, () => {
 	if (!initialized) {
@@ -310,7 +326,6 @@ async function loadRecords(): Promise<void> {
 
 // ---------- 操作 ----------
 
-const isExporting = ref(false);
 const isDeleting = ref(false);
 const deletingId = ref("");
 
@@ -600,9 +615,7 @@ function parseDateTime(value: string, isEnd: boolean): Date {
 
 onMounted(async () => {
 	navBarStore.clearRight();
-	if (canCreateRecord.value) {
+	navBarStore.setCustomRightVisible(canShowActionMenu.value);
-		navBarStore.setRightText("添加", "var(--td-brand-color)", toCreate);
-	}
 	await loadActions();
 	initialized = true;
 	await reloadRecords();
@@ -737,16 +750,6 @@ onUnmounted(() => {
 	}
 }
 
-.export {
-	left: 1rem;
-	right: 1rem;
-	bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
-	z-index: 20;
-	position: fixed;
-	box-shadow: 0 -.375rem 1.25rem rgba(15, 23, 42, .08);
-	backdrop-filter: blur(.75rem);
-}
-
 :global(html.theme-dark) {
 	.registration-record-list {
 
@@ -771,9 +774,5 @@ onUnmounted(() => {
 		}
 	}
 
-	.bottom-bar {
-		background: rgba(15, 23, 42, .88);
-		box-shadow: 0 -.375rem 1.25rem rgba(2, 6, 23, .32);
-	}
 }
 </style>