From 7edcf8c67a9fc9ba0fe99158e8a501f671968f25 Mon Sep 17 00:00:00 2001
From: zikai <zikai@zikai.wang>
Date: Wed, 22 Jul 2026 07:29:45 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=91=A8=E9=A2=84=E8=A7=88=E6=8A=98?=
 =?UTF-8?q?=E5=8F=A0=E6=94=B9=E4=B8=BA=E6=8A=98=E5=8F=A0=E6=B5=85=E7=81=B0?=
 =?UTF-8?q?=E9=9D=9E=E5=B7=A5=E4=BD=9C=E6=97=B6=E6=AE=B5=E5=8C=BA=E5=9F=9F?=
 =?UTF-8?q?,=20=E8=80=8C=E9=9D=9E=E6=95=B4=E4=B8=AA=E7=BD=91=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 折叠对象改为 8:00 前/22:00 后的浅灰区域, 工作时段始终可见
- 浅灰区域无事件 -> 默认折叠; 有事件 -> 默认展开
- 按钮切换「折叠夜间/展开夜间」, 切换周时按是否有夜间事件重置
- 折叠时网格从 8:00 起 (gridStartMin), 事件与 hour-line 按行索引定位
---
 src/components/WeekPreview.vue | 78 ++++++++++++++++++++++------------
 1 file changed, 50 insertions(+), 28 deletions(-)

diff --git a/src/components/WeekPreview.vue b/src/components/WeekPreview.vue
index 774ebf9..938bcea 100644
--- a/src/components/WeekPreview.vue
+++ b/src/components/WeekPreview.vue
@@ -15,8 +15,10 @@ 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) 置淡灰
+const OFF_HOUR_START = 8   // 8:00 起为工作时段
+const OFF_HOUR_END = 22    // 22:00 起为非工作时段
 function isOffHour(h) {
-  return h < 8 || h >= 22
+  return h < OFF_HOUR_START || h >= OFF_HOUR_END
 }
 
 // 当前周的 7 天日期 (周一~周日)
@@ -95,21 +97,55 @@ const hasEvents = computed(function () {
   return false
 })
 
-// 折叠状态: 本周无日程时自动折叠; 按钮可强制切换
-const collapsed = ref(false)
+// 非工作时段 (8:00 前 / 22:00 后) 是否有事件落入
+// 事件开始 < 8:00 或 结束 > 22:00 即视为占用非工作时段
+const offHoursHaveEvents = computed(function () {
+  const offStart = OFF_HOUR_START * 60
+  const offEnd = OFF_HOUR_END * 60
+  for (const items of laidOutByDate.value.values()) {
+    for (const it of items) {
+      if (it.startMin < offStart || it.endMin > offEnd) return true
+    }
+  }
+  return false
+})
+
+// 折叠状态: 折叠的是非工作时段 (浅灰区域), 不是整个网格。
+// 默认: 非工作时段无事件 -> 折叠; 有事件 -> 展开。按钮可强制切换。
+const offHoursCollapsed = ref(false)
 watch(weekLabel, function () {
-  // 切换周时, 若新周无日程则自动折叠
-  collapsed.value = !hasEvents.value
+  // 切换周时, 按非工作时段是否有事件重置折叠状态
+  offHoursCollapsed.value = !offHoursHaveEvents.value
 }, { immediate: true })
 
 function toggleCollapse() {
-  collapsed.value = !collapsed.value
+  offHoursCollapsed.value = !offHoursCollapsed.value
 }
 
+// 渲染的小时列表: 折叠时仅显示工作时段 (8-21), 展开时显示全天 (0-23)
+const displayHours = computed(function () {
+  if (offHoursCollapsed.value) {
+    return hours.filter(function (h) { return !isOffHour(h) })
+  }
+  return hours
+})
+
+// 网格起始分钟: 折叠时从 8:00 (480) 起, 展开时从 0:00 起。
+// 事件与 hour-line 的 top 均相对于此基准。
+const gridStartMin = computed(function () {
+  return offHoursCollapsed.value ? OFF_HOUR_START * 60 : 0
+})
+
+// 折叠时 day-body 的高度 (仅工作时段) 与展开时 (全天) 不同
+const dayBodyHeight = computed(function () {
+  return displayHours.value.length * HOUR_HEIGHT
+})
+
 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 pxPerMin = HOUR_HEIGHT / 60
+  const top = (occ.startMin - gridStartMin.value) * pxPerMin
+  const height = Math.max((occ.endMin - occ.startMin) * pxPerMin, 18)
   const widthPct = 100 / occ.totalCols
   return {
     top: top + 'px',
@@ -139,17 +175,17 @@ function tooltip(ev) {
       <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 ? '展开' : '折叠' }}
+        {{ offHoursCollapsed ? '展开夜间' : '折叠夜间' }}
       </button>
       <span v-if="!hasEvents" class="empty-hint">本周无日程</span>
     </div>
-    <div v-show="!collapsed" class="week-grid-wrapper">
+    <div class="week-grid-wrapper">
       <div class="week-grid">
         <!-- 左侧时间标签列 -->
         <div class="time-col">
           <div class="time-spacer"></div>
           <div
-            v-for="h in hours"
+            v-for="h in displayHours"
             :key="h"
             class="time-slot"
             :class="{ 'off-hour': isOffHour(h) }"
@@ -164,13 +200,13 @@ function tooltip(ev) {
             {{ headers[idx] }}
             <span class="day-date">{{ parseISODate(dateStr).day }}</span>
           </div>
-          <div class="day-body" :style="{ height: 24 * HOUR_HEIGHT + 'px' }">
+          <div class="day-body" :style="{ height: dayBodyHeight + 'px' }">
             <div
-              v-for="h in hours"
+              v-for="(h, i) in displayHours"
               :key="h"
               class="hour-line"
               :class="{ 'off-hour': isOffHour(h) }"
-              :style="{ top: h * HOUR_HEIGHT + 'px', height: HOUR_HEIGHT + 'px' }"
+              :style="{ top: i * HOUR_HEIGHT + 'px', height: HOUR_HEIGHT + 'px' }"
             ></div>
             <div
               v-for="occ in (laidOutByDate.get(dateStr) || [])"
@@ -186,10 +222,6 @@ 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>
 
@@ -302,16 +334,6 @@ function tooltip(ev) {
 .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;