From eb8c3af98e65862d49d6611608e66f8efd6e303a Mon Sep 17 00:00:00 2001
From: swpa <swpa@local>
Date: Wed, 27 May 2026 11:33:01 +0800
Subject: [PATCH] chore: Adjusting the layout design

---
 index.html    | 79 ++++++++++++++++++++++++++++++---------------------
 static/app.js |  8 +++---
 2 files changed, 50 insertions(+), 37 deletions(-)

diff --git a/index.html b/index.html
index af172ca..df2c998 100644
--- a/index.html
+++ b/index.html
@@ -33,7 +33,7 @@
     <div class="tabs">
         <button class="tab-btn active" onclick="switchTab('cli-tab', this)">💻 True SSH Terminal</button>
         <button class="tab-btn" onclick="switchTab('query-tab', this)">🔍 CMTS 狀態查詢</button>
-        <button class="tab-btn" onclick="switchTab('config-tab', this)">⚙️ CMTS 設備配置</button>
+        <button class="tab-btn" onclick="switchTab('config-tab', this)">🛠️ CMTS 設備配置</button>
         <!-- 💡 新增：系統設定頁籤 -->
         <button class="tab-btn" onclick="switchTab('settings-tab', this); openSystemSettings();">⚙️ 系統設定</button>
         <!-- 💡 新增：備份與還原頁籤 -->
@@ -162,7 +162,7 @@
         <div class="manager-container">
             
             <div class="control-group" style="background: #ffffff; padding: 10px 15px; border-radius: 8px; margin-bottom: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.02); border: 1px solid #e2e8f0;">
-                <label style="font-weight: bold; color: #c0392b; font-size: 16px; margin-right: 10px;">🛠️ 選擇配置任務：</label>
+                <label style="font-weight: bold; color: #c0392b; font-size: 16px; margin-right: 10px;">📌 選擇配置任務：</label>
                 <select id="configTask" onchange="switchConfigTask()" style="width: 400px; max-width: 100%; font-weight: bold; font-size: 15px; padding: 8px; background-color: #fcf3f2; border-color: #fadbd8;">
                     <!-- 🌟 拆分為兩個獨立的選項 -->
                     <option value="form-running-config">🌳 設備配置樹狀圖 (running-config)</option>
@@ -255,33 +255,36 @@
             <!-- 表單 4：設備配置樹狀圖 (共用容器) -->
             <!-- 🌟 修正 1：將 ID 改為 form-tree-config -->
             <div id="form-tree-config" class="task-form" style="display: none;">
-                <h3 style="display: flex; align-items: center; margin-top: 0; margin-bottom: 10px; font-size: 16px; color: #2c3e50;">
+                <!-- 🌟 統一規則：A 方案左右分離佈局 (已補上 width: 100% 確保撐開) -->
+                <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #ecf0f1; padding-bottom: 10px; margin-bottom: 15px; width: 100%;">
                     
-                    <!-- 🌟 修正 2：加上 span 與 ID，用來動態切換文字 -->
-                    <span id="tree-form-title">🌳 設備配置樹狀圖</span>
+                    <!-- 左側：標題與狀態提示 -->
+                    <div style="display: flex; align-items: center; gap: 15px;">
+                        <h3 style="margin: 0; font-size: 16px; color: #2c3e50;">
+                            <span id="tree-form-title">🌳 設備配置樹狀圖</span>
+                        </h3>
+                        <span id="scan-status" style="color: #7f8c8d; font-size: 14px; font-weight: normal;"></span>
+                        <span id="loading-message" style="display: none; color: #f39c12; font-size: 14px; font-weight: normal;">
+                            ⏳ 正在從設備抓取完整配置，可能需要 30~60 秒，請耐心稍候...
+                        </span>
+                    </div>
             
-                    <!-- 🌟 掃描與清除按鈕群組 -->
-                    <button id="btn-scan-visible" onclick="scanVisibleMissingOptions()" class="btn-modern btn-scan" disabled style="display: none; margin-left: 20px;">
-                        🔍 掃描局部缺失選項
-                    </button>
-                    <button id="btn-clear-visible" onclick="clearVisibleCache()" class="btn-modern btn-clear" style="display: none; margin-left: 10px;">
-                        🗑️ 清除局部選項快取
-                    </button>
-
-                    <button id="btn-scan-global" onclick="scanGlobalMissingOptions()" class="btn-modern btn-scan" disabled style="display: none; margin-left: 10px;">
-                        🌍 掃描全域缺失選項
-                    </button>
-                    <button id="btn-clear-global" onclick="clearGlobalCache()" class="btn-modern btn-clear" style="display: none; margin-left: 10px;">
-                        🔥 清除全域快取
-                    </button>
-
-                    <!-- 🌟 新增：掃描進度提示 -->
-                    <span id="scan-status" style="color: #7f8c8d; font-size: 14px; margin-left: 15px; font-weight: normal;"></span>
-
-                    <span id="loading-message" style="display: none; color: #f39c12; font-size: 14px; margin-left: 15px; font-weight: normal;">
-                        ⏳ 正在從設備抓取完整配置，可能需要 30~60 秒，請耐心稍候...
-                    </span>
-                </h3>
+                    <!-- 右側：馬卡龍色系按鈕群組 (God-mode 觸發時才會顯示) -->
+                    <div style="display: flex; gap: 10px;">
+                        <button id="btn-scan-visible" onclick="scanVisibleMissingOptions()" class="btn-modern btn-scan" disabled style="display: none;">
+                            掃描局部缺失
+                        </button>
+                        <button id="btn-clear-visible" onclick="clearVisibleCache()" class="btn-modern btn-clear" style="display: none;">
+                            清除局部快取
+                        </button>
+                        <button id="btn-scan-global" onclick="scanGlobalMissingOptions()" class="btn-modern btn-scan" disabled style="display: none;">
+                            掃描全域缺失
+                        </button>
+                        <button id="btn-clear-global" onclick="clearGlobalCache()" class="btn-modern btn-clear" style="display: none;">
+                            清除全域快取
+                        </button>
+                    </div>
+                </div>
     
                 <!-- 🌟 左右分屏容器 -->
                 <div id="split-container" style="display: flex; align-items: flex-start; width: 100%; position: relative;">
@@ -355,7 +358,7 @@
                         <option value="full">Full 配置過濾器</option>
                     </select>
                     
-                    <button onclick="loadRealConfigForFilters()" style="background-color: #3498db; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer; font-size: 14px;">
+                    <button onclick="loadRealConfigForFilters()" class="btn-modern btn-load">
                         📥 載入設備配置以設定過濾
                     </button>
                     <span id="filter-loading-msg" style="display: none; color: #e67e22; margin-left: 10px; font-weight: bold;">⏳ 正在抓取配置，請稍候...</span>
@@ -366,7 +369,7 @@
                 </div>
 
                 <div style="margin-top: 20px; border-top: 1px solid #ecf0f1; padding-top: 20px;">
-                    <button onclick="saveSystemSettings()" style="background-color: #27ae60; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 15px; font-weight: bold;">
+                    <button onclick="saveSystemSettings()" class="btn-modern btn-connect" style="padding: 10px 20px; font-size: 15px;">
                         💾 儲存並套用設定
                     </button>
                     <span id="settings-status" style="margin-left: 15px; color: #27ae60; font-weight: bold; display: none;">✅ 設定已成功儲存！</span>
@@ -381,7 +384,7 @@
             
             <!-- 上半部：建立新快照 -->
             <div class="control-group" style="background: #ffffff; padding: 20px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); border: 1px solid #e2e8f0;">
-                <h3 style="margin-top: 0; font-size: 18px; color: #2980b9; border-bottom: 2px solid #ecf0f1; padding-bottom: 10px; margin-bottom: 15px;">📸 建立新快照</h3>
+                <h3 style="margin-top: 0; font-size: 18px; color: #2980b9; margin-bottom: 10px;">📸 建立新快照</h3>
                 <div style="display: flex; align-items: center; gap: 15px;">
                     <input type="text" id="snapshotName" placeholder="請輸入快照名稱 (例如: 例行備份)" style="width: 300px; padding: 8px; border: 1px solid #bdc3c7; border-radius: 4px;">
                     <select id="backupConfigType" style="padding: 8px; border: 1px solid #bdc3c7; border-radius: 4px;">
@@ -394,12 +397,22 @@
 
             <!-- 下半部：歷史紀錄列表 -->
             <div class="control-group" style="background: #ffffff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.02); border: 1px solid #e2e8f0;">
-                <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #ecf0f1; padding-bottom: 10px; margin-bottom: 15px;">
-                    <h3 style="margin: 0; font-size: 18px; color: #2c3e50;">🗂️ 歷史備份紀錄</h3>
-                    <button onclick="loadBackupHistory()" class="btn-modern btn-scan" style="padding: 5px 10px; font-size: 13px;">🔄 重新整理</button>
+                
+                <!-- 🎯 A 方案佈局：左右對齊 -->
+                <div style="display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid #ecf0f1; padding-bottom: 12px; margin-bottom: 15px; width: 100%;">
+                    <h3 style="margin: 0; font-size: 18px; color: #2c3e50;">
+                        🗂️ 歷史備份紀錄
+                    </h3>
+                    
+                    <!-- 🎨 沿用全域馬卡龍色系：使用 btn-modern 與 btn-slate (或 btn-scan) -->
+                    <button onclick="loadBackupHistory()" class="btn-modern btn-slate" style="padding: 6px 12px; font-size: 13px;">
+                        🔄 重新整理
+                    </button>
                 </div>
                 
                 <table style="width: 100%; border-collapse: collapse; text-align: left;">
+                    <!-- ... 下方的 table 保持不變 ... -->
+
                     <thead>
                         <tr style="background-color: #f8f9fa; border-bottom: 2px solid #bdc3c7;">
                             <th style="padding: 10px; color: #34495e;">時間</th>
diff --git a/static/app.js b/static/app.js
index a1e9124..658d68e 100644
--- a/static/app.js
+++ b/static/app.js
@@ -864,8 +864,8 @@ async function loadBackupHistory() {
                     <td style="padding: 12px 10px; font-weight: bold; color: #2c3e50;">${item.snapshot_name}</td>
                     <td style="padding: 12px 10px; color: #34495e;"><span style="background: #e8f8f5; color: #27ae60; padding: 3px 8px; border-radius: 12px; font-size: 12px;">${item.config_type}</span></td>
                     <td style="padding: 12px 10px; text-align: right;">
-                        <button onclick="viewBackup('${item.id}')" class="btn-modern btn-scan" style="padding: 4px 8px; font-size: 12px; margin-right: 5px;">👁️ 檢視</button>
-                        <button onclick="deleteBackup('${item.id}')" class="btn-modern btn-disconnect" style="padding: 4px 8px; font-size: 12px;">🗑️ 刪除</button>
+                        <button onclick="viewBackup('${item.id}')" class="btn-modern btn-scan" style="padding: 4px 8px; font-size: 12px; margin-right: 5px;">檢視</button>
+                        <button onclick="deleteBackup('${item.id}')" class="btn-modern btn-disconnect" style="padding: 4px 8px; font-size: 12px;">刪除</button>
                     </td>
                 </tr>
             `).join('');
@@ -996,8 +996,8 @@ function setAdminButtonsState(isBusy, text = "⏳ 執行中...") {
             } else {
                 btn.classList.remove('is-busy');
                 // 恢復原本的文字
-                if (id === 'btn-scan-visible') btn.innerText = "🔍 掃描局部缺失選項";
-                if (id === 'btn-scan-global') btn.innerText = "🌍 掃描全域缺失選項";
+                if (id === 'btn-scan-visible') btn.innerText = "掃描局部缺失";
+                if (id === 'btn-scan-global') btn.innerText = "掃描全域缺失";
             }
         }
     });