From 538d00d0706384d3ab46b1ec4030f67ae6178d13 Mon Sep 17 00:00:00 2001
From: "MJM_2025_05\\polly" <polly.hsu@mjmtech.com.tw>
Date: Tue, 23 Sep 2025 13:17:25 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=AD=A3=E9=A6=96=E9=A0=81?=
 =?UTF-8?q?=E5=9C=B0=E5=9C=96=E5=B1=95=E9=96=8B=E5=8D=A1=E9=A0=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                                    |   2 +-
 src/App.vue                                   |   2 +-
 src/components/common/forge/Forge.vue         | 239 ++++++++++--------
 src/components/home/DietSummary.vue           |  39 +--
 src/components/home/MapPane.vue               |  89 ++++---
 src/components/home/ProgressBar.vue           |   2 +-
 .../home/TodayActivitiesSection.vue           |   3 +-
 src/components/home/TrendChart.vue            |   9 +-
 src/constants/mocks/facilityData.js           |  73 +++---
 src/layouts/ForgeLayout.vue                   |   2 +-
 src/layouts/HeadquarterLayout.vue             |   7 +-
 src/main.js                                   |   1 -
 src/pages/home/index.vue                      |   5 +-
 src/style.css                                 |   4 +
 src/utils/versionGuard.js                     |  56 ++--
 15 files changed, 290 insertions(+), 243 deletions(-)
diff --git a/index.html b/index.html
index 9e8a9ad..6d09eed 100644
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>諾亞克 U-ARK 戰情中心</title>
   </head>
-  <body class="w-screen h-[1200px] bg-gradient-to-br from-brand-green-lighter via-brand-gray-lighter to-brand-purple-lighter font-noto text-brand-black">
+  <body class="font-noto text-brand-black">
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
diff --git a/src/App.vue b/src/App.vue
index d0fdf44..c7884a8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <section>
+  <section class="bg-gradient-to-br from-brand-green-lighter via-brand-gray-lighter to-brand-purple-lighter">
     <!-- 依據 route.meta.layout 動態載入對應 Layout -->
     <component :is="layoutComponent" />
   </section>
diff --git a/src/components/common/forge/Forge.vue b/src/components/common/forge/Forge.vue
index 946f491..9bc31de 100644
--- a/src/components/common/forge/Forge.vue
+++ b/src/components/common/forge/Forge.vue
@@ -258,7 +258,7 @@
     </div>
   </div>
 
-  <!-- 中央 Modal：病患資訊 -->
+  <!-- 中央 Modal：住民資訊 -->
   <div
     v-if="modalOpen"
     class="fixed inset-0 z-[120] flex items-center justify-center"
@@ -276,7 +276,7 @@
       <!-- 標題 -->
       <div class="flex items-center justify-between mb-4">
         <div>
-          <h3 class="text-lg font-semibold tracking-widest">病患資訊</h3>
+          <h3 class="text-lg font-semibold tracking-widest">住民資訊</h3>
         </div>
         <div class="flex justify-end items-center gap-4">
           <a
@@ -342,7 +342,7 @@ import {
 } from "@/constants/mocks/facilityData";
 
 let INITIAL_1F_STATE = null; // 儲存 1F 初始視角（含樓層隔離/相機/切面等）
-let INITIAL_1F_CAMERA = null;  // 相機詳細快照
+let INITIAL_1F_CAMERA = null; // 相機詳細快照
 
 /** ===================== Tabs：樓層/狀態/分區 ===================== */
 const floorTabItems = [
@@ -476,6 +476,7 @@ const activeFloor = ref("1F");
 
 let unbindSpriteClick = null;
 let THREE = null;
+let _resizeObserver = null; // 用於追蹤並釋放 ResizeObserver
 
 const {
   updateDataVisualization: dvInit,
@@ -527,10 +528,11 @@ try {
 
 function loadResidentStore() {
   try {
-    return new Map(
-      JSON.parse(localStorage.getItem(RESIDENT_STORE_KEY) || "[]")
-    );
-  } catch {
+    const raw = localStorage.getItem(RESIDENT_STORE_KEY);
+    if (!raw) return new Map();
+    return new Map(JSON.parse(raw));
+  } catch (err) {
+    console.warn("[Forge] loadResidentStore failed:", err);
     return new Map();
   }
 }
@@ -561,8 +563,6 @@ function bedKeyFromNodeName(name, fallbackCode3) {
 function ensureResidentFor(bedKey, genderHint) {
   const key = String(bedKey || "").trim();
   if (!key) return null;
-
-  // 先看「寫死表」（有的話，直接用它並覆蓋 localStorage）
   const fixed = RESIDENTS_BY_BED && RESIDENTS_BY_BED[key];
   if (fixed) {
     const rec = {
@@ -580,15 +580,11 @@ function ensureResidentFor(bedKey, genderHint) {
     saveResidentStore(RESIDENT_BY_BED);
     return rec;
   }
-
-  // 再看 localStorage（沒有寫死表才用舊值；補齊性別）
   const existed = RESIDENT_BY_BED.get(key);
   if (existed) {
     if (!existed.residentsSex && genderHint) existed.residentsSex = genderHint;
     return existed;
   }
-
-  // 最後備援（真的沒定義到的床位）
   const g = genderHint === "女" ? "女" : "男";
   const pool = g === "男" ? NAME_POOL_MALE : NAME_POOL_FEMALE;
   const idx = hashFNV1a(key) % pool.length;
@@ -610,7 +606,6 @@ function ensureResidentFor(bedKey, genderHint) {
 
 /** ===================== 分區映射（房號 → 一般/氧氣） ===================== */
 const ROOM_ZONE_MAP = { "1F": new Map(), "2F": new Map() };
-// 固定分區持久化（依 3 位房號）—— 一次決定，之後沿用
 const ZONE_STORE_KEY = "uark-room-zone-v1";
 function loadZoneStore() {
   try {
@@ -624,14 +619,11 @@ function saveZoneStore(obj) {
     localStorage.setItem(ZONE_STORE_KEY, JSON.stringify(obj));
   } catch {}
 }
-// 依本層房號清單，確保 ROOM_ZONE_MAP 有「寫死」分區；若沒存過就用交錯規則初始化並持久化
 function ensureZoneMapForFloor(model, floorKey, floorRootId) {
   const store = loadZoneStore();
   const floorStore = store[floorKey] || {};
   const tree = model.getInstanceTree?.();
   if (!tree || floorRootId == null) return ROOM_ZONE_MAP[floorKey];
-
-  // 取得本層所有「有幾何的房號（3 位）」並排序
   const seen = new Set();
   const rooms = [];
   const code3For = (name) => {
@@ -665,8 +657,6 @@ function ensureZoneMapForFloor(model, floorKey, floorRootId) {
   };
   walk(floorRootId);
   rooms.sort((a, b) => parseInt(a, 10) - parseInt(b, 10));
-
-  // 填滿 floorStore：沒存過的用交錯（偶數索引→一般；奇數索引→氧氣）
   rooms.forEach((code, idx) => {
     if (floorStore[code] !== "一般" && floorStore[code] !== "氧氣") {
       floorStore[code] = idx % 2 === 0 ? "一般" : "氧氣";
@@ -674,12 +664,9 @@ function ensureZoneMapForFloor(model, floorKey, floorRootId) {
   });
   store[floorKey] = floorStore;
   saveZoneStore(store);
-
-  // 寫回記憶體的 MAP
   ROOM_ZONE_MAP[floorKey] = new Map(Object.entries(floorStore));
   return ROOM_ZONE_MAP[floorKey];
 }
-
 function getZoneForRoom(floorKey, code3) {
   return ROOM_ZONE_MAP[floorKey]?.get(String(code3)) ?? null;
 }
@@ -744,10 +731,53 @@ function resolveInitialFloor() {
   return "1F";
 }
 
-/** ===================== Forge 初始化 / 模型載入 ===================== */
-function initViewer(container) {
+/** ===================== 等容器有尺寸再啟動 Viewer ===================== */
+async function waitForContainerSize(
+  el,
+  { minW = 2, minH = 2, timeout = 4000 } = {}
+) {
+  if (!el) return false;
+  const ok = () => el.clientWidth >= minW && el.clientHeight >= minH;
+  if (ok()) return true;
   return new Promise((resolve) => {
-    Autodesk.Viewing.Initializer({ env: "Local", language: "en" }, () => {
+    let done = false;
+    const t = setTimeout(() => {
+      if (!done) {
+        done = true;
+        ro.disconnect();
+        resolve(ok());
+      }
+    }, timeout);
+    const ro = new ResizeObserver(() => {
+      if (done) return;
+      if (ok()) {
+        done = true;
+        clearTimeout(t);
+        ro.disconnect();
+        requestAnimationFrame(() => resolve(true));
+      }
+    });
+    ro.observe(el);
+    requestAnimationFrame(() => {
+      if (!done && ok()) {
+        done = true;
+        clearTimeout(t);
+        ro.disconnect();
+        resolve(true);
+      }
+    });
+  });
+}
+
+/** ===================== Forge 初始化 / 模型載入 ===================== */
+async function initViewer(container) {
+  return new Promise((resolve) => {
+    const initOpts = { env: "Local", language: "en" };
+    try {
+      initOpts.useADP = false;
+      initOpts.experimental = { disableIndexedDb: true };
+    } catch {}
+    Autodesk.Viewing.Initializer(initOpts, () => {
       const config = {
         extensions: ["Autodesk.DataVisualization", "Autodesk.DocumentBrowser"],
       };
@@ -757,10 +787,23 @@ function initViewer(container) {
       window.v = viewer;
       getThree();
       viewer.setGroundShadow(true);
-      const r = viewer.impl?.renderer?.();
-      if (r?.setClearColor) r.setClearColor(0x000000, 0);
-      if (r?.setClearAlpha) r.setClearAlpha(0);
-      viewer.impl.invalidate(true);
+      const once = () => {
+        try {
+          const r = viewer.impl?.renderer?.();
+          if (r?.setClearColor) r.setClearColor(0x000000, 0);
+          if (r?.setClearAlpha) r.setClearAlpha(0);
+          viewer.impl.invalidate(true);
+        } catch (err) {
+          console.warn("[Forge] invalidate skipped:", err);
+        }
+        viewer.removeEventListener(
+          Autodesk.Viewing.RENDER_PRESENTED_EVENT,
+          once
+        );
+      };
+      viewer.addEventListener(Autodesk.Viewing.RENDER_PRESENTED_EVENT, once, {
+        once: true,
+      });
       resolve();
     });
   });
@@ -979,19 +1022,19 @@ function clearOurTheming(model) {
   } catch {}
   lastThemedIds.clear();
 }
-
 function setRoomTheming(id, rgba) {
   const THREE = getThree();
   const c = new THREE.Vector4(rgba.r, rgba.g, rgba.b, rgba.a);
   viewer.setThemingColor(id, c, viewer.model, true);
   lastThemedIds.add(id);
 }
-
 function rebuildZoneThemingForCurrentFloor() {
   if (!viewer || !viewer.model) return;
   clearOurTheming(viewer.model);
   if (selectedZones.value.size === 0) {
-    viewer.impl.invalidate(true);
+    try {
+      viewer.impl.invalidate(true);
+    } catch {}
     return;
   }
   const floorKey = activeFloor.value;
@@ -1038,29 +1081,25 @@ function rebuildZoneThemingForCurrentFloor() {
   const sortedRooms = [...rooms].sort((a, b) => a.codeN - b.codeN);
   ensureZoneMapForFloor(viewer.model, floorKey, floorRootId);
   const zoneMap = ROOM_ZONE_MAP[floorKey];
-
   const chosen = selectedZones.value;
   for (const r of sortedRooms) {
     const z = zoneMap.get(r.code3);
     if (!z || !chosen.has(z)) continue;
     setRoomTheming(r.id, z === "一般" ? THEME_PURPLE : THEME_YELLOW);
   }
-  viewer.impl.invalidate(true, true, true);
+  try {
+    viewer.impl.invalidate(true, true, true);
+  } catch {}
 }
 
 /** ===================== 返回模型初始視角 ===================== */
 async function goHome() {
   if (!viewer) return;
-
-  // 確保樓層先回到 1F（會重建 sprites 與隔離）
   await applyFloor("1F");
-
-  // 套回初始快照（相機/隔離/等），第三參數 immediate=true 立即更新
   if (INITIAL_1F_STATE) {
     try {
       viewer.restoreState(INITIAL_1F_STATE, undefined, true);
     } catch (e) {
-      // 萬一還原失敗就退回 fitToView 方案
       const id = FLOOR_DBIDS["1F"];
       if (id != null) {
         const ids = collectLeafsUnder(viewer.model, id);
@@ -1070,8 +1109,6 @@ async function goHome() {
       }
     }
   }
-
-  // 依舊重算 popover 與區塊上色（避免狀態還原與你自訂邏輯不同步）
   rebuildLabelsAfterNextRender();
   rebuildZoneThemingForCurrentFloor();
 }
@@ -1106,11 +1143,10 @@ function publishForgeSnapshot() {
   window.dispatchEvent(new CustomEvent("forge:snapshot", { detail: rows }));
 }
 
-// 產生指定樓層的快照（不改視圖）
+/** ===================== 產生指定樓層的快照（不改視圖） ===================== */
 async function snapshotRowsForFloor(floorKey) {
   const floorRootId = FLOOR_DBIDS[floorKey];
   if (!viewer || !viewer.model || floorRootId == null) return [];
-
   const ROOMS = collectRoomsForFloor(viewer.model, floorKey, floorRootId);
   const BED_GROUP_KEYWORD = "【崇恩護家】床位";
   const bedGroupIds = collectDbIdsByNameUnder(
@@ -1118,7 +1154,6 @@ async function snapshotRowsForFloor(floorKey) {
     floorRootId,
     BED_GROUP_KEYWORD
   );
-
   let bedNodes = [];
   getDirectChildren(viewer.model, floorRootId); // 讓樹穩定
   bedGroupIds.forEach((groupId) => {
@@ -1137,7 +1172,6 @@ async function snapshotRowsForFloor(floorKey) {
     }
   });
   bedNodes = Array.from(new Set(bedNodes));
-
   const THREE = getThree();
   const floorBox = getNodeWorldBounds(viewer.model, floorRootId);
   const sortedBeds = bedNodes
@@ -1149,7 +1183,6 @@ async function snapshotRowsForFloor(floorKey) {
       return c.z >= floorBox.min.z - 0.5 && c.z <= floorBox.max.z + 0.5;
     })
     .sort((a, b) => a.id - b.id);
-
   const plan = NON_OCC_BY_FLOOR[floorKey] || {
     vacant: 0,
     hospitalized: 0,
@@ -1165,7 +1198,6 @@ async function snapshotRowsForFloor(floorKey) {
   const leaveIds = new Set(
     nonOccIds.slice(plan.vacant + plan.hospitalized, nonOccCount)
   );
-
   const rows = [];
   let globalIndex = 0;
   for (const { id: bedId, box: bedBox } of sortedBeds) {
@@ -1174,16 +1206,13 @@ async function snapshotRowsForFloor(floorKey) {
     const roomGender = roomMatch?.gender ?? fallbackGen;
     const roomLabel = roomMatch?.name ?? "?";
     const roomCode = roomMatch?.code3 ?? roomCodeOf(roomLabel);
-
     let status = "occupied";
     if (vacantIds.has(bedId)) status = "vacant";
     else if (hospitalizedIds.has(bedId)) status = "hospitalized";
     else if (leaveIds.has(bedId)) status = "leave";
-
     const bedNodeName =
       viewer.model.getInstanceTree()?.getNodeName(bedId) || "";
     const bedKey = bedKeyFromNodeName(bedNodeName, roomCode) || "?";
-
     const base = ensureResidentFor(bedKey, roomGender) || {};
     const resident =
       status === "vacant"
@@ -1203,9 +1232,7 @@ async function snapshotRowsForFloor(floorKey) {
         : status === "leave"
         ? { status: "leave", specialEvent: "請假中", ...base }
         : { status: "occupied", specialEvent: "-", ...base };
-
     const zone = roomCode ? getZoneForRoom(floorKey, roomCode) ?? null : null;
-
     rows.push({
       bed: bedKey,
       status: resident.status,
@@ -1225,7 +1252,7 @@ async function snapshotRowsForFloor(floorKey) {
   return rows;
 }
 
-// 暴露到 global，供 operation 調用
+// 暴露 API
 window.FORGE_API = {
   getSnapshotForFloor: snapshotRowsForFloor,
   getActiveFloor: () => activeFloor.value,
@@ -1234,36 +1261,23 @@ window.FORGE_API = {
     await applyFloor(fk);
   },
 };
-
-// === 新增：聚焦指定床位並顯示 popover ===
 window.FORGE_API.focusBed = async function focusBed(bedKey, opts = {}) {
   try {
     if (!viewer || !__staticDevices?.length) return false;
-
     const bed = String(bedKey || "").trim();
     if (!bed) return false;
-
-    // 確認樓層，必要時切換（1xx→1F，2xx→2F）
     const targetFloor = bed.charAt(0) === "2" ? "2F" : "1F";
     if (activeFloor.value !== targetFloor) {
       await applyFloor(targetFloor);
     }
-
-    // 找到對應 sprite
     const dev = __staticDevices.find(
       (d) => d.bedKey === bed || d.name?.includes(bed)
     );
     if (!dev) return false;
-
-    // 讓 popover 篩選顯示到它（selectedInfo 要對上該 sprite 的 status）
-    selectedInfo.value = dev.status; // 'occupied' | 'vacant' | 'hospitalized' | 'leave'
+    selectedInfo.value = dev.status;
     soloSpriteId.value = dev.spriteDbId;
     bringToFrontById(dev.spriteDbId);
-
-    // 重新算 popover 位置
     rebuildLabelsAfterNextRender();
-
-    // 視角帶到該 sprite（可用 opts.fit=false 關掉）
     if (opts.fit !== false) {
       await cardfitToView({
         forge_dbid: dev.forge_dbid,
@@ -1282,7 +1296,7 @@ window.FORGE_API.focusBed = async function focusBed(bedKey, opts = {}) {
 function spriteColorBy(status, gender) {
   if (status === "occupied") return gender === "男" ? BRAND_GREEN : BRAND_RED;
   if (status === "vacant") return BRAND_GRAY;
-  return BRAND_WHITE; // 住院/請假
+  return BRAND_WHITE;
 }
 function labelDotColor(L) {
   const s = L?.data?.status;
@@ -1321,7 +1335,9 @@ async function showLevel(levelKey) {
   if (levelDbId == null) {
     viewer.showAll();
     viewer.fitToView();
-    viewer.impl.invalidate(true);
+    try {
+      viewer.impl.invalidate(true);
+    } catch {}
     return;
   }
   const ids = collectLeafsUnder(viewer.model, levelDbId);
@@ -1335,7 +1351,9 @@ async function showLevel(levelKey) {
       viewer.fitToView?.(ids, viewer.model);
     }
     viewer.setGhosting(false);
-    viewer.impl.invalidate(true);
+    try {
+      viewer.impl.invalidate(true);
+    } catch {}
   } catch (e) {
     const all = new Set(allLeafIds(viewer.model));
     ids.forEach((id) => all.delete(id));
@@ -1344,7 +1362,9 @@ async function showLevel(levelKey) {
     toHide.forEach((id) => viewer.hide(id));
     viewer.fitToView?.(ids, viewer.model);
     viewer.setGhosting(false);
-    viewer.impl.invalidate(true);
+    try {
+      viewer.impl.invalidate(true);
+    } catch {}
   }
 }
 
@@ -1363,11 +1383,7 @@ async function rebuildSpritesForFloor(floorKey) {
     await createSprites();
     return;
   }
-
-  // 1) 收集『房』資料（決定性別 & 分區）
   const ROOMS = collectRoomsForFloor(viewer.model, floorKey, floorRootId);
-
-  // 2) 找『【崇恩護家】床位』群組 → 展開每一張床
   const BED_GROUP_KEYWORD = "【崇恩護家】床位";
   const bedGroupIds = collectDbIdsByNameUnder(
     viewer.model,
@@ -1390,8 +1406,6 @@ async function rebuildSpritesForFloor(floorKey) {
       });
   });
   bedNodes = Array.from(new Set(bedNodes));
-
-  // 3) 只留本層高度範圍 & 穩定排序
   const floorBox = getNodeWorldBounds(viewer.model, floorRootId);
   const sortedBeds = bedNodes
     .map((id) => ({ id, box: getNodeWorldBounds(viewer.model, id) }))
@@ -1402,8 +1416,6 @@ async function rebuildSpritesForFloor(floorKey) {
       return c.z >= floorBox.min.z - 0.5 && c.z <= floorBox.max.z + 0.5;
     })
     .sort((a, b) => a.id - b.id);
-
-  // 4) 決定本層非佔床名單：vacant/hospitalized/leave
   const plan = NON_OCC_BY_FLOOR[floorKey] || {
     vacant: 0,
     hospitalized: 0,
@@ -1419,8 +1431,6 @@ async function rebuildSpritesForFloor(floorKey) {
   const leaveIds = new Set(
     nonOccIds.slice(plan.vacant + plan.hospitalized, nonOccCount)
   );
-
-  // 5) 建立 sprites（以 bedKey + ensureResidentFor 寫死對應）
   __staticDevices.length = 0;
   let globalIndex = 0;
   for (const { id: bedId, box: bedBox } of sortedBeds) {
@@ -1428,26 +1438,22 @@ async function rebuildSpritesForFloor(floorKey) {
     bedBox.getCenter(c);
     const lift = Math.max(0.25, (bedBox.max.z - bedBox.min.z) * 0.2);
     const pos = new THREE.Vector3(c.x, c.y, bedBox.max.z + lift);
-
     const roomMatch = resolveRoomByBox(ROOMS, bedBox);
     const fallbackGen = globalIndex % 2 === 0 ? "男" : "女";
     const roomGender = roomMatch?.gender ?? fallbackGen;
     const roomLabel = roomMatch?.name ?? "?";
     const roomCode = roomMatch?.code3 ?? roomCodeOf(roomLabel);
-
     let status = "occupied";
     if (vacantIds.has(bedId)) status = "vacant";
     else if (hospitalizedIds.has(bedId)) status = "hospitalized";
     else if (leaveIds.has(bedId)) status = "leave";
-
     const bedNodeName =
       viewer.model.getInstanceTree()?.getNodeName(bedId) || "";
     const m = String(bedNodeName).match(/\b(\d{3})(?:-(\d))?\b/);
     const bedKey = m ? (m[2] ? `${m[1]}-${m[2]}` : m[1]) : roomCode || "?";
-
     const base = ensureResidentFor(bedKey, roomGender) || {};
     let resident;
-    if (status === "vacant") {
+    if (status === "vacant")
       resident = {
         status: "vacant",
         ...base,
@@ -1459,18 +1465,14 @@ async function rebuildSpritesForFloor(floorKey) {
         medicationStatus: "-",
         note: "-",
       };
-    } else if (status === "hospitalized") {
+    else if (status === "hospitalized")
       resident = { status: "hospitalized", specialEvent: "住院中", ...base };
-    } else if (status === "leave") {
+    else if (status === "leave")
       resident = { status: "leave", specialEvent: "請假中", ...base };
-    } else {
-      resident = { status: "occupied", specialEvent: "-", ...base };
-    }
-
+    else resident = { status: "occupied", specialEvent: "-", ...base };
     const zone = roomCode ? getZoneForRoom(floorKey, roomCode) ?? null : null;
     const color = spriteColorBy(resident.status, roomGender);
     const spriteDbId = (floorKey === "1F" ? 91100 : 92100) + globalIndex++;
-
     __staticDevices.push({
       name: `床號 ${bedKey}`,
       forge_dbid: floorRootId,
@@ -1492,7 +1494,6 @@ async function rebuildSpritesForFloor(floorKey) {
       zone,
     });
   }
-
   await createSprites();
   publishForgeSnapshot();
 }
@@ -1589,7 +1590,6 @@ const filteredLabels = computed(() => {
   });
 });
 const isVacantWithoutSpecial = (L) => L?.data?.status === "vacant";
-
 const emit = defineEmits(["change"]);
 const selectInfo = (opt) => {
   soloSpriteId.value = null;
@@ -1597,7 +1597,6 @@ const selectInfo = (opt) => {
   infoOpen.value = false;
   emit("change", opt.value);
 };
-
 const infoTriggerRef = ref(null);
 const infoPanelRef = ref(null);
 const onClickOutsideInfo = (e) => {
@@ -1615,10 +1614,14 @@ const onKeydownInfo = (e) => {
 async function applyFloor(next) {
   soloSpriteId.value = null;
   activeFloor.value = next;
-  localStorage.setItem("uark-floor", next);
+  try {
+    localStorage.setItem("uark-floor", next);
+  } catch {}
   await showLevel(next);
   await rebuildSpritesForFloor(next);
-  viewer.impl.invalidate(true);
+  try {
+    viewer.impl.invalidate(true);
+  } catch {}
   rebuildLabelsAfterNextRender();
   rebuildZoneThemingForCurrentFloor();
 }
@@ -1633,7 +1636,6 @@ onMounted(async () => {
   (function migrateResidentStore() {
     let changed = false;
     for (const [k, v] of RESIDENT_BY_BED.entries()) {
-      // 只清理舊備援資料或 startTime 落在 2023/01/15 的
       if (!v || v.startTime === "2023/01/15") {
         const fixed = RESIDENTS_BY_BED?.[k];
         if (fixed) {
@@ -1649,7 +1651,6 @@ onMounted(async () => {
             note: fixed.note,
           });
         } else {
-          // 沒有寫死表就用新的 seededStartTime
           const g = v?.residentsSex || "男";
           RESIDENT_BY_BED.set(k, {
             ...v,
@@ -1662,10 +1663,11 @@ onMounted(async () => {
     }
     if (changed) saveResidentStore(RESIDENT_BY_BED);
   })();
-
   document.addEventListener("click", onClickOutsideInfo);
   document.addEventListener("keydown", onKeydownInfo);
   activeFloor.value = resolveInitialFloor();
+  await nextTick();
+  await waitForContainerSize(forgeDom.value, { timeout: 4000 });
   await initViewer(forgeDom.value);
   const model = await loadModel(MODEL_SVF_PATH);
   await waitObjectTree(model);
@@ -1683,9 +1685,20 @@ onMounted(async () => {
     });
   });
   attachCameraEventsForLabels();
+  // 監聽容器 resize，避免 0x0 導致的 FBO incomplete
+  try {
+    _resizeObserver = new ResizeObserver(() => {
+      if (!viewer) return;
+      requestAnimationFrame(() => {
+        try {
+          viewer.resize();
+          viewer.impl.invalidate(true);
+        } catch {}
+      });
+    });
+    _resizeObserver.observe(forgeDom.value);
+  } catch {}
   await applyFloor("1F");
-
-  // 等一禎，確保 fitToView/隔離/labels 都完成再抓狀態（更穩定）
   await new Promise((r) => {
     const once = () => {
       viewer.removeEventListener(Autodesk.Viewing.RENDER_PRESENTED_EVENT, once);
@@ -1693,9 +1706,7 @@ onMounted(async () => {
     };
     viewer.addEventListener(Autodesk.Viewing.RENDER_PRESENTED_EVENT, once);
   });
-
-  INITIAL_1F_STATE = viewer.getState(); // 記錄整體 viewer 狀態做為 Home
-
+  INITIAL_1F_STATE = viewer.getState();
   viewerReady.value = true;
 });
 
@@ -1711,7 +1722,7 @@ watch(
 
 onUnmounted(() => {
   try {
-    clearOurTheming(viewer.model);
+    clearOurTheming(viewer?.model);
   } catch {}
   try {
     unbindSpriteClick?.();
@@ -1720,14 +1731,24 @@ onUnmounted(() => {
   try {
     clearSprites();
   } catch {}
+  try {
+    _resizeObserver?.disconnect();
+    _resizeObserver = null;
+  } catch {}
   if (viewer) {
     try {
       const ext = viewer.getExtension?.("Autodesk.DataVisualization");
       ext?.removeAllViewables?.();
       viewer.unloadExtension?.("Autodesk.DataVisualization");
     } catch {}
-    viewer.tearDown?.();
-    viewer.finish?.();
+    try {
+      viewer.tearDown?.();
+      viewer.finish?.();
+    } catch {}
+    try {
+      viewer?.impl?.purgeVertexBufferPool?.();
+      viewer?.impl?.purgeCachedMaterials?.();
+    } catch {}
     viewer = null;
   }
   document.removeEventListener("click", onClickOutsideInfo);
diff --git a/src/components/home/DietSummary.vue b/src/components/home/DietSummary.vue
index aaf9a7e..40177c0 100644
--- a/src/components/home/DietSummary.vue
+++ b/src/components/home/DietSummary.vue
@@ -145,25 +145,32 @@
           "
           tabindex="-1"
         >
-          <!-- 標題列 + Tabs -->
-          <div class="flex items-center justify-between mb-4 gap-3">
-            <div class="flex justify-start items-center gap-6">
-              <h3
-                :id="modalTitleId"
-                class="text-2xl font-semibold tracking-widest"
-              >
-                {{ titleLabel }}
-              </h3>
+          <!-- 標題列 + Tabs（置中） -->
+          <div class="relative flex items-center justify-between mb-4 gap-3">
+            <!-- 左：標題 -->
+            <h3
+              :id="modalTitleId"
+              class="text-2xl font-semibold tracking-widest"
+            >
+              {{ titleLabel }}
+            </h3>
 
-              <Tabs
-                v-model="menuTab"
-                :items="tabItems"
-                :showPrefix="false"
-                :defaultSelectFirst="true"
-                aria-label="菜單篩選"
-              />
+            <!-- 中：Tabs 絕對置中 -->
+            <div
+              class="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
+            >
+              <div class="pointer-events-auto">
+                <Tabs
+                  v-model="menuTab"
+                  :items="tabItems"
+                  :showPrefix="false"
+                  :defaultSelectFirst="true"
+                  aria-label="菜單篩選"
+                />
+              </div>
             </div>
 
+            <!-- 右：關閉按鈕 -->
             <button
               ref="closeBtnRef"
               class="px-3 py-1 rounded-md hover:bg-gray-100"
diff --git a/src/components/home/MapPane.vue b/src/components/home/MapPane.vue
index 140dad8..c1bc4d9 100644
--- a/src/components/home/MapPane.vue
+++ b/src/components/home/MapPane.vue
@@ -2,8 +2,8 @@
   <section
     class="relative bg-white/30 rounded-md shadow p-3 min-h-0 lg:h-full flex flex-col overscroll-contain"
   >
-    <!-- 顯示資訊切換條（置頂置中） -->
-    <div class="sticky top-6 z-[50] h-0">
+    <!-- 顯示資訊切換條（固定置頂置中） -->
+    <div class="fixed top-[100px] left-1/2 -translate-x-1/2 z-[50]">
       <div class="relative pointer-events-none flex justify-center w-full">
         <Tabs
           :items="tabItems"
@@ -24,11 +24,12 @@
     <!-- 地圖本體 -->
     <div
       ref="mapEl"
-      class="relative z-[0] w-full flex-1 rounded-md overflow-hidden min-h-[300px] md:min-h-[360px] lg:min-h-[420px] overscroll-contain touch-none select-none"
+      class="relative z-[0] w-full flex-1 rounded-md overflow-hidden min-h-[300px] md:min-h-[360px] lg:min-h-[420px] overscroll-contain touch-none select-none contain-layout contain-paint"
     ></div>
   </section>
 </template>
 
+
 <script setup>
 /**
  * MapPane.vue
@@ -141,6 +142,29 @@ let map = null;
 let markers = [];
 let ro = null; // ResizeObserver 實例
 let rafId = 0; // rAF id（節流用）
+let coolId = 0;
+
+function doInvalidate() {
+  if (map) {
+    map.invalidateSize();
+    refreshAllTooltips();
+  }
+}
+
+function onHostResize() {
+  // 粗暴一點：等 ~48ms 合併多次尺寸變化
+  if (coolId) clearTimeout(coolId);
+  coolId = setTimeout(() => {
+    coolId = 0;
+    // 單幀內再用 rAF，確保樣式已套用
+    if (rafId) cancelAnimationFrame(rafId);
+    rafId = requestAnimationFrame(() => {
+      rafId = 0;
+      doInvalidate();
+    });
+  }, 48);
+}
+defineExpose({ invalidate: doInvalidate });
 
 // Leaflet icon（本元件作用域，不影響全域）
 const base = import.meta.env.BASE_URL ?? "/";
@@ -348,25 +372,6 @@ function syncTooltips() {
   }
 }
 
-// 6) 尺寸觀察與 invalidate（暴露給父層）
-function doInvalidate() {
-  if (map) {
-    map.invalidateSize();
-    refreshAllTooltips();
-  }
-}
-// 讓父層可手動呼叫（通常不需要，但保留）
-defineExpose({ invalidate: doInvalidate });
-
-function onHostResize() {
-  // 以 rAF 節流，避免 RO 在 transition 過程觸發過於頻繁
-  if (rafId) return;
-  rafId = requestAnimationFrame(() => {
-    rafId = 0;
-    doInvalidate();
-  });
-}
-
 // 7) Lifecycle
 onMounted(() => {
   if (!mapEl.value) return;
@@ -405,6 +410,9 @@ onMounted(() => {
 
   L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
     maxZoom: 20,
+    updateWhenIdle: true, // 等使用者停止再更新
+    updateWhenZooming: false, // 放大縮小時不要邊動邊更新
+    keepBuffer: 4, // 保留周邊 tile，避免一收一畫
     attribution:
       '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
   }).addTo(map);
@@ -437,12 +445,8 @@ onMounted(() => {
 
   // 初始後多次 invalidate，避免白屏
   requestAnimationFrame(() => {
-    const m = map;
-    m?.invalidateSize?.();
-    requestAnimationFrame(() => {
-      m?.invalidateSize?.();
-      refreshAllTooltips();
-    });
+    map?.invalidateSize?.();
+    refreshAllTooltips();
   });
 
   // 互動後更新 tooltip 位置
@@ -450,14 +454,6 @@ onMounted(() => {
   map.on("moveend", refreshAllTooltips);
   map.on("resize", refreshAllTooltips);
 
-  // 視窗尺寸改變
-  const onResize = () => {
-    map?.invalidateSize?.();
-    refreshAllTooltips();
-  };
-  window.addEventListener("resize", onResize);
-  map.__onResize = onResize;
-
   // 觀察地圖容器尺寸（包含父層寬度 transition）
   if (mapEl.value && "ResizeObserver" in window) {
     ro = new ResizeObserver(onHostResize);
@@ -466,7 +462,18 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-  if (map?.__onResize) window.removeEventListener("resize", map.__onResize);
+  if (coolId) {
+    clearTimeout(coolId);
+    coolId = 0;
+  }
+  if (rafId) {
+    cancelAnimationFrame(rafId);
+    rafId = 0;
+  }
+  if (ro) {
+    ro.disconnect();
+    ro = null;
+  }
   if (map) {
     map.off("zoomend", refreshAllTooltips);
     map.off("moveend", refreshAllTooltips);
@@ -474,14 +481,6 @@ onBeforeUnmount(() => {
     map.remove();
     map = null;
   }
-  if (ro) {
-    ro.disconnect();
-    ro = null;
-  }
-  if (rafId) {
-    cancelAnimationFrame(rafId);
-    rafId = 0;
-  }
 });
 
 // 8) Watchers（模式切換時重綁 tooltip 並刷新尺寸）
diff --git a/src/components/home/ProgressBar.vue b/src/components/home/ProgressBar.vue
index 7395ef8..709ae22 100644
--- a/src/components/home/ProgressBar.vue
+++ b/src/components/home/ProgressBar.vue
@@ -30,7 +30,7 @@
       ></progress>
 
       <span
-        class="w-full absolute top-1 bottom-2 flex justify-between items-center text-[24px] font-nats pe-5 text-brand-gray group-hover:text-brand-purple-dark left-2"
+        class="w-full absolute top-1 bottom-2 flex justify-between items-center text-[22px] font-nats pe-5 text-brand-gray group-hover:text-brand-purple-dark left-2"
       >
         {{ animatedValueLocale }} / {{ totalLocale }}
         <span aria-hidden="true">
diff --git a/src/components/home/TodayActivitiesSection.vue b/src/components/home/TodayActivitiesSection.vue
index eb53842..b0d5d06 100644
--- a/src/components/home/TodayActivitiesSection.vue
+++ b/src/components/home/TodayActivitiesSection.vue
@@ -100,7 +100,7 @@ const closeCalendar = () => (isCalendarOpen.value = false);
           >{{ currentPage }} / {{ totalPages }}</span
         >
         <button
-          class="btn btn-sm btn-outline border-brand-purple-dark text-brand-purple-dark hover:bg-brand-purple hover:text-white hover:border-brand-purple disabled:!opacity-100 disabled:!text-gray-300 disabled:!border-brand-gray disabled:cursor-not-allowed"
+          class="btn btn-sm btn-outline border-brand-purple-dark text-brand-purple-dark hover:bg-brand-purple hover:text-white hover:border-brand-purple disabled:!opacity-100 disabled:!text-gray-300 disabled:!border-gray-300 disabled:cursor-not-allowed"
           :disabled="currentPage === totalPages"
           @click="currentPage = Math.min(totalPages, currentPage + 1)"
         >
@@ -111,7 +111,6 @@ const closeCalendar = () => (isCalendarOpen.value = false);
 
     <!-- 行事曆 Modal：Teleport 到 body，避免影響布局 -->
     <Teleport to="body">
-      <!-- ✅ 這裡若曾因 <transition> 影響佈局，已用 Teleport 解耦，不會壓縮原區塊 -->
       <transition name="fade">
         <div
           v-if="isCalendarOpen"
diff --git a/src/components/home/TrendChart.vue b/src/components/home/TrendChart.vue
index 3035002..fbd8703 100644
--- a/src/components/home/TrendChart.vue
+++ b/src/components/home/TrendChart.vue
@@ -1,7 +1,11 @@
 <template>
   <!-- 左中：圖表 -->
-  <section class="row-span-4 bg-white/30 backdrop-blur-sm  rounded-md shadow min-h-0 flex items-stretch">
-    <div class="w-full h-full p-3 sm:p-4 md:p-6 min-h-[200px] sm:min-h-[240px] md:min-h-[300px]">
+  <section
+    class="row-span-4 bg-white/30 backdrop-blur-sm rounded-md shadow min-h-0 flex items-stretch"
+  >
+    <div
+      class="w-full h-full min-h-[200px] p-8 sm:min-h-[240px] md:min-h-[300px]"
+    >
       <div ref="chartEl" class="w-full h-full"></div>
     </div>
   </section>
@@ -21,6 +25,7 @@ const props = defineProps({
 
 const chartEl = ref(null);
 let chart = null;
+let ro = null; // ResizeObserver
 
 // 工具：近 7 天標籤
 function last7DaysLabels() {
diff --git a/src/constants/mocks/facilityData.js b/src/constants/mocks/facilityData.js
index 7f020e3..27553f4 100644
--- a/src/constants/mocks/facilityData.js
+++ b/src/constants/mocks/facilityData.js
@@ -1,3 +1,4 @@
+// ========= 型別註解 =========
 /** @typedef {Object} ResidentFixed
  *  @property {string} name
  *  @property {('男'|'女')} sex
@@ -7,10 +8,9 @@
  *  @property {string} medicationStatus
  *  @property {string} specialEvent
  *  @property {string} note
- *
  */
 
-// ========== 固定姓名池（A 機構床號 74 → 男/女各 37）==========
+// ========= 固定姓名池（A 機構床號 74 → 男/女各 37） =========
 export const NAME_POOL_MALE = Object.freeze([
   "王建中",
   "張家豪",
@@ -91,13 +91,8 @@ export const NAME_POOL_FEMALE = Object.freeze([
   "簡琬淳",
 ]); // 長度必為 37
 
-// ========== 每床固定住民：設定區（請依模型實際床位調整） ==========
-// 目標：男/女各 37 張床 → 總計 74 床。以下僅為範例配置：
-// - 1F 男：101/103/107/109/111/113/115（各 3 床 = 21）
-// - 2F 男：201/203/205/207/209（各 3 床 = 15）+ 211-1（補 1 床）
-// - 1F 女：102/105/112/114/116（各 3 床 = 15）
-// - 2F 女：202/206/208/210/212/216/204（各 3 床 = 21）+ 214-1（補 1 床）
-
+// ========= 每床固定住民：設定區（請依模型實際床位調整） =========
+// 目標：男/女各 37 張床 → 總計 74 床。
 export const A_FACILITY_BEDS_MALE = Object.freeze([
   // 1F（男）
   "101-1",
@@ -182,7 +177,7 @@ export const A_FACILITY_BEDS_FEMALE = Object.freeze([
   "214-1",
 ]); // 37
 
-// 可選：錯誤防護（開發期）
+// ========= DEV 警告 =========
 const __DEV__ =
   (typeof import.meta !== "undefined" &&
     import.meta.env &&
@@ -213,7 +208,7 @@ if (__DEV__) {
   );
 }
 
-// ========== 多樣化健康狀況詞庫（循環取用） ==========
+// ========= 多樣化健康狀況詞庫（循環取用） =========
 export const HEALTH_STATUS_POOL = Object.freeze([
   "一般",
   "慢性病監測",
@@ -227,14 +222,13 @@ export const HEALTH_STATUS_POOL = Object.freeze([
   "營養補充",
 ]);
 
-// ========== 穩定年齡產生器（非隨機、可預測） ==========
+// ========= 穩定年齡產生器（非隨機、可預測） =========
 export function ageFromBedKey(key, base = 66) {
   const n = parseInt(String(key).replace("-", ""), 10) || 0;
   return base + (n % 30); // 66..95
 }
 
-// ========== 建立固定住民表 ==========
-// 工具：格式化成 YYYY/MM/DD
+// ========= 小工具：日期 =========
 function fmtYMD(d) {
   const y = d.getFullYear();
   const m = String(d.getMonth() + 1).padStart(2, "0");
@@ -242,15 +236,14 @@ function fmtYMD(d) {
   return `${y}/${m}/${day}`;
 }
 
-// 工具：依床位與索引產生「穩定且分散」的入住日期
+// 依床位與索引產生「穩定且分散」的入住日期
 // 規則：以 2025/01/01 為起點，往後偏移 0~540 天（約 18 個月）
-// 若超過今天，會往回扣 (n % 60 + 10) 天，確保不會是未來日期
+// 若超過今天，往回扣 (n % 60 + 10) 天，避免未來日期
 function seededStartTime(bedKey, idx) {
   const n = parseInt(String(bedKey).replace("-", ""), 10) || 0;
   const base = new Date(2025, 0, 1); // 2025/01/01
   const OFFSET_DAYS = (n * 13 + idx * 17) % 540; // 分散 18 個月內
   let d = new Date(base.getTime() + OFFSET_DAYS * 86400000);
-
   const today = new Date();
   if (d > today) {
     const back = (n % 60) + 10; // 至少退 10 天，最多 ~70 天
@@ -269,7 +262,7 @@ function buildFixedResidents(keys, names, sex) {
       sex,
       age: ageFromBedKey(k, sex === "女" ? 65 : 66),
       healthStatus: HEALTH_STATUS_POOL[n % HEALTH_STATUS_POOL.length],
-      startTime: seededStartTime(k, i), // ← 用分散演算法產生
+      startTime: seededStartTime(k, i), // 分散演算法產生
       medicationStatus: "規律服藥",
       specialEvent: "-",
       note: "-",
@@ -287,42 +280,44 @@ export const RESIDENTS_BY_BED = Object.freeze({
   ...buildFixedResidents(A_FACILITY_BEDS_FEMALE, NAME_POOL_FEMALE, "女"),
 });
 
-// ========== 總部與 A~F 機構資料（固定對齊 progress/charts）==========
+// ========= 總部與 A~F 機構資料（對齊 progress/charts 最後一天） =========
 export const BASE_FACILITY_DATA = {
   ALL: {
     desc: "ＯＯ長期照顧集團——在全台各地皆有眾多據點，整合醫護團隊與專業照護人員，提供高齡照護服務總部。",
     progress: {
-      residents: { current: 1216, total: 3600 },
-      vacancy: { current: 2384, total: 3600 },
-      hospitalized: { current: 8, total: 50 },
-      movein: { current: 3, total: 50 },
-      moveout: { current: 8, total: 50 },
+      residents: { current: 269, total: 361 },
+      vacancy: { current: 58, total: 361 },
+      hospitalized: { current: 5, total: 89 },
+      movein: { current: 13, total: 63 },
+      moveout: { current: 10, total: 64 },
     },
     charts: {
+      // 住民與空床：b 固定為立案床數（361），a 最後一筆對齊 current
       residents: {
         legends: ["現在住民", "全立案床數"],
-        a: [1188, 1195, 1201, 1206, 1210, 1213, 1216],
-        b: Array(7).fill(3600),
+        a: [263, 264, 265, 266, 267, 268, 269],
+        b: Array(7).fill(361),
       },
       vacancy: {
         legends: ["目前空床數", "全立案床數"],
-        a: [2412, 2405, 2399, 2394, 2390, 2387, 2384],
-        b: Array(7).fill(3600),
+        a: [64, 63, 62, 61, 60, 59, 58],
+        b: Array(7).fill(361),
       },
+      // 累積圖：b 最後一筆對齊 total，a 最後一筆對齊 current（解讀為「今日」）
       hospitalized: {
         legends: ["今日住院", "當月累積住院"],
-        a: [2, 1, 3, 2, 1, 3, 8],
-        b: [8, 14, 21, 27, 33, 42, 50],
+        a: [0, 1, 1, 2, 1, 2, 5],
+        b: [10, 20, 35, 45, 60, 75, 89],
       },
       movein: {
         legends: ["今日入住", "當月累積入住"],
-        a: [1, 0, 2, 1, 1, 2, 3],
-        b: [6, 10, 16, 21, 28, 41, 50],
+        a: [1, 1, 2, 2, 2, 3, 13],
+        b: [10, 20, 30, 40, 50, 55, 63],
       },
       moveout: {
         legends: ["今日結案", "當月累積結案"],
-        a: [1, 2, 1, 2, 3, 3, 8],
-        b: [7, 12, 18, 23, 31, 42, 50],
+        a: [1, 1, 1, 2, 2, 3, 10],
+        b: [8, 15, 25, 35, 45, 55, 64],
       },
     },
     diet: {
@@ -343,7 +338,6 @@ export const BASE_FACILITY_DATA = {
       moveout: { current: 3, total: 20 },
     },
     charts: {
-      // 圖表最後一天需對齊 progress：住民 64／空床 10
       residents: {
         legends: ["現在住民", "立案床數"],
         a: [60, 61, 62, 63, 63, 64, 64],
@@ -370,8 +364,6 @@ export const BASE_FACILITY_DATA = {
         b: [4, 6, 9, 11, 13, 17, 20],
       },
     },
-    // diet 會在頁面端以 normalize 工具依 residents.current=64 切分（60/40 基準）
-    // 這裡先給一組可讀值以利右側對照
     diet: {
       meat: { total: 38, normal: 33, soft: 2, tube: 3 },
       veg: { total: 26, normal: 22, soft: 2, tube: 2 },
@@ -419,6 +411,7 @@ export const BASE_FACILITY_DATA = {
       veg: { total: 61, normal: 53, soft: 5, tube: 3 },
     },
   },
+
   "C 機構": {
     desc: "C 機構強調復健與社會參與，陪伴長者建立日常節奏，Lorem ipsum dolor sit amet consectetur adipisicingelit。",
     progress: {
@@ -460,6 +453,7 @@ export const BASE_FACILITY_DATA = {
       veg: { total: 71, normal: 62, soft: 5, tube: 4 },
     },
   },
+
   "D 機構": {
     desc: "D 機構導入智慧照護設備，提升照護品質與效率，Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, enim。",
     progress: {
@@ -501,6 +495,7 @@ export const BASE_FACILITY_DATA = {
       veg: { total: 51, normal: 44, soft: 3, tube: 5 },
     },
   },
+
   "E 機構": {
     desc: "E 機構著重個別化照護計畫，維護長者尊嚴與生活品質，Lorem ipsum dolor sit amet, consectetur adipisicing elit。",
     progress: {
@@ -542,6 +537,7 @@ export const BASE_FACILITY_DATA = {
       veg: { total: 57, normal: 49, soft: 5, tube: 3 },
     },
   },
+
   "F 機構": {
     desc: "F 機構以社區融入為核心，串連日照與居家照護資源，Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, enim。",
     progress: {
@@ -587,14 +583,11 @@ export const BASE_FACILITY_DATA = {
 
 // ====== Nursing 待辦：與 Forge 對齊的示範假資料（用 RESIDENTS_BY_BED 反查姓名） ======
 /** @typedef {{date:string, bed:string, name:string, type:string, desc:string}} NursingTodoSeed */
-
 export const NURSING_TODOS_SEED = Object.freeze(
   (() => {
     const getName = (bed) => RESIDENTS_BY_BED?.[bed]?.name || "-";
-
     /** @type {NursingTodoSeed[]} */
     const seeds = [
-      // (a) 你指定的三筆，姓名會由 RESIDENTS_BY_BED 對應床位自動帶入，確保與 Forge 一致
       {
         date: "2025/09/21",
         bed: "201-1",
diff --git a/src/layouts/ForgeLayout.vue b/src/layouts/ForgeLayout.vue
index aea5ce8..040c30f 100644
--- a/src/layouts/ForgeLayout.vue
+++ b/src/layouts/ForgeLayout.vue
@@ -1,5 +1,5 @@
 <template>
-  <section id="app" class="flex flex-col min-h-screen">
+  <section id="app" class="flex flex-col min-h-screen overflow-y-hidden">
     <NavBar class="fixed" />
     <main
       class="w-full p-4 pt-[80px]"
diff --git a/src/layouts/HeadquarterLayout.vue b/src/layouts/HeadquarterLayout.vue
index ad374b3..a25f494 100644
--- a/src/layouts/HeadquarterLayout.vue
+++ b/src/layouts/HeadquarterLayout.vue
@@ -1,8 +1,9 @@
 <template>
-  <section id="app" class="flex flex-col min-h-screen">
+  <section id="app" class="flex flex-col min-h-[1200px]">
     <NavBar />
-    <main class="w-full p-4 pt-[80px] overflow-x-hidden">
-      <RouterView class="h-[calc(100vh-72px-40px)]" />
+    <main class="w-full p-4 pt-[80px] overflow-x-hidden flex-1 min-h-0">
+      <!-- 這裡改成 min-h 而不是 h，避免固定死 -->
+      <RouterView class="block min-h-[calc(100vh-72px-40px)]" />
     </main>
   </section>
 </template>
diff --git a/src/main.js b/src/main.js
index 08fa709..6255e9d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -17,7 +17,6 @@ async function bootstrap() {
 
   const app = createApp(App);
   app.use(createPinia());
-  app.use(createPinia());
   app.use(router);
   app.mount("#app");
 
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index 1ffc31e..8891f03 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -82,7 +82,7 @@
       <div class="h-full min-h-0 flex flex-col lg:flex-row gap-2">
         <!-- 中：地圖（flex-basis 做寬度動畫） -->
         <div
-          class="relative h-[420px] lg:h-full min-w-0 will-change-[flex-basis] transition-[flex-basis] duration-400 ease-in-out basis-full lg:basis-1/2"
+          class="relative h-[420px] lg:h-full min-w-0 will-change-[flex-basis] transition-[flex-basis] duration-300 ease-out"
           :class="isRightCollapsed ? 'lg:basis-full' : 'lg:basis-1/2'"
         >
           <!-- caret 按鈕 -->
@@ -134,13 +134,12 @@
         <transition name="slide-pane" appear>
           <aside
             v-show="!isRightCollapsed"
-            class="h-full min-h-0 overflow-hidden min-w-0 will-change-[flex-basis,opacity] transition-[flex-basis,opacity] duration-400 ease-in-out basis-full lg:basis-1/2"
+            class="h-full min-h-0 overflow-hidden min-w-0 will-change-[flex-basis,opacity] transition-[flex-basis,opacity] duration-300 ease-out"
             :class="
               isRightCollapsed
                 ? 'lg:basis-0 opacity-0 pointer-events-none'
                 : 'lg:basis-1/2 opacity-100 pointer-events-auto'
             "
-            :aria-hidden="isRightCollapsed ? 'true' : 'false'"
           >
             <div
               class="flex-1 min-h-0 overflow-y-auto flex flex-col gap-2 h-full"
diff --git a/src/style.css b/src/style.css
index 2b729c7..3c8d7eb 100644
--- a/src/style.css
+++ b/src/style.css
@@ -156,6 +156,10 @@ body,
 #app {
   height: 100%;
 }
+html {
+  scrollbar-gutter: stable both-edges;
+}
+
 body {
   margin: 0;
   width: 100%; /* 別用 100vw */
diff --git a/src/utils/versionGuard.js b/src/utils/versionGuard.js
index eee20d7..c8b2f1e 100644
--- a/src/utils/versionGuard.js
+++ b/src/utils/versionGuard.js
@@ -1,45 +1,65 @@
-// src/utils/versionGuard.js
-const VERSION_URL = '/version.json';
-const LS_KEY = '__app_version__';
-const SESSION_REFRESH_FLAG = '__just_refreshed__';
+const VERSION_URL = "/version.json";
+const LS_KEY = "__app_version__";
+const SESSION_REFRESH_FLAG = "__just_refreshed__";
 
 async function fetchRemoteVersion() {
-  const res = await fetch(VERSION_URL, { cache: 'no-store' }); // ★ 關鍵：不快取
-  if (!res.ok) throw new Error('version.json fetch failed');
+  // 關鍵：no-store，確保抓到最新
+  const res = await fetch(VERSION_URL, { cache: "no-store" });
+  if (!res.ok) throw new Error("version.json fetch failed");
   return res.json();
 }
 
 async function unregisterAllSW() {
-  if (!('serviceWorker' in navigator)) return;
+  if (!("serviceWorker" in navigator)) return;
   const regs = await navigator.serviceWorker.getRegistrations();
-  await Promise.all(regs.map(r => r.unregister()));
+  await Promise.all(regs.map((r) => r.unregister()));
 }
 
 async function clearCacheStorage() {
-  if (!('caches' in window)) return;
+  if (!("caches" in window)) return;
   const keys = await caches.keys();
-  await Promise.all(keys.map(k => caches.delete(k)));
+  await Promise.all(keys.map((k) => caches.delete(k)));
 }
 
 export async function ensureFreshAssets() {
   try {
+    // 若剛做過強制刷新，這次進來先把旗標清掉，避免反覆觸發
+    if (sessionStorage.getItem(SESSION_REFRESH_FLAG) === "1") {
+      sessionStorage.removeItem(SESSION_REFRESH_FLAG);
+      // 不直接 return，仍然讓它跑一次 fetch 以同步 LS 版本（更保險）
+    }
+
     const prev = localStorage.getItem(LS_KEY);
     const remote = await fetchRemoteVersion();
     const ver = remote.version || remote.buildId || remote.commit;
     if (!ver) return;
 
-    if (prev && prev !== ver) {
-      await unregisterAllSW();
-      await clearCacheStorage();
-      sessionStorage.setItem(SESSION_REFRESH_FLAG, '1');
-      // 用 replace 避免回上一頁又載到舊 index.html
-      location.replace(location.href.split('#')[0]);
+    if (!prev) {
+      // 首次載入：寫入版本後直接使用
+      localStorage.setItem(LS_KEY, ver);
       return;
     }
 
-    if (!prev) localStorage.setItem(LS_KEY, ver);
+    if (prev !== ver) {
+      // 在重整前，先把「新版本」寫回 localStorage
+      localStorage.setItem(LS_KEY, ver);
+
+      // 清 SW 與 Cache（若有）
+      await unregisterAllSW();
+      await clearCacheStorage();
+
+      // 打一個旗標避免連續重整
+      sessionStorage.setItem(SESSION_REFRESH_FLAG, "1");
+
+      // 用 replace 避免使用者回上一頁又遇到舊頁
+      location.replace(location.href.split("#")[0]);
+      return;
+    }
+
+    // 版本相同 → 不做事
   } catch (e) {
-    console.warn('[versionGuard] check failed:', e);
+    // 若抓不到 version.json，避免造成空白頁循環
+    console.warn("[versionGuard] check failed:", e);
   }
 }
 
