update action button

src/pages/store/StoreList.vue

@@ -32,21 +32,8 @@
 			<div v-if="!pageResult.list.length" class="empty-block" 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.store.export" theme="default" :loading="isExporting" @click="exportExcel">
-				<template #icon>
-					<t-icon name="download" />
-				</template>
-				导出
-			</t-button>
-			<t-button v-can="permissionCodes.store.create" theme="primary" @click="router.push('/management/stores/create')">
-				<template #icon>
-					<t-icon name="add" />
-				</template>
-				新增
-			</t-button>
-		</div>
 	</div>
+	<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
 </template>
 
 <script setup lang="ts">
@@ -55,6 +42,7 @@ import { Time, Toolkit, type Page, type PageResult, useUserStore } from "timi-we
 import StoreAPI from "@/api/StoreAPI";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { Store } from "@/types/Store";
+import type { NavBarAction } from "@/types/NavBarAction";
 import { permissionCodes } from "@/utils/permission";
 import { getStoreStatusText, getStoreStatusTheme } from "@/utils/store";
 
@@ -65,6 +53,42 @@ defineOptions({
 const router = useRouter();
 const navBarStore = useNavBarStore();
 const userStore = useUserStore();
+const canCreateStore = computed(() => userStore.hasPermissions(permissionCodes.store.create));
+const canSortStore = computed(() => userStore.hasPermissions(permissionCodes.store.update));
+const canExportStore = computed(() => userStore.hasPermissions(permissionCodes.store.export));
+const canShowActionMenu = computed(() => canCreateStore.value || canSortStore.value || canExportStore.value);
+const isExporting = ref(false);
+
+const actionList = computed<NavBarAction[]>(() => {
+	const list: NavBarAction[] = [];
+	if (canCreateStore.value) {
+		list.push({
+			action: toCreate,
+			theme: "primary",
+			icon: "add",
+			key: "create",
+			text: "新增门店"
+		});
+	}
+	if (canSortStore.value) {
+		list.push({
+			action: toSort,
+			icon: "order",
+			key: "sort",
+			text: "排序"
+		});
+	}
+	if (canExportStore.value) {
+		list.push({
+			action: exportExcel,
+			icon: "download",
+			key: "export",
+			loading: isExporting.value,
+			text: "导出 Excel"
+		});
+	}
+	return list;
+});
 
 // ---------- 列表数据 ----------
 
@@ -115,8 +139,6 @@ async function fetch(): Promise<void> {
 
 // ---------- 操作 ----------
 
-const isExporting = ref(false);
-
 async function exportExcel(): Promise<void> {
 	if (isExporting.value) {
 		return;
@@ -142,13 +164,17 @@ async function toEdit(item: Store): Promise<void> {
 	await router.push(`/management/stores/${item.id}`);
 }
 
+async function toCreate(): Promise<void> {
+	await router.push("/management/stores/create");
+}
+
+async function toSort(): Promise<void> {
+	await router.push("/management/stores/sort");
+}
+
 onMounted(async () => {
 	navBarStore.clearRight();
-	if (userStore.hasPermissions(permissionCodes.store.update)) {
+	navBarStore.setCustomRightVisible(canShowActionMenu.value);
-		navBarStore.setRightText("排序", "var(--td-brand-color)", () => {
-			router.push("/management/stores/sort");
-		});
-	}
 	try {
 		await fetch();
 	} catch {
@@ -165,7 +191,7 @@ onUnmounted(() => {
 .store-list {
 	gap: .75rem;
 	display: grid;
-	padding: calc(var(--app-nav-height) + 1rem) 0 6rem 0;
+	padding: calc(var(--app-nav-height) + 1rem) 0 1rem 0;
 
 	.list-wrapper {
 		min-height: 50vh;
@@ -185,15 +211,6 @@ onUnmounted(() => {
 		}
 	}
 
-	.actions {
-		gap: .75rem;
-		left: 1rem;
-		right: 1rem;
-		bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
-		display: grid;
-		position: fixed;
-		grid-template-columns: 1fr 1fr;
-	}
 }
 
 :global(html.theme-dark) {