From e64f9f4adfc7250af5d9e310c8d52333b3c5fabd Mon Sep 17 00:00:00 2001
From: zikai <zikai@zikai.wang>
Date: Wed, 22 Jul 2026 07:05:08 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=91=A8=E9=A2=84=E8=A7=88=E9=9D=9E?=
 =?UTF-8?q?=E5=B7=A5=E4=BD=9C=E6=97=B6=E6=AE=B5=E6=B7=A1=E7=81=B0,=20?=
 =?UTF-8?q?=E6=9C=AC=E5=91=A8=E6=97=A0=E6=97=A5=E7=A8=8B=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E6=8A=98=E5=8F=A0,=20=E6=8A=98=E5=8F=A0/=E5=B1=95=E5=BC=80?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 8:00 前与 22:00 后的时段/hour-line 置淡灰背景
- 本周无日程时自动折叠周网格, 显示占位提示
- 工具栏新增折叠/展开切换按钮, 可强制展开空周
- 切换周时按是否有日程自动重置折叠状态
---
 src/components/WeekPreview.vue | 70 ++++++++++++++++++++++++++++++++--
 1 file changed, 67 insertions(+), 3 deletions(-)

diff --git a/src/components/WeekPreview.vue b/src/components/WeekPreview.vue
index f8faaea..774ebf9 100644
--- a/src/components/WeekPreview.vue
+++ b/src/components/WeekPreview.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useCalendar } from '../composables/useCalendar.js'
 import { expandOccurrences } from '../lib/recur.js'
 import { eventColor } from '../lib/colors.js'
@@ -14,6 +14,11 @@ const HOUR_HEIGHT = 48 // 每小时像素高度
 const headers = DOW.slice(1).concat(DOW[0]) // 周一..周日
 const hours = Array.from({ length: 24 }, function (_, i) { return i })
 
+// 非工作时段: 8:00 前 (0-7) 与 22:00 后 (22-23) 置淡灰
+function isOffHour(h) {
+  return h < 8 || h >= 22
+}
+
 // 当前周的 7 天日期 (周一~周日)
 const weekDays = computed(function () {
   const ws = startOfWeek(state.previewDate)
@@ -82,6 +87,25 @@ const laidOutByDate = computed(function () {
   return result
 })
 
+// 本周是否有任何日程
+const hasEvents = computed(function () {
+  for (const items of laidOutByDate.value.values()) {
+    if (items.length > 0) return true
+  }
+  return false
+})
+
+// 折叠状态: 本周无日程时自动折叠; 按钮可强制切换
+const collapsed = ref(false)
+watch(weekLabel, function () {
+  // 切换周时, 若新周无日程则自动折叠
+  collapsed.value = !hasEvents.value
+}, { immediate: true })
+
+function toggleCollapse() {
+  collapsed.value = !collapsed.value
+}
+
 function eventStyle(occ) {
   const c = eventColor(occ.event.uid)
   const top = occ.startMin * (HOUR_HEIGHT / 60)
@@ -114,13 +138,23 @@ function tooltip(ev) {
       <span class="week-label">{{ weekLabel }}</span>
       <button class="nav-btn" @click="nextWeek">下一周</button>
       <button class="nav-btn today-btn" @click="goToToday">回到今日</button>
+      <button class="nav-btn collapse-btn" @click="toggleCollapse">
+        {{ collapsed ? '展开' : '折叠' }}
+      </button>
+      <span v-if="!hasEvents" class="empty-hint">本周无日程</span>
     </div>
-    <div class="week-grid-wrapper">
+    <div v-show="!collapsed" class="week-grid-wrapper">
       <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' }">
+          <div
+            v-for="h in hours"
+            :key="h"
+            class="time-slot"
+            :class="{ 'off-hour': isOffHour(h) }"
+            :style="{ height: HOUR_HEIGHT + 'px' }"
+          >
             {{ String(h).padStart(2, '0') }}:00
           </div>
         </div>
@@ -135,6 +169,7 @@ function tooltip(ev) {
               v-for="h in hours"
               :key="h"
               class="hour-line"
+              :class="{ 'off-hour': isOffHour(h) }"
               :style="{ top: h * HOUR_HEIGHT + 'px', height: HOUR_HEIGHT + 'px' }"
             ></div>
             <div
@@ -151,6 +186,10 @@ function tooltip(ev) {
         </div>
       </div>
     </div>
+    <div v-if="collapsed" class="collapsed-placeholder">
+      <span v-if="!hasEvents">本周无日程</span>
+      <span v-else>本周视图已折叠</span>
+    </div>
   </div>
 </template>
 
@@ -180,6 +219,13 @@ function tooltip(ev) {
 .nav-btn:hover { background: #ecf0f1; }
 .today-btn { border-color: #3498db; color: #3498db; font-weight: 600; }
 .today-btn:hover { background: #eaf4fc; }
+.collapse-btn { border-color: #9b59b6; color: #9b59b6; font-weight: 600; }
+.collapse-btn:hover { background: #f4ecf7; }
+.empty-hint {
+  font-size: 13px;
+  color: #95a5a6;
+  font-style: italic;
+}
 .week-label {
   font-size: 16px;
   font-weight: 600;
@@ -213,6 +259,11 @@ function tooltip(ev) {
   padding-right: 6px;
   border-bottom: 1px solid #f0f0f0;
 }
+/* 非工作时段 (8:00 前 / 22:00 后) 淡灰 */
+.time-slot.off-hour {
+  color: #c4ccd0;
+  background: #f7f8f9;
+}
 .day-col {
   flex: 1;
   min-width: 0;
@@ -248,6 +299,19 @@ function tooltip(ev) {
   right: 0;
   border-bottom: 1px solid #f0f0f0;
 }
+.hour-line.off-hour {
+  background: #f7f8f9;
+}
+.collapsed-placeholder {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #95a5a6;
+  font-size: 14px;
+  font-style: italic;
+  padding: 40px;
+}
 .event-block {
   position: absolute;
   border-radius: 4px;