update QuickSignInPage.vue style

src/components/EventSelector.vue

@@ -7,12 +7,12 @@
 				:key="item.id || item.name"
 				type="button"
 				class="item bg-white"
-				:class="{selected: isSelected(item.id)}"
+				:class="{selected: isSelected(item)}"
 				:title="item.name"
-				:disabled="props.disabled || !item.id"
-				:aria-pressed="isSelected(item.id)"
+				:disabled="props.disabled || !normalizeEventId(item)"
+				:aria-pressed="isSelected(item)"
 				v-entrance-transition="index * 30"
-				@click="toggleEvent(item.id)"
+				@click="toggleEvent(item)"
 			>
 				<span
 					class="swatch"
@@ -20,7 +20,7 @@
 					aria-hidden="true"
 				/>
 				<span class="clip-text" v-text="item.name" />
-				<span v-if="isSelected(item.id)" class="mark" aria-hidden="true" />
+				<span v-if="isSelected(item)" class="mark" aria-hidden="true" />
 			</button>
 		</div>
 		<div v-else class="empty-block">暂无可用登记事件</div>
@@ -46,20 +46,29 @@ const props = withDefaults(defineProps<Props>(), {
 const modelValue = defineModel<string[]>({ required: true });
 const defaultColor = "#2f88ff";
 
-const isSelected = (eventId?: string) => Boolean(eventId && modelValue.value.includes(eventId));
+function normalizeEventId(item: EventItem): string {
+	if (item.id === undefined || item.id === null) {
+		return "";
+	}
+	return String(item.id);
+}
 
-const toggleEvent = (eventId?: string) => {
+function isSelected(item: EventItem): boolean {
+	const eventId = normalizeEventId(item);
+	return Boolean(eventId && modelValue.value.includes(eventId));
+}
+
+function toggleEvent(item: EventItem): void {
+	const eventId = normalizeEventId(item);
 	if (props.disabled || !eventId) {
 		return;
 	}
-
-	if (isSelected(eventId)) {
+	if (modelValue.value.includes(eventId)) {
 		modelValue.value = modelValue.value.filter(id => id !== eventId);
 		return;
 	}
-
 	modelValue.value = [...modelValue.value, eventId];
-};
+}
 </script>
 
 <style scoped lang="less">