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 }}
+
@@ -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 || '(无标题)' }}
+
+
@@ -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,
}
}