From 4fee3a6e3a41fb00f20a8c9f604e0aab5a07eb12 Mon Sep 17 00:00:00 2001
From: "MJM_2025_05\\polly" <polly.hsu@mjmtech.com.tw>
Date: Wed, 17 Sep 2025 17:27:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E9=A6=96=E9=A0=81?=
 =?UTF-8?q?=E8=91=B7=E7=B4=A0=E5=8D=80=EF=BC=8C=E8=AE=8A=E6=88=90=E5=8F=AF?=
 =?UTF-8?q?=20click=20=E5=87=BA=E7=8F=BE=20modal=20=E7=9A=84=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                                    |    2 +-
 src/App.vue                                   |   10 +-
 src/components/forge/Forge.vue                | 1440 +++++++++++------
 src/components/forge/ForgeBackUp.vue          |  893 ----------
 src/layouts/ForgeLayout.vue                   |    7 +-
 src/layouts/HeadquarterLayout.vue             |    5 +-
 src/layouts/NavBar.vue                        |   18 +-
 src/pages/home/components/DietSummary.vue     |  129 ++
 .../home/components/FacilityHeaderInfo.vue    |   82 +
 src/pages/home/components/MapPane.vue         |  485 ++++++
 .../home/{ => components}/ProgressBar.vue     |    2 +-
 src/pages/home/components/ProgressGroup.vue   |   69 +
 src/pages/home/components/TrendChart.vue      |  162 ++
 src/pages/home/index.vue                      |  926 +----------
 src/pages/nursing/index.vue                   |   12 +-
 src/pages/operation/index.vue                 |   28 +-
 src/styles/palette.js                         |    4 +-
 tailwind.config.js                            |   10 +-
 18 files changed, 1992 insertions(+), 2292 deletions(-)
 delete mode 100644 src/components/forge/ForgeBackUp.vue
 create mode 100644 src/pages/home/components/DietSummary.vue
 create mode 100644 src/pages/home/components/FacilityHeaderInfo.vue
 create mode 100644 src/pages/home/components/MapPane.vue
 rename src/pages/home/{ => components}/ProgressBar.vue (97%)
 create mode 100644 src/pages/home/components/ProgressGroup.vue
 create mode 100644 src/pages/home/components/TrendChart.vue
diff --git a/index.html b/index.html
index 341921e..f3eab4e 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 bg-brand-gray-light font-noto text-brand-black">
+  <body class="w-screen bg-gradient-to-br from-brand-green-lighter via-brand-gray-lighter to-brand-purple-lighter   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 731a17f..117d39d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,8 @@
 <template>
-  <!-- 依據 route.meta.layout 動態載入對應 Layout -->
-  <component :is="layoutComponent" />
+  <section>
+    <!-- 依據 route.meta.layout 動態載入對應 Layout -->
+    <component :is="layoutComponent" />
+  </section>
 </template>
 
 <script setup>
@@ -9,7 +11,9 @@ import { useRoute } from "vue-router";
 
 // 懶載入各 Layout
 const layouts = {
-  headquarter: defineAsyncComponent(() => import("@/layouts/HeadquarterLayout.vue")),
+  headquarter: defineAsyncComponent(() =>
+    import("@/layouts/HeadquarterLayout.vue")
+  ),
   map: defineAsyncComponent(() => import("@/layouts/ForgeLayout.vue")),
 };
 
diff --git a/src/components/forge/Forge.vue b/src/components/forge/Forge.vue
index c258d13..77a18df 100644
--- a/src/components/forge/Forge.vue
+++ b/src/components/forge/Forge.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="relative w-full h-full min-h-full">
     <div id="forge-preview" ref="forgeDom" class="absolute inset-0"></div>
+
     <!-- Popovers：永遠顯示在每顆 sprite 上方（跟著相機更新） -->
     <div class="absolute inset-0 z-20 pointer-events-none opacity-90">
       <div
@@ -15,56 +16,144 @@
         @click="bringToFrontById(L.id)"
       >
         <div
-          class="pointer-events-auto relative bg-white/95 border border-gray-300 rounded-md shadow px-3 py-2 text-sm cursor-pointer"
+          class="pointer-events-auto relative bg-white/95 border border-gray-300 rounded-md shadow px-3 py-2 text-sm cursor-pointer w-[180px] break-words leading-relaxed"
           style="will-change: transform"
           @click.stop="openResidentModal(L, $event)"
           role="button"
           tabindex="0"
           @keydown.enter.prevent.stop="openResidentModal(L, $event)"
           @keydown.space.prevent.stop="openResidentModal(L, $event)"
-          aria-label="查看 {{ L.data.name }} 詳細資訊"
+          :aria-label="`查看 ${L.data.name} 詳細資訊`"
         >
           <!-- 箭頭（下方置中，指向 sprite）  -->
-          <!-- 外層（邊框色） -->
           <span
             class="absolute left-1/2 -bottom-2 -translate-x-1/2 w-0 h-0 border-x-8 border-x-transparent border-t-8 border-t-white"
             aria-hidden="true"
           ></span>
-          <ul class="list-none">
-            <!-- 第一行：床號永遠顯示 -->
-            <li class="flex justify-between items-center gap-1">
-              <div>
-                <span
-                  class="inline-block w-2 h-2 rounded-full mr-1 align-middle"
-                  :style="{
-                    backgroundColor:
-                      L.data.state === 'offnormal' ? BRAND_RED : BRAND_GREEN,
-                  }"
-                ></span>
 
-                <!-- 住院中才顯示黃色 icon -->
+          <ul class="list-none">
+            <!-- 第一行：床號永遠顯示-->
+            <li class="flex justify-between items-center gap-1">
+              <!-- 左側：性別圖示 + 狀態符號 + 床號 -->
+              <div class="flex items-center">
+                <!-- 性別圖示 -->
                 <span
-                  v-if="L.data.special"
-                  class="w-2 h-2 text-brand-yellow-dark inline-block align-middle me-2"
+                  v-if="(L.data.roomGender || L.data.residentsSex) === '男'"
+                  class="inline-flex items-center justify-center mr-2 align-middle"
+                  :style="{ color: BRAND_GREEN }"
+                  aria-label="男生房"
+                  title="男生房"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
-                    width="10"
-                    height="10"
-                    viewBox="0 0 24 24"
+                    width="17"
+                    height="17"
+                    viewBox="0 0 256 256"
                   >
                     <path
                       fill="currentColor"
-                      d="M12 1.67a2.91 2.91 0 0 0-2.492 1.403L1.398 16.61a2.914 2.914 0 0 0 2.484 4.385h16.225a2.914 2.914 0 0 0 2.503-4.371L14.494 3.078A2.92 2.92 0 0 0 12 1.67"
+                      d="M152 140a36 36 0 1 1-36-36a36 36 0 0 1 36 36m64-100v176a16 16 0 0 1-16 16H56a16 16 0 0 1-16-16V40a16 16 0 0 1 16-16h144a16 16 0 0 1 16 16m-24 32a8 8 0 0 0-8-8h-32a8 8 0 0 0 0 16h12.69l-18 18A52.08 52.08 0 1 0 158 109.35l18-18V104a8 8 0 0 0 16 0Z"
+                    />
+                  </svg>
+                </span>
+                <span
+                  v-else-if="
+                    (L.data.roomGender || L.data.residentsSex) === '女'
+                  "
+                  class="inline-flex items-center justify-center mr-2 align-middle"
+                  :style="{ color: BRAND_RED }"
+                  aria-label="女生房"
+                  title="女生房"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 256 256"
+                  >
+                    <path
+                      fill="currentColor"
+                      d="M128 144a40 40 0 1 1 40-40a40 40 0 0 1-40 40m88-104v176a16 16 0 0 1-16 16H56a16 16 0 0 1-16-16V40a16 16 0 0 1 16-16h144a16 16 0 0 1 16 16m-80 136v-16.58a56 56 0 1 0-16 0V176H96a8 8 0 0 0 0 16h24v16a8 8 0 0 0 16 0v-16h24a8 8 0 0 0 0-16Z"
                     />
                   </svg>
                 </span>
 
-                <!-- 床號：永遠顯示 -->
+                <!-- 狀態符號：hospitalized=黃三角；leave=灰三角；vacant=空心圓；occupied=dot -->
+                <template v-if="L.data.status === 'hospitalized'">
+                  <span
+                    class="inline-flex items-center justify-center text-brand-yellow-dark mr-2 align-middle"
+                    aria-label="住院中"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="12"
+                      height="12"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="currentColor"
+                        d="M12 1.67a2.91 2.91 0 0 0-2.492 1.403L1.398 16.61a2.914 2.914 0 0 0 2.484 4.385h16.225a2.914 2.914 0 0 0 2.503-4.371L14.494 3.078A2.92 2.92 0 0 0 12 1.67"
+                      />
+                    </svg>
+                  </span>
+                </template>
+                <template v-else-if="L.data.status === 'leave'">
+                  <span
+                    class="inline-flex items-center justify-center text-brand-gray mr-2 align-middle"
+                    aria-label="請假中"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="12"
+                      height="12"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="currentColor"
+                        d="M12 1.67a2.91 2.91 0 0 0-2.492 1.403L1.398 16.61a2.914 2.914 0 0 0 2.484 4.385h16.225a2.914 2.914 0 0 0 2.503-4.371L14.494 3.078A2.92 2.92 0 0 0 12 1.67"
+                      />
+                    </svg>
+                  </span>
+                </template>
+                <template v-else-if="L.data.status === 'vacant'">
+                  <!-- 空床：空心圓 SVG-->
+                  <span
+                    class="inline-flex items-center justify-center text-brand-gray mr-2 align-middle"
+                    aria-label="空床"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="12"
+                      height="12"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="currentColor"
+                        d="M11.5 3a9.5 9.5 0 0 1 9.5 9.5a9.5 9.5 0 0 1-9.5 9.5A9.5 9.5 0 0 1 2 12.5A9.5 9.5 0 0 1 11.5 3m0 1A8.5 8.5 0 0 0 3 12.5a8.5 8.5 0 0 0 8.5 8.5a8.5 8.5 0 0 0 8.5-8.5A8.5 8.5 0 0 0 11.5 4"
+                      />
+                    </svg>
+                  </span>
+                </template>
+                <template v-else>
+                  <!-- 有住民：顯示 dot；在「選到有住民」篩選時，dot 一律綠 -->
+                  <span
+                    class="inline-block w-2 h-2 rounded-full mr-2 align-middle"
+                    :style="{
+                      backgroundColor:
+                        selectedInfo === 'occupied' &&
+                        L.data.status === 'occupied'
+                          ? BRAND_GREEN
+                          : labelDotColor(L),
+                    }"
+                  ></span>
+                </template>
+
+                <!-- 床號 -->
                 <span class="align-middle">{{ L.data.name }}</span>
               </div>
-              <!-- 眼睛 icon -->
-              <div class="text-gray-400" title="查看詳細">
+
+              <!-- 右側：眼睛 icon -->
+              <div class="text-gray-400" title="查看詳細" aria-label="查看詳細">
                 <span>
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
@@ -81,7 +170,7 @@
               </div>
             </li>
 
-            <!-- 第二行：住民基本資料 -->
+            <!-- 第二行：住民基本資料（只有空床才顯示 - ） -->
             <li>
               {{
                 isVacantWithoutSpecial(L)
@@ -89,15 +178,6 @@
                   : `${L.data.residentsName}｜${L.data.residentsSex}｜${L.data.residentsAge}`
               }}
             </li>
-
-            <!-- 第三行：入住日期 -->
-            <!-- <li>
-              {{
-                isVacantWithoutSpecial(L)
-                  ? "-"
-                  : `入住日期：${L.data.startTime}`
-              }}
-            </li> -->
           </ul>
         </div>
       </div>
@@ -105,93 +185,117 @@
 
     <!-- 樓層切換 -->
     <div
-      class="absolute top-4 left-4 text-sm flex justify-center items-center gap-2 z-10 bg-white border rounded-md shadow"
+      class="absolute top-4 left-4 text-sm flex justify-center items-center z-30 bg-white border rounded-md shadow"
     >
       <p class="ps-4 py-2">樓層｜</p>
 
       <button
-        class="px-4 py-2 rounded-md"
-        :class="activeFloor === '1F' ? 'bg-brand-green-light' : 'bg-white'"
+        :class="getFloorBtnClass('1F')"
         @click="onClickFloor('1F')"
+        :aria-pressed="activeFloor === '1F'"
       >
         1F
       </button>
-      <!-- <button
-        class="px-4 py-2 rounded-md hover:bg-gray-100"
-        :class="activeFloor === '2F' ? 'bg-brand-green-light' : 'bg-white'"
+
+      <button
+        :class="getFloorBtnClass('2F')"
         @click="onClickFloor('2F')"
+        :aria-pressed="activeFloor === '2F'"
       >
         2F
-      </button> -->
+      </button>
     </div>
 
-    <!-- 床位資訊-->
+    <!-- 床位資訊篩選 -->
     <div
-      class="absolute top-16 left-4 text-sm flex justify-center items-center z-10 bg-white border rounded-md shadow ps-4"
+      class="absolute top-16 left-4 text-sm flex justify-center items-center z-30 bg-white border rounded-md shadow ps-4"
     >
       <p class="py-2">床位資訊｜</p>
 
       <div class="flex justify-start items-center">
         <!-- 無顯示 -->
         <button
-          class="flex items-center gap-2 px-4 py-2 rounded-md hover:bg-gray-100"
-          :class="
-            selectedInfo === 'none'
-              ? 'bg-brand-green-light bg-opacity-50 hover:bg-brand-green-light hover:bg-opacity-50'
-              : 'bg-white'
-          "
+          :class="getInfoBtnClass('none')"
           @click="selectInfo({ label: '無顯示', value: 'none' })"
           :aria-pressed="selectedInfo === 'none'"
         >
-          <span>不顯示</span>
+          <span
+            class="inline-flex items-center justify-center leading-none align-middle [&>svg]:block shrink-0"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="12"
+              height="12"
+              viewBox="0 0 32 32"
+            >
+              <path
+                fill="currentColor"
+                d="M24.879 2.879A3 3 0 1 1 29.12 7.12l-8.79 8.79a.125.125 0 0 0 0 .177l8.79 8.79a3 3 0 1 1-4.242 4.243l-8.79-8.79a.125.125 0 0 0-.177 0l-8.79 8.79a3 3 0 1 1-4.243-4.242l8.79-8.79a.125.125 0 0 0 0-.177l-8.79-8.79A3 3 0 0 1 7.12 2.878l8.79 8.79a.125.125 0 0 0 .177 0z"
+              />
+            </svg>
+          </span>
+          <span class="leading-none align-middle">不顯示</span>
         </button>
 
-        <!-- 有住民（綠） -->
+        <!-- 有住民（綠/紅） -->
         <button
-          class="flex items-center gap-2 px-4 py-2 rounded-md hover:bg-gray-100"
-          :class="
-            selectedInfo === 'occupied'
-              ? 'bg-brand-green-light bg-opacity-50 hover:bg-brand-green-light hover:bg-opacity-50'
-              : 'bg-white'
-          "
+          :class="getInfoBtnClass('occupied')"
           @click="selectInfo({ label: '有住民', value: 'occupied' })"
           :aria-pressed="selectedInfo === 'occupied'"
         >
-          <span class="w-2 h-2 bg-brand-green rounded-full inline-block"></span>
-          <span>有住民</span>
+          <span
+            class="text-brand-green inline-flex items-center justify-center leading-none align-middle [&>svg]:block shrink-0"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="18"
+              height="18"
+              viewBox="0 0 16 16"
+            >
+              <path fill="currentColor" d="M8 4a4 4 0 1 1 0 8a4 4 0 0 1 0-8" />
+            </svg>
+          </span>
+
+          <span class="leading-none align-middle">有住民</span>
         </button>
 
-        <!-- 空床（紅） -->
+        <!-- 空床（白色 sprite + 灰 dot） -->
         <button
-          class="flex items-center gap-2 px-4 py-2 rounded-md hover:bg-gray-100"
-          :class="
-            selectedInfo === 'vacant'
-              ? 'bg-brand-green-light bg-opacity-50 hover:bg-brand-green-light hover:bg-opacity-50'
-              : 'bg-white'
-          "
+          :class="getInfoBtnClass('vacant')"
           @click="selectInfo({ label: '空床', value: 'vacant' })"
           :aria-pressed="selectedInfo === 'vacant'"
         >
-          <span class="w-2 h-2 bg-brand-red rounded-full inline-block"></span>
-          <span>空床</span>
+          <span
+            class="text-brand-gray inline-flex items-center justify-center leading-none align-middle [&>svg]:block shrink-0"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+            >
+              <path
+                fill="currentColor"
+                d="M11.5 3a9.5 9.5 0 0 1 9.5 9.5a9.5 9.5 0 0 1-9.5 9.5A9.5 9.5 0 0 1 2 12.5A9.5 9.5 0 0 1 11.5 3m0 1A8.5 8.5 0 0 0 3 12.5a8.5 8.5 0 0 0 8.5 8.5a8.5 8.5 0 0 0 8.5-8.5A8.5 8.5 0 0 0 11.5 4"
+              />
+            </svg>
+          </span>
+          <span class="leading-none align-middle">空床</span>
         </button>
 
-        <!-- 住院中（紅 + 黃色警示） -->
+        <!-- 住院中（白色 sprite + 黃三角） -->
         <button
-          class="flex items-center gap-2 px-4 py-2 rounded-md hover:bg-gray-100"
-          :class="
-            selectedInfo === 'hospitalized'
-              ? 'bg-brand-green-light bg-opacity-50 hover:bg-brand-green-light hover:bg-opacity-50'
-              : 'bg-white'
-          "
+          :class="getInfoBtnClass('hospitalized')"
           @click="selectInfo({ label: '住院中', value: 'hospitalized' })"
           :aria-pressed="selectedInfo === 'hospitalized'"
         >
-          <span class="w-2 h-2 text-brand-yellow-dark inline-block">
+          <span
+            class="inline-flex items-center justify-center leading-none align-middle [&>svg]:block shrink-0 text-brand-yellow-dark"
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              width="10"
-              height="10"
+              width="12"
+              height="12"
               viewBox="0 0 24 24"
             >
               <path
@@ -200,23 +304,22 @@
               />
             </svg>
           </span>
-          <span>住院中</span>
+          <span class="leading-none align-middle">住院中</span>
         </button>
 
-        <!-- 請假中（灰） -->
+        <!-- 請假中（白色 sprite + 灰三角） -->
         <button
-          class="flex items-center gap-2 px-4 py-2 rounded-md hover:bg-gray-100"
-          :class="
-            selectedInfo === 'leave' ? 'bg-brand-green-light bg-opacity-50' : ''
-          "
+          :class="getInfoBtnClass('leave')"
           @click="selectInfo({ label: '請假中', value: 'leave' })"
           :aria-pressed="selectedInfo === 'leave'"
         >
-          <span class="w-2 h-2 text-gray-400 inline-block">
+          <span
+            class="inline-flex items-center justify-center leading-none align-middle [&>svg]:block shrink-0 text-brand-gray"
+          >
             <svg
               xmlns="http://www.w3.org/2000/svg"
-              width="10"
-              height="10"
+              width="12"
+              height="12"
               viewBox="0 0 24 24"
             >
               <path
@@ -225,28 +328,24 @@
               />
             </svg>
           </span>
-          <span>請假中</span>
+          <span class="leading-none align-middle">請假中</span>
         </button>
       </div>
     </div>
 
     <!-- 分區切換（多選｜預設不選＝顯示全部） -->
     <div
-      class="absolute bottom-4 left-4 text-sm flex justify-center items-center gap-2 z-10 bg-white border rounded-md shadow"
+      class="absolute bottom-12 left-4 text-sm flex justify-center items-center gap-2 z-30 bg-white border rounded-md shadow"
     >
       <p class="ps-4 py-2">查看分區｜</p>
 
       <button
         v-for="zone in zones"
         :key="zone"
-        class="px-4 py-2 rounded-md hover:bg-brand-gray-lighter ho"
-        :class="
-          isZoneSelected(zone)
-            ? 'bg-brand-green-light bg-opacity-50 hover:bg-brand-green-light hover:bg-opacity-50'
-            : 'bg-white'
-        "
+        :class="getZoneBtnClass(zone)"
         @click="toggleZone(zone)"
         :aria-pressed="isZoneSelected(zone)"
+        type="button"
       >
         {{ zone }}
       </button>
@@ -270,14 +369,29 @@
     >
       <!-- 標題 -->
       <div class="flex items-center justify-between mb-4">
-        <h3 class="text-lg font-semibold tracking-widest">病患資訊</h3>
-        <button
-          class="px-3 py-1 rounded-md hover:bg-gray-100"
-          @click="closeResidentModal"
-          aria-label="關閉"
-        >
-          ✕
-        </button>
+        <div>
+          <h3 class="text-lg font-semibold tracking-widest">病患資訊</h3>
+        </div>
+        <div class="flex justify-end items-center gap-4">
+          <a
+            href="http://service2.humetrics.ai:3456/9054/?token=UARK"
+            target="_blank"
+          >
+            <button
+              class="btn btn-sm bg-brand-purple-dark text-white hover:bg-brand-purple border-none shadow rounded px-3 py-2 tracking-wider"
+            >
+              健康偵測系統
+            </button>
+          </a>
+
+          <button
+            class="px-3 py-1 rounded-md hover:bg-gray-100"
+            @click="closeResidentModal"
+            aria-label="關閉"
+          >
+            ✕
+          </button>
+        </div>
       </div>
 
       <!-- 內容清單 -->
@@ -314,7 +428,7 @@ import { ref, computed, onMounted, onUnmounted, watch } from "vue";
 import { useRoute } from "vue-router";
 import useForgeSprite from "@/hooks/forge/useForgeSprite";
 
-// 只取某個節點的「直屬子節點」清單
+/* ---------------------- 工具：樹/幾何 ---------------------- */
 function getDirectChildren(model, parentId) {
   const tree = model.getInstanceTree?.();
   if (!tree) return [];
@@ -322,8 +436,6 @@ function getDirectChildren(model, parentId) {
   tree.enumNodeChildren(parentId, (id) => out.push(id));
   return out;
 }
-
-// 判斷節點是否含有任何 fragment（葉子幾何）
 function nodeHasFragments(model, dbId) {
   const tree = model.getInstanceTree?.();
   if (!tree) return false;
@@ -338,12 +450,12 @@ function nodeHasFragments(model, dbId) {
   return has;
 }
 
-// ====== 基本變數 / 注入 ======
+/* ---------------------- 基本變數 ---------------------- */
 const route = useRoute();
 const forgeDom = ref(null);
 let viewer = null;
 const viewerReady = ref(false);
-const activeFloor = ref("1F"); // 預設 1F
+const activeFloor = ref("1F");
 
 let unbindSpriteClick = null;
 let THREE = null;
@@ -354,19 +466,46 @@ const {
   forgeClickListener,
   cardfitToView,
   clear: clearSprites,
-  __staticDevices, // 用來塞模擬資料
+  __staticDevices,
 } = useForgeSprite();
 
-// ====== 常數（樓層 / 顏色 / 模型路徑） ======
+/* ---------------------- 常數 / 主題色 ---------------------- */
 const FLOOR_DBIDS = { "1F": null, "2F": null };
-const BRAND_RED = "#FF8678";
-const BRAND_GREEN = "#34D5C8";
+const BRAND_RED = "#FF8678"; // 女（佔床）
+const BRAND_GREEN = "#34D5C8"; // 男（佔床）
+const BRAND_GRAY = "#CACACA"; // 空床 dot
+const BRAND_WHITE = "#FFFFFF"; // 不在院內（sprite 本體）
 const MODEL_SVF_PATH = `/upload/forge/0.svf`;
-// ====== Theming 顏色（RGBA 0~1）======
-const THEME_PURPLE = { r: 124 / 255, g: 58 / 255, b: 237 / 255, a: 0.9 }; 
+
+const THEME_PURPLE = {
+  r: 170 / 255,
+  g: 90 / 255,
+  b: 255 / 255,
+  a: 0.9,
+};
 const THEME_YELLOW = { r: 250 / 255, g: 204 / 255, b: 21 / 255, a: 0.9 };
 
-// ====== THREE 入口（避免版本衝突） ======
+/* ---------------------- 分區映射（每層樓對半且不重疊） ---------------------- */
+// 每層樓一個 Map： key = 3 碼房號, value = '一般' | '氧氣'
+const ROOM_ZONE_MAP = { "1F": new Map(), "2F": new Map() };
+
+function getZoneForRoom(floorKey, code3) {
+  return ROOM_ZONE_MAP[floorKey]?.get(String(code3)) ?? null;
+}
+
+/* ======（可選）手動指定男女房；預設留空就會自動對半 ====== */
+const FIXED_ROOM_GENDER = {
+  "1F": {
+    male: ["101", "103"],
+    female: ["102", "105"],
+  },
+  "2F": {
+    male: ["201", "203", "205", "207", "209", "211", "213", "215"],
+    female: ["202", "206", "208", "210", "212", "216"],
+  },
+};
+
+/* ---------------------- THREE 入口 ---------------------- */
 function getThree() {
   if (THREE) return THREE;
   THREE =
@@ -376,17 +515,20 @@ function getThree() {
         globalThis.Autodesk.Viewing.Private?.THREE)) ||
     globalThis.THREE ||
     null;
-  if (!THREE)
-    throw new Error("[Forge] THREE 尚未就緒（Viewer 還沒載好或版本差異）");
+  if (!THREE) throw new Error("[Forge] THREE 尚未就緒");
   return THREE;
 }
 
-// ====== Resident Modal 狀態 ======
+/* ---------------------- Resident Modal ---------------------- */
 const modalOpen = ref(false);
 const modalData = ref(null);
+const activeLabelId = ref(null);
+function bringToFrontById(id) {
+  activeLabelId.value = id;
+}
 
 function buildResidentModalData(d) {
-  const vacant = d?.state === "offnormal" && !d?.special; // 空床
+  const vacant = d?.status === "vacant";
   return {
     name: vacant ? "-" : d?.residentsName ?? "-",
     sex: vacant ? "-" : d?.residentsSex ?? "-",
@@ -394,25 +536,26 @@ function buildResidentModalData(d) {
     startTime: vacant ? "-" : d?.startTime ?? "-",
     healthStatus: vacant ? "-" : d?.healthStatus ?? "一般",
     medicationStatus: vacant ? "-" : d?.medicationStatus ?? "規律服藥",
-    specialEvent: d?.special
-      ? d?.specialEvent ?? "住院中"
-      : d?.specialEvent ?? "-",
+    specialEvent:
+      d?.status === "hospitalized"
+        ? "住院中"
+        : d?.status === "leave"
+        ? "請假中"
+        : "-",
     note: vacant ? "-" : d?.note ?? "-",
   };
 }
-
 function openResidentModal(L, e) {
   e?.stopPropagation?.();
   bringToFrontById(L.id);
   modalData.value = buildResidentModalData(L.data);
   modalOpen.value = true;
 }
-
 function closeResidentModal() {
   modalOpen.value = false;
 }
 
-// ====== 初始化樓層還原 ======
+/* ---------------------- 初始樓層 ---------------------- */
 function resolveInitialFloor() {
   const q = (route.query?.floor || "").toString().toUpperCase();
   if (q === "1F" || q === "2F") return q;
@@ -421,7 +564,7 @@ function resolveInitialFloor() {
   return "1F";
 }
 
-// ====== Forge Viewer 初始化 / 載入 ======
+/* ---------------------- Forge 初始化 ---------------------- */
 function initViewer(container) {
   return new Promise((resolve) => {
     Autodesk.Viewing.Initializer({ env: "Local", language: "en" }, () => {
@@ -434,7 +577,6 @@ function initViewer(container) {
       window.v = viewer;
       getThree();
       viewer.setGroundShadow(true);
-      // 透明背景：跨版本保險寫法（部分版本沒有 glrenderer）
       const r = viewer.impl?.renderer?.();
       if (r?.setClearColor) r.setClearColor(0x000000, 0);
       if (r?.setClearAlpha) r.setClearAlpha(0);
@@ -443,13 +585,11 @@ function initViewer(container) {
     });
   });
 }
-
 function loadModel(filePath) {
   return new Promise((resolve, reject) => {
     viewer.loadModel(filePath, {}, (model) => resolve(model), reject);
   });
 }
-
 function hideViewCubeAndHome() {
   const tryHide = () => {
     const ext = viewer?.getExtension?.("Autodesk.ViewCubeUi");
@@ -460,7 +600,6 @@ function hideViewCubeAndHome() {
     if (e.extensionId === "Autodesk.ViewCubeUi") tryHide();
   });
 }
-
 function waitObjectTree(model) {
   return new Promise((resolve) => {
     if (model.getData().instanceTree) return resolve();
@@ -475,24 +614,102 @@ function waitObjectTree(model) {
   });
 }
 
-// ====== 依名稱解析樓層 dbId（請在 waitObjectTree 後、applyFloor 前呼叫） ======
+/* ---------------------- 依名稱解析樓層 dbId ---------------------- */
+function findTopNodeByTest(model, tester) {
+  const tree = model.getInstanceTree?.();
+  if (!tree) return null;
+  const root = tree.getRootId();
+  let hit = null;
+  tree.enumNodeChildren(root, (id) => {
+    if (hit != null) return;
+    const name = String(tree.getNodeName?.(id) || "");
+    if (tester(name)) hit = id;
+  });
+  return hit;
+}
+function findDbIdByNameUnderExact(model, rootDbId, targetName) {
+  const tree = model.getInstanceTree?.();
+  if (!tree || rootDbId == null) return null;
+  const target = String(targetName).trim().toUpperCase();
+  let hit = null;
+  const walk = (id) => {
+    if (hit != null) return;
+    const name = String(tree.getNodeName?.(id) || "")
+      .trim()
+      .toUpperCase();
+    if (name === target) {
+      hit = id;
+      return;
+    }
+    tree.enumNodeChildren(id, walk);
+  };
+  walk(rootDbId);
+  return hit;
+}
+function findDbIdByNameUnder(model, rootDbId, tester) {
+  const tree = model.getInstanceTree?.();
+  if (!tree || rootDbId == null) return null;
+  let hit = null;
+  const walk = (id) => {
+    if (hit != null) return;
+    const name = String(tree.getNodeName?.(id) || "");
+    if (tester(name)) {
+      hit = id;
+      return;
+    }
+    tree.enumNodeChildren(id, walk);
+  };
+  walk(rootDbId);
+  return hit;
+}
+function getNodeNameById(model, dbId) {
+  const tree = model.getInstanceTree?.();
+  return tree ? String(tree.getNodeName?.(dbId) || "") : "";
+}
 function resolveFloorDbIdsFromTree(model) {
-  // 你模型左側樹的節點名稱，如： "1F(360)"、"2F(360)"
-  // 若你的實際名稱不同，直接改這兩個字串即可。
-  const id1 =
-    findDbIdByNameExact(model, "1F(360)") ||
-    findDbIdByNameLike(model, "1F(360)");
-  const id2 =
-    findDbIdByNameExact(model, "2F(360)") ||
-    findDbIdByNameLike(model, "2F(360)");
+  const arc1Root = findTopNodeByTest(model, (n) => /\b1F\.nwc\b/i.test(n));
+  const arc2Root = findTopNodeByTest(model, (n) => /\b2F\.nwc\b/i.test(n));
 
-  if (id1 != null) FLOOR_DBIDS["1F"] = id1;
-  if (id2 != null) FLOOR_DBIDS["2F"] = id2;
+  const id1Exact = arc1Root
+    ? findDbIdByNameUnderExact(model, arc1Root, "1F(360)")
+    : null;
+  const id1Like =
+    !id1Exact && arc1Root
+      ? findDbIdByNameUnder(model, arc1Root, (n) =>
+          /(?:^|[^A-Z0-9])1F\s*\(360\)(?:[^A-Z0-9]|$)/i.test(String(n || ""))
+        )
+      : null;
 
-  console.log("[Forge] 解析樓層：", FLOOR_DBIDS);
+  const id2Exact = arc2Root
+    ? findDbIdByNameUnderExact(model, arc2Root, "2F(360)")
+    : null;
+  const id2Like =
+    !id2Exact && arc2Root
+      ? findDbIdByNameUnder(model, arc2Root, (n) =>
+          /(?:^|[^A-Z0-9])2F\s*\(360\)(?:[^A-Z0-9]|$)/i.test(String(n || ""))
+        )
+      : null;
+
+  FLOOR_DBIDS["1F"] = id1Exact ?? id1Like ?? null;
+  FLOOR_DBIDS["2F"] = id2Exact ?? id2Like ?? null;
+
+  if (FLOOR_DBIDS["1F"] != null)
+    console.log(
+      "[Forge] 1F 命中名稱 =",
+      getNodeNameById(model, FLOOR_DBIDS["1F"])
+    );
+  else console.warn("[Forge] 未在 1F.nwc 子樹找到 1F(360) 節點");
+  if (FLOOR_DBIDS["2F"] != null)
+    console.log(
+      "[Forge] 2F 命中名稱 =",
+      getNodeNameById(model, FLOOR_DBIDS["2F"])
+    );
+  else console.warn("[Forge] 未在 2F.nwc 子樹找到 2F(360) 節點");
+
+  console.log("[Forge] 解析樓層 dbIds：", FLOOR_DBIDS);
 }
 
-// 只在 rootDbId 這棵子樹裡找名字包含 keyword 的節點
+/* ---------------------- 名稱搜尋 ---------------------- */
 function collectDbIdsByNameUnder(model, rootDbId, keyword) {
   const tree = model.getInstanceTree?.();
   if (!tree) return [];
@@ -506,44 +723,7 @@ function collectDbIdsByNameUnder(model, rootDbId, keyword) {
   return out;
 }
 
-// ====== 依名稱尋找 dbId（完全比對 / 含模糊比對） ======
-function findDbIdByNameExact(model, targetName) {
-  const tree = model.getInstanceTree?.();
-  if (!tree) return null;
-  const root = tree.getRootId();
-  let hit = null;
-  const walk = (id) => {
-    if (hit != null) return;
-    const name = tree.getNodeName ? tree.getNodeName(id) : null;
-    if (name === targetName) {
-      hit = id;
-      return;
-    }
-    tree.enumNodeChildren(id, walk);
-  };
-  walk(root);
-  return hit;
-}
-
-function findDbIdByNameLike(model, keyword) {
-  const tree = model.getInstanceTree?.();
-  if (!tree) return null;
-  const root = tree.getRootId();
-  let hit = null;
-  const walk = (id) => {
-    if (hit != null) return;
-    const name = tree.getNodeName ? tree.getNodeName(id) : "";
-    if (typeof name === "string" && name.includes(keyword)) {
-      hit = id;
-      return;
-    }
-    tree.enumNodeChildren(id, walk);
-  };
-  walk(root);
-  return hit;
-}
-
-// ====== 幾何工具 ======
+/* ---------------------- 幾何工具（單一定義） ---------------------- */
 function getNodeWorldBounds(model, dbId) {
   const THREE = getThree();
   const tree = model.getInstanceTree?.();
@@ -562,113 +742,232 @@ function getNodeWorldBounds(model, dbId) {
   return box;
 }
 
-function positionsFromRatios(box, ratios, zLiftRatio = 0.05) {
-  const THREE = getThree();
-  const { min, max } = box;
-  const w = max.x - min.x,
-    h = max.y - min.y,
-    zH = max.z - min.z;
-  const z = max.z + Math.max(0.2, zH * zLiftRatio); // 稍微浮起
-  return ratios.map(
-    ([rx, ry]) => new THREE.Vector3(min.x + rx * w, min.y + ry * h, z)
-  );
+/* ---------------------- 找「房間」容器與掃描 ---------------------- */
+function code3ForFloor(name, floorKey) {
+  const m = String(name || "").match(/\b(\d{3})\b/);
+  if (!m) return null;
+  const code = m[1];
+  const wantPrefix = String(floorKey || "").charAt(0); // '1' or '2'
+  if (wantPrefix && code.charAt(0) !== wantPrefix) return null;
+  if (code === "360") return null; // 排除 1F(360)/2F(360) 之類
+  return code;
 }
-
-// 每層的「不工整」固定佈局（相對比例）
-const LAYOUT_RATIOS = {
-  "2F": [
-    [0.18, 0.26],
-    [0.5, 0.24],
-    [0.78, 0.29],
-    [0.16, 0.48],
-    [0.23, 0.95],
-    [0.86, 0.53],
-  ],
-  "1F": [
-    [0.89, 0.68],
-    [0.85, 0.23],
-  ],
-};
-
-// 取得 node 是否含任一 fragment（遞迴）
-function nodeHasAnyFragmentDeep(model, dbId) {
+function findRoomContainerId(model, floorRootId) {
   const tree = model.getInstanceTree?.();
-  if (!tree) return false;
-  let has = false;
-  tree.enumNodeFragments(
-    dbId,
-    () => {
-      has = true;
-    },
-    /*recursive*/ true
-  );
-  return has;
-}
+  if (!tree || floorRootId == null) return null;
 
-// 取得：當層「房間」底下的每一間房 { id, name }
-// 會深度往下找，直到找到「真的掛有 fragment 的節點」為止
-function getRoomsUnderFloor(model, floorRootId) {
+  const candidates = [];
+  const walk = (id) => {
+    const name = String(tree.getNodeName?.(id) || "").trim();
+    const looksLikeRoomGroup = /房|病房|room|ROOM/i.test(name);
+    if (looksLikeRoomGroup) {
+      const children = [];
+      tree.enumNodeChildren(id, (cid) => children.push(cid));
+      const numericKids = children.filter((cid) =>
+        /\b\d{3}\b/.test(String(tree.getNodeName?.(cid) || ""))
+      );
+      candidates.push({
+        id,
+        total: children.length,
+        numeric: numericKids.length,
+      });
+    }
+    tree.enumNodeChildren(id, walk);
+  };
+  walk(floorRootId);
+
+  if (!candidates.length) return null;
+
+  candidates.sort((a, b) => b.numeric - a.numeric || b.total - a.total);
+  const hit = candidates[0];
+
+  if (!hit || hit.numeric < 4) return null; // 不可靠 → 改用掃描
+  return hit.id;
+}
+function scanRoomsUnderFloor(model, floorRootId, floorKey) {
+  const tree = model.getInstanceTree?.();
+  if (!tree || floorRootId == null) return [];
+  const out = [];
+  const seen = new Set();
+  const walk = (id) => {
+    const name = String(tree.getNodeName?.(id) || "");
+    let has = false;
+    tree.enumNodeFragments(
+      id,
+      () => {
+        has = true;
+      },
+      true
+    );
+    const code3 = code3ForFloor(name, floorKey);
+    if (code3 && has) {
+      if (!seen.has(id)) {
+        out.push({ id, name, code3 });
+        seen.add(id);
+      }
+      return;
+    }
+    tree.enumNodeChildren(id, walk);
+  };
+  walk(floorRootId);
+  return out;
+}
+function roomCodeOf(name) {
+  const m = String(name || "").match(/\b(\d{3})\b/);
+  return m ? m[1] : null;
+}
+function collectRoomsForFloor(model, floorKey, floorRootId) {
   const tree = model.getInstanceTree?.();
   if (!tree || floorRootId == null) return [];
 
-  const containers = collectDbIdsByNameUnder(model, floorRootId, "房間");
-  const result = [];
-  const seen = new Set();
+  const containerId = findRoomContainerId(model, floorRootId);
 
-  // 深度抓取：在「房間」子樹裡，把「名稱像 101/102/103/105… 且子樹中有幾何」的節點都撈出來
-  const isRoomName = (name) => /\d{3,}/.test(String(name || ""));
-
-  const pushRoom = (id) => {
-    if (seen.has(id)) return;
-    const name = tree.getNodeName ? String(tree.getNodeName(id) || "") : "";
-    result.push({ id, name });
-    seen.add(id);
-  };
-
-  const walk = (id) => {
-    const name = tree.getNodeName ? tree.getNodeName(id) : "";
-    const hasGeom = nodeHasAnyFragmentDeep(model, id);
-
-    // 名稱像房號 & 子樹確實有幾何 → 收
-    if (isRoomName(name) && hasGeom) {
-      pushRoom(id);
-      return; // 已經是可上色的層級，這支線可以停
-    }
-
-    // 否則往下繼續找
-    tree.enumNodeChildren(id, walk);
-  };
-
-  containers.forEach((cid) => walk(cid));
-
-  // 萬一模型沒有「房間」容器，備用：直接掃整個樓層子樹
-  if (!result.length) {
-    const walkFloor = (id) => {
-      const name = tree.getNodeName ? tree.getNodeName(id) : "";
-      if (isRoomName(name) && nodeHasAnyFragmentDeep(model, id)) pushRoom(id);
-      tree.enumNodeChildren(id, walkFloor);
-    };
-    walkFloor(floorRootId);
+  let roomNodes = [];
+  if (containerId != null) {
+    const children = [];
+    tree.enumNodeChildren(containerId, (id) => children.push(id));
+    roomNodes = children
+      .map((cid) => {
+        const n = String(tree.getNodeName?.(cid) || "");
+        const code3 = code3ForFloor(n, floorKey);
+        if (!code3) return null;
+        let has = false;
+        tree.enumNodeFragments(
+          cid,
+          () => {
+            has = true;
+          },
+          true
+        );
+        return has ? { id: cid, name: n, code3 } : null;
+      })
+      .filter(Boolean);
+  }
+  if (!roomNodes.length) {
+    roomNodes = scanRoomsUnderFloor(model, floorRootId, floorKey);
+  }
+  if (!roomNodes.length) {
+    console.warn("[Forge] 此層未找到任何符合 3 碼房號的節點");
+    return [];
   }
 
-  return result;
+  const rooms = roomNodes.map(({ id, name, code3 }) => {
+    const box = getNodeWorldBounds(model, id);
+    return { id, name, code3, box, gender: null };
+  });
+
+  const sets = FIXED_ROOM_GENDER[floorKey] || {};
+  const maleSet = new Set(sets.male || []);
+  const femaleSet = new Set(sets.female || []);
+  rooms.forEach((r) => {
+    if (maleSet.has(r.code3)) r.gender = "男";
+    if (femaleSet.has(r.code3)) r.gender = "女";
+  });
+
+  const total = rooms.length;
+  const targetMale = Math.floor(total / 2);
+  const targetFemale = total - targetMale;
+
+  let maleCount = rooms.filter((r) => r.gender === "男").length;
+  let femaleCount = rooms.filter((r) => r.gender === "女").length;
+
+  const unresolved = rooms
+    .filter((r) => !r.gender)
+    .sort((a, b) => (a.code3 || "").localeCompare(b.code3 || ""));
+
+  for (const r of unresolved) {
+    if (maleCount < targetMale && femaleCount < targetFemale) {
+      if (maleCount <= femaleCount) {
+        r.gender = "男";
+        maleCount++;
+      } else {
+        r.gender = "女";
+        femaleCount++;
+      }
+    } else if (maleCount < targetMale) {
+      r.gender = "男";
+      maleCount++;
+    } else if (femaleCount < targetFemale) {
+      r.gender = "女";
+      femaleCount++;
+    } else {
+      r.gender = "男";
+      maleCount++;
+    }
+  }
+
+  console.table(
+    rooms.map((r) => ({ floor: floorKey, code: r.code3, gender: r.gender }))
+  );
+
+  // === 對半分區（一般/氧氣），兩組不重疊 ===
+  ROOM_ZONE_MAP[floorKey].clear();
+  const sorted = [...rooms]
+    .filter((r) => r.code3) // 只分配有 3 碼房號的
+    .sort((a, b) => String(a.code3).localeCompare(String(b.code3)));
+
+  // 偶數位 -> 一般；奇數位 -> 氧氣（確保不重疊、幾乎對半）
+  sorted.forEach((r, idx) => {
+    ROOM_ZONE_MAP[floorKey].set(r.code3, idx % 2 === 0 ? "一般" : "氧氣");
+  });
+
+  return rooms;
 }
 
-const ZONE_BY_NAME = {
-  一般: ["101", "102"],
-  氧氣: ["103", "105"],
-};
+/* ---------------------- Box 幫手 & 由床盒對應到房 ---------------------- */
+function expandBox(box, eps = 0.05) {
+  const THREE = getThree();
+  const b = box.clone();
+  b.min.sub(new THREE.Vector3(eps, eps, eps));
+  b.max.add(new THREE.Vector3(eps, eps, eps));
+  return b;
+}
+function resolveRoomByBox(rooms, bedBox) {
+  if (!rooms.length) return null;
+  const eb = expandBox(bedBox, 0.02);
+
+  for (const r of rooms) {
+    const rb = expandBox(r.box, 0.02);
+    if (rb.intersectsBox(eb) || rb.containsBox(eb)) return r;
+  }
+
+  const THREE = getThree();
+  const c = new THREE.Vector3();
+  bedBox.getCenter(c);
+  let best = null,
+    bestD2 = Infinity;
+  for (const r of rooms) {
+    const rc = new THREE.Vector3();
+    r.box.getCenter(rc);
+    const dx = c.x - rc.x,
+      dy = c.y - rc.y;
+    const d2 = dx * dx + dy * dy;
+    if (d2 < bestD2) {
+      bestD2 = d2;
+      best = r;
+    }
+  }
+  return best;
+}
+
+/* ---------------------- 分區 ---------------------- */
+const ZONE_BY_NAME = { 一般: ["101", "102"], 氧氣: ["103", "105"] };
 
 function judgeZoneByName(roomName) {
-  const digits = (roomName || "").match(/\d{3,}/g) || []; // 抓出所有連續3位以上的數字
-  for (const z of Object.keys(ZONE_BY_NAME)) {
-    if (ZONE_BY_NAME[z].some((key) => digits.includes(key))) return z;
-  }
-  return null;
+  const code = roomCodeOf(roomName); // 抓 3 碼房號
+  if (!code) return null;
+
+  // 依房號前綴推回樓層（1xx -> 1F、2xx -> 2F），預設用當前樓層
+  const floorKey = code.startsWith("1")
+    ? "1F"
+    : code.startsWith("2")
+    ? "2F"
+    : activeFloor.value;
+
+  return getZoneForRoom(floorKey, code);
 }
 
-let lastThemedIds = new Set(); // 我們上一輪上色過的房間 id
-
+let lastThemedIds = new Set();
 function clearOurTheming(model) {
   try {
     viewer.clearThemingColors(model);
@@ -677,7 +976,6 @@ function clearOurTheming(model) {
   }
   lastThemedIds.clear();
 }
-
 function setRoomTheming(id, rgba) {
   const THREE = getThree();
   const c = new THREE.Vector4(rgba.r, rgba.g, rgba.b, rgba.a);
@@ -688,108 +986,155 @@ function setRoomTheming(id, rgba) {
 function rebuildZoneThemingForCurrentFloor() {
   if (!viewer || !viewer.model) return;
 
-  // 清掉我們上一輪塗色
+  // 先清乾淨我們加過的房間主題色（不動 sprites）
   clearOurTheming(viewer.model);
 
-  // 沒有勾任何分區 → 不上色
+  // 沒選任何分區＝顯示全部（不上主題色）
   if (selectedZones.value.size === 0) {
     viewer.impl.invalidate(true);
     return;
   }
 
-  const floorRootId = FLOOR_DBIDS[activeFloor.value];
+  const floorKey = activeFloor.value; // "1F" | "2F"
+  const floorRootId = FLOOR_DBIDS[floorKey];
   if (floorRootId == null) return;
 
-  const rooms = getRoomsUnderFloor(viewer.model, floorRootId); // [{id,name}]
-  if (!rooms.length) return;
+  const tree = viewer.model.getInstanceTree?.();
+  if (!tree) return;
 
-  rooms.forEach(({ id, name }) => {
-    // 先決定這間房屬於哪個分區
-    // 你也可以改成「一間房可能屬多分區」→ 那就以優先權或疊色規則處理
-    let z = null;
-    // 方式 B 優先
-    // z = judgeZoneByDbId(id) ?? judgeZoneByName(name);
-    z = judgeZoneByName(name); // 你現在用名稱的話，先這樣
+  // --- 幫手：從名稱抓 3 碼房號，且需符合該樓層前綴 ---
+  const code3For = (name) => {
+    const m = String(name || "").match(/\b(\d{3})\b/);
+    if (!m) return null;
+    const code = m[1];
+    if (code.charAt(0) !== floorKey.charAt(0)) return null; // 1xx/2xx
+    if (code === "360") return null; // 排除 1F(360)/2F(360)
+    return code;
+  };
 
-    if (!z) return; // 沒有分區定義就略過
-    if (!selectedZones.value.has(z)) return; // 沒勾這個分區也略過
+  // --- 找出本層所有「房間」節點（需有幾何） ---
+  let roomsGroupId =
+    findDbIdByNameUnderExact(viewer.model, floorRootId, "房間") ??
+    findDbIdByNameUnder(viewer.model, floorRootId, (n) =>
+      /房間/i.test(String(n || ""))
+    );
 
-    // 上色
-    if (z === "一般") setRoomTheming(id, THEME_PURPLE);
-    if (z === "氧氣") setRoomTheming(id, THEME_YELLOW);
+  const rooms = [];
+  const seen = new Set();
+  const pushIfRoom = (id) => {
+    const name = String(tree.getNodeName?.(id) || "");
+    let has = false;
+    tree.enumNodeFragments(
+      id,
+      () => {
+        has = true;
+      },
+      true
+    );
+    if (!has) return;
+    const code = code3For(name);
+    if (!code) return;
+    if (!seen.has(id)) {
+      rooms.push({ id, name, code3: code, codeN: parseInt(code, 10) });
+      seen.add(id);
+    }
+  };
+
+  if (roomsGroupId != null) {
+    tree.enumNodeChildren(roomsGroupId, (cid) => pushIfRoom(cid));
+  } else {
+    const walk = (id) => {
+      pushIfRoom(id);
+      tree.enumNodeChildren(id, walk);
+    };
+    walk(floorRootId);
+  }
+
+  if (!rooms.length) {
+    console.warn(`[Forge] ${floorKey} 未找到任何房間節點，無法分區上色`);
+    viewer.impl.invalidate(true);
+    return;
+  }
+
+  // --- 依「數值」排序（避免字串排序陷阱） ---
+  const sortedRooms = [...rooms].sort((a, b) => a.codeN - b.codeN);
+
+  // --- 重新建立本層分區表（每次重建，避免舊 Map 汙染） ---
+  const zoneMap = new Map();
+  // ① 主要策略：交錯分配（偶數→一般；奇數→氧氣）
+  sortedRooms.forEach((r, idx) => {
+    zoneMap.set(r.code3, idx % 2 === 0 ? "一般" : "氧氣");
   });
 
+  // ② 驗證：若不小心全落同組（理論上不會，但保險）
+  const cntGeneralA = sortedRooms.reduce(
+    (n, r, i) => n + (zoneMap.get(r.code3) === "一般"),
+    0
+  );
+  const cntO2A = sortedRooms.length - cntGeneralA;
+
+  if (cntGeneralA === 0 || cntO2A === 0) {
+    // ③ 後備策略：前半「一般」、後半「氧氣」
+    zoneMap.clear();
+    const half = Math.floor(sortedRooms.length / 2);
+    sortedRooms.forEach((r, idx) => {
+      zoneMap.set(r.code3, idx < half ? "一般" : "氧氣");
+    });
+  }
+
+  // 存回全域對應表
+  ROOM_ZONE_MAP[floorKey] = zoneMap;
+
+  // --- 套用主題色（只對被勾選的分區著色） ---
+  const chosen = selectedZones.value; // Set{"一般","氧氣"}
+  let countGeneral = 0,
+    countO2 = 0;
+
+  for (const r of sortedRooms) {
+    const z = zoneMap.get(r.code3);
+    if (!z || !chosen.has(z)) continue;
+    if (z === "一般") {
+      setRoomTheming(r.id, THEME_PURPLE);
+      countGeneral++;
+    } else if (z === "氧氣") {
+      setRoomTheming(r.id, THEME_YELLOW);
+      countO2++;
+    }
+  }
+
+  // ---- 除錯輸出 ----
+  console.table(
+    sortedRooms.map((r, i) => ({
+      floor: floorKey,
+      idx: i,
+      code: r.code3,
+      zone: zoneMap.get(r.code3),
+    }))
+  );
+  console.log(
+    `[Forge] ${floorKey} theming -> 一般:${countGeneral} | 氧氣:${countO2} | total:${
+      sortedRooms.length
+    } | chosen=${[...chosen].join(",")}`
+  );
+
   viewer.impl.invalidate(true, true, true);
 }
 
-// ====== 床號序列（避開數字 4） ======
-function hasDigit4(n) {
-  return n.toString().includes("4");
+/* ---------------------- Sprites 顏色規則 ---------------------- */
+function spriteColorBy(status, gender) {
+  // 在院內：依性別著色；不在院內(含空床/住院/請假)：白色
+  if (status === "occupied") return gender === "男" ? BRAND_GREEN : BRAND_RED;
+  return BRAND_WHITE;
 }
-function generateBedNumbers(count, start = 1001) {
-  const out = [];
-  let n = start;
-  while (out.length < count) {
-    if (!hasDigit4(n)) out.push(n);
-    n++;
-  }
-  return out;
-}
-const BED_SERIES_ALL = generateBedNumbers(8, 1001);
-const BED_SERIES_BY_FLOOR = {
-  "2F": BED_SERIES_ALL.slice(0, 6),
-  "1F": BED_SERIES_ALL.slice(6, 8),
-};
-
-// ====== 假資料 / 權重工具 ======
-function seededRand(seed) {
-  const s = Math.sin(seed * 9301 + 49297) * 233280;
-  return s - Math.floor(s);
-}
-function pick(arr, seed) {
-  return arr[Math.floor(seededRand(seed) * arr.length)];
-}
-function ageFromSeed(seed) {
-  return 65 + Math.floor(seededRand(seed + 7) * 31);
-} // 65~95
-function startDateFromSeed(seed) {
-  const now = new Date();
-  const daysAgo = 30 + Math.floor(seededRand(seed + 13) * 365); // 1~12 個月內
-  const d = new Date(now.getTime() - daysAgo * 86400000);
-  const mm = String(d.getMonth() + 1).padStart(2, "0");
-  const dd = String(d.getDate()).padStart(2, "0");
-  return `${d.getFullYear()}/${mm}/${dd}`;
+function labelDotColor(L) {
+  const s = L?.data?.status;
+  const g = L?.data?.residentsSex;
+  if (s === "occupied") return g === "男" ? BRAND_GREEN : BRAND_RED;
+  // 空床 / 住院中 / 請假中 → 灰色 dot
+  return BRAND_GRAY;
 }
 
-const NAME_POOL = [
-  "王雅雯",
-  "陳志明",
-  "林冠廷",
-  "張淑芬",
-  "黃子涵",
-  "李建宏",
-  "吳佩珊",
-  "周育賢",
-  "趙雅筑",
-  "許庭瑋",
-  "郭怡君",
-  "洪嘉文",
-];
-const HEALTH_POOL = ["一般", "良好", "需觀察", "虛弱"];
-const MEDICATION_POOL = ["規律服藥", "偶爾忘記", "暫停服藥", "需家屬協助"];
-const SPECIAL_POOL = ["-"];
-const NOTE_POOL = ["-", "對花生過敏", "家屬每週三探視", "夜間需加護理巡房"];
-const SEX_POOL = ["男", "女"];
-
-function pickAreaLetter(seed) {
-  const r = seededRand(seed);
-  if (r < 0.4) return "A";
-  return "B";
-}
-
-// ====== 樓層顯示 / Sprites 建立 ======
-
-// 1) 小工具：取某個容器底下的所有 leaf dbIds
+/* ---------------------- 樓層顯示（隔離） ---------------------- */
 function collectLeafsUnder(model, rootDbId) {
   const tree = model.getInstanceTree();
   const leafs = [];
@@ -801,8 +1146,6 @@ function collectLeafsUnder(model, rootDbId) {
   walk(rootDbId);
   return leafs.length ? leafs : [rootDbId];
 }
-
-// 2) 小工具：整個模型的所有 leaf（保險用：hide 其他）
 function allLeafIds(model) {
   const tree = model.getInstanceTree();
   const root = tree.getRootId();
@@ -815,13 +1158,8 @@ function allLeafIds(model) {
   walk(root);
   return out;
 }
-
-// 3) 取代舊版的 showLevel：同時支援 aggregate / 單模型，並有 hide-rest 保險
 async function showLevel(levelKey) {
   if (!viewer || !viewer.model) return;
-
-  if (!viewer || !viewer.model) return;
-
   const levelDbId = FLOOR_DBIDS[levelKey];
   if (levelDbId == null) {
     console.warn(`[Forge] 找不到樓層 '${levelKey}' 對應的 dbId，改為顯示全景`);
@@ -830,24 +1168,13 @@ async function showLevel(levelKey) {
     viewer.impl.invalidate(true);
     return;
   }
-
-  // A. 收集該樓層容器底下所有葉節點
   const ids = collectLeafsUnder(viewer.model, levelDbId);
-  console.log(
-    `[Forge] ${levelKey} 根節點 dbId=${levelDbId}，leaf 數：`,
-    ids.length
-  );
-
-  // 先取消舊狀態，避免交織
   viewer.showAll();
-
-  // B. 優先用 aggregate API（彙整模型較穩）
   try {
     if (typeof viewer.setAggregateIsolation === "function") {
       viewer.setAggregateIsolation([{ model: viewer.model, ids }]);
       viewer.fitToView?.(ids, viewer.model);
     } else {
-      // 傳統單模型 isolate
       viewer.isolate(ids, viewer.model);
       viewer.fitToView?.(ids, viewer.model);
     }
@@ -855,30 +1182,106 @@ async function showLevel(levelKey) {
     viewer.impl.invalidate(true);
   } catch (e) {
     console.warn("[Forge] aggregate isolate 失敗，改用 hide-rest 方案", e);
-
-    // C. 保險：把不屬於該樓層的全部隱藏
     const all = new Set(allLeafIds(viewer.model));
     ids.forEach((id) => all.delete(id));
     const toHide = Array.from(all);
-
     viewer.showAll();
     toHide.forEach((id) => viewer.hide(id));
     viewer.fitToView?.(ids, viewer.model);
     viewer.setGhosting(false);
     viewer.impl.invalidate(true);
   }
-
-  // D. 除錯觀察目前隔離狀態（可留著）
-  try {
-    const vm = viewer.impl?.visibilityManager;
-    const curIso = vm?.getIsolatedNodes?.();
-    console.log(
-      "[Forge] 目前 isolated nodes（可能為空＝使用 hide-rest 模式）：",
-      curIso
-    );
-  } catch {}
 }
 
+/* ---------------------- 假資料生成 ---------------------- */
+function seededRand(seed) {
+  const s = Math.sin(seed * 9301 + 49297) * 233280;
+  return s - Math.floor(s);
+}
+function pick(arr, seed) {
+  return arr[Math.floor(seededRand(seed) * arr.length)];
+}
+function ageFromSeed(seed) {
+  return 65 + Math.floor(seededRand(seed + 7) * 31);
+}
+function startDateFromSeed(seed) {
+  const now = new Date();
+  const daysAgo = 30 + Math.floor(seededRand(seed + 13) * 365);
+  const d = new Date(now.getTime() - daysAgo * 86400000);
+  const mm = String(d.getMonth() + 1).padStart(2, "0");
+  const dd = String(d.getDate()).padStart(2, "0");
+  return `${d.getFullYear()}/${mm}/${dd}`;
+}
+
+const NAME_POOL_MALE = [
+  "王建中",
+  "張家豪",
+  "劉俊傑",
+  "黃柏翰",
+  "吳宗翰",
+  "蔡宗倫",
+  "楊偉傑",
+  "何彥廷",
+  "邱柏宇",
+  "鄭智凱",
+  "陳志明",
+  "林冠廷",
+  "李建宏",
+  "周育賢",
+  "許庭瑋",
+  "郭子豪",
+  "曾博翔",
+  "簡志豪",
+  "蘇冠宇",
+  "謝承翰",
+  "羅庭瑋",
+  "傅宥辰",
+  "潘柏睿",
+  "洪偉倫",
+];
+
+const NAME_POOL_FEMALE = [
+  "王雅雯",
+  "張淑芬",
+  "黃子涵",
+  "吳佩珊",
+  "趙雅筑",
+  "郭怡君",
+  "洪嘉文",
+  "陳怡君",
+  "林怡婷",
+  "李佳穎",
+  "周品萱",
+  "徐庭瑄",
+  "鄭雅婷",
+  "劉郁涵",
+  "楊靜怡",
+  "許淑華",
+  "蔡佩玲",
+  "何依婷",
+  "邱雅筑",
+  "曾婉婷",
+  "簡詩涵",
+  "謝采靈",
+  "羅琬淳",
+  "潘俞安",
+];
+
+const HEALTH_POOL = ["一般", "良好", "需觀察", "虛弱"];
+const MEDICATION_POOL = ["規律服藥", "偶爾忘記", "暫停服藥", "需家屬協助"];
+const NOTE_POOL = ["-", "對花生過敏", "家屬每週三探視", "夜間需加護理巡房"];
+
+// 依種子回傳床位狀態（可調整機率）
+function bedStatusFromSeed(seed) {
+  const r = seededRand(seed + 17);
+  // 分佈：佔床 62%｜住院 10%｜請假 8%｜空床 20%
+  if (r < 0.62) return "occupied";
+  if (r < 0.72) return "hospitalized";
+  if (r < 0.8) return "leave";
+  return "vacant";
+}
+
+/* ---------------------- 依樓層建立 sprites（佔床=性別色；不在院內=白） ---------------------- */
 async function rebuildSpritesForFloor(floorKey) {
   const THREE = getThree();
   const floorRootId = FLOOR_DBIDS[floorKey];
@@ -889,25 +1292,17 @@ async function rebuildSpritesForFloor(floorKey) {
     return;
   }
 
-  // 1) 只在【當層子樹】找「【崇恩護家】床位(20)」
+  // 1) 收集此層「所有房」並決定性別（平均對半）
+  const ROOMS = collectRoomsForFloor(viewer.model, floorKey, floorRootId);
+
+  // 2) 找「【崇恩護家】床位」群組，再拉出每一張床
   const BED_GROUP_KEYWORD = "【崇恩護家】床位";
   const bedGroupIds = collectDbIdsByNameUnder(
     viewer.model,
     floorRootId,
     BED_GROUP_KEYWORD
   );
-  if (!bedGroupIds.length) {
-    console.warn(`[Forge] ${floorKey} 找不到「${BED_GROUP_KEYWORD}」節點`);
-    __staticDevices.length = 0;
-    await createSprites();
-    return;
-  }
 
-  // 2) 當層的 z 範圍（保險：過濾誤撈到其他樓層）
-  const floorBox = getNodeWorldBounds(viewer.model, floorRootId);
-
-  // 3) 以「床位群組的直屬子節點」作為「一張床」
-  //    若直屬子節點沒有幾何，再往下一層找一次。
   let bedNodes = [];
   bedGroupIds.forEach((groupId) => {
     const children = getDirectChildren(viewer.model, groupId);
@@ -917,7 +1312,6 @@ async function rebuildSpritesForFloor(floorKey) {
     if (directBeds.length) {
       bedNodes.push(...directBeds);
     } else {
-      // 直屬沒有幾何 → 取孫節點中有幾何的
       children.forEach((cId) => {
         const grand = getDirectChildren(viewer.model, cId);
         bedNodes.push(
@@ -926,70 +1320,94 @@ async function rebuildSpritesForFloor(floorKey) {
       });
     }
   });
-
-  // 去重（保險）
   bedNodes = Array.from(new Set(bedNodes));
 
+  const floorBox = getNodeWorldBounds(viewer.model, floorRootId);
+
   __staticDevices.length = 0;
+  let globalIndex = 0;
 
-  bedNodes.forEach((dbId, i) => {
-    const box = getNodeWorldBounds(viewer.model, dbId);
-    if (box.isEmpty()) return;
+  for (const dbId of bedNodes) {
+    const bedBox = getNodeWorldBounds(viewer.model, dbId);
+    if (bedBox.isEmpty()) continue;
 
-    // 中心點
-    const center = new THREE.Vector3();
-    box.getCenter(center);
+    const c = new (getThree().Vector3)();
+    bedBox.getCenter(c);
+    const zOk = c.z >= floorBox.min.z - 0.5 && c.z <= floorBox.max.z + 0.5;
+    if (!zOk) continue;
 
-    // —— 只允許中心 z 落在「本樓層高度」內（上下 0.5 容差）——
-    const zOk =
-      center.z >= floorBox.min.z - 0.5 && center.z <= floorBox.max.z + 0.5;
-    if (!zOk) return;
+    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);
 
-    // 稍微上抬，避免吃到幾何（依床自身高度給 20% 或至少 0.25）
-    const lift = Math.max(0.25, (box.max.z - box.min.z) * 0.2);
-    center.z = box.max.z + lift;
+    // 用床的 box 對到房；若失敗，用交錯 fallback，避免全回同色
+    const roomMatch = resolveRoomByBox(ROOMS, bedBox);
+    const fallbackGen = globalIndex % 2 === 0 ? "男" : "女";
+    const roomGender = roomMatch?.gender ?? fallbackGen;
+    const roomLabel = roomMatch?.name ?? "?";
 
-    // 唯一 sprite id（依樓層分段）
-    const spriteDbId = (floorKey === "1F" ? 91000 : 92000) + i;
+    // 四態：occupied / hospitalized / leave / vacant
+    const spriteDbId = (floorKey === "1F" ? 91100 : 92100) + globalIndex++;
+    const status = bedStatusFromSeed(spriteDbId);
+
+    const hasResident = status !== "vacant"; // 住院/請假仍有住民資訊
+    const color = spriteColorBy(status, roomGender);
+
+    // 假資料（有住民才生成）
+    const namePool = roomGender === "男" ? NAME_POOL_MALE : NAME_POOL_FEMALE;
+    const residentsName = hasResident ? pick(namePool, spriteDbId) : "-";
+    const residentsAge = hasResident ? ageFromSeed(spriteDbId) : "-";
+    const startTime = hasResident ? startDateFromSeed(spriteDbId) : "-";
+    const healthStatus = hasResident ? pick(HEALTH_POOL, spriteDbId + 5) : "-";
+    const medicationStatus = hasResident
+      ? pick(MEDICATION_POOL, spriteDbId + 6)
+      : "-";
+    const note = hasResident ? pick(NOTE_POOL, spriteDbId + 8) : "-";
+
+    const zone =
+      getZoneForRoom(floorKey, roomMatch?.code3 ?? roomCodeOf(roomLabel)) ??
+      null;
 
     __staticDevices.push({
-      name: `床位 ${i + 1}`,
-      forge_dbid: floorRootId, // 綁樓層即可（fitToView/隔離穩定）；若要 fit 到單床可另存 anchorDbId: dbId
+      name: `床號 ${roomLabel}`,
+      forge_dbid: floorRootId,
       spriteDbId,
-      device_coordinate_3d: { x: center.x, y: center.y, z: center.z },
-      device_normal_color: BRAND_GREEN,
-      device_close_color: BRAND_RED,
-      // 以下是假資料，你可以換成真實狀態
-      state: i % 3 === 0 ? "offnormal" : "normal",
-      special: false,
-      residentsName: pick(NAME_POOL, spriteDbId),
-      residentsSex: pick(SEX_POOL, spriteDbId + 1),
-      residentsAge: ageFromSeed(spriteDbId + 2),
-      startTime: startDateFromSeed(spriteDbId + 3),
-      healthStatus: pick(HEALTH_POOL, spriteDbId + 5),
-      medicationStatus: pick(MEDICATION_POOL, spriteDbId + 6),
-      specialEvent: "-",
-      note: "-",
-    });
-  });
+      device_coordinate_3d: { x: pos.x, y: pos.y, z: pos.z },
+      device_normal_color: color,
+      device_close_color: color,
+      status, // "occupied" | "hospitalized" | "leave" | "vacant"
 
-  await createSprites(); // 清舊加新 → 一床一顆
+      // 房間性別（不論是否有住民都存在）
+      roomGender: roomGender,
+
+      // 住民資料（vacant 時維持 "-"）
+      residentsName,
+      residentsSex: hasResident ? roomGender : "-",
+      residentsAge,
+      startTime,
+      healthStatus,
+      medicationStatus,
+      specialEvent:
+        status === "hospitalized"
+          ? "住院中"
+          : status === "leave"
+          ? "請假中"
+          : "-",
+      note,
+      zone,
+    });
+  }
+
+  await createSprites(); // 每張床都有 sprite；不在院內者＝白色
 }
 
-// ====== Popover（常駐在每顆 sprite 上方） ======
-const labels = ref([]); // [{ id, x, y, data }]
+/* ---------------------- Popover（跟相機更新） ---------------------- */
+const labels = ref([]);
 let camEvtCleanup = null;
 
-const activeLabelId = ref(null);
-function bringToFrontById(id) {
-  activeLabelId.value = id;
-}
-
 function worldToScreen(pos3) {
-  const p = viewer.worldToClient(pos3); // 相對於 viewer 容器的座標
+  const p = viewer.worldToClient(pos3);
   return { x: p.x, y: p.y };
 }
-
 function rebuildLabelsForCurrentFloor() {
   labels.value = __staticDevices.map((d) => {
     const { x, y } = worldToScreen(
@@ -999,15 +1417,9 @@ function rebuildLabelsForCurrentFloor() {
         d.device_coordinate_3d.z
       )
     );
-    return {
-      id: d.spriteDbId,
-      x,
-      y,
-      data: d,
-    };
+    return { id: d.spriteDbId, x, y, data: d };
   });
 }
-
 function updateLabelPositions() {
   if (!labels.value.length) return;
   labels.value = labels.value.map((L) => {
@@ -1021,9 +1433,8 @@ function updateLabelPositions() {
     return { ...L, x, y };
   });
 }
-
 function attachCameraEventsForLabels() {
-  camEvtCleanup?.(); // 先清掉舊的
+  camEvtCleanup?.();
   const onUpdate = () => requestAnimationFrame(updateLabelPositions);
   viewer.addEventListener(Autodesk.Viewing.CAMERA_CHANGE_EVENT, onUpdate);
   viewer.addEventListener(Autodesk.Viewing.RENDER_PRESENTED_EVENT, onUpdate);
@@ -1037,7 +1448,6 @@ function attachCameraEventsForLabels() {
     viewer.removeEventListener(Autodesk.Viewing.VIEWER_RESIZE_EVENT, onUpdate);
   };
 }
-
 function rebuildLabelsAfterNextRender() {
   const once = () => {
     rebuildLabelsForCurrentFloor();
@@ -1047,7 +1457,7 @@ function rebuildLabelsAfterNextRender() {
   viewer.addEventListener(Autodesk.Viewing.RENDER_PRESENTED_EVENT, once);
 }
 
-// ====== 分區切換（多選｜預設不選＝顯示全部） ======
+/* ---------------------- 分區選擇（多選） ---------------------- */
 const zones = ["一般", "氧氣"];
 const selectedZones = ref(new Set());
 const toggleZone = (zone) => {
@@ -1059,65 +1469,82 @@ const toggleZone = (zone) => {
 };
 const isZoneSelected = (zone) => selectedZones.value.has(zone);
 
-// ====== 床位資訊選單 / 顯示控制 ======
-const soloSpriteId = ref(null); // 單獨顯示：被點擊 sprite 的 id（null 表全域/多顯示模式）
+/* ---------------------- 床位資訊 選單（只影響 Popover，不影響 sprites） ---------------------- */
+const soloSpriteId = ref(null);
 const infoOptions = [
   { label: "無顯示", value: "none" },
   { label: "有住民", value: "occupied" },
   { label: "空床", value: "vacant" },
   { label: "住院中", value: "hospitalized" },
-  { label: "請假中", value: "leave" }, // ← 新增
+  { label: "請假中", value: "leave" },
 ];
 const infoOpen = ref(false);
-const selectedInfo = ref(infoOptions[0].value); // 'none'
+const selectedInfo = ref(infoOptions[0].value);
+
+const getFloorBtnClass = (val) => {
+  const isActive = activeFloor.value === val;
+  return [
+    // 共同樣式（不含固定 hover）
+    "px-6 py-2 rounded-md",
+    // 依狀態切換底色
+    isActive ? "bg-brand-green-light" : "bg-white",
+    // 依狀態切換 hover 顏色
+    isActive ? "hover:bg-brand-green-light" : "hover:bg-gray-100",
+  ];
+};
+
+const getInfoBtnClass = (val) => {
+  const isActive = selectedInfo.value === val;
+  return [
+    // 共同樣式（不含 hover，避免與動態 hover 類別打架）
+    "inline-flex items-center gap-2 px-4 py-3 rounded-md",
+    // 依狀態切換底色/透明度
+    isActive ? "bg-brand-green-light bg-opacity-50" : "bg-white",
+    // 依狀態切換 hover 顏色（此處避免固定放 hover:bg-gray-100）
+    isActive
+      ? "hover:bg-brand-green-light hover:bg-opacity-50"
+      : "hover:bg-gray-100",
+  ];
+};
+
+const getZoneBtnClass = (zone) => {
+  const isActive = isZoneSelected(zone);
+  return [
+    // 共同樣式（不含固定 hover，避免撞到動態 hover）
+    "px-4 py-2 rounded-md",
+    // 依狀態切換底色/透明度
+    isActive ? "bg-brand-green-light bg-opacity-50" : "bg-white",
+    // 依狀態切換 hover 類別
+    isActive
+      ? "hover:bg-brand-green-light hover:bg-opacity-50"
+      : "hover:bg-gray-100",
+  ];
+};
 
 const filteredLabels = computed(() => {
-  // 單獨顯示模式
   if (soloSpriteId.value != null) {
-    if (selectedInfo.value === "none" || selectedInfo.value === "leave")
-      return [];
-    return labels.value.filter((L) => L.id === soloSpriteId.value);
+    if (selectedInfo.value === "none") return [];
+    const L = labels.value.find((L) => L.id === soloSpriteId.value);
+    if (!L) return [];
+    return selectedInfo.value === L.data.status ? [L] : [];
   }
-
-  // none / leave = 全隱
-  if (selectedInfo.value === "none" || selectedInfo.value === "leave") {
-    return [];
-  }
-
-  const info = selectedInfo.value; // 'occupied' | 'vacant' | 'hospitalized'
-  const selectedSet = selectedZones.value; // Set
-
+  if (selectedInfo.value === "none") return [];
+  const selectedSet = selectedZones.value;
   return labels.value.filter((L) => {
-    // ===== 分區多選判斷 =====
     const inZone =
       selectedSet.size === 0
         ? true
         : L.data?.zone
         ? selectedSet.has(L.data.zone)
         : true;
-
-    // ===== 燈號狀態判斷 =====
-    const isRed = L.data.state === "offnormal";
-    const isHosp = isRed && !!L.data.special; // 住院中：紅 + special
-    const isGreen = !isRed && !L.data.special; // 有住民：綠
-
-    let stateOk = true;
-    if (info === "occupied") stateOk = isGreen;
-    if (info === "vacant") stateOk = isRed; // 空床 = 只要是紅色，都包含（含住院）
-    if (info === "hospitalized") stateOk = isHosp;
-
-    return inZone && stateOk;
+    return inZone && L.data.status === selectedInfo.value;
   });
 });
-
-const isVacantWithoutSpecial = (L) =>
-  L?.data?.state === "offnormal" && !L?.data?.special;
+const isVacantWithoutSpecial = (L) => L?.data?.status === "vacant";
 
 const emit = defineEmits(["change"]);
 const selectInfo = (opt) => {
-  // 切換全域顯示 → 關閉單獨顯示
   soloSpriteId.value = null;
-
   selectedInfo.value = opt.value;
   infoOpen.value = false;
   emit("change", opt.value);
@@ -1125,7 +1552,6 @@ const selectInfo = (opt) => {
 
 const infoTriggerRef = ref(null);
 const infoPanelRef = ref(null);
-
 const onClickOutsideInfo = (e) => {
   const t = e.target;
   if (!infoTriggerRef.value || !infoPanelRef.value) return;
@@ -1133,32 +1559,28 @@ const onClickOutsideInfo = (e) => {
   const insidePanel = infoPanelRef.value.contains(t);
   if (!insideTrigger && !insidePanel) infoOpen.value = false;
 };
-
 const onKeydownInfo = (e) => {
   if (e.key === "Escape") infoOpen.value = false;
 };
 
-// ====== 套用樓層 / 切換 ======
+/* ---------------------- 套用樓層/切換 ---------------------- */
 async function applyFloor(next) {
-  // 進新樓層前清空單獨顯示
   soloSpriteId.value = null;
-
   activeFloor.value = next;
   localStorage.setItem("uark-floor", next);
   await showLevel(next);
-  await rebuildSpritesForFloor(next); // 只畫當前樓層的 sprites
-  viewer.impl.invalidate(true); // 強制要求一個新幀
-  rebuildLabelsAfterNextRender(); // 等下一次渲染完成再對齊 labels
+  await rebuildSpritesForFloor(next);
+  viewer.impl.invalidate(true);
+  rebuildLabelsAfterNextRender();
   rebuildZoneThemingForCurrentFloor();
 }
-
 async function onClickFloor(next) {
   if (next === activeFloor.value) return;
   if (!viewerReady.value) return;
   await applyFloor(next);
 }
 
-// ====== 生命週期 ======
+/* ---------------------- 生命週期 ---------------------- */
 onMounted(async () => {
   activeFloor.value = resolveInitialFloor();
 
@@ -1167,18 +1589,13 @@ onMounted(async () => {
   await waitObjectTree(model);
   hideViewCubeAndHome();
 
-  // 讓 DataVisualization 綁定這個 viewer
   await dvInit(viewer);
-
-  // ←← 新增：等樹完成後，用名稱抓出正確的 1F/2F 節點 dbId
   resolveFloorDbIdsFromTree(model);
 
-  // 綁定 sprite 點擊
   unbindSpriteClick = forgeClickListener(async ({ data }) => {
     soloSpriteId.value =
       soloSpriteId.value === data.spriteDbId ? null : data.spriteDbId;
     bringToFrontById(data.spriteDbId);
-
     await cardfitToView({
       forge_dbid: data.forge_dbid,
       spriteDbId: data.spriteDbId,
@@ -1187,28 +1604,22 @@ onMounted(async () => {
   });
   attachCameraEventsForLabels();
 
-  // 這裡才套用樓層（此時 FLOOR_DBIDS 已填好）
   await applyFloor("1F");
   viewerReady.value = true;
 });
-
 onMounted(() => {
   document.addEventListener("click", onClickOutsideInfo);
   document.addEventListener("keydown", onKeydownInfo);
 });
-
 watch(
   () => route.query?.floor,
   async (v) => {
     if (!viewerReady.value) return;
     const q = (v || "").toString().toUpperCase();
-    if (q === "1F" || q === "2F") {
-      await applyFloor(q);
-    }
+    if (q === "1F" || q === "2F") await applyFloor(q);
     attachCameraEventsForLabels();
   }
 );
-
 onUnmounted(() => {
   try {
     clearOurTheming(viewer.model);
@@ -1220,7 +1631,6 @@ onUnmounted(() => {
   try {
     clearSprites();
   } catch {}
-
   if (viewer) {
     try {
       const ext = viewer.getExtension?.("Autodesk.DataVisualization");
@@ -1231,11 +1641,11 @@ onUnmounted(() => {
     viewer.finish?.();
     viewer = null;
   }
-
   document.removeEventListener("click", onClickOutsideInfo);
   document.removeEventListener("keydown", onKeydownInfo);
 });
 </script>
+
 <style>
 .adsk-viewing-viewer {
   background-color: transparent !important;
diff --git a/src/components/forge/ForgeBackUp.vue b/src/components/forge/ForgeBackUp.vue
deleted file mode 100644
index 9b41038..0000000
--- a/src/components/forge/ForgeBackUp.vue
+++ /dev/null
@@ -1,893 +0,0 @@
-<template>
-  <div class="relative w-full h-full min-h-full">
-    <div id="forge-preview" ref="forgeDom" class="absolute inset-0"></div>
-    <!-- Popovers：永遠顯示在每顆 sprite 上方（跟著相機更新） -->
-    <div class="absolute inset-0 z-20 pointer-events-none opacity-90">
-      <div
-        v-for="L in filteredLabels"
-        :key="L.id"
-        class="absolute -translate-x-1/2 -translate-y-full cursor-pointer"
-        :style="{
-          left: L.x + 'px',
-          top: L.y - 10 + 'px',
-          zIndex: activeLabelId === L.id ? 40 : 30,
-        }"
-        @click="bringToFrontById(L.id)"
-      >
-        <div
-          class="pointer-events-auto relative bg-white/95 border border-gray-300 rounded-md shadow px-3 py-2 text-sm cursor-pointer"
-          style="will-change: transform"
-          @click.stop="openResidentModal(L, $event)"
-          role="button"
-          tabindex="0"
-          @keydown.enter.prevent.stop="openResidentModal(L, $event)"
-          @keydown.space.prevent.stop="openResidentModal(L, $event)"
-          aria-label="查看 {{ L.data.name }} 詳細資訊"
-        >
-          <!-- 箭頭（下方置中，指向 sprite）  -->
-          <!-- 外層（邊框色） -->
-          <span
-            class="absolute left-1/2 -bottom-2 -translate-x-1/2 w-0 h-0 border-x-8 border-x-transparent border-t-8 border-t-white"
-            aria-hidden="true"
-          ></span>
-          <ul class="list-none">
-            <!-- 第一行：床號永遠顯示 -->
-            <li class="flex justify-between items-center gap-1">
-              <div>
-                <span
-                  class="inline-block w-2 h-2 rounded-full mr-1 align-middle"
-                  :style="{
-                    backgroundColor:
-                      L.data.state === 'offnormal' ? BRAND_RED : BRAND_GREEN,
-                  }"
-                ></span>
-
-                <!-- 住院中才顯示黃色 icon -->
-                <span
-                  v-if="L.data.special"
-                  class="w-2 h-2 text-brand-yellow-dark inline-block align-middle me-2"
-                >
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="10"
-                    height="10"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      fill="currentColor"
-                      d="M12 1.67a2.91 2.91 0 0 0-2.492 1.403L1.398 16.61a2.914 2.914 0 0 0 2.484 4.385h16.225a2.914 2.914 0 0 0 2.503-4.371L14.494 3.078A2.92 2.92 0 0 0 12 1.67"
-                    />
-                  </svg>
-                </span>
-
-                <!-- 床號：永遠顯示 -->
-                <span class="align-middle">{{ L.data.name }}</span>
-              </div>
-              <!-- 眼睛 icon -->
-              <div class="text-gray-400" title="查看詳細">
-                <span>
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="12"
-                    height="12"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      fill="currentColor"
-                      d="M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5"
-                    />
-                  </svg>
-                </span>
-              </div>
-            </li>
-
-            <!-- 第二行：住民基本資料 -->
-            <li>
-              {{
-                isVacantWithoutSpecial(L)
-                  ? "-"
-                  : `${L.data.residentsName}｜${L.data.residentsSex}｜${L.data.residentsAge}`
-              }}
-            </li>
-
-            <!-- 第三行：入住日期 -->
-            <li>
-              {{
-                isVacantWithoutSpecial(L)
-                  ? "-"
-                  : `入住日期：${L.data.startTime}`
-              }}
-            </li>
-          </ul>
-        </div>
-      </div>
-    </div>
-
-    <!-- 樓層切換 -->
-    <div
-      class="absolute top-4 left-4 text-sm flex justify-center items-center gap-2 z-10 bg-white border rounded-md shadow"
-    >
-      <p class="ps-4 py-2">樓層｜</p>
-
-      <button
-        class="px-4 py-2 rounded-md"
-        :class="activeFloor === '9F' ? 'bg-brand-green-light' : 'bg-white'"
-        @click="onClickFloor('9F')"
-        aria-pressed="activeFloor==='9F'"
-      >
-        1F
-      </button>
-      <button
-        class="px-4 py-2 rounded-md hover:bg-gray-100"
-        :class="activeFloor === '8F' ? 'bg-brand-green-light' : 'bg-white'"
-        @click="onClickFloor('8F')"
-        aria-pressed="activeFloor==='8F'"
-      >
-        2F
-      </button>
-    </div>
-
-    <!-- 床位資訊-->
-    <div
-      class="absolute top-16 left-4 text-sm flex justify-center items-center z-10 bg-white border rounded-md shadow ps-4"
-    >
-      <p class="py-2">床位資訊｜</p>
-
-      <div class="flex justify-start items-center">
-        <!-- 無顯示 -->
-        <button
-          class="flex items-center gap-2 px-4 py-2 rounded-md hover:bg-gray-100"
-          :class="
-            selectedInfo === 'none' ? 'bg-brand-green-light bg-opacity-50' : ''
-          "
-          @click="selectInfo({ label: '無顯示', value: 'none' })"
-          :aria-pressed="selectedInfo === 'none'"
-        >
-          <span>不顯示</span>
-        </button>
-
-        <!-- 有住民（綠） -->
-        <button
-          class="flex items-center gap-2 px-4 py-2 rounded-md hover:bg-gray-100"
-          :class="
-            selectedInfo === 'occupied'
-              ? 'bg-brand-green-light bg-opacity-50'
-              : ''
-          "
-          @click="selectInfo({ label: '有住民', value: 'occupied' })"
-          :aria-pressed="selectedInfo === 'occupied'"
-        >
-          <span class="w-2 h-2 bg-brand-green rounded-full inline-block"></span>
-          <span>有住民</span>
-        </button>
-
-        <!-- 空床（紅） -->
-        <button
-          class="flex items-center gap-2 px-4 py-2 rounded-md hover:bg-gray-100"
-          :class="
-            selectedInfo === 'vacant'
-              ? 'bg-brand-green-light bg-opacity-50'
-              : ''
-          "
-          @click="selectInfo({ label: '空床', value: 'vacant' })"
-          :aria-pressed="selectedInfo === 'vacant'"
-        >
-          <span class="w-2 h-2 bg-brand-red rounded-full inline-block"></span>
-          <span>空床</span>
-        </button>
-
-        <!-- 住院中（紅 + 黃色警示） -->
-        <button
-          class="flex items-center gap-2 px-4 py-2 rounded-md hover:bg-gray-100"
-          :class="
-            selectedInfo === 'hospitalized'
-              ? 'bg-brand-green-light bg-opacity-50'
-              : ''
-          "
-          @click="selectInfo({ label: '住院中', value: 'hospitalized' })"
-          :aria-pressed="selectedInfo === 'hospitalized'"
-        >
-          <span class="w-2 h-2 text-brand-yellow-dark inline-block">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="10"
-              height="10"
-              viewBox="0 0 24 24"
-            >
-              <path
-                fill="currentColor"
-                d="M12 1.67a2.91 2.91 0 0 0-2.492 1.403L1.398 16.61a2.914 2.914 0 0 0 2.484 4.385h16.225a2.914 2.914 0 0 0 2.503-4.371L14.494 3.078A2.92 2.92 0 0 0 12 1.67"
-              />
-            </svg>
-          </span>
-          <span>住院中</span>
-        </button>
-
-        <!-- 請假中（灰） -->
-        <button
-          class="flex items-center gap-2 px-4 py-2 rounded-md hover:bg-gray-100"
-          :class="
-            selectedInfo === 'leave' ? 'bg-brand-green-light bg-opacity-50' : ''
-          "
-          @click="selectInfo({ label: '請假中', value: 'leave' })"
-          :aria-pressed="selectedInfo === 'leave'"
-        >
-          <span class="w-2 h-2 text-gray-400 inline-block">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="10"
-              height="10"
-              viewBox="0 0 24 24"
-            >
-              <path
-                fill="currentColor"
-                d="M12 1.67a2.91 2.91 0 0 0-2.492 1.403L1.398 16.61a2.914 2.914 0 0 0 2.484 4.385h16.225a2.914 2.914 0 0 0 2.503-4.371L14.494 3.078A2.92 2.92 0 0 0 12 1.67"
-              />
-            </svg>
-          </span>
-          <span>請假中</span>
-        </button>
-      </div>
-    </div>
-
-    <!-- 分區切換（多選｜預設不選＝顯示全部） -->
-    <div
-      class="absolute bottom-4 left-4 text-sm flex justify-center items-center gap-2 z-10 bg-white border rounded-md shadow"
-    >
-      <p class="ps-4 py-2">查看分區｜</p>
-
-      <button
-        v-for="zone in zones"
-        :key="zone"
-        class="px-4 py-2 rounded-md hover:bg-gray-100"
-        :class="
-          isZoneSelected(zone)
-            ? 'bg-brand-green-light bg-opacity-50'
-            : 'bg-white'
-        "
-        @click="toggleZone(zone)"
-        :aria-pressed="isZoneSelected(zone)"
-      >
-        {{ zone }}
-      </button>
-    </div>
-  </div>
-
-  <!-- 中央 Modal：病患資訊 -->
-  <div
-    v-if="modalOpen"
-    class="fixed inset-0 z-[120] flex items-center justify-center"
-    role="dialog"
-    aria-modal="true"
-  >
-    <!-- 背景遮罩 -->
-    <div class="absolute inset-0 bg-black/40" @click="closeResidentModal"></div>
-
-    <!-- Modal 內容 -->
-    <div
-      class="relative z-[130] w-[min(92vw,500px)] max-h-[84vh] overflow-auto bg-white rounded-2xl shadow-xl p-6"
-      @click.stop
-    >
-      <!-- 標題 -->
-      <div class="flex items-center justify-between mb-4">
-        <h3 class="text-lg font-semibold tracking-widest">病患資訊</h3>
-        <button
-          class="px-3 py-1 rounded-md hover:bg-gray-100"
-          @click="closeResidentModal"
-          aria-label="關閉"
-        >
-          ✕
-        </button>
-      </div>
-
-      <!-- 內容清單 -->
-      <ul class="list-none text-sm space-y-2">
-        <li><span class="text-gray-500">姓名：</span>{{ modalData?.name }}</li>
-        <li><span class="text-gray-500">性別：</span>{{ modalData?.sex }}</li>
-        <li><span class="text-gray-500">年齡：</span>{{ modalData?.age }}</li>
-        <li>
-          <span class="text-gray-500">入住日期：</span
-          >{{ modalData?.startTime }}
-        </li>
-        <li>
-          <span class="text-gray-500">身體狀況：</span
-          >{{ modalData?.healthStatus }}
-        </li>
-        <li>
-          <span class="text-gray-500">服藥狀況：</span
-          >{{ modalData?.medicationStatus }}
-        </li>
-        <li>
-          <span class="text-gray-500">特殊事件：</span
-          >{{ modalData?.specialEvent }}
-        </li>
-        <li class="whitespace-pre-wrap break-words">
-          <span class="text-gray-500">備註：</span>{{ modalData?.note }}
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, onUnmounted, watch } from "vue";
-import { useRoute } from "vue-router";
-import useForgeSprite from "@/hooks/forge/useForgeSprite";
-
-// ====== 基本變數 / 注入 ======
-const route = useRoute();
-const forgeDom = ref(null);
-let viewer = null;
-const viewerReady = ref(false);
-const activeFloor = ref("9F"); // 預設 9F
-
-let unbindSpriteClick = null;
-let THREE = null;
-
-const {
-  updateDataVisualization: dvInit,
-  createSprites,
-  forgeClickListener,
-  cardfitToView,
-  clear: clearSprites,
-  __staticDevices, // 用來塞模擬資料
-} = useForgeSprite();
-
-// ====== 常數（樓層 / 顏色 / 模型路徑） ======
-const FLOOR_DBIDS = { "9F": 14973, "8F": 14262 };
-const BRAND_GREEN = "#34D5C8";
-const BRAND_RED = "#FF8678";
-const MODEL_SVF_PATH = `/upload/forge/0.svf`;
-
-// ====== THREE 入口（避免版本衝突） ======
-function getThree() {
-  if (THREE) return THREE;
-  THREE =
-    (globalThis.Autodesk &&
-      globalThis.Autodesk.Viewing &&
-      (globalThis.Autodesk.Viewing.THREE ||
-        globalThis.Autodesk.Viewing.Private?.THREE)) ||
-    globalThis.THREE ||
-    null;
-  if (!THREE)
-    throw new Error("[Forge] THREE 尚未就緒（Viewer 還沒載好或版本差異）");
-  return THREE;
-}
-
-// ====== Resident Modal 狀態 ======
-const modalOpen = ref(false);
-const modalData = ref(null);
-
-function buildResidentModalData(d) {
-  const vacant = d?.state === "offnormal" && !d?.special; // 空床
-  return {
-    name: vacant ? "-" : d?.residentsName ?? "-",
-    sex: vacant ? "-" : d?.residentsSex ?? "-",
-    age: vacant ? "-" : d?.residentsAge ?? "-",
-    startTime: vacant ? "-" : d?.startTime ?? "-",
-    healthStatus: vacant ? "-" : d?.healthStatus ?? "一般",
-    medicationStatus: vacant ? "-" : d?.medicationStatus ?? "規律服藥",
-    specialEvent: d?.special
-      ? d?.specialEvent ?? "住院中"
-      : d?.specialEvent ?? "-",
-    note: vacant ? "-" : d?.note ?? "-",
-  };
-}
-
-function openResidentModal(L, e) {
-  e?.stopPropagation?.();
-  bringToFrontById(L.id);
-  modalData.value = buildResidentModalData(L.data);
-  modalOpen.value = true;
-}
-
-function closeResidentModal() {
-  modalOpen.value = false;
-}
-
-// ====== 初始化樓層還原 ======
-function resolveInitialFloor() {
-  const q = (route.query?.floor || "").toString().toUpperCase();
-  if (q === "8F" || q === "9F") return q;
-  const saved = localStorage.getItem("uark-floor");
-  if (saved === "8F" || saved === "9F") return saved;
-  return "9F";
-}
-
-// ====== Forge Viewer 初始化 / 載入 ======
-function initViewer(container) {
-  return new Promise((resolve) => {
-    Autodesk.Viewing.Initializer({ env: "Local", language: "en" }, () => {
-      const config = {
-        extensions: ["Autodesk.DataVisualization", "Autodesk.DocumentBrowser"],
-      };
-      viewer = new Autodesk.Viewing.GuiViewer3D(container, config);
-      Autodesk.Viewing.Private.InitParametersSetting.alpha = true;
-      viewer.start();
-      getThree();
-      viewer.setGroundShadow(true);
-      viewer.impl.renderer().setClearAlpha(0);
-      viewer.impl.glrenderer().setClearColor(0xffffff, 0);
-      viewer.impl.invalidate(true);
-      resolve();
-    });
-  });
-}
-
-function loadModel(filePath) {
-  return new Promise((resolve, reject) => {
-    viewer.loadModel(filePath, {}, (model) => resolve(model), reject);
-  });
-}
-
-function hideViewCubeAndHome() {
-  const tryHide = () => {
-    const ext = viewer?.getExtension?.("Autodesk.ViewCubeUi");
-    if (ext?.setVisible) ext.setVisible(false);
-  };
-  tryHide();
-  viewer.addEventListener(Autodesk.Viewing.EXTENSION_LOADED_EVENT, (e) => {
-    if (e.extensionId === "Autodesk.ViewCubeUi") tryHide();
-  });
-}
-
-function waitObjectTree(model) {
-  return new Promise((resolve) => {
-    if (model.getData().instanceTree) return resolve();
-    const onTree = () => {
-      viewer.removeEventListener(
-        Autodesk.Viewing.OBJECT_TREE_CREATED_EVENT,
-        onTree
-      );
-      resolve();
-    };
-    viewer.addEventListener(Autodesk.Viewing.OBJECT_TREE_CREATED_EVENT, onTree);
-  });
-}
-
-// ====== 幾何工具 ======
-function getNodeWorldBounds(model, dbId) {
-  const THREE = getThree();
-  const tree = model.getInstanceTree?.();
-  const fragList = model.getFragmentList?.();
-  const box = new THREE.Box3();
-  if (!tree || !fragList) return box;
-  tree.enumNodeFragments(
-    dbId,
-    (fragId) => {
-      const fb = new THREE.Box3();
-      fragList.getWorldBounds(fragId, fb);
-      box.union(fb);
-    },
-    true
-  );
-  return box;
-}
-
-function positionsFromRatios(box, ratios, zLiftRatio = 0.05) {
-  const THREE = getThree();
-  const { min, max } = box;
-  const w = max.x - min.x,
-    h = max.y - min.y,
-    zH = max.z - min.z;
-  const z = max.z + Math.max(0.2, zH * zLiftRatio); // 稍微浮起
-  return ratios.map(
-    ([rx, ry]) => new THREE.Vector3(min.x + rx * w, min.y + ry * h, z)
-  );
-}
-
-// 每層的「不工整」固定佈局（相對比例）
-const LAYOUT_RATIOS = {
-  "9F": [
-    [0.18, 0.26],
-    [0.5, 0.24],
-    [0.78, 0.29],
-    [0.16, 0.48],
-    [0.23, 0.95],
-    [0.86, 0.53],
-  ],
-  "8F": [
-    [0.89, 0.68],
-    [0.85, 0.23],
-  ],
-};
-
-// ====== 床號序列（避開數字 4） ======
-function hasDigit4(n) {
-  return n.toString().includes("4");
-}
-function generateBedNumbers(count, start = 1001) {
-  const out = [];
-  let n = start;
-  while (out.length < count) {
-    if (!hasDigit4(n)) out.push(n);
-    n++;
-  }
-  return out;
-}
-const BED_SERIES_ALL = generateBedNumbers(8, 1001);
-const BED_SERIES_BY_FLOOR = {
-  "9F": BED_SERIES_ALL.slice(0, 6),
-  "8F": BED_SERIES_ALL.slice(6, 8),
-};
-
-// ====== 假資料 / 權重工具 ======
-function seededRand(seed) {
-  const s = Math.sin(seed * 9301 + 49297) * 233280;
-  return s - Math.floor(s);
-}
-function pick(arr, seed) {
-  return arr[Math.floor(seededRand(seed) * arr.length)];
-}
-function ageFromSeed(seed) {
-  return 65 + Math.floor(seededRand(seed + 7) * 31);
-} // 65~95
-function startDateFromSeed(seed) {
-  const now = new Date();
-  const daysAgo = 30 + Math.floor(seededRand(seed + 13) * 365); // 1~12 個月內
-  const d = new Date(now.getTime() - daysAgo * 86400000);
-  const mm = String(d.getMonth() + 1).padStart(2, "0");
-  const dd = String(d.getDate()).padStart(2, "0");
-  return `${d.getFullYear()}/${mm}/${dd}`;
-}
-
-const NAME_POOL = [
-  "王雅雯",
-  "陳志明",
-  "林冠廷",
-  "張淑芬",
-  "黃子涵",
-  "李建宏",
-  "吳佩珊",
-  "周育賢",
-  "趙雅筑",
-  "許庭瑋",
-  "郭怡君",
-  "洪嘉文",
-];
-const HEALTH_POOL = ["一般", "良好", "需觀察", "虛弱"];
-const MEDICATION_POOL = ["規律服藥", "偶爾忘記", "暫停服藥", "需家屬協助"];
-const SPECIAL_POOL = ["-"];
-const NOTE_POOL = ["-", "對花生過敏", "家屬每週三探視", "夜間需加護理巡房"];
-const SEX_POOL = ["男", "女"];
-
-function pickAreaLetter(seed) {
-  const r = seededRand(seed);
-  if (r < 0.4) return "A";
-  return "B";
-}
-
-// ====== 樓層顯示 / Sprites 建立 ======
-async function showLevel(levelKey) {
-  const levelDbId = FLOOR_DBIDS[levelKey];
-  if (!viewer || !viewer.model || !levelDbId) return;
-  const ids = (() => {
-    const tree = viewer.model.getInstanceTree();
-    const leafs = [];
-    const walk = (id) => {
-      const childCount = tree.getChildCount(id);
-      if (childCount === 0) leafs.push(id);
-      else tree.enumNodeChildren(id, walk);
-    };
-    walk(levelDbId);
-    return leafs.length ? leafs : [levelDbId];
-  })();
-  viewer.isolate(ids);
-  viewer.fitToView(ids);
-  viewer.setGhosting(false);
-  viewer.impl.invalidate(true);
-}
-
-async function rebuildSpritesForFloor(floorKey) {
-  const box = getNodeWorldBounds(viewer.model, FLOOR_DBIDS[floorKey]);
-  const is9F = floorKey === "9F";
-
-  const ratios = LAYOUT_RATIOS[floorKey] || [];
-  const poses = positionsFromRatios(box, ratios);
-
-  const bedNos =
-    BED_SERIES_BY_FLOOR[floorKey] || generateBedNumbers(poses.length, 1001);
-
-  __staticDevices.length = 0;
-  const GREEN = BRAND_GREEN,
-    RED = BRAND_RED;
-
-  poses.forEach((p, i) => {
-    const bedNo = bedNos[i] ?? 1001 + i;
-    const spriteIdBase = is9F ? 90000 : 91000;
-    const spriteDbId = spriteIdBase + i + 1;
-
-    const area = pickAreaLetter(spriteDbId);
-    const isRed = is9F ? i >= poses.length - 2 : false;
-
-    __staticDevices.push({
-      name: `${area} 區 ${bedNo}`,
-      forge_dbid: FLOOR_DBIDS[floorKey],
-      spriteDbId,
-      device_coordinate_3d: { x: p.x, y: p.y, z: p.z },
-      device_normal_color: BRAND_GREEN,
-      device_close_color: BRAND_RED,
-      state: isRed ? "offnormal" : "normal",
-      special: isRed && i === poses.length - 2, //  只挑第一個紅色 sprite 加入黃色標示
-      residentsName: pick(NAME_POOL, spriteDbId),
-      residentsSex: pick(SEX_POOL, spriteDbId + 1),
-      residentsAge: ageFromSeed(spriteDbId + 2),
-      startTime: startDateFromSeed(spriteDbId + 3),
-
-      avatarUrl: Math.random() > 0.4 ? pick(spriteDbId + 4) : null,
-      healthStatus: pick(HEALTH_POOL, spriteDbId + 5),
-      medicationStatus: pick(MEDICATION_POOL, spriteDbId + 6),
-      specialEvent:
-        isRed && i === poses.length - 2
-          ? "住院中"
-          : pick(SPECIAL_POOL, spriteDbId + 7),
-      note: pick(NOTE_POOL, spriteDbId + 8),
-    });
-  });
-
-  await createSprites(); // 清舊加新
-}
-
-// ====== Popover（常駐在每顆 sprite 上方） ======
-const labels = ref([]); // [{ id, x, y, data }]
-let camEvtCleanup = null;
-
-const activeLabelId = ref(null);
-function bringToFrontById(id) {
-  activeLabelId.value = id;
-}
-
-function worldToScreen(pos3) {
-  const p = viewer.worldToClient(pos3); // 相對於 viewer 容器的座標
-  return { x: p.x, y: p.y };
-}
-
-function rebuildLabelsForCurrentFloor() {
-  labels.value = __staticDevices.map((d) => {
-    const { x, y } = worldToScreen(
-      new (getThree().Vector3)(
-        d.device_coordinate_3d.x,
-        d.device_coordinate_3d.y,
-        d.device_coordinate_3d.z
-      )
-    );
-    return {
-      id: d.spriteDbId,
-      x,
-      y,
-      data: d,
-    };
-  });
-}
-
-function updateLabelPositions() {
-  if (!labels.value.length) return;
-  labels.value = labels.value.map((L) => {
-    const { x, y } = worldToScreen(
-      new (getThree().Vector3)(
-        L.data.device_coordinate_3d.x,
-        L.data.device_coordinate_3d.y,
-        L.data.device_coordinate_3d.z
-      )
-    );
-    return { ...L, x, y };
-  });
-}
-
-function attachCameraEventsForLabels() {
-  camEvtCleanup?.(); // 先清掉舊的
-  const onUpdate = () => requestAnimationFrame(updateLabelPositions);
-  viewer.addEventListener(Autodesk.Viewing.CAMERA_CHANGE_EVENT, onUpdate);
-  viewer.addEventListener(Autodesk.Viewing.RENDER_PRESENTED_EVENT, onUpdate);
-  viewer.addEventListener(Autodesk.Viewing.VIEWER_RESIZE_EVENT, onUpdate);
-  camEvtCleanup = () => {
-    viewer.removeEventListener(Autodesk.Viewing.CAMERA_CHANGE_EVENT, onUpdate);
-    viewer.removeEventListener(
-      Autodesk.Viewing.RENDER_PRESENTED_EVENT,
-      onUpdate
-    );
-    viewer.removeEventListener(Autodesk.Viewing.VIEWER_RESIZE_EVENT, onUpdate);
-  };
-}
-
-function rebuildLabelsAfterNextRender() {
-  const once = () => {
-    rebuildLabelsForCurrentFloor();
-    updateLabelPositions();
-    viewer.removeEventListener(Autodesk.Viewing.RENDER_PRESENTED_EVENT, once);
-  };
-  viewer.addEventListener(Autodesk.Viewing.RENDER_PRESENTED_EVENT, once);
-}
-
-// ====== 分區切換（多選｜預設不選＝顯示全部） ======
-const zones = ["一般", "氧氣"];
-const selectedZones = ref(new Set());
-const toggleZone = (zone) => {
-  const set = new Set(selectedZones.value);
-  if (set.has(zone)) set.delete(zone);
-  else set.add(zone);
-  selectedZones.value = set;
-};
-const isZoneSelected = (zone) => selectedZones.value.has(zone);
-
-// ====== 床位資訊選單 / 顯示控制 ======
-const soloSpriteId = ref(null); // 單獨顯示：被點擊 sprite 的 id（null 表全域/多顯示模式）
-const infoOptions = [
-  { label: "無顯示", value: "none" },
-  { label: "有住民", value: "occupied" },
-  { label: "空床", value: "vacant" },
-  { label: "住院中", value: "hospitalized" },
-  { label: "請假中", value: "leave" }, // ← 新增
-];
-const infoOpen = ref(false);
-const selectedInfo = ref(infoOptions[0].value); // 'none'
-
-const filteredLabels = computed(() => {
-  // 單獨顯示模式
-  if (soloSpriteId.value != null) {
-    if (selectedInfo.value === "none" || selectedInfo.value === "leave")
-      return [];
-    return labels.value.filter((L) => L.id === soloSpriteId.value);
-  }
-
-  // none / leave = 全隱
-  if (selectedInfo.value === "none" || selectedInfo.value === "leave") {
-    return [];
-  }
-
-  const info = selectedInfo.value; // 'occupied' | 'vacant' | 'hospitalized'
-  const selectedSet = selectedZones.value; // Set
-
-  return labels.value.filter((L) => {
-    // ===== 分區多選判斷 =====
-    const inZone =
-      selectedSet.size === 0
-        ? true
-        : L.data?.zone
-        ? selectedSet.has(L.data.zone)
-        : true;
-
-    // ===== 燈號狀態判斷 =====
-    const isRed = L.data.state === "offnormal";
-    const isHosp = isRed && !!L.data.special; // 住院中：紅 + special
-    const isGreen = !isRed && !L.data.special; // 有住民：綠
-
-    let stateOk = true;
-    if (info === "occupied") stateOk = isGreen;
-    if (info === "vacant") stateOk = isRed; // 空床 = 只要是紅色，都包含（含住院）
-    if (info === "hospitalized") stateOk = isHosp;
-
-    return inZone && stateOk;
-  });
-});
-
-const isVacantWithoutSpecial = (L) =>
-  L?.data?.state === "offnormal" && !L?.data?.special;
-
-const emit = defineEmits(["change"]);
-const selectInfo = (opt) => {
-  // 切換全域顯示 → 關閉單獨顯示
-  soloSpriteId.value = null;
-
-  selectedInfo.value = opt.value;
-  infoOpen.value = false;
-  emit("change", opt.value);
-};
-
-const infoTriggerRef = ref(null);
-const infoPanelRef = ref(null);
-
-const onClickOutsideInfo = (e) => {
-  const t = e.target;
-  if (!infoTriggerRef.value || !infoPanelRef.value) return;
-  const insideTrigger = infoTriggerRef.value.contains(t);
-  const insidePanel = infoPanelRef.value.contains(t);
-  if (!insideTrigger && !insidePanel) infoOpen.value = false;
-};
-
-const onKeydownInfo = (e) => {
-  if (e.key === "Escape") infoOpen.value = false;
-};
-
-// ====== 套用樓層 / 切換 ======
-async function applyFloor(next) {
-  // 進新樓層前清空單獨顯示
-  soloSpriteId.value = null;
-
-  activeFloor.value = next;
-  localStorage.setItem("uark-floor", next);
-  await showLevel(next);
-  await rebuildSpritesForFloor(next); // 只畫當前樓層的 sprites
-  viewer.impl.invalidate(true); // 強制要求一個新幀
-  rebuildLabelsAfterNextRender(); // 等下一次渲染完成再對齊 labels
-}
-
-async function onClickFloor(next) {
-  if (next === activeFloor.value) return;
-  if (!viewerReady.value) return;
-  await applyFloor(next);
-}
-
-// ====== 生命週期 ======
-onMounted(async () => {
-  activeFloor.value = resolveInitialFloor();
-
-  await initViewer(forgeDom.value);
-  const model = await loadModel(MODEL_SVF_PATH);
-  await waitObjectTree(model);
-  hideViewCubeAndHome();
-
-  // 讓 DataVisualization 綁定這個 viewer
-  await dvInit(viewer);
-
-  // 綁定 sprite 點擊
-  unbindSpriteClick = forgeClickListener(async ({ data }) => {
-    // 進入「單獨顯示」模式，只顯示被點到那顆 popover
-    soloSpriteId.value =
-      soloSpriteId.value === data.spriteDbId ? null : data.spriteDbId;
-    bringToFrontById(data.spriteDbId);
-
-    await cardfitToView({
-      forge_dbid: data.forge_dbid,
-      spriteDbId: data.spriteDbId,
-      back: 30,
-    });
-  });
-  attachCameraEventsForLabels();
-
-  await applyFloor("9F");
-  viewerReady.value = true; // 放在 applyFloor 之後較穩
-});
-
-onMounted(() => {
-  document.addEventListener("click", onClickOutsideInfo);
-  document.addEventListener("keydown", onKeydownInfo);
-});
-
-watch(
-  () => route.query?.floor,
-  async (v) => {
-    if (!viewerReady.value) return;
-    const q = (v || "").toString().toUpperCase();
-    if (q === "8F" || q === "9F") {
-      await applyFloor(q);
-    }
-    attachCameraEventsForLabels();
-  }
-);
-
-onUnmounted(() => {
-  try {
-    unbindSpriteClick?.();
-    camEvtCleanup?.();
-  } catch {}
-  try {
-    clearSprites();
-  } catch {}
-
-  if (viewer) {
-    try {
-      const ext = viewer.getExtension?.("Autodesk.DataVisualization");
-      ext?.removeAllViewables?.();
-      viewer.unloadExtension?.("Autodesk.DataVisualization");
-    } catch {}
-    viewer.tearDown?.();
-    viewer.finish?.();
-    viewer = null;
-  }
-
-  document.removeEventListener("click", onClickOutsideInfo);
-  document.removeEventListener("keydown", onKeydownInfo);
-});
-</script>
-<style>
-.adsk-viewing-viewer {
-  background-color: transparent !important;
-}
-#guiviewer3d-toolbar {
-  display: none;
-}
-.adsk-viewcube {
-  display: none !important;
-}
-</style>
diff --git a/src/layouts/ForgeLayout.vue b/src/layouts/ForgeLayout.vue
index bf009af..881738b 100644
--- a/src/layouts/ForgeLayout.vue
+++ b/src/layouts/ForgeLayout.vue
@@ -1,17 +1,16 @@
 <template>
   <section id="app" class="flex flex-col min-h-screen">
     <NavBar class="fixed" />
-
     <main
-      class="w-full p-4 pt-[80px] from-brand-green-light/20 via-white/40 to-white/10"
+      class="w-full p-4 pt-[80px]"
     >
       <section class="grid grid-cols-7 gap-4 overflow-hidden">
         <!-- 左側：地圖 -->
         <section
-          class="col-span-3 bg-gradient-to-br rounded-md h-full overflow-hidden"
+          class="col-span-3 rounded-md h-full overflow-hidden"
         >
           <div
-            class="w-full h-full flex items-center justify-center text-gray-500"
+            class="w-full h-full flex items-center justify-center text-brand-gray"
           >
             <Forge />
           </div>
diff --git a/src/layouts/HeadquarterLayout.vue b/src/layouts/HeadquarterLayout.vue
index 63d6d9b..ad374b3 100644
--- a/src/layouts/HeadquarterLayout.vue
+++ b/src/layouts/HeadquarterLayout.vue
@@ -1,8 +1,5 @@
 <template>
-  <section
-    id="app"
-    class="flex flex-col min-h-screen bg-gradient-to-r from-brand-gray-lighter/50 via-brand-purple-light/20 to-white/50"
-  >
+  <section id="app" class="flex flex-col min-h-screen">
     <NavBar />
     <main class="w-full p-4 pt-[80px] overflow-x-hidden">
       <RouterView class="h-[calc(100vh-72px-40px)]" />
diff --git a/src/layouts/NavBar.vue b/src/layouts/NavBar.vue
index e31996a..1abdc4b 100644
--- a/src/layouts/NavBar.vue
+++ b/src/layouts/NavBar.vue
@@ -1,6 +1,6 @@
 <template>
   <nav
-    class="fixed top-0 w-full h-14 lg:h-16 bg-white/50 backdrop-blur-sm shadow-md grid grid-cols-[1fr_auto_1fr] items-center px-4 sm:px-6 lg:px-8 z-[80]"
+    class="fixed top-0 w-full h-14 lg:h-16 bg-white/20 backdrop-blur-sm border-b-2 grid grid-cols-[1fr_auto_1fr] items-center px-4 sm:px-6 lg:px-8 z-[80]"
   >
     <!-- 左側：Logo + 機構切換 -->
     <div
@@ -13,7 +13,7 @@
       <div class="relative" v-if="!isHome">
         <div
           ref="triggerRef"
-          class="btn bg-brand-green text-white hover:opacity-90 shadow-md border-none rounded-full px-6 lg:px-8 h-10 gap-2"
+          class="btn bg-brand-green text-white hover:opacity-90 shadow border-none rounded-full px-6 lg:px-8 h-10 gap-2"
           role="button"
           tabindex="0"
           aria-haspopup="true"
@@ -40,7 +40,7 @@
         <div
           v-show="isFacilityOpen"
           ref="panelRef"
-          class="absolute top-12 left-0 z-50 w-56 md:w-64 rounded-md border border-gray-100 bg-white shadow-lg p-2"
+          class="absolute top-12 left-0 z-50 w-56 md:w-64 rounded-md border border-brand-gray-light bg-white shadow-lg p-2"
           @click.stop
         >
           <ul class="max-h-48 overflow-y-auto text-brand-black">
@@ -48,7 +48,7 @@
               v-for="item in facilities"
               :key="item"
               @click="selectItem(item)"
-              class="px-3 py-2 rounded-md cursor-pointer hover:bg-gray-100 tracking-wider"
+              class="px-3 py-2 rounded-md cursor-pointer hover:bg-brand-gray-light tracking-wider"
               :class="selectedItem === item ? 'bg-brand-green-light' : ''"
             >
               {{ item }}
@@ -60,7 +60,7 @@
 
     <!-- 中間：導覽（平板以上顯示；置中） -->
     <div
-      class="col-span-1 justify-self-center hidden lg:flex items-center rounded-full min-w-[300px] w-[300px] bg-white/60 shadow-md"
+      class="col-span-1 justify-self-center hidden lg:flex items-center rounded-full min-w-[300px] w-[300px] bg-white/60 shadow"
     >
       <nav class="w-full grid grid-cols-3 divide-x divide-transparent">
         <RouterLink to="/" v-slot="{ href, navigate, isExactActive }">
@@ -106,7 +106,7 @@
       class="col-span-1 justify-self-end hidden lg:flex items-center gap-3 sm:gap-6"
     >
       <button
-        class="btn bg-white text-brand-black hover:opacity-90 shadow-md border-none rounded-full p-2"
+        class="btn bg-white text-brand-black hover:opacity-90 shadow border-none rounded-full p-2"
         aria-label="通知"
       >
         <!-- 鈴鐺 -->
@@ -124,7 +124,7 @@
       </button>
 
       <div
-        class="btn bg-white text-brand-black hover:opacity-90 shadow-md border-none rounded-full px-3 md:px-5 h-9 md:h-10 gap-2 md:gap-3"
+        class="btn bg-white text-brand-black hover:opacity-90 shadow border-none rounded-full px-3 md:px-5 h-9 md:h-10 gap-2 md:gap-3"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -158,7 +158,7 @@
 
     <!-- 手機：漢堡按鈕-->
     <button
-      class="lg:hidden btn bg-white text-brand-black hover:opacity-90 shadow-md border-none rounded-md p-2 justify-self-end"
+      class="lg:hidden btn bg-white text-brand-black hover:opacity-90 shadow border-none rounded-md p-2 justify-self-end"
       @click="toggleMobileMenu"
       :aria-expanded="isMobileMenuOpen"
       aria-controls="mobile-menu"
@@ -354,7 +354,7 @@
     <!-- 平板直式 modal：在 640px～1023px 顯示，位置在漢堡鈕下方 -->
     <div
       v-show="isMobileMenuOpen"
-      class="hidden sm:block lg:hidden absolute right-4 top-16 z-[1100] w-[88vw] sm:w-[240px] bg-white rounded-xl shadow-xl border border-gray-100 p-4"
+      class="hidden sm:block lg:hidden absolute right-4 top-16 z-[1100] w-[88vw] sm:w-[240px] bg-white rounded-xl shadow-md border border-gray-100 p-4"
       role="dialog"
       aria-modal="true"
       aria-label="主選單（平板）"
diff --git a/src/pages/home/components/DietSummary.vue b/src/pages/home/components/DietSummary.vue
new file mode 100644
index 0000000..9b6fd39
--- /dev/null
+++ b/src/pages/home/components/DietSummary.vue
@@ -0,0 +1,129 @@
+<template>
+  <section class="grid grid-cols-2 gap-2">
+    <!-- 卡片：葷/素 -->
+    <div
+      v-for="item in items"
+      :key="item.key"
+      class="col-span-1 bg-white/30 rounded-md shadow p-4 cursor-pointer active:opacity-80 group"
+    >
+      <div
+        class="relative border border-brand-yellow group-hover:border-brand-green-light rounded-md w-full h-full flex flex-col justify-center items-center gap-1 transition-colors"
+      >
+        <!-- 中間圓形徽章 + ICON -->
+        <div
+          class="relative text-brand-yellow group-hover:text-brand-green-light transition-colors"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="90"
+            height="90"
+            viewBox="0 0 24 24"
+          >
+            <path
+              fill="currentColor"
+              d="M13 2.05v3.03c3.39.49 6 3.39 6 6.92c0 .9-.18 1.75-.5 2.54l2.62 1.53c.56-1.24.88-2.62.88-4.07c0-5.18-3.95-9.45-9-9.95M12 19a7 7 0 0 1-7-7c0-3.53 2.61-6.43 6-6.92V2.05c-5.06.5-9 4.76-9 9.95a10 10 0 0 0 10 10c3.3 0 6.23-1.61 8.05-4.09l-2.6-1.53A6.89 6.89 0 0 1 12 19"
+            />
+          </svg>
+          <p
+            class="w-9 h-9 flex justify-center items-center p-2 bg-brand-yellow group-hover:bg-brand-green-light text-brand-black absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full transition-colors"
+          >
+            {{ item.label }}
+          </p>
+        </div>
+
+        <!-- 數據 -->
+        <div class="flex flex-col justify-center items-center gap-4">
+          <p class="text-lg text-center">總數：{{ item.data.total }}</p>
+          <div class="px-3">
+            <table
+              class="table-fixed border border-brand-gray-light border-collapse mx-auto w-auto"
+            >
+              <thead
+                class="bg-brand-yellow group-hover:bg-brand-green-light text-brand-black border-b border-brand-gray/30 transition-colors"
+              >
+                <tr class="text-center">
+                  <th
+                    class="text-sm p-2 text-center border-r border-brand-gray/30"
+                  >
+                    一般
+                  </th>
+                  <th
+                    class="text-sm p-2 text-center border-r border-brand-gray/30"
+                  >
+                    碎食
+                  </th>
+                  <th class="text-sm p-2 text-center">管灌</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr class="text-center">
+                  <td
+                    class="px-3 py-1 border-r border-t border-brand-gray-light w-[80px] text-center"
+                  >
+                    <span
+                      class="font-nats text-xl text-brand-black block text-center"
+                    >
+                      {{ item.data.normal }}
+                    </span>
+                  </td>
+                  <td
+                    class="px-3 py-1 border-r border-t border-brand-gray-light w-[80px] text-center"
+                  >
+                    <span
+                      class="font-nats text-xl text-brand-black block text-center"
+                    >
+                      {{ item.data.soft }}
+                    </span>
+                  </td>
+                  <td
+                    class="px-3 py-1 border-t border-brand-gray-light w-[80px] text-center"
+                  >
+                    <span
+                      class="font-nats text-xl text-brand-black block text-center"
+                    >
+                      {{ item.data.tube }}
+                    </span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <svg
+          class="text-brand-gray/50 absolute top-5 right-5"
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+        >
+          <path
+            fill="currentColor"
+            d="M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5"
+          />
+        </svg>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  // 結構：{ meat: { total, normal, soft, tube }, veg: { ... } }
+  diet: {
+    type: Object,
+    required: true,
+    default: () => ({
+      meat: { total: 0, normal: 0, soft: 0, tube: 0 },
+      veg: { total: 0, normal: 0, soft: 0, tube: 0 },
+    }),
+  },
+});
+
+const items = computed(() => [
+  { key: "meat", label: "葷", data: props.diet?.meat ?? {} },
+  { key: "veg", label: "素", data: props.diet?.veg ?? {} },
+]);
+</script>
diff --git a/src/pages/home/components/FacilityHeaderInfo.vue b/src/pages/home/components/FacilityHeaderInfo.vue
new file mode 100644
index 0000000..2bd86e8
--- /dev/null
+++ b/src/pages/home/components/FacilityHeaderInfo.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="relative">
+    <!-- 頂部資訊條：機構名稱 + 返回 -->
+    <div
+      class="absolute top-0 left-0 z-30 flex justify-between items-center w-full px-2 py-1 bg-brand-gray-lighter/80"
+    >
+      <div
+        class="w-full h-[24px] flex justify-start items-center gap-3 text-brand-black"
+      >
+        <span>
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 24">
+            <g fill="none" fill-rule="evenodd">
+              <path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/>
+              <path
+                fill="currentColor"
+                d="M13 3a2 2 0 0 1 1.995 1.85L15 5v14h1V9.5a.5.5 0 0 1 .41-.492L16.5 9H18a2 2 0 0 1 1.995 1.85L20 11v8h1a1 1 0 0 1 .117 1.993L21 21H3a1 1 0 0 1-.117-1.993L3 19h1V5a2 2 0 0 1 1.85-1.995L6 3zm-2 12H8v2h3zm0-4H8v2h3zm0-4H8v2h3z"
+              />
+            </g>
+          </svg>
+        </span>
+        <span class="text-sm tracking-wider">{{ facilityDisplayName }}</span>
+      </div>
+
+      <span
+        v-if="selectedFacility !== 'ALL'"
+        class="inline-flex items-center justify-center rounded px-2 py-1 hover:bg-white/80 hover:text-brand-black cursor-pointer select-none"
+        role="button"
+        tabindex="0"
+        @click="emitBack"
+        @keyup.enter="emitBack"
+        @keyup.space.prevent="emitBack"
+        aria-label="返回總部"
+        title="返回"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 48 48">
+          <path
+            fill="currentColor"
+            fill-rule="evenodd"
+            stroke="currentColor"
+            stroke-linejoin="round"
+            stroke-width="4"
+            d="M44 40.836q-7.34-8.96-13.036-10.168t-10.846-.365V41L4 23.545L20.118 7v10.167q9.523.075 16.192 6.833q6.668 6.758 7.69 16.836Z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </span>
+    </div>
+
+    <!-- 照片 + 說明（手機隱藏、平板/桌機顯示） -->
+    <div class="w-full grid grid-rows-12 justify-start items-start gap-4 hidden sm:grid">
+      <div class="h-[230px] row-span-7">
+        <img
+          :src="photo"
+          alt="機構照片"
+          class="w-full h-full rounded-sm object-cover"
+        />
+      </div>
+      <div class="row-span-5">
+        <p class="text-brand-gray bg-white/30 text-sm border rounded-sm px-2 py-3 border-brand-gray-light">
+          {{ desc }}
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from "vue";
+
+const props = defineProps({
+  facilityDisplayName: { type: String, required: true },
+  selectedFacility: { type: String, required: true }, // 控制返回鈕顯示
+  photo: { type: String, required: true },
+  desc: { type: String, required: true },
+});
+
+const emit = defineEmits(["back"]);
+
+function emitBack() {
+  emit("back");
+}
+</script>
diff --git a/src/pages/home/components/MapPane.vue b/src/pages/home/components/MapPane.vue
new file mode 100644
index 0000000..ee17b2f
--- /dev/null
+++ b/src/pages/home/components/MapPane.vue
@@ -0,0 +1,485 @@
+<template>
+  <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="relative pointer-events-none flex justify-center w-full">
+        <div
+          class="pointer-events-auto inline-flex items-center text-sm text-brand-gray-dark bg-white bg-opacity-90 border border-gray-300 rounded-md shadow ps-3"
+          role="group"
+          aria-label="顯示資訊切換"
+        >
+          <div class="flex items-center">
+            <p class="py-2 pr-2">顯示資訊｜</p>
+
+            <!-- 不顯示 -->
+            <button
+              :class="[
+                'flex items-center gap-2 px-3 py-2 rounded-md hover:bg-brand-gray-lighter',
+                props.infoMode === 'none' &&
+                  'bg-brand-purple-dark text-white hover:bg-brand-purple-dark hover:text-white',
+              ]"
+              @click="setInfoMode('none')"
+              :aria-pressed="props.infoMode === 'none'"
+            >
+              <span class="inline-block">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 15 15"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M3.64 2.27L7.5 6.13l3.84-3.84A.92.92 0 0 1 12 2a1 1 0 0 1 1 1a.9.9 0 0 1-.27.66L8.84 7.5l3.89 3.89A.9.9 0 0 1 13 12a1 1 0 0 1-1 1a.92.92 0 0 1-.69-.27L7.5 8.87l-3.85 3.85A.92.92 0 0 1 3 13a1 1 0 0 1-1-1a.9.9 0 0 1 .27-.66L6.16 7.5L2.27 3.61A.9.9 0 0 1 2 3a1 1 0 0 1 1-1c.24.003.47.1.64.27"
+                  />
+                </svg>
+              </span>
+              <span>不顯示</span>
+            </button>
+
+            <!-- 入住情況 -->
+            <button
+              :class="[
+                'flex items-center gap-2 px-3 py-2 rounded-md hover:bg-brand-gray-lighter',
+                props.infoMode === 'residents' &&
+                  'bg-brand-purple-dark text-white hover:bg-brand-purple-dark hover:text-white',
+              ]"
+              @click="setInfoMode('residents')"
+              :aria-pressed="props.infoMode === 'residents'"
+            >
+              <span class="inline-block">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M3 14s-1 0-1-1s1-4 6-4s6 3 6 4s-1 1-1 1zm5-6a3 3 0 1 0 0-6a3 3 0 0 0 0 6"
+                  />
+                </svg>
+              </span>
+              <span>入住情況</span>
+            </button>
+
+            <!-- 飲食情況 -->
+            <button
+              :class="[
+                'flex items-center gap-2 px-3 py-2 rounded-md hover:bg-brand-gray-lighter',
+                props.infoMode === 'diet' &&
+                  'bg-brand-purple-dark text-white hover:bg-brand-purple-dark hover:text-white',
+              ]"
+              @click="setInfoMode('diet')"
+              :aria-pressed="props.infoMode === 'diet'"
+            >
+              <span class="inline-block">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="16"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    fill="currentColor"
+                    d="M17.5 2.75a.75.75 0 0 0-1.5 0v4.015c-2.026-1.358-4.867-.881-6.293 1.215L2.353 18.786c-.556.818-.45 1.91.255 2.608a2.1 2.1 0 0 0 2.667.23l10.79-7.469A4.454 4.454 0 0 0 17.24 8h4.009a.75.75 0 0 0 0-1.5h-2.69l3.22-3.22a.75.75 0 0 0-1.06-1.06L17.5 5.439z"
+                  />
+                </svg>
+              </span>
+              <span>飲食情況</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 地圖本體 -->
+    <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"
+    ></div>
+  </section>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, onBeforeUnmount, nextTick } from "vue";
+import L from "leaflet";
+import "leaflet/dist/leaflet.css";
+
+/** Props / Emits **/
+const props = defineProps({
+  // v-model:infoMode
+  infoMode: { type: String, default: "none" }, // 'none' | 'residents' | 'diet'
+  // 所有機構的資料，用於 tooltip 內容
+  dataset: { type: Object, required: true },
+  // 標記座標，可外部覆蓋
+  locations: {
+    type: Array,
+    default: () => [
+      {
+        name: "A 機構",
+        addr: "高雄市楠梓區立仁街131、133號",
+        lat: 22.7409648895,
+        lng: 120.3354644775,
+      },
+      {
+        name: "B 機構",
+        addr: "高雄市楠梓區常德路317巷9弄27號",
+        lat: 22.7366924286,
+        lng: 120.3363342285,
+      },
+      {
+        name: "C 機構",
+        addr: "高雄市楠梓區宏昌街135、137號",
+        lat: 22.717588,
+        lng: 120.29406,
+      },
+      {
+        name: "D 機構",
+        addr: "高雄市左營區民族一路980號",
+        lat: 22.678054,
+        lng: 120.3192,
+      },
+      {
+        name: "E 機構",
+        addr: "高雄市三民區黃興路336號",
+        lat: 22.651488,
+        lng: 120.33731,
+      },
+      {
+        name: "F 機構",
+        addr: "高雄市小港區沿海一路377號",
+        lat: 22.5644512177,
+        lng: 120.3544540405,
+      },
+    ],
+  },
+});
+const emit = defineEmits(["update:infoMode", "select-facility"]);
+
+function setInfoMode(mode) {
+  emit("update:infoMode", mode);
+}
+
+/** Leaflet base icons (scoped，不改全域) **/
+const base = import.meta.env.BASE_URL ?? "/";
+const iconBase = `${base}img/leaflet/`;
+const defaultIcon = L.icon({
+  iconUrl: `${iconBase}marker-icon.png`,
+  iconRetinaUrl: `${iconBase}marker-icon-2x.png`,
+  shadowUrl: `${iconBase}marker-shadow.png`,
+  iconSize: [25, 41],
+  iconAnchor: [12, 41],
+  popupAnchor: [1, -34],
+  shadowSize: [41, 41],
+});
+
+/** Map state **/
+const mapEl = ref(null);
+let map = null;
+let markers = [];
+
+/** Tooltip HTML helpers **/
+function getResidentsHtml(name) {
+  const f = props.dataset[name];
+  const p = f?.progress || {};
+  const residents = p.residents
+    ? [p.residents.current, p.residents.total]
+    : [0, 0];
+  const vacancy = p.vacancy ? [p.vacancy.current, p.vacancy.total] : [0, 0];
+  const hosp = p.hospitalized
+    ? [p.hospitalized.current, p.hospitalized.total]
+    : [0, 0];
+  return `
+<div class="tip p-2" style="cursor:pointer; touch-action:none; overscroll-behavior:contain" data-facility="${name}">
+  <div class="flex flex-col gap-2">
+    <div class="inline-flex justify-between items-center text-brand-purple-dark font-noto">
+      <div class="inline-flex justify-start items-center gap-1">
+        <span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M5 19v-8.692q0-.384.172-.727t.474-.565l5.385-4.078q.423-.323.966-.323t.972.323l5.385 4.077q.303.222.474.566q.172.343.172.727V19q0 .402-.299.701T18 20h-3.384q-.344 0-.576-.232q-.232-.233-.232-.576v-4.769q0-.343-.232-.575q-.233-.233-.576-.233h-2q-.343 0-.575.233q-.233.232-.233.575v4.77q0 .343-.232.575T9.385 20H6q-.402 0-.701-.299T5 19"/></svg></span>
+        <strong class="text-[14px]">${name}</strong>
+      </div>
+      <div><span class="text-brand-gray/50"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5"/></svg></span></div>
+    </div>
+    <div class="inline-block rounded-md border border-brand-gray/30 overflow-hidden">
+      <table class="table-fixed min-w-[180px] border-collapse">
+        <thead class="bg-brand-purple-light text-brand-black">
+          <tr class="text-center">
+            <th class="text-[14px] p-2 text-center border-r border-brand-gray/30 w-[80px]">住民</th>
+            <th class="text-[14px] p-2 text-center border-r border-brand-gray/30 w-[80px]">空床</th>
+            <th class="text-[14px] p-2 text-center w-[80px]">住院</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="text-center">
+            <td class="px-3 py-1 border-r border-brand-gray/30 w-[80px]"><span class="font-nats text-xl text-brand-purple-dark">${residents[0]} / ${residents[1]}</span></td>
+            <td class="px-3 py-1 border-r border-brand-gray/30 w-[80px]"><span class="font-nats text-xl text-brand-purple-dark">${vacancy[0]} / ${vacancy[1]}</span></td>
+            <td class="px-3 py-1 w-[80px]"><span class="font-nats text-xl text-brand-purple-dark">${hosp[0]} / ${hosp[1]}</span></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>`;
+}
+
+function getDietHtml(name) {
+  const d = props.dataset[name]?.diet || {
+    meat: { total: 0, normal: 0, soft: 0, tube: 0 },
+    veg: { total: 0, normal: 0, soft: 0, tube: 0 },
+  };
+  return `
+<div class="tip p-2" style="cursor:pointer; touch-action:none; overscroll-behavior:contain" data-facility="${name}">
+  <div class="flex flex-col gap-2">
+    <div class="inline-flex justify-between items-center text-brand-purple-dark font-noto">
+      <div class="inline-flex justify-start items-center gap-1">
+        <span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M5 19v-8.692q0-.384.172-.727t.474-.565l5.385-4.078q.423-.323.966-.323t.972.323l5.385 4.077q.303.222.474.566q.172.343.172.727V19q0 .402-.299.701T18 20h-3.384q-.344 0-.576-.232q-.232-.233-.232-.576v-4.769q0-.343-.232-.575q-.233-.233-.576-.233h-2q-.343 0-.575.233q-.233.232-.233.575v4.77q0 .343-.232.575T9.385 20H6q-.402 0-.701-.299T5 19"/></svg></span>
+        <strong class="text-[14px]">${name}</strong>
+      </div>
+      <div><span class="text-brand-gray/50"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5"/></svg></span></div>
+    </div>
+    <div class="inline-block rounded-md border border-brand-gray/30 overflow-hidden">
+      <table class="table-fixed w-[240px] min-w-[200px] border-collapse">
+        <thead class="bg-brand-purple-light text-brand-black">
+          <tr class="text-center">
+            <th class="p-2 text-center border-r border-brand-gray/30 w-[60px] text-[14px]">類別</th>
+            <th class="p-2 text-center border-r border-brand-gray/30 w-[60px] text-[14px]">總數</th>
+            <th class="p-2 text-center border-r border-brand-gray/30 w-[60px] text-[14px]">一般</th>
+            <th class="p-2 text-center border-r border-brand-gray/30 w-[60px] text-[14px]">碎食</th>
+            <th class="p-2 text-center w-[60px] text-[14px]">管灌</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="text-center border-b border-brand-gray/30">
+            <td class="px-2 py-1 border-r border-brand-gray/30 w-[60px]"><span class="text-[14px] font-noto text-brand-dark">葷</span></td>
+            <td class="px-2 py-1 border-r border-brand-gray/30 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.meat.total}</span></td>
+            <td class="px-2 py-1 border-r border-brand-gray/30 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.meat.normal}</span></td>
+            <td class="px-2 py-1 border-r border-brand-gray/30 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.meat.soft}</span></td>
+            <td class="px-2 py-1 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.meat.tube}</span></td>
+          </tr>
+          <tr class="text-center">
+            <td class="px-2 py-1 border-r border-brand-gray/30 w-[60px]"><span class="text-[14px] font-noto text-brand-dark">素</span></td>
+            <td class="px-2 py-1 border-r border-brand-gray/30 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.veg.total}</span></td>
+            <td class="px-2 py-1 border-r border-brand-gray/30 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.veg.normal}</span></td>
+            <td class="px-2 py-1 border-r border-brand-gray/30 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.veg.soft}</span></td>
+            <td class="px-2 py-1 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.veg.tube}</span></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</div>`;
+}
+
+function getTooltipHtml(mode, name) {
+  if (mode === "residents") return getResidentsHtml(name);
+  if (mode === "diet") return getDietHtml(name);
+  return "";
+}
+
+/** helpers **/
+function refreshAllTooltips() {
+  if (!markers?.length) return;
+  for (const m of markers) m.getTooltip?.()?.update?.();
+}
+
+function syncTooltips() {
+  if (!Array.isArray(markers)) return;
+  const iconH =
+    (defaultIcon.options.iconSize && defaultIcon.options.iconSize[1]) || 41;
+  const offset = [0, -(iconH + 8)];
+
+  for (const m of markers) {
+    const name = m.__name || m.options?.title || "";
+
+    if (props.infoMode === "none") {
+      m.unbindTooltip?.();
+      continue;
+    }
+
+    const html = getTooltipHtml(props.infoMode, name);
+    const cur = m.getTooltip?.();
+    const needsRebind = !cur || cur.getContent?.() !== html;
+
+    if (needsRebind) {
+      m.unbindTooltip?.();
+      m.bindTooltip(html, {
+        permanent: true,
+        direction: "top",
+        offset,
+        opacity: 0.95,
+        interactive: true,
+      });
+    }
+
+    const t = m.getTooltip?.();
+    if (t && typeof t.getElement === "function") {
+      const el = t.getElement();
+      if (el && !el.__bound) {
+        el.__bound = true;
+        el.style.cursor = "pointer";
+        el.setAttribute("tabindex", "-1");
+
+        const block = (ev) => {
+          ev.preventDefault();
+          ev.stopPropagation();
+        };
+
+        [
+          "wheel",
+          "mousewheel",
+          "DOMMouseScroll",
+          "touchstart",
+          "touchmove",
+          "pointerdown",
+          "pointermove",
+          "mousedown",
+          "mousemove",
+        ].forEach((type) =>
+          el.addEventListener(type, block, { passive: false })
+        );
+
+        el.addEventListener(
+          "click",
+          (e) => {
+            block(e);
+            const facility = el.getAttribute("data-facility") || name;
+            emit("select-facility", facility);
+          },
+          { passive: false }
+        );
+
+        el.addEventListener("dblclick", block, { passive: false });
+      }
+    }
+  }
+
+  if (map?.invalidateSize) {
+    requestAnimationFrame(() => {
+      map.invalidateSize();
+      refreshAllTooltips();
+    });
+  }
+}
+
+/** Lifecycle **/
+onMounted(() => {
+  if (!mapEl.value) return;
+
+  // 地圖邊界（高雄）
+  const BOUNDS_LOOSE = L.latLngBounds([22.35, 120.0], [23.05, 120.75]);
+
+  map = L.map(mapEl.value, {
+    center: [22.6273, 120.3014],
+    zoom: 13,
+    minZoom: 12,
+    maxZoom: 20,
+    zoomSnap: 0.25,
+    zoomDelta: 0.25,
+    maxBounds: BOUNDS_LOOSE,
+    maxBoundsViscosity: 0.8,
+    preferCanvas: true,
+    zoomControl: false,
+    keyboard: false, // 防止點擊時把地圖容器 focus 進而觸發視窗捲動
+  });
+
+  const container = map.getContainer();
+
+  container.removeAttribute("tabindex"); // 讓它成為可聚焦元素
+  container.addEventListener("mousedown", () => container.blur(), {
+    passive: true,
+  }); // 若不小心被聚焦，立刻 blur
+  // 顯式阻止預設行為（一定要 passive:false）
+  const block = (e) => e.preventDefault();
+  ["wheel", "mousewheel", "DOMMouseScroll", "touchmove"].forEach((ev) => {
+    container.addEventListener(ev, block, { passive: false });
+  });
+
+  ["wheel", "mousewheel", "DOMMouseScroll", "touchmove"].forEach((ev) => {
+    container.addEventListener(ev, block, { passive: false });
+  });
+
+  L.DomEvent.disableScrollPropagation(container); // 滾輪不往視窗冒泡
+  L.DomEvent.disableClickPropagation(container); // 點擊／拖曳不往上冒泡
+
+  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+    maxZoom: 20,
+    attribution:
+      '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+  }).addTo(map);
+
+  const group = L.featureGroup();
+  markers = [];
+  props.locations.forEach((p) => {
+    const marker = L.marker([p.lat, p.lng], {
+      title: p.name,
+      icon: defaultIcon,
+      interactive: false, // 不吃滑鼠事件 → 不會出現 pointer
+    });
+    marker.__name = p.name;
+    marker.addTo(group);
+    markers.push(marker);
+  });
+  group.addTo(map);
+
+  const bounds = group.getBounds().pad(0.06);
+  map.fitBounds(bounds, {
+    paddingTopLeft: [24, 140],
+    paddingBottomRight: [24, 24],
+    maxZoom: 15,
+  });
+
+  // 初次依當前模式綁定 tooltip
+  syncTooltips();
+
+  // 初始後多次 invalidateSize，避免白屏
+  requestAnimationFrame(() => {
+    const m = map;
+    m?.invalidateSize?.();
+    requestAnimationFrame(() => {
+      m?.invalidateSize?.();
+      refreshAllTooltips();
+    });
+  });
+
+  // 互動後更新 tooltip 位置
+  map.on("zoomend", refreshAllTooltips);
+  map.on("moveend", refreshAllTooltips);
+  map.on("resize", refreshAllTooltips);
+
+  // 視窗尺寸改變
+  const onResize = () => {
+    map?.invalidateSize?.();
+    refreshAllTooltips();
+  };
+  window.addEventListener("resize", onResize);
+  map.__onResize = onResize;
+});
+
+onBeforeUnmount(() => {
+  if (map?.__onResize) window.removeEventListener("resize", map.__onResize);
+  if (map) {
+    map.off("zoomend", refreshAllTooltips);
+    map.off("moveend", refreshAllTooltips);
+    map.off("resize", refreshAllTooltips);
+    map.remove();
+    map = null;
+  }
+});
+
+/** Re-bind when mode changes **/
+watch(
+  () => props.infoMode,
+  async () => {
+    await nextTick();
+    requestAnimationFrame(() => {
+      syncTooltips();
+      requestAnimationFrame(() => {
+        map?.invalidateSize?.();
+        refreshAllTooltips();
+      });
+    });
+  }
+);
+</script>
diff --git a/src/pages/home/ProgressBar.vue b/src/pages/home/components/ProgressBar.vue
similarity index 97%
rename from src/pages/home/ProgressBar.vue
rename to src/pages/home/components/ProgressBar.vue
index da79fc0..94b5c01 100644
--- a/src/pages/home/ProgressBar.vue
+++ b/src/pages/home/components/ProgressBar.vue
@@ -30,7 +30,7 @@
       ></progress>
 
       <span
-        class="w-full absolute bottom-0 flex justify-between items-center text-[20px] font-nats pe-5 text-brand-black/80 group-hover:text-brand-purple-dark left-2"
+        class="w-full absolute bottom-0 flex justify-between items-center text-[20px] 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/pages/home/components/ProgressGroup.vue b/src/pages/home/components/ProgressGroup.vue
new file mode 100644
index 0000000..4e27f38
--- /dev/null
+++ b/src/pages/home/components/ProgressGroup.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="w-full flex flex-col gap-5">
+    <!-- 逐條渲染 ProgressBar -->
+    <ProgressBar
+      v-for="it in items"
+      :key="`${it.key}-${selectedFacilityKey}`"
+      :label="it.label"
+      :current="it.current"
+      :total="it.total"
+      :chartKey="it.key"
+      :currentLegend="it.currentLegend"
+      :totalLegend="it.totalLegend"
+      @select="onSelect"
+      data-animate
+      data-animate-from="0"
+      data-animate-duration="700"
+      class="[&::-webkit-progress-value]:transition-all [&::-webkit-progress-value]:duration-700 [&::-moz-progress-bar]:transition-all [&::-moz-progress-bar]:duration-700"
+    />
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from "vue";
+import ProgressBar from "./ProgressBar.vue";
+
+/**
+ * items 期待的結構：
+ * [
+ *   {
+ *     key: 'residents' | 'vacancy' | 'hospitalized' | 'movein' | 'moveout',
+ *     label: string,
+ *     current: number,
+ *     total: number,
+ *     currentLegend: string,
+ *     totalLegend: string
+ *   },
+ *   ...
+ * ]
+ */
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true,
+    // 簡單驗證：每個項目至少要有 key/label/current/total
+    validator(arr) {
+      return Array.isArray(arr) && arr.every(
+        (x) =>
+          x &&
+          typeof x.key === "string" &&
+          typeof x.label === "string" &&
+          typeof x.current === "number" &&
+          typeof x.total === "number"
+      );
+    },
+  },
+  // 用來在切換機構時重置動畫與 key（保持你原本的效果）
+  selectedFacilityKey: {
+    type: [String, Number],
+    default: "",
+  },
+});
+
+const emit = defineEmits(["select"]);
+
+function onSelect(payload) {
+  // payload 由 ProgressBar 傳上來，通常是 { key }
+  emit("select", payload);
+}
+</script>
diff --git a/src/pages/home/components/TrendChart.vue b/src/pages/home/components/TrendChart.vue
new file mode 100644
index 0000000..fa50980
--- /dev/null
+++ b/src/pages/home/components/TrendChart.vue
@@ -0,0 +1,162 @@
+<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]">
+      <div ref="chartEl" class="w-full h-full"></div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, onBeforeUnmount } from "vue";
+import * as echarts from "echarts";
+import { brand } from "@/styles/palette";
+
+const props = defineProps({
+  activeKey: { type: String, default: "residents" },
+  // 結構同 currentFacility.charts：
+  // { [key]: { legends: [string, string], a: number[], b: number[] }, ... }
+  charts: { type: Object, required: true },
+});
+
+const chartEl = ref(null);
+let chart = null;
+
+// 工具：近 7 天標籤
+function last7DaysLabels() {
+  const labels = [];
+  const now = new Date();
+  for (let i = 6; i >= 0; i--) {
+    const d = new Date(now);
+    d.setDate(now.getDate() - i);
+    labels.push(`${d.getMonth() + 1}/${d.getDate()}`);
+  }
+  return labels;
+}
+
+// 標題
+function mkTitle(text, subtext = "", opts = {}) {
+  return {
+    text,
+    subtext,
+    left: "center",
+    top: 12,
+    itemGap: 8,
+    textStyle: {
+      color: brand.black,
+      fontSize: 20,
+      fontWeight: 600,
+      fontFamily: '"Noto Sans TC"',
+    },
+    subtextStyle: {
+      color: brand.gray,
+      fontSize: 14,
+      fontWeight: 400,
+      fontFamily: '"Noto Sans TC"',
+      lineHeight: 20,
+    },
+    ...opts,
+  };
+}
+
+function applyChartOption() {
+  if (!chart) return;
+  const conf = props.charts?.[props.activeKey];
+  if (!conf) return;
+
+  const title = `${conf.legends?.[0] ?? ""} ／ ${conf.legends?.[1] ?? ""}`;
+  const subTitle = "（近 7 天）";
+
+  chart.setOption({
+    color: [brand.green, brand.purple],
+    title: mkTitle(title, subTitle),
+    grid: { top: 84, left: 36, right: 16, bottom: 56, containLabel: true },
+    tooltip: { trigger: "axis", axisPointer: { type: "line" }, confine: true },
+    xAxis: {
+      type: "category",
+      boundaryGap: false,
+      data: last7DaysLabels(),
+      axisLine: { lineStyle: { color: brand.gray } },
+      axisTick: { show: false },
+      axisLabel: { color: brand.gray },
+      splitLine: { show: false },
+    },
+    legend: {
+      data: conf.legends || [],
+      bottom: 8,
+      icon: "circle",
+      itemWidth: 10,
+      itemHeight: 10,
+      itemGap: 24,
+      textStyle: { color: brand.gray },
+    },
+    yAxis: {
+      type: "value",
+      name: "數量",
+      nameLocation: "middle",
+      nameGap: 52,
+      nameTextStyle: { padding: [0, 8, 0, 8] },
+      axisLine: { show: true },
+      axisTick: { show: true },
+      axisLabel: { color: brand.gray },
+      splitLine: { show: true, lineStyle: { color: brand.grayLight } },
+      splitArea: {
+        show: true,
+        areaStyle: { color: [brand.white, brand.grayLighter] },
+      },
+    },
+    series: [
+      {
+        name: conf.legends?.[0] ?? "",
+        type: "line",
+        data: conf.a || [],
+        symbol: "circle",
+        symbolSize: 6,
+        lineStyle: { width: 2 },
+      },
+      {
+        name: conf.legends?.[1] ?? "",
+        type: "line",
+        data: conf.b || [],
+        symbol: "circle",
+        symbolSize: 6,
+        lineStyle: { width: 2 },
+      },
+    ],
+  });
+}
+
+function initChart() {
+  if (!chartEl.value) return;
+  chart = echarts.init(chartEl.value);
+  applyChartOption();
+}
+
+function disposeChart() {
+  if (chart) {
+    chart.dispose();
+    chart = null;
+  }
+}
+
+function onWindowResize() {
+  chart?.resize?.();
+}
+
+onMounted(() => {
+  initChart();
+  window.addEventListener("resize", onWindowResize);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("resize", onWindowResize);
+  disposeChart();
+});
+
+// 只要 activeKey 或 charts（內容/參照）變化，就重繪
+watch(
+  () => [props.activeKey, props.charts],
+  () => applyChartOption(),
+  { deep: true }
+);
+</script>
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index 599cdbf..e654b8d 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -6,360 +6,89 @@
     <section
       class="grid grid-rows-12 gap-2 order-2 lg:order-1 min-h-0 lg:h-full"
     >
-      <!-- 上半：照片/說明 + 進度條 -->
+      <!-- 左上：照片/說明 + 進度條 -->
       <section
-        class="relative row-span-5 bg-white/50 rounded-md shadow p-6 grid grid-cols-1 md:grid-cols-2 items-start gap-6 min-h-0"
+        class="relative row-span-5 bg-white/30 backdrop-blur-sm rounded-md shadow p-6 grid grid-cols-1 md:grid-cols-2 items-start gap-6 min-h-0"
       >
-        <!-- 左上角顯示目前機構名稱 + 返回按鈕 -->
-        <div class="relative">
-          <div
-            class="absolute top-0 left-0 z-30 flex justify-between items-center w-full px-2 py-1 bg-brand-gray-lighter/80"
-          >
-            <div
-              class="w-full h-full flex justify-start items-center gap-3 text-brand-black"
-            >
-              <span
-                ><svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  viewBox="0 0 16 24"
-                >
-                  <g fill="none" fill-rule="evenodd">
-                    <path
-                      d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"
-                    />
-                    <path
-                      fill="currentColor"
-                      d="M13 3a2 2 0 0 1 1.995 1.85L15 5v14h1V9.5a.5.5 0 0 1 .41-.492L16.5 9H18a2 2 0 0 1 1.995 1.85L20 11v8h1a1 1 0 0 1 .117 1.993L21 21H3a1 1 0 0 1-.117-1.993L3 19h1V5a2 2 0 0 1 1.85-1.995L6 3zm-2 12H8v2h3zm0-4H8v2h3zm0-4H8v2h3z"
-                    />
-                  </g></svg></span
-              ><span class="text-sm tracking-wider">{{
-                facilityDisplayName
-              }}</span>
-            </div>
-
-            <span
-              v-if="selectedFacility !== 'ALL'"
-              class="inline-flex items-center justify-center rounded px-2 py-1 hover:bg-white/80 hover:text-brand-black cursor-pointer select-none"
-              role="button"
-              tabindex="0"
-              @click="resetFacility"
-              @keyup.enter="resetFacility"
-              @keyup.space.prevent="resetFacility"
-              aria-label="返回總部"
-              title="返回"
-            >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="16"
-                height="16"
-                viewBox="0 0 48 48"
-              >
-                <path
-                  fill="currentColor"
-                  fill-rule="evenodd"
-                  stroke="currentColor"
-                  stroke-linejoin="round"
-                  stroke-width="4"
-                  d="M44 40.836q-7.34-8.96-13.036-10.168t-10.846-.365V41L4 23.545L20.118 7v10.167q9.523.075 16.192 6.833q6.668 6.758 7.69 16.836Z"
-                  clip-rule="evenodd"
-                />
-              </svg>
-            </span>
-          </div>
-          <!-- 照片 + 說明（手機隱藏、平板/桌機顯示） -->
-          <div
-            class="w-full grid grid-rows-12 justify-start items-start gap-4 hidden sm:grid"
-          >
-            <div class="h-[230px] row-span-7">
-              <img
-                :src="currentFacility.photo"
-                alt="機構照片"
-                class="w-full h-full rounded-sm object-cover"
-              />
-            </div>
-            <div class="row-span-5">
-              <p
-                class="text-brand-gray bg-white/50 text-sm border rounded-sm px-2 py-3 border-brand-gray-light"
-              >
-                {{ currentFacility.desc }}
-              </p>
-            </div>
-          </div>
-        </div>
+        <!-- 目前機構名稱 + 返回按鈕 -->
+        <FacilityHeaderInfo
+          :facility-display-name="facilityDisplayName"
+          :selected-facility="selectedFacility"
+          :photo="currentFacility.photo"
+          :desc="currentFacility.desc"
+          @back="resetFacility"
+        />
 
         <!-- Progress bars -->
-        <div class="w-full flex flex-col gap-5">
-          <ProgressBar
-            :key="`residents-${selectedFacility}`"
-            label="現在住民／全立案床數"
-            :current="currentFacility.progress.residents.current"
-            :total="currentFacility.progress.residents.total"
-            chartKey="residents"
-            currentLegend="現在住民"
-            totalLegend="全立案床數"
-            @select="({ key }) => updateChartByKey(key)"
-            data-animate
-            data-animate-from="0"
-            data-animate-duration="700"
-            class="[&::-webkit-progress-value]:transition-all [&::-webkit-progress-value]:duration-700 [&::-moz-progress-bar]:transition-all [&::-moz-progress-bar]:duration-700"
-          />
-
-          <ProgressBar
-            :key="`vacancy-${selectedFacility}`"
-            label="目前空床數／全立案床數"
-            :current="currentFacility.progress.vacancy.current"
-            :total="currentFacility.progress.vacancy.total"
-            chartKey="vacancy"
-            currentLegend="目前空床數"
-            totalLegend="全立案床數"
-            @select="({ key }) => updateChartByKey(key)"
-            data-animate
-            data-animate-from="0"
-            data-animate-duration="700"
-            class="[&::-webkit-progress-value]:transition-all [&::-webkit-progress-value]:duration-700 [&::-moz-progress-bar]:transition-all [&::-moz-progress-bar]:duration-700"
-          />
-
-          <ProgressBar
-            :key="`hospitalized-${selectedFacility}`"
-            label="今日住院／當月累積住院"
-            :current="currentFacility.progress.hospitalized.current"
-            :total="currentFacility.progress.hospitalized.total"
-            chartKey="hospitalized"
-            currentLegend="今日住院"
-            totalLegend="當月累積住院"
-            @select="({ key }) => updateChartByKey(key)"
-            data-animate
-            data-animate-from="0"
-            data-animate-duration="700"
-            class="[&::-webkit-progress-value]:transition-all [&::-webkit-progress-value]:duration-700 [&::-moz-progress-bar]:transition-all [&::-moz-progress-bar]:duration-700"
-          />
-
-          <ProgressBar
-            :key="`movein-${selectedFacility}`"
-            label="今日新入住／當月累積入住"
-            :current="currentFacility.progress.movein.current"
-            :total="currentFacility.progress.movein.total"
-            chartKey="movein"
-            currentLegend="今日入住"
-            totalLegend="當月累積入住"
-            @select="({ key }) => updateChartByKey(key)"
-            data-animate
-            data-animate-from="0"
-            data-animate-duration="700"
-            class="[&::-webkit-progress-value]:transition-all [&::-webkit-progress-value]:duration-700 [&::-moz-progress-bar]:transition-all [&::-moz-progress-bar]:duration-700"
-          />
-
-          <ProgressBar
-            :key="`moveout-${selectedFacility}`"
-            label="今日離院／當月累積離院"
-            :current="currentFacility.progress.moveout.current"
-            :total="currentFacility.progress.moveout.total"
-            chartKey="moveout"
-            currentLegend="今日離院"
-            totalLegend="當月累積離院"
-            @select="({ key }) => updateChartByKey(key)"
-            data-animate
-            data-animate-from="0"
-            data-animate-duration="700"
-            class="[&::-webkit-progress-value]:transition-all [&::-webkit-progress-value]:duration-700 [&::-moz-progress-bar]:transition-all [&::-moz-progress-bar]:duration-700"
-          />
-        </div>
+        <ProgressGroup
+          :selected-facility-key="selectedFacility"
+          :items="[
+            {
+              key: 'residents',
+              label: '現在住民／全立案床數',
+              current: currentFacility.progress.residents.current,
+              total: currentFacility.progress.residents.total,
+              currentLegend: '現在住民',
+              totalLegend: '全立案床數',
+            },
+            {
+              key: 'vacancy',
+              label: '目前空床數／全立案床數',
+              current: currentFacility.progress.vacancy.current,
+              total: currentFacility.progress.vacancy.total,
+              currentLegend: '目前空床數',
+              totalLegend: '全立案床數',
+            },
+            {
+              key: 'hospitalized',
+              label: '今日住院／當月累積住院',
+              current: currentFacility.progress.hospitalized.current,
+              total: currentFacility.progress.hospitalized.total,
+              currentLegend: '今日住院',
+              totalLegend: '當月累積住院',
+            },
+            {
+              key: 'movein',
+              label: '今日新入住／當月累積入住',
+              current: currentFacility.progress.movein.current,
+              total: currentFacility.progress.movein.total,
+              currentLegend: '今日入住',
+              totalLegend: '當月累積入住',
+            },
+            {
+              key: 'moveout',
+              label: '今日結案／當月累積結案',
+              current: currentFacility.progress.moveout.current,
+              total: currentFacility.progress.moveout.total,
+              currentLegend: '今日結案',
+              totalLegend: '當月累積結案',
+            },
+          ]"
+          @select="({ key }) => updateActiveKey(key)"
+        />
       </section>
 
-      <!-- 下半：圖表 -->
-      <section
-        class="row-span-4 bg-white/50 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]"
-        >
-          <div ref="chartEl" class="w-full h-full"></div>
-        </div>
-      </section>
+      <!-- 左中間：圖表 -->
+       
+      <TrendChart :active-key="activeKey" :charts="currentFacility.charts" />
 
-      <!-- 葷／素資料 -->
-      <section class="row-span-3 grid grid-cols-2 gap-2">
-        <!-- 葷 -->
-        <div class="col-span-1 bg-white/50 rounded-md shadow p-4">
-          <div
-            class="border border-brand-yellow rounded-md w-full h-full flex flex-col justify-center items-center gap-4"
-          >
-            <div class="relative text-brand-yellow">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="90"
-                height="90"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  fill="currentColor"
-                  d="M13 2.05v3.03c3.39.49 6 3.39 6 6.92c0 .9-.18 1.75-.5 2.54l2.62 1.53c.56-1.24.88-2.62.88-4.07c0-5.18-3.95-9.45-9-9.95M12 19a7 7 0 0 1-7-7c0-3.53 2.61-6.43 6-6.92V2.05c-5.06.5-9 4.76-9 9.95a10 10 0 0 0 10 10c3.3 0 6.23-1.61 8.05-4.09l-2.6-1.53A6.89 6.89 0 0 1 12 19"
-                />
-              </svg>
-              <p
-                class="w-9 h-9 flex justify-center items-center p-2 bg-brand-yellow text-brand-black absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full"
-              >
-                葷
-              </p>
-            </div>
-            <div class="flex gap-4">
-              <div class="flex flex-col justify-center items-start gap-3">
-                <p>總數：{{ currentFacility.diet.meat.total }}</p>
-                <p>一般：{{ currentFacility.diet.meat.normal }}</p>
-              </div>
-              <div class="flex flex-col justify-center items-start gap-3">
-                <p>碎食：{{ currentFacility.diet.meat.soft }}</p>
-                <p>管灌：{{ currentFacility.diet.meat.tube }}</p>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- 素 -->
-        <div class="col-span-1 bg-white/50 rounded-md shadow p-4">
-          <div
-            class="border border-brand-yellow rounded-md w-full h-full flex flex-col justify-center items-center gap-4"
-          >
-            <div class="relative text-brand-yellow">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="90"
-                height="90"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  fill="currentColor"
-                  d="M13 2.05v3.03c3.39.49 6 3.39 6 6.92c0 .9-.18 1.75-.5 2.54l2.62 1.53c.56-1.24.88-2.62.88-4.07c0-5.18-3.95-9.45-9-9.95M12 19a7 7 0 0 1-7-7c0-3.53 2.61-6.43 6-6.92V2.05c-5.06.5-9 4.76-9 9.95a10 10 0 0 0 10 10c3.3 0 6.23-1.61 8.05-4.09l-2.6-1.53A6.89 6.89 0 0 1 12 19"
-                />
-              </svg>
-              <p
-                class="w-9 h-9 flex justify-center items-center p-2 bg-brand-yellow text-brand-black absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full"
-              >
-                素
-              </p>
-            </div>
-            <div class="flex gap-4">
-              <div class="flex flex-col justify-center items-start gap-3">
-                <p>總數：{{ currentFacility.diet.veg.total }}</p>
-                <p>一般：{{ currentFacility.diet.veg.normal }}</p>
-              </div>
-              <div class="flex flex-col justify-center items-start gap-3">
-                <p>碎食：{{ currentFacility.diet.veg.soft }}</p>
-                <p>管灌：{{ currentFacility.diet.veg.tube }}</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
+      <!-- 左下：葷／素資料 -->
+      <DietSummary class="row-span-3" :diet="currentFacility.diet" />
     </section>
 
     <!-- 中間：地圖-->
-    <section
-      class="relative bg-white/50 rounded-md shadow p-3 order-1 lg:order-2 min-h-0 lg:h-full flex flex-col"
-    >
-      <!-- 顯示資訊切換條（置頂置中） -->
-      <div
-        class="absolute top-6 inset-x-0 z-[50] pointer-events-none flex justify-center"
-      >
-        <div
-          class="pointer-events-auto inline-flex items-center text-sm text-brand-gray-dark bg-white bg-opacity-90 border border-gray-300 rounded-md shadow-md ps-3"
-          role="group"
-          aria-label="顯示資訊切換"
-        >
-          <div class="flex items-center">
-            <p class="py-2 pr-2">顯示資訊｜</p>
-            <!-- 不顯示 -->
-            <button
-              :class="[
-                'flex items-center gap-2 px-3 py-2 rounded-md hover:bg-brand-gray-lighter',
-                infoMode === 'none' &&
-                  'bg-brand-purple-dark text-white hover:bg-brand-purple-dark hover:text-white',
-              ]"
-              @click="setInfoMode('none')"
-              :aria-pressed="infoMode === 'none'"
-            >
-              <span class="inline-block">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  viewBox="0 0 15 15"
-                >
-                  <path
-                    fill="currentColor"
-                    d="M3.64 2.27L7.5 6.13l3.84-3.84A.92.92 0 0 1 12 2a1 1 0 0 1 1 1a.9.9 0 0 1-.27.66L8.84 7.5l3.89 3.89A.9.9 0 0 1 13 12a1 1 0 0 1-1 1a.92.92 0 0 1-.69-.27L7.5 8.87l-3.85 3.85A.92.92 0 0 1 3 13a1 1 0 0 1-1-1a.9.9 0 0 1 .27-.66L6.16 7.5L2.27 3.61A.9.9 0 0 1 2 3a1 1 0 0 1 1-1c.24.003.47.1.64.27"
-                  />
-                </svg>
-              </span>
-              <span>不顯示</span>
-            </button>
-            <!-- 入住情況 -->
-            <button
-              :class="[
-                'flex items-center gap-2 px-3 py-2 rounded-md hover:bg-brand-gray-lighter',
-                infoMode === 'residents' &&
-                  'bg-brand-purple-dark text-white hover:bg-brand-purple-dark hover:text-white',
-              ]"
-              @click="setInfoMode('residents')"
-              :aria-pressed="infoMode === 'residents'"
-            >
-              <span class="inline-block">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  viewBox="0 0 16 16"
-                >
-                  <path
-                    fill="currentColor"
-                    d="M3 14s-1 0-1-1s1-4 6-4s6 3 6 4s-1 1-1 1zm5-6a3 3 0 1 0 0-6a3 3 0 0 0 0 6"
-                  />
-                </svg>
-              </span>
-              <span>入住情況</span>
-            </button>
-            <!-- 飲食情況 -->
-            <button
-              :class="[
-                'flex items-center gap-2 px-3 py-2 rounded-md hover:bg-brand-gray-lighter',
-                infoMode === 'diet' &&
-                  'bg-brand-purple-dark text-white hover:bg-brand-purple-dark hover:text-white',
-              ]"
-              @click="setInfoMode('diet')"
-              :aria-pressed="infoMode === 'diet'"
-            >
-              <span class="inline-block">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    fill="currentColor"
-                    d="M17.5 2.75a.75.75 0 0 0-1.5 0v4.015c-2.026-1.358-4.867-.881-6.293 1.215L2.353 18.786c-.556.818-.45 1.91.255 2.608a2.1 2.1 0 0 0 2.667.23l10.79-7.469A4.454 4.454 0 0 0 17.24 8h4.009a.75.75 0 0 0 0-1.5h-2.69l3.22-3.22a.75.75 0 0 0-1.06-1.06L17.5 5.439z"
-                  />
-                </svg>
-              </span>
-              <span>飲食情況</span>
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <!-- 地圖本體 -->
-      <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]"
-      ></div>
-    </section>
+    <MapPane
+      class="order-1 lg:order-2"
+      v-model:infoMode="infoMode"
+      :dataset="FACILITY_DATA"
+      @select-facility="selectFacility"
+    />
 
     <!-- 右側：表格（今日活動 / 今日異常事件 / 今日派車總表） -->
     <section class="flex flex-col gap-2 order-4 lg:order-3">
       <!-- 今日活動 -->
       <section
-        class="bg-white/50 rounded-md shadow p-6 flex flex-col min-h-0 gap-3 h-[360px]"
+        class="bg-white/30 rounded-md shadow p-6 flex flex-col min-h-0 gap-3 h-[360px]"
       >
         <!-- ❶ 標題列：左右分佈 -->
         <div class="flex items-center justify-between">
@@ -444,7 +173,7 @@
 
           <!-- 置中面板 -->
           <div
-            class="relative bg-white rounded-lg shadow-xl w-[48vw] max-w-6xl h-[84vh] p-6 flex flex-col gap-6"
+            class="relative bg-white rounded-lg shadow-md w-[92vw] sm:w-[80vw] md:w-[70vw] lg:w-[48vw] max-w-6xl h-[84vh] p-6 flex flex-col gap-6 overflow-y-auto"
           >
             <!-- FullCalendar 容器 -->
             <div class="flex justify-start items-center">
@@ -473,7 +202,7 @@
 
       <!-- 今日異常事件 -->
       <section
-        class="bg-white/50 rounded-md shadow p-6 flex flex-col min-h-0 gap-3 h-[360px]"
+        class="bg-white/30 rounded-md shadow p-6 flex flex-col min-h-0 gap-3 h-[360px]"
       >
         <h3 class="text-2xl font-bold">今日異常事件</h3>
         <div class="flex-1 overflow-y-auto">
@@ -529,7 +258,7 @@
 
       <!-- 今日派車總表 -->
       <section
-        class="bg-white/50 rounded-md shadow p-6 flex flex-col min-h-0 gap-3 h-[360px]"
+        class="bg-white/30 rounded-md shadow p-6 flex flex-col min-h-0 gap-3 h-[360px]"
       >
         <h3 class="text-2xl font-bold">今日派車總表</h3>
         <div class="flex-1 overflow-y-auto">
@@ -586,14 +315,12 @@
 </template>
 
 <script setup>
-// ===== Imports =====
 import FullCalendar from "@fullcalendar/vue3";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import listPlugin from "@fullcalendar/list";
 import zhTw from "@fullcalendar/core/locales/zh-tw";
-import ProgressBar from "./ProgressBar.vue";
 import {
   ref,
   watch,
@@ -602,59 +329,14 @@ import {
   onBeforeUnmount,
   nextTick,
 } from "vue";
-import * as echarts from "echarts";
-import L from "leaflet";
-import "leaflet/dist/leaflet.css";
+import FacilityHeaderInfo from "./components/FacilityHeaderInfo.vue";
+import ProgressGroup from "./components/ProgressGroup.vue";
+import TrendChart from "./components/TrendChart.vue";
+import DietSummary from "./components/DietSummary.vue";
+import MapPane from "./components/MapPane.vue";
 import { brand } from "@/styles/palette";
 
-// ===== Constants / Static Config =====
-// 高雄「緊」與「鬆」的地圖邊界
-const KAOHSIUNG_BOUNDS_TIGHT = L.latLngBounds([22.45, 120.15], [22.95, 120.55]);
-const KAOHSIUNG_BOUNDS_LOOSE = L.latLngBounds([22.35, 120.0], [23.05, 120.75]);
-
-// 六個據點（固定座標，無需發 fetch）
-const LOCATIONS = [
-  {
-    name: "A 機構",
-    addr: "高雄市楠梓區立仁街131、133號",
-    lat: 22.7409648895,
-    lng: 120.3354644775,
-  },
-  {
-    name: "B 機構",
-    addr: "高雄市楠梓區常德路317巷9弄27號",
-    lat: 22.7366924286,
-    lng: 120.3363342285,
-  },
-  {
-    name: "C 機構",
-    addr: "高雄市楠梓區宏昌街135、137號",
-    lat: 22.717588,
-    lng: 120.29406,
-  },
-  {
-    name: "D 機構",
-    addr: "高雄市左營區民族一路980號",
-    lat: 22.678054,
-    lng: 120.3192,
-  },
-  {
-    name: "E 機構",
-    addr: "高雄市三民區黃興路336號",
-    lat: 22.651488,
-    lng: 120.33731,
-  },
-  {
-    name: "F 機構",
-    addr: "高雄市小港區沿海一路377號",
-    lat: 22.5644512177,
-    lng: 120.3544540405,
-  },
-];
-
-// 以 BASE_URL 為前綴，避免根目錄／子目錄路徑差異
-const base = import.meta.env.BASE_URL;
-const iconBase = `${base}img/leaflet/`;
+const base = import.meta.env.BASE_URL || "/";
 
 // building_1 = 總部，2~7 = 六家機構
 const FACILITY_ASSETS = {
@@ -667,19 +349,7 @@ const FACILITY_ASSETS = {
   "F 機構": `${base}img/building/building_7.jpg`,
 };
 
-// Leaflet 預設圖標
-const defaultIcon = L.icon({
-  iconUrl: `${iconBase}marker-icon.png`,
-  iconRetinaUrl: `${iconBase}marker-icon-2x.png`,
-  shadowUrl: `${iconBase}marker-shadow.png`,
-  iconSize: [25, 41],
-  iconAnchor: [12, 41],
-  popupAnchor: [1, -34],
-  shadowSize: [41, 41],
-});
-L.Marker.prototype.options.icon = defaultIcon;
-
-// ===== Facility Mock Data (單一真實來源) =====
+// ===== Facility Data=====
 const FACILITY_DATA = {
   ALL: {
     desc: "ＯＯ長期照顧集團——在全台各地皆有眾多據點，整合醫護團隊與專業照護人員，提供高齡照護服務總部。",
@@ -712,7 +382,7 @@ const FACILITY_DATA = {
         b: [4, 8, 12, 17, 22, 30, 36],
       },
       moveout: {
-        legends: ["今日離院", "當月累積離院"],
+        legends: ["今日結案", "當月累積結案"],
         a: [1, 2, 1, 3, 2, 1, 2],
         b: [5, 7, 9, 12, 14, 15, 17],
       },
@@ -753,7 +423,7 @@ const FACILITY_DATA = {
         b: [2, 4, 6, 8, 9, 10, 12],
       },
       moveout: {
-        legends: ["今日離院", "累積離院"],
+        legends: ["今日結案", "累積結案"],
         a: [0, 1, 0, 1, 0, 1, 0],
         b: [1, 3, 4, 6, 7, 8, 10],
       },
@@ -794,7 +464,7 @@ const FACILITY_DATA = {
         b: [2, 4, 6, 8, 9, 10, 11],
       },
       moveout: {
-        legends: ["今日離院", "累積離院"],
+        legends: ["今日結案", "累積結案"],
         a: [0, 1, 0, 0, 0, 0, 1],
         b: [1, 3, 4, 6, 7, 8, 9],
       },
@@ -835,7 +505,7 @@ const FACILITY_DATA = {
         b: [3, 5, 7, 9, 10, 11, 13],
       },
       moveout: {
-        legends: ["今日離院", "累積離院"],
+        legends: ["今日結案", "累積結案"],
         a: [0, 1, 0, 1, 0, 1, 2],
         b: [2, 4, 6, 7, 9, 10, 11],
       },
@@ -876,7 +546,7 @@ const FACILITY_DATA = {
         b: [2, 4, 6, 7, 8, 9, 10],
       },
       moveout: {
-        legends: ["今日離院", "累積離院"],
+        legends: ["今日結案", "累積結案"],
         a: [0, 1, 0, 0, 1, 0, 2],
         b: [1, 3, 4, 6, 7, 8, 9],
       },
@@ -917,7 +587,7 @@ const FACILITY_DATA = {
         b: [2, 4, 6, 7, 8, 9, 10],
       },
       moveout: {
-        legends: ["今日離院", "累積離院"],
+        legends: ["今日結案", "累積結案"],
         a: [0, 0, 1, 0, 0, 0, 1],
         b: [1, 2, 4, 5, 6, 7, 8],
       },
@@ -958,7 +628,7 @@ const FACILITY_DATA = {
         b: [1, 3, 4, 5, 6, 8, 9],
       },
       moveout: {
-        legends: ["今日離院", "累積離院"],
+        legends: ["今日結案", "累積結案"],
         a: [0, 1, 0, 0, 0, 0, 1],
         b: [1, 2, 3, 4, 5, 6, 7],
       },
@@ -990,426 +660,22 @@ const facilityDisplayName = computed(() =>
 );
 
 // ===== Utilities =====
-function last7DaysLabels() {
-  const labels = [];
-  const now = new Date();
-  for (let i = 6; i >= 0; i--) {
-    const d = new Date(now);
-    d.setDate(now.getDate() - i);
-    labels.push(`${d.getMonth() + 1}/${d.getDate()}`);
-  }
-  return labels;
-}
-
-function mkTitle(text, subtext = "", opts = {}) {
-  return {
-    text,
-    subtext,
-    left: "center",
-    top: 12,
-    itemGap: 8,
-    textStyle: {
-      color: brand.black,
-      fontSize: 20,
-      fontWeight: 600,
-      fontFamily: '"Noto Sans TC"',
-    },
-    subtextStyle: {
-      color: brand.gray,
-      fontSize: 14,
-      fontWeight: 400,
-      fontFamily: '"Noto Sans TC"',
-      lineHeight: 20,
-    },
-    ...opts,
-  };
-}
-
-// ===== Charts (ECharts) =====
-const chartEl = ref(null);
-let chart = null;
-
-function updateChartByKey(key) {
+function updateActiveKey(key) {
   activeKey.value = key;
-  const conf = currentFacility.value.charts[key];
-  if (!chart || !conf) return;
-
-  const title = `${conf.legends[0]} ／ ${conf.legends[1]}`;
-  const subTitle = "（近 7 天）";
-
-  chart.setOption({
-    color: [brand.green, brand.purple],
-    title: mkTitle(title, subTitle),
-    grid: { top: 84, left: 36, right: 16, bottom: 56, containLabel: true },
-    tooltip: { trigger: "axis", axisPointer: { type: "line" }, confine: true },
-    xAxis: {
-      type: "category",
-      boundaryGap: false,
-      data: last7DaysLabels(),
-      axisLine: { lineStyle: { color: brand.gray } },
-      axisTick: { show: false },
-      axisLabel: { color: brand.gray },
-      splitLine: { show: false },
-    },
-    legend: {
-      data: conf.legends,
-      bottom: 8,
-      icon: "circle",
-      itemWidth: 10,
-      itemHeight: 10,
-      itemGap: 24,
-      textStyle: { color: brand.gray },
-    },
-    yAxis: {
-      type: "value",
-      name: "數量",
-      nameLocation: "middle",
-      nameGap: 52,
-      nameTextStyle: { padding: [0, 8, 0, 8] },
-      axisLine: { show: true },
-      axisTick: { show: true },
-      axisLabel: { color: brand.gray },
-      splitLine: { show: true, lineStyle: { color: brand.grayLight } },
-      splitArea: {
-        show: true,
-        areaStyle: { color: [brand.white, brand.grayLighter] },
-      },
-    },
-    series: [
-      {
-        name: conf.legends[0],
-        type: "line",
-        data: conf.a,
-        symbol: "circle",
-        symbolSize: 6,
-        lineStyle: { width: 2 },
-      },
-      {
-        name: conf.legends[1],
-        type: "line",
-        data: conf.b,
-        symbol: "circle",
-        symbolSize: 6,
-        lineStyle: { width: 2 },
-      },
-    ],
-  });
-}
-
-// ===== Map (Leaflet) =====
-const mapEl = ref(null);
-let map = null;
-let markers = [];
-
-function getResidentsHtml(name) {
-  const f = FACILITY_DATA[name];
-  const p = f?.progress || {};
-  const residents = p.residents
-    ? [p.residents.current, p.residents.total]
-    : [0, 0];
-  const vacancy = p.vacancy ? [p.vacancy.current, p.vacancy.total] : [0, 0];
-  const hosp = p.hospitalized
-    ? [p.hospitalized.current, p.hospitalized.total]
-    : [0, 0];
-  return `
-<div class="tip p-2" style="cursor:pointer; touch-action:none; overscroll-behavior:contain" data-facility="${name}">
-  <div class="flex flex-col gap-2">
-    <div class="inline-flex justify-between items-center text-brand-purple-dark font-noto">
-      <div class="inline-flex justify-start items-center gap-1">
-        <span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M5 19v-8.692q0-.384.172-.727t.474-.565l5.385-4.078q.423-.323.966-.323t.972.323l5.385 4.077q.303.222.474.566q.172.343.172.727V19q0 .402-.299.701T18 20h-3.384q-.344 0-.576-.232q-.232-.233-.232-.576v-4.769q0-.343-.232-.575q-.233-.233-.576-.233h-2q-.343 0-.575.233q-.233.232-.233.575v4.77q0 .343-.232.575T9.385 20H6q-.402 0-.701-.299T5 19"/></svg></span>
-        <strong class="text-[14px]">${name}</strong>
-      </div>
-      <div><span class="text-brand-gray/50"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5"/></svg></span></div>
-    </div>
-    <div class="inline-block rounded-md border border-brand-gray/30 overflow-hidden">
-      <table class="table-fixed min-w-[180px] border-collapse">
-        <thead class="bg-brand-purple-light text-brand-black">
-          <tr class="text-center">
-            <th class="text-[14px] p-2 text-center border-r border-brand-gray/30 w-[80px]">住民</th>
-            <th class="text-[14px] p-2 text-center border-r border-brand-gray/30 w-[80px]">空床</th>
-            <th class="text-[14px] p-2 text-center w-[80px]">住院</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr class="text-center">
-            <td class="px-3 py-1 border-r border-brand-gray/30 w-[80px]"><span class="font-nats text-xl text-brand-purple-dark">${residents[0]} / ${residents[1]}</span></td>
-            <td class="px-3 py-1 border-r border-brand-gray/30 w-[80px]"><span class="font-nats text-xl text-brand-purple-dark">${vacancy[0]} / ${vacancy[1]}</span></td>
-            <td class="px-3 py-1 w-[80px]"><span class="font-nats text-xl text-brand-purple-dark">${hosp[0]} / ${hosp[1]}</span></td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>`;
-}
-
-function getDietHtml(name) {
-  const d = FACILITY_DATA[name]?.diet || {
-    meat: { total: 0, normal: 0, soft: 0, tube: 0 },
-    veg: { total: 0, normal: 0, soft: 0, tube: 0 },
-  };
-  return `
-<div class="tip p-2" style="cursor:pointer; touch-action:none; overscroll-behavior:contain" data-facility="${name}">
-  <div class="flex flex-col gap-2">
-    <div class="inline-flex justify-between items-center text-brand-purple-dark font-noto">
-      <div class="inline-flex justify-start items-center gap-1">
-        <span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M5 19v-8.692q0-.384.172-.727t.474-.565l5.385-4.078q.423-.323.966-.323t.972.323l5.385 4.077q.303.222.474.566q.172.343.172.727V19q0 .402-.299.701T18 20h-3.384q-.344 0-.576-.232q-.232-.233-.232-.576v-4.769q0-.343-.232-.575q-.233-.233-.576-.233h-2q-.343 0-.575.233q-.233.232-.233.575v4.77q0 .343-.232.575T9.385 20H6q-.402 0-.701-.299T5 19"/></svg></span>
-        <strong class="text-[14px]">${name}</strong>
-      </div>
-      <div><span class="text-brand-gray/50"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="currentColor" d="M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5"/></svg></span></div>
-    </div>
-    <div class="inline-block rounded-md border border-brand-gray/30 overflow-hidden">
-      <table class="table-fixed w-[240px] min-w-[200px] border-collapse">
-        <thead class="bg-brand-purple-light text-brand-black">
-          <tr class="text-center">
-            <th class="p-2 text-center border-r border-brand-gray/30 w-[60px] text-[14px]">類別</th>
-            <th class="p-2 text-center border-r border-brand-gray/30 w-[60px] text-[14px]">總數</th>
-            <th class="p-2 text-center border-r border-brand-gray/30 w-[60px] text-[14px]">一般</th>
-            <th class="p-2 text-center border-r border-brand-gray/30 w-[60px] text-[14px]">碎食</th>
-            <th class="p-2 text-center w-[60px] text-[14px]">管灌</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr class="text-center border-b border-brand-gray/30">
-            <td class="px-2 py-1 border-r border-brand-gray/30 w-[60px]"><span class="text-[14px] font-noto text-brand-dark">葷</span></td>
-            <td class="px-2 py-1 border-r border-brand-gray/30 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.meat.total}</span></td>
-            <td class="px-2 py-1 border-r border-brand-gray/30 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.meat.normal}</span></td>
-            <td class="px-2 py-1 border-r border-brand-gray/30 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.meat.soft}</span></td>
-            <td class="px-2 py-1 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.meat.tube}</span></td>
-          </tr>
-          <tr class="text-center">
-            <td class="px-2 py-1 border-r border-brand-gray/30 w-[60px]"><span class="text-[14px] font-noto text-brand-dark">素</span></td>
-            <td class="px-2 py-1 border-r border-brand-gray/30 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.veg.total}</span></td>
-            <td class="px-2 py-1 border-r border-brand-gray/30 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.veg.normal}</span></td>
-            <td class="px-2 py-1 border-r border-brand-gray/30 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.veg.soft}</span></td>
-            <td class="px-2 py-1 w-[60px]"><span class="font-nats text-xl text-brand-purple-dark">${d.veg.tube}</span></td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>`;
-}
-
-function getTooltipHtml(mode, name) {
-  if (mode === "residents") return getResidentsHtml(name);
-  if (mode === "diet") return getDietHtml(name);
-  return "";
 }
 
 function selectFacility(name) {
   selectedFacility.value = FACILITY_DATA[name] ? name : "ALL";
-  nextTick(() => updateChartByKey(activeKey.value));
-}
-
-function refreshAllTooltips() {
-  if (!markers?.length) return;
-  for (const m of markers) m.getTooltip?.()?.update?.();
 }
 
 function resetFacility() {
   // 回到初始：全部機構 + 保留目前圖表類型
   selectedFacility.value = "ALL";
   nextTick(() => {
-    updateChartByKey(activeKey.value);
+    updateActiveKey(activeKey.value);
   });
 }
 
-function syncTooltips() {
-  if (!Array.isArray(markers)) return;
-  const iconH =
-    (defaultIcon.options.iconSize && defaultIcon.options.iconSize[1]) || 41;
-  const offset = [0, -(iconH + 8)];
-
-  for (const m of markers) {
-    const name = m.__name || m.options?.title || "";
-
-    if (infoMode.value === "none") {
-      m.unbindTooltip?.();
-      continue;
-    }
-
-    const html = getTooltipHtml(infoMode.value, name);
-    const cur = m.getTooltip?.();
-    const needsRebind = !cur || cur.getContent?.() !== html;
-
-    if (needsRebind) {
-      m.unbindTooltip?.();
-      m.bindTooltip(html, {
-        permanent: true,
-        direction: "top",
-        offset,
-        opacity: 0.95,
-        interactive: true,
-      });
-    }
-
-    // 掛上 click
-    // 掛上事件：全面阻止滾動／焦點帶來的捲動，再執行 select
-    const t = m.getTooltip?.();
-    if (t && typeof t.getElement === "function") {
-      const el = t.getElement();
-      if (el && !el.__bound) {
-        el.__bound = true;
-        el.style.cursor = "pointer";
-        el.setAttribute("tabindex", "-1"); // 避免被聚焦造成 scroll-into-view
-
-        // 會造成頁面或容器滾動的事件一律攔截
-        const block = (ev) => {
-          ev.preventDefault();
-          ev.stopPropagation();
-        };
-
-        // 滑鼠／指標／觸控的「按下／移動／滾動」事件，全部阻止預設
-        [
-          "wheel",
-          "mousewheel",
-          "DOMMouseScroll",
-          "touchstart",
-          "touchmove",
-          "pointerdown",
-          "pointermove",
-          "mousedown",
-          "mousemove",
-        ].forEach((type) => {
-          el.addEventListener(type, block, { passive: false });
-        });
-
-        // 點擊行為：先攔截，再執行你的選取邏輯
-        el.addEventListener(
-          "click",
-          (e) => {
-            block(e);
-            const facility = el.getAttribute("data-facility") || name;
-            selectFacility(facility);
-          },
-          { passive: false }
-        );
-
-        // 也順手擋掉雙擊（避免瀏覽器雙擊選字或縮放）
-        el.addEventListener("dblclick", block, { passive: false });
-      }
-    }
-  }
-  const m = map;
-  if (m?.invalidateSize) {
-    requestAnimationFrame(() => {
-      m?.invalidateSize?.();
-      refreshAllTooltips();
-    });
-  }
-}
-
-// ===== Lifecycle (mount/unmount) =====
-onMounted(() => {
-  // ECharts
-  if (chartEl.value) {
-    chart = echarts.init(chartEl.value);
-    updateChartByKey(activeKey.value);
-  }
-
-  // Leaflet Map
-  if (mapEl.value) {
-    map = L.map(mapEl.value, {
-      center: [22.6273, 120.3014],
-      zoom: 13,
-      minZoom: 12,
-      maxZoom: 20,
-      zoomSnap: 0.25,
-      zoomDelta: 0.25,
-      maxBounds: KAOHSIUNG_BOUNDS_LOOSE,
-      maxBoundsViscosity: 0.8,
-      preferCanvas: true,
-      zoomControl: false,
-    });
-
-    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
-      maxZoom: 20,
-      attribution:
-        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-    }).addTo(map);
-
-    const group = L.featureGroup();
-    markers = [];
-    LOCATIONS.forEach((p) => {
-      const m = L.marker([p.lat, p.lng], { title: p.name });
-      m.__name = p.name;
-      m.addTo(group);
-      markers.push(m);
-    });
-    group.addTo(map);
-
-    const bounds = group.getBounds().pad(0.06);
-    map.fitBounds(bounds, {
-      paddingTopLeft: [24, 140],
-      paddingBottomRight: [24, 24],
-      maxZoom: 15,
-    });
-
-    // 初次依當前模式綁定 tooltip
-    syncTooltips();
-
-    // 初始後多次 invalidateSize，避免白屏
-    requestAnimationFrame(() => {
-      const m = map; // 先「快照」目前的 map
-      m?.invalidateSize?.();
-      requestAnimationFrame(() => {
-        m?.invalidateSize?.();
-        refreshAllTooltips();
-      });
-    });
-
-    // 互動後更新 tooltip 位置
-    map.on("zoomend", refreshAllTooltips);
-    map.on("moveend", refreshAllTooltips);
-    map.on("resize", refreshAllTooltips);
-
-    // 視窗尺寸改變
-    const onResize = () => {
-      chart?.resize?.();
-      map?.invalidateSize?.();
-      refreshAllTooltips();
-    };
-    window.addEventListener("resize", onResize);
-    map.__onResize = onResize;
-  }
-});
-
-onBeforeUnmount(() => {
-  if (map?.__onResize) window.removeEventListener("resize", map.__onResize);
-  if (chart?.__onResize) window.removeEventListener("resize", chart.__onResize);
-
-  if (map) {
-    map.off("zoomend", refreshAllTooltips);
-    map.off("moveend", refreshAllTooltips);
-    map.off("resize", refreshAllTooltips);
-    map.remove();
-    map = null;
-  }
-  if (chart) {
-    chart.dispose();
-    chart = null;
-  }
-});
-
-// ===== Watches =====
-watch(infoMode, async () => {
-  await nextTick();
-  // 兩次 rAF 確保尺寸穩定
-  requestAnimationFrame(() => {
-    syncTooltips();
-    requestAnimationFrame(() => {
-      map?.invalidateSize?.();
-      refreshAllTooltips();
-    });
-  });
-});
-
-watch(selectedFacility, () => {
-  // 切換機構時，更新圖表即可；左欄資料用 computed 自動更新
-  nextTick(() => updateChartByKey(activeKey.value));
-});
-
 // ===== Right Pane Tables (保留原有假資料與分頁) =====
 // ====== 今日活動：擴充為六家機構的「今日」假資料 ======
 const today = new Date();
@@ -1503,6 +769,7 @@ const fcButtonVars = computed(() => ({
   "--btn-font": "14px",
   "--btn-radius": "5px",
   "--btn-minw": "40px",
+  "--btn-icon": "16px",
 }));
 
 const calendarOptions = computed(() => ({
@@ -1557,23 +824,6 @@ const pagedDispatchRows = computed(() =>
     (dispatchPage.value - 1) * dispatchPageSize + dispatchPageSize
   )
 );
-
-// ===== Expose (for template use if needed) =====
-// activeKey, selectedFacility, infoMode, currentFacility, updateChartByKey, setInfoMode
-function setInfoMode(mode) {
-  infoMode.value = mode;
-  nextTick(() => {
-    const m = map;
-    if (!m) return;
-    requestAnimationFrame(() => {
-      m?.invalidateSize?.();
-      requestAnimationFrame(() => {
-        m?.invalidateSize?.();
-        refreshAllTooltips();
-      });
-    });
-  });
-}
 </script>
 
 <style scoped>
diff --git a/src/pages/nursing/index.vue b/src/pages/nursing/index.vue
index 51418f5..174ceb4 100644
--- a/src/pages/nursing/index.vue
+++ b/src/pages/nursing/index.vue
@@ -56,13 +56,13 @@
         </div>
       </div>
 
-      <!-- 今日離院 Card -->
+      <!-- 今日結案 Card -->
       <div
         class="col-span-1 cursor-pointer text-white bg-brand-green hover:bg-brand-green hover:opacity-80 active:opacity-70 rounded-md shadow px-4 pt-3 flex flex-col justify-center items-start tracking-widest"
         @click="openPanel('discharges')"
       >
         <div class="flex justify-center items-center gap-4">
-          <p>今日離院／當月累積離院</p>
+          <p>今日結案／當月累積結案</p>
           <span>
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -96,7 +96,7 @@
         <!-- A. 未完成的知會事項與代辦事項-->
         <div v-if="!showPanel" key="todos" class="absolute inset-0">
           <section
-            class="bg-white/50 rounded-md shadow p-6 flex flex-col min-h-0 gap-4 h-full"
+            class="bg-white/30 rounded-md shadow p-6 flex flex-col min-h-0 gap-4 h-full"
           >
             <h3 class="text-2xl font-bold">未完成的知會事項與代辦事項</h3>
             <div class="flex flex-col gap-4 mb-6 flex-1 min-h-0">
@@ -169,7 +169,7 @@
         <!-- B. Panel -->
         <div v-else key="panel" class="absolute inset-0">
           <section
-            class="relative w-full h-full bg-white/50 backdrop-blur-sm rounded-md shadow overflow-hidden p-0"
+            class="relative w-full h-full bg-white/30 backdrop-blur-sm rounded-md shadow overflow-hidden p-0"
             role="region"
             :aria-labelledby="'panel-title'"
           >
@@ -324,7 +324,7 @@
                     </div>
                   </div>
 
-                  <!-- 內容：今日離院（底部固定分頁；移出 scroll） -->
+                  <!-- 內容：今日結案（底部固定分頁；移出 scroll） -->
                   <div v-else-if="panelType === 'discharges'" class="space-y-8">
                     <div class="overflow-x-auto">
                       <table
@@ -479,7 +479,7 @@ const panelType = ref(null);
 const panelTitle = computed(() => {
   if (panelType.value === "residents") return "住民資訊";
   if (panelType.value === "inpatients") return "住院資訊";
-  if (panelType.value === "discharges") return "今日離院";
+  if (panelType.value === "discharges") return "今日結案";
   return "";
 });
 function openPanel(type) {
diff --git a/src/pages/operation/index.vue b/src/pages/operation/index.vue
index 5c63ecc..d697f40 100644
--- a/src/pages/operation/index.vue
+++ b/src/pages/operation/index.vue
@@ -4,7 +4,7 @@
     <div class="flex-[2] grid grid-cols-3 gap-2 max-h-[150px]">
       <!-- 住民人數 Card -->
       <div
-        class="col-span-1 cursor-pointer text-white bg-brand-green hover:bg-brand-green hover:opacity-80 active:opacity-70 rounded-md shadow px-4 pt-3 flex flex-col justify-center items-start tracking-widest"
+        class="col-span-1 cursor-pointer text-white bg-brand-green hover:bg-brand-green hover:opacity-80 active:opacity-70 rounded-md  shadow-md px-4 pt-3 flex flex-col justify-center items-start tracking-widest"
         @click="openPanel('residents')"
       >
         <div class="flex justify-center items-center gap-4">
@@ -31,7 +31,7 @@
 
       <!-- 住院人數 Card -->
       <div
-        class="col-span-1 cursor-pointer text-white bg-brand-green hover:bg-brand-green hover:opacity-80 active:opacity-70 rounded-md shadow px-4 pt-3 flex flex-col justify-center items-start tracking-widest"
+        class="col-span-1 cursor-pointer text-white bg-brand-green hover:bg-brand-green hover:opacity-80 active:opacity-70 rounded-md shadow-md px-4 pt-3 flex flex-col justify-center items-start tracking-widest"
         @click="openPanel('inpatients')"
       >
         <div class="flex justify-center items-center gap-4">
@@ -56,13 +56,13 @@
         </div>
       </div>
 
-      <!-- 今日離院 Card -->
+      <!-- 今日結案 Card -->
       <div
-        class="col-span-1 cursor-pointer text-white bg-brand-green hover:bg-brand-green hover:opacity-80 active:opacity-70 rounded-md shadow px-4 pt-3 flex flex-col justify-center items-start tracking-widest"
+        class="col-span-1 cursor-pointer text-white bg-brand-green hover:bg-brand-green hover:opacity-80 active:opacity-70 rounded-md shadow-md px-4 pt-3 flex flex-col justify-center items-start tracking-widest"
         @click="openPanel('discharges')"
       >
         <div class="flex justify-center items-center gap-4">
-          <p>今日離院／當月累積離院</p>
+          <p>今日結案／當月累積結案</p>
           <span>
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -99,18 +99,18 @@
           <div class="flex flex-col gap-2 w-full h-full">
             <div class="flex-[5] grid grid-cols-2 gap-2 min-h-0">
               <div
-                class="col-span-1 bg-white/50 rounded-md shadow p-2 flex justify-center items-center"
+                class="col-span-1 bg-white/30 rounded-md shadow-md p-2 flex justify-center items-center"
               >
                 <div ref="chartARef" class="w-full h-[90%] min-h-[200px]"></div>
               </div>
               <div
-                class="col-span-1 bg-white/50 rounded-md shadow p-2 flex justify-center items-center"
+                class="col-span-1 bg-white/30 rounded-md shadow-md p-2 flex justify-center items-center"
               >
                 <div ref="chartBRef" class="w-full h-[90%] min-h-[200px]"></div>
               </div>
             </div>
             <div
-              class="bg-white/50 rounded-md shadow p-2 flex flex-col justify-center items-start flex-[5] min-h-0"
+              class="bg-white/30 rounded-md shadow-md p-2 flex flex-col justify-center items-start flex-[5] min-h-0"
             >
               <div ref="chartCRef" class="w-full h-[90%] min-h-[200px]"></div>
             </div>
@@ -120,7 +120,7 @@
         <!-- B. Panel -->
         <div v-else key="panel" class="absolute inset-0">
           <section
-            class="relative w-full h-full bg-white/50 rounded-md shadow overflow-hidden p-0"
+            class="relative w-full h-full bg-white/30 rounded-md shadow-md overflow-hidden p-0"
             role="region"
             :aria-labelledby="'panel-title'"
           >
@@ -273,7 +273,7 @@
                     </div>
                   </div>
 
-                  <!-- 內容：今日離院（表格用分頁資料） -->
+                  <!-- 內容：今日結案（表格用分頁資料） -->
                   <div v-else-if="panelType === 'discharges'" class="space-y-8">
                     <div class="overflow-x-auto">
                       <table
@@ -609,7 +609,7 @@ function buildOptionA(collapsedStage = "median") {
     title: mkTitle("佔床率", "（近 6 個月）"),
     tooltip: {
       trigger: "item",
-      axisPointer: { type: "shadow" },
+      axisPointer: { type: "shadow-md" },
       formatter: boxTooltipTW,
     },
     grid: commonGrid,
@@ -657,7 +657,7 @@ function buildOptionB(collapsedStage = "median") {
     title: mkTitle("住院率", "（近 6 個月）"),
     tooltip: {
       trigger: "item",
-      axisPointer: { type: "shadow" },
+      axisPointer: { type: "shadow-md" },
       formatter: boxTooltipTW,
     },
     grid: commonGrid,
@@ -699,7 +699,7 @@ function buildOptionC() {
     Number((v + Math.sin(i / 3) * 1.5).toFixed(1))
   );
   return {
-    title: mkTitle("每日佔床率比較", "（近 30 天）"),
+    title: mkTitle("各單位每日佔床率", "（近 30 天）"),
     legend: { top: 28, data: ["機構 A", "本機構", "機構 B"] },
     tooltip: { trigger: "axis", valueFormatter: (v) => `${v}%` },
     grid: { ...commonGrid, top: 64 },
@@ -781,7 +781,7 @@ const panelType = ref(null);
 const panelTitle = computed(() => {
   if (panelType.value === "residents") return "住民資訊";
   if (panelType.value === "inpatients") return "住院資訊";
-  if (panelType.value === "discharges") return "今日離院";
+  if (panelType.value === "discharges") return "今日結案";
   return "";
 });
 function openPanel(type) {
diff --git a/src/styles/palette.js b/src/styles/palette.js
index fab2173..5f847ee 100644
--- a/src/styles/palette.js
+++ b/src/styles/palette.js
@@ -12,8 +12,8 @@ export const brand = {
   yellowDark: "#C4E920",
   black: "#424242",
   gray: "#828282",
-  grayLight: "#E9E9E9",
-  grayLighter: "#F6F6F6",
+  grayLight: "#CACACA",
+  grayLighter: "#EEEEEE",
   grayDark: "#D2D2D2",
   white: "#ffffff"
 };
diff --git a/tailwind.config.js b/tailwind.config.js
index 13efe62..33277e7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -40,11 +40,17 @@ module.exports = {
       },
       colors: {
         brand: {
-          green: { DEFAULT: "#34D5C8", light: "#C4FBE5", dark: "#0CA99C" },
+          green: {
+            DEFAULT: "#34D5C8",
+            light: "#C4FBE5",
+            lighter: "#F2F9F6",
+            dark: "#0CA99C",
+          },
           red: "#FF8678",
           purple: {
             DEFAULT: "#A5BEFF",
             light: "#D5E1FF",
+            lighter: "#EFF1F6",
             dark: "#7089CA",
           },
           yellow: {
@@ -55,7 +61,7 @@ module.exports = {
           gray: {
             DEFAULT: "#828282",
             lighter: "#EEEEEE",
-            light: "#E9E9E9",
+            light: "#CACACA",
             dark: "#767676",
           },
         },
