refactor event

2026-08-05 22:50:22 +08:00
parent 22ff13b1fe
commit 1243068fc3
46 changed files with 961 additions and 789 deletions
@@ -0,0 +1,90 @@
+<template>
+	<div class="registration-event-selector">
+		<p v-if="label" class="t-form__label" :class="{required: requiredMark}" v-text="label" />
+		<t-checkbox-group v-model="modelValue" class="group">
+			<t-checkbox
+				v-for="item in eventList"
+				:key="item.id"
+				:value="item.id"
+				class="item"
+				borderless
+			>
+				<span v-text="item.name" />
+			</t-checkbox>
+		</t-checkbox-group>
+		<div v-if="!eventList.length" class="empty-block">暂无可用登记事件</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { EventItem } from "@/types/EventItem";
+
+interface Props {
+	eventList: EventItem[];
+	label?: string;
+	requiredMark?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+	label: "登记事件",
+	requiredMark: false
+});
+
+const modelValue = defineModel<string[]>({ required: true });
+</script>
+
+<style scoped lang="less">
+.registration-event-selector {
+	width: 100%;
+	display: grid;
+	gap: .5rem;
+
+	.t-form__label {
+		margin: 0;
+
+		&.required::before {
+			color: #e34d59;
+			content: "*";
+			margin-right: .25rem;
+		}
+	}
+
+	.group {
+		width: 100%;
+		gap: .75rem;
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	:deep(.item) {
+		margin: 0;
+		padding: .875rem;
+		display: flex;
+		justify-content: center;
+		background: #f8fbff;
+		border: 1px solid rgba(148, 163, 184, .28);
+		border-radius: 1rem;
+	}
+
+	.empty-block {
+		color: #52607a;
+		text-align: center;
+	}
+}
+
+:global(html.theme-dark) {
+	.registration-event-selector {
+		.label {
+			color: #94a3b8;
+		}
+
+		.empty-block,
+		:deep(.item) {
+			color: #e2e8f0;
+			background: rgba(15, 23, 42, .72);
+			border-color: rgba(148, 163, 184, .16);
+		}
+	}
+}
+</style>
+