diff --git a/src/components/MonthPreview.vue b/src/components/MonthPreview.vue index 3ef59e9..0a48e95 100644 --- a/src/components/MonthPreview.vue +++ b/src/components/MonthPreview.vue @@ -1,5 +1,5 @@ @@ -77,6 +80,7 @@ function tooltip(ev) { {{ monthLabel }} +
{{ h }}
@@ -96,13 +100,21 @@ function tooltip(ev) { :key="occ.event.uid + occ.date" class="event-chip" :style="colorStyle(occ.event.uid)" - :title="tooltip(occ.event)" + @mouseenter="showTooltip(occ.event)" + @mouseleave="hideTooltip" > {{ occ.event.summary || '(无标题)' }}
+ +
+
{{ hoverEvent.summary || '(无标题)' }}
+
时间: {{ hoverEvent.dtstartTime }} - {{ hoverEvent.dtendTime }}
+
地点: {{ hoverEvent.location }}
+
{{ hoverEvent.description }}
+
@@ -112,6 +124,7 @@ function tooltip(ev) { height: 100%; display: flex; flex-direction: column; + position: relative; } .preview-toolbar { display: flex; @@ -130,6 +143,8 @@ function tooltip(ev) { color: #2c3e50; } .nav-btn:hover { background: #ecf0f1; } +.today-btn { border-color: #3498db; color: #3498db; font-weight: 600; } +.today-btn:hover { background: #eaf4fc; } .month-label { font-size: 16px; font-weight: 600; @@ -200,4 +215,33 @@ function tooltip(ev) { text-overflow: ellipsis; cursor: default; } +.event-tooltip { + position: fixed; + bottom: 16px; + right: 16px; + max-width: 320px; + background: #fff; + border: 1px solid #d5dbdb; + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + padding: 12px 16px; + z-index: 100; + font-size: 13px; +} +.tooltip-title { + font-size: 14px; + font-weight: 700; + color: #2c3e50; + margin-bottom: 6px; +} +.tooltip-row { + color: #34495e; + margin-bottom: 3px; +} +.tooltip-desc { + color: #7f8c8d; + margin-top: 6px; + white-space: pre-wrap; + word-break: break-all; +} diff --git a/src/components/WeekPreview.vue b/src/components/WeekPreview.vue index a6efb93..31d0bad 100644 --- a/src/components/WeekPreview.vue +++ b/src/components/WeekPreview.vue @@ -8,7 +8,7 @@ import { } from '../lib/date.js' import { DOW } from '../lib/weekday.js' -const { state, prevWeek, nextWeek } = useCalendar() +const { state, prevWeek, nextWeek, goToToday } = useCalendar() const HOUR_HEIGHT = 48 // 每小时像素高度 const headers = DOW.slice(1).concat(DOW[0]) // 周一..周日 @@ -113,6 +113,7 @@ function tooltip(ev) { {{ weekLabel }} +
@@ -177,6 +178,8 @@ function tooltip(ev) { color: #2c3e50; } .nav-btn:hover { background: #ecf0f1; } +.today-btn { border-color: #3498db; color: #3498db; font-weight: 600; } +.today-btn:hover { background: #eaf4fc; } .week-label { font-size: 16px; font-weight: 600; diff --git a/src/composables/useCalendar.js b/src/composables/useCalendar.js index 55fb19b..311fb4f 100644 --- a/src/composables/useCalendar.js +++ b/src/composables/useCalendar.js @@ -174,6 +174,10 @@ function nextWeek() { state.previewDate = addDays(state.previewDate, 7) } +function goToToday() { + state.previewDate = todayISO() +} + // ------------------------------------------------------------------ // // 计算属性 // ------------------------------------------------------------------ // @@ -211,5 +215,6 @@ export function useCalendar() { nextMonth, prevWeek, nextWeek, + goToToday, } }