|
|
@@ -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>';
|