From 8a1d547001808a272bd611b0a1918a19ce3cad14 Mon Sep 17 00:00:00 2001
From: timeTable2 dev <dev@local>
Date: Mon, 13 Jul 2026 18:41:51 +0800
Subject: [PATCH] feat: add OccurrenceGrid component

---
 src/components/OccurrenceGrid.vue | 74 +++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
 create mode 100644 src/components/OccurrenceGrid.vue

diff --git a/src/components/OccurrenceGrid.vue b/src/components/OccurrenceGrid.vue
new file mode 100644
index 0000000..34d372b
--- /dev/null
+++ b/src/components/OccurrenceGrid.vue
@@ -0,0 +1,74 @@
+<script setup>
+import { computed } from 'vue'
+import { DOW } from '../lib/weekday.js'
+import { expandOccurrences } from '../lib/recur.js'
+
+const props = defineProps({
+  event: { type: Object, required: true },
+})
+const emit = defineEmits(['toggle'])
+
+const occurrences = computed(() => expandOccurrences(props.event))
+
+function dowFor(dateStr) {
+  return DOW[new Date(dateStr + 'T00:00:00').getDay()]
+}
+</script>
+
+<template>
+  <div>
+    <p class="hint">
+      点击日期切换"排除/包含"状态。排除的日期（红色删除线）会写入 EXDATE。
+    </p>
+    <div class="occ-grid">
+      <div
+        v-for="occ in occurrences"
+        :key="occ.date"
+        class="occ"
+        :class="occ.skipped ? 'skipped' : 'active'"
+        @click="emit('toggle', occ.date)"
+      >
+        {{ occ.date }}<br />
+        <span class="dow">{{ dowFor(occ.date) }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.hint {
+  font-size: 12px;
+  color: #7f8c8d;
+  margin-bottom: 8px;
+}
+.occ-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 8px;
+  max-height: 360px;
+  overflow-y: auto;
+  padding: 4px;
+}
+.occ {
+  padding: 8px 10px;
+  border: 1px solid #d5dbdb;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 12px;
+  text-align: center;
+  transition: all 0.12s;
+}
+.occ:hover { border-color: #3498db; }
+.occ.skipped {
+  background: #fce4ec;
+  border-color: #e74c3c;
+  color: #c0392b;
+  text-decoration: line-through;
+}
+.occ.active {
+  background: #e8f5e9;
+  border-color: #27ae60;
+  color: #1e7d32;
+}
+.dow { font-size: 10px; color: #95a5a6; }
+</style>