timi/gao-customer-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add entrance transition

Browse Source
This commit is contained in:
Timi
2026-08-24 16:16:43 +08:00
parent 2efce6de11
commit 05aad89706
54 changed files with 874 additions and 694 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/CardContainer.vue
+4
View File
@@ -48,6 +48,10 @@ defineOptions({
.card-container {
margin: 0 1rem;
:deep(.t-cell-group--card) {
margin: 0;
}
.card-title {
.title {
src/components/CustomerList.vue
+1
View File
@@ -2,6 +2,7 @@
<div class="customer-list">
<t-cell-group v-if="customerList.length">
<t-cell
v-entrance-transition="index * 30"
v-for="(item, index) in customerList"
:key="item.id || item.code || index"
:note="item.code || ''"
src/components/EventSelector.vue
+5 -4
View File
@@ -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;
}
src/components/PhotoScroller.vue
+3 -3
View File
@@ -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;
src/components/TagSelector.vue
+2 -1
View File
@@ -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)" />
src/directives/entranceTransition.ts
+105
View File
@@ -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;
src/main.ts
+2
View File
@@ -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);
src/pages/customer/CustomerDataCharts.vue
+6 -1
View File
@@ -25,15 +25,17 @@
/>
</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-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"
@@ -43,18 +45,21 @@
@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"
src/pages/customer/CustomerDetail.vue
+11 -3
View File
@@ -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"
src/pages/customer/CustomerEdit.vue
+4 -3
View File
@@ -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"
>
src/pages/customer/CustomerList.vue
+2 -1
View File
@@ -39,9 +39,10 @@
>
<t-cell-group class="items" theme="card">
<customer-cell
class="item"
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}`)"
src/pages/customer/CustomerQrCode.vue
+5 -5
View File
@@ -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" />
src/pages/event/EventDetail.vue
+5 -9
View File
@@ -3,7 +3,7 @@
v-can="permissionCodes.event.read"
class="registration-event-detail"
>
<section v-if="event" class="event-header">
<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">
@@ -12,9 +12,8 @@
</div>
<div class="description" v-text="Text.display(event.description)" />
</div>
</section>
<t-cell-group v-if="event" title="基本信息" theme="card">
</div>
<t-cell-group v-entrance-transition="70" v-if="event" title="基本信息" theme="card">
<t-cell title="所属门店" :note="storeName" />
<t-cell title="事件颜色">
<template #note>
@@ -40,22 +39,19 @@
</template>
</t-cell>
</t-cell-group>
<t-cell-group v-if="event" title="登记配置" theme="card">
<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-if="event" title="生效时间" theme="card">
<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>
src/pages/event/EventEdit.vue
+2 -2
View File
@@ -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>
src/pages/event/EventList.vue
+3 -2
View File
@@ -11,9 +11,10 @@
>
<t-cell-group theme="card">
<t-cell
class="item"
v-for="item in visibleEventList"
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)"
src/pages/event/EventRecordDetail.vue
+7 -4
View File
@@ -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
v-entrance-transition="140"
v-if="record"
class="photo-panel"
:model-value="recordPhotoList"
:photo-items="recordPhotoItemList"
:show-add="false"
:show-remove="false"
title="登记照片"
/>
</section>
<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;
src/pages/event/EventRecordEdit.vue
+4 -3
View File
@@ -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;
}
src/pages/event/EventRecordList.vue
+3 -2
View File
@@ -33,7 +33,7 @@
@scrolltolower="loadRecords"
>
<div class="list-wrapper">
<t-cell-group class="summary" theme="card">
<t-cell-group v-entrance-transition class="summary" theme="card">
<t-cell
title="开始时间"
:note="dateRange[0] || '-'"
@@ -56,7 +56,8 @@
theme="card"
>
<t-swipe-cell
v-for="item in pageResult.list"
v-entrance-transition="index * 30"
v-for="(item, index) in pageResult.list"
:key="item.id"
class="item"
>
src/pages/event/EventRecordRank.vue
+3 -2
View File
@@ -48,10 +48,11 @@
theme="card"
>
<customer-cell
class="item"
:class="{ 'in-top3': index < 3}"
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"
src/pages/event/EventSort.vue
+3 -2
View File
@@ -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 }" />
src/pages/home/QuickEntryPage.vue
+2 -2
View File
@@ -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;
src/pages/permission/PermissionList.vue
+4 -3
View File
@@ -7,7 +7,7 @@
@refresh="refresh"
>
<div class="content">
<t-cell-group class="header" theme="card">
<t-cell-group v-entrance-transition class="header" theme="card">
<t-cell title="当前账号角色聚合权限 P">
<template #description>
<div>你拥有以下权限，可执行权限对应的功能，这些权限来自上级角色直接授权或子角色继承。</div>
@@ -17,14 +17,15 @@
</t-cell-group>
<t-cell-group v-if="sortedPermissions.length" theme="card">
<t-swipe-cell
v-for="item in sortedPermissions"
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>
src/pages/permission/PermissionSettings.vue
+1 -2
View File
@@ -57,7 +57,7 @@
</template>
</t-cell>
</t-cell-group>
<t-cell-group title="当前角色结构" theme="card">
<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"
@@ -181,4 +181,3 @@ onMounted(async () => {
}
}
</style>
src/pages/permission/RoleDelegationPermissionAssign.vue
+2 -1
View File
@@ -20,7 +20,8 @@
theme="card"
>
<t-cell
v-for="item in grantablePermissionList"
v-entrance-transition="index * 30"
v-for="(item, index) in grantablePermissionList"
:key="item.id"
:title="item.name || item.code"
>
src/pages/permission/RoleEdit.vue
+3 -5
View File
@@ -1,6 +1,6 @@
<template>
<div v-can="pageAccess" class="role-edit">
<t-form class="form" label-align="left">
<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>
@@ -28,7 +28,7 @@
<div class="picker-text" v-text="selectedChildRoleName" />
</t-form-item>
</t-form>
<t-cell-group v-if="!isCreateMode" title="权限授权" theme="card">
<t-cell-group v-entrance-transition="70" v-if="!isCreateMode" title="权限授权" theme="card">
<t-cell
v-can="rolePermissionReadAccess"
title="直接授权权限 P"
@@ -50,8 +50,7 @@
</template>
</t-cell>
</t-cell-group>
<template v-if="aggregatePermissionList.length">
<card-container title="聚合权限 P">
<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">
src/pages/permission/RoleList.vue
+2 -1
View File
@@ -8,7 +8,8 @@
>
<t-cell-group v-if="sortedRoles.length" theme="card">
<t-swipe-cell
v-for="item in sortedRoles"
v-entrance-transition="index * 30"
v-for="(item, index) in sortedRoles"
:key="item.id"
class="item"
>
src/pages/permission/RolePermissionAssign.vue
+3 -2
View File
@@ -25,9 +25,10 @@
theme="card"
>
<t-cell
:class="{ inherited: isPermissionInherited(item.id) }"
v-for="item in grantablePermissionList"
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"
>
src/pages/point/PointAccountDetail.vue
+4 -7
View File
@@ -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>
src/pages/point/PointAccountList.vue
+2 -1
View File
@@ -17,7 +17,8 @@
>
<t-cell-group v-if="pageResult.list.length" class="list" theme="card">
<customer-cell
v-for="item in pageResult.list"
v-entrance-transition="index * 30"
v-for="(item, index) in pageResult.list"
:key="item.id"
:customer="item.customer"
class="item"
src/pages/point/PointAdjust.vue
+10 -4
View File
@@ -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
class="cell-button"
theme="primary"
:loading="isSaving"
:disabled="!canSubmit"
block
v-entrance-transition="70"
@click="submitAdjust"
>
提交调整
</t-button>
</div>
<customer-selector
v-model="selectedCustomerId"
v-model:visible="selectorVisible"
src/pages/point/PointLedgerDetail.vue
+6 -9
View File
@@ -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)" />
src/pages/point/PointLedgerList.vue
+2 -1
View File
@@ -73,7 +73,8 @@
>
<t-cell-group v-if="pageResult.list.length" class="list" theme="card">
<t-cell
v-for="item in pageResult.list"
v-entrance-transition="index * 30"
v-for="(item, index) in pageResult.list"
:key="item.id"
class="item"
:arrow="!!item.id"
src/pages/point/PointRuleDetail.vue
+11 -11
View File
@@ -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>
src/pages/point/PointRuleEdit.vue
+11 -18
View File
@@ -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,25 +82,24 @@
</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-if="!isCreateMode"
class="delete red bg-white cell-button"
v-can="permissionCodes.pointRule.delete"
class="delete bg-white"
theme="danger"
variant="outline"
:loading="isRemoving"
variant="text"
block
@click="confirmRemove"
>
删除
</t-button>
</div>
</div>
<t-popup v-model="storePickerVisible" placement="bottom">
<t-picker
v-model="storePickerDraft"
@@ -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%;
}
margin-top: 1rem;
}
}
src/pages/point/PointRuleList.vue
+2 -1
View File
@@ -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>
src/pages/point/PointRuleSort.vue
+7 -2
View File
@@ -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>
src/pages/setting/AppSettings.vue
+2 -2
View File
@@ -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)" />
src/pages/store/StoreBusinessDayCalendar.vue
+2 -1
View File
@@ -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"
src/pages/store/StoreDataCharts.vue
+7 -8
View File
@@ -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>
src/pages/store/StoreEdit.vue
+3 -3
View File
@@ -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"
src/pages/store/StoreList.vue
+3 -2
View File
@@ -9,9 +9,10 @@
>
<t-cell-group theme="card">
<t-cell
class="item"
v-for="item in pageResult.list"
v-entrance-transition="index * 30"
v-for="(item, index) in pageResult.list"
:key="item.id"
class="item"
arrow
@click="toEdit(item)"
>
src/pages/tabs/HomeTab.vue
+8 -2
View File
@@ -1,7 +1,13 @@
<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
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" />
@@ -9,7 +15,7 @@
<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>
src/pages/tabs/SettingTab.vue
+8 -2
View File
@@ -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"
src/pages/tabs/StoreTab.vue
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<div class="store-tab">
<section v-if="canViewStore || canManageStore" class="store-header">
<section v-entrance-transition v-if="canViewStore || canManageStore" class="store-header">
<t-cell-group class="store-card" theme="card">
<t-cell
v-if="canViewStore"
src/pages/tag/TagList.vue
+3 -2
View File
@@ -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)" />
src/pages/user/InviteRegister.vue
+3 -3
View File
@@ -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
+8 -3
View File
@@ -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
View File
@@ -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
+12 -3
View File
@@ -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
+3 -2
View File
@@ -11,9 +11,10 @@
>
<t-cell-group theme="card">
<t-cell
class="item"
v-for="item in pageResult.list"
v-entrance-transition="index * 30"
v-for="(item, index) in pageResult.list"
:key="item.id"
class="item"
arrow
@click="toDetail(item)"
>
src/pages/user/UserPassword.vue
+11 -9
View File
@@ -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
+3 -2
View File
@@ -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
+2 -1
View File
@@ -19,7 +19,8 @@
</div>
<t-cell-group v-if="activeUser && roleList.length" theme="card">
<t-cell
v-for="item in roleList"
v-entrance-transition="index * 30"
v-for="(item, index) in roleList"
:key="item.id"
:title="item.name"
:description="item.code"
src/styles/global.less
+15
View File
@@ -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);
}