update EventRecordEdit.vue style

src/components/CustomerSelector.vue

@@ -261,7 +261,7 @@ onUnmounted(() => {
 		background: rgba(15, 23, 42, .96);
 	}
 
-	.load-state {
+	.center-tips {
 		color: #94a3b8;
 	}
 }

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