Переглянути джерело

feat(仪表盘): 添加币对搜索功能并优化样式

在侧边栏添加搜索框,支持实时过滤币对列表
调整侧边栏标题的底部边距,增加搜索框的样式和交互效果
默认选中包含BTC的币对
skyfffire 1 тиждень тому
батько
коміт
af39af6145
1 змінених файлів з 44 додано та 1 видалено
  1. 44 1
      src/dashboard/static/index.html

+ 44 - 1
src/dashboard/static/index.html

@@ -71,12 +71,32 @@
         }
 
         .sidebar-header h3 {
-            margin: 0;
+            margin: 0 0 15px 0;
             font-size: 1.1em;
             color: #495057;
             font-weight: 600;
         }
 
+        .search-box {
+            width: 100%;
+            padding: 10px 12px;
+            border: 2px solid #dee2e6;
+            border-radius: 6px;
+            font-size: 0.9em;
+            transition: all 0.3s ease;
+            background: white;
+        }
+
+        .search-box:focus {
+            outline: none;
+            border-color: #667eea;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+
+        .search-box::placeholder {
+            color: #6c757d;
+        }
+
         .symbol-list {
             padding: 0;
             margin: 0;
@@ -318,6 +338,7 @@
             <div class="sidebar">
                 <div class="sidebar-header">
                     <h3>选择币对</h3>
+                    <input type="text" id="searchBox" class="search-box" placeholder="搜索币对..." oninput="filterSymbols()">
                 </div>
                 <ul id="symbolList" class="symbol-list">
                     <li class="symbol-item loading-item">正在加载币对...</li>
@@ -374,6 +395,7 @@
         let thumbnailData = null;
         let autoRefreshInterval = null;
         let selectedSymbol = null;
+        let allSymbols = []; // 存储所有币对数据
         
         // 动态设置API基础URL
         let API_BASE = '';
@@ -413,10 +435,25 @@
             loadData();
         }
 
+        function filterSymbols() {
+            const searchTerm = document.getElementById('searchBox').value.toLowerCase();
+            const symbolItems = document.querySelectorAll('.symbol-item');
+            
+            symbolItems.forEach(item => {
+                const symbolText = item.textContent.toLowerCase();
+                if (symbolText.includes(searchTerm)) {
+                    item.style.display = 'block';
+                } else {
+                    item.style.display = 'none';
+                }
+            });
+        }
+
         async function loadSymbols() {
             try {
                 const response = await axios.get(`${API_BASE}/symbols`);
                 const symbols = response.data.symbols;
+                allSymbols = symbols; // 保存所有币对
                 
                 const symbolList = document.getElementById('symbolList');
                 symbolList.innerHTML = '';
@@ -428,6 +465,12 @@
                     listItem.onclick = () => selectSymbol(symbol);
                     symbolList.appendChild(listItem);
                 });
+
+                // 默认选择BTC(如果存在)
+                const btcSymbol = symbols.find(symbol => symbol.includes('BTC'));
+                if (btcSymbol) {
+                    selectSymbol(btcSymbol);
+                }
             } catch (error) {
                 const symbolList = document.getElementById('symbolList');
                 symbolList.innerHTML = '<li class="symbol-item error-item">加载币对列表失败</li>';