add event record calendar to record list

src/components/CustomerProfileCard.vue

@@ -64,6 +64,7 @@ function openPhotoViewer(): void {
 	gap: .875rem;
 	padding: .5rem;
 	display: flex;
+	box-shadow: var(--td-shadow-1);
 	background: #e6eeff;
 	border-radius: 1.125rem;
 

src/components/EventRecordCalendar.vue

@@ -47,6 +47,11 @@
 		</div>
 		<div v-if="loading" class="empty-block">正在加载登记日历</div>
 		<div v-else-if="!currentMonthFilteredRecords.length" class="empty-block" v-text="emptyText" />
+		<t-cell title="登记事件记录列表" arrow @click="openRecordList">
+			<template #left-icon>
+				<t-icon name="catalog" />
+			</template>
+		</t-cell>
 		<t-popup v-model="dayRecordVisible" placement="bottom" destroy-on-close>
 			<div class="day-record-panel">
 				<div class="popup-head">
@@ -112,6 +117,11 @@ interface CalendarDay {
 	records: EventRecord[];
 }
 
+export interface EventRecordCalendarListPayload {
+	monthCursor: Date;
+	selectedEventIdList: string[];
+}
+
 const props = withDefaults(defineProps<{
 	eventList: EventItem[];
 	customerName?: string;
@@ -131,6 +141,7 @@ const props = withDefaults(defineProps<{
 const emit = defineEmits<{
 	"update:modelValue": [value: Date];
 	"update:selectedEventIdList": [value: string[]];
+	list: [value: EventRecordCalendarListPayload];
 }>();
 
 const route = useRoute();
@@ -197,6 +208,13 @@ function openDayRecords(day: CalendarDay): void {
 	dayRecordVisible.value = true;
 }
 
+function openRecordList(): void {
+	emit("list", {
+		monthCursor: props.modelValue,
+		selectedEventIdList: props.selectedEventIdList
+	});
+}
+
 async function toRecordDetail(record: EventRecord): Promise<void> {
 	if (!record.id) {
 		return;
@@ -272,9 +290,8 @@ function addMonths(date: Date, months: number): Date {
 
 <style scoped lang="less">
 .register-record-calendar {
-	gap: .875rem;
-	padding: 1rem;
 	display: flex;
+	overflow: hidden;
 	background: rgba(255, 255, 255, .92);
 	box-shadow: var(--td-shadow-1);
 	border-radius: .75rem;
@@ -282,6 +299,7 @@ function addMonths(date: Date, months: number): Date {
 
 	.calendar-head {
 		display: flex;
+		padding: .5rem 1rem;
 		align-items: center;
 		justify-content: space-between;
 
@@ -312,12 +330,14 @@ function addMonths(date: Date, months: number): Date {
 
 	.week-line {
 		color: #52607a;
+		padding: 0 1rem;
 		font-size: .75rem;
 		text-align: center;
 	}
 
 	.calendar-grid {
 		gap: .375rem;
+		padding: 1rem 1rem .5rem 1rem;
 
 		.day-cell {
 			padding: .25rem;

src/components/PageTransition.vue

@@ -61,7 +61,12 @@ function parseTransitionDepth(value: unknown): number | undefined {
 		return undefined;
 	}
 
-	const depth = Number(value);
+	const text = value.trim();
+	if (!text) {
+		return undefined;
+	}
+
+	const depth = Number(text);
 	if (!Number.isInteger(depth) || depth < 0 || 20 < depth) {
 		return undefined;
 	}