From 6194430f3c0303dcf7a84d1f147c756b8caeaa65 Mon Sep 17 00:00:00 2001 From: larry2701 Date: Wed, 14 May 2025 17:21:10 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AA=BF=E6=95=B4=E5=89=8D=E5=8F=B0=E6=AC=84?= =?UTF-8?q?=E4=BD=8D=E3=80=81=E5=BE=8C=E5=8F=B0=E6=96=B0=E5=A2=9E=E5=B1=85?= =?UTF-8?q?=E6=B0=91=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Backstage/Activation.html | 188 ------------------------ Backstage/main.html | 4 +- Backstage/resident_activation.html | 218 +++++++++++++++++++++++++++ Backstage/resident_add.html | 75 ++++++++++ Backstage/resident_edit.html | 106 ++++++++++++++ Backstage/resident_import.html | 21 +++ Backstage/resident_list.html | 227 +++++++++++++++++++++++++++++ Backstage/sidebar.html | 73 ++++++++-- edit-profile.html | 5 + 9 files changed, 718 insertions(+), 199 deletions(-) delete mode 100644 Backstage/Activation.html create mode 100644 Backstage/resident_activation.html create mode 100644 Backstage/resident_add.html create mode 100644 Backstage/resident_edit.html create mode 100644 Backstage/resident_import.html create mode 100644 Backstage/resident_list.html diff --git a/Backstage/Activation.html b/Backstage/Activation.html deleted file mode 100644 index c52fd69..0000000 --- a/Backstage/Activation.html +++ /dev/null @@ -1,188 +0,0 @@ - - - - - 未開通居民列表 - - - - - - -
-

未開通居民列表

- - -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- - - - - - - - - - - - - - - - -
編號姓名Email聯絡電話操作
- - - -
- - - - - - - - - - - \ No newline at end of file diff --git a/Backstage/main.html b/Backstage/main.html index 9e60f7a..8ba8323 100644 --- a/Backstage/main.html +++ b/Backstage/main.html @@ -26,7 +26,7 @@ position: fixed; top: 50px; left: 0; - width: 200px; + width: 240px; /* <--- 將這裡從 200px 修改為 250px (或其他您想要的值) */ height: calc(100vh - 50px); z-index: 998; background-color: white; /* Fallback background for the container */ @@ -38,7 +38,7 @@ border: none; } .main-content-area-wrapper { - margin-left: 200px; /* Width of sidebar */ + margin-left: 240px; /* <--- 將這裡也從 200px 修改為 250px (與上面 .sidebar-container 的寬度一致) */ padding-top: 50px; /* Height of header */ height: calc(100vh - 50px); overflow: hidden; /* Contains the iframe properly */ diff --git a/Backstage/resident_activation.html b/Backstage/resident_activation.html new file mode 100644 index 0000000..242cccf --- /dev/null +++ b/Backstage/resident_activation.html @@ -0,0 +1,218 @@ + + + + + 未開通居民列表 + + + + + +
+

未開通居民列表

+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + + + + + + + + + + + + + +
編號姓名Email聯絡電話操作
+ +
+ + + + + + + + + + + \ No newline at end of file diff --git a/Backstage/resident_add.html b/Backstage/resident_add.html new file mode 100644 index 0000000..58b2879 --- /dev/null +++ b/Backstage/resident_add.html @@ -0,0 +1,75 @@ + + + + + 新增居民資料 + + + +
+

新增居民資料

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + 取消 +
+
+ + + + \ No newline at end of file diff --git a/Backstage/resident_edit.html b/Backstage/resident_edit.html new file mode 100644 index 0000000..953d26c --- /dev/null +++ b/Backstage/resident_edit.html @@ -0,0 +1,106 @@ + + + + + 編輯居民資料 + + + +
+

編輯居民資料

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + 取消 +
+
+ + + + \ No newline at end of file diff --git a/Backstage/resident_import.html b/Backstage/resident_import.html new file mode 100644 index 0000000..963508d --- /dev/null +++ b/Backstage/resident_import.html @@ -0,0 +1,21 @@ + + + + + 匯入資料 + + + +
+

匯入居民資料

+
+
+ + +
+ + 返回列表 +
+
+ + \ No newline at end of file diff --git a/Backstage/resident_list.html b/Backstage/resident_list.html new file mode 100644 index 0000000..34c0d98 --- /dev/null +++ b/Backstage/resident_list.html @@ -0,0 +1,227 @@ + + + + + 居民列表 + + + + + +
+

居民列表

+
+
+ 新增 +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ 匯入 +
+
+ +
+
+ + + + + + + + + + + + + +
編號姓名Email聯絡電話操作
+
+ + + + + + + + + + \ No newline at end of file diff --git a/Backstage/sidebar.html b/Backstage/sidebar.html index ac9addf..5786ced 100644 --- a/Backstage/sidebar.html +++ b/Backstage/sidebar.html @@ -74,7 +74,7 @@ .has-submenu.open ul { padding-top: 5px; - max-height: 200px; + max-height: 200px; /* 您可以根據需要調整子選單展開的最大高度 */ } .has-submenu ul li { @@ -111,7 +111,19 @@ align-items: center; } - .sidebar ul li .li-content span { + /* ---- 這部分是為了讓 "未開通居民" 完整顯示而調整的樣式 ---- */ + .sidebar ul li .li-content > span:first-child { + flex-grow: 1; /* 允許文字部分伸展以佔用可用空間 */ + min-width: 0; /* 在flex佈局中，這有助於正確處理溢出和 ellipsis */ + /* white-space, overflow, text-overflow 將從下面的通用規則繼承 */ + } + + .sidebar ul li .li-content .badge { + flex-shrink: 0; /* 防止徽章被壓縮 */ + } + /* ---- 調整結束 ---- */ + + .sidebar ul li .li-content span { /* 此規則同時應用於文字 span 和徽章 span */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -130,14 +142,13 @@ ▼ +
  • 居民列表
  • 出入管理
    • @@ -155,10 +166,42 @@ console.log('Sidebar: 發送導航請求 ->', url); parent.postMessage({ type: 'navigate', url: url }, '*'); - const listItems = document.querySelectorAll('.sidebar ul > li'); - listItems.forEach(item => item.classList.remove('active')); - if (!clickedElement.closest('.has-submenu')) { - clickedElement.classList.add('active'); + // 移除所有主項目和子項目的 active class + const allItems = document.querySelectorAll('.sidebar ul li, .sidebar ul ul li'); + allItems.forEach(item => item.classList.remove('active')); + + // 為當前點擊的項目添加 active class + // 如果點擊的是子選單項，也將其父選單項目標記為 (視覺上) active (如果需要) + clickedElement.classList.add('active'); + + // 如果點擊的是子選單中的項目，並且希望父選單也保持某種 'active' 或 'open' 的視覺提示 + // 目前的邏輯是點擊主選單項時移除其他 active，子選單項點擊時，父選單的 active 狀態會被移除 + // 如果希望父選單在子選單 active 時也高亮，需要調整 class 邏輯 + // 例如，只移除頂層 li 的 active，然後再設定。 + // 但目前的 active class 主要是用於頂層 li，子選單項本身高亮。 + // 如果父選單本身不是導航目標，只是個切換器，那它不應該有 active 狀態，除非子項被選中時特別標記 + if (!clickedElement.closest('.has-submenu > .submenu-toggle')) { // 確保不是點擊 submenu-toggle 本身 + const parentLi = clickedElement.closest('.sidebar > ul > li'); // 直接父 li + if (parentLi && parentLi !== clickedElement) { // 如果點擊的是子選單項 + // 可以考慮不移除父 li 的 active，或者給父 li 一個不同的 "parent-active" class + // 目前邏輯：如果點擊的是子項，父項（如"住戶居民"的li）的 active 會被移除，然後子項獲得 active + // 為了清晰，讓頂層選單項（非子選單展開器）和子選單項競爭 active + const topLevelListItems = document.querySelectorAll('.sidebar > ul > li'); + topLevelListItems.forEach(item => { + if(item !== parentLi || !parentLi.classList.contains('has-submenu')){ // 非 submenu 的父級 li + item.classList.remove('active'); + } + }); + if (parentLi && !parentLi.classList.contains('has-submenu')){ + parentLi.classList.add('active'); + } else if (!clickedElement.closest('.has-submenu ul')) { // 如果點擊的是頂層且非 submenu-toggle + clickedElement.classList.add('active'); + } + } else if (clickedElement.closest('.sidebar > ul > li')) { // 點擊的是頂層 li + const topLevelListItems = document.querySelectorAll('.sidebar > ul > li'); + topLevelListItems.forEach(item => item.classList.remove('active')); + clickedElement.classList.add('active'); + } } } @@ -170,7 +213,19 @@ if (arrow) { arrow.textContent = parentLi.classList.contains('open') ? '▲' : '▼'; } + + // 當展開/收起子選單時，不要改變父選單項的 active 狀態 + // 也不要觸發 requestNavigation + // event.stopPropagation(); // 如果 toggleSubmenu 是由事件直接調用且需要阻止冒泡 } + + // 初始化：確保第一個 'active' 的項目在加載時是正確的 + // 或者，您可以根據載入的頁面來動態設定 active class + document.addEventListener('DOMContentLoaded', () => { + // 假設 'dashboard.html' 是首頁，它已經有 active class + // 如果需要更複雜的邏輯來根據當前 URL 設定 active class，可以在這裡添加 + }); + \ No newline at end of file diff --git a/edit-profile.html b/edit-profile.html index da5827a..2cdc5de 100644 --- a/edit-profile.html +++ b/edit-profile.html @@ -155,6 +155,11 @@ +
    + + +
    +