From 2093a6161a1351fe29df4d5f318e9e9a565829b0 Mon Sep 17 00:00:00 2001
From: "MJM_2025_05\\polly" <polly.hsu@mjmtech.com.tw>
Date: Tue, 9 Sep 2025 09:03:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20navBar=20=E6=AF=9B?=
 =?UTF-8?q?=E7=8E=BB=E7=92=83=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/NavBar.vue         | 121 +++++++++++++++------------------
 src/pages/home/ProgressBar.vue |   2 +-
 src/pages/home/index.vue       |  48 ++++++++++---
 3 files changed, 94 insertions(+), 77 deletions(-)

diff --git a/src/layouts/NavBar.vue b/src/layouts/NavBar.vue
index 845ed1f..e31996a 100644
--- a/src/layouts/NavBar.vue
+++ b/src/layouts/NavBar.vue
@@ -1,10 +1,10 @@
 <template>
   <nav
-    class="fixed top-0 w-full h-14 lg:h-16 bg-white/50 backdrop-blur-sm shadow-md flex justify-between 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/50 backdrop-blur-sm shadow-md grid grid-cols-[1fr_auto_1fr] items-center px-4 sm:px-6 lg:px-8 z-[80]"
   >
     <!-- 左側：Logo + 機構切換 -->
     <div
-      class="flex items-center gap-4 sm:gap-8 shrink-0 w-[240px] md:w-[280px] lg:w-[340px]"
+      class="col-span-1 justify-self-start flex items-center gap-4 sm:gap-8 shrink-0 w-[240px] md:w-[280px] lg:w-[340px]"
     >
       <RouterLink to="/" class="h-9 md:h-11">
         <img src="/img/logo.png" alt="Logo" class="h-full w-auto" />
@@ -22,7 +22,6 @@
           @keydown.enter.prevent="toggleFacility"
           @keydown.space.prevent="toggleFacility"
         >
-          <!-- 直接顯示，不再隱藏 -->
           <span class="tracking-wider">{{ displayLabel }}</span>
           <!-- caret icon -->
           <svg
@@ -37,11 +36,11 @@
           </svg>
         </div>
 
-        <!-- Dropdown-->
+        <!-- Dropdown -->
         <div
           v-show="isFacilityOpen"
           ref="panelRef"
-          class="absolute top-12 left-0 md:top-12 md:left-0 lg: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-gray-100 bg-white shadow-lg p-2"
           @click.stop
         >
           <ul class="max-h-48 overflow-y-auto text-brand-black">
@@ -59,49 +58,53 @@
       </div>
     </div>
 
-    <!-- 中間：導覽（手機隱藏；平板以上顯示；桌機放大間距） -->
+    <!-- 中間：導覽（平板以上顯示；置中） -->
     <div
-      class="hidden lg:grid min-w-[300px] grid-cols-3 items-center shadow-md rounded-full md:px-0 xl:min-w-[360px] bg-white/60"
+      class="col-span-1 justify-self-center hidden lg:flex items-center rounded-full min-w-[300px] w-[300px] bg-white/60 shadow-md"
     >
-      <RouterLink to="/" v-slot="{ href, navigate, isExactActive }">
-        <a
-          :href="href"
-          @click="navigate"
-          :class="[
-            'px-4 lg:px-6 py-2 rounded-full flex justify-center items-center transition-colors',
-            isExactActive ? 'bg-brand-green-light' : 'hover:bg-gray-100',
-          ]"
-          >首頁</a
-        >
-      </RouterLink>
+      <nav class="w-full grid grid-cols-3 divide-x divide-transparent">
+        <RouterLink to="/" v-slot="{ href, navigate, isExactActive }">
+          <a
+            :href="href"
+            @click="navigate"
+            :class="[
+              'w-full py-2 flex justify-center items-center rounded-full transition-colors',
+              isExactActive ? 'bg-brand-green-light' : 'hover:bg-gray-100',
+            ]"
+            >首頁</a
+          >
+        </RouterLink>
 
-      <RouterLink to="/operation" v-slot="{ href, navigate, isActive }">
-        <a
-          :href="href"
-          @click="navigate"
-          :class="[
-            'px-4 lg:px-6 py-2 rounded-full flex justify-center items-center transition-colors',
-            isActive ? 'bg-brand-green-light' : 'hover:bg-gray-100',
-          ]"
-          >營運</a
-        >
-      </RouterLink>
+        <RouterLink to="/operation" v-slot="{ href, navigate, isActive }">
+          <a
+            :href="href"
+            @click="navigate"
+            :class="[
+              'w-full py-2 flex justify-center items-center rounded-full transition-colors',
+              isActive ? 'bg-brand-green-light' : 'hover:bg-gray-100',
+            ]"
+            >營運</a
+          >
+        </RouterLink>
 
-      <RouterLink to="/nursing" v-slot="{ href, navigate, isActive }">
-        <a
-          :href="href"
-          @click="navigate"
-          :class="[
-            'px-4 lg:px-6 py-2 rounded-full flex justify-center items-center transition-colors',
-            isActive ? 'bg-brand-green-light' : 'hover:bg-gray-100',
-          ]"
-          >照護</a
-        >
-      </RouterLink>
+        <RouterLink to="/nursing" v-slot="{ href, navigate, isActive }">
+          <a
+            :href="href"
+            @click="navigate"
+            :class="[
+              'w-full py-2 flex justify-center items-center rounded-full transition-colors',
+              isActive ? 'bg-brand-green-light' : 'hover:bg-gray-100',
+            ]"
+            >照護</a
+          >
+        </RouterLink>
+      </nav>
     </div>
 
-    <!-- 右側：通知 + 使用者（手機只顯示圖示；平板顯示文字） -->
-    <div class="hidden lg:flex items-center gap-3 sm:gap-6">
+    <!-- 右側：通知 + 使用者（桌機顯示） -->
+    <div
+      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"
         aria-label="通知"
@@ -155,7 +158,7 @@
 
     <!-- 手機：漢堡按鈕-->
     <button
-      class="lg:hidden btn bg-white text-brand-black hover:opacity-90 shadow-md border-none rounded-md p-2"
+      class="lg:hidden btn bg-white text-brand-black hover:opacity-90 shadow-md border-none rounded-md p-2 justify-self-end"
       @click="toggleMobileMenu"
       :aria-expanded="isMobileMenuOpen"
       aria-controls="mobile-menu"
@@ -233,10 +236,7 @@
           <RouterLink to="/" v-slot="{ href, navigate, isExactActive }">
             <a
               :href="href"
-              @click="
-                navigate;
-                closeMobileMenu();
-              "
+              @click="navigate, closeMobileMenu()"
               :class="[
                 'flex items-center gap-3 rounded-lg px-3 py-3 transition-colors',
                 isExactActive ? 'bg-brand-green-light' : 'hover:bg-gray-100',
@@ -260,10 +260,7 @@
           <RouterLink to="/operation" v-slot="{ href, navigate, isActive }">
             <a
               :href="href"
-              @click="
-                navigate;
-                closeMobileMenu();
-              "
+              @click="navigate, closeMobileMenu()"
               :class="[
                 'flex items-center gap-3 rounded-lg px-3 py-3 transition-colors',
                 isActive ? 'bg-brand-green-light' : 'hover:bg-gray-100',
@@ -287,10 +284,7 @@
           <RouterLink to="/nursing" v-slot="{ href, navigate, isActive }">
             <a
               :href="href"
-              @click="
-                navigate;
-                closeMobileMenu();
-              "
+              @click="navigate, closeMobileMenu()"
               :class="[
                 'flex items-center gap-3 rounded-lg px-3 py-3 transition-colors',
                 isActive ? 'bg-brand-green-light' : 'hover:bg-gray-100',
@@ -376,10 +370,7 @@
         <RouterLink to="/" v-slot="{ href, navigate, isExactActive }">
           <a
             :href="href"
-            @click="
-              navigate;
-              closeMobileMenu();
-            "
+            @click="navigate, closeMobileMenu()"
             :class="[
               'flex items-center gap-3 rounded-lg px-3 py-3 transition-colors',
               isExactActive ? 'bg-brand-green-light' : 'hover:bg-gray-100',
@@ -403,10 +394,7 @@
         <RouterLink to="/operation" v-slot="{ href, navigate, isActive }">
           <a
             :href="href"
-            @click="
-              navigate;
-              closeMobileMenu();
-            "
+            @click="navigate, closeMobileMenu()"
             :class="[
               'flex items-center gap-3 rounded-lg px-3 py-3 transition-colors',
               isActive ? 'bg-brand-green-light' : 'hover:bg-gray-100',
@@ -420,7 +408,7 @@
             >
               <path
                 fill="currentColor"
-                d="M20 13.75a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75v6.75H14V4.25c0-.728-.002-1.2-.048-1.546c-.044-.325-.115-.427-.172-.484s-.159-.128-.484-.172C12.949 2.002 12.478 2 11.75 2s-1.2.002-1.546.048c-.325.044-.427.115-.484.172s-.128.159-.172.484c-.046.347-.048.818-.048 1.546V20.5H8V8.75A.75.75 0 0 0 7.25 8h-3a.75.75 0 0 0-.75.75V20.5H1.75a.75.75 0 0 0 0 1.5h20a.75.75 0 0 0 0-1.5H20z"
+                d="M20 13.75a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75v6.75H14V4.25c0-.728-.002-1.2-.048-1.546c-.044-.325-.115-.427-.172-.484s-.159-.128-.484-.172C12.949 2.002 12.478 2 11.75 2s-1.2.002-1.546.048c-.325.044-.427.115-.484.172s-.128.159-.172.484c-.046.347-.048 1.818-.048 1.546V20.5H8V8.75A.75.75 0 0 0 7.25 8h-3a.75.75 0 0 0-.75.75V20.5H1.75a.75.75 0 0 0 0 1.5h20a.75.75 0 0 0 0-1.5H20z"
               />
             </svg>
             <span class="text-brand-black">營運</span>
@@ -430,10 +418,7 @@
         <RouterLink to="/nursing" v-slot="{ href, navigate, isActive }">
           <a
             :href="href"
-            @click="
-              navigate;
-              closeMobileMenu();
-            "
+            @click="navigate, closeMobileMenu()"
             :class="[
               'flex items-center gap-3 rounded-lg px-3 py-3 transition-colors',
               isActive ? 'bg-brand-green-light' : 'hover:bg-gray-100',
diff --git a/src/pages/home/ProgressBar.vue b/src/pages/home/ProgressBar.vue
index 58b1ad3..da79fc0 100644
--- a/src/pages/home/ProgressBar.vue
+++ b/src/pages/home/ProgressBar.vue
@@ -64,7 +64,7 @@ const props = defineProps({
   chartKey: { type: String, required: true },
   currentLegend: { type: String, required: true },
   totalLegend: { type: String, required: true },
-  duration: { type: Number, default: 100 }, 
+  duration: { type: Number, default: 300 }, 
 });
 
 const emit = defineEmits(["select"]);
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index 5aec45b..31cf2f4 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -1112,7 +1112,7 @@ function getResidentsHtml(name) {
     ? [p.hospitalized.current, p.hospitalized.total]
     : [0, 0];
   return `
-<div class="tip p-2" style="cursor:pointer" data-facility="${name}">
+<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">
@@ -1149,7 +1149,7 @@ function getDietHtml(name) {
     veg: { total: 0, normal: 0, soft: 0, tube: 0 },
   };
   return `
-<div class="tip p-2" style="cursor:pointer" data-facility="${name}">
+<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">
@@ -1245,17 +1245,49 @@ function syncTooltips() {
     }
 
     // 掛上 click
+    // 掛上事件：全面阻止滾動／焦點帶來的捲動，再執行 select
     const t = m.getTooltip?.();
     if (t && typeof t.getElement === "function") {
       const el = t.getElement();
-      if (el && !el.__clickBound) {
-        el.__clickBound = true;
+      if (el && !el.__bound) {
+        el.__bound = true;
         el.style.cursor = "pointer";
-        el.addEventListener("click", (e) => {
-          const target = e.currentTarget;
-          const facility = target?.getAttribute?.("data-facility") || name;
-          selectFacility(facility);
+        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 });
       }
     }
   }