Update index.html

index.html

@@ -83,22 +83,27 @@
         mark { background-color: #fff3cd; color: #856404; padding: 0.2em; border-radius: 3px; font-weight: bold; }
         
         /* 儀表板 */
-        .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-bottom: 30px; }
+        .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin-bottom: 20px; }
         .kpi-card { background-color: var(--table-striped); padding: 20px; border-radius: 8px; border-left: 5px solid var(--primary-color); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); text-align: center; }
         .kpi-title { font-size: 1.1em; color: #666; margin-bottom: 10px; }
         body.dark-mode .kpi-title { color: #aaa; }
         .kpi-value { font-size: 2.2em; font-weight: bold; color: var(--primary-color); }
-        .charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px; margin-bottom: 20px; }
-        .chart-box { background-color: var(--table-striped); padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; }
-        .chart-title { text-align: center; font-size: 1.2em; font-weight: bold; margin-bottom: 15px; color: var(--text-color); }
-        .chart-container { position: relative; height: 300px; width: 100%; flex-grow: 1; }
+        
+        /* 全寬面板 (用於排行榜) */
+        .full-width-panel { background-color: var(--container-bg); border: 1px solid var(--border-color); padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); margin-bottom: 30px; }
+        .panel-title { font-size: 1.3em; font-weight: bold; color: var(--primary-color); border-bottom: 2px solid var(--primary-color); padding-bottom: 10px; margin-bottom: 15px; }
         
         /* 互動連結列表 */
         .clickable-row { cursor: pointer; transition: background-color 0.2s; }
         .clickable-row:hover { background-color: var(--law-info-bg) !important; }
-        .fund-link { color: var(--primary-color); text-decoration: none; transition: text-decoration 0.2s; }
+        .fund-link { color: var(--primary-color); text-decoration: none; transition: text-decoration 0.2s; font-weight: bold; }
         .clickable-row:hover .fund-link { text-decoration: underline; }
 
+        .charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 30px; margin-bottom: 20px; }
+        .chart-box { background-color: var(--table-striped); padding: 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; }
+        .chart-title { text-align: center; font-size: 1.2em; font-weight: bold; margin-bottom: 15px; color: var(--text-color); }
+        .chart-container { position: relative; height: 300px; width: 100%; flex-grow: 1; }
+
         /* 分頁 */
         .pagination { display: flex; justify-content: center; align-items: center; gap: 15px; margin-top: 20px; }
         .page-btn { padding: 8px 15px; background-color: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer; }
@@ -159,11 +164,18 @@
                 <div class="loader" id="main-loader"></div> 資料載入中，請稍候... (首次載入需下載全國法規資料庫)
             </div>
             <div id="dashboard-content" style="display: none;">
+                
                 <div class="kpi-grid">
                     <div class="kpi-card"><div class="kpi-title">現行運作中基金總數</div><div class="kpi-value" id="kpi-active-funds">-</div></div>
                     <div class="kpi-card"><div class="kpi-title">涵蓋主管機關數</div><div class="kpi-value" id="kpi-total-auths">-</div></div>
                     <div class="kpi-card"><div class="kpi-title">收錄現行法規總條數</div><div class="kpi-value" id="kpi-total-articles">-</div></div>
                 </div>
+
+                <div class="full-width-panel">
+                    <div class="panel-title">🕒 最近修正前 10 名基金 (點擊快速查看法條)</div>
+                    <div id="recent-funds-container">
+                        </div>
+                </div>
                 
                 <div class="charts-grid">
                     <div class="chart-box">
@@ -182,11 +194,6 @@
                         <div class="chart-title">💸 基金用途分析文字雲</div>
                         <div class="chart-container" style="height: 350px;"><canvas id="useWordCloudChart"></canvas></div>
                     </div>
-                    <div class="chart-box">
-                        <div class="chart-title">🕒 最近修正前 10 名基金 (點擊查看法條)</div>
-                        <div class="chart-container" id="recent-funds-container" style="overflow-y: auto; padding: 0 10px;">
-                            </div>
-                    </div>
                 </div>
             </div>
         </div>
@@ -352,8 +359,7 @@
             drawChart('sourceWordCloudChart', 'wordCloud', topSources.map(i => i[0]), topSources.map(i => i[1]), chartTextColor);
             drawChart('useWordCloudChart', 'wordCloud', topUses.map(i => i[0]), topUses.map(i => i[1]), chartTextColor);
 
-            // --- 新增：最近修正的前 10 個基金 ---
-            // 建立一個日期轉換函數，把 "民國 114 年 03 月 21 日" 轉成數字 1140321 方便正確比對大小
+            // --- 最近修正的前 10 個基金 (數字排序修復版) ---
             const parseROCDate = (dateStr) => {
                 if (!dateStr) return 0;
                 const matches = dateStr.match(/(\d+)/g);
@@ -368,30 +374,29 @@
                 if (!fundDateMap[item.基金名稱]) {
                     fundDateMap[item.基金名稱] = item.最近發布日期;
                 } else {
-                    // 使用轉換後的數字來比較哪一個日期比較新
                     if (parseROCDate(item.最近發布日期) > parseROCDate(fundDateMap[item.基金名稱])) {
                         fundDateMap[item.基金名稱] = item.最近發布日期;
                     }
                 }
             });
 
-            // 使用轉換後的數字進行遞減排序 (b - a)
             const sortedRecentFunds = Object.entries(fundDateMap)
                 .sort((a, b) => parseROCDate(b[1]) - parseROCDate(a[1])) 
                 .slice(0, 10);
 
             const recentContainer = document.getElementById('recent-funds-container');
             if (recentContainer) {
-                let html = '<table style="width:100%; border-collapse: collapse; text-align: left; margin-top: 10px;">';
-                html += '<thead><tr style="border-bottom: 2px solid var(--border-color);"><th style="padding:8px; color:var(--text-color);">基金名稱</th><th style="padding:8px; width:40%; color:var(--text-color);">最近發布日期</th></tr></thead><tbody>';
+                // 移除原有的 overflow-y，改用標準無框線風格表格，並加入 white-space: nowrap 防止日期換行
+                let html = '<table style="width:100%; border-collapse: collapse; text-align: left;">';
+                html += '<thead><tr style="background-color: var(--table-hover);"><th style="padding:12px; color:var(--text-color); border: 1px solid var(--border-color); width: 60px; text-align: center;">排名</th><th style="padding:12px; color:var(--text-color); border: 1px solid var(--border-color);">基金名稱</th><th style="padding:12px; color:var(--text-color); border: 1px solid var(--border-color); width: 250px; text-align: center;">最近發布日期</th></tr></thead><tbody>';
                 
                 sortedRecentFunds.forEach((fund, index) => {
                     html += `<tr class="clickable-row" onclick="goToFund('${fund[0].replace(/'/g, "\\'")}')" style="border-bottom: 1px solid var(--border-color);">
-                                <td style="padding:12px 8px;">
-                                    <span style="display:inline-block; width:20px; text-align:right; margin-right:5px; color:#888;">${index + 1}.</span> 
+                                <td style="padding:12px; text-align: center; font-weight: bold; color: #888; border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color);">${index + 1}</td>
+                                <td style="padding:12px; border-right: 1px solid var(--border-color);">
                                     <span class="fund-link">${fund[0]}</span>
                                 </td>
-                                <td style="padding:12px 8px; color: var(--text-color); font-weight: bold;">${fund[1]}</td>
+                                <td style="padding:12px; text-align: center; color: var(--text-color); font-weight: bold; white-space: nowrap; border-right: 1px solid var(--border-color);">${fund[1]}</td>
                              </tr>`;
                 });
                 html += '</tbody></table>';