update action button

src/pages/event/EventEdit.vue

@@ -100,9 +100,8 @@
 				</t-checkbox>
 			</t-checkbox-group>
 		</section>
-		<div class="bottom-actions">
+		<div v-if="!isCreateMode && canDeleteEvent" class="bottom-actions">
 			<t-button
-				v-if="!isCreateMode"
 				v-can="deletePermissionCode"
 				class="delete bg-white"
 				theme="danger"
@@ -113,16 +112,6 @@
 			>
 				删除事件
 			</t-button>
-			<t-button
-				v-can="savePermissionCode"
-				class="save"
-				theme="primary"
-				:loading="isSaving"
-				:disabled="isRemoving"
-				@click="saveEventItem"
-			>
-				保存
-			</t-button>
 		</div>
 	</div>
 	<t-popup v-model="colorPickerVisible" placement="bottom" @opened="handleColorPickerOpened">
@@ -224,6 +213,7 @@ import type { ColorObject } from "tdesign-mobile-vue";
 import { DialogPlugin } from "tdesign-mobile-vue";
 import EventAPI from "@/api/EventAPI";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
+import { useNavBarStore } from "@/store/navBarStore";
 import type { EventItem, EventLimitType, EventStatus, EventValueType, EventValueUnit } from "@/types/EventItem";
 import { getErrorMessage } from "@/utils/error";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
@@ -242,6 +232,7 @@ defineOptions({
 
 const route = useRoute();
 const router = useRouter();
+const navBarStore = useNavBarStore();
 const userStore = useUserStore();
 const currentStoreStore = useCurrentStoreStore();
 const routeId = computed(() => String(route.params.id || ""));
@@ -251,6 +242,7 @@ const isCreateMode = computed(() => !routeId.value);
 const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
 const savePermissionCode = computed(() => isCreateMode.value ? permissionCodes.event.create : permissionCodes.event.update);
 const deletePermissionCode = permissionCodes.event.delete;
+const canDeleteEvent = computed(() => userStore.hasPermissions(deletePermissionCode));
 const pageAccess = computed(() => ({
 	value: [permissionCodes.event.read, permissionCodes.user.read, savePermissionCode.value],
 	mode: "and" as const
@@ -743,17 +735,23 @@ async function fillForm(): Promise<void> {
 }
 
 onMounted(async () => {
+	navBarStore.clearRight();
+	if (userStore.hasPermissions(savePermissionCode.value)) {
+		navBarStore.setRightText("保存", "var(--td-brand-color)", saveEventItem);
+	}
 	try {
 		await fillForm();
 	} catch {
 		Message.error("登记事件加载失败");
 	}
 });
+
+onUnmounted(() => navBarStore.clearRight());
 </script>
 
 <style scoped lang="less">
 .registration-event-edit {
-	padding: calc(var(--app-nav-height) + 1rem) 0 5rem 0;
+	padding: calc(var(--app-nav-height) + 1rem) 0 1rem 0;
 
 	.form {
 		border-radius: .75rem;
@@ -846,19 +844,12 @@ onMounted(async () => {
 
 	.bottom-actions {
 		gap: .75rem;
-		left: 1rem;
+		margin: 1rem;
-		right: 1rem;
 		display: flex;
-		bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
-		position: fixed;
 
 		.delete {
 			flex: 1;
 		}
-
-		.save {
-			flex: 2;
-		}
 	}
 }
 

src/pages/event/EventList.vue

@@ -53,13 +53,8 @@
 			<div v-if="!visibleEventList.length" class="empty-block" v-text="emptyText" />
 			<div v-if="visibleEventList.length" class="load-state" v-text="isNoMore ? '已经到底了' : '上拉加载更多'" />
 		</t-pull-down-refresh>
-		<t-button v-can="permissionCodes.event.create" class="create" theme="primary" @click="toCreate">
-			<template #icon>
-				<t-icon name="add" />
-			</template>
-			新增登记事件
-		</t-button>
 	</div>
+	<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
 </template>
 
 <script setup lang="ts">
@@ -70,6 +65,7 @@ import ManagedUserAPI from "@/api/ManagedUserAPI";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { EventItem, EventLimitType, EventStatus } from "@/types/EventItem";
+import type { NavBarAction } from "@/types/NavBarAction";
 import { getEventValueUnitText } from "@/utils/eventValue";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
 
@@ -84,6 +80,31 @@ const currentStoreStore = useCurrentStoreStore();
 
 const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
 const eventListOptions = computed(() => ({ storeId: currentStoreStore.currentStoreId }));
+const canCreateEvent = computed(() => userStore.hasPermissions(permissionCodes.event.create));
+const canUpdateEventItem = computed(() => userStore.hasPermissions(permissionCodes.event.update));
+const canShowActionMenu = computed(() => canCreateEvent.value || canUpdateEventItem.value);
+
+const actionList = computed<NavBarAction[]>(() => {
+	const list: NavBarAction[] = [];
+	if (canCreateEvent.value) {
+		list.push({
+			action: toCreate,
+			theme: "primary",
+			icon: "add",
+			key: "create",
+			text: "新增登记事件"
+		});
+	}
+	if (canUpdateEventItem.value) {
+		list.push({
+			action: toSort,
+			icon: "order",
+			key: "sort",
+			text: "排序"
+		});
+	}
+	return list;
+});
 
 // ---------- 列表数据 ----------
 
@@ -104,7 +125,6 @@ const pageResult = reactive<PageResult<EventItem>>({
 	total: 0,
 	list: []
 });
-const canUpdateEventItem = computed(() => userStore.hasPermissions(permissionCodes.event.update));
 const visibleEventList = computed(() => pageResult.list);
 const emptyText = computed(() => {
 	if (isLoading.value) {
@@ -249,13 +269,13 @@ async function toCreate(): Promise<void> {
 	});
 }
 
+async function toSort(): Promise<void> {
+	await router.push("/management/registration-events/sort");
+}
+
 onMounted(async () => {
 	navBarStore.clearRight();
-	if (canUpdateEventItem.value) {
+	navBarStore.setCustomRightVisible(canShowActionMenu.value);
-		navBarStore.setRightText("排序", "var(--td-brand-color)", () => {
-			router.push("/management/registration-events/sort");
-		});
-	}
 	try {
 		await loadData();
 	} catch {
@@ -270,7 +290,7 @@ onUnmounted(() => {
 
 <style scoped lang="less">
 .registration-event-list {
-	padding: calc(var(--app-nav-height) + 1rem) 0 6rem 0;
+	padding: calc(var(--app-nav-height) + 1rem) 0 1rem 0;
 
 	.item {
 
@@ -308,12 +328,6 @@ onUnmounted(() => {
 		text-align: center;
 	}
 
-	.create {
-		left: 1rem;
-		right: 1rem;
-		bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
-		position: fixed;
-	}
 }
 
 :global(html.theme-dark) {

src/pages/point/PointAccountDetail.vue

@@ -185,7 +185,7 @@ onMounted(async () => {
 .point-account-detail {
 	gap: 1rem;
 	display: flex;
-	padding: calc(var(--app-nav-height) + 1rem) 0 calc(6rem + env(safe-area-inset-bottom, 0));
+	padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
 	flex-direction: column;
 
 	.account-card {
@@ -228,13 +228,9 @@ onMounted(async () => {
 	}
 
 	.actions {
-		left: 1rem;
-		right: 1rem;
 		gap: .75rem;
-		z-index: 20;
+		margin: 0 1rem;
-		bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
 		display: flex;
-		position: fixed;
 
 		.t-button {
 			flex: 1;

src/pages/point/PointRuleList.vue

@@ -52,13 +52,8 @@
 			</t-cell-group>
 			<div class="load-state" v-text="loadStateText" />
 		</t-pull-down-refresh>
-		<t-button v-can="permissionCodes.pointRule.create" class="create" theme="primary" @click="toCreate">
-			<template #icon>
-				<t-icon name="add" />
-			</template>
-			新增积分规则
-		</t-button>
 	</div>
+	<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
 </template>
 
 <script setup lang="ts">
@@ -68,6 +63,7 @@ import PointAPI from "@/api/PointAPI";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { EventItem } from "@/types/EventItem";
+import type { NavBarAction } from "@/types/NavBarAction";
 import type { PointRule, PointRuleStatus } from "@/types/Point";
 import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
 import { type Page, type PageResult, useUserStore } from "timi-web";
@@ -85,7 +81,32 @@ const currentStoreStore = useCurrentStoreStore();
 // ---------- 筛选 ----------
 
 const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
+const canCreate = computed(() => userStore.hasPermissions(permissionCodes.pointRule.create));
 const canUpdate = computed(() => userStore.hasPermissions(permissionCodes.pointRule.update));
+const canShowActionMenu = computed(() => canCreate.value || canUpdate.value);
+
+const actionList = computed<NavBarAction[]>(() => {
+	const list: NavBarAction[] = [];
+	if (canCreate.value) {
+		list.push({
+			action: toCreate,
+			theme: "primary",
+			icon: "add",
+			key: "create",
+			text: "新增积分规则"
+		});
+	}
+	if (canUpdate.value) {
+		list.push({
+			action: toSort,
+			icon: "order",
+			key: "sort",
+			text: "排序"
+		});
+	}
+	return list;
+});
+
 const statusFilter = ref("ALL");
 const statusOptions = [
 	{ label: "全部状态", value: "ALL" },
@@ -248,6 +269,10 @@ async function toCreate(): Promise<void> {
 	});
 }
 
+async function toSort(): Promise<void> {
+	await router.push("/management/points/rules/sort");
+}
+
 async function toEdit(rule: PointRule): Promise<void> {
 	if (!canUpdate.value || !rule.id) {
 		return;
@@ -267,11 +292,7 @@ async function preparePage(): Promise<void> {
 
 onMounted(async () => {
 	navBarStore.clearRight();
-	if (userStore.hasPermissions(permissionCodes.pointRule.update)) {
+	navBarStore.setCustomRightVisible(canShowActionMenu.value);
-		navBarStore.setRightText("排序", "var(--td-brand-color)", () => {
-			router.push("/management/points/rules/sort");
-		});
-	}
 	try {
 		await preparePage();
 	} catch {
@@ -284,13 +305,13 @@ onUnmounted(() => navBarStore.clearRight());
 
 <style scoped lang="less">
 .point-rule-list {
-	padding: calc(var(--app-nav-height) + 4rem) 0 6rem;
+	padding: calc(var(--app-nav-height) + 4rem) 0 1rem;
 
 	.filter-menu {
 		top: var(--app-nav-height);
 		left: 0;
 		right: 0;
-		z-index: 20;
+		z-index: 10;
 		position: fixed;
 		background: var(--td-bg-color-container);
 	}
@@ -332,12 +353,6 @@ onUnmounted(() => navBarStore.clearRight());
 		}
 	}
 
-	.create {
-		left: 1rem;
-		right: 1rem;
-		bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
-		position: fixed;
-	}
 }
 
 :global(html.theme-dark) {