重写页面：修复折叠、暗夜切换、抽屉，星期列改为静态展示

2026-07-23 23:11:24 +08:00
parent eabeebd3f5
commit 19534b6e80
1 changed files with 136 additions and 109 deletions
@@ -19,9 +19,8 @@
  }
  body { font-family: -apple-system, 'Segoe UI', system-ui, sans-serif; padding: 24px; max-width: 1100px; margin: 0 auto; color: var(--fg); background: var(--bg); }
  h1 { font-size: 1.4rem; margin-bottom: 8px; }
-  .sub { color: var(--sub); font-size: 0.85rem; margin-bottom: 28px; }
-  .formula { color: var(--sub); font-size: 0.8rem; margin-bottom: 20px; padding: 6px 12px; background: var(--th-bg); border-radius: 4px; display: inline-block; }
-  h2 { font-size: 1.1rem; margin: 28px 0 10px; }
+  .sub { color: var(--sub); font-size: 0.85rem; margin-bottom: 8px; }
+  .formula { color: var(--sub); font-size: 0.8rem; margin-bottom: 24px; padding: 6px 12px; background: var(--th-bg); border-radius: 4px; display: inline-block; }
  table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
  th { background: var(--th-bg); color: var(--th-fg); font-weight: 600; padding: 8px 10px; border: 1px solid var(--th-border); text-align: center; white-space: nowrap; }
  td { padding: 6px 10px; border: 1px solid var(--td-border); text-align: center; }
@@ -30,14 +29,19 @@
  td:nth-child(2) { font-size: 0.78rem; color: var(--sub); }
  .na { color: var(--na); }

-  .toggle { position: fixed; top: 16px; right: 24px; background: var(--th-bg); border: 1px solid var(--th-border); color: var(--th-fg); padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 0.82rem; z-index: 10; }
-  .section h2 { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
+  .toggle-btn { position: fixed; top: 16px; right: 24px; background: var(--th-bg); border: 1px solid var(--th-border); color: var(--th-fg); padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 0.82rem; z-index: 10; }
+  .toggle-btn:hover { opacity: 0.8; }
+
+  .section { margin-bottom: 8px; }
+  .section h2 { font-size: 1.1rem; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; margin: 28px 0 10px; padding: 4px 0; }
  .section h2 .arrow { display: inline-block; transition: transform .2s; font-size: 0.8rem; }
  .section.collapsed h2 .arrow { transform: rotate(-90deg); }
+  .section.collapsed table { display: none; }
+
  .drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 99; display: none; }
-  .drawer-overlay.open { display: block; }
+  .drawer-overlay.show { display: block; }
  .drawer { position: fixed; top: 0; right: 0; width: 340px; height: 100%; background: var(--bg); border-left: 1px solid var(--th-border); z-index: 100; padding: 24px; transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; box-shadow: -4px 0 20px rgba(0,0,0,.15); }
-  .drawer.open { transform: translateX(0); }
+  .drawer.show { transform: translateX(0); }
  .drawer h3 { font-size: 1rem; margin-bottom: 4px; }
  .drawer .date-label { color: var(--sub); font-size: 0.82rem; margin-bottom: 16px; }
  .drawer .calc-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; margin-bottom: 14px; }
@@ -45,62 +49,73 @@
  .drawer .calc-table tr:first-child td { background: var(--th-bg); font-weight: 600; color: var(--th-fg); }
  .drawer .result { font-size: 0.85rem; line-height: 1.8; color: var(--fg); }
  .drawer .result b { font-size: 1.1rem; }
-  .drawer .close { position: absolute; top: 16px; right: 20px; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--sub); line-height: 1; }
-  .drawer .close:hover { color: var(--fg); }
-  .amp-clickable { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
-  .amp-clickable:hover { color: #3b82f6; }
-  .toggle:hover { opacity: 0.8; }
+  .drawer .close-btn { position: absolute; top: 16px; right: 20px; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--sub); line-height: 1; }
+  .drawer .close-btn:hover { color: var(--fg); }
+  .amp-cell { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
+  .amp-cell:hover { color: #3b82f6; }
 </style>
 </head>
 <body>

-<button class="toggle" id="toggle" onclick="toggleTheme()">🌙 暗夜</button>
+<button class="toggle-btn" id="themeToggle">🌙 暗夜</button>

 <h1>振幅锁仓策略</h1>
 <p class="sub">SA2611 (纯碱) &nbsp;|&nbsp; FG2611 (玻璃) &nbsp;|&nbsp; 2026年7月</p>
 <p class="formula">振幅算法：近 5 日均振幅 = 过去 5 个交易日 (最高 − 最低) 的均值，结果四舍五入取整</p>
-<div class="section collapsed" id="sa-section">
-<h2 onclick="toggleSection('sa-section')"><span class="arrow">▼</span> SA2611 纯碱</h2>
-<table>
-<tr><th>日期</th><th>开盘</th><th>收盘</th><th>最高</th><th>最低</th><th>最高最低差价</th><th>振幅</th></tr>
-<tr><td>2026/7/1</td><td>1117</td><td>1118</td><td>1128</td><td>1112</td><td>16</td><td class="na">-</td></tr>
-<tr><td>2026/7/2</td><td>1119</td><td>1134</td><td>1139</td><td>1117</td><td>22</td><td class="na">-</td></tr>
-<tr><td>2026/7/3</td><td>1133</td><td>1132</td><td>1142</td><td>1127</td><td>15</td><td class="na">-</td></tr>
-<tr><td>2026/7/6</td><td>1130</td><td>1128</td><td>1145</td><td>1126</td><td>19</td><td class="na">-</td></tr>
-<tr><td>2026/7/7</td><td>1128</td><td>1094</td><td>1128</td><td>1092</td><td>36</td><td class="na">-</td></tr>
-<tr><td>2026/7/8</td><td>1093</td><td>1105</td><td>1110</td><td>1093</td><td>17</td><td>22</td></tr>
-<tr><td>2026/7/9</td><td>1102</td><td>1103</td><td>1107</td><td>1090</td><td>17</td><td>22</td></tr>
-<tr><td>2026/7/10</td><td>1101</td><td>1113</td><td>1120</td><td>1100</td><td>20</td><td>21</td></tr>
-<tr><td>2026/7/13</td><td>1112</td><td>1089</td><td>1118</td><td>1086</td><td>32</td><td>22</td></tr>
-<tr><td>2026/7/14</td><td>1092</td><td>1092</td><td>1094</td><td>1085</td><td>9</td><td>24</td></tr>
-<tr><td>2026/7/15</td><td>1091</td><td>1077</td><td>1095</td><td>1076</td><td>19</td><td>19</td></tr>
-<tr><td>2026/7/16</td><td>1080</td><td>1057</td><td>1081</td><td>1053</td><td>28</td><td>19</td></tr>
-<tr><td>2026/7/17</td><td>1060</td><td>1036</td><td>1060</td><td>1035</td><td>25</td><td>22</td></tr>
-<tr><td>2026/7/20</td><td>1038</td><td>1041</td><td>1055</td><td>1037</td><td>18</td><td>23</td></tr>
-<tr><td>2026/7/21</td><td>1039</td><td>1042</td><td>1049</td><td>1034</td><td>15</td><td>20</td></tr>
-<tr><td>2026/7/22</td><td>1041</td><td>1041</td><td>1048</td><td>1017</td><td>31</td><td>21</td></tr>
-<tr><td>2026/7/23</td><td>1042</td><td>1037</td><td>1046</td><td>1026</td><td>20</td><td>23</td></tr>
-<tr><td>2026/7/24</td><td class="na">-</td><td class="na">-</td><td class="na">-</td><td class="na">-</td><td>0</td><td>22</td></tr>
-</table>
+
+<div class="section collapsed" id="sec-sa">
+  <h2 onclick="toggleSection('sec-sa')"><span class="arrow">▼</span> SA2611 纯碱</h2>
+  <table>
+    <tr><th>日期</th><th>星期</th><th>开盘</th><th>收盘</th><th>最高</th><th>最低</th><th>最高最低差价</th><th>振幅</th></tr>
+    <tr><td>2026/7/1</td><td>周三</td><td>1117</td><td>1118</td><td>1128</td><td>1112</td><td>16</td><td class="na">-</td></tr>
+    <tr><td>2026/7/2</td><td>周四</td><td>1119</td><td>1134</td><td>1139</td><td>1117</td><td>22</td><td class="na">-</td></tr>
+    <tr><td>2026/7/3</td><td>周五</td><td>1133</td><td>1132</td><td>1142</td><td>1127</td><td>15</td><td class="na">-</td></tr>
+    <tr><td>2026/7/6</td><td>周一</td><td>1130</td><td>1128</td><td>1145</td><td>1126</td><td>19</td><td class="na">-</td></tr>
+    <tr><td>2026/7/7</td><td>周二</td><td>1128</td><td>1094</td><td>1128</td><td>1092</td><td>36</td><td class="na">-</td></tr>
+    <tr><td>2026/7/8</td><td>周三</td><td>1093</td><td>1105</td><td>1110</td><td>1093</td><td>17</td><td class="amp-cell">22</td></tr>
+    <tr><td>2026/7/9</td><td>周四</td><td>1102</td><td>1103</td><td>1107</td><td>1090</td><td>17</td><td class="amp-cell">22</td></tr>
+    <tr><td>2026/7/10</td><td>周五</td><td>1101</td><td>1113</td><td>1120</td><td>1100</td><td>20</td><td class="amp-cell">21</td></tr>
+    <tr><td>2026/7/13</td><td>周一</td><td>1112</td><td>1089</td><td>1118</td><td>1086</td><td>32</td><td class="amp-cell">22</td></tr>
+    <tr><td>2026/7/14</td><td>周二</td><td>1092</td><td>1092</td><td>1094</td><td>1085</td><td>9</td><td class="amp-cell">24</td></tr>
+    <tr><td>2026/7/15</td><td>周三</td><td>1091</td><td>1077</td><td>1095</td><td>1076</td><td>19</td><td class="amp-cell">19</td></tr>
+    <tr><td>2026/7/16</td><td>周四</td><td>1080</td><td>1057</td><td>1081</td><td>1053</td><td>28</td><td class="amp-cell">19</td></tr>
+    <tr><td>2026/7/17</td><td>周五</td><td>1060</td><td>1036</td><td>1060</td><td>1035</td><td>25</td><td class="amp-cell">22</td></tr>
+    <tr><td>2026/7/20</td><td>周一</td><td>1038</td><td>1041</td><td>1055</td><td>1037</td><td>18</td><td class="amp-cell">23</td></tr>
+    <tr><td>2026/7/21</td><td>周二</td><td>1039</td><td>1042</td><td>1049</td><td>1034</td><td>15</td><td class="amp-cell">20</td></tr>
+    <tr><td>2026/7/22</td><td>周三</td><td>1041</td><td>1041</td><td>1048</td><td>1017</td><td>31</td><td class="amp-cell">21</td></tr>
+    <tr><td>2026/7/23</td><td>周四</td><td>1042</td><td>1037</td><td>1046</td><td>1026</td><td>20</td><td class="amp-cell">23</td></tr>
+    <tr><td>2026/7/24</td><td>周五</td><td class="na">-</td><td class="na">-</td><td class="na">-</td><td class="na">-</td><td>0</td><td>22</td></tr>
+  </table>
 </div>

-<div class="section collapsed" id="fg-section">
-<h2 onclick="toggleSection('fg-section')"><span class="arrow">▼</span> FG2611 玻璃</h2>
-<table>
-<tr><th>日期</th><th>开盘</th><th>收盘</th><th>最高</th><th>最低</th><th>最高最低差价</th><th>振幅</th></tr>
-<tr><td>2026/7/1</td><td>1011</td><td>1001</td><td>1011</td><td>994</td><td>17</td><td class="na">-</td></tr>
-<tr><td>2026/7/2</td><td>1001</td><td>1002</td><td>1008</td><td>994</td><td>14</td><td class="na">-</td></tr>
-<tr><td>2026/7/3</td><td>1002</td><td>1010</td><td>1017</td><td>999</td><td>18</td><td class="na">-</td></tr>
-<tr><td>2026/7/6</td><td>1013</td><td>1003</td><td>1019</td><td>1002</td><td>17</td><td class="na">-</td></tr>
-<tr><td>2026/7/7</td><td>1003</td><td>984</td><td>1003</td><td>983</td><td>20</td><td class="na">-</td></tr>
-<tr><td>2026/7/8</td><td>984</td><td>993</td><td>996</td><td>981</td><td>15</td><td>17</td></tr>
-<tr><td>2026/7/9</td><td>994</td><td>987</td><td>994</td><td>981</td><td>13</td><td>17</td></tr>
-<tr><td>2026/7/10</td><td>986</td><td>996</td><td>1004</td><td>983</td><td>21</td><td>17</td></tr>
-<tr><td>2026/7/13</td><td>996</td><td>980</td><td>1001</td><td>980</td><td>21</td><td>17</td></tr>
+<div class="section collapsed" id="sec-fg">
+  <h2 onclick="toggleSection('sec-fg')"><span class="arrow">▼</span> FG2611 玻璃</h2>
+  <table>
+    <tr><th>日期</th><th>星期</th><th>开盘</th><th>收盘</th><th>最高</th><th>最低</th><th>最高最低差价</th><th>振幅</th></tr>
+    <tr><td>2026/7/1</td><td>周三</td><td>1011</td><td>1001</td><td>1011</td><td>994</td><td>17</td><td class="na">-</td></tr>
+    <tr><td>2026/7/2</td><td>周四</td><td>1001</td><td>1002</td><td>1008</td><td>994</td><td>14</td><td class="na">-</td></tr>
+    <tr><td>2026/7/3</td><td>周五</td><td>1002</td><td>1010</td><td>1017</td><td>999</td><td>18</td><td class="na">-</td></tr>
+    <tr><td>2026/7/6</td><td>周一</td><td>1013</td><td>1003</td><td>1019</td><td>1002</td><td>17</td><td class="na">-</td></tr>
+    <tr><td>2026/7/7</td><td>周二</td><td>1003</td><td>984</td><td>1003</td><td>983</td><td>20</td><td class="na">-</td></tr>
+    <tr><td>2026/7/8</td><td>周三</td><td>984</td><td>993</td><td>996</td><td>981</td><td>15</td><td class="amp-cell">17</td></tr>
+    <tr><td>2026/7/9</td><td>周四</td><td>994</td><td>987</td><td>994</td><td>981</td><td>13</td><td class="amp-cell">17</td></tr>
+    <tr><td>2026/7/10</td><td>周五</td><td>986</td><td>996</td><td>1004</td><td>983</td><td>21</td><td class="amp-cell">17</td></tr>
+    <tr><td>2026/7/13</td><td>周一</td><td>996</td><td>980</td><td>1001</td><td>980</td><td>21</td><td class="amp-cell">17</td></tr>
+    <tr><td>2026/7/14</td><td>周二</td><td>982</td><td>983</td><td>986</td><td>974</td><td>12</td><td class="amp-cell">18</td></tr>
+    <tr><td>2026/7/15</td><td>周三</td><td>982</td><td>979</td><td>988</td><td>975</td><td>13</td><td class="amp-cell">16</td></tr>
+    <tr><td>2026/7/16</td><td>周四</td><td>979</td><td>960</td><td>982</td><td>957</td><td>25</td><td class="amp-cell">16</td></tr>
+    <tr><td>2026/7/17</td><td>周五</td><td>962</td><td>932</td><td>962</td><td>931</td><td>31</td><td class="amp-cell">18</td></tr>
+    <tr><td>2026/7/20</td><td>周一</td><td>934</td><td>926</td><td>939</td><td>924</td><td>15</td><td class="amp-cell">20</td></tr>
+    <tr><td>2026/7/21</td><td>周二</td><td>929</td><td>934</td><td>941</td><td>926</td><td>15</td><td class="amp-cell">19</td></tr>
+    <tr><td>2026/7/22</td><td>周三</td><td>936</td><td>939</td><td>945</td><td>929</td><td>16</td><td class="amp-cell">20</td></tr>
+    <tr><td>2026/7/23</td><td>周四</td><td>938</td><td>931</td><td>941</td><td>925</td><td>16</td><td class="amp-cell">20</td></tr>
+    <tr><td>2026/7/24</td><td>周五</td><td class="na">-</td><td class="na">-</td><td class="na">-</td><td class="na">-</td><td>0</td><td>19</td></tr>
+  </table>
+</div>

 <div class="drawer-overlay" id="overlay" onclick="closeDrawer()"></div>
 <div class="drawer" id="drawer">
-  <button class="close" onclick="closeDrawer()">&times;</button>
+  <button class="close-btn" onclick="closeDrawer()">&times;</button>
  <h3 id="drawer-title"></h3>
  <p class="date-label" id="drawer-date"></p>
  <table class="calc-table" id="drawer-table"></table>
@@ -108,32 +123,68 @@
 </div>

 <script>
-// 绑定振幅点击 → 抽屉
-function closeDrawer() {
-  document.getElementById('overlay').classList.remove('open');
-  document.getElementById('drawer').classList.remove('open');
+// ── 暗夜模式 ──
+var themeBtn = document.getElementById('themeToggle');
+function setTheme(dark) {
+  if (dark) {
+    document.documentElement.setAttribute('data-theme', 'dark');
+    themeBtn.textContent = '☀️ 日间';
+  } else {
+    document.documentElement.removeAttribute('data-theme');
+    themeBtn.textContent = '🌙 暗夜';
+  }
+  try { localStorage.setItem('ft-theme', dark ? 'dark' : 'light'); } catch(e) {}
 }
-document.querySelectorAll('table').forEach(function(tbl) {
+function toggleTheme() {
+  setTheme(document.documentElement.getAttribute('data-theme') !== 'dark');
+}
+(function() {
+  try {
+    var s = localStorage.getItem('ft-theme');
+    if (s === 'dark' || (!s && matchMedia('(prefers-color-scheme: dark)').matches)) setTheme(true);
+  } catch(e) {}
+})();
+
+// ── 表格折叠 ──
+function toggleSection(id) {
+  document.getElementById(id).classList.toggle('collapsed');
+}
+
+// ── 抽屉 ──
+function closeDrawer() {
+  document.getElementById('overlay').classList.remove('show');
+  document.getElementById('drawer').classList.remove('show');
+}
+
+// ── 振幅点击 → 抽屉 ──
+document.querySelectorAll('.amp-cell').forEach(function(cell) {
+  cell.addEventListener('click', function() {
+    var row = cell.parentElement;
+    var tbl = row.closest('table');
    var rows = tbl.querySelectorAll('tr');
-  var product = tbl.closest('.section').querySelector('h2').textContent.replace(/[▼▶]/,'').trim();
+    var h2 = tbl.closest('.section').querySelector('h2');
+    var product = h2.childNodes[h2.childNodes.length - 1].textContent.trim();
+
+    // 收集所有行的差价
    var ranges = [];
    for (var i = 1; i < rows.length; i++) {
      var cells = rows[i].querySelectorAll('td');
-    if (cells.length < 8) continue;
-    var date = cells[0].textContent.trim();
-    var wk = cells[1].textContent.trim();
-    var diff = parseInt(cells[6].textContent) || 0;
-    ranges.push({ date: date, wk: wk, diff: diff });
-    var ampCell = cells[7];
-    var ampVal = parseInt(ampCell.textContent);
-    if (isNaN(ampVal)) continue;
-    ampCell.classList.add('amp-clickable');
-    (function(cell, idx) {
+      ranges.push({
+        date: cells[0].textContent.trim(),
+        wk: cells[1].textContent.trim(),
+        diff: parseInt(cells[6].textContent) || 0
+      });
+    }
+
+    // 找到当前行索引
+    var idx = Array.prototype.indexOf.call(rows, row) - 1;
    var start = idx - 5;
    if (start < 0) return;
-      cell.addEventListener('click', function() {
+
+    var ampVal = cell.textContent.trim();
    document.getElementById('drawer-title').textContent = product;
-        document.getElementById('drawer-date').textContent = '目标日期: ' + ranges[idx].date + ' ' + ranges[idx].wk + ' 振幅 ' + ampVal;
+    document.getElementById('drawer-date').textContent = '目标日期: ' + ranges[idx].date + ' ' + ranges[idx].wk + '  振幅 ' + ampVal;
+
    var html = '<tr><td>日期</td><td>最高−最低</td></tr>';
    var sum = 0;
    for (var j = start; j < idx; j++) {
@@ -141,35 +192,11 @@ document.querySelectorAll('table').forEach(function(tbl) {
      sum += ranges[j].diff;
    }
    document.getElementById('drawer-table').innerHTML = html;
-        document.getElementById('drawer-result').innerHTML = '合计 <b>' + sum + '</b> ÷ 5 = <b>' + (sum/5).toFixed(1) + '</b><br>四舍五入 → <b>' + Math.round(sum/5) + '</b>';
-        document.getElementById('overlay').classList.add('open');
-        document.getElementById('drawer').classList.add('open');
+    document.getElementById('drawer-result').innerHTML = '合计 <b>' + sum + '</b> ÷ 5 = <b>' + (sum / 5).toFixed(1) + '</b><br>四舍五入 → <b>' + Math.round(sum / 5) + '</b>';
+
+    document.getElementById('overlay').classList.add('show');
+    document.getElementById('drawer').classList.add('show');
  });
-    })(ampCell, ranges.length - 1);
-  }
-});
-</script>
-
-
-<script>
-// 日期后插入星期列
-document.querySelectorAll('table').forEach(function(tbl) {
-  var rows = tbl.querySelectorAll('tr');
-  // 表头插入"星期"
-  var th = document.createElement('th');
-  th.textContent = '星期';
-  rows[0].insertBefore(th, rows[0].children[1]);
-  // 数据行插入星期几
-  for (var i = 1; i < rows.length; i++) {
-    var td = document.createElement('td');
-    var t = rows[i].children[0].textContent.trim();
-    var m = t.match(/^(\d{4})\/(\d{1,2})\/(\d{1,2})$/);
-    if (m) {
-      var d = new Date(+m[1], +m[2] - 1, +m[3]);
-      td.textContent = ['周日','周一','周二','周三','周四','周五','周六'][d.getDay()];
-    }
-    rows[i].insertBefore(td, rows[i].children[1]);
-  }
 });
 </script>
 </body>