From 05aad89706232316d4fc584d06551c06341585f2 Mon Sep 17 00:00:00 2001
From: Timi <imyeyu6@qq.com>
Date: Mon, 24 Aug 2026 16:16:43 +0800
Subject: [PATCH] add entrance transition

---
 src/components/CardContainer.vue              |   6 +-
 src/components/CustomerList.vue               |  53 ++++-----
 src/components/EventSelector.vue              |   9 +-
 src/components/PhotoScroller.vue              |   6 +-
 src/components/TagSelector.vue                |   3 +-
 src/directives/entranceTransition.ts          | 105 ++++++++++++++++++
 src/main.ts                                   |   2 +
 src/pages/customer/CustomerDataCharts.vue     |  71 ++++++------
 src/pages/customer/CustomerDetail.vue         |  14 ++-
 src/pages/customer/CustomerEdit.vue           |   7 +-
 src/pages/customer/CustomerList.vue           |  25 +++--
 src/pages/customer/CustomerQrCode.vue         |  10 +-
 src/pages/event/EventDetail.vue               |  98 ++++++++--------
 src/pages/event/EventEdit.vue                 |   4 +-
 src/pages/event/EventList.vue                 |  73 ++++++------
 src/pages/event/EventRecordDetail.vue         |  25 +++--
 src/pages/event/EventRecordEdit.vue           |   7 +-
 src/pages/event/EventRecordList.vue           | 103 ++++++++---------
 src/pages/event/EventRecordRank.vue           |  89 +++++++--------
 src/pages/event/EventSort.vue                 |   5 +-
 src/pages/home/QuickEntryPage.vue             |   4 +-
 src/pages/permission/PermissionList.vue       |  33 +++---
 src/pages/permission/PermissionSettings.vue   |  29 +++--
 .../RoleDelegationPermissionAssign.vue        |  33 +++---
 src/pages/permission/RoleEdit.vue             | 104 +++++++++--------
 src/pages/permission/RoleList.vue             |  37 +++---
 src/pages/permission/RolePermissionAssign.vue |  31 +++---
 src/pages/point/PointAccountDetail.vue        |  11 +-
 src/pages/point/PointAccountList.vue          |  35 +++---
 src/pages/point/PointAdjust.vue               |  18 ++-
 src/pages/point/PointLedgerDetail.vue         |  15 +--
 src/pages/point/PointLedgerList.vue           |  77 ++++++-------
 src/pages/point/PointRuleDetail.vue           |  22 ++--
 src/pages/point/PointRuleEdit.vue             |  45 ++++----
 src/pages/point/PointRuleList.vue             |   3 +-
 src/pages/point/PointRuleSort.vue             |   9 +-
 src/pages/setting/AppSettings.vue             |   4 +-
 src/pages/store/StoreBusinessDayCalendar.vue  |   3 +-
 src/pages/store/StoreDataCharts.vue           |  15 ++-
 src/pages/store/StoreEdit.vue                 |   6 +-
 src/pages/store/StoreList.vue                 |  41 +++----
 src/pages/tabs/HomeTab.vue                    |  20 ++--
 src/pages/tabs/SettingTab.vue                 |  10 +-
 src/pages/tabs/StoreTab.vue                   |  72 ++++++------
 src/pages/tag/TagList.vue                     |   5 +-
 src/pages/user/InviteRegister.vue             |   6 +-
 src/pages/user/LoginIndex.vue                 |  11 +-
 src/pages/user/UserDetail.vue                 |  11 +-
 src/pages/user/UserInvitePoster.vue           |  15 ++-
 src/pages/user/UserList.vue                   |  59 +++++-----
 src/pages/user/UserPassword.vue               |  20 ++--
 src/pages/user/UserProfile.vue                |   5 +-
 src/pages/user/UserRoleAssign.vue             |  29 ++---
 src/styles/global.less                        |  15 +++
 54 files changed, 874 insertions(+), 694 deletions(-)
 create mode 100644 src/directives/entranceTransition.ts

diff --git a/src/components/CardContainer.vue b/src/components/CardContainer.vue
index 4067e14..e0d10d4 100644
--- a/src/components/CardContainer.vue
+++ b/src/components/CardContainer.vue
@@ -45,9 +45,13 @@ defineOptions({
 </script>
 
 <style scoped lang="less">
-	.card-container {
+.card-container {
 	margin: 0 1rem;
 
+	:deep(.t-cell-group--card) {
+		margin: 0;
+	}
+
 	.card-title {
 
 		.title {
diff --git a/src/components/CustomerList.vue b/src/components/CustomerList.vue
index 5864b82..b789179 100644
--- a/src/components/CustomerList.vue
+++ b/src/components/CustomerList.vue
@@ -1,35 +1,36 @@
 <template>
 	<div class="customer-list">
 		<t-cell-group v-if="customerList.length">
-			<t-cell
-				v-for="(item, index) in customerList"
-				:key="item.id || item.code || index"
-				:note="item.code || ''"
-				hover
-				@click="handleSelect(item)"
-			>
-				<template #title>
-					<div class="cell-title">
-						<span v-text="item.name || item.code || '未命名客户'" />
-						<gender-icon :value="item.gender" />
-					</div>
-				</template>
-				<template #description>
-					<telephone-link :value="item.telephone" placeholder="未填写电话" />
-				</template>
-				<template #leftIcon>
-					<div class="left-icon">
+				<t-cell
+					v-entrance-transition="index * 30"
+					v-for="(item, index) in customerList"
+					:key="item.id || item.code || index"
+					:note="item.code || ''"
+					hover
+					@click="handleSelect(item)"
+				>
+					<template #title>
+						<div class="cell-title">
+							<span v-text="item.name || item.code || '未命名客户'" />
+							<gender-icon :value="item.gender" />
+						</div>
+					</template>
+					<template #description>
+						<telephone-link :value="item.telephone" placeholder="未填写电话" />
+					</template>
+					<template #leftIcon>
+						<div class="left-icon">
 						<span v-if="selectable" class="check" :class="{selected: isSelected(item)}">
 							<t-icon v-if="isSelected(item)" name="check" />
 						</span>
-						<t-image v-if="getCustomerPhotoURL(item, 64)" :src="getCustomerPhotoURL(item, 64)" :alt="item.name" fit="cover" class="avatar" />
-						<div v-else class="avatar fallback" v-text="(item.name || item.code || '客').slice(0, 1)" />
-					</div>
-				</template>
-				<template v-if="removable" #rightIcon>
-					<t-button theme="danger" size="extra-small" @click.stop="handleRemove(item)">移除</t-button>
-				</template>
-			</t-cell>
+							<t-image v-if="getCustomerPhotoURL(item, 64)" :src="getCustomerPhotoURL(item, 64)" :alt="item.name" fit="cover" class="avatar" />
+							<div v-else class="avatar fallback" v-text="(item.name || item.code || '客').slice(0, 1)" />
+						</div>
+					</template>
+					<template v-if="removable" #rightIcon>
+						<t-button theme="danger" size="extra-small" @click.stop="handleRemove(item)">移除</t-button>
+					</template>
+				</t-cell>
 		</t-cell-group>
 		<div v-else class="empty-block" v-text="emptyText" />
 	</div>
diff --git a/src/components/EventSelector.vue b/src/components/EventSelector.vue
index 88cb31b..5fbd0f1 100644
--- a/src/components/EventSelector.vue
+++ b/src/components/EventSelector.vue
@@ -1,9 +1,9 @@
 <template>
-	<div class="registration-event-selector">
+	<div class="event-selector">
 		<p v-if="props.label" class="t-form__label" :class="{required: props.requiredMark}" v-text="props.label" />
 		<div v-if="props.eventList.length" class="group" role="group">
 			<button
-				v-for="item in props.eventList"
+				v-for="(item, index) in props.eventList"
 				:key="item.id || item.name"
 				type="button"
 				class="item bg-white"
@@ -11,6 +11,7 @@
 				:title="item.name"
 				:disabled="props.disabled || !item.id"
 				:aria-pressed="isSelected(item.id)"
+				v-entrance-transition="index * 30"
 				@click="toggleEvent(item.id)"
 			>
 				<span
@@ -62,7 +63,7 @@ const toggleEvent = (eventId?: string) => {
 </script>
 
 <style scoped lang="less">
-.registration-event-selector {
+.event-selector {
 	width: 100%;
 	display: grid;
 	gap: .5rem;
@@ -145,7 +146,7 @@ const toggleEvent = (eventId?: string) => {
 }
 
 :global(html.theme-dark) {
-	.registration-event-selector {
+	.event-selector {
 		.t-form__label {
 			color: #94a3b8;
 		}
diff --git a/src/components/PhotoScroller.vue b/src/components/PhotoScroller.vue
index ee409ec..444b401 100644
--- a/src/components/PhotoScroller.vue
+++ b/src/components/PhotoScroller.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="photo-section">
+	<div class="photo-scroller">
 		<div class="t-form__label" v-text="title" />
 		<div class="photo-shell" :class="{ 'without-add': !showAdd }">
 			<div class="items">
@@ -189,7 +189,7 @@ function openPhotoViewer(index: number): void {
 </script>
 
 <style scoped lang="less">
-.photo-section {
+.photo-scroller {
 	gap: .375rem;
 	width: 100%;
 	display: grid;
@@ -314,7 +314,7 @@ function openPhotoViewer(index: number): void {
 }
 
 :global(html.theme-dark) {
-	.photo-section {
+	.photo-scroller {
 		.field-title,
 		.photo-empty {
 			color: #94a3b8;
diff --git a/src/components/TagSelector.vue b/src/components/TagSelector.vue
index 1353202..6abe840 100644
--- a/src/components/TagSelector.vue
+++ b/src/components/TagSelector.vue
@@ -35,12 +35,13 @@
 			</div>
 			<div class="list">
 				<t-tag
-					v-for="item in visibleTagList"
+					v-for="(item, index) in visibleTagList"
 					:key="item.id"
 					class="item"
 					:theme="isSelected(item) ? 'primary' : 'default'"
 					size="large"
 					:variant="isSelected(item) ? 'dark' : 'light-outline'"
+					v-entrance-transition="index * 10"
 					@click="toggleTag(item)"
 				>
 					<span v-text="getTagName(item)" />
diff --git a/src/directives/entranceTransition.ts b/src/directives/entranceTransition.ts
new file mode 100644
index 0000000..6efcad5
--- /dev/null
+++ b/src/directives/entranceTransition.ts
@@ -0,0 +1,105 @@
+import type { ObjectDirective } from "vue";
+
+const ENTRANCE_DURATION = 400;
+const ACTIVE_CLASS = "entrance-fade-up-enter-active";
+const FROM_CLASS = "entrance-fade-up-enter-from";
+const TO_CLASS = "entrance-fade-up-enter-to";
+const STATE_KEY = Symbol("entrance-transition-state");
+
+type EntranceTransitionValue = number | string | { delay?: number | string } | undefined;
+
+interface EntranceTransitionState {
+	frameId?: number;
+	timerId?: number;
+	delay: number;
+}
+
+type EntranceTransitionElement = HTMLElement & {
+	[STATE_KEY]?: EntranceTransitionState;
+};
+
+function getDelay(value: EntranceTransitionValue): number {
+	const rawDelay = typeof value === "object" && value !== null ? value.delay : value;
+	const delay = Number(rawDelay ?? 0);
+	return Number.isFinite(delay) ? Math.max(0, delay) : 0;
+}
+
+function setDelay(element: EntranceTransitionElement, delay: number): void {
+	element.style.setProperty("--entrance-delay", `${delay}ms`);
+}
+
+function cleanup(element: EntranceTransitionElement): void {
+	const state = element[STATE_KEY];
+	if (!state) {
+		return;
+	}
+
+	if (state.frameId !== undefined) {
+		window.cancelAnimationFrame(state.frameId);
+	}
+	if (state.timerId !== undefined) {
+		window.clearTimeout(state.timerId);
+	}
+
+	element.classList.remove(ACTIVE_CLASS, FROM_CLASS, TO_CLASS);
+	element.style.removeProperty("--entrance-delay");
+	delete element[STATE_KEY];
+}
+
+const vEntranceTransition: ObjectDirective<HTMLElement, EntranceTransitionValue> = {
+	beforeMount(element, binding) {
+		if (!(element instanceof HTMLElement)) {
+			return;
+		}
+
+		const target = element as EntranceTransitionElement;
+		const delay = getDelay(binding.value);
+		target[STATE_KEY] = { delay };
+		setDelay(target, delay);
+		target.classList.add(ACTIVE_CLASS, FROM_CLASS);
+	},
+
+	mounted(element) {
+		if (!(element instanceof HTMLElement)) {
+			return;
+		}
+
+		const target = element as EntranceTransitionElement;
+		const state = target[STATE_KEY];
+		if (!state) {
+			return;
+		}
+
+		state.frameId = window.requestAnimationFrame(() => {
+			state.frameId = window.requestAnimationFrame(() => {
+				state.frameId = undefined;
+				target.classList.remove(FROM_CLASS);
+				target.classList.add(TO_CLASS);
+				state.timerId = window.setTimeout(() => cleanup(target), ENTRANCE_DURATION + state.delay);
+			});
+		});
+	},
+
+	updated(element, binding) {
+		if (!(element instanceof HTMLElement) || binding.value === binding.oldValue) {
+			return;
+		}
+
+		const target = element as EntranceTransitionElement;
+		const state = target[STATE_KEY];
+		if (!state) {
+			return;
+		}
+
+		state.delay = getDelay(binding.value);
+		setDelay(target, state.delay);
+	},
+
+	beforeUnmount(element) {
+		if (element instanceof HTMLElement) {
+			cleanup(element as EntranceTransitionElement);
+		}
+	}
+};
+
+export default vEntranceTransition;
diff --git a/src/main.ts b/src/main.ts
index 5454470..8f79755 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -12,6 +12,7 @@ import "@/styles/tdesign-custom.css";
 import "@/styles/global.less";
 import { type ApiResponse, configureUserStore, Network, useUserStore, VCan, VRole } from "timi-web";
 import { Message } from "@/utils/message";
+import vEntranceTransition from "@/directives/entranceTransition";
 
 export const pinia = createPinia();
 const apiBaseURL = import.meta.env.VITE_API_BASE_URL as string | undefined;
@@ -46,6 +47,7 @@ async function bootstrap(): Promise<void> {
 	app.use(pinia);
 	app.directive("can", VCan);
 	app.directive("role", VRole);
+	app.directive("entrance-transition", vEntranceTransition);
 
 	const userStore = useUserStore(pinia);
 	const currentStoreStore = useCurrentStoreStore(pinia);
diff --git a/src/pages/customer/CustomerDataCharts.vue b/src/pages/customer/CustomerDataCharts.vue
index a9ef10b..3f23c4a 100644
--- a/src/pages/customer/CustomerDataCharts.vue
+++ b/src/pages/customer/CustomerDataCharts.vue
@@ -25,40 +25,45 @@
 				/>
 			</div>
 		</div>
-		<customer-profile-card class="customer" :customer="selectedCustomer" />
+		<customer-profile-card v-entrance-transition class="customer" :customer="selectedCustomer" />
 		<div class="charts">
-			<customer-chart-summary
-				v-if="selectedCustomer"
-				:customer="selectedCustomer"
-				:month-cursor="monthCursor"
-				:selected-event-id-list="selectedEventIdList"
-			/>
-			<customer-event-record-calendar-section
-				v-if="selectedCustomer"
-				v-model="monthCursor"
-				v-model:selected-event-id-list="selectedEventIdList"
-				:customer-id="selectedCustomer.id || ''"
-				:customer-name="selectedCustomer.name"
-				:store-id="selectedCustomer.storeId"
-				@list="toEventRecordList"
-			/>
-			<customer-record-trend-chart
-				v-if="selectedCustomer"
-				:customer-id="selectedCustomer.id || ''"
-				:date-text-list="chartDateTextList"
-				:selected-event-id-list="selectedEventIdList"
-			/>
-			<customer-event-structure-chart
-				v-if="selectedCustomer"
-				:customer-id="selectedCustomer.id || ''"
-				:date-text-list="monthDateTextList"
-				:selected-event-id-list="selectedEventIdList"
-			/>
-			<customer-selector
-				v-model="selectedCustomerId"
-				v-model:visible="selectorVisible"
-				@change="handleCustomerSelected"
-			/>
+				<customer-chart-summary
+					v-entrance-transition="70"
+					v-if="selectedCustomer"
+					:customer="selectedCustomer"
+					:month-cursor="monthCursor"
+					:selected-event-id-list="selectedEventIdList"
+				/>
+				<customer-event-record-calendar-section
+					v-entrance-transition="140"
+					v-if="selectedCustomer"
+					v-model="monthCursor"
+					v-model:selected-event-id-list="selectedEventIdList"
+					:customer-id="selectedCustomer.id || ''"
+					:customer-name="selectedCustomer.name"
+					:store-id="selectedCustomer.storeId"
+					@list="toEventRecordList"
+				/>
+				<customer-record-trend-chart
+					v-entrance-transition="210"
+					v-if="selectedCustomer"
+					:customer-id="selectedCustomer.id || ''"
+					:date-text-list="chartDateTextList"
+					:selected-event-id-list="selectedEventIdList"
+				/>
+				<customer-event-structure-chart
+					v-entrance-transition="280"
+					v-if="selectedCustomer"
+					:customer-id="selectedCustomer.id || ''"
+					:date-text-list="monthDateTextList"
+					:selected-event-id-list="selectedEventIdList"
+				/>
+				<customer-selector
+					v-entrance-transition="350"
+					v-model="selectedCustomerId"
+					v-model:visible="selectorVisible"
+					@change="handleCustomerSelected"
+				/>
 		</div>
 	</div>
 </template>
diff --git a/src/pages/customer/CustomerDetail.vue b/src/pages/customer/CustomerDetail.vue
index effe499..2e749cf 100644
--- a/src/pages/customer/CustomerDetail.vue
+++ b/src/pages/customer/CustomerDetail.vue
@@ -1,10 +1,11 @@
 <template>
 	<div v-can="permissionCodes.customer.read" class="customer-detail">
 		<customer-profile-card
+			v-entrance-transition
 			class="customer"
 			:customer="customer"
 		/>
-		<t-cell-group v-if="customer" class="info" theme="card">
+		<t-cell-group v-entrance-transition="70" v-if="customer" class="info" theme="card">
 			<t-cell title="出生日期">
 				<span
 					v-if="isLunarBirthdate"
@@ -43,9 +44,10 @@
 			v-if="customer && canReadTag"
 			:editable="canApplyTag"
 			:tag-list="customerTagList"
+			v-entrance-transition="140"
 			@edit="openTagSelector"
 		/>
-		<t-cell-group v-if="customer" theme="card">
+		<t-cell-group v-if="customer" theme="card" v-entrance-transition="210">
 			<t-cell v-if="canReadStat" title="客户数据图表" arrow @click="toCustomerDataCharts">
 				<template #left-icon>
 					<t-icon name="chart" />
@@ -63,13 +65,19 @@
 				</template>
 			</t-cell>
 		</t-cell-group>
-		<t-cell-group v-if="inviter" :title="`由 ${inviter.name} 邀请`" theme="card">
+		<t-cell-group
+			v-if="inviter"
+			:title="`由 ${inviter.name} 邀请`"
+			theme="card"
+			v-entrance-transition="280"
+		>
 			<customer-profile-card :customer="inviter" @click="toCustomerDetail(inviter)"/>
 		</t-cell-group>
 		<t-cell-group v-if="customer" theme="card">
 			<t-cell title="邀请客户" :note="inviteeCountText" arrow @click="toInviteeList" />
 		</t-cell-group>
 		<t-button
+			v-if="customer"
 			v-can="permissionCodes.customer.delete"
 			class="delete-action"
 			theme="danger"
diff --git a/src/pages/customer/CustomerEdit.vue b/src/pages/customer/CustomerEdit.vue
index 32ca9cb..b351785 100644
--- a/src/pages/customer/CustomerEdit.vue
+++ b/src/pages/customer/CustomerEdit.vue
@@ -1,6 +1,6 @@
 <template>
 	<div v-can="savePermissionCode" class="customer-edit">
-		<t-form class="form" label-align="left" label-width="6rem">
+		<t-form class="form" label-align="left" label-width="6rem" v-entrance-transition>
 			<t-form-item label="客户编码">
 				<t-input
 					v-model.trim="formData.code"
@@ -112,9 +112,10 @@
 			class="tag-card"
 			:editable="canEditTag"
 			:tag-list="customerTagList"
+			v-entrance-transition="70"
 			@edit="openTagSelector"
 		/>
-		<t-form class="form" label-align="left" label-width="3rem">
+		<t-form class="form" label-align="left" label-width="3rem" v-entrance-transition="140">
 			<t-form-item label="住址">
 				<t-textarea
 					class="textarea"
@@ -162,7 +163,7 @@
 	<bottom-popup
 		v-model="bodyAreaPickerVisible"
 		title="选择调理部位"
-		height="38rem"
+		height="32rem"
 		@left-button-click="cancelBodyAreaPicker"
 		@right-button-click="confirmBodyAreaPicker"
 	>
diff --git a/src/pages/customer/CustomerList.vue b/src/pages/customer/CustomerList.vue
index 7ce0306..7680cd8 100644
--- a/src/pages/customer/CustomerList.vue
+++ b/src/pages/customer/CustomerList.vue
@@ -38,18 +38,19 @@
 			@scrolltolower="fetch"
 		>
 			<t-cell-group class="items" theme="card">
-				<customer-cell
-					class="item"
-					v-for="(item, index) in pageResult.list"
-					:key="item.id || item.code || index"
-					:customer="item"
-					arrow
-					@click="router.push(`/management/customers/${item.id}`)"
-				>
-					<template #description>
-						<telephone-link :value="item.telephone" />
-					</template>
-				</customer-cell>
+					<customer-cell
+						v-entrance-transition="index * 30"
+						v-for="(item, index) in pageResult.list"
+						:key="item.id || item.code || index"
+						class="item"
+						:customer="item"
+						arrow
+						@click="router.push(`/management/customers/${item.id}`)"
+					>
+						<template #description>
+							<telephone-link :value="item.telephone" />
+						</template>
+					</customer-cell>
 			</t-cell-group>
 			<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 ? '已经到底了' : '上拉加载更多'" />
diff --git a/src/pages/customer/CustomerQrCode.vue b/src/pages/customer/CustomerQrCode.vue
index cb8fafe..3fa788e 100644
--- a/src/pages/customer/CustomerQrCode.vue
+++ b/src/pages/customer/CustomerQrCode.vue
@@ -1,6 +1,6 @@
 <template>
 	<div v-can="permissionCodes.qrCode.create" class="qr-page">
-		<t-form class="form" label-align="left">
+		<t-form class="form" label-align="left" v-entrance-transition>
 			<t-form-item label="编码前缀">
 				<t-input v-model.trim="formModel.prefix" placeholder="如 GAO" borderless />
 			</t-form-item>
@@ -32,11 +32,11 @@
 				/>
 			</t-form-item>
 		</t-form>
-		<t-cell-group theme="card">
+		<t-cell-group theme="card" v-entrance-transition="70">
 			<t-cell title="最终起始编码" :note="finalStartCode" />
 			<t-cell title="最终结束编码" :note="finalEndCode" />
 		</t-cell-group>
-		<div class="actions">
+		<div class="actions" v-entrance-transition="140">
 			<t-button
 				class="bg-white"
 				theme="primary"
@@ -54,8 +54,8 @@
 				<span v-text="downloadText" />
 			</t-button>
 		</div>
-		<div class="actions orange tips">微信内可能无法发起打印或批量下载，建议使用默认浏览器打开</div>
-		<section class="preview">
+		<div class="actions orange tips" v-entrance-transition="140">微信内可能无法发起打印或批量下载，建议使用默认浏览器打开</div>
+		<section class="preview" v-entrance-transition="210">
 			<div class="header">
 				<h2 class="title">预览</h2>
 				<p class="tips" v-text="previewSummary" />
diff --git a/src/pages/event/EventDetail.vue b/src/pages/event/EventDetail.vue
index 249406c..1ab79c8 100644
--- a/src/pages/event/EventDetail.vue
+++ b/src/pages/event/EventDetail.vue
@@ -3,59 +3,55 @@
 		v-can="permissionCodes.event.read"
 		class="registration-event-detail"
 	>
-		<section v-if="event" class="event-header">
-			<div class="color" :style="{ background: event.color || defaultColor }" />
-			<div class="header-content">
-				<div class="title-row">
-					<h2 v-text="event.name || '未命名事件'" />
-					<t-tag :theme="getStatusTheme(event.status)" variant="light-outline" :content="getStatusText(event.status)" />
+			<div v-entrance-transition v-if="event" class="event-header">
+				<div class="color" :style="{ background: event.color || defaultColor }" />
+				<div class="header-content">
+					<div class="title-row">
+						<h2 v-text="event.name || '未命名事件'" />
+						<t-tag :theme="getStatusTheme(event.status)" variant="light-outline" :content="getStatusText(event.status)" />
+					</div>
+					<div class="description" v-text="Text.display(event.description)" />
 				</div>
-				<div class="description" v-text="Text.display(event.description)" />
 			</div>
-		</section>
-
-		<t-cell-group v-if="event" title="基本信息" theme="card">
-			<t-cell title="所属门店" :note="storeName" />
-			<t-cell title="事件颜色">
-				<template #note>
-					<div class="color-note">
-						<span class="color-dot" :style="{ background: event.color || defaultColor }" />
-						<span v-text="(event.color || defaultColor).toLowerCase()" />
-					</div>
-				</template>
-			</t-cell>
-			<t-cell title="说明" :note="Text.display(event.description)" />
-			<t-cell title="可登记角色">
-				<template #note>
-					<div v-if="event.roleCodeList?.length" class="tag-list">
-						<t-tag
-							v-for="roleCode in event.roleCodeList"
-							:key="roleCode"
-							theme="primary"
-							variant="light-outline"
-							:content="getRoleName(roleCode)"
-						/>
-					</div>
-					<span v-else>未配置</span>
-				</template>
-			</t-cell>
-		</t-cell-group>
-
-		<t-cell-group v-if="event" title="登记配置" theme="card">
-			<t-cell title="数值类型" :note="getValueTypeText(event.valueType)" />
-			<t-cell v-if="event.valueType === 'NUMBER'" title="数值单位" :note="getValueUnitText(event.valueUnit)" />
-			<t-cell v-if="event.valueType === 'NUMBER'" title="登记必填数值" :note="event.requireValue ? '是' : '否'" />
-			<t-cell title="需要拍照" :note="event.requirePhoto ? '是' : '否'" />
-			<t-cell title="次数约束" :note="getLimitText(event)" />
-		</t-cell-group>
-
-		<t-cell-group v-if="event" title="生效时间" theme="card">
-			<t-cell title="起始时间" :note="formatDate(event.beginAt)" />
-			<t-cell title="终止时间" :note="formatDate(event.endAt)" />
-			<t-cell title="创建时间" :note="formatDate(event.createdAt, '未知时间')" />
-			<t-cell title="更新时间" :note="formatDate(event.updatedAt, '未知时间')" />
-		</t-cell-group>
-
+			<t-cell-group v-entrance-transition="70" v-if="event" title="基本信息" theme="card">
+				<t-cell title="所属门店" :note="storeName" />
+				<t-cell title="事件颜色">
+					<template #note>
+						<div class="color-note">
+							<span class="color-dot" :style="{ background: event.color || defaultColor }" />
+							<span v-text="(event.color || defaultColor).toLowerCase()" />
+						</div>
+					</template>
+				</t-cell>
+				<t-cell title="说明" :note="Text.display(event.description)" />
+				<t-cell title="可登记角色">
+					<template #note>
+						<div v-if="event.roleCodeList?.length" class="tag-list">
+							<t-tag
+								v-for="roleCode in event.roleCodeList"
+								:key="roleCode"
+								theme="primary"
+								variant="light-outline"
+								:content="getRoleName(roleCode)"
+							/>
+						</div>
+						<span v-else>未配置</span>
+					</template>
+				</t-cell>
+			</t-cell-group>
+			<t-cell-group v-entrance-transition="140" v-if="event" title="登记配置" theme="card">
+				<t-cell title="数值类型" :note="getValueTypeText(event.valueType)" />
+				<t-cell v-if="event.valueType === 'NUMBER'" title="数值单位" :note="getValueUnitText(event.valueUnit)" />
+				<t-cell v-if="event.valueType === 'NUMBER'" title="登记必填数值" :note="event.requireValue ? '是' : '否'" />
+				<t-cell title="需要拍照" :note="event.requirePhoto ? '是' : '否'" />
+				<t-cell title="次数约束" :note="getLimitText(event)" />
+			</t-cell-group>
+			<t-cell-group v-entrance-transition="210" v-if="event" title="生效时间" theme="card">
+				<t-cell title="起始时间" :note="formatDate(event.beginAt)" />
+				<t-cell title="终止时间" :note="formatDate(event.endAt)" />
+				<t-cell title="创建时间" :note="formatDate(event.createdAt, '未知时间')" />
+				<t-cell title="更新时间" :note="formatDate(event.updatedAt, '未知时间')" />
+			</t-cell-group>
 		<t-empty v-else :description="isLoading ? '正在加载登记事件' : '登记事件不存在'" />
 	</div>
 </template>
diff --git a/src/pages/event/EventEdit.vue b/src/pages/event/EventEdit.vue
index 424fbe2..be9da3e 100644
--- a/src/pages/event/EventEdit.vue
+++ b/src/pages/event/EventEdit.vue
@@ -1,6 +1,6 @@
 <template>
 	<div v-can="pageAccess" class="registration-event-edit">
-		<t-form class="form" label-align="left" label-width="7rem">
+		<t-form class="form" label-align="left" label-width="7rem" v-entrance-transition>
 			<t-form-item label="颜色">
 				<t-button
 					size="extra-small"
@@ -83,7 +83,7 @@
 				<div class="picker-text" v-text="getStatusText(formModel.status)" />
 			</t-form-item>
 		</t-form>
-		<section class="roles">
+		<section class="roles" v-entrance-transition="70">
 			<div class="title">
 				<span>可登记角色</span>
 				<span class="hint">必须至少选择一个角色，上级角色拥有子级角色可登记事件的登记权限</span>
diff --git a/src/pages/event/EventList.vue b/src/pages/event/EventList.vue
index 5fa3f57..49d22fa 100644
--- a/src/pages/event/EventList.vue
+++ b/src/pages/event/EventList.vue
@@ -10,45 +10,46 @@
 			@scrolltolower="fetch"
 		>
 			<t-cell-group theme="card">
-				<t-cell
-					class="item"
-					v-for="item in visibleEventList"
-					:key="item.id"
-					:arrow="!!item.id"
-					:hover="!!item.id"
-					@click="toEventItem(item)"
-				>
-					<template #title>
-						<div class="header">
-							<div class="color" :style="{ background: item.color || defaultColor }" />
-							<div class="title" v-text="item.name || '未命名事件'" />
-							<t-tag
-								class="status"
-								:theme="getStatusTag(item).theme"
-								variant="outline"
-								:content="getStatusTag(item).text"
-							/>
-							<t-tag v-if="item.requirePhoto" theme="warning" variant="outline">需拍照</t-tag>
-						</div>
-					</template>
-					<template #description>
-						<div class="description">
-							<div class="line">
-								<span>可登记角色</span>
+					<t-cell
+						v-entrance-transition="index * 30"
+						v-for="(item, index) in visibleEventList"
+						:key="item.id"
+						class="item"
+						:arrow="!!item.id"
+						:hover="!!item.id"
+						@click="toEventItem(item)"
+					>
+						<template #title>
+							<div class="header">
+								<div class="color" :style="{ background: item.color || defaultColor }" />
+								<div class="title" v-text="item.name || '未命名事件'" />
 								<t-tag
-									v-for="roleCode in item.roleCodeList"
-									:key="roleCode"
-									theme="primary"
-									variant="light-outline"
-									:content="getRoleName(roleCode)"
+									class="status"
+									:theme="getStatusTag(item).theme"
+									variant="outline"
+									:content="getStatusTag(item).text"
 								/>
-								<span v-if="!(item.roleCodeList || []).length" class="muted" v-text="'未配置'" />
+								<t-tag v-if="item.requirePhoto" theme="warning" variant="outline">需拍照</t-tag>
 							</div>
-							<div class="line" v-text="getLimitText(item)" />
-							<div class="line" v-text="getValueDefinitionText(item)" />
-						</div>
-					</template>
-				</t-cell>
+						</template>
+						<template #description>
+							<div class="description">
+								<div class="line">
+									<span>可登记角色</span>
+									<t-tag
+										v-for="roleCode in item.roleCodeList"
+										:key="roleCode"
+										theme="primary"
+										variant="light-outline"
+										:content="getRoleName(roleCode)"
+									/>
+									<span v-if="!(item.roleCodeList || []).length" class="muted" v-text="'未配置'" />
+								</div>
+								<div class="line" v-text="getLimitText(item)" />
+								<div class="line" v-text="getValueDefinitionText(item)" />
+							</div>
+						</template>
+					</t-cell>
 			</t-cell-group>
 			<div v-if="!visibleEventList.length" class="empty-block" v-text="emptyText" />
 			<div v-if="visibleEventList.length" class="load-state" v-text="isNoMore ? '已经到底了' : '上拉加载更多'" />
diff --git a/src/pages/event/EventRecordDetail.vue b/src/pages/event/EventRecordDetail.vue
index eb154d4..fb4aa1a 100644
--- a/src/pages/event/EventRecordDetail.vue
+++ b/src/pages/event/EventRecordDetail.vue
@@ -1,12 +1,13 @@
 <template>
 	<div v-can="permissionCodes.eventRecord.read" class="registration-record-detail">
 		<customer-profile-card
+			v-entrance-transition
 			v-if="record?.customer"
 			class="customer-profile"
 			:customer="record.customer"
 			@click="toCustomerDetail"
 		/>
-		<t-cell-group v-if="record" title="登记信息" theme="card">
+		<t-cell-group v-entrance-transition="70" v-if="record" title="登记信息" theme="card">
 			<t-cell title="登记事件" :note="record.event?.name || '未知事件'" />
 			<t-cell v-if="record.numberValue !== undefined && record.numberValue !== null" title="事件数值" :note="getNumberValueText(record)" />
 			<t-cell v-if="record.pointValue !== undefined && record.pointValue !== null" title="提交积分值" :note="getPointValueText(record.pointValue)" />
@@ -16,15 +17,16 @@
 			<t-cell title="客户编码" :note="Text.display(record.customer?.code)" />
 			<t-cell title="备注" :note="Text.display(record.remark)" />
 		</t-cell-group>
-		<section v-if="record" class="photo-panel">
-			<photo-scroller
-				:model-value="recordPhotoList"
-				:photo-items="recordPhotoItemList"
-				:show-add="false"
-				:show-remove="false"
-				title="登记照片"
-			/>
-		</section>
+		<photo-scroller
+			v-entrance-transition="140"
+			v-if="record"
+			class="photo-panel"
+			:model-value="recordPhotoList"
+			:photo-items="recordPhotoItemList"
+			:show-add="false"
+			:show-remove="false"
+			title="登记照片"
+		/>
 		<t-empty v-else :description="isLoading ? '正在加载登记事件记录' : '登记事件记录不存在'" />
 	</div>
 </template>
@@ -141,8 +143,9 @@ onUnmounted(() => {
 	}
 
 	.photo-panel {
-		padding: 1rem;
+		width: calc(100% - 2rem);
 		margin: 0 1rem;
+		padding: 1rem;
 		background: rgba(255, 255, 255, .92);
 		box-shadow: var(--td-shadow-1);
 		border-radius: 1.4rem;
diff --git a/src/pages/event/EventRecordEdit.vue b/src/pages/event/EventRecordEdit.vue
index dbab570..3852ba8 100644
--- a/src/pages/event/EventRecordEdit.vue
+++ b/src/pages/event/EventRecordEdit.vue
@@ -1,6 +1,6 @@
 <template>
 	<div v-can="pageAccess" class="registration-record-edit">
-		<t-form class="form" label-align="left">
+		<t-form class="form" label-align="left" v-entrance-transition>
 			<t-form-item label="客户" required-mark>
 				<t-input
 					:model-value="customerDisplayText"
@@ -42,10 +42,11 @@
 				v-if="showSelectedCustomerProfile"
 				class="customer-profile"
 				:customer="selectedCustomer"
+				v-entrance-transition
 			/>
 			<event-selector
 				v-model="selectedEventIdList"
-				class="registration-event-selector"
+				class="event-selector"
 				:event-list="eventList"
 				:disabled="isEditMode"
 				required-mark
@@ -804,7 +805,7 @@ watch(customerCode, async (value) => {
 			margin: 1rem;
 		}
 
-		.registration-event-selector {
+		.event-selector {
 			padding: 0 1rem;
 			margin-top: 1rem;
 		}
diff --git a/src/pages/event/EventRecordList.vue b/src/pages/event/EventRecordList.vue
index 36dfa20..39bcd25 100644
--- a/src/pages/event/EventRecordList.vue
+++ b/src/pages/event/EventRecordList.vue
@@ -33,64 +33,65 @@
 			@scrolltolower="loadRecords"
 		>
 			<div class="list-wrapper">
-				<t-cell-group class="summary" theme="card">
-					<t-cell
-						title="开始时间"
-						:note="dateRange[0] || '-'"
-						arrow
-						@click="startVisible = true"
-					/>
-					<t-cell
-						title="结束时间"
-						:note="dateRange[1] || '-'"
-						arrow
-						@click="endVisible = true"
-					/>
-					<t-cell title="事件" :note="eventFilterLabel" />
-					<t-cell title="数据量" :note="summaryTotalText" />
-					<t-cell v-if="summaryNumberValueText" title="数值合计" :note="summaryNumberValueText" />
-				</t-cell-group>
+					<t-cell-group v-entrance-transition class="summary" theme="card">
+						<t-cell
+							title="开始时间"
+							:note="dateRange[0] || '-'"
+							arrow
+							@click="startVisible = true"
+						/>
+						<t-cell
+							title="结束时间"
+							:note="dateRange[1] || '-'"
+							arrow
+							@click="endVisible = true"
+						/>
+						<t-cell title="事件" :note="eventFilterLabel" />
+						<t-cell title="数据量" :note="summaryTotalText" />
+						<t-cell v-if="summaryNumberValueText" title="数值合计" :note="summaryNumberValueText" />
+					</t-cell-group>
 				<t-cell-group
 					v-if="pageResult.list.length"
 					class="record-list"
 					theme="card"
 				>
-					<t-swipe-cell
-						v-for="item in pageResult.list"
-						:key="item.id"
-						class="item"
-					>
-						<t-cell
-							class="cell"
-							:title="getRecordEventName(item)"
-							:description="getRecordCustomerName(item)"
-							:note="getRecordRegisteredAt(item)"
-							arrow
-							hover
-							@click="toDetail(item.id || '')"
+						<t-swipe-cell
+							v-entrance-transition="index * 30"
+							v-for="(item, index) in pageResult.list"
+							:key="item.id"
+							class="item"
 						>
-							<template #leftIcon>
-								<t-image
-									v-if="getRecordPhotoURL(item)"
-									:src="getRecordPhotoURL(item)"
-									:alt="getRecordEventName(item)"
-									fit="cover"
-									class="avatar"
-								/>
-								<div v-else class="avatar fallback" v-text="getRecordCustomerInitial(item)" />
-							</template>
-						</t-cell>
-						<template v-if="canDeleteRecord" #right>
-							<t-button
-								class="delete"
-								theme="danger"
-								:loading="isDeleting && deletingId === item.id"
-								@click.stop="confirmRemoveRecord(item)"
+							<t-cell
+								class="cell"
+								:title="getRecordEventName(item)"
+								:description="getRecordCustomerName(item)"
+								:note="getRecordRegisteredAt(item)"
+								arrow
+								hover
+								@click="toDetail(item.id || '')"
 							>
-								删除
-							</t-button>
-						</template>
-					</t-swipe-cell>
+								<template #leftIcon>
+									<t-image
+										v-if="getRecordPhotoURL(item)"
+										:src="getRecordPhotoURL(item)"
+										:alt="getRecordEventName(item)"
+										fit="cover"
+										class="avatar"
+									/>
+									<div v-else class="avatar fallback" v-text="getRecordCustomerInitial(item)" />
+								</template>
+							</t-cell>
+							<template v-if="canDeleteRecord" #right>
+								<t-button
+									class="delete"
+									theme="danger"
+									:loading="isDeleting && deletingId === item.id"
+									@click.stop="confirmRemoveRecord(item)"
+								>
+									删除
+								</t-button>
+							</template>
+						</t-swipe-cell>
 				</t-cell-group>
 				<div v-else class="load-state" v-text="isLoading ? '正在加载登记事件记录' : '暂无登记事件记录'" />
 				<div v-if="pageResult.list.length" class="load-state" v-text="loadStateText" />
diff --git a/src/pages/event/EventRecordRank.vue b/src/pages/event/EventRecordRank.vue
index 1784996..0cf70b4 100644
--- a/src/pages/event/EventRecordRank.vue
+++ b/src/pages/event/EventRecordRank.vue
@@ -47,55 +47,56 @@
 				class="list"
 				theme="card"
 			>
-				<customer-cell
-					class="item"
-					:class="{ 'in-top3': index < 3}"
-					v-for="(item, index) in pageResult.list"
-					:key="item.customerId"
-					arrow
-					@click="toCustomerDetail(item.customerId || '')"
-					:customer="item.customer"
-				>
-					<template #note>
-						<div
-							class="rank"
-							:class="{
+					<customer-cell
+						v-entrance-transition="index * 30"
+						v-for="(item, index) in pageResult.list"
+						:key="item.customerId"
+						class="item"
+						:class="{ 'in-top3': index < 3}"
+						arrow
+						@click="toCustomerDetail(item.customerId || '')"
+						:customer="item.customer"
+					>
+						<template #note>
+							<div
+								class="rank"
+								:class="{
 									top1: index === 0,
 									top2: index === 1,
 									top3: index === 2,
 								}"
-							v-text="index + 1"
-						/>
-					</template>
-					<template #description>
-						<div class="description">
-							<t-tag
-								v-if="rankType === 'TOTAL_DAYS'"
-								size="small"
-								variant="outline"
-								:content="`累计天数 ${item.totalEventDays || 0}`"
+								v-text="index + 1"
 							/>
-							<t-tag
-								v-else-if="rankType === 'TOTAL_COUNT'"
-								size="small"
-								variant="outline"
-								:content="`累计次数 ${item.totalEventCount || 0}`"
-							/>
-							<t-tag
-								v-else-if="rankType === 'CONTINUOUS_DAYS'"
-								size="small"
-								variant="outline"
-								:content="`连续天数 ${item.recentContinuousEventDays || 0}`"
-							/>
-							<t-tag
-								v-else
-								size="small"
-								variant="outline"
-								:content="`登记数值 ${getTotalNumberValueText(item)}`"
-							/>
-						</div>
-					</template>
-				</customer-cell>
+						</template>
+						<template #description>
+							<div class="description">
+								<t-tag
+									v-if="rankType === 'TOTAL_DAYS'"
+									size="small"
+									variant="outline"
+									:content="`累计天数 ${item.totalEventDays || 0}`"
+								/>
+								<t-tag
+									v-else-if="rankType === 'TOTAL_COUNT'"
+									size="small"
+									variant="outline"
+									:content="`累计次数 ${item.totalEventCount || 0}`"
+								/>
+								<t-tag
+									v-else-if="rankType === 'CONTINUOUS_DAYS'"
+									size="small"
+									variant="outline"
+									:content="`连续天数 ${item.recentContinuousEventDays || 0}`"
+								/>
+								<t-tag
+									v-else
+									size="small"
+									variant="outline"
+									:content="`登记数值 ${getTotalNumberValueText(item)}`"
+								/>
+							</div>
+						</template>
+					</customer-cell>
 			</t-cell-group>
 			<div v-else class="load-state" v-text="emptyStateText" />
 			<div v-if="pageResult.list.length" class="load-state" v-text="loadStateText" />
diff --git a/src/pages/event/EventSort.vue b/src/pages/event/EventSort.vue
index 4ce8657..76e01f8 100644
--- a/src/pages/event/EventSort.vue
+++ b/src/pages/event/EventSort.vue
@@ -1,6 +1,6 @@
 <template>
 	<div v-can="permissionCodes.event.update" class="registration-event-sort">
-		<div class="tip" v-text="'按住右侧拖动手柄调整事件顺序，保存后生效'" />
+		<div class="tip" v-text="'按住右侧拖动手柄调整事件顺序，保存后生效'" v-entrance-transition />
 		<div class="items">
 			<t-cell-group v-if="eventList.length" theme="card">
 				<vue-draggable-next
@@ -16,10 +16,11 @@
 					@change="handleSortChange"
 				>
 					<t-cell
-						v-for="element in eventList"
+						v-for="(element, index) in eventList"
 						:key="element.id"
 						class="cell"
 						:title="element.name || '未命名事件'"
+						v-entrance-transition="index * 30"
 					>
 						<template #leftIcon>
 							<div class="color" :style="{ background: element.color || defaultColor }" />
diff --git a/src/pages/home/QuickEntryPage.vue b/src/pages/home/QuickEntryPage.vue
index a0bd0c7..cb0d885 100644
--- a/src/pages/home/QuickEntryPage.vue
+++ b/src/pages/home/QuickEntryPage.vue
@@ -66,7 +66,7 @@
 			<t-form-item label-width="0">
 				<event-selector
 					v-model="selectedEventIdList"
-					class="registration-event-selector"
+					class="event-selector"
 					:event-list="eventList"
 				/>
 			</t-form-item>
@@ -846,7 +846,7 @@ watch(scanCode, (value) => {
 			box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
 		}
 
-		.registration-event-selector {
+		.event-selector {
 
 			:deep(.item) {
 				color: #e2e8f0;
diff --git a/src/pages/permission/PermissionList.vue b/src/pages/permission/PermissionList.vue
index 7027705..26ffd4c 100644
--- a/src/pages/permission/PermissionList.vue
+++ b/src/pages/permission/PermissionList.vue
@@ -7,24 +7,25 @@
 			@refresh="refresh"
 		>
 			<div class="content">
-				<t-cell-group class="header" theme="card">
-					<t-cell title="当前账号角色聚合权限 P">
-						<template #description>
-							<div>你拥有以下权限，可执行权限对应的功能，这些权限来自上级角色直接授权或子角色继承。</div>
-							<permission-legend />
-						</template>
-					</t-cell>
-				</t-cell-group>
+					<t-cell-group v-entrance-transition class="header" theme="card">
+						<t-cell title="当前账号角色聚合权限 P">
+							<template #description>
+								<div>你拥有以下权限，可执行权限对应的功能，这些权限来自上级角色直接授权或子角色继承。</div>
+								<permission-legend />
+							</template>
+						</t-cell>
+					</t-cell-group>
 				<t-cell-group v-if="sortedPermissions.length" theme="card">
-					<t-swipe-cell
-						v-for="item in sortedPermissions"
-						:key="item.id"
-						class="item"
-					>
-						<permission-cell :permission="item" :source="item.source" />
-					</t-swipe-cell>
+						<t-swipe-cell
+							v-entrance-transition="index * 30"
+							v-for="(item, index) in sortedPermissions"
+							:key="item.id"
+							class="item"
+						>
+							<permission-cell :permission="item" :source="item.source" />
+						</t-swipe-cell>
 				</t-cell-group>
-				<t-empty v-else-if="!permissionStore.loading && !isSourceLoading" description="暂无权限" />
+				<t-empty v-if="!permissionStore.loading && !isSourceLoading" description="暂无权限" />
 			</div>
 		</t-pull-down-refresh>
 	</div>
diff --git a/src/pages/permission/PermissionSettings.vue b/src/pages/permission/PermissionSettings.vue
index 3fef69e..93b149f 100644
--- a/src/pages/permission/PermissionSettings.vue
+++ b/src/pages/permission/PermissionSettings.vue
@@ -57,20 +57,20 @@
 				</template>
 			</t-cell>
 		</t-cell-group>
-		<t-cell-group title="当前角色结构" theme="card">
-			<t-cell
-				v-can="{ value: [corePermissionCodes.role.read, corePermissionCodes.permission.read], mode: 'and' }"
-				v-for="item in visibleRoleTree"
-				:key="item.id"
-				:arrow="canAssignRole(item)"
-				:hover="canAssignRole(item)"
-				@click="canAssignRole(item) && toAssign(item.id)"
-			>
-				<template #title>
-					<div class="title" v-text="item.name" :style="{ paddingLeft: `${item.level * 1.25}rem` }" />
-				</template>
-			</t-cell>
-		</t-cell-group>
+			<t-cell-group v-entrance-transition title="当前角色结构" theme="card">
+				<t-cell
+					v-can="{ value: [corePermissionCodes.role.read, corePermissionCodes.permission.read], mode: 'and' }"
+					v-for="item in visibleRoleTree"
+					:key="item.id"
+					:arrow="canAssignRole(item)"
+					:hover="canAssignRole(item)"
+					@click="canAssignRole(item) && toAssign(item.id)"
+				>
+					<template #title>
+						<div class="title" v-text="item.name" :style="{ paddingLeft: `${item.level * 1.25}rem` }" />
+					</template>
+				</t-cell>
+			</t-cell-group>
 	</div>
 </template>
 
@@ -181,4 +181,3 @@ onMounted(async () => {
 	}
 }
 </style>
-
diff --git a/src/pages/permission/RoleDelegationPermissionAssign.vue b/src/pages/permission/RoleDelegationPermissionAssign.vue
index 11e79c5..974ffd6 100644
--- a/src/pages/permission/RoleDelegationPermissionAssign.vue
+++ b/src/pages/permission/RoleDelegationPermissionAssign.vue
@@ -19,22 +19,23 @@
 			title="允许该角色可继续往下级角色转授权限"
 			theme="card"
 		>
-			<t-cell
-				v-for="item in grantablePermissionList"
-				:key="item.id"
-				:title="item.name || item.code"
-			>
-				<template #description>
-					<span class="code" v-text="item.code"></span>
-				</template>
-				<template #right-icon>
-					<t-switch
-						:disabled="!canUpdateRolePermission || !canEditActiveRole"
-						:model-value="isPermissionChecked(item.id)"
-						@change="value => setPermissionChecked(item.id, value === true)"
-					/>
-				</template>
-			</t-cell>
+				<t-cell
+					v-entrance-transition="index * 30"
+					v-for="(item, index) in grantablePermissionList"
+					:key="item.id"
+					:title="item.name || item.code"
+				>
+					<template #description>
+						<span class="code" v-text="item.code"></span>
+					</template>
+					<template #right-icon>
+						<t-switch
+							:disabled="!canUpdateRolePermission || !canEditActiveRole"
+							:model-value="isPermissionChecked(item.id)"
+							@change="value => setPermissionChecked(item.id, value === true)"
+						/>
+					</template>
+				</t-cell>
 		</t-cell-group>
 		<t-empty v-else-if="!permissionStore.loading" description="暂无可配置的转授权限 D" />
 	</div>
diff --git a/src/pages/permission/RoleEdit.vue b/src/pages/permission/RoleEdit.vue
index c74de46..66a2eb9 100644
--- a/src/pages/permission/RoleEdit.vue
+++ b/src/pages/permission/RoleEdit.vue
@@ -1,57 +1,56 @@
 <template>
 	<div v-can="pageAccess" class="role-edit">
-		<t-form class="form" label-align="left">
-			<t-form-item label="名称">
-				<t-input v-model.trim="formModel.name" placeholder="角色名称" borderless :disabled="!canEditRoleInfo" />
-			</t-form-item>
-			<t-form-item label="代码" :help="isBuiltinRole ? '内建角色代码不可修改' : ''">
-				<t-input v-model.trim="formModel.code" placeholder="如 front-desk" borderless :disabled="!canEditRoleCode" />
-			</t-form-item>
-			<t-form-item label="模块">
-				<t-input v-model.trim="formModel.moduleCode" placeholder="模块代码" borderless disabled />
-			</t-form-item>
-			<t-form-item
-				label="上级"
-				:arrow="canEditParentRole"
-				@click.stop="openParentRolePicker"
-			>
-				<div class="picker-text" v-text="selectedParentRoleName" />
-			</t-form-item>
-			<t-form-item label="说明">
-				<t-textarea v-model.trim="formModel.description" class="textarea" placeholder="角色说明" autosize borderless :disabled="!canEditRoleInfo" />
-			</t-form-item>
-			<t-form-item
-				label="继承角色"
-				:arrow="canEditRoleRelation"
-				@click.stop="openChildRolePicker"
-			>
-				<div class="picker-text" v-text="selectedChildRoleName" />
-			</t-form-item>
-		</t-form>
-		<t-cell-group v-if="!isCreateMode" title="权限授权" theme="card">
-			<t-cell
-				v-can="rolePermissionReadAccess"
-				title="直接授权权限 P"
-				arrow
-				@click="toRolePermissionPage"
-			>
-				<template #leftIcon>
-					<t-icon name="secured" size="1.5rem" />
-				</template>
-			</t-cell>
-			<t-cell
-				v-can="rolePermissionReadAccess"
-				title="可转授权限 D"
-				arrow
-				@click="toRoleDelegationPage"
-			>
-				<template #leftIcon>
-					<t-icon name="user-checked" size="1.5rem" />
-				</template>
-			</t-cell>
-		</t-cell-group>
-		<template v-if="aggregatePermissionList.length">
-			<card-container title="聚合权限 P">
+			<t-form v-entrance-transition class="form" label-align="left">
+				<t-form-item label="名称">
+					<t-input v-model.trim="formModel.name" placeholder="角色名称" borderless :disabled="!canEditRoleInfo" />
+				</t-form-item>
+				<t-form-item label="代码" :help="isBuiltinRole ? '内建角色代码不可修改' : ''">
+					<t-input v-model.trim="formModel.code" placeholder="如 front-desk" borderless :disabled="!canEditRoleCode" />
+				</t-form-item>
+				<t-form-item label="模块">
+					<t-input v-model.trim="formModel.moduleCode" placeholder="模块代码" borderless disabled />
+				</t-form-item>
+				<t-form-item
+					label="上级"
+					:arrow="canEditParentRole"
+					@click.stop="openParentRolePicker"
+				>
+					<div class="picker-text" v-text="selectedParentRoleName" />
+				</t-form-item>
+				<t-form-item label="说明">
+					<t-textarea v-model.trim="formModel.description" class="textarea" placeholder="角色说明" autosize borderless :disabled="!canEditRoleInfo" />
+				</t-form-item>
+				<t-form-item
+					label="继承角色"
+					:arrow="canEditRoleRelation"
+					@click.stop="openChildRolePicker"
+				>
+					<div class="picker-text" v-text="selectedChildRoleName" />
+				</t-form-item>
+			</t-form>
+			<t-cell-group v-entrance-transition="70" v-if="!isCreateMode" title="权限授权" theme="card">
+				<t-cell
+					v-can="rolePermissionReadAccess"
+					title="直接授权权限 P"
+					arrow
+					@click="toRolePermissionPage"
+				>
+					<template #leftIcon>
+						<t-icon name="secured" size="1.5rem" />
+					</template>
+				</t-cell>
+				<t-cell
+					v-can="rolePermissionReadAccess"
+					title="可转授权限 D"
+					arrow
+					@click="toRoleDelegationPage"
+				>
+					<template #leftIcon>
+						<t-icon name="user-checked" size="1.5rem" />
+					</template>
+				</t-cell>
+			</t-cell-group>
+			<card-container v-entrance-transition="140" v-if="aggregatePermissionList.length" title="聚合权限 P">
 				<template #description>
 					<div>该角色拥有以下权限，可执行权限对应的功能，这些权限来自上级角色直接授权或子角色继承。</div>
 					<permission-legend />
@@ -65,7 +64,6 @@
 					/>
 				</t-cell-group>
 			</card-container>
-		</template>
 	</div>
 
 	<t-popup v-model="parentRolePickerVisible" placement="bottom">
diff --git a/src/pages/permission/RoleList.vue b/src/pages/permission/RoleList.vue
index c73e754..374e93a 100644
--- a/src/pages/permission/RoleList.vue
+++ b/src/pages/permission/RoleList.vue
@@ -7,26 +7,27 @@
 			@refresh="refresh"
 		>
 			<t-cell-group v-if="sortedRoles.length" theme="card">
-				<t-swipe-cell
-					v-for="item in sortedRoles"
-					:key="item.id"
-					class="item"
-				>
-					<t-cell
-						:title="item.name"
-						:note="item.code"
-						arrow
-						hover
-						@click="router.push(`/management/permissions/roles/${item.id}`)"
+					<t-swipe-cell
+						v-entrance-transition="index * 30"
+						v-for="(item, index) in sortedRoles"
+						:key="item.id"
+						class="item"
 					>
-						<template #title>
-							<div class="title" v-text="item.name" :style="{ paddingLeft: `${item.level * 1.25}rem` }" />
+						<t-cell
+							:title="item.name"
+							:note="item.code"
+							arrow
+							hover
+							@click="router.push(`/management/permissions/roles/${item.id}`)"
+						>
+							<template #title>
+								<div class="title" v-text="item.name" :style="{ paddingLeft: `${item.level * 1.25}rem` }" />
+							</template>
+						</t-cell>
+						<template #right>
+							<t-button v-if="canDeleteRole(item)" v-can="corePermissionCodes.role.delete" class="delete" theme="danger" @click="removeRole(item.id)">删除</t-button>
 						</template>
-					</t-cell>
-					<template #right>
-						<t-button v-if="canDeleteRole(item)" v-can="corePermissionCodes.role.delete" class="delete" theme="danger" @click="removeRole(item.id)">删除</t-button>
-					</template>
-				</t-swipe-cell>
+					</t-swipe-cell>
 			</t-cell-group>
 			<t-empty v-else-if="!permissionStore.loading" description="暂无角色" />
 		</t-pull-down-refresh>
diff --git a/src/pages/permission/RolePermissionAssign.vue b/src/pages/permission/RolePermissionAssign.vue
index b6232bd..e97bdcd 100644
--- a/src/pages/permission/RolePermissionAssign.vue
+++ b/src/pages/permission/RolePermissionAssign.vue
@@ -24,21 +24,22 @@
 			class="list"
 			theme="card"
 		>
-			<t-cell
-				:class="{ inherited: isPermissionInherited(item.id) }"
-				v-for="item in grantablePermissionList"
-				:key="item.id"
-				:title="item.name"
-				:description="item.code"
-			>
-				<template #right-icon>
-					<t-switch
-						:disabled="!canUpdateRolePermission || !canEditActiveRole || isPermissionInherited(item.id)"
-						:model-value="isPermissionEnabled(item.id)"
-						@change="value => setPermissionChecked(item.id, value === true)"
-					/>
-				</template>
-			</t-cell>
+				<t-cell
+					v-entrance-transition="index * 30"
+					v-for="(item, index) in grantablePermissionList"
+					:key="item.id"
+					:class="{ inherited: isPermissionInherited(item.id) }"
+					:title="item.name"
+					:description="item.code"
+				>
+					<template #right-icon>
+						<t-switch
+							:disabled="!canUpdateRolePermission || !canEditActiveRole || isPermissionInherited(item.id)"
+							:model-value="isPermissionEnabled(item.id)"
+							@change="value => setPermissionChecked(item.id, value === true)"
+						/>
+					</template>
+				</t-cell>
 		</t-cell-group>
 		<t-empty v-else-if="!permissionStore.loading" description="暂无可配置的直接权限 P" />
 	</div>
diff --git a/src/pages/point/PointAccountDetail.vue b/src/pages/point/PointAccountDetail.vue
index 82ddf55..99aa092 100644
--- a/src/pages/point/PointAccountDetail.vue
+++ b/src/pages/point/PointAccountDetail.vue
@@ -1,9 +1,9 @@
 <template>
 	<div v-can="permissionCodes.point.accountRead" class="point-account-detail">
-		<card-container v-if="customer">
+		<card-container v-if="customer" v-entrance-transition>
 			<customer-profile-card :customer="customer" />
 		</card-container>
-		<section v-if="account" class="account-card">
+		<section v-if="account" class="account-card" v-entrance-transition="70">
 			<div class="header">
 				<div>积分卡</div>
 				<div class="time dark-white" v-text="formatTimestamp(account.createdAt!)" />
@@ -14,15 +14,13 @@
 			</div>
 			<div class="id" v-text="account.id?.toUpperCase()" />
 		</section>
-
-		<t-cell-group v-if="account" title="积分统计" theme="card">
+		<t-cell-group v-if="account" title="积分统计" theme="card" v-entrance-transition="140">
 			<t-cell title="累计获得" :note="formatPoints(account.totalEarned)" />
 			<t-cell title="累计消耗" :note="formatPoints(account.totalConsumed)" />
 			<t-cell title="累计撤销" :note="formatPoints(account.totalRevoked)" />
 			<t-cell title="人工调整" :note="formatSignedPoints(account.totalAdjusted)" />
 		</t-cell-group>
-
-		<section v-if="customer" class="actions">
+		<section v-if="customer" class="actions" v-entrance-transition="210">
 			<t-button
 				v-can="permissionCodes.point.ledgerRead"
 				class="bg-white"
@@ -40,7 +38,6 @@
 				人工调整积分
 			</t-button>
 		</section>
-
 		<t-empty v-if="!account" :description="isLoading ? '正在加载积分账户' : '积分账户不存在或已被删除'" />
 	</div>
 </template>
diff --git a/src/pages/point/PointAccountList.vue b/src/pages/point/PointAccountList.vue
index 99c49b1..8c666c0 100644
--- a/src/pages/point/PointAccountList.vue
+++ b/src/pages/point/PointAccountList.vue
@@ -16,23 +16,24 @@
 			@scrolltolower="load"
 		>
 			<t-cell-group v-if="pageResult.list.length" class="list" theme="card">
-				<customer-cell
-					v-for="item in pageResult.list"
-					:key="item.id"
-					:customer="item.customer"
-					class="item"
-					arrow
-					hover
-					@click="toDetail(item)"
-				>
-					<template #description>
-						<span>余额：</span>
-						<span
-							class="balance"
-							:class="getBalanceTheme(item.balance)"
-							v-text="formatPoints(item.balance)" />
-					</template>
-				</customer-cell>
+					<customer-cell
+						v-entrance-transition="index * 30"
+						v-for="(item, index) in pageResult.list"
+						:key="item.id"
+						:customer="item.customer"
+						class="item"
+						arrow
+						hover
+						@click="toDetail(item)"
+					>
+						<template #description>
+							<span>余额：</span>
+							<span
+								class="balance"
+								:class="getBalanceTheme(item.balance)"
+								v-text="formatPoints(item.balance)" />
+						</template>
+					</customer-cell>
 			</t-cell-group>
 			<div class="load-state" v-text="loadStateText" />
 		</t-pull-down-refresh>
diff --git a/src/pages/point/PointAdjust.vue b/src/pages/point/PointAdjust.vue
index 46a2224..638a108 100644
--- a/src/pages/point/PointAdjust.vue
+++ b/src/pages/point/PointAdjust.vue
@@ -5,7 +5,7 @@
 			visible
 			content="人工调整会追加一条不可修改的 ADJUST 流水，请填写真实、明确的调整原因。"
 		/>
-		<t-form class="form" label-align="left" label-width="7rem">
+		<t-form class="form" label-align="left" label-width="7rem" v-entrance-transition>
 			<t-form-item label="客户" required-mark>
 				<div class="customer-actions">
 					<t-button
@@ -58,11 +58,17 @@
 				<span class="request-id" v-text="adjustRequestId" />
 			</t-form-item>
 		</t-form>
-		<div class="bottom-actions">
-			<t-button theme="primary" :loading="isSaving" :disabled="!canSubmit" @click="submitAdjust">
-				提交调整
-			</t-button>
-		</div>
+		<t-button
+			class="cell-button"
+			theme="primary"
+			:loading="isSaving"
+			:disabled="!canSubmit"
+			block
+			v-entrance-transition="70"
+			@click="submitAdjust"
+		>
+			提交调整
+		</t-button>
 		<customer-selector
 			v-model="selectedCustomerId"
 			v-model:visible="selectorVisible"
diff --git a/src/pages/point/PointLedgerDetail.vue b/src/pages/point/PointLedgerDetail.vue
index 8e3f0ea..4439bb2 100644
--- a/src/pages/point/PointLedgerDetail.vue
+++ b/src/pages/point/PointLedgerDetail.vue
@@ -1,13 +1,13 @@
 <template>
-	<div v-can="permissionCodes.point.ledgerRead" class="point-ledger-detail">
+	<div v-if="customer" v-can="permissionCodes.point.ledgerRead" class="point-ledger-detail">
 		<customer-profile-card
-			v-if="customer"
 			class="customer-profile"
 			:customer="customer"
+			v-entrance-transition
 			@click="toCustomerDetail"
 		/>
 		<template v-if="ledger">
-			<t-cell-group title="积分流水" theme="card">
+			<t-cell-group title="积分流水" theme="card" v-entrance-transition="70">
 				<t-cell title="流水类型">
 					<template #note>
 						<t-tag
@@ -26,8 +26,7 @@
 				</t-cell>
 				<t-cell title="流水备注" :note="Text.display(ledger.remark)" />
 			</t-cell-group>
-
-			<t-cell-group title="触发事件" theme="card">
+			<t-cell-group title="触发事件" theme="card" v-entrance-transition="140">
 				<template v-if="triggerEvent">
 					<t-cell title="事件名称" :note="triggerEvent.name || '未命名事件'" />
 					<t-cell title="事件类型" :note="getEventValueTypeText(triggerEvent)" />
@@ -36,8 +35,7 @@
 				</template>
 				<div v-else class="empty" v-text="getEventEmptyText()" />
 			</t-cell-group>
-
-			<t-cell-group title="事件记录" theme="card">
+			<t-cell-group title="事件记录" theme="card" v-entrance-transition="210">
 				<template v-if="eventRecord">
 					<t-cell title="登记事件" :note="eventRecord.event?.name || triggerEvent?.name || '未知事件'" />
 					<t-cell title="登记时间">
@@ -54,8 +52,7 @@
 				</template>
 				<div v-else class="empty" v-text="getRecordEmptyText()" />
 			</t-cell-group>
-
-			<t-cell-group title="命中规则" theme="card">
+			<t-cell-group title="命中规则" theme="card" v-entrance-transition="280">
 				<template v-if="hitRule">
 					<t-cell title="规则名称" :note="hitRule.name || '未命名规则'" />
 					<t-cell title="触发类型" :note="getTriggerTypeText(hitRule.triggerType)" />
diff --git a/src/pages/point/PointLedgerList.vue b/src/pages/point/PointLedgerList.vue
index b321481..e17b8b0 100644
--- a/src/pages/point/PointLedgerList.vue
+++ b/src/pages/point/PointLedgerList.vue
@@ -72,45 +72,46 @@
 			@scrolltolower="load"
 		>
 			<t-cell-group v-if="pageResult.list.length" class="list" theme="card">
-				<t-cell
-					v-for="item in pageResult.list"
-					:key="item.id"
-					class="item"
-					:arrow="!!item.id"
-					:hover="!!item.id"
-					@click="toDetail(item)"
-				>
-					<template #leftIcon>
-						<t-image
-							v-if="getCustomerPhotoURL(item.customer!, 64)"
-							:src="getCustomerPhotoURL(item.customer!, 64)"
-							fit="cover"
-							class="avatar"
-						/>
-						<div v-else class="avatar fallback" v-text="(item.customer?.name || item.customer?.code || '客').slice(0, 1)" />
-					</template>
-					<template #title>
-						<div class="title">
-							<t-tag
-								class="type-icon"
-								:theme="item.pointDelta && 0 < item.pointDelta ? 'success' : 'danger'"
-								:content="getLedgerShortType(item)"
-								variant="outline"
+					<t-cell
+						v-entrance-transition="index * 30"
+						v-for="(item, index) in pageResult.list"
+						:key="item.id"
+						class="item"
+						:arrow="!!item.id"
+						:hover="!!item.id"
+						@click="toDetail(item)"
+					>
+						<template #leftIcon>
+							<t-image
+								v-if="getCustomerPhotoURL(item.customer!, 64)"
+								:src="getCustomerPhotoURL(item.customer!, 64)"
+								fit="cover"
+								class="avatar"
 							/>
-							<div class="name" v-text="item.customer?.name" />
-						</div>
-					</template>
-					<template #description>
-						<div class="description">
-							<div v-text="`时间：${Time.toPassedDateTime(item.occurredAt)}`" />
-							<div v-text="`余额：${item.balanceBefore ?? 0} → ${item.balanceAfter ?? 0}`" />
-							<div v-text="item.remark" />
-						</div>
-					</template>
-					<template #note>
-						<div class="delta keep-text" :class="getLedgerTheme(item)" v-text="getLedgerDelta(item)" />
-					</template>
-				</t-cell>
+							<div v-else class="avatar fallback" v-text="(item.customer?.name || item.customer?.code || '客').slice(0, 1)" />
+						</template>
+						<template #title>
+							<div class="title">
+								<t-tag
+									class="type-icon"
+									:theme="item.pointDelta && 0 < item.pointDelta ? 'success' : 'danger'"
+									:content="getLedgerShortType(item)"
+									variant="outline"
+								/>
+								<div class="name" v-text="item.customer?.name" />
+							</div>
+						</template>
+						<template #description>
+							<div class="description">
+								<div v-text="`时间：${Time.toPassedDateTime(item.occurredAt)}`" />
+								<div v-text="`余额：${item.balanceBefore ?? 0} → ${item.balanceAfter ?? 0}`" />
+								<div v-text="item.remark" />
+							</div>
+						</template>
+						<template #note>
+							<div class="delta keep-text" :class="getLedgerTheme(item)" v-text="getLedgerDelta(item)" />
+						</template>
+					</t-cell>
 			</t-cell-group>
 			<div class="load-state" v-text="loadStateText" />
 		</t-pull-down-refresh>
diff --git a/src/pages/point/PointRuleDetail.vue b/src/pages/point/PointRuleDetail.vue
index 1f29bfd..f890043 100644
--- a/src/pages/point/PointRuleDetail.vue
+++ b/src/pages/point/PointRuleDetail.vue
@@ -1,6 +1,6 @@
 <template>
 	<div v-can="permissionCodes.pointRule.read" class="point-rule-detail">
-		<section v-if="rule" class="rule-header">
+		<section v-if="rule" class="rule-header" v-entrance-transition>
 			<div class="point-icon" :class="{ consume: isConsumeRule }">
 				<t-icon name="money" size="1.75rem" />
 			</div>
@@ -12,12 +12,11 @@
 				<div class="point-value" v-text="rulePointText" />
 			</div>
 		</section>
-
-		<t-cell-group v-if="rule" title="基本信息" theme="card">
+		<t-cell-group v-if="rule" title="基本信息" theme="card" v-entrance-transition="70">
 			<t-cell title="所属门店" :note="storeName" />
 			<t-cell
 				title="登记事件"
-				:note="event?.name || rule.eventId || '未绑定事件'"
+				:note="event?.name || '未绑定事件'"
 				:arrow="canReadEvent && !!event?.id"
 				:hover="canReadEvent && !!event?.id"
 				@click="toEventDetail"
@@ -30,8 +29,7 @@
 			</t-cell>
 			<t-cell title="规则备注" :note="Text.display(rule.remark)" />
 		</t-cell-group>
-
-		<t-cell-group v-if="rule" title="积分配置" theme="card">
+		<t-cell-group v-if="rule" title="积分配置" theme="card" v-entrance-transition="140">
 			<t-cell title="触发类型" :note="getTriggerText(rule.triggerType)" />
 			<t-cell title="积分值模式" :note="getModeText(rule.pointMode)" />
 			<t-cell v-if="rule.pointMode === 'FIXED'" title="固定积分" :note="formatPointValue(rule.pointValue)" />
@@ -45,12 +43,15 @@
 				</template>
 			</t-cell>
 		</t-cell-group>
-
-		<t-cell-group v-if="tierTextList.length" title="积分分档" theme="card">
+		<t-cell-group
+			v-if="tierTextList.length"
+			title="积分分档"
+			theme="card"
+			v-entrance-transition="210"
+		>
 			<t-cell v-for="(text, index) in tierTextList" :key="index" :title="`第 ${index + 1} 档`" :note="text" />
 		</t-cell-group>
-
-		<t-cell-group v-if="rule" title="其他配置" theme="card">
+		<t-cell-group v-if="rule" title="其他配置" theme="card" v-entrance-transition="280">
 			<t-cell title="规则优先级" :note="formatNumber(rule.priority)" />
 			<t-cell title="命中后停止匹配" :note="rule.exclusive ? '是' : '否'" />
 			<t-cell title="生效开始" :note="formatDate(rule.beginAt)" />
@@ -58,7 +59,6 @@
 			<t-cell title="创建时间" :note="formatDate(rule.createdAt, '未知时间')" />
 			<t-cell title="更新时间" :note="formatDate(rule.updatedAt, '未知时间')" />
 		</t-cell-group>
-
 		<t-empty v-else :description="isLoading ? '正在加载积分规则' : '积分规则不存在'" />
 	</div>
 </template>
diff --git a/src/pages/point/PointRuleEdit.vue b/src/pages/point/PointRuleEdit.vue
index 9220a7a..172b715 100644
--- a/src/pages/point/PointRuleEdit.vue
+++ b/src/pages/point/PointRuleEdit.vue
@@ -1,7 +1,7 @@
 <template>
 	<div v-can="pageAccess" class="point-rule-edit">
 		<t-form class="form" label-align="left" label-width="7rem">
-			<card-container>
+			<card-container v-entrance-transition>
 				<t-form-item v-if="isGlobalManager" label="门店" required-mark :arrow="isCreateMode" @click="openStorePicker">
 					<span class="picker-text" v-text="selectedStoreName" />
 				</t-form-item>
@@ -18,7 +18,7 @@
 					<t-textarea v-model.trim="formModel.remark" :autosize="{ minRows: 3, maxRows: 5 }" placeholder="规则说明" />
 				</t-form-item>
 			</card-container>
-			<card-container>
+			<card-container v-entrance-transition="70">
 				<t-form-item label="触发类型" arrow @click="openTriggerPicker">
 					<span class="picker-text" v-text="getTriggerText(formModel.triggerType)" />
 				</t-form-item>
@@ -68,7 +68,7 @@
 					<point-rule-tier-editor v-model="formModel.tiers" :value-unit="selectedSourceValueUnit" />
 				</template>
 			</card-container>
-			<card-container>
+			<card-container v-entrance-transition="140">
 				<t-form-item label="生效开始" arrow @click="openBeginAtPicker">
 					<div class="time-value">
 						<span class="picker-text" v-text="formModel.beginAtText || '不限'" />
@@ -82,24 +82,23 @@
 					</div>
 				</t-form-item>
 			</card-container>
-			<card-container tips="命中规则并执行积分动作后不再匹配后续规则">
+			<card-container tips="命中规则并执行积分动作后不再匹配后续规则" v-entrance-transition="210">
 				<t-form-item label="独占匹配" content-align="right">
 					<t-switch size="small" v-model="formModel.exclusive" />
 				</t-form-item>
 			</card-container>
 		</t-form>
-		<div v-if="!isCreateMode" class="bottom-actions">
-			<t-button
-				v-can="permissionCodes.pointRule.delete"
-				class="delete bg-white"
-				theme="danger"
-				variant="outline"
-				:loading="isRemoving"
-				@click="confirmRemove"
-			>
-				删除
-			</t-button>
-		</div>
+		<t-button
+			v-if="!isCreateMode"
+			class="delete red bg-white cell-button"
+			v-can="permissionCodes.pointRule.delete"
+			:loading="isRemoving"
+			variant="text"
+			block
+			@click="confirmRemove"
+		>
+			删除
+		</t-button>
 	</div>
 	<t-popup v-model="storePickerVisible" placement="bottom">
 		<t-picker
@@ -268,7 +267,7 @@ const formModel = reactive({
 
 const eventList = ref<EventItem[]>([]);
 const selectedStoreName = computed(() => currentStoreStore.storeList.find(item => item.id === formModel.storeId)?.name || "请选择门店");
-const selectedEventName = computed(() => eventList.value.find(item => item.id === formModel.eventId)?.name || (formModel.eventId ? `事件 ${formModel.eventId}` : "请选择登记事件"));
+const selectedEventName = computed(() => eventList.value.find(item => item.id === formModel.eventId)?.name || "请选择登记事件");
 const storePickerVisible = ref(false);
 const storePickerDraft = ref<PickerValue[]>([]);
 const storePickerColumns = computed(() => [
@@ -295,7 +294,7 @@ const sourceEventPickerColumns = computed(() => [
 ]);
 const selectedSourceEventName = computed(() => selectedSourceEvent.value
 	? `${selectedSourceEvent.value.name || "未命名事件"}（${getEventValueUnitText(selectedSourceEvent.value.valueUnit)}）`
-	: formModel.sourceEventId ? `事件 ${formModel.sourceEventId}` : "请选择来源事件");
+	: "请选择来源事件");
 
 let tierKey = 0;
 
@@ -922,14 +921,8 @@ onUnmounted(() => navBarStore.clearRight());
 		}
 	}
 
-	.bottom-actions {
-		margin: 0 1rem;
-		padding-top: 1rem;
-		display: flex;
-
-		.delete {
-			width: 100%;
-		}
+	.delete {
+		margin-top: 1rem;
 	}
 }
 
diff --git a/src/pages/point/PointRuleList.vue b/src/pages/point/PointRuleList.vue
index c7a4891..cc6ca1c 100644
--- a/src/pages/point/PointRuleList.vue
+++ b/src/pages/point/PointRuleList.vue
@@ -19,11 +19,12 @@
 		>
 			<t-cell-group v-if="pageResult.list.length" class="list" theme="card">
 				<t-cell
-					v-for="item in pageResult.list"
+					v-for="(item, index) in pageResult.list"
 					:key="item.id"
 					class="item"
 					:arrow="!!item.id"
 					:hover="!!item.id"
+					v-entrance-transition="index * 30"
 					@click="toDetail(item)"
 				>
 					<template #left-icon>
diff --git a/src/pages/point/PointRuleSort.vue b/src/pages/point/PointRuleSort.vue
index c102108..1fb2538 100644
--- a/src/pages/point/PointRuleSort.vue
+++ b/src/pages/point/PointRuleSort.vue
@@ -1,6 +1,6 @@
 <template>
 	<div v-can="permissionCodes.pointRule.update" class="point-rule-sort">
-		<div class="tip" v-text="'按住右侧拖动手柄调整规则顺序，保存后生效；仅显示启用规则'" />
+		<div class="tip" v-text="'按住右侧拖动手柄调整规则顺序，保存后生效；仅显示启用规则'" v-entrance-transition />
 		<div class="items">
 			<t-cell-group v-if="ruleList.length" theme="card">
 				<vue-draggable-next
@@ -15,7 +15,12 @@
 					:disabled="isLoading || isSaving"
 					@change="sortDirty = true"
 				>
-					<t-cell v-for="item in ruleList" :key="item.id" class="cell">
+					<t-cell
+						class="cell"
+						v-for="(item, index) in ruleList"
+						:key="item.id"
+						v-entrance-transition="index * 30"
+					>
 						<template #title>
 							<div class="title" v-text="item.name || '未命名规则'" />
 						</template>
diff --git a/src/pages/setting/AppSettings.vue b/src/pages/setting/AppSettings.vue
index 23fcc02..2bc416b 100644
--- a/src/pages/setting/AppSettings.vue
+++ b/src/pages/setting/AppSettings.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="settings-page">
-		<t-cell-group title="显示" theme="card">
+		<t-cell-group title="显示" theme="card" v-entrance-transition>
 			<t-cell class="theme" title="显示模式">
 				<template #right-icon>
 					<segmented-slider
@@ -12,7 +12,7 @@
 				</template>
 			</t-cell>
 		</t-cell-group>
-		<t-cell-group title="声音" theme="card">
+		<t-cell-group title="声音" theme="card" v-entrance-transition="70">
 			<t-cell title="扫码成功">
 				<template #right-icon>
 					<t-switch :model-value="settingStore.sound.scanSuccess" @change="value => handleScanSuccessChange(value === true)" />
diff --git a/src/pages/store/StoreBusinessDayCalendar.vue b/src/pages/store/StoreBusinessDayCalendar.vue
index 5e5d3b2..e2bf049 100644
--- a/src/pages/store/StoreBusinessDayCalendar.vue
+++ b/src/pages/store/StoreBusinessDayCalendar.vue
@@ -4,7 +4,7 @@
 		v-can="permissionCodes.store.read"
 		class="store-business-day-calendar"
 	>
-		<header class="summary bg-white">
+		<header class="summary bg-white" v-entrance-transition>
 			<header class="header">
 				<div class="text-bold" v-text="store.name" />
 				<t-tag variant="outline" :content="store.code" />
@@ -18,6 +18,7 @@
 			class="calendar-card"
 			description="设置门店休息日，该日无任何登记记录不视为中断连续登记事件。已有登记不可设为休息，标记休息不能产生登记"
 			tips="点击日期即可新增营休日"
+			v-entrance-transition="70"
 		>
 			<t-calendar
 				:key="calendarRenderKey"
diff --git a/src/pages/store/StoreDataCharts.vue b/src/pages/store/StoreDataCharts.vue
index e57798f..e0fe640 100644
--- a/src/pages/store/StoreDataCharts.vue
+++ b/src/pages/store/StoreDataCharts.vue
@@ -1,13 +1,12 @@
 <template>
 	<div v-can="permissionCodes.stat.read" class="data-charts-page">
-		<store-chart-summary :date-text-list="dateTextList" />
-
-		<store-event-record-calendar-section @list="toEventRecordList" />
-		<store-event-record-trend-chart :date-text-list="dateTextList" />
-		<store-event-record-number-value-chart :date-text-list="dateTextList" />
-		<store-event-structure-chart :date-text-list="dateTextList" />
-		<store-customer-growth-chart :date-text-list="dateTextList" />
-		<store-customer-gender-chart />
+		<store-chart-summary v-entrance-transition :date-text-list="dateTextList" />
+		<store-event-record-calendar-section v-entrance-transition="70" @list="toEventRecordList" />
+		<store-event-record-trend-chart v-entrance-transition="140" :date-text-list="dateTextList" />
+		<store-event-record-number-value-chart v-entrance-transition="210" :date-text-list="dateTextList" />
+		<store-event-structure-chart v-entrance-transition="280" :date-text-list="dateTextList" />
+		<store-customer-growth-chart v-entrance-transition="350" :date-text-list="dateTextList" />
+		<store-customer-gender-chart v-entrance-transition="420" />
 	</div>
 </template>
 
diff --git a/src/pages/store/StoreEdit.vue b/src/pages/store/StoreEdit.vue
index 438fa1f..b5a8169 100644
--- a/src/pages/store/StoreEdit.vue
+++ b/src/pages/store/StoreEdit.vue
@@ -1,6 +1,6 @@
 <template>
 	<div v-can="savePermissionCode" class="store-edit">
-		<t-form class="form" label-align="left">
+		<t-form class="form" label-align="left" v-entrance-transition>
 			<t-form-item v-if="!isStoreManagerScope" label="编码">
 				<t-input v-model.trim="formData.code" placeholder="门店编码" borderless />
 			</t-form-item>
@@ -20,7 +20,7 @@
 				<t-textarea v-model.trim="formData.remark" class="textarea" placeholder="备注" autosize borderless />
 			</t-form-item>
 		</t-form>
-		<t-cell-group v-if="!isCreateMode" theme="card">
+		<t-cell-group v-if="!isCreateMode" theme="card" v-entrance-transition="70">
 			<t-cell
 				title="营业日管理"
 				note="配置营业或休息日期"
@@ -36,7 +36,7 @@
 				</template>
 			</t-cell>
 		</t-cell-group>
-		<div v-if="!isCreateMode && !isStoreManagerScope" class="actions">
+		<div v-if="!isCreateMode && !isStoreManagerScope" class="actions" v-entrance-transition="140">
 			<t-button
 				v-can="permissionCodes.store.delete"
 				class="action"
diff --git a/src/pages/store/StoreList.vue b/src/pages/store/StoreList.vue
index dbd9fdf..47e07c1 100644
--- a/src/pages/store/StoreList.vue
+++ b/src/pages/store/StoreList.vue
@@ -8,26 +8,27 @@
 			@scrolltolower="fetch"
 		>
 			<t-cell-group theme="card">
-				<t-cell
-					class="item"
-					v-for="item in pageResult.list"
-					:key="item.id"
-					arrow
-					@click="toEdit(item)"
-				>
-					<template #title>
-						<div class="header">
-							<div class="text-bold" v-text="item.name || '未命名门店'"></div>
-							<t-tag size="small" :theme="getStoreStatusTheme(item.status)" variant="outline" :content="getStoreStatusText(item.status)" />
-						</div>
-					</template>
-					<template #description>
-						<div class="description">
-							<span class="gray" v-text="item.telephone ? `电话：${item.telephone}` : '电话：-'" />
-							<span class="gray" v-text="item.address ? `地址：${item.address}` : '地址：-'" />
-						</div>
-					</template>
-				</t-cell>
+					<t-cell
+						v-entrance-transition="index * 30"
+						v-for="(item, index) in pageResult.list"
+						:key="item.id"
+						class="item"
+						arrow
+						@click="toEdit(item)"
+					>
+						<template #title>
+							<div class="header">
+								<div class="text-bold" v-text="item.name || '未命名门店'"></div>
+								<t-tag size="small" :theme="getStoreStatusTheme(item.status)" variant="outline" :content="getStoreStatusText(item.status)" />
+							</div>
+						</template>
+						<template #description>
+							<div class="description">
+								<span class="gray" v-text="item.telephone ? `电话：${item.telephone}` : '电话：-'" />
+								<span class="gray" v-text="item.address ? `地址：${item.address}` : '地址：-'" />
+							</div>
+						</template>
+					</t-cell>
 			</t-cell-group>
 			<div v-if="!pageResult.list.length" class="empty-block" v-text="isLoading ? '正在加载门店' : '暂无门店'" />
 			<div v-if="pageResult.list.length" class="load-state" v-text="isNoMore ? '已加载全部门店' : '上拉加载更多'" />
diff --git a/src/pages/tabs/HomeTab.vue b/src/pages/tabs/HomeTab.vue
index b8d36d2..0430f05 100644
--- a/src/pages/tabs/HomeTab.vue
+++ b/src/pages/tabs/HomeTab.vue
@@ -1,15 +1,21 @@
 <template>
 	<div class="entry-page">
 		<section class="entry-list">
-			<div v-for="item in visibleEntryList" :key="item.path" class="item" @click="go(item.path)">
-				<div class="body">
-					<t-icon :name="item.icon" size="1.75rem" />
-					<h2 v-text="item.title" />
+			<div
+				v-entrance-transition="index * 70"
+				v-for="(item, index) in visibleEntryList"
+				:key="item.path"
+				class="item"
+				@click="go(item.path)"
+			>
+					<div class="body">
+						<t-icon :name="item.icon" size="1.75rem" />
+						<h2 v-text="item.title" />
+					</div>
+					<p v-text="item.desc" />
 				</div>
-				<p v-text="item.desc" />
-			</div>
 		</section>
-		<div class="tips gray">微信内打开本站可能会经常在扫码时需要授权，建议使用浏览器打开（右上角菜单，使用默认浏览器打开），并添加快捷入口到桌面。</div>
+		<div class="tips gray" v-entrance-transition="visibleEntryList.length * 70">微信内打开本站可能会经常在扫码时需要授权，建议使用浏览器打开（右上角菜单，使用默认浏览器打开），并添加快捷入口到桌面。</div>
 	</div>
 </template>
 
diff --git a/src/pages/tabs/SettingTab.vue b/src/pages/tabs/SettingTab.vue
index 18beb3c..307dde3 100644
--- a/src/pages/tabs/SettingTab.vue
+++ b/src/pages/tabs/SettingTab.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="management-tab">
-		<t-cell-group class="user-card" theme="card">
+		<t-cell-group class="user-card" theme="card" v-entrance-transition>
 			<t-cell
 				v-if="currentUser"
 				class="info"
@@ -38,7 +38,13 @@
 				</template>
 			</t-cell>
 		</t-cell-group>
-		<t-cell-group v-for="group in visibleMenuGroupList" :key="group.title" :title="group.title" theme="card">
+		<t-cell-group
+			v-for="(group, index) in visibleMenuGroupList"
+			:key="group.title"
+			:title="group.title"
+			theme="card"
+			v-entrance-transition="index * 70"
+		>
 			<t-cell
 				v-for="item in group.items"
 				:key="item.path"
diff --git a/src/pages/tabs/StoreTab.vue b/src/pages/tabs/StoreTab.vue
index 67fae55..9cc3eee 100644
--- a/src/pages/tabs/StoreTab.vue
+++ b/src/pages/tabs/StoreTab.vue
@@ -1,41 +1,41 @@
 <template>
 	<div class="store-tab">
-		<section v-if="canViewStore || canManageStore" class="store-header">
-			<t-cell-group class="store-card" theme="card">
-				<t-cell
-					v-if="canViewStore"
-					class="info"
-					:title="currentStoreStore.currentStoreName"
-					:description="currentStore?.address"
-				/>
-				<t-cell
-					v-if="canSelectStore"
-					class="action"
-					title="切换门店"
-					note="选择使用门店"
-					arrow
-					hover
-					@click="openStorePicker"
-				>
-					<template #leftIcon>
-						<t-icon name="swap" />
-					</template>
-				</t-cell>
-				<t-cell
-					v-if="canManageStore"
-					class="action"
-					title="门店管理"
-					note="管理门店资料和营业日"
-					arrow
-					hover
-					@click="goStoreManagement"
-				>
-					<template #leftIcon>
-						<t-icon name="shop-3" />
-					</template>
-				</t-cell>
-			</t-cell-group>
-		</section>
+			<section v-entrance-transition v-if="canViewStore || canManageStore" class="store-header">
+				<t-cell-group class="store-card" theme="card">
+					<t-cell
+						v-if="canViewStore"
+						class="info"
+						:title="currentStoreStore.currentStoreName"
+						:description="currentStore?.address"
+					/>
+					<t-cell
+						v-if="canSelectStore"
+						class="action"
+						title="切换门店"
+						note="选择使用门店"
+						arrow
+						hover
+						@click="openStorePicker"
+					>
+						<template #leftIcon>
+							<t-icon name="swap" />
+						</template>
+					</t-cell>
+					<t-cell
+						v-if="canManageStore"
+						class="action"
+						title="门店管理"
+						note="管理门店资料和营业日"
+						arrow
+						hover
+						@click="goStoreManagement"
+					>
+						<template #leftIcon>
+							<t-icon name="shop-3" />
+						</template>
+					</t-cell>
+				</t-cell-group>
+			</section>
 		<store-data-charts :key="currentStoreStore.currentStoreId" />
 		<t-popup v-model="storePickerVisible" placement="bottom">
 			<t-picker
diff --git a/src/pages/tag/TagList.vue b/src/pages/tag/TagList.vue
index d26379a..b68ef62 100644
--- a/src/pages/tag/TagList.vue
+++ b/src/pages/tag/TagList.vue
@@ -17,9 +17,10 @@
 		>
 			<div class="tag-panel">
 				<div
-					v-for="item in tagList"
-					:key="item.id"
+					v-entrance-transition="index * 10"
 					class="item bg-white"
+					v-for="(item, index) in tagList"
+					:key="item.id"
 					@click="openEditDialog(item)"
 				>
 					<span class="name" v-text="getTagName(item)" />
diff --git a/src/pages/user/InviteRegister.vue b/src/pages/user/InviteRegister.vue
index 53819e0..109c22f 100644
--- a/src/pages/user/InviteRegister.vue
+++ b/src/pages/user/InviteRegister.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="register-page">
 		<section v-if="isLoading" class="register-panel"><t-loading text="正在校验邀请码" /></section>
-		<section v-else-if="!isValid" class="register-panel invalid">
+		<section v-else-if="!isValid" class="register-panel invalid" v-entrance-transition>
 			<div class="brand">
 				<logo />
 				<h1>糕店客户管理</h1>
@@ -10,11 +10,11 @@
 			<p class="tips gray" v-text="invalidMessage" />
 		</section>
 		<section v-else class="register-panel">
-			<div class="brand">
+			<div class="brand" v-entrance-transition>
 				<logo />
 				<h1>加入糕店客户管理系统</h1>
 			</div>
-			<p class="tips gray" v-text="expireText" />
+			<p class="tips gray" v-text="expireText" v-entrance-transition="70" />
 			<t-form class="form" label-align="left" label-width="6rem">
 				<t-form-item label="手机号">
 					<t-input v-model.trim="formModel.phoneNo" type="tel" inputmode="tel" borderless placeholder="请输入手机号" />
diff --git a/src/pages/user/LoginIndex.vue b/src/pages/user/LoginIndex.vue
index d2ea312..493b2b0 100644
--- a/src/pages/user/LoginIndex.vue
+++ b/src/pages/user/LoginIndex.vue
@@ -2,10 +2,15 @@
 	<div class="login-page">
 		<section class="login-panel">
 			<div class="brand">
-				<logo />
-				<h1>糕店客户管理</h1>
+				<logo v-entrance-transition />
+				<h1 v-entrance-transition="70">糕店客户管理</h1>
 			</div>
-			<t-segmented class="login-type" v-model="loginType" :options="loginTypeOptions" />
+			<t-segmented
+				class="login-type"
+				v-model="loginType"
+				:options="loginTypeOptions"
+				v-entrance-transition="140"
+			/>
 			<password-login v-if="loginType === 'password'" class="form" />
 			<sms-login v-else class="form" />
 		</section>
diff --git a/src/pages/user/UserDetail.vue b/src/pages/user/UserDetail.vue
index f1c5cfc..0bfeb2d 100644
--- a/src/pages/user/UserDetail.vue
+++ b/src/pages/user/UserDetail.vue
@@ -4,7 +4,7 @@
 		v-can="permissionCodes.user.read"
 		class="user-edit"
 	>
-		<t-cell-group v-if="managedUser.user" theme="card">
+		<t-cell-group v-if="managedUser.user" theme="card" v-entrance-transition>
 			<t-cell
 				:title="managedUser.user.name"
 				:description="getRoleDisplayName(getManagedUserRoleList(managedUser)[0], permissionStore.roleList)"
@@ -19,8 +19,7 @@
 				</template>
 			</t-cell>
 		</t-cell-group>
-
-		<t-cell-group v-if="managedUser.user" theme="card">
+		<t-cell-group v-if="managedUser.user" theme="card" v-entrance-transition="70">
 			<t-cell title="状态" :note="managedUser.enabled ? '启用' : '禁用'" />
 			<t-cell title="备注" :note="managedUser.remark" />
 			<t-cell title="手机号">
@@ -34,8 +33,7 @@
 				</template>
 			</t-cell>
 		</t-cell-group>
-
-		<t-cell-group v-if="currentUser" theme="card">
+		<t-cell-group v-if="currentUser" theme="card" v-entrance-transition="140">
 			<t-cell
 				v-can="permissionCodes.user.update"
 				title="配置角色"
@@ -49,8 +47,7 @@
 				</template>
 			</t-cell>
 		</t-cell-group>
-
-		<t-cell-group v-if="currentUser" title="可登记事件" theme="card">
+		<t-cell-group v-if="currentUser" title="可登记事件" theme="card" v-entrance-transition="210">
 			<t-cell v-for="item in scopeList" :key="item.id" :title="item.name"/>
 			<t-cell v-if="!scopeList.length" title="未配置" />
 		</t-cell-group>
diff --git a/src/pages/user/UserInvitePoster.vue b/src/pages/user/UserInvitePoster.vue
index 0337e09..1c76ff0 100644
--- a/src/pages/user/UserInvitePoster.vue
+++ b/src/pages/user/UserInvitePoster.vue
@@ -1,10 +1,14 @@
 <template>
 	<div class="poster-page">
-		<section class="poster-wrap">
+		<section class="poster-wrap" v-entrance-transition>
 			<img v-if="posterImage" class="poster" :src="posterImage" alt="邀请注册海报" />
 			<div v-else class="empty" v-text="message" />
 		</section>
-		<div v-if="posterImage" class="actions">
+		<div
+			class="tips gray"
+			v-entrance-transition="70"
+		>微信内可能无法发起下载海报，可长按保存为图片、转发连接或使用默认浏览器打开</div>
+		<div v-if="posterImage" class="actions" v-entrance-transition="140">
 			<t-button
 				class="button bg-white"
 				variant="outline"
@@ -18,7 +22,7 @@
 				block
 				:loading="isDownloading"
 				@click="savePoster"
-			>保存海报</t-button>
+			>下载海报</t-button>
 		</div>
 	</div>
 </template>
@@ -110,6 +114,11 @@ onMounted(() => {
 		}
 	}
 
+	.tips {
+		font-size: .875rem;
+		text-indent: 2em;
+	}
+
 	.empty {
 		padding: 5rem 1rem;
 		color: var(--td-text-color-secondary);
diff --git a/src/pages/user/UserList.vue b/src/pages/user/UserList.vue
index d118ba2..ef1fbc4 100644
--- a/src/pages/user/UserList.vue
+++ b/src/pages/user/UserList.vue
@@ -10,36 +10,37 @@
 			@scrolltolower="fetch"
 		>
 			<t-cell-group theme="card">
-				<t-cell
-					class="item"
-					v-for="item in pageResult.list"
-					:key="item.id"
-					arrow
-					@click="toDetail(item)"
-				>
-					<template #left-icon>
-						<t-image :src="buildUserAvatar(item)" :alt="getUserName(item)" fit="cover" class="avatar" />
-					</template>
-					<template #title>
-						<div class="header">
-							<span class="name" v-text="getUserName(item)" />
-							<div class="meta-list">
-								<t-tag
-									v-for="(roleName, index) in getRoleNameList(item)"
-									:key="`${roleName}-${index}`"
-									class="meta"
-									size="small"
-									theme="success"
-									variant="outline"
-									:content="roleName"
-								/>
+					<t-cell
+						v-entrance-transition="index * 30"
+						v-for="(item, index) in pageResult.list"
+						:key="item.id"
+						class="item"
+						arrow
+						@click="toDetail(item)"
+					>
+						<template #left-icon>
+							<t-image :src="buildUserAvatar(item)" :alt="getUserName(item)" fit="cover" class="avatar" />
+						</template>
+						<template #title>
+							<div class="header">
+								<span class="name" v-text="getUserName(item)" />
+								<div class="meta-list">
+									<t-tag
+										v-for="(roleName, index) in getRoleNameList(item)"
+										:key="`${roleName}-${index}`"
+										class="meta"
+										size="small"
+										theme="success"
+										variant="outline"
+										:content="roleName"
+									/>
+								</div>
 							</div>
-						</div>
-					</template>
-					<template #description>
-						<telephone-link :value="item.user?.phoneNo" />
-					</template>
-				</t-cell>
+						</template>
+						<template #description>
+							<telephone-link :value="item.user?.phoneNo" />
+						</template>
+					</t-cell>
 			</t-cell-group>
 			<div v-if="!pageResult.list.length" class="load-state" v-text="isLoading ? '正在加载用户' : '暂无用户'" />
 			<div v-if="pageResult.list.length" class="load-state" v-text="isNoMore ? '已经到底了' : '上拉加载更多'" />
diff --git a/src/pages/user/UserPassword.vue b/src/pages/user/UserPassword.vue
index 47b4ee3..1689b31 100644
--- a/src/pages/user/UserPassword.vue
+++ b/src/pages/user/UserPassword.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="password-page">
-		<t-form class="form" label-align="left">
+		<t-form class="form" label-align="left" v-entrance-transition>
 			<t-form-item label="旧密码">
 				<t-input v-model.trim="formModel.oldPassword" type="password" placeholder="旧密码" borderless />
 			</t-form-item>
@@ -11,7 +11,13 @@
 				<t-input v-model.trim="formModel.confirmPassword" type="password" placeholder="确认密码" borderless />
 			</t-form-item>
 		</t-form>
-		<t-button class="save" theme="primary" :loading="isSaving" @click="savePassword">保存</t-button>
+		<t-button
+			class="save cell-button"
+			theme="primary"
+			:loading="isSaving"
+			v-entrance-transition="70"
+			@click="savePassword"
+		>保存</t-button>
 	</div>
 </template>
 
@@ -63,7 +69,10 @@ async function savePassword(): Promise<void> {
 
 <style scoped lang="less">
 .password-page {
+	gap: 1rem;
+	display: flex;
 	padding: calc(var(--app-nav-height) + 1rem) 0 4rem 0;
+	flex-direction: column;
 
 	.form {
 		padding: .5rem 0;
@@ -71,13 +80,6 @@ async function savePassword(): Promise<void> {
 		box-shadow: var(--td-shadow-1);
 		border-radius: 1.4rem;
 	}
-
-	.save {
-		left: 1rem;
-		right: 1rem;
-		bottom: calc(.75rem + env(safe-area-inset-bottom, 0));
-		position: fixed;
-	}
 }
 
 :global(html.theme-dark) {
diff --git a/src/pages/user/UserProfile.vue b/src/pages/user/UserProfile.vue
index c707e87..f8c7da5 100644
--- a/src/pages/user/UserProfile.vue
+++ b/src/pages/user/UserProfile.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="profile-page">
-		<t-form class="form" label-align="left">
+		<t-form class="form" label-align="left" v-entrance-transition>
 			<t-form-item label="头像">
 				<photo-field
 					v-model="formModel.avatar"
@@ -33,13 +33,14 @@
 				</div>
 			</t-form-item>
 		</t-form>
-		<t-cell-group theme="card">
+		<t-cell-group theme="card" v-entrance-transition="70">
 			<t-cell title="修改密码" arrow hover @click="toPassword" />
 		</t-cell-group>
 		<t-button
 			class="red bg-white cell-button"
 			variant="text"
 			block
+			v-entrance-transition="140"
 			@click="confirmLogout"
 		>退出登录</t-button>
 		<input
diff --git a/src/pages/user/UserRoleAssign.vue b/src/pages/user/UserRoleAssign.vue
index 8fee72a..ad959fc 100644
--- a/src/pages/user/UserRoleAssign.vue
+++ b/src/pages/user/UserRoleAssign.vue
@@ -18,20 +18,21 @@
 			</t-dropdown-menu>
 		</div>
 		<t-cell-group v-if="activeUser && roleList.length" theme="card">
-			<t-cell
-				v-for="item in roleList"
-				:key="item.id"
-				:title="item.name"
-				:description="item.code"
-			>
-				<template #right-icon>
-					<t-switch
-						v-can="userRoleWriteAccess"
-						:model-value="isRoleChecked(item.id)"
-						@change="value => setRoleChecked(item.id, value === true)"
-					/>
-				</template>
-			</t-cell>
+				<t-cell
+					v-entrance-transition="index * 30"
+					v-for="(item, index) in roleList"
+					:key="item.id"
+					:title="item.name"
+					:description="item.code"
+				>
+					<template #right-icon>
+						<t-switch
+							v-can="userRoleWriteAccess"
+							:model-value="isRoleChecked(item.id)"
+							@change="value => setRoleChecked(item.id, value === true)"
+						/>
+					</template>
+				</t-cell>
 		</t-cell-group>
 		<t-empty v-else-if="!isLoading" description="暂无可授权角色" />
 	</div>
diff --git a/src/styles/global.less b/src/styles/global.less
index 4a7254b..6198902 100644
--- a/src/styles/global.less
+++ b/src/styles/global.less
@@ -92,3 +92,18 @@ html.theme-dark body {
 		justify-content: center;
 	}
 }
+
+.entrance-fade-up-enter-active {
+	transition: opacity .4s ease, transform .4s ease;
+	transition-delay: var(--entrance-delay, 0ms);
+}
+
+.entrance-fade-up-enter-from {
+	opacity: 0;
+	transform: translate3d(0, 1rem, 0);
+}
+
+.entrance-fade-up-enter-to {
+	opacity: 1;
+	transform: translate3d(0, 0, 0);
+}