better EventRecordList.vue option tips

src/pages/event/EventRecordList.vue

@@ -34,7 +34,7 @@
 				<t-dropdown-item
 					v-model="optionFilter"
 					:label="optionFilterLabel"
-					:disabled="!optionFilterOptions.length"
+					:footer="!optionFilterOptions.length ? optionFilterUnavailableFooter : undefined"
 					options-columns="2"
 					:options="optionFilterOptions"
 					multiple
@@ -218,6 +218,14 @@ const optionFilterOptions = computed(() => {
 			value: String(option.id)
 		})));
 });
+const optionFilterUnavailableReason = computed(() => actionFilter.value.length === 1
+	? "当前选择的事件没有可用选项"
+	: "请先只选择一个事件，才能按选项筛选");
+const optionFilterUnavailableFooter = (h: typeof import("vue").h) => h(
+	"div",
+	{ class: "center-tips red" },
+	optionFilterUnavailableReason.value
+);
 const optionFilterLabel = computed(() => {
 	if (!optionFilter.value.length) {
 		return "全部选项";
@@ -774,6 +782,13 @@ onUnmounted(() => {
 				white-space: nowrap;
 				text-overflow: ellipsis;
 			}
+
+			.option-empty-tip {
+				color: #64748b;
+				padding: .75rem 1rem;
+				font-size: .8125rem;
+				text-align: center;
+			}
 		}
 	}
 
@@ -832,6 +847,5 @@ onUnmounted(() => {
 			color: #94a3b8;
 		}
 	}
-
 }
 </style>