增加排序

2026-05-22 13:27:20 +08:00
parent ee4ee87e37
commit 08b840c0c5
3 changed files with 242 additions and 23 deletions
@@ -9,7 +9,7 @@
 <body>
  <header>
    <h1>币安 U本位合约 · 成交额排名</h1>
-    <p class="subtitle">北京时间 08:00 切日 · Top30 · 高亮：≥1000万 USDT / |涨跌|≥5%</p>
+    <p class="subtitle">北京时间 08:00 切日 · Top30 · 高亮：≥1000万 USDT / |涨跌|≥5% · 点击表头可排序</p>
  </header>

  <section class="panel" id="panel-yesterday">
@@ -17,16 +17,20 @@
      <h2>昨日周期</h2>
      <span class="period" id="yesterday-period">—</span>
      <span class="updated" id="yesterday-updated"></span>
+      <div class="panel-actions">
+        <button type="button" class="btn-secondary" data-export="yesterday">导出 CSV</button>
+        <button type="button" class="btn-secondary" data-reset="yesterday">默认排序</button>
+      </div>
    </div>
    <div class="table-wrap">
-      <table>
+      <table data-table="yesterday">
        <thead>
          <tr>
-            <th>排名</th>
-            <th>合约</th>
-            <th>成交额 (USDT)</th>
-            <th>涨跌幅</th>
-            <th>标记</th>
+            <th class="sortable" data-sort="rank">排名</th>
+            <th class="sortable" data-sort="symbol">合约</th>
+            <th class="sortable" data-sort="quote_volume">成交额 (USDT)</th>
+            <th class="sortable" data-sort="price_change_pct">涨跌幅</th>
+            <th class="sortable" data-sort="tags">标记</th>
          </tr>
        </thead>
        <tbody id="yesterday-body"></tbody>
@@ -39,16 +43,20 @@
      <h2>今日周期 <span class="live">实时</span></h2>
      <span class="period" id="today-period">—</span>
      <span class="updated" id="today-updated"></span>
+      <div class="panel-actions">
+        <button type="button" class="btn-secondary" data-export="today">导出 CSV</button>
+        <button type="button" class="btn-secondary" data-reset="today">默认排序</button>
+      </div>
    </div>
    <div class="table-wrap">
-      <table>
+      <table data-table="today">
        <thead>
          <tr>
-            <th>排名</th>
-            <th>合约</th>
-            <th>成交额 (USDT)</th>
-            <th>涨跌幅</th>
-            <th>标记</th>
+            <th class="sortable" data-sort="rank">排名</th>
+            <th class="sortable" data-sort="symbol">合约</th>
+            <th class="sortable" data-sort="quote_volume">成交额 (USDT)</th>
+            <th class="sortable" data-sort="price_change_pct">涨跌幅</th>
+            <th class="sortable" data-sort="tags">标记</th>
          </tr>
        </thead>
        <tbody id="today-body"></tbody>