From 4db268d86be4819d24da4ee0097790ea32764904 Mon Sep 17 00:00:00 2001
From: "MJM_2025_05\\polly" <polly.hsu@mjmtech.com.tw>
Date: Wed, 24 Sep 2025 15:38:34 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20modal=20inputs=20=E7=84=A1=E6=B3=95?=
 =?UTF-8?q?=E7=B7=A8=E8=BC=AF=E5=95=8F=E9=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/customUI/Pagination.vue        | 267 +++++++++---------
 src/components/navbar/Navbar.vue              |   2 +-
 src/components/navbar/NavbarUser.vue          |  80 ++++--
 .../components/DashboardEmission.vue          |   1 -
 4 files changed, 198 insertions(+), 152 deletions(-)

diff --git a/src/components/customUI/Pagination.vue b/src/components/customUI/Pagination.vue
index d95ed64..818cfeb 100644
--- a/src/components/customUI/Pagination.vue
+++ b/src/components/customUI/Pagination.vue
@@ -1,197 +1,206 @@
 <script setup>
-import { defineProps, ref, computed, inject, watch } from "vue";
+import { defineProps, defineEmits, ref, computed, inject, watch } from "vue";
 import { twMerge } from "tailwind-merge";
-import { data } from "autoprefixer";
 import { useI18n } from "vue-i18n";
 const { t } = useI18n();
+
 /* -------------------------------------------------------------
-> 6 頁 => 會有 input 跳頁，且前三後三顯示
+  > 規格：
+  - pageSize：每頁筆數
+  - totalPages：外部可強制指定總頁數（可選）
+  - dataSource：完整資料陣列（當未提供 onPageChange 時，會在內部分頁切片）
+  - totalItems：顯示用總筆數（未提供則使用 dataSource.length）
+  - sort：當排序變更時重算頁面
+  - onPageChange(page: number)：外部受控回呼（若提供，內部不切片，只回呼）
 ---------------------------------------------------------------- */
 const props = defineProps({
-  pageSize: {
-    type: Number,
-    default: 10,
-  }, // 幾頁為一組
-  totalPages: {
-    type: Number,
-    default: 0,
-  },
-  onPageChange: Function, // 用來接收目前返回的頁數
-  dataSource: Array,
+  pageSize: { type: Number, default: 10 },
+  totalPages: { type: Number, default: 0 },
+  onPageChange: Function,
+  dataSource: { type: Array, default: () => [] },
   totalItems: Number,
-  sort: Object,
+  sort: { type: Object, default: null },
 });
 
-const current_table_data = inject("current_table_data");
-const currentPage = ref(0);
-const totalPage = ref(0);
+const emit = defineEmits(["page-change"]);
 
-const beforeInputPage = computed(() => {
-  if (totalPage.value > 6) {
-    return 3;
-  } else {
-    return totalPage.value;
-  }
+// 可能由上層 Table 透過 provide 注入（可選）
+const current_table_data = inject("current_table_data", null);
+
+const currentPage = ref(1);
+
+/** 總頁數：優先用 props.totalPages；否則用 dataSource.length 推導 */
+const totalPage = computed(() => {
+  const ps = Math.max(1, props.pageSize || 1);
+  const derived = Math.ceil((props.dataSource?.length || 0) / ps);
+  return props.totalPages > 0 ? props.totalPages : derived;
 });
 
-const choosePage = (page) => {
-  currentPage.value = parseInt(page);
-  props.onPageChange
-    ? props.onPageChange(parseInt(page))
-    : changePageData(parseInt(page));
-};
-
-// 數據一次性傳送
-const changePageData = (currentPage) => {
-  const start = (currentPage - 1) * props.pageSize;
-  const end = currentPage * props.pageSize;
-  const data = props.dataSource.slice(start, end);
-  current_table_data.updateDataSource(data);
-};
-
-watch(
-  () => [props.dataSource, props.sort],
-  ([newVal, newVal2]) => {
-    const totalPageNumber =
-      props.totalPages || Math.ceil(props.dataSource.length / props.pageSize);
-    if (currentPage.value > totalPageNumber) {
-      currentPage.value = 1;
-    } else {
-      // 若頁數在範圍內，則保持當前頁面
-      currentPage.value = currentPage.value;
-    }
-
-    totalPage.value = totalPageNumber;
-    props.onPageChange
-      ? current_table_data.updateDataSource(props.dataSource)
-      : changePageData(currentPage.value || 1);
-  },
-  {
-    deep: true,
-  }
-);
+/** 首段頁碼（總頁數>6 顯示 1..3，否則顯示 1..totalPage） */
+const beforeInputPage = computed(() => (totalPage.value > 6 ? 3 : totalPage.value));
 
+/** Input 欄位的顯示值：只有在中間區間才回填目前頁碼 */
 const pageInput = computed(() => {
   if (currentPage.value > 3 && currentPage.value < totalPage.value - 2) {
-    return currentPage.value;
-  } else {
-    return "";
+    return String(currentPage.value);
   }
+  return "";
 });
+
+/** 夾住頁碼到合法區間 */
+const clampPage = (n) => {
+  if (!Number.isFinite(n)) return 1;
+  n = Math.floor(n);
+  return Math.min(Math.max(n, 1), Math.max(totalPage.value, 1));
+};
+
+/** 切頁核心：外部受控就呼叫 onPageChange；否則本地切片並更新注入的資料 */
+const choosePage = (page) => {
+  const next = clampPage(Number(page));
+  if (currentPage.value === next) return;
+
+  currentPage.value = next;
+
+  if (typeof props.onPageChange === "function") {
+    props.onPageChange(next);
+  } else {
+    changePageData(next);
+  }
+  emit("page-change", next);
+};
+
+/** 無 onPageChange 時，內部分頁切片 */
+const changePageData = (page) => {
+  if (!Array.isArray(props.dataSource)) return;
+  const ps = Math.max(1, props.pageSize || 1);
+  const start = (page - 1) * ps;
+  const end = page * ps;
+  const sliced = props.dataSource.slice(start, end);
+  // 有提供注入器才更新
+  if (current_table_data?.updateDataSource) current_table_data.updateDataSource(sliced);
+};
+
+/** 監看資料長度、排序、每頁筆數、外部總頁數變化 */
+watch(
+  () => [props.dataSource?.length, props.sort, props.pageSize, props.totalPages],
+  () => {
+    // 當資料或設定變化，調整目前頁碼到合法範圍
+    currentPage.value = clampPage(currentPage.value);
+
+    if (typeof props.onPageChange === "function") {
+      // 受控模式：直接把全量 data 丟給外面管理
+      if (current_table_data?.updateDataSource)
+        current_table_data.updateDataSource(props.dataSource || []);
+    } else {
+      // 非受控：內部切片
+      changePageData(currentPage.value);
+    }
+  },
+  { immediate: true }
+);
+
+/** 處理 input 變更：僅允許正整數 */
+const handleInputChange = (e) => {
+  const v = String(e.target.value || "").trim();
+  const n = Number(v);
+  if (!/^\d+$/.test(v) || !Number.isFinite(n)) return; // 忽略非法輸入
+  choosePage(n);
+};
 </script>
 
 <template>
-  <div
-    class="relative flex justify-end items-end my-5"
-    v-if="dataSource.length > 0"
-  >
+  <div class="relative flex justify-end items-end my-5" v-if="dataSource.length > 0 || totalPage > 0">
+    <!-- 上一頁 -->
     <span class="mx-1">
       <button
         type="button"
         class="prev focus:border-0 disabled:text-gray-500 hover:text-warning"
         :disabled="currentPage === 1"
-        @click="
-          () => {
-            choosePage(currentPage - 1 > 0 ? currentPage - 1 : 1);
-          }
-        "
+        @click="choosePage(currentPage - 1)"
+        aria-label="Previous page"
       >
         <font-awesome-icon :icon="['fas', 'chevron-left']" class="text-3xl" />
       </button>
     </span>
+
+    <!-- 前三頁（或全部，若總頁數 <= 6） -->
     <ul class="flex items-center list-none">
       <li
         v-for="page in beforeInputPage"
         :key="`page${page}`"
         :class="
           twMerge(
-            'w-10 h-10 mx-1 border-2 border-sub-success rounded-full flex items-center justify-center cursor-pointer',
+            'w-10 h-10 mx-1 border-2 border-sub-success rounded-full flex items-center justify-center cursor-pointer select-none',
             currentPage === page ? 'bg-sub-success' : 'bg-transparent'
           )
         "
-        @click="
-          () => {
-            choosePage(page);
-          }
-        "
+        @click="choosePage(page)"
+        :aria-current="currentPage === page ? 'page' : undefined"
+        role="button"
+        :tabindex="0"
+        @keydown.enter.prevent="choosePage(page)"
+        @keydown.space.prevent="choosePage(page)"
       >
-        <span class="text-white font-extrabold italic">
-          {{ page }}
-        </span>
+        <span class="text-white font-extrabold italic">{{ page }}</span>
       </li>
     </ul>
 
-    <span
-      v-if="totalPage < 6"
-      class="absolute -bottom-8 text-base text-center"
-    >
-      {{ dataSource.length }} {{ $t("table.in_otal") }}</span
-    >
-    <label
-      v-if="totalPage > 6"
-      class="mx-2 relative input border-2 border-sub-success flex items-center gap-2"
-    >
+    <!-- 總筆數（總頁數 <= 6 顯示簡版） -->
+    <span v-if="totalPage <= 6" class="absolute -bottom-8 text-base text-center">
+      {{ totalItems || dataSource.length }} {{ $t('table.in_otal') }}
+    </span>
+
+    <!-- 跳頁輸入（總頁數 > 6） -->
+    <label v-if="totalPage > 6" class="mx-2 relative input border-2 border-sub-success flex items-center gap-2">
       <input
         type="text"
+        inputmode="numeric"
+        pattern="[0-9]*"
         maxlength="6"
         class="bg-transparent h-full w-20 font-extrabold italic text-lg"
         :placeholder="t('table.skip_to')"
         :value="pageInput"
-        @change="
-          (e) => {
-            choosePage(e.target.value);
-          }
-        "
+        @change="handleInputChange"
+        aria-label="Go to page"
       />
-      <span
-        ><font-awesome-icon
-          :icon="['fas', 'search']"
-          class="text-xl text-sub-success"
-      /></span>
-      <span
-        class="w-full text-center absolute -bottom-8 left-1/2 -translate-x-1/2 text-base"
-      >
-        {{ totalItems || dataSource.length }} {{ $t("table.in_otal") }}</span
-      >
+      <span>
+        <font-awesome-icon :icon="['fas', 'search']" class="text-xl text-sub-success" />
+      </span>
+      <span class="w-full text-center absolute -bottom-8 left-1/2 -translate-x-1/2 text-base">
+        {{ totalItems || dataSource.length }} {{ $t('table.in_otal') }}
+      </span>
     </label>
-    <ul
-      v-if="totalPage > 6"
-      class="flex flex-row-reverse items-center list-none"
-    >
+
+    <!-- 後三頁（倒序） -->
+    <ul v-if="totalPage > 6" class="flex flex-row-reverse items-center list-none">
       <li
         v-for="(page, index) in 3"
-        :key="`page${totalPage - index}`"
+        :key="`tail${index}`"
         :class="
           twMerge(
-            'w-10 h-10 mx-1 border-2 border-sub-success rounded-full flex items-center justify-center',
-            currentPage === totalPage - index
-              ? 'bg-sub-success'
-              : 'bg-transparent'
+            'w-10 h-10 mx-1 border-2 border-sub-success rounded-full flex items-center justify-center cursor-pointer select-none',
+            currentPage === (totalPage - index) ? 'bg-sub-success' : 'bg-transparent'
           )
         "
-        @click.stop.prevent="
-          () => {
-            choosePage(totalPage - index);
-          }
-        "
+        @click.stop.prevent="choosePage(totalPage - index)"
+        :aria-current="currentPage === (totalPage - index) ? 'page' : undefined"
+        role="button"
+        :tabindex="0"
+        @keydown.enter.prevent="choosePage(totalPage - index)"
+        @keydown.space.prevent="choosePage(totalPage - index)"
       >
-        <span class="text-white font-extrabold italic">
-          {{ totalPage - index }}
-        </span>
+        <span class="text-white font-extrabold italic">{{ totalPage - index }}</span>
       </li>
     </ul>
+
+    <!-- 下一頁 -->
     <span class="mx-1">
       <button
         type="button"
         class="next focus:border-0 disabled:text-gray-500 hover:text-warning"
         :disabled="currentPage === totalPage"
-        @click="
-          () => {
-            choosePage(
-              currentPage + 1 <= totalPage ? currentPage + 1 : totalPage
-            );
-          }
-        "
+        @click="choosePage(currentPage + 1)"
+        aria-label="Next page"
       >
         <font-awesome-icon :icon="['fas', 'chevron-right']" class="text-3xl" />
       </button>
diff --git a/src/components/navbar/Navbar.vue b/src/components/navbar/Navbar.vue
index 3d2f4e9..4a0c8e7 100644
--- a/src/components/navbar/Navbar.vue
+++ b/src/components/navbar/Navbar.vue
@@ -106,7 +106,7 @@ watch(locale, () => {
           <img src="/logo.svg" alt="logo" class="w-6 lg:w-8 me-1" />
           新創賦能
         </router-link>
-        <!-- <NavbarBuilding class="hidden lg:block ms-8" /> -->
+        <NavbarBuilding class="hidden lg:block ms-8" />
       </div>
       <div class="hidden flex-1 lg:block">
         <NavbarItem
diff --git a/src/components/navbar/NavbarUser.vue b/src/components/navbar/NavbarUser.vue
index 5e31aeb..47cc2e7 100644
--- a/src/components/navbar/NavbarUser.vue
+++ b/src/components/navbar/NavbarUser.vue
@@ -1,51 +1,89 @@
 <script setup>
 import useUserInfoStore from "@/stores/useUserInfoStore";
-import { ref, onMounted } from "vue";
-import { useRouter } from 'vue-router';
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import { useRouter, useRoute } from "vue-router";
 
 const router = useRouter();
+const route = useRoute();
 const store = useUserInfoStore();
+
 const user = ref("");
+const open = ref(false);
 
 function logout() {
-  router.push('/logout');
+  open.value = false;
+  router.push("/logout");
+}
+
+function toggleOpen() {
+  open.value = !open.value;
+}
+
+function close() {
+  open.value = false;
+}
+
+// —— 點外面關閉 —— //
+function onClickOutside(e) {
+  // 只要點擊目標不在本元件根節點內，就關閉
+  // 這裡用 closest('.dropdown') 判斷是否點在 dropdown 區塊內
+  const target = e.target;
+  if (!target.closest(".dropdown")) {
+    close();
+  }
+}
+
+// —— 鍵盤支援（Esc 關閉）—— //
+function onKeydown(e) {
+  if (e.key === "Escape") close();
 }
 
 onMounted(() => {
-  const name = store.user.user_name;
-  if (name) {
-    user.value = name;
-  }
+  const name = store.user?.user_name;
+  if (name) user.value = name;
+
+  document.addEventListener("click", onClickOutside, true);
+  document.addEventListener("keydown", onKeydown);
+
+  // 路由切換時關閉
+  router.afterEach(() => close());
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("click", onClickOutside, true);
+  document.removeEventListener("keydown", onKeydown);
 });
 </script>
 
 <template>
-  <div class="dropdown dropdown-bottom dropdown-end">
+  <!-- 用 open 狀態加上 dropdown-open，避免 focus 失效問題 -->
+  <div class="dropdown dropdown-bottom dropdown-end" :class="{ 'dropdown-open': open }">
     <button
-      tabindex="0"
-      type="link"
+      type="button"
       class="flex flex-col justify-center items-center btn-group text-white text-center"
+      aria-haspopup="menu"
+      :aria-expanded="open ? 'true' : 'false'"
+      @click="toggleOpen"
     >
-      <font-awesome-icon
-        :icon="['fas', 'user-circle']"
-        class="text-lg lg:text-2xl mb-1"
-      />
-      <span class="text-xs lg:text-sm block"> {{ user || "webUser" }}</span>
+      <font-awesome-icon :icon="['fas', 'user-circle']" class="text-lg lg:text-2xl mb-1" />
+      <span class="text-xs lg:text-sm block">{{ user || "webUser" }}</span>
     </button>
+
     <ul
-      tabindex="0"
       class="dropdown-content translate-y-2 z-[100] menu py-3 shadow rounded w-32 bg-[#4c625e] border text-center"
+      role="menu"
     >
-      <li class="text-white">
-        <a
+      <li class="text-white" role="none">
+        <button
           type="button"
           class="flex flex-col justify-center items-center"
+          role="menuitem"
           @click="logout"
-          >{{ $t("sign_out") }}
-        </a>
+        >
+          {{ $t('sign_out') }}
+        </button>
       </li>
     </ul>
   </div>
 </template>
 
-<style lang="scss" scoped></style>
diff --git a/src/views/dashboard/components/DashboardEmission.vue b/src/views/dashboard/components/DashboardEmission.vue
index 410d8b1..b59dc5d 100644
--- a/src/views/dashboard/components/DashboardEmission.vue
+++ b/src/views/dashboard/components/DashboardEmission.vue
@@ -108,7 +108,6 @@ watch(
       JSON.stringify(newValue) !== JSON.stringify(oldValue)
     ) {
       getData(newValue);
-      getElecUseDayData(newValue);
     }
   },
   {