refactor(index.html): Refactor endpoint configuration and stats display logic

public/index.html

@@ -28,61 +28,20 @@
         var md = window.markdownit({
             html: true
         });
-        // 统一配置对象
+
-        const endpointConfig = {
+        // 首先定义一个加载配置的函数
-            'pic/all': {
+        async function loadEndpointConfig() {
-                name: '全部图片',
+            try {
-                order: 1
+                const response = await fetch('/config/endpoint.json');
-            },
+                if (!response.ok) {
-            'pic/ai': {
+                    throw new Error(`HTTP error! status: ${response.status}`);
-                name: 'AI绘图',
+                }
-                order: 2
+                return await response.json();
-            },
+            } catch (error) {
-            'pic/ecy': {
+                console.error('加载endpoint配置失败:', error);
-                name: '二次元(ALL)',
+                return {}; // 返回空对象作为默认值
-                order: 3
+            }
-            },
-            'pic/ecy1': {
-                name: '二次元文件1',
-                order: 4
-            },
-            'pic/ecy2': {
-                name: '二次元文件2',
-                order: 5
-            },
-            'pic/truegirl': {
-                name: '真人美女(ALL)',
-                order: 6
-            },
-            'pic/truegirl1': {
-                name: '真人美女文件1',
-                order: 7
-            },
-            'pic/truegirl2': {
-                name: '真人美女文件2',
-                order: 8
-            },
-            'pic/fj': {
-                name: '风景',
-                order: 9
-            },
-            'pic/czlwb': {
-                name: 'CZL网站背景图',
-                order: 10
-            },
-            'pic/girl-gif': {
-                name: '真人美女动图',
-                order: 11
-            },
-            'pic/loading': {
-                name: '加载图',
-                order: 12
-            },
-            'video/all': {
-                name: '视频',
-                order: 13
         }
-        };
 
         // 加载统计数据
         async function loadStats() {
@@ -120,7 +79,9 @@
         }
 
         // 处理统计数据
-        function updateStats(stats) {
+        async function updateStats(stats) {
+            const endpointConfig = await loadEndpointConfig();
+
             const startDate = new Date('2024-10-26');
             const today = new Date();
             const daysSinceStart = Math.ceil((today - startDate) / (1000 * 60 * 60 * 24));
@@ -128,25 +89,19 @@
             let totalCalls = 0;
             let todayCalls = 0;
 
-            Object.values(stats).forEach(stat => {
+            Object.entries(stats).forEach(([endpoint, stat]) => {
+                if (endpointConfig[endpoint]) {
                     totalCalls += stat.total_calls;
                     todayCalls += stat.today_calls;
+                }
             });
 
             const avgCallsPerDay = Math.round(totalCalls / daysSinceStart);
-            // 获取所有endpoints并按order排序
-            const sortedEndpoints = Object.entries(stats)
-                .sort(([endpointA], [endpointB]) => {
-                    const orderA = endpointConfig[endpointA]?.order || 999;
-                    const orderB = endpointConfig[endpointB]?.order || 999;
-                    return orderA - orderB;
-                });
 
-            // 更新总体统计
             const summaryHtml = `
         <div class="stats-summary">
             <div class="stats-header">
-                        <h2>📊 接口调用次数 <span class="refresh-icon">🔄</span></h2>
+                <h3>📊 接口调用次数 <span class="refresh-icon">🔄</span></h3>
             </div>
             <div class="stats-grid">
                 <div class="stats-item">今日总调用：${todayCalls} 次</div>
@@ -157,7 +112,14 @@
         </div>
     `;
 
-            // 更新详细统计
+            const sortedEndpoints = Object.entries(stats)
+                .filter(([endpoint]) => endpointConfig[endpoint])
+                .sort(([endpointA], [endpointB]) => {
+                    const orderA = endpointConfig[endpointA].order;
+                    const orderB = endpointConfig[endpointB].order;
+                    return orderA - orderB;
+                });
+
             let detailHtml = `
         <table>
             <thead>
@@ -178,7 +140,7 @@
                        onclick="copyToClipboard('${endpoint}')"
                        class="endpoint-link" 
                        title="点击复制链接">
-                                ${getDisplayName(endpoint)}
+                        ${getDisplayName(endpoint, endpointConfig)}
                     </a>
                 </td>
                 <td>${stat.today_calls}</td>
@@ -192,7 +154,6 @@
                 </table>
             `;
 
-            // 插入统计数据
             const summaryElement = document.getElementById('stats-summary');
             const detailElement = document.getElementById('stats-detail');
 
@@ -201,10 +162,21 @@
         }
 
         // 获取显示名称的函数
-        function getDisplayName(endpoint) {
+        function getDisplayName(endpoint, endpointConfig) {
             return endpointConfig[endpoint]?.name || endpoint;
         }
 
+        // 修改事件处理函数来处理异步更新
+        function refreshStats() {
+            fetch('/stats')
+                .then(response => response.json())
+                .then(stats => updateStats(stats))
+                .catch(error => console.error('Error:', error));
+        }
+
+        // 初始加载
+        document.addEventListener('DOMContentLoaded', refreshStats);
+
 
         // 添加复制功能
         function copyToClipboard(endpoint) {