优化前端界面：刷新按钮移至过期时间旁、添加筛选功能、优化动画效果、隐藏敏感信息时不显示相关行

public/index.html

@@ -95,15 +95,15 @@ html.tab-settings .tab[data-tab="settings"] {
                     <!-- 统计卡片 + 操作按钮 合并 -->
                     <div class="top-bar">
                         <div class="stats-inline">
-                            <div class="stat-item">
+                            <div class="stat-item clickable active" onclick="filterTokens('all')">
                                 <span class="stat-num" id="totalTokens">0</span>
                                 <span class="stat-text">总数</span>
                             </div>
-                            <div class="stat-item success">
+                            <div class="stat-item success clickable" onclick="filterTokens('enabled')">
                                 <span class="stat-num" id="enabledTokens">0</span>
                                 <span class="stat-text">启用</span>
                             </div>
-                            <div class="stat-item danger">
+                            <div class="stat-item danger clickable" onclick="filterTokens('disabled')">
                                 <span class="stat-num" id="disabledTokens">0</span>
                                 <span class="stat-text">禁用</span>
                             </div>

public/js/quota.js

@@ -102,7 +102,8 @@ async function toggleQuotaExpand(cardId, refreshToken) {
     
     if (isHidden) {
         detailEl.classList.remove('hidden');
-        toggleEl.textContent = '▲';
+        detailEl.classList.remove('collapsing');
+        toggleEl.classList.add('expanded');
         
         if (!detailEl.dataset.loaded) {
             detailEl.innerHTML = '<div class="quota-loading-small">加载中...</div>';
@@ -110,8 +111,15 @@ async function toggleQuotaExpand(cardId, refreshToken) {
             detailEl.dataset.loaded = 'true';
         }
     } else {
-        detailEl.classList.add('hidden');
-        toggleEl.textContent = '▼';
+        // 添加收起动画
+        detailEl.classList.add('collapsing');
+        toggleEl.classList.remove('expanded');
+        
+        // 动画结束后隐藏
+        setTimeout(() => {
+            detailEl.classList.add('hidden');
+            detailEl.classList.remove('collapsing');
+        }, 200);
     }
 }
 

public/js/tokens.js

@@ -1,6 +1,25 @@
 // Token管理：增删改查、启用禁用
 
 let cachedTokens = [];
+let currentFilter = 'all'; // 'all', 'enabled', 'disabled'
+
+// 筛选 Token
+function filterTokens(filter) {
+    currentFilter = filter;
+    
+    // 更新筛选按钮状态
+    document.querySelectorAll('.stat-item').forEach(item => {
+        item.classList.remove('active');
+    });
+    const filterMap = { 'all': 'totalTokens', 'enabled': 'enabledTokens', 'disabled': 'disabledTokens' };
+    const activeElement = document.getElementById(filterMap[filter]);
+    if (activeElement) {
+        activeElement.closest('.stat-item').classList.add('active');
+    }
+    
+    // 重新渲染
+    renderTokens(cachedTokens);
+}
 
 async function loadTokens() {
     try {
@@ -23,19 +42,33 @@ async function loadTokens() {
 const refreshingTokens = new Set();
 
 function renderTokens(tokens) {
-    cachedTokens = tokens;
+    // 只在首次加载时更新缓存
+    if (tokens !== cachedTokens) {
+        cachedTokens = tokens;
+    }
     
     document.getElementById('totalTokens').textContent = tokens.length;
     document.getElementById('enabledTokens').textContent = tokens.filter(t => t.enable).length;
     document.getElementById('disabledTokens').textContent = tokens.filter(t => !t.enable).length;
     
+    // 根据筛选条件过滤
+    let filteredTokens = tokens;
+    if (currentFilter === 'enabled') {
+        filteredTokens = tokens.filter(t => t.enable);
+    } else if (currentFilter === 'disabled') {
+        filteredTokens = tokens.filter(t => !t.enable);
+    }
+    
     const tokenList = document.getElementById('tokenList');
-    if (tokens.length === 0) {
+    if (filteredTokens.length === 0) {
+        const emptyText = currentFilter === 'all' ? '暂无Token' :
+                          currentFilter === 'enabled' ? '暂无启用的Token' : '暂无禁用的Token';
+        const emptyHint = currentFilter === 'all' ? '点击上方OAuth按钮添加Token' : '点击上方"总数"查看全部';
         tokenList.innerHTML = `
             <div class="empty-state">
                 <div class="empty-state-icon">📦</div>
-                <div class="empty-state-text">暂无Token</div>
-                <div class="empty-state-hint">点击上方OAuth按钮添加Token</div>
+                <div class="empty-state-text">${emptyText}</div>
+                <div class="empty-state-hint">${emptyHint}</div>
             </div>
         `;
         return;
@@ -44,13 +77,17 @@ function renderTokens(tokens) {
     // 收集需要自动刷新的过期 Token
     const expiredTokensToRefresh = [];
     
-    tokenList.innerHTML = tokens.map(token => {
+    tokenList.innerHTML = filteredTokens.map((token, index) => {
         const expireTime = new Date(token.timestamp + token.expires_in * 1000);
         const isExpired = expireTime < new Date();
         const isRefreshing = refreshingTokens.has(token.refresh_token);
         const expireStr = expireTime.toLocaleString('zh-CN', {month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit'});
         const cardId = token.refresh_token.substring(0, 8);
         
+        // 计算在原始列表中的序号（基于添加顺序）
+        const originalIndex = cachedTokens.findIndex(t => t.refresh_token === token.refresh_token);
+        const tokenNumber = originalIndex + 1;
+        
         // 如果已过期且启用状态，加入待刷新列表
         if (isExpired && token.enable && !isRefreshing) {
             expiredTokensToRefresh.push(token.refresh_token);
@@ -72,20 +109,20 @@ function renderTokens(tokens) {
                 </span>
                 <div class="token-header-right">
                     <button class="btn-icon" onclick="showTokenDetail('${safeRefreshToken}')" title="编辑全部">✏️</button>
-                    <span class="token-id">#${escapeHtml(token.refresh_token.substring(0, 6))}</span>
+                    <span class="token-id">#${tokenNumber}</span>
                 </div>
             </div>
             <div class="token-info">
-                <div class="info-row">
+                <div class="info-row sensitive-row">
                     <span class="info-label">🎫</span>
                     <span class="info-value sensitive-info" title="${safeAccessTokenSuffix}">${safeAccessTokenSuffix}</span>
                 </div>
-                <div class="info-row editable" onclick="editField(event, '${safeRefreshToken}', 'projectId', '${safeProjectIdJs}')" title="点击编辑">
+                <div class="info-row editable sensitive-row" onclick="editField(event, '${safeRefreshToken}', 'projectId', '${safeProjectIdJs}')" title="点击编辑">
                     <span class="info-label">📦</span>
                     <span class="info-value sensitive-info">${safeProjectId || '点击设置'}</span>
                     <span class="info-edit-icon">✏️</span>
                 </div>
-                <div class="info-row editable" onclick="editField(event, '${safeRefreshToken}', 'email', '${safeEmailJs}')" title="点击编���">
+                <div class="info-row editable sensitive-row" onclick="editField(event, '${safeRefreshToken}', 'email', '${safeEmailJs}')" title="点击编辑">
                     <span class="info-label">📧</span>
                     <span class="info-value sensitive-info">${safeEmail || '点击设置'}</span>
                     <span class="info-edit-icon">✏️</span>
@@ -93,6 +130,7 @@ function renderTokens(tokens) {
                 <div class="info-row ${isExpired ? 'expired-text' : ''}" id="expire-row-${escapeHtml(cardId)}">
                     <span class="info-label">⏰</span>
                     <span class="info-value">${isRefreshing ? '🔄 刷新中...' : escapeHtml(expireStr)}${isExpired && !isRefreshing ? ' (已过期)' : ''}</span>
+                    <button class="btn-icon btn-refresh" onclick="manualRefreshToken('${safeRefreshToken}')" title="刷新Token" ${isRefreshing ? 'disabled' : ''}>🔄</button>
                 </div>
             </div>
             <div class="token-quota-inline" id="quota-inline-${escapeHtml(cardId)}">
@@ -104,7 +142,6 @@ function renderTokens(tokens) {
             </div>
             <div class="token-actions">
                 <button class="btn btn-info btn-xs" onclick="showQuotaModal('${safeRefreshToken}')" title="查看额度">📊 详情</button>
-                <button class="btn btn-primary btn-xs" onclick="manualRefreshToken('${safeRefreshToken}')" title="刷新Token" ${isRefreshing ? 'disabled' : ''}>🔄 刷新</button>
                 <button class="btn ${token.enable ? 'btn-warning' : 'btn-success'} btn-xs" onclick="toggleToken('${safeRefreshToken}', ${!token.enable})" title="${token.enable ? '禁用' : '启用'}">
                     ${token.enable ? '⏸️ 禁用' : '▶️ 启用'}
                 </button>
@@ -113,7 +150,7 @@ function renderTokens(tokens) {
         </div>
     `}).join('');
     
-    tokens.forEach(token => {
+    filteredTokens.forEach(token => {
         loadTokenQuotaSummary(token.refresh_token);
     });
     

public/js/ui.js

@@ -77,15 +77,26 @@ function switchTab(tab, saveState = true) {
         targetTab.classList.add('active');
     }
     
-    // 隐藏所有页面
-    document.getElementById('tokensPage').classList.add('hidden');
-    document.getElementById('settingsPage').classList.add('hidden');
+    const tokensPage = document.getElementById('tokensPage');
+    const settingsPage = document.getElementById('settingsPage');
     
-    // 显示对应页面
+    // 隐藏所有页面并移除动画类
+    tokensPage.classList.add('hidden');
+    tokensPage.classList.remove('page-enter');
+    settingsPage.classList.add('hidden');
+    settingsPage.classList.remove('page-enter');
+    
+    // 显示对应页面并添加入场动画
     if (tab === 'tokens') {
-        document.getElementById('tokensPage').classList.remove('hidden');
+        tokensPage.classList.remove('hidden');
+        // 触发重排以重新播放动画
+        void tokensPage.offsetWidth;
+        tokensPage.classList.add('page-enter');
     } else if (tab === 'settings') {
-        document.getElementById('settingsPage').classList.remove('hidden');
+        settingsPage.classList.remove('hidden');
+        // 触发重排以重新播放动画
+        void settingsPage.offsetWidth;
+        settingsPage.classList.add('page-enter');
         loadConfig();
     }
     

public/js/utils.js

@@ -74,14 +74,12 @@ function updateSensitiveBtn() {
 }
 
 function updateSensitiveInfoDisplay() {
-    document.querySelectorAll('.sensitive-info').forEach(el => {
+    // 隐藏/显示包含敏感信息的整行
+    document.querySelectorAll('.sensitive-row').forEach(row => {
         if (sensitiveInfoHidden) {
-            el.dataset.original = el.textContent;
-            el.textContent = '••••••';
-            el.classList.add('blurred');
-        } else if (el.dataset.original) {
-            el.textContent = el.dataset.original;
-            el.classList.remove('blurred');
+            row.style.display = 'none';
+        } else {
+            row.style.display = '';
         }
     });
 }

public/style.css

@@ -268,24 +268,27 @@ button.loading::after {
 }
 
 .tabs { display: flex; gap: 0.25rem; }
-.tab { 
-    background: transparent; 
-    color: var(--text-light); 
-    border: none; 
-    padding: 0.5rem 1rem; 
-    border-radius: 0.375rem; 
-    cursor: pointer; 
-    font-weight: 600; 
-    font-size: 0.875rem; 
-    transition: all 0.2s; 
-    min-height: 36px; 
-    box-shadow: none; 
+.tab {
+    background: transparent;
+    color: var(--text-light);
+    border: none;
+    padding: 0.5rem 1rem;
+    border-radius: 0.375rem;
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 0.875rem;
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    min-height: 36px;
+    box-shadow: none;
+    position: relative;
+    overflow: hidden;
 }
-.tab:hover { background: var(--bg); color: var(--text); }
+.tab:hover { background: var(--bg); color: var(--text); transform: translateY(-1px); }
+.tab:active { transform: translateY(0) scale(0.98); }
 .tab.active {
     background: linear-gradient(135deg, var(--primary), var(--primary-dark));
     color: white;
-    box-shadow: 0 2px 6px rgba(8,145,178,0.25);
+    box-shadow: 0 2px 8px rgba(8,145,178,0.3);
 }
 
 .content {
@@ -303,6 +306,9 @@ button.loading::after {
     min-height: 0;
     overflow: hidden;
 }
+#tokensPage.page-enter {
+    animation: pageSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
 
 #settingsPage {
     flex: 1;
@@ -310,6 +316,20 @@ button.loading::after {
     overflow-y: auto;
     padding-right: 4px;
 }
+#settingsPage.page-enter {
+    animation: pageSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes pageSlideIn {
+    from {
+        opacity: 0;
+        transform: translateX(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
 
 /* 顶部栏 - 统计+操作 */
 .top-bar {
@@ -337,6 +357,26 @@ button.loading::after {
     align-items: baseline;
     gap: 0.25rem;
 }
+.stat-item.clickable {
+    cursor: pointer;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.375rem;
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    border: 1.5px solid transparent;
+    position: relative;
+}
+.stat-item.clickable:hover {
+    background: rgba(8,145,178,0.1);
+    transform: translateY(-1px);
+}
+.stat-item.clickable:active {
+    transform: translateY(0) scale(0.98);
+}
+.stat-item.clickable.active {
+    background: rgba(8,145,178,0.15);
+    border-color: var(--primary);
+    box-shadow: 0 2px 8px rgba(8,145,178,0.2);
+}
 .stat-num {
     font-size: 1.25rem;
     font-weight: 700;
@@ -395,29 +435,52 @@ button.loading::after {
     min-height: 0;
 }
 .token-card {
-    background: rgba(255, 255, 255, 0.6);
+    background: rgba(255, 255, 255, 0.85);
     border: 1.5px solid var(--border);
     border-radius: 0.75rem;
     padding: 0.875rem;
-    transition: all 0.2s;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     position: relative;
+    animation: cardFadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1) backwards;
+}
+@keyframes cardFadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px) scale(0.98);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
 }
+/* 为每个卡片添加延迟动画 */
+.token-card:nth-child(1) { animation-delay: 0.02s; }
+.token-card:nth-child(2) { animation-delay: 0.04s; }
+.token-card:nth-child(3) { animation-delay: 0.06s; }
+.token-card:nth-child(4) { animation-delay: 0.08s; }
+.token-card:nth-child(5) { animation-delay: 0.1s; }
+.token-card:nth-child(6) { animation-delay: 0.12s; }
+.token-card:nth-child(7) { animation-delay: 0.14s; }
+.token-card:nth-child(8) { animation-delay: 0.16s; }
+.token-card:nth-child(9) { animation-delay: 0.18s; }
+.token-card:nth-child(10) { animation-delay: 0.2s; }
+.token-card:nth-child(n+11) { animation-delay: 0.22s; }
 @media (prefers-color-scheme: dark) {
     .token-card {
-        background: rgba(30, 41, 59, 0.6);
+        background: rgba(30, 41, 59, 0.85);
     }
 }
 .token-card:hover {
     border-color: var(--primary);
-    box-shadow: 0 6px 16px rgba(0,0,0,0.12);
-    background: rgba(255, 255, 255, 0.85);
-    transform: scale(1.02);
+    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+    background: rgba(255, 255, 255, 0.95);
+    transform: translateY(-4px) scale(1.01);
     z-index: 1;
     position: relative;
 }
 @media (prefers-color-scheme: dark) {
     .token-card:hover {
-        background: rgba(30, 41, 59, 0.85);
+        background: rgba(30, 41, 59, 0.95);
     }
 }
 .token-card.disabled { opacity: 0.6; }
@@ -546,6 +609,36 @@ button.loading::after {
     border-color: var(--primary);
     transform: none;
 }
+.btn-icon.btn-refresh {
+    width: 18px;
+    height: 18px;
+    min-height: 18px;
+    min-width: 18px;
+    font-size: 0.6rem;
+    margin-left: auto;
+    flex-shrink: 0;
+    background: transparent;
+    border: none;
+    color: var(--text-light);
+    opacity: 0.5;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: none;
+}
+.btn-icon.btn-refresh:hover:not(:disabled) {
+    background: transparent;
+    color: var(--primary);
+    opacity: 1;
+    transform: rotate(180deg);
+}
+.btn-icon.btn-refresh:active:not(:disabled) {
+    transform: rotate(360deg);
+}
+.btn-icon.btn-refresh:disabled {
+    opacity: 0.8;
+    cursor: not-allowed;
+    color: var(--warning);
+    animation: spin 0.8s linear infinite;
+}
 
 .token-actions { 
     display: flex; 
@@ -575,6 +668,17 @@ button.loading::after {
     align-items: center;
     justify-content: center;
     min-height: 300px;
+    animation: emptyFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+@keyframes emptyFadeIn {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
 }
 .empty-state-icon { font-size: 3rem; margin-bottom: 0.75rem; opacity: 0.5; }
 .empty-state-text { font-size: 1rem; font-weight: 500; margin-bottom: 0.375rem; }
@@ -1183,11 +1287,42 @@ input:checked + .slider:before {
     color: var(--text-light);
     flex-shrink: 0;
     margin-left: 0.5rem;
+    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.quota-inline-toggle.expanded {
+    transform: rotate(180deg);
 }
 .quota-inline-detail {
     border-top: 1px solid var(--border);
     padding: 0.5rem;
     background: var(--bg);
+    animation: slideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    transform-origin: top;
+}
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: scaleY(0.8);
+        max-height: 0;
+    }
+    to {
+        opacity: 1;
+        transform: scaleY(1);
+        max-height: 500px;
+    }
+}
+.quota-inline-detail.collapsing {
+    animation: slideUp 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+@keyframes slideUp {
+    from {
+        opacity: 1;
+        transform: scaleY(1);
+    }
+    to {
+        opacity: 0;
+        transform: scaleY(0.8);
+    }
 }
 .quota-detail-grid {
     display: flex;
@@ -1264,11 +1399,9 @@ input:checked + .slider:before {
 
 .hidden { display: none !important; }
 
-/* 敏感信息模糊 */
-.sensitive-info.blurred {
-    filter: blur(4px);
-    user-select: none;
-    cursor: default;
+/* 敏感信息行 - 隐藏时不显示 */
+.sensitive-row {
+    transition: opacity 0.2s, max-height 0.2s;
 }
 
 /* 响应式 */