Upload 6 files

templates/dashboard.html

@@ -416,6 +416,41 @@
             background: rgba(111, 66, 193, 0.7);
         }
         
+        /* 模型统计折叠样式 */
+        .hidden-model {
+            display: none;
+        }
+        
+        .btn-toggle {
+            background: rgba(111, 66, 193, 0.2);
+            border: 1px solid rgba(111, 66, 193, 0.3);
+            border-radius: 4px;
+            padding: 0.3rem 0.7rem;
+            color: rgba(230, 230, 255, 0.9);
+            cursor: pointer;
+            transition: all 0.2s;
+            font-size: 0.85rem;
+            margin-left: auto;
+        }
+        
+        .btn-toggle:hover {
+            background: rgba(111, 66, 193, 0.4);
+        }
+        
+        /* Token注释样式 */
+        .token-note {
+            margin-top: 0.75rem;
+            color: rgba(230, 230, 255, 0.6);
+            font-style: italic;
+            line-height: 1.4;
+            padding: 0.5rem;
+            border-top: 1px dashed rgba(255, 255, 255, 0.1);
+        }
+        
+        .token-model-table {
+            margin-top: 1rem;
+        }
+        
         /* 媒体查询 */
         @media (max-width: 768px) {
             .container {
@@ -544,6 +579,31 @@
                     <span class="status-label">输出Token</span>
                     <span class="status-value token-count">{{ total_tokens.completion|int }}</span>
                 </div>
+                <div class="token-note">
+                    <small>* 以上数据仅统计通过本代理使用的token数量，不包含在Abacus官网直接使用的token。数值为粗略估计，可能与实际计费有差异。</small>
+                </div>
+                <div class="table-container">
+                    <table class="data-table token-model-table">
+                        <thead>
+                            <tr>
+                                <th>模型</th>
+                                <th>总Token</th>
+                                <th>输入Token</th>
+                                <th>输出Token</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for model, stats in model_stats.items() %}
+                            <tr>
+                                <td>{{ model }}</td>
+                                <td class="token-count">{{ stats.total_tokens|int }}</td>
+                                <td class="token-count">{{ stats.prompt_tokens|int }}</td>
+                                <td class="token-count">{{ stats.completion_tokens|int }}</td>
+                            </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
             </div>
         </div>
         
@@ -582,6 +642,7 @@
                     <span class="card-icon">📈</span>
                     模型使用统计
                 </h2>
+                <button id="toggleModelStats" class="btn-toggle">显示全部</button>
             </div>
             <div class="table-container">
                 <table class="data-table">
@@ -596,7 +657,7 @@
                     </thead>
                     <tbody>
                         {% for model, stats in model_stats.items() %}
-                        <tr>
+                        <tr class="model-row {% if loop.index > 5 %}hidden-model{% endif %}">
                             <td>{{ model }}</td>
                             <td class="call-count">{{ stats.count }}</td>
                             <td class="token-count">{{ stats.prompt_tokens|int }}</td>
@@ -606,6 +667,9 @@
                         {% endfor %}
                     </tbody>
                 </table>
+                <div class="token-note">
+                    <small>* Token计算方式：部分模型使用tiktoken精确计算，其他模型使用估算方法(约4字符=1token)，仅供参考。</small>
+                </div>
             </div>
         </div>
         
@@ -647,7 +711,7 @@
         // 显示/隐藏回到顶部按钮
         window.addEventListener('scroll', () => {
             const floatBtn = document.querySelector('.float-btn');
-            if (window.scrollY > 300) {
+            if (window.pageYOffset > 300) {
                 floatBtn.style.opacity = '1';
             } else {
                 floatBtn.style.opacity = '0';
@@ -656,6 +720,22 @@
         
         // 初始化隐藏回到顶部按钮
         document.querySelector('.float-btn').style.opacity = '0';
+        
+        // 模型统计折叠功能
+        const toggleBtn = document.getElementById('toggleModelStats');
+        const hiddenModels = document.querySelectorAll('.hidden-model');
+        let isExpanded = false;
+        
+        if (toggleBtn) {
+            toggleBtn.addEventListener('click', () => {
+                hiddenModels.forEach(model => {
+                    model.classList.toggle('hidden-model');
+                });
+                
+                isExpanded = !isExpanded;
+                toggleBtn.textContent = isExpanded ? '隐藏部分' : '显示全部';
+            });
+        }
     </script>
 </body>
 </html>