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

- App.vue: 新增三段式视图切换滑块 (编辑/月预览/周预览), 条件渲染对应组件
- MonthPreview.vue (新增): 月历网格, 每天显示事件标题色块, 悬停显示详情,
  支持上一月/下一月翻页, 今天高亮
- WeekPreview.vue (新增): 时间网格 (7列周一~周日, 24行每小时), 事件按真实
  时间定位 (top/height), 重叠事件并排布局, 支持上一周/下一周翻页
- 编辑模式显示左侧事件列表, 预览模式隐藏列表占满宽度

src/App.vue

@@ -4,22 +4,42 @@ import DropZone from './components/DropZone.vue'
 import HeaderBar from './components/HeaderBar.vue'
 import EventList from './components/EventList.vue'
 import EventDetail from './components/EventDetail.vue'
+import MonthPreview from './components/MonthPreview.vue'
+import WeekPreview from './components/WeekPreview.vue'
 
-const { isLoaded } = useCalendar()
+const { isLoaded, state, setViewMode } = useCalendar()
 </script>
 
 <template>
   <div class="app">
     <header class="app-header">
-      <h1>ICS 日程整理器</h1>
+      <div class="header-left">
+        <h1>ICS 日程整理器</h1>
+        <div v-if="isLoaded" class="view-switcher">
+          <button
+            :class="{ active: state.viewMode === 'edit' }"
+            @click="setViewMode('edit')"
+          >编辑</button>
+          <button
+            :class="{ active: state.viewMode === 'month' }"
+            @click="setViewMode('month')"
+          >月预览</button>
+          <button
+            :class="{ active: state.viewMode === 'week' }"
+            @click="setViewMode('week')"
+          >周预览</button>
+        </div>
+      </div>
       <HeaderBar />
     </header>
     <main class="app-main">
       <DropZone v-if="!isLoaded" />
       <template v-else>
-        <EventList />
+        <EventList v-if="state.viewMode === 'edit'" />
         <div class="detail-area">
-          <EventDetail />
+          <EventDetail v-if="state.viewMode === 'edit'" />
+          <MonthPreview v-else-if="state.viewMode === 'month'" />
+          <WeekPreview v-else-if="state.viewMode === 'week'" />
         </div>
       </template>
     </main>
@@ -43,7 +63,32 @@ body {
   justify-content: space-between;
   align-items: center;
 }
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+}
 .app-header h1 { font-size: 18px; font-weight: 600; }
+.view-switcher {
+  display: flex;
+  background: #1a252f;
+  border-radius: 6px;
+  overflow: hidden;
+}
+.view-switcher button {
+  background: transparent;
+  color: #bdc3c7;
+  border: none;
+  padding: 6px 16px;
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+.view-switcher button:hover { color: #fff; }
+.view-switcher button.active {
+  background: #3498db;
+  color: #fff;
+}
 .app-main { flex: 1; display: flex; overflow: hidden; }
 .detail-area { flex: 1; overflow-y: auto; }
 .empty {