add entrance transition

2026-08-24 16:16:43 +08:00
parent 2efce6de11
commit 05aad89706
54 changed files with 874 additions and 694 deletions
@@ -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>