feat: 新增月预览和周预览组件及视图切换滑块

- App.vue: 新增三段式视图切换滑块 (编辑/月预览/周预览), 条件渲染对应组件 - MonthPreview.vue (新增): 月历网格, 每天显示事件标题色块, 悬停显示详情, 支持上一月/下一月翻页, 今天高亮 - WeekPreview.vue (新增): 时间网格 (7列周一~周日, 24行每小时), 事件按真实时间定位 (top/height), 重叠事件并排布局, 支持上一周/下一周翻页 - 编辑模式显示左侧事件列表, 预览模式隐藏列表占满宽度
2026-07-22 04:07:16 +00:00
parent f4c11bdc3e
commit add471eb44
3 changed files with 517 additions and 4 deletions
--- a/src/components/MonthPreview.vue
+++ b/src/components/MonthPreview.vue
@@ -0,0 +1,205 @@
+<script setup>
+import { computed } from 'vue'
+import { useCalendar } from '../composables/useCalendar.js'
+import { expandOccurrences } from '../lib/recur.js'
+import { eventColor } from '../lib/colors.js'
+import {
+  startOfMonth, startOfWeek, addDays, toISODate, toDate,
+  parseISODate, todayISO,
+} from '../lib/date.js'
+import { DOW } from '../lib/weekday.js'
+
+const { state, prevMonth, nextMonth } = useCalendar()
+
+// 表头: 周一~周日
+const headers = DOW.slice(1).concat(DOW[0]) // 周一..周日
+
+// 当前预览月的年月标签
+const monthLabel = computed(() => {
+  const { year, month } = parseISODate(startOfMonth(state.previewDate))
+  return `${year} 年 ${month} 月`
+})
+
+// 构建月历网格 (6 行 x 7 列, 从当月首日所在周的周一开始)
+const gridDays = computed(() => {
+  const monthStart = startOfMonth(state.previewDate)
+  const gridStart = startOfWeek(monthStart)
+  const days = []
+  for (let i = 0; i < 42; i++) {
+    days.push(addDays(gridStart, i))
+  }
+  return days
+})
+
+// 按日期分组所有 occurrence, 过滤掉 skipped
+// 返回 Map<dateStr, Array<{ event, date }>>
+const occByDate = computed(() => {
+  const map = new Map()
+  for (const ev of state.events) {
+    const occs = expandOccurrences(ev)
+    for (const occ of occs) {
+      if (occ.skipped) continue
+      if (!map.has(occ.date)) map.set(occ.date, [])
+      map.get(occ.date).push({ event: ev, date: occ.date })
+    }
+  }
+  return map
+})
+
+const today = todayISO()
+
+function isInMonth(dateStr) {
+  const target = parseISODate(state.previewDate)
+  const day = parseISODate(dateStr)
+  return target.month === day.month && target.year === day.year
+}
+
+function colorStyle(uid) {
+  const c = eventColor(uid)
+  return {
+    backgroundColor: c.bg,
+    borderLeft: `3px solid ${c.border}`,
+    color: c.text,
+  }
+}
+
+// tooltip 详细信息
+function tooltip(ev) {
+  const parts = [ev.summary || '(无标题)']
+  parts.push(`${ev.dtstartTime} - ${ev.dtendTime}`)
+  if (ev.location) parts.push(`地点: ${ev.location}`)
+  if (ev.description) parts.push(`描述: ${ev.description}`)
+  return parts.join('\n')
+}
+</script>
+
+<template>
+  <div class="month-preview">
+    <div class="preview-toolbar">
+      <button class="nav-btn" @click="prevMonth">上个月</button>
+      <span class="month-label">{{ monthLabel }}</span>
+      <button class="nav-btn" @click="nextMonth">下个月</button>
+    </div>
+    <div class="month-grid">
+      <div v-for="h in headers" :key="h" class="grid-header">{{ h }}</div>
+      <div
+        v-for="dateStr in gridDays"
+        :key="dateStr"
+        class="grid-cell"
+        :class="{
+          'out-of-month': !isInMonth(dateStr),
+          'is-today': dateStr === today,
+        }"
+      >
+        <span class="day-num">{{ parseISODate(dateStr).day }}</span>
+        <div class="event-list">
+          <div
+            v-for="occ in (occByDate.get(dateStr) || [])"
+            :key="occ.event.uid + occ.date"
+            class="event-chip"
+            :style="colorStyle(occ.event.uid)"
+            :title="tooltip(occ.event)"
+          >
+            {{ occ.event.summary || '(无标题)' }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.month-preview {
+  padding: 16px 24px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.preview-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+.nav-btn {
+  padding: 5px 14px;
+  border: 1px solid #d5dbdb;
+  border-radius: 6px;
+  background: #fff;
+  cursor: pointer;
+  font-size: 13px;
+  color: #2c3e50;
+}
+.nav-btn:hover { background: #ecf0f1; }
+.month-label {
+  font-size: 16px;
+  font-weight: 600;
+  color: #2c3e50;
+  min-width: 140px;
+  text-align: center;
+}
+.month-grid {
+  flex: 1;
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  grid-auto-rows: 1fr;
+  gap: 1px;
+  background: #e0e3e6;
+  border: 1px solid #e0e3e6;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.grid-header {
+  background: #2c3e50;
+  color: #fff;
+  text-align: center;
+  font-size: 13px;
+  font-weight: 600;
+  padding: 8px 0;
+}
+.grid-cell {
+  background: #fff;
+  padding: 4px 6px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-height: 0;
+}
+.grid-cell.out-of-month { background: #f8f9fa; }
+.grid-cell.out-of-month .day-num { color: #bdc3c7; }
+.grid-cell.is-today { background: #eaf4fc; }
+.grid-cell.is-today .day-num {
+  color: #fff;
+  background: #3498db;
+  border-radius: 50%;
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+}
+.day-num {
+  font-size: 13px;
+  font-weight: 600;
+  color: #2c3e50;
+  margin-bottom: 2px;
+}
+.event-list {
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.event-chip {
+  font-size: 11px;
+  padding: 1px 5px;
+  border-radius: 3px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: default;
+}
+</style>
--- a/src/components/WeekPreview.vue
+++ b/src/components/WeekPreview.vue
@@ -0,0 +1,263 @@
+<script setup>
+import { computed } from 'vue'
+import { useCalendar } from '../composables/useCalendar.js'
+import { expandOccurrences } from '../lib/recur.js'
+import { eventColor } from '../lib/colors.js'
+import {
+  startOfWeek, addDays, parseISODate, todayISO, hhmmToMinutes,
+} from '../lib/date.js'
+import { DOW } from '../lib/weekday.js'
+
+const { state, prevWeek, nextWeek } = useCalendar()
+
+const HOUR_HEIGHT = 48 // 每小时像素高度
+const headers = DOW.slice(1).concat(DOW[0]) // 周一..周日
+
+const hours = Array.from({ length: 24 }, (_, i) => i)
+
+// 当前周的 7 天日期 (周一~周日)
+const weekDays = computed(() => {
+  const ws = startOfWeek(state.previewDate)
+  return Array.from({ length: 7 }, (_, i) => addDays(ws, i))
+})
+
+// 周范围标签
+const weekLabel = computed(() => {
+  const days = weekDays.value
+  const first = days[0]
+  const last = days[6]
+  const f = parseISODate(first)
+  const l = parseISODate(last)
+  return `${f.year}/${f.month}/${f.day} - ${l.year}/${l.month}/${l.day}`
+})
+
+const today = todayISO()
+
+// 收集本周所有 occurrence, 按日期分组
+// 每条记录: { event, date, startMin, endMin }
+const occByDate = computed(() => {
+  const map = new Map()
+  const weekSet = new Set(weekDays.value)
+  for (const ev of state.events) {
+    const occs = expandOccurrences(ev)
+    for (const occ of occs) {
+      if (occ.skipped) continue
+      if (!weekSet.has(occ.date)) continue
+      const startMin = hhmmToMinutes(ev.dtstartTime)
+      const endMin = hhmmToMinutes(ev.dtendTime)
+      if (!map.has(occ.date)) map.set(occ.date, [])
+      map.get(occ.date).push({ event: ev, date: occ.date, startMin, endMin })
+    }
+  }
+  return map
+})
+
+// 对同一天的事件做并排布局: 检测重叠并分配列
+function layoutEvents(items) {
+  if (items.length === 0) return []
+  // 按开始时间排序
+  const sorted = items.slice().sort(function (a, b) { return a.startMin - b.startMin })
+  // 简单重叠分列: 逐个分配到第一个不冲突的列
+  const placed = [] // { item, col, totalCols }
+  for (const item of sorted) {
+    let col = 0
+    while (true) {
+      const conflict = placed.find(
+        (p) => p.col === col && p.item.startMin < item.endMin && item.startMin < p.item.endMin,
+      )
+      if (!conflict) break
+      col++
+    }
+    placed.push({ item, col })
+  }
+  const maxCol = Math.max.apply(null, placed.map(function (p) { return p.col }).concat([0]))
+  return placed.map(function (p) { return Object.assign({}, p.item, { col: p.col, totalCols: maxCol + 1 }) })
+}
+
+function eventStyle(occ) {
+  const c = eventColor(occ.event.uid)
+  const top = occ.startMin * (HOUR_HEIGHT / 60)
+  const height = Math.max((occ.endMin - occ.startMin) * (HOUR_HEIGHT / 60), 18)
+  const widthPct = 100 / occ.totalCols
+  return {
+    top: `${top}px`,
+    height: `${height}px`,
+    left: `${occ.col * widthPct}%`,
+    width: `${widthPct}%`,
+    backgroundColor: c.bg,
+    borderLeft: `3px solid ${c.border}`,
+    color: c.text,
+  }
+}
+
+function tooltip(ev) {
+  const parts = [ev.summary || '(无标题)']
+  parts.push(`${ev.dtstartTime} - ${ev.dtendTime}`)
+  if (ev.location) parts.push(`地点: ${ev.location}`)
+  if (ev.description) parts.push(`描述: ${ev.description}`)
+  return parts.join('\n')
+}
+</script>
+
+<template>
+  <div class="week-preview">
+    <div class="preview-toolbar">
+      <button class="nav-btn" @click="prevWeek">上一周</button>
+      <span class="week-label">{{ weekLabel }}</span>
+      <button class="nav-btn" @click="nextWeek">下一周</button>
+    </div>
+    <div class="week-grid-wrapper">
+      <!-- 时间轴 + 7 列网格 -->
+      <div class="week-grid">
+        <!-- 左侧时间标签列 -->
+        <div class="time-col">
+          <div class="time-spacer"></div>
+          <div v-for="h in hours" :key="h" class="time-slot" :style="{ height: HOUR_HEIGHT + 'px' }">
+            {{ String(h).padStart(2, '0') }}:00
+          </div>
+        </div>
+        <!-- 7 天列 -->
+        <div v-for="(dateStr, idx) in weekDays" :key="dateStr" class="day-col">
+          <div class="day-header" :class="{ 'is-today': dateStr === today }">
+            {{ headers[idx] }}
+            <span class="day-date">{{ parseISODate(dateStr).day }}</span>
+          </div>
+          <div class="day-body" :style="{ height: 24 * HOUR_HEIGHT + 'px' }">
+            <!-- 背景网格线 -->
+            <div
+              v-for="h in hours"
+              :key="h"
+              class="hour-line"
+              :style="{ top: h * HOUR_HEIGHT + 'px', height: HOUR_HEIGHT + 'px' }"
+            ></div>
+            <!-- 事件块 -->
+            <div
+              v-for="occ in layoutEvents(occByDate.get(dateStr) || [])"
+              :key="occ.event.uid + occ.date"
+              class="event-block"
+              :style="eventStyle(occ)"
+              :title="tooltip(occ.event)"
+            >
+              <div class="event-title">{{ occ.event.summary || '(无标题)' }}</div>
+              <div class="event-time">{{ occ.event.dtstartTime }} - {{ occ.event.dtendTime }}</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.week-preview {
+  padding: 16px 24px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.preview-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+.nav-btn {
+  padding: 5px 14px;
+  border: 1px solid #d5dbdb;
+  border-radius: 6px;
+  background: #fff;
+  cursor: pointer;
+  font-size: 13px;
+  color: #2c3e50;
+}
+.nav-btn:hover { background: #ecf0f1; }
+.week-label {
+  font-size: 16px;
+  font-weight: 600;
+  color: #2c3e50;
+  min-width: 200px;
+  text-align: center;
+}
+.week-grid-wrapper {
+  flex: 1;
+  overflow: auto;
+  border: 1px solid #e0e3e6;
+  border-radius: 8px;
+}
+.week-grid {
+  display: flex;
+  min-width: 700px;
+}
+.time-col {
+  width: 56px;
+  flex-shrink: 0;
+  border-right: 1px solid #e0e3e6;
+}
+.time-spacer {
+  height: 40px; /* 与 day-header 等高 */
+  border-bottom: 1px solid #e0e3e6;
+}
+.time-slot {
+  font-size: 11px;
+  color: #95a5a6;
+  text-align: right;
+  padding-right: 6px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.day-col {
+  flex: 1;
+  min-width: 0;
+  border-right: 1px solid #e0e3e6;
+}
+.day-col:last-child { border-right: none; }
+.day-header {
+  height: 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 600;
+  color: #2c3e50;
+  border-bottom: 1px solid #e0e3e6;
+  background: #f8f9fa;
+}
+.day-header.is-today {
+  background: #eaf4fc;
+  color: #3498db;
+}
+.day-date {
+  font-size: 14px;
+}
+.day-body {
+  position: relative;
+  overflow: hidden;
+}
+.hour-line {
+  position: absolute;
+  left: 0;
+  right: 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+.event-block {
+  position: absolute;
+  border-radius: 4px;
+  padding: 2px 4px;
+  font-size: 11px;
+  overflow: hidden;
+  box-sizing: border-box;
+  cursor: default;
+  z-index: 1;
+}
+.event-title {
+  font-weight: 600;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.event-time {
+  font-size: 10px;
+  opacity: 0.8;
+}
+</style>