diff --git a/src/assets/styles/global.less b/src/assets/styles/global.less
index 4c5d5dd..5150856 100644
--- a/src/assets/styles/global.less
+++ b/src/assets/styles/global.less
@@ -84,7 +84,7 @@ html.theme-dark body {
 	gap: 1rem;
 }
 
-.load-state {
+.center-tips {
 	color: var(--tui-gray);
 	padding: .75rem;
 	text-align: center;
diff --git a/src/components/CustomerSelector.vue b/src/components/CustomerSelector.vue
index 5b2c5ff..ace3375 100644
--- a/src/components/CustomerSelector.vue
+++ b/src/components/CustomerSelector.vue
@@ -261,7 +261,7 @@ onUnmounted(() => {
 		background: rgba(15, 23, 42, .96);
 	}
 
-	.load-state {
+	.center-tips {
 		color: #94a3b8;
 	}
 }
diff --git a/src/components/EventSelector.vue b/src/components/EventSelector.vue
index 3380a08..07b8e86 100644
--- a/src/components/EventSelector.vue
+++ b/src/components/EventSelector.vue
@@ -2,26 +2,35 @@
 	<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
+			<div
 				v-for="(item, index) in props.eventList"
 				:key="item.id || item.name"
-				type="button"
-				class="item bg-white"
-				:class="{selected: isSelected(item)}"
-				:title="item.name"
-				:disabled="props.disabled || !normalizeEventId(item)"
-				:aria-pressed="isSelected(item)"
+				class="item-wrapper"
 				v-entrance-transition="index * 30"
-				@click="toggleEvent(item)"
 			>
+				<button
+					type="button"
+					class="item bg-white"
+					:class="{selected: isSelected(item), 'package-event': item.bizType === 'PACKAGE_PURCHASE'}"
+					:title="item.name"
+					:disabled="props.disabled || !normalizeEventId(item)"
+					:aria-pressed="isSelected(item)"
+					@click="toggleEvent(item)"
+				>
+					<span
+						class="swatch"
+						:style="{background: item.color || defaultColor}"
+						aria-hidden="true"
+					/>
+					<span class="clip-text" v-text="item.name" />
+					<span v-if="isSelected(item)" class="mark" aria-hidden="true" />
+				</button>
 				<span
-					class="swatch"
-					:style="{background: item.color || defaultColor}"
-					aria-hidden="true"
+					v-if="item.bizType === 'PACKAGE_PURCHASE'"
+					class="package-badge white clip-text"
+					v-text="item.packageConfig?.name || '未配置套餐'"
 				/>
-				<span class="clip-text" v-text="item.name" />
-				<span v-if="isSelected(item)" class="mark" aria-hidden="true" />
-			</button>
+			</div>
 		</div>
 		<div v-else class="empty-block">暂无可用登记事件</div>
 	</div>
@@ -35,12 +44,16 @@ interface Props {
 	label?: string;
 	requiredMark?: boolean;
 	disabled?: boolean;
+	selectionMode?: SelectionMode;
 }
 
+type SelectionMode = "single" | "multiple";
+
 const props = withDefaults(defineProps<Props>(), {
 	label: "登记事件",
 	requiredMark: false,
-	disabled: false
+	disabled: false,
+	selectionMode: "multiple"
 });
 
 const modelValue = defineModel<string[]>({ required: true });
@@ -63,6 +76,10 @@ function toggleEvent(item: EventItem): void {
 	if (props.disabled || !eventId) {
 		return;
 	}
+	if (props.selectionMode === "single") {
+		modelValue.value = [eventId];
+		return;
+	}
 	if (modelValue.value.includes(eventId)) {
 		modelValue.value = modelValue.value.filter(id => id !== eventId);
 		return;
@@ -94,6 +111,26 @@ function toggleEvent(item: EventItem): void {
 		grid-template-columns: repeat(2, minmax(0, 1fr));
 	}
 
+	.item-wrapper {
+		width: 100%;
+		min-width: 0;
+		position: relative;
+
+		.package-badge {
+			top: -.375rem;
+			right: -.375rem;
+			z-index: 1;
+			padding: .125rem .375rem;
+			position: absolute;
+			max-width: 50%;
+			font-size: .6875rem;
+			line-height: 1.25;
+			background: var(--td-error-color);
+			border-radius: .35rem;
+			pointer-events: none;
+		}
+	}
+
 	.item {
 		gap: .5rem;
 		width: 100%;
diff --git a/src/pages/customer/CustomerList.vue b/src/pages/customer/CustomerList.vue
index 9b07c16..a91fc7e 100644
--- a/src/pages/customer/CustomerList.vue
+++ b/src/pages/customer/CustomerList.vue
@@ -66,8 +66,8 @@
 					</template>
 				</t-swipe-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 ? '已经到底了' : '上拉加载更多'" />
+			<div v-if="!pageResult.list.length" class="center-tips" v-text="isLoading ? '正在加载客户' : '暂无客户数据'" />
+			<div v-if="pageResult.list.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
 		</t-pull-down-refresh>
 		<tag-selector
 			v-model="selectedTagIdList"
@@ -370,7 +370,7 @@ async function doExport(): Promise<void> {
 
 		.items {
 
-			.load-state,
+			.center-tips,
 			.item,
 			.empty-block {
 				color: #e2e8f0;
diff --git a/src/pages/event/EventList.vue b/src/pages/event/EventList.vue
index ea5cc84..b76de86 100644
--- a/src/pages/event/EventList.vue
+++ b/src/pages/event/EventList.vue
@@ -69,7 +69,7 @@
 				</t-swipe-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 ? '已经到底了' : '上拉加载更多'" />
+			<div v-if="visibleEventList.length" class="center-tips" v-text="isNoMore ? '已经到底了' : '上拉加载更多'" />
 		</t-pull-down-refresh>
 	</div>
 	<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
diff --git a/src/pages/event/EventRecordEdit.vue b/src/pages/event/EventRecordEdit.vue
index 81e1996..4af42af 100644
--- a/src/pages/event/EventRecordEdit.vue
+++ b/src/pages/event/EventRecordEdit.vue
@@ -50,17 +50,19 @@
 				class="event-selector"
 				:event-list="eventList"
 				:disabled="isEditMode"
+				:selection-mode="isPackagePurchaseSelected ? 'single' : 'multiple'"
 				required-mark
 				@update:model-value="handleEventSelectionChange"
 			/>
 			<event-option-selector
+				v-if="!isPackagePurchaseSelected"
 				class="option-selector"
 				v-model="selectedOptionSelectionMap"
 				:event-list="eventList"
 				:selected-event-id-list="selectedEventIdList"
 				:disabled="isSaving"
 			/>
-			<div v-if="!isEditMode && selectedNumberEventList.length" class="event-value-list">
+			<div v-if="!isEditMode && !isPackagePurchaseSelected && selectedNumberEventList.length" class="event-value-list">
 				<t-form-item
 					v-for="item in selectedNumberEventList"
 					:key="item.id"
@@ -77,6 +79,13 @@
 					/>
 				</t-form-item>
 			</div>
+			<package-purchase-form
+				v-if="isPackagePurchaseSelected"
+				v-model:item-list="packagePurchaseItemList"
+				v-model:sale-amount="saleAmountText"
+				:can-price-override="canPriceOverride"
+				:package-config="selectedPackageConfig"
+			/>
 			<t-form-item v-if="showSourceValueInput" label="积分动作">
 				<span class="picker-text" v-text="getPointActionText(sourceValueAction)" />
 			</t-form-item>
@@ -111,7 +120,7 @@
 			<t-form-item v-else label="登记时间" content-align="right">
 				<span class="readonly-time" v-text="registeredAtText || '此刻'" />
 			</t-form-item>
-			<t-form-item label="登记备注">
+			<t-form-item :label="isPackagePurchaseSelected ? '购买备注' : '登记备注'">
 				<t-textarea
 					v-model.trim="note"
 					class="textarea"
@@ -157,7 +166,7 @@
 			v-if="!isEditMode"
 			v-model="selectedCustomerIdList"
 			v-model:visible="selectorVisible"
-			:selection-mode="isEditMode ? 'single' : 'multiple'"
+			:selection-mode="isEditMode || isPackagePurchaseSelected ? 'single' : 'multiple'"
 			@change="handleCustomerChange"
 		/>
 		<t-popup v-model="selectedCustomerListVisible" placement="bottom">
@@ -201,7 +210,7 @@
 
 <script setup lang="ts">
 import { Time } from "timi-web";
-import { AttachmentAPI, type Attachment, useUserStore } from "timi-web-api";
+import { useUserStore } from "timi-web-api";
 import { Message } from "@/utils/message";
 import CustomerAPI from "@/api/CustomerAPI";
 import EventAPI from "@/api/EventAPI";
@@ -213,20 +222,21 @@ import CustomerSelector from "@/components/CustomerSelector.vue";
 import EventOptionSelector from "@/components/EventOptionSelector.vue";
 import PhotoScroller from "@/components/PhotoScroller.vue";
 import EventSelector from "@/components/EventSelector.vue";
+import PackagePurchaseForm from "@/pages/event/component/PackagePurchaseForm.vue";
+import { useEventRecordPhoto } from "@/pages/event/component/useEventRecordPhoto";
+import { usePackagePurchaseRecord } from "@/pages/event/component/usePackagePurchaseRecord";
 import { useNavBarStore } from "@/store/navBarStore";
 import { useSettingStore } from "@/store/settingStore";
 import type { Customer } from "@/types/Customer";
 import type { EventItem, EventOptionSelectionMap } from "@/types/EventItem";
 import type { EventRecord } from "@/types/EventRecord";
 import type { PointAction } from "@/types/Point";
-import { getAttachmentReadURL } from "@/utils/attachment";
 import { isPackagePurchaseEvent } from "@/utils/event";
 import { buildEventOptionSelectionMap, resolveSelectedOptionGroupList, validateEventOptionSelection } from "@/utils/eventOption";
 import { getEventRecordPhotoURL, hasPhotoAttachment } from "@/utils/eventRecord";
 import { getEventNumberValuePlaceholder, resolveEventNumberValue } from "@/utils/eventValue";
 import { permissionCodes } from "@/utils/permission";
 import { loadSourceValueConfig, type SourceValueConfig } from "@/utils/point";
-import { compressUploadImageList } from "@/utils/imageCompression";
 
 defineOptions({
 	name: "EventRecordEdit"
@@ -238,14 +248,6 @@ const settingStore = useSettingStore();
 const userStore = useUserStore();
 const navBarStore = useNavBarStore();
 
-type EditablePhoto = {
-	attachment?: Partial<Attachment>;
-	attachType?: string;
-	previewUrl?: string;
-	tempFileId?: string;
-	url: string;
-};
-
 // ---------- 路由权限 ----------
 
 const routeId = computed(() => String(route.params.id || ""));
@@ -329,10 +331,10 @@ async function loadSelectedCustomer(): Promise<void> {
 	}
 
 	if (customer.id) {
-		selectedCustomerIdList.value = isEditMode.value
+		selectedCustomerIdList.value = isEditMode.value || isPackagePurchaseSelected.value
 			? [customer.id]
 			: [...new Set([...selectedCustomerIdList.value, customer.id])];
-		selectedCustomerList.value = isEditMode.value
+		selectedCustomerList.value = isEditMode.value || isPackagePurchaseSelected.value
 			? [customer]
 			: [...selectedCustomerList.value.filter(item => item.id !== customer.id), customer];
 	}
@@ -436,27 +438,6 @@ const eventNameMap = computed(() => {
 	return map;
 });
 
-async function handleEventSelectionChange(eventIdList: string[]): Promise<void> {
-	const packageEvent = eventIdList
-		.map(eventId => eventList.value.find(item => item.id === eventId))
-		.find(item => isPackagePurchaseEvent(item));
-	if (!isEditMode.value && packageEvent?.id) {
-		if (!userStore.hasPermissions(permissionCodes.customerPackage.create)) {
-			Message.warning("当前账号没有套餐购买权限");
-			return;
-		}
-		await router.push({
-			name: "CustomerPackagePurchase",
-			query: {
-				eventId: packageEvent.id,
-				...(selectedCustomer.value?.id ? { customerId: selectedCustomer.value.id } : {})
-			}
-		});
-		return;
-	}
-	selectedEventIdList.value = eventIdList;
-}
-
 function appendRecordEvent(record: EventRecord): void {
 	if (!record.event?.id || eventList.value.some(item => item.id === record.event?.id)) {
 		return;
@@ -519,6 +500,7 @@ let sourceValueLoadToken = 0;
 
 const showSourceValueInput = computed(() => (
 	!isEditMode.value
+	&& !isPackagePurchaseSelected.value
 	&& userStore.hasPermissions(permissionCodes.point.sourceValue)
 	&& !!sourceValueConfig.value
 ));
@@ -531,7 +513,7 @@ async function loadSourceValueRule(): Promise<void> {
 	const token = sourceValueLoadToken + 1;
 	sourceValueLoadToken = token;
 	sourceValueConfig.value = undefined;
-	if (isEditMode.value || !userStore.hasPermissions(permissionCodes.point.sourceValue) || !selectedEventIdList.value.length) {
+	if (isEditMode.value || isPackagePurchaseSelected.value || !userStore.hasPermissions(permissionCodes.point.sourceValue) || !selectedEventIdList.value.length) {
 		return;
 	}
 
@@ -557,48 +539,17 @@ function getPointActionText(action: PointAction): string {
 
 // ---------- 照片 ----------
 
-const recordPhotoInputRef = ref<HTMLInputElement>();
-const photoItemList = ref<EditablePhoto[]>([]);
-const isPhotoUploading = ref(false);
-
-const photoList = computed<string[]>({
-	get() {
-		return photoItemList.value.map(item => item.url);
-	},
-	set(value) {
-		const urlSet = new Set(value);
-		photoItemList.value = photoItemList.value.filter(item => urlSet.has(item.url));
-	}
-});
-
-function capturePhoto(): void {
-	recordPhotoInputRef.value?.click();
-}
-
-async function handleRecordPhotoSelected(event: Event): Promise<void> {
-	const input = event.target as HTMLInputElement;
-	const fileList = Array.from(input.files || []);
-	if (!fileList.length) {
-		return;
-	}
-	isPhotoUploading.value = true;
-	try {
-		const compressedFileList = await compressUploadImageList(fileList);
-		const tempFileList = await AttachmentAPI.upload(compressedFileList);
-		for (const item of tempFileList) {
-			if (!item.id) {
-				continue;
-			}
-			photoItemList.value.push({
-				tempFileId: item.id,
-				url: AttachmentAPI.getTempReadURL(item.id)
-			});
-		}
-	} finally {
-		isPhotoUploading.value = false;
-		input.value = "";
-	}
-}
+const {
+	recordPhotoInputRef,
+	photoItemList,
+	isPhotoUploading,
+	photoList,
+	capturePhoto,
+	handleRecordPhotoSelected,
+	setExistingPhotoList,
+	buildTempFileIdList,
+	buildPhotoAttachmentList
+} = useEventRecordPhoto();
 
 // ---------- 登记时间 ----------
 
@@ -640,6 +591,28 @@ function parseDateTime(value: string): Date {
 // ---------- 提交 ----------
 
 const note = ref("");
+const {
+	selectedPackageEvent,
+	isPackagePurchaseSelected,
+	selectedPackageConfig,
+	canPriceOverride,
+	saleAmountText,
+	packagePurchaseItemList,
+	handleEventSelectionChange,
+	applySelectedPackageEvent,
+	resetPackagePurchaseForm,
+	submitPackagePurchase,
+	validatePackagePurchaseForm
+} = usePackagePurchaseRecord({
+	eventList,
+	selectedEventIdList,
+	selectedCustomerIdList,
+	selectedCustomerList,
+	note,
+	hasPermission: permissionCode => userStore.hasPermissions(permissionCode),
+	buildRegisteredAt,
+	buildTempFileIdList
+});
 const isSaving = ref(false);
 const editingRecord = ref<EventRecord>();
 
@@ -662,40 +635,58 @@ async function submitRecord(): Promise<void> {
 			return;
 		}
 
-		const customerIdList = selectedCustomerList.value.map(customer => customer.id).filter((item): item is string => !!item);
-		// 后端批量接口仍按选择顺序逐条处理，并为重复临时附件生成副本。
-		await EventRecordAPI.createBatch(selectedEventIdList.value.map(eventId => ({
-			eventId,
-			customerIdList,
-			selectedOptionGroupList: resolveRecordOptionGroupList(eventId),
-			remark: note.value || "客户现场登记",
-			registeredAt: buildRegisteredAt(),
-			pointValue: showSourceValueInput.value ? resolveSourceValue() : undefined,
-			numberValue: resolveNumberValue(eventId),
-			attachmentList: buildTempFileIdList().map(tempFileId => ({
-				tempFileId,
-				attachType: "PHOTO"
-			}))
-		})));
-		selectedCustomerList.value = [];
-		selectedCustomerIdList.value = [];
-		note.value = "";
-		pointValueText.value = "";
-		photoItemList.value = [];
-		for (const eventId of Object.keys(numberValueTextMap)) {
-			delete numberValueTextMap[eventId];
-		}
-		for (const eventId of Object.keys(selectedOptionSelectionMap)) {
-			delete selectedOptionSelectionMap[eventId];
+		const success = isPackagePurchaseSelected.value
+			? await submitPackagePurchase()
+			: await submitEventRecords();
+		if (!success) {
+			return;
 		}
+		resetCreateForm();
 		await loadRecentRecordList();
 		await settingStore.playRegisterSuccessSound();
-		Message.success("登记已提交");
+		Message.success(isPackagePurchaseSelected.value ? "套餐购买已提交" : "登记已提交");
 		await router.replace("/customers");
 	} finally {
 		isSaving.value = false;
 	}
 }
+async function submitEventRecords(): Promise<boolean> {
+	const customerIdList = selectedCustomerList.value.map(customer => customer.id).filter((item): item is string => !!item);
+	// 后端批量接口仍按选择顺序逐条处理，并为重复临时附件生成副本。
+	await EventRecordAPI.createBatch(selectedEventIdList.value.map(eventId => ({
+		eventId,
+		customerIdList,
+		selectedOptionGroupList: resolveRecordOptionGroupList(eventId),
+		remark: note.value || "客户现场登记",
+		registeredAt: buildRegisteredAt(),
+		pointValue: showSourceValueInput.value ? resolveSourceValue() : undefined,
+		numberValue: resolveNumberValue(eventId),
+		attachmentList: buildTempFileIdList().map(tempFileId => ({
+			tempFileId,
+			attachType: "PHOTO"
+		}))
+	})));
+	return true;
+}
+
+function resetCreateForm(): void {
+	selectedCustomerList.value = [];
+	selectedCustomerIdList.value = [];
+	note.value = "";
+	pointValueText.value = "";
+	photoItemList.value = [];
+	for (const eventId of Object.keys(numberValueTextMap)) {
+		delete numberValueTextMap[eventId];
+	}
+	for (const eventId of Object.keys(selectedOptionSelectionMap)) {
+		delete selectedOptionSelectionMap[eventId];
+	}
+	if (selectedPackageEvent.value) {
+		applySelectedPackageEvent(selectedPackageEvent.value);
+	} else {
+		resetPackagePurchaseForm();
+	}
+}
 
 function validateForm(): boolean {
 	if (!selectedCustomerList.value.some(item => !!item.id)) {
@@ -706,9 +697,8 @@ function validateForm(): boolean {
 		Message.warning("请至少选择一个登记事件");
 		return false;
 	}
-	if (selectedEventIdList.value.some(eventId => isPackagePurchaseEvent(eventList.value.find(item => item.id === eventId)))) {
-		Message.warning("套餐购买事件必须通过客户套餐购买页面登记");
-		return false;
+	if (isPackagePurchaseSelected.value) {
+		return validatePackagePurchaseForm() && validateRequiredPhotoList();
 	}
 	for (const eventId of selectedEventIdList.value) {
 		const event = eventList.value.find(item => item.id === eventId);
@@ -738,7 +728,6 @@ function validateForm(): boolean {
 
 	return true;
 }
-
 function validateRequiredPhotoList(): boolean {
 	const event = selectedRequiredPhotoEventList.value[0];
 	if (event && !hasPhotoAttachment(photoItemList.value)) {
@@ -766,27 +755,6 @@ async function updateRecord(): Promise<void> {
 	Message.success("记录已保存");
 	await router.replace(`/management/registration-event-records/${editingRecord.value.id}`);
 }
-
-function buildTempFileIdList(): string[] {
-	return photoItemList.value.map(item => item.tempFileId).filter((item): item is string => !!item);
-}
-
-function buildPhotoAttachmentList(): Array<Partial<Attachment>> {
-	return photoItemList.value.map((item) => {
-		if (item.attachment) {
-			return {
-				...item.attachment,
-				attachType: item.attachType || item.attachment.attachType || "PHOTO"
-			};
-		}
-
-		return {
-			tempFileId: item.tempFileId,
-			attachType: item.attachType || "PHOTO"
-		};
-	});
-}
-
 // ---------- 页面数据 ----------
 
 async function loadPageData(): Promise<void> {
@@ -822,14 +790,7 @@ async function loadRecordForEdit(): Promise<void> {
 	registeredAtText.value = record.registeredAt ? Time.formatDateTime(new Date(record.registeredAt)) : "";
 	note.value = record.remark || "";
 	pointValueText.value = "";
-	photoItemList.value = (record.attachmentList || [])
-		.filter(item => item.attachType === "PHOTO" || !item.attachType)
-		.filter(item => !!item.id)
-		.map(item => ({
-			attachment: item,
-			previewUrl: getAttachmentReadURL(item.id || ""),
-			url: getAttachmentReadURL(item.id || "", 90)
-		}));
+	setExistingPhotoList(record.attachmentList);
 	await loadRecentRecordList();
 }
 
diff --git a/src/pages/event/EventRecordList.vue b/src/pages/event/EventRecordList.vue
index 1cf4af2..b7cc764 100644
--- a/src/pages/event/EventRecordList.vue
+++ b/src/pages/event/EventRecordList.vue
@@ -85,8 +85,8 @@
 						@updated="reloadRecords"
 					/>
 				</t-cell-group>
-				<div v-else class="load-state" v-text="isLoading ? '正在加载登记事件记录' : '暂无登记事件记录'" />
-				<div v-if="pageResult.list.length" class="load-state" v-text="loadStateText" />
+				<div v-else class="center-tips" v-text="isLoading ? '正在加载登记事件记录' : '暂无登记事件记录'" />
+				<div v-if="pageResult.list.length" class="center-tips" v-text="loadStateText" />
 			</div>
 		</t-pull-down-refresh>
 	</div>
@@ -802,7 +802,7 @@ onUnmounted(() => {
 		}
 
 		.empty-block,
-		.load-state,
+		.center-tips,
 		.summary {
 			color: #94a3b8;
 		}
diff --git a/src/pages/event/EventRecordRank.vue b/src/pages/event/EventRecordRank.vue
index f3af682..62377ac 100644
--- a/src/pages/event/EventRecordRank.vue
+++ b/src/pages/event/EventRecordRank.vue
@@ -98,8 +98,8 @@
 						</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" />
+			<div v-else class="center-tips" v-text="emptyStateText" />
+			<div v-if="pageResult.list.length" class="center-tips" v-text="loadStateText" />
 		</t-pull-down-refresh>
 	</div>
 	<t-popup v-model="startVisible" placement="bottom">
diff --git a/src/pages/event/component/EventOptionEditor.vue b/src/pages/event/component/EventOptionEditor.vue
index a301709..9602274 100644
--- a/src/pages/event/component/EventOptionEditor.vue
+++ b/src/pages/event/component/EventOptionEditor.vue
@@ -140,7 +140,7 @@
 					</t-collapse-panel>
 				</vue-draggable-next>
 			</t-collapse>
-			<div v-else class="load-state">暂未配置登记选项，点击上方按钮新增。</div>
+			<div v-else class="center-tips">暂未配置登记选项，点击上方按钮新增。</div>
 		</div>
 	</bottom-popup>
 </template>
diff --git a/src/pages/event/component/PackagePurchaseForm.vue b/src/pages/event/component/PackagePurchaseForm.vue
new file mode 100644
index 0000000..83b6e16
--- /dev/null
+++ b/src/pages/event/component/PackagePurchaseForm.vue
@@ -0,0 +1,137 @@
+<template>
+	<section class="package-purchase-form">
+		<div v-if="props.packageConfig" class="config-summary">
+			<div class="header">
+				<div class="text-bold"  v-text="props.packageConfig.name || '未命名套餐'" />
+				<div class="price">
+					<span class="label gray">标准价：</span>
+					<span class="value red text-bold" v-text="formatPackageAmount(props.packageConfig.standardAmount)" />
+				</div>
+			</div>
+			<div class="description" v-text="props.packageConfig.description" />
+		</div>
+		<div v-else class="center-tips" v-text="'当前购买事件未返回绑定套餐，无法完成购买。'" />
+		<t-form-item label="成交价（元）" label-width="6rem" required-mark>
+			<t-input
+				v-model.trim="saleAmount"
+				type="number"
+				align="right"
+				borderless
+				:readonly="!props.canPriceOverride"
+				placeholder="请输入成交价"
+			/>
+		</t-form-item>
+		<t-form-item label-width="0">
+			<div class="items">
+				<div class="title">
+					<strong>购买权益明细</strong>
+					<span v-if="!props.canPriceOverride">当前账号无定制权限，明细不可修改</span>
+				</div>
+				<t-form-item
+					v-for="(item, index) in itemList"
+					:key="`${index}-${item.productName}-${item.unit}`"
+					class="item"
+					:label="item.productName"
+				>
+					<t-input
+						:model-value="item.totalQuantity"
+						type="number"
+						:readonly="!props.canPriceOverride"
+						placeholder="总权益数量"
+						borderless
+						align="right"
+						@update:model-value="updateItemQuantity(index, $event)"
+					>
+						<template #suffix-icon>
+							<span class="unit" v-text="item.unit" />
+						</template>
+					</t-input>
+				</t-form-item>
+				<div v-if="!itemList.length" class="center-tips" v-text="'当前套餐暂无权益明细'" />
+			</div>
+		</t-form-item>
+	</section>
+</template>
+
+<script setup lang="ts">
+import type { GaoPackageConfig, PackagePurchaseItem } from "@/types/Package";
+import { formatPackageAmount } from "@/utils/package";
+
+defineOptions({ name: "PackagePurchaseForm" });
+
+interface Props {
+	packageConfig?: GaoPackageConfig;
+	canPriceOverride: boolean;
+}
+
+const props = defineProps<Props>();
+const saleAmount = defineModel<string>("saleAmount", { required: true });
+const itemList = defineModel<PackagePurchaseItem[]>("itemList", { required: true });
+
+function updateItemQuantity(index: number, value: string | number): void {
+	itemList.value = itemList.value.map((item, itemIndex) => itemIndex === index ? {
+		...item,
+		totalQuantity: String(value)
+	} : item);
+}
+</script>
+
+<style scoped lang="less">
+.package-purchase-form {
+	gap: .75rem;
+	display: grid;
+	margin-top: 1rem;
+
+	.config-summary {
+		gap: .25rem;
+		margin: 0 1rem;
+		padding: .5rem .75rem;
+		display: flex;
+		background: var(--td-error-color-1);
+		border-radius: .75rem;
+		flex-direction: column;
+
+		.header {
+			display: flex;
+			justify-content: space-between;
+
+			.price {
+				display: flex;
+				align-items: baseline;
+
+				.label {
+					font-size: .75rem;
+				}
+
+				.value {
+					font-size: 1.75rem;
+					line-height: 1;
+				}
+			}
+		}
+	}
+
+	.items {
+		gap: .5rem;
+		display: grid;
+
+		.title {
+			font-size: .8125rem;
+			margin-bottom: .5rem;
+		}
+
+		.item {
+			border-radius: 1rem;
+			box-shadow: .25rem .25rem 1rem rgba(0, 0, 0, .08);
+
+			&::after {
+				display: none;
+			}
+
+			.unit {
+				font-size: 1rem;
+			}
+		}
+	}
+}
+</style>
diff --git a/src/pages/event/component/useEventRecordPhoto.ts b/src/pages/event/component/useEventRecordPhoto.ts
new file mode 100644
index 0000000..f95883e
--- /dev/null
+++ b/src/pages/event/component/useEventRecordPhoto.ts
@@ -0,0 +1,92 @@
+import { computed, ref } from "vue";
+import { AttachmentAPI, type Attachment } from "timi-web-api";
+import type { PhotoItem } from "@/types/Photo";
+import { getAttachmentReadURL } from "@/utils/attachment";
+import { compressUploadImageList } from "@/utils/imageCompression";
+
+export function useEventRecordPhoto() {
+	const recordPhotoInputRef = ref<HTMLInputElement>();
+	const photoItemList = ref<PhotoItem[]>([]);
+	const isPhotoUploading = ref(false);
+	const photoList = computed<string[]>({
+		get() {
+			return photoItemList.value.map(item => item.url);
+		},
+		set(value) {
+			const urlSet = new Set(value);
+			photoItemList.value = photoItemList.value.filter(item => urlSet.has(item.url));
+		}
+	});
+
+	function capturePhoto(): void {
+		recordPhotoInputRef.value?.click();
+	}
+
+	async function handleRecordPhotoSelected(event: Event): Promise<void> {
+		const input = event.target as HTMLInputElement;
+		const fileList = Array.from(input.files || []);
+		if (!fileList.length) {
+			return;
+		}
+		isPhotoUploading.value = true;
+		try {
+			const compressedFileList = await compressUploadImageList(fileList);
+			const tempFileList = await AttachmentAPI.upload(compressedFileList);
+			for (const item of tempFileList) {
+				if (!item.id) {
+					continue;
+				}
+				photoItemList.value.push({
+					tempFileId: item.id,
+					url: AttachmentAPI.getTempReadURL(item.id)
+				});
+			}
+		} finally {
+			isPhotoUploading.value = false;
+			input.value = "";
+		}
+	}
+
+	function setExistingPhotoList(attachmentList?: Attachment[]): void {
+		photoItemList.value = (attachmentList || [])
+			.filter(item => item.attachType === "PHOTO" || !item.attachType)
+			.filter(item => !!item.id)
+			.map(item => ({
+				attachment: item,
+				previewUrl: getAttachmentReadURL(item.id || ""),
+				url: getAttachmentReadURL(item.id || "", 90)
+			}));
+	}
+
+	function buildTempFileIdList(): string[] {
+		return photoItemList.value.map(item => item.tempFileId).filter((item): item is string => !!item);
+	}
+
+	function buildPhotoAttachmentList(): Array<Partial<Attachment>> {
+		return photoItemList.value.map((item) => {
+			if (item.attachment) {
+				return {
+					...item.attachment,
+					attachType: item.attachType || item.attachment.attachType || "PHOTO"
+				};
+			}
+
+			return {
+				tempFileId: item.tempFileId,
+				attachType: item.attachType || "PHOTO"
+			};
+		});
+	}
+
+	return {
+		recordPhotoInputRef,
+		photoItemList,
+		isPhotoUploading,
+		photoList,
+		capturePhoto,
+		handleRecordPhotoSelected,
+		setExistingPhotoList,
+		buildTempFileIdList,
+		buildPhotoAttachmentList
+	};
+}
diff --git a/src/pages/event/component/usePackagePurchaseRecord.ts b/src/pages/event/component/usePackagePurchaseRecord.ts
new file mode 100644
index 0000000..a727b9f
--- /dev/null
+++ b/src/pages/event/component/usePackagePurchaseRecord.ts
@@ -0,0 +1,165 @@
+import { computed, ref, type Ref } from "vue";
+import PackageAPI from "@/api/PackageAPI";
+import type { Customer } from "@/types/Customer";
+import type { EventItem } from "@/types/EventItem";
+import type { PackagePurchaseItem } from "@/types/Package";
+import { isPackagePurchaseEvent } from "@/utils/event";
+import { createPackageRequestNo, formatPackageAmountInput, normalizePackageQuantity, parsePackageAmount } from "@/utils/package";
+import { permissionCodes } from "@/utils/permission";
+import { Message } from "@/utils/message";
+
+interface UsePackagePurchaseRecordOptions {
+	eventList: Ref<EventItem[]>;
+	selectedEventIdList: Ref<string[]>;
+	selectedCustomerIdList: Ref<string[]>;
+	selectedCustomerList: Ref<Customer[]>;
+	note: Ref<string>;
+	hasPermission: (permissionCode: string) => boolean;
+	buildRegisteredAt: () => number;
+	buildTempFileIdList: () => string[];
+}
+
+export function usePackagePurchaseRecord(options: UsePackagePurchaseRecordOptions) {
+	const selectedPackageEvent = computed(() => options.selectedEventIdList.value
+		.map(eventId => options.eventList.value.find(item => item.id === eventId))
+		.find((item): item is EventItem => !!item && isPackagePurchaseEvent(item)));
+	const isPackagePurchaseSelected = computed(() => !!selectedPackageEvent.value);
+	const selectedPackageConfig = computed(() => selectedPackageEvent.value?.packageConfig);
+	const isSelectedPackageConfigSaleable = computed(() => {
+		const config = selectedPackageConfig.value;
+		if (!config || config.status !== "ACTIVE") {
+			return false;
+		}
+		const now = Date.now();
+		return (config.beginAt === undefined || config.beginAt === null || config.beginAt <= now)
+			&& (config.endAt === undefined || config.endAt === null || now <= config.endAt);
+	});
+	const canPriceOverride = computed(() => options.hasPermission(permissionCodes.customerPackage.priceOverride));
+	const saleAmountText = ref("");
+	const packagePurchaseItemList = ref<PackagePurchaseItem[]>([]);
+
+	function handleEventSelectionChange(eventIdList: string[]): void {
+		const packageEvent = eventIdList
+			.map(eventId => options.eventList.value.find(item => item.id === eventId))
+			.find(item => isPackagePurchaseEvent(item));
+		if (packageEvent?.id) {
+			if (!options.hasPermission(permissionCodes.customerPackage.create)) {
+				Message.warning("当前账号没有套餐购买权限");
+				return;
+			}
+			options.selectedEventIdList.value = [packageEvent.id];
+			keepSingleCustomer();
+			applySelectedPackageEvent(packageEvent);
+			return;
+		}
+		options.selectedEventIdList.value = eventIdList;
+		resetPackagePurchaseForm();
+	}
+
+	function applySelectedPackageEvent(event: EventItem): void {
+		const config = event.packageConfig;
+		if (!config) {
+			resetPackagePurchaseForm();
+			return;
+		}
+
+		saleAmountText.value = formatPackageAmountInput(config.standardAmount);
+		packagePurchaseItemList.value = (config.itemList || []).map((item, index) => ({
+			productName: item.productName,
+			unit: item.unit,
+			totalQuantity: normalizePackageQuantity(item.defaultQuantity) || "",
+			sort: item.sort ?? index,
+			remark: item.remark ?? null
+		}));
+	}
+
+	function resetPackagePurchaseForm(): void {
+		saleAmountText.value = "";
+		packagePurchaseItemList.value = [];
+	}
+
+	async function submitPackagePurchase(): Promise<boolean> {
+		const eventId = selectedPackageEvent.value?.id;
+		const customerId = options.selectedCustomerList.value[0]?.id;
+		const saleAmount = parsePackageAmount(saleAmountText.value);
+		if (!eventId || !customerId || saleAmount === undefined) {
+			return false;
+		}
+
+		await PackageAPI.purchase({
+			requestNo: createPackageRequestNo(),
+			eventId,
+			customerId,
+			saleAmount,
+			purchasedAt: options.buildRegisteredAt(),
+			itemList: packagePurchaseItemList.value.map((item, index) => ({
+				productName: item.productName.trim(),
+				unit: item.unit.trim(),
+				totalQuantity: normalizePackageQuantity(item.totalQuantity)!,
+				sort: item.sort ?? index,
+				remark: item.remark ?? null
+			})),
+			attachmentList: options.buildTempFileIdList().map(tempFileId => ({
+				tempFileId,
+				attachType: "PHOTO"
+			})),
+			remark: options.note.value.trim() || null
+		});
+		return true;
+	}
+
+	function validatePackagePurchaseForm(): boolean {
+		if (!options.hasPermission(permissionCodes.customerPackage.create)) {
+			Message.warning("当前账号没有套餐购买权限");
+			return false;
+		}
+		if (options.selectedCustomerList.value.length < 1 || 1 < options.selectedCustomerList.value.length || !options.selectedCustomerList.value[0]?.id) {
+			Message.warning("套餐购买只能选择一个客户");
+			return false;
+		}
+		if (!selectedPackageConfig.value) {
+			Message.warning("当前购买事件未绑定有效套餐配置");
+			return false;
+		}
+		if (!isSelectedPackageConfigSaleable.value) {
+			Message.warning("事件绑定的套餐当前不可购买，请检查套餐状态和有效期");
+			return false;
+		}
+		if (parsePackageAmount(saleAmountText.value) === undefined) {
+			Message.warning("成交价必须是合法的元金额，最多两位小数");
+			return false;
+		}
+		if (!packagePurchaseItemList.value.length) {
+			Message.warning("购买权益至少需要一项");
+			return false;
+		}
+		for (const item of packagePurchaseItemList.value) {
+			const quantity = normalizePackageQuantity(item.totalQuantity);
+			if (!item.productName.trim() || !item.unit.trim() || !quantity || quantity === "0") {
+				Message.warning("产品名称、单位和正数量不能为空");
+				return false;
+			}
+		}
+		return true;
+	}
+
+	function keepSingleCustomer(): void {
+		const customer = options.selectedCustomerList.value[0];
+		options.selectedCustomerList.value = customer ? [customer] : [];
+		options.selectedCustomerIdList.value = customer?.id ? [customer.id] : [];
+	}
+
+	return {
+		selectedPackageEvent,
+		isPackagePurchaseSelected,
+		selectedPackageConfig,
+		canPriceOverride,
+		saleAmountText,
+		packagePurchaseItemList,
+		handleEventSelectionChange,
+		applySelectedPackageEvent,
+		resetPackagePurchaseForm,
+		submitPackagePurchase,
+		validatePackagePurchaseForm
+	};
+}
diff --git a/src/pages/notify/NotifyList.vue b/src/pages/notify/NotifyList.vue
index b9d29d3..f0315d7 100644
--- a/src/pages/notify/NotifyList.vue
+++ b/src/pages/notify/NotifyList.vue
@@ -53,7 +53,7 @@
 				</t-swipe-cell>
 			</t-cell-group>
 			<t-empty v-else-if="!isLoading" description="暂无已发送通知" />
-			<div class="load-state" v-text="loadStateText" />
+			<div class="center-tips" v-text="loadStateText" />
 		</t-pull-down-refresh>
 	</div>
 </template>
diff --git a/src/pages/notify/UserNotifyList.vue b/src/pages/notify/UserNotifyList.vue
index 7102962..19fa76e 100644
--- a/src/pages/notify/UserNotifyList.vue
+++ b/src/pages/notify/UserNotifyList.vue
@@ -60,7 +60,7 @@
 				v-else-if="!isLoading"
 				description="暂无站内通知"
 			/>
-			<div class="load-state" v-text="loadStateText" />
+			<div class="center-tips" v-text="loadStateText" />
 		</t-pull-down-refresh>
 	</div>
 </template>
diff --git a/src/pages/package/CustomerPackageDelivery.vue b/src/pages/package/CustomerPackageDelivery.vue
index 767c763..5eae656 100644
--- a/src/pages/package/CustomerPackageDelivery.vue
+++ b/src/pages/package/CustomerPackageDelivery.vue
@@ -6,7 +6,7 @@
 		</t-cell-group>
 		<section v-if="customerPackage" class="items" v-entrance-transition="70">
 			<div class="section-title"><strong>本次发放权益</strong><span>只能提交不超过可发数量的产品</span></div>
-			<div v-for="item in customerPackage.itemList || []" :key="item.id" class="item-card">
+			<div v-for="item in customerPackage.itemList || []" :key="item.id" class="item">
 				<div class="item-title"><strong v-text="`${item.productNameSnapshot}（${item.unitSnapshot}）`" /><span v-text="`可发 ${getPackageQuantityText(item.availableQuantity)}`" /></div>
 				<t-input v-model.trim="quantityMap[item.id || '']" type="number" borderless placeholder="本次发放数量，不填表示不发放" />
 			</div>
@@ -202,7 +202,7 @@ onUnmounted(() => navBarStore.clearRight());
 		margin-left: .5rem;
 	}
 
-	.item-card {
+	.item {
 		gap: .5rem;
 		padding: .75rem;
 		margin-bottom: .75rem;
diff --git a/src/pages/package/CustomerPackageList.vue b/src/pages/package/CustomerPackageList.vue
index c8ac0a9..57daf86 100644
--- a/src/pages/package/CustomerPackageList.vue
+++ b/src/pages/package/CustomerPackageList.vue
@@ -31,21 +31,17 @@
 				</t-cell>
 			</t-cell-group>
 			<div v-else class="empty" v-text="loading ? '正在加载客户套餐' : '暂无客户套餐'" />
-			<div class="load-state" v-text="loadStateText" />
+			<div class="center-tips" v-text="loadStateText" />
 		</t-pull-down-refresh>
 	</div>
-	<nav-bar-action-menu v-if="canCreate" :actions="actionList" />
 </template>
 
 <script setup lang="ts">
 import { type DropdownValue } from "tdesign-mobile-vue";
 import { Time } from "timi-web";
-import { useUserStore } from "timi-web-api";
 import PackageAPI from "@/api/PackageAPI";
-import NavBarActionMenu from "@/components/NavBarActionMenu.vue";
 import { useNavBarStore } from "@/store/navBarStore";
 import type { CustomerPackageStatus, GaoCustomerPackage, PaymentStatus } from "@/types/Package";
-import type { NavBarAction } from "@/types/NavBarAction";
 import { getErrorMessage } from "@/utils/error";
 import { formatPackageAmount, getCustomerPackageStatusText, getPaymentStatusText } from "@/utils/package";
 import { Message } from "@/utils/message";
@@ -55,15 +51,6 @@ defineOptions({ name: "CustomerPackageList" });
 
 const router = useRouter();
 const navBarStore = useNavBarStore();
-const userStore = useUserStore();
-const canCreate = computed(() => userStore.hasPermissions(permissionCodes.customerPackage.create));
-const actionList = computed<NavBarAction[]>(() => canCreate.value ? [{
-	key: "purchase",
-	text: "购买套餐",
-	icon: "add",
-	theme: "primary",
-	action: toPurchase
-}] : []);
 const keyword = ref("");
 const status = ref("ALL");
 const paymentStatus = ref("ALL");
@@ -137,10 +124,6 @@ async function selectPaymentStatus(value: DropdownValue): Promise<void> {
 	await reload();
 }
 
-async function toPurchase(): Promise<void> {
-	await router.push("/management/customer-packages/purchase");
-}
-
 async function toDetail(item: GaoCustomerPackage): Promise<void> {
 	if (item.id) {
 		await router.push(`/management/customer-packages/${item.id}`);
@@ -153,7 +136,6 @@ function getStatusTheme(statusValue?: CustomerPackageStatus): "success" | "warni
 
 onMounted(async () => {
 	navBarStore.clearRight();
-	navBarStore.setCustomRightVisible(canCreate.value);
 	try {
 		await reload();
 	} catch (error) {
diff --git a/src/pages/package/CustomerPackagePurchase.vue b/src/pages/package/CustomerPackagePurchase.vue
deleted file mode 100644
index c9b9b49..0000000
--- a/src/pages/package/CustomerPackagePurchase.vue
+++ /dev/null
@@ -1,405 +0,0 @@
-<template>
-	<div v-can="permissionCodes.customerPackage.create" class="customer-package-purchase">
-		<t-form class="form" label-align="left" label-width="6rem" v-entrance-transition>
-			<t-form-item v-if="isGlobalManager" label="所属门店" arrow @click="openStorePicker">
-				<span class="picker-text" v-text="selectedStoreName" />
-			</t-form-item>
-			<t-form-item label="客户" required-mark arrow @click="customerSelectorVisible = true">
-				<span class="picker-text" v-text="selectedCustomer?.name || selectedCustomer?.code || '请选择客户'" />
-			</t-form-item>
-			<customer-profile-card v-if="selectedCustomer" class="customer-profile" :customer="selectedCustomer" />
-			<t-form-item label="购买事件" required-mark arrow @click="openEventPicker">
-				<span class="picker-text" v-text="selectedEvent?.name || '请选择 PACKAGE_PURCHASE 事件'" />
-			</t-form-item>
-			<div v-if="selectedConfig" class="config-summary">
-				<strong v-text="selectedConfig.name || '未命名套餐'" />
-				<span v-text="`标准价：${formatPackageAmount(selectedConfig.standardAmount)}｜${getPackageConfigStatusText(selectedConfig.status)}`" />
-			</div>
-			<div v-if="!eventList.length" class="option-tip">
-				<div v-if="!eventList.length">当前门店没有可用的 PACKAGE_PURCHASE 购买事件，请先新增并启用购买事件。</div>
-			</div>
-			<div v-if="selectedEvent && !selectedConfig" class="option-tip">当前购买事件未返回绑定套餐，无法购买，请联系管理员检查事件配置。</div>
-			<div v-if="selectedConfig && !isSelectedConfigSaleable" class="option-tip">事件绑定的套餐当前不可购买，请检查套餐状态和有效期。</div>
-			<t-form-item label="成交价（元）" required-mark>
-				<t-input v-model.trim="saleAmountText" type="number" align="right" borderless :readonly="!canPriceOverride" placeholder="请输入成交价" />
-			</t-form-item>
-			<t-form-item label="购买时间" arrow @click="openPurchaseTime">
-				<span class="picker-text" v-text="purchasedAtText || '使用当前时间'" />
-			</t-form-item>
-			<t-form-item label="备注">
-				<t-textarea v-model.trim="remark" borderless autosize maxlength="500" placeholder="购买备注" />
-			</t-form-item>
-		</t-form>
-		<section class="items" v-entrance-transition="70">
-			<div class="section-title"><strong>购买权益明细</strong><span v-if="!canPriceOverride">当前账号无定制权限，明细不可修改</span></div>
-			<div v-for="(item, index) in purchaseItems" :key="item.clientKey" class="item-card">
-				<strong v-text="`权益 ${index + 1}`" />
-				<t-input v-model.trim="item.productName" borderless readonly placeholder="产品名称" />
-				<t-input v-model.trim="item.unit" borderless readonly placeholder="单位" />
-				<t-input v-model.trim="item.totalQuantity" type="number" borderless :readonly="!canPriceOverride" placeholder="总权益数量" />
-				<span v-if="item.remark" class="item-remark" v-text="`备注：${item.remark}`" />
-			</div>
-			<div v-if="!purchaseItems.length" class="empty" v-text="'选择购买事件后加载绑定套餐权益明细'" />
-		</section>
-		<package-photo-field v-model="photoItems" :required="selectedEvent?.requirePhoto === true" title="购买照片" />
-		<customer-selector v-model="selectedCustomerId" v-model:visible="customerSelectorVisible" :store-id="formStoreId" @change="handleCustomerChange" />
-		<t-popup v-model="storePickerVisible" placement="bottom">
-			<t-picker v-model="storeDraft" :columns="storePickerColumns" title="选择门店" @cancel="storePickerVisible = false" @confirm="confirmStore" />
-		</t-popup>
-		<t-popup v-model="eventPickerVisible" placement="bottom">
-			<t-picker v-model="eventDraft" :columns="eventPickerColumns" title="选择购买事件" @cancel="eventPickerVisible = false" @confirm="confirmEvent" />
-		</t-popup>
-		<t-popup v-model="purchasePickerVisible" placement="bottom">
-			<t-date-time-picker v-model="purchaseDraft" format="YYYY-MM-DD HH:mm" :mode="['date', 'minute']" title="购买时间" @cancel="purchasePickerVisible = false" @confirm="confirmPurchaseTime" />
-		</t-popup>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { Time } from "timi-web";
-import { useUserStore } from "timi-web-api";
-import CustomerAPI from "@/api/CustomerAPI";
-import EventAPI from "@/api/EventAPI";
-import PackageAPI from "@/api/PackageAPI";
-import CustomerProfileCard from "@/components/CustomerProfileCard.vue";
-import CustomerSelector from "@/components/CustomerSelector.vue";
-import PackagePhotoField from "@/components/PackagePhotoField.vue";
-import { useCurrentStoreStore } from "@/store/currentStoreStore";
-import { useNavBarStore } from "@/store/navBarStore";
-import type { Customer } from "@/types/Customer";
-import type { EventItem } from "@/types/EventItem";
-import type { GaoPackageConfig, PackageAttachment, PackagePurchaseItem } from "@/types/Package";
-import type { PhotoItem } from "@/types/Photo";
-import { createPackageRequestNo, formatPackageAmount, formatPackageAmountInput, getPackageConfigStatusText, normalizePackageQuantity, parsePackageAmount } from "@/utils/package";
-import { getErrorMessage } from "@/utils/error";
-import { Message } from "@/utils/message";
-import { gaoRoleCodes, permissionCodes } from "@/utils/permission";
-
-type PickerValue = string | number;
-type PurchaseFormItem = PackagePurchaseItem & { clientKey: string };
-
-defineOptions({ name: "CustomerPackagePurchase" });
-
-const router = useRouter();
-const route = useRoute();
-const userStore = useUserStore();
-const navBarStore = useNavBarStore();
-const currentStoreStore = useCurrentStoreStore();
-const isGlobalManager = computed(() => userStore.hasRoles(gaoRoleCodes.globalManager));
-const canPriceOverride = computed(() => userStore.hasPermissions(permissionCodes.customerPackage.priceOverride));
-const formStoreId = ref("");
-const selectedCustomerId = ref("");
-const selectedCustomer = ref<Customer>();
-const selectedEventId = ref("");
-const eventList = ref<EventItem[]>([]);
-const purchaseItems = ref<PurchaseFormItem[]>([]);
-const selectedEvent = computed(() => eventList.value.find(item => item.id === selectedEventId.value));
-const selectedConfig = computed<GaoPackageConfig | undefined>(() => selectedEvent.value?.packageConfig);
-const isSelectedConfigSaleable = computed(() => {
-	const config = selectedConfig.value;
-	if (!config || config.status !== "ACTIVE") {
-		return false;
-	}
-	const now = Date.now();
-	const beginAt = config.beginAt;
-	const endAt = config.endAt;
-	return (beginAt === undefined || beginAt === null || beginAt <= now)
-		&& (endAt === undefined || endAt === null || now <= endAt);
-});
-const saleAmountText = ref("");
-const purchasedAtText = ref("");
-const purchaseDraft = ref("");
-const remark = ref("");
-const photoItems = ref<PhotoItem[]>([]);
-const isSaving = ref(false);
-const customerSelectorVisible = ref(false);
-const storePickerVisible = ref(false);
-const eventPickerVisible = ref(false);
-const purchasePickerVisible = ref(false);
-const storeDraft = ref<PickerValue[]>([]);
-const eventDraft = ref<PickerValue[]>([]);
-const storePickerColumns = computed(() => [[...currentStoreStore.storeList].map(item => ({ label: item.name || item.code || item.id || "未知门店", value: item.id || "" }))]);
-const eventPickerColumns = computed(() => [[...eventList.value].map(item => ({ label: item.name || "未命名事件", value: item.id || "" }))]);
-const selectedStoreName = computed(() => currentStoreStore.storeList.find(item => item.id === formStoreId.value)?.name || formStoreId.value || "请选择门店");
-
-async function loadOptions(): Promise<void> {
-	eventList.value = formStoreId.value
-		? (await EventAPI.listValid(formStoreId.value)).filter(item => item.bizType === "PACKAGE_PURCHASE" && !!item.packageConfigId)
-		: [];
-	if (!eventList.value.some(item => item.id === selectedEventId.value)) {
-		selectedEventId.value = "";
-		resetPurchaseConfig();
-	}
-}
-
-async function handleCustomerChange(id: string): Promise<void> {
-	selectedCustomerId.value = id;
-	selectedCustomer.value = id ? await CustomerAPI.detail(id) : undefined;
-}
-
-function openStorePicker(): void {
-	storeDraft.value = [formStoreId.value];
-	storePickerVisible.value = true;
-}
-
-function openEventPicker(): void {
-	if (!eventList.value.length) {
-		Message.warning("当前门店没有 PACKAGE_PURCHASE 类型购买事件，请先启用购买事件");
-		return;
-	}
-
-	eventDraft.value = [selectedEventId.value];
-	eventPickerVisible.value = true;
-}
-
-async function confirmStore(value: Array<string | number>): Promise<void> {
-	const storeId = String(value[0] || "");
-	if (storeId && storeId !== formStoreId.value) {
-		formStoreId.value = storeId;
-		selectedCustomerId.value = "";
-		selectedCustomer.value = undefined;
-		await loadOptions();
-	}
-	storePickerVisible.value = false;
-}
-
-function resetPurchaseConfig(): void {
-	saleAmountText.value = "";
-	purchaseItems.value = [];
-}
-
-function applySelectedEvent(): void {
-	const config = selectedConfig.value;
-	if (!config) {
-		resetPurchaseConfig();
-		return;
-	}
-	saleAmountText.value = formatPackageAmountInput(config.standardAmount);
-	purchaseItems.value = (config.itemList || []).map((item, index) => ({
-		clientKey: window.crypto.randomUUID(),
-		productName: item.productName,
-		unit: item.unit,
-		totalQuantity: normalizePackageQuantity(item.defaultQuantity) || "",
-		sort: item.sort ?? index,
-		remark: item.remark ?? null
-	}));
-}
-
-function confirmEvent(value: Array<string | number>): void {
-	selectedEventId.value = String(value[0] || "");
-	applySelectedEvent();
-	eventPickerVisible.value = false;
-}
-
-function openPurchaseTime(): void {
-	purchaseDraft.value = purchasedAtText.value || Time.formatDateTime(new Date());
-	purchasePickerVisible.value = true;
-}
-
-function confirmPurchaseTime(value: string | number): void {
-	purchasedAtText.value = String(value);
-	purchasePickerVisible.value = false;
-}
-
-function resolveTimestamp(value: string): number | undefined {
-	if (!value) {
-		return undefined;
-	}
-	const timestamp = new Date(value.replace(" ", "T")).getTime();
-	return Number.isFinite(timestamp) ? timestamp : undefined;
-}
-
-function validateForm(): boolean {
-	if (!selectedCustomerId.value) {
-		Message.warning("请选择客户");
-		return false;
-	}
-	if (!selectedEventId.value || !selectedEvent.value) {
-		Message.warning("请选择 PACKAGE_PURCHASE 类型购买事件");
-		return false;
-	}
-	if (!selectedConfig.value) {
-		Message.warning("当前购买事件未绑定有效套餐配置");
-		return false;
-	}
-	if (!isSelectedConfigSaleable.value) {
-		Message.warning("事件绑定的套餐当前不可购买，请检查套餐状态和有效期");
-		return false;
-	}
-	if (parsePackageAmount(saleAmountText.value) === undefined) {
-		Message.warning("成交价必须是合法的元金额，最多两位小数");
-		return false;
-	}
-	if (!purchaseItems.value.length) {
-		Message.warning("购买权益至少需要一项");
-		return false;
-	}
-	for (const item of purchaseItems.value) {
-		if (!item.productName.trim() || !item.unit.trim() || !normalizePackageQuantity(item.totalQuantity) || normalizePackageQuantity(item.totalQuantity) === "0") {
-			Message.warning("产品名称、单位和正数量不能为空");
-			return false;
-		}
-	}
-	if (selectedEvent.value.requirePhoto && !photoItems.value.some(item => item.tempFileId)) {
-		Message.warning("当前购买事件要求上传照片");
-		return false;
-	}
-	return true;
-}
-
-function buildAttachments(): PackageAttachment[] {
-	return photoItems.value.flatMap(item => item.tempFileId ? [{ tempFileId: item.tempFileId, attachType: "PHOTO", name: item.attachment?.name }] : []);
-}
-
-async function save(): Promise<void> {
-	if (isSaving.value || !validateForm()) {
-		return;
-	}
-	isSaving.value = true;
-	try {
-		const result = await PackageAPI.purchase({
-			requestNo: createPackageRequestNo(),
-			eventId: selectedEventId.value,
-			customerId: selectedCustomerId.value,
-			saleAmount: parsePackageAmount(saleAmountText.value)!,
-			purchasedAt: resolveTimestamp(purchasedAtText.value),
-			itemList: purchaseItems.value.map((item, index) => ({
-				productName: item.productName.trim(),
-				unit: item.unit.trim(),
-				totalQuantity: normalizePackageQuantity(item.totalQuantity)!,
-				sort: item.sort ?? index,
-				remark: item.remark ?? null
-			})),
-			attachmentList: buildAttachments(),
-			remark: remark.value.trim() || null
-		});
-		Message.success("套餐购买已提交");
-		if (result.id) {
-			await router.replace(`/management/customer-packages/${result.id}`);
-			return;
-		}
-		await router.replace("/management/customer-packages");
-	} catch (error) {
-		Message.error(getErrorMessage(error, "套餐购买失败，请刷新后重试"));
-	} finally {
-		isSaving.value = false;
-	}
-}
-
-async function loadData(): Promise<void> {
-	if (isGlobalManager.value) {
-		await currentStoreStore.loadStoreList();
-	} else {
-		await currentStoreStore.loadLoginStore();
-	}
-	formStoreId.value = currentStoreStore.currentStoreId;
-	if (!formStoreId.value) {
-		const store = await currentStoreStore.loadLoginStore();
-		formStoreId.value = store?.id || "";
-	}
-	await loadOptions();
-	const queryEventId = String(route.query.eventId || "");
-	if (queryEventId && eventList.value.some(item => item.id === queryEventId)) {
-		selectedEventId.value = queryEventId;
-		applySelectedEvent();
-	}
-	const queryCustomerId = String(route.query.customerId || "");
-	if (queryCustomerId) {
-		await handleCustomerChange(queryCustomerId);
-	}
-}
-
-onMounted(async () => {
-	if (userStore.hasPermissions(permissionCodes.customerPackage.create)) {
-		navBarStore.setRightText("提交购买", "var(--td-brand-color)", save);
-	}
-	try {
-		await loadData();
-	} catch (error) {
-		Message.error(getErrorMessage(error, "购买页面数据加载失败"));
-	}
-});
-
-onUnmounted(() => navBarStore.clearRight());
-</script>
-
-<style scoped lang="less">
-.customer-package-purchase {
-	gap: 1rem;
-	padding: calc(var(--app-nav-height) + 1rem) 0 2rem;
-	display: flex;
-	flex-direction: column;
-
-	.form {
-		border-radius: .75rem;
-	}
-
-	.picker-text {
-		width: 100%;
-		text-align: right;
-	}
-
-	.customer-profile {
-		margin: 0 1rem;
-	}
-
-	.items,
-	.package-photo-field {
-		padding: 0 1rem;
-	}
-
-	.section-title {
-		color: var(--td-text-color-secondary);
-		margin-bottom: .5rem;
-		font-size: .8125rem;
-	}
-
-	.section-title span {
-		margin-left: .5rem;
-	}
-
-	.item-card {
-		gap: .5rem;
-		padding: .75rem;
-		margin-bottom: .75rem;
-		display: grid;
-		background: var(--td-bg-color-container);
-		box-shadow: var(--td-shadow-1);
-		border-radius: .75rem;
-	}
-
-	.config-summary {
-		gap: .25rem;
-		padding: .75rem 1rem;
-		display: flex;
-		color: var(--td-text-color-secondary);
-		font-size: .8125rem;
-		flex-direction: column;
-		background: var(--td-bg-color-secondarycontainer);
-
-		strong {
-			color: var(--td-text-color-primary);
-			font-size: .9375rem;
-		}
-	}
-
-	.item-remark {
-		color: var(--td-text-color-secondary);
-		font-size: .8125rem;
-	}
-
-	.empty {
-		color: var(--td-text-color-secondary);
-		padding: 1rem;
-		text-align: center;
-	}
-
-	.option-tip {
-		padding: .75rem 1rem;
-		color: var(--td-text-color-secondary);
-		font-size: .8125rem;
-		line-height: 1.5;
-		background: var(--td-bg-color-secondarycontainer);
-	}
-}
-</style>
diff --git a/src/pages/package/FundRecordList.vue b/src/pages/package/FundRecordList.vue
index aa56c66..6aa47e5 100644
--- a/src/pages/package/FundRecordList.vue
+++ b/src/pages/package/FundRecordList.vue
@@ -26,7 +26,7 @@
 				</t-cell>
 			</t-cell-group>
 			<div v-else class="empty" v-text="loading ? '正在加载资金流水' : '暂无资金流水'" />
-			<div class="load-state" v-text="loadStateText" />
+			<div class="center-tips" v-text="loadStateText" />
 		</t-pull-down-refresh>
 	</div>
 </template>
diff --git a/src/pages/package/PackageConfigEdit.vue b/src/pages/package/PackageConfigEdit.vue
index ecb2ee6..1458da3 100644
--- a/src/pages/package/PackageConfigEdit.vue
+++ b/src/pages/package/PackageConfigEdit.vue
@@ -25,7 +25,7 @@
 		</t-form>
 		<section class="items" v-entrance-transition="70">
 			<div class="section-title"><strong>产品权益</strong><span>至少一项，数量最多三位小数</span></div>
-			<div v-for="(item, index) in form.itemList" :key="item.clientKey" class="item-card">
+			<div v-for="(item, index) in form.itemList" :key="item.clientKey" class="item">
 				<div class="item-head"><span v-text="`权益 ${index + 1}`" /><t-button theme="danger" variant="text" size="small" @click="removeItem(index)">删除</t-button></div>
 				<t-input v-model="item.productName" borderless placeholder="产品名称" />
 				<t-input v-model.trim="item.unit" borderless placeholder="单位，例如 盒、次" />
@@ -337,7 +337,7 @@ onUnmounted(() => navBarStore.clearRight());
 		font-size: .8125rem;
 	}
 
-	.item-card {
+	.item {
 		gap: .5rem;
 		padding: .75rem;
 		margin-bottom: .75rem;
diff --git a/src/pages/package/PackageConfigList.vue b/src/pages/package/PackageConfigList.vue
index b74eb97..03f14d8 100644
--- a/src/pages/package/PackageConfigList.vue
+++ b/src/pages/package/PackageConfigList.vue
@@ -38,7 +38,7 @@
 				</t-swipe-cell>
 			</t-cell-group>
 			<div v-else class="empty" v-text="loading ? '正在加载套餐配置' : '暂无套餐配置'" />
-			<div class="load-state" v-text="loadStateText" />
+			<div class="center-tips" v-text="loadStateText" />
 		</t-pull-down-refresh>
 	</div>
 	<nav-bar-action-menu v-if="canCreate" :actions="actionList" />
diff --git a/src/pages/package/PackageDeliveryList.vue b/src/pages/package/PackageDeliveryList.vue
index fda1aae..596f171 100644
--- a/src/pages/package/PackageDeliveryList.vue
+++ b/src/pages/package/PackageDeliveryList.vue
@@ -22,7 +22,7 @@
 				</t-cell>
 			</t-cell-group>
 			<div v-else class="empty" v-text="loading ? '正在加载发放记录' : '暂无发放记录'" />
-			<div class="load-state" v-text="loadStateText" />
+			<div class="center-tips" v-text="loadStateText" />
 		</t-pull-down-refresh>
 	</div>
 </template>
diff --git a/src/pages/point/PointAccountList.vue b/src/pages/point/PointAccountList.vue
index 062be9d..4f4c3b7 100644
--- a/src/pages/point/PointAccountList.vue
+++ b/src/pages/point/PointAccountList.vue
@@ -35,7 +35,7 @@
 						</template>
 					</customer-cell>
 			</t-cell-group>
-			<div class="load-state" v-text="loadStateText" />
+			<div class="center-tips" v-text="loadStateText" />
 		</t-pull-down-refresh>
 	</div>
 </template>
@@ -249,7 +249,7 @@ onMounted(async () => {
 		}
 	}
 
-	.load-state {
+	.center-tips {
 		color: #52607a;
 		padding: 1rem;
 		font-size: .8125rem;
@@ -261,7 +261,7 @@ onMounted(async () => {
 	.point-account-list {
 		.description,
 		.zero,
-		.load-state {
+		.center-tips {
 			color: #94a3b8;
 		}
 
diff --git a/src/pages/point/PointLedgerList.vue b/src/pages/point/PointLedgerList.vue
index 6c44fee..415a847 100644
--- a/src/pages/point/PointLedgerList.vue
+++ b/src/pages/point/PointLedgerList.vue
@@ -113,7 +113,7 @@
 						</template>
 					</t-cell>
 			</t-cell-group>
-			<div class="load-state" v-text="loadStateText" />
+			<div class="center-tips" v-text="loadStateText" />
 		</t-pull-down-refresh>
 
 		<section v-if="customer" class="actions">
diff --git a/src/pages/point/PointRuleList.vue b/src/pages/point/PointRuleList.vue
index 61daf6b..44c7cb9 100644
--- a/src/pages/point/PointRuleList.vue
+++ b/src/pages/point/PointRuleList.vue
@@ -51,7 +51,7 @@
 					</template>
 				</t-cell>
 			</t-cell-group>
-			<div class="load-state" v-text="loadStateText" />
+			<div class="center-tips" v-text="loadStateText" />
 		</t-pull-down-refresh>
 	</div>
 	<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
diff --git a/src/pages/store/StoreDiaryList.vue b/src/pages/store/StoreDiaryList.vue
index 5f5ff70..0244fb8 100644
--- a/src/pages/store/StoreDiaryList.vue
+++ b/src/pages/store/StoreDiaryList.vue
@@ -40,7 +40,7 @@
 					</template>
 				</t-swipe-cell>
 			</t-cell-group>
-			<div class="load-state" v-text="loadStateText" />
+			<div class="center-tips" v-text="loadStateText" />
 		</t-pull-down-refresh>
 	</div>
 	<nav-bar-action-menu v-if="canShowActionMenu" :actions="actionList" />
@@ -462,7 +462,7 @@ onUnmounted(() => navBarStore.clearRight());
 		}
 	}
 
-	.load-state {
+	.center-tips {
 		padding: 1rem;
 		color: var(--td-text-color-placeholder);
 		font-size: .8125rem;
diff --git a/src/pages/store/StoreList.vue b/src/pages/store/StoreList.vue
index f011c4f..9a9c492 100644
--- a/src/pages/store/StoreList.vue
+++ b/src/pages/store/StoreList.vue
@@ -44,8 +44,8 @@
 					</template>
 				</t-swipe-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 ? '已加载全部门店' : '上拉加载更多'" />
+			<div v-if="!pageResult.list.length" class="center-tips" v-text="isLoading ? '正在加载门店' : '暂无门店'" />
+			<div v-if="pageResult.list.length" class="center-tips" v-text="isNoMore ? '已加载全部门店' : '上拉加载更多'" />
 		</t-pull-down-refresh>
 	</div>
 	<store-remove-dialog
diff --git a/src/pages/tag/TagList.vue b/src/pages/tag/TagList.vue
index 62dd13c..648d3a9 100644
--- a/src/pages/tag/TagList.vue
+++ b/src/pages/tag/TagList.vue
@@ -35,7 +35,7 @@
 				</div>
 			</div>
 			<div v-if="!tagList.length" class="empty" v-text="emptyText" />
-			<div v-if="tagList.length" class="load-state" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
+			<div v-if="tagList.length" class="center-tips" v-text="isLoading ? '正在加载更多' : isNoMore ? '已经到底了' : '上拉加载更多'" />
 		</t-pull-down-refresh>
 	</div>
 	<t-dialog
@@ -337,12 +337,6 @@ onUnmounted(() => {
 		text-align: center;
 	}
 
-	.load-state {
-		color: #52607a;
-		padding: .75rem 1rem 1rem;
-		text-align: center;
-	}
-
 }
 
 .edit-dialog {
@@ -360,7 +354,7 @@ onUnmounted(() => {
 	.tag-list {
 
 		.empty,
-		.load-state {
+		.center-tips {
 			color: #94a3b8;
 		}
 	}
diff --git a/src/pages/user/UserList.vue b/src/pages/user/UserList.vue
index 7569427..cb5b805 100644
--- a/src/pages/user/UserList.vue
+++ b/src/pages/user/UserList.vue
@@ -42,8 +42,8 @@
 						</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 ? '已经到底了' : '上拉加载更多'" />
+			<div v-if="!pageResult.list.length" class="center-tips" v-text="isLoading ? '正在加载用户' : '暂无用户'" />
+			<div v-if="pageResult.list.length" class="center-tips" v-text="isNoMore ? '已经到底了' : '上拉加载更多'" />
 		</t-pull-down-refresh>
 	</div>
 	<nav-bar-action-menu
diff --git a/src/router/routes/packageRoutes.ts b/src/router/routes/packageRoutes.ts
index 75233af..ffd07cc 100644
--- a/src/router/routes/packageRoutes.ts
+++ b/src/router/routes/packageRoutes.ts
@@ -3,7 +3,6 @@ import PackageConfigList from "@/pages/package/PackageConfigList.vue";
 import PackageConfigEdit from "@/pages/package/PackageConfigEdit.vue";
 import PackageConfigDetail from "@/pages/package/PackageConfigDetail.vue";
 import CustomerPackageList from "@/pages/package/CustomerPackageList.vue";
-import CustomerPackagePurchase from "@/pages/package/CustomerPackagePurchase.vue";
 import CustomerPackageDetail from "@/pages/package/CustomerPackageDetail.vue";
 import CustomerPackageCancel from "@/pages/package/CustomerPackageCancel.vue";
 import CustomerPackagePayment from "@/pages/package/CustomerPackagePayment.vue";
@@ -34,7 +33,7 @@ const packageRoutes: RouteRecordRaw[] = [
 	{ path: "/management/package-configs/:id", name: "PackageConfigDetail", component: PackageConfigDetail, meta: pageMeta("套餐配置详情", 4, "#FFF") },
 	{ path: "/management/package-configs/:id/edit", name: "PackageConfigEdit", component: PackageConfigEdit, meta: pageMeta("编辑套餐配置", 5) },
 	{ path: "/management/customer-packages", name: "CustomerPackageList", component: CustomerPackageList, meta: pageMeta("客户套餐") },
-	{ path: "/management/customer-packages/purchase", name: "CustomerPackagePurchase", component: CustomerPackagePurchase, meta: pageMeta("购买套餐", 4) },
+	{ path: "/management/customer-packages/purchase", redirect: "/management/registration-event-records/create" },
 	{ path: "/management/customer-packages/:id", name: "CustomerPackageDetail", component: CustomerPackageDetail, meta: pageMeta("客户套餐详情", 4, "#FFF") },
 	{ path: "/management/customer-packages/:id/cancel", name: "CustomerPackageCancel", component: CustomerPackageCancel, meta: pageMeta("取消客户套餐", 5) },
 	{ path: "/management/customer-packages/:id/payment", name: "CustomerPackagePayment", component: CustomerPackagePayment, meta: pageMeta("登记收款", 5) },
diff --git a/src/utils/package.ts b/src/utils/package.ts
index 23b2749..05fce16 100644
--- a/src/utils/package.ts
+++ b/src/utils/package.ts
@@ -24,7 +24,7 @@ export function formatPackageAmount(cents?: number | null): string {
 	const absolute = Math.abs(Math.trunc(cents));
 	const yuan = Math.floor(absolute / 100);
 	const fen = String(absolute % 100).padStart(2, "0");
-	return `${negative ? "-" : ""}${yuan}.${fen} 元`;
+	return `${negative ? "-" : ""}${yuan}.${fen}`;
 }
 
 /** 将分转换为金额输入框文本。 */