add entrance transition

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="请输入手机号" />

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>

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>

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);

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 ? '已经到底了' : '上拉加载更多'" />

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) {

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

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>