Make settings cards collapsible and tighten backup layout.

All settings sections fold by default with persisted state; backup and password sit in one compact row.

Co-authored-by: Cursor <cursoragent@cursor.com>

templates/settings.html

@@ -7,7 +7,9 @@
 .settings-page .split-grid{margin-bottom:0}
 .settings-page .split-grid .card{margin-bottom:0;min-height:100%;height:100%;display:flex;flex-direction:column}
 .settings-page .split-grid .card > form,
-.settings-page .split-grid .card > .card-inner{flex:1;display:flex;flex-direction:column}
+.settings-page .split-grid .card > .card-inner,
+.settings-page .split-grid .settings-fold-body > form,
+.settings-page .split-grid .settings-fold-body > .card-inner{flex:1;display:flex;flex-direction:column}
 .settings-password-form{display:grid;grid-template-columns:1fr 1fr;gap:.65rem .75rem}
 .settings-password-form .field-full{grid-column:1/-1}
 .settings-password-form .field label{font-size:.78rem}
@@ -67,7 +69,48 @@
 .settings-backup-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .65rem}
 .settings-backup-download{color:var(--accent);text-decoration:none;font-weight:600}
 .settings-backup-download:hover{text-decoration:underline}
+.settings-admin-row .settings-compact-card{font-size:.78rem}
+.settings-admin-row .settings-compact-card .hint,
+.settings-admin-row .settings-backup-meta,
+.settings-admin-row .settings-backup-restore{font-size:.72rem;line-height:1.5}
+.settings-admin-row .settings-backup-table{font-size:.7rem}
+.settings-admin-row .settings-backup-table th,
+.settings-admin-row .settings-backup-table td{padding:.35rem .4rem}
+.settings-admin-row .settings-backup-table td:first-child code{word-break:break-all;font-size:.68rem}
+.settings-admin-row .field label{font-size:.72rem}
+.settings-admin-row .field input{padding:.4rem .55rem;font-size:.78rem}
+.settings-admin-row .settings-backup-config{display:grid;grid-template-columns:1fr;gap:.45rem;margin-bottom:.55rem}
+.settings-admin-row .settings-backup-actions{margin-top:.35rem}
+.settings-admin-row .settings-backup-actions .btn-primary,
+.settings-admin-row .settings-compact-card > form .btn-primary{padding:.42rem .7rem;font-size:.78rem}
+.settings-admin-row .settings-password-form{grid-template-columns:1fr;gap:.45rem .55rem}
+.settings-admin-row .settings-password-form input{padding:.4rem .55rem;font-size:.78rem}
+.settings-page .settings-fold.card{padding:0;overflow:hidden}
+.settings-page .split-grid .settings-fold.card{min-height:auto;height:auto}
+.settings-fold-head{
+    width:100%;display:flex;align-items:center;justify-content:space-between;gap:.75rem;
+    padding:1rem 1rem .85rem;margin:0;border:none;background:transparent;cursor:pointer;
+    text-align:left;
+}
+.settings-fold-head:hover .settings-fold-title{color:var(--accent)}
+.settings-fold-title{
+    display:flex;align-items:center;gap:.5rem;font-size:1.15rem;font-weight:600;
+    color:var(--text-label);letter-spacing:.03em;
+}
+.settings-fold-title:before{
+    content:"";width:4px;height:16px;flex-shrink:0;
+    background:linear-gradient(180deg,var(--accent),var(--accent-2));
+    border-radius:2px;box-shadow:0 0 8px var(--card-glow);
+}
+.settings-fold-chevron{flex-shrink:0;font-size:.72rem;color:var(--text-muted);transition:transform .2s ease}
+.settings-fold.is-collapsed .settings-fold-chevron{transform:rotate(-90deg)}
+.settings-fold-body{padding:0 1rem 1rem;flex:1;display:flex;flex-direction:column}
+.settings-fold.is-collapsed .settings-fold-body{display:none}
+.settings-admin-row .settings-fold-head{padding:.75rem .85rem .6rem}
+.settings-admin-row .settings-fold-title{font-size:.95rem}
+.settings-admin-row .settings-fold-body{padding:0 .85rem .85rem}
 @media(max-width:900px){
+    .settings-admin-row{grid-template-columns:1fr}
     .settings-password-form{grid-template-columns:1fr}
     .settings-ctp-cards-row{grid-template-columns:1fr}
     .settings-ctp-grid{grid-template-columns:1fr}
@@ -77,11 +120,21 @@
 </style>
 {% endblock %}
 {% block content %}
+{% macro settings_card(key, title, extra_class='') %}
+<div class="card settings-fold is-collapsed {{ extra_class }}" data-settings-fold="{{ key }}">
+    <button type="button" class="settings-fold-head" aria-expanded="false">
+        <span class="settings-fold-title">{{ title }}</span>
+        <span class="settings-fold-chevron" aria-hidden="true">▼</span>
+    </button>
+    <div class="settings-fold-body">
+        {{ caller() }}
+    </div>
+</div>
+{% endmacro %}
 <div class="settings-page">
 
 <div class="split-grid">
-    <div class="card">
+    {% call settings_card('nav', '导航显示') %}
-        <h2>导航显示</h2>
         <form action="{{ url_for('settings') }}" method="post">
             <input type="hidden" name="action" value="nav">
             <p class="hint" style="margin-bottom:.75rem">关闭后顶栏隐藏对应入口，直接访问 URL 也会跳转回下单监控。</p>
@@ -95,10 +148,9 @@
             </div>
             <button type="submit" class="btn-primary" style="margin-top:.75rem">保存导航</button>
         </form>
-    </div>
+    {% endcall %}
 
-    <div class="card">
+    {% call settings_card('trading', '交易模式') %}
-        <h2>交易模式</h2>
         <form action="{{ url_for('settings') }}" method="post">
             <input type="hidden" name="action" value="trading">
             <div class="form-grid">
@@ -143,12 +195,10 @@
                 <strong>挂单超时</strong>：限价开仓未成交时，超过设定分钟数自动向柜台撤单（1~60 分钟）。CTP 账号与前置在下方「CTP 连接」中配置。
             </p>
         </form>
-    </div>
+    {% endcall %}
 </div>
 
-<div class="card settings-ctp-wrap">
+{% call settings_card('ctp', 'CTP 连接', 'settings-ctp-wrap') %}
-    <h2>CTP 连接</h2>
-    <div class="card-body">
         <p class="hint" style="margin-bottom:.85rem">
             投资者代码、密码、前置地址在此维护（优先于 <code>.env</code>）。保存后将自动断开并用新地址重连 CTP。
             {% if ctp_status.connected %}
@@ -164,8 +214,8 @@
             <input type="hidden" name="action" value="ctp">
 
             <div class="settings-ctp-cards-row">
-            <div class="settings-ctp-fold card{% if trading_mode != 'simulation' %} is-collapsed{% endif %}" data-ctp-fold="simnow">
+            <div class="settings-ctp-fold card is-collapsed" data-ctp-fold="simnow">
-                <button type="button" class="settings-ctp-fold-head" aria-expanded="{{ 'true' if trading_mode == 'simulation' else 'false' }}">
+                <button type="button" class="settings-ctp-fold-head" aria-expanded="false">
                     <span class="settings-ctp-fold-title">
                         SimNow 模拟盘
                         {% if trading_mode == 'simulation' %}<span class="badge planned" style="font-size:.7rem">当前通道</span>{% endif %}
@@ -218,8 +268,8 @@
                 </div>
             </div>
 
-            <div class="settings-ctp-fold card{% if trading_mode != 'live' %} is-collapsed{% endif %}" data-ctp-fold="live">
+            <div class="settings-ctp-fold card is-collapsed" data-ctp-fold="live">
-                <button type="button" class="settings-ctp-fold-head" aria-expanded="{{ 'true' if trading_mode == 'live' else 'false' }}">
+                <button type="button" class="settings-ctp-fold-head" aria-expanded="false">
                     <span class="settings-ctp-fold-title">
                         期货公司实盘
                         {% if trading_mode == 'live' %}<span class="badge planned" style="font-size:.7rem">当前通道</span>{% endif %}
@@ -277,12 +327,10 @@
                 详见 <code>docs/SIMNOW.md</code>。
             </p>
         </form>
-    </div>
+{% endcall %}
-</div>
 
 <div class="split-grid">
-    <div class="card">
+    {% call settings_card('quote', '行情说明') %}
-        <h2>行情说明</h2>
         <div class="card-inner">
             <p class="hint" style="font-size:.88rem;line-height:1.6;margin:0">
                 当前行情源：<strong class="text-accent">{{ quote_label }}</strong><br>
@@ -290,10 +338,9 @@
                 合约代码按同花顺格式（如 ag2608、IF2606）。
             </p>
         </div>
-    </div>
+    {% endcall %}
 
-    <div class="card">
+    {% call settings_card('wechat', '企业微信推送') %}
-        <h2>企业微信推送</h2>
         <form action="{{ url_for('settings') }}" method="post">
             <input type="hidden" name="action" value="wechat">
             <div class="field" style="margin-bottom:.75rem">
@@ -303,19 +350,19 @@
             <button type="submit" class="btn-primary">保存</button>
             <p class="hint" style="margin-top:.75rem;margin-bottom:0">在企业微信群添加机器人后，粘贴 Webhook 地址保存。</p>
         </form>
-    </div>
+    {% endcall %}
 </div>
 
-<div class="card">
+<div class="split-grid settings-admin-row">
-    <h2>数据备份与恢复</h2>
+    {% call settings_card('backup', '数据备份与恢复', 'settings-compact-card') %}
     <p class="settings-backup-meta">
         自动备份目录：<code>{{ backup_dir }}</code>
         {% if backup_last_at %} · 上次备份 {{ backup_last_at.replace('T', ' ') }}{% else %} · 尚未备份{% endif %}
         {% if backup_running %} · <span style="color:var(--accent)">备份进行中…</span>{% endif %}
     </p>
-    <form action="{{ url_for('settings') }}" method="post" style="margin-bottom:.85rem">
+    <form action="{{ url_for('settings') }}" method="post" style="margin-bottom:.55rem">
         <input type="hidden" name="action" value="backup_config">
-        <div class="split-grid" style="margin-bottom:.65rem">
+        <div class="settings-backup-config">
             <div class="field">
                 <label style="display:flex;align-items:center;gap:.45rem;cursor:pointer">
                     <input type="checkbox" name="backup_auto_enabled" value="1" {% if backup_auto_enabled %}checked{% endif %}>
@@ -339,7 +386,7 @@
         <button type="submit" class="btn-primary" {% if backup_running %}disabled{% endif %}>立即备份</button>
     </form>
     </div>
-    <p class="hint" style="margin:.65rem 0 0">备份包含 <code>futures.db</code> 与 <code>uploads/</code>，压缩包可在其他服务器恢复。默认恢复目录 <code>{{ backup_restore_dir }}</code>。</p>
+    <p class="hint" style="margin:.5rem 0 0">备份含 <code>futures.db</code>、<code>uploads/</code>，默认恢复至 <code>{{ backup_restore_dir }}</code>。</p>
 
     {% if backup_items %}
     <table class="settings-backup-table">
@@ -351,33 +398,29 @@
             <tr>
                 <td><code>{{ item.name }}</code></td>
                 <td>{{ item.size_mb }} MB</td>
-                <td>{{ item.mtime.replace('T', ' ') }}</td>
+                <td>{{ item.mtime.replace('T', ' ')[:16] }}</td>
                 <td><a href="{{ url_for('api_backup_download', filename=item.name) }}" class="settings-backup-download">下载</a></td>
             </tr>
             {% endfor %}
         </tbody>
     </table>
     {% else %}
-    <p class="hint" style="margin-top:.65rem;margin-bottom:0">暂无备份文件，可点击「立即备份」生成第一份。</p>
+    <p class="hint" style="margin-top:.5rem;margin-bottom:0">暂无备份，可点「立即备份」。</p>
     {% endif %}
 
     <details class="settings-backup-restore">
         <summary>备份恢复说明</summary>
-        <ol style="margin:.65rem 0 0 1.1rem;padding:0">
+        <ol style="margin:.5rem 0 0 1rem;padding:0">
-            <li>下载上方 <code>.tar.gz</code> 到目标服务器（如 <code>/root/</code>）。</li>
+            <li>下载 <code>.tar.gz</code> 到目标服务器（如 <code>/root/</code>）。</li>
-            <li>解压：<code>tar -xzf qihuo_backup_YYYYMMDD_HHMMSS.tar.gz</code></li>
+            <li>解压：<code>tar -xzf qihuo_backup_*.tar.gz</code></li>
-            <li>进入目录执行：<code>chmod +x restore.sh &amp;&amp; ./restore.sh</code>（默认恢复到 <code>{{ backup_restore_dir }}</code>）。</li>
+            <li>执行：<code>chmod +x restore.sh &amp;&amp; ./restore.sh</code></li>
             <li>指定目录：<code>RESTORE_DIR=/opt/qihuo ./restore.sh</code></li>
-            <li>在新服务器部署 qihuo 代码与虚拟环境，配置 <code>.env</code> 后 <code>pm2 restart qihuo</code>。</li>
+            <li>部署代码、配置 <code>.env</code> 后重启服务。</li>
-            <li>恢复前请停止 qihuo，避免覆盖正在使用的数据库。</li>
         </ol>
-        <p style="margin:.65rem 0 0">完整说明见项目文档 <code>docs/BACKUP.md</code>；压缩包内亦含 <code>RESTORE.md</code>。</p>
     </details>
-</div>
+    {% endcall %}
 
-<div class="split-grid">
+    {% call settings_card('password', '修改密码', 'settings-compact-card') %}
-    <div class="card">
-        <h2>修改密码</h2>
         <form action="{{ url_for('settings') }}" method="post" class="settings-password-form">
             <input type="hidden" name="action" value="password">
             <div class="field field-full">
@@ -400,17 +443,18 @@
                 <button type="submit" class="btn-primary">修改密码</button>
             </div>
         </form>
-    </div>
+    {% endcall %}
+</div>
 
-    <div class="card">
+<div class="split-grid">
-        <h2>使用提示</h2>
+    {% call settings_card('tips', '使用提示') %}
         <ul class="settings-tips">
             <li>下单监控：连接 CTP 后下单、看持仓与可开仓品种</li>
             <li>策略交易：趋势回调自动补仓；顺势加仓需先开仓</li>
             <li>手续费：默认 CTP 柜台费率，连接后点同步</li>
             <li>手机端：浏览器菜单可「添加到主屏幕」安装 App</li>
         </ul>
-    </div>
+    {% endcall %}
 </div>
 
 </div>
@@ -430,6 +474,43 @@
     if (sel) sel.addEventListener('change', syncSizingFields);
     syncSizingFields();
 
+    var SETTINGS_FOLD_KEY = 'qihuo_settings_fold';
+    function setSettingsFold(el, collapsed) {
+        if (!el) return;
+        el.classList.toggle('is-collapsed', collapsed);
+        var head = el.querySelector('.settings-fold-head');
+        if (head) head.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
+    }
+    function saveSettingsFoldState() {
+        var state = {};
+        document.querySelectorAll('[data-settings-fold]').forEach(function (el) {
+            state[el.getAttribute('data-settings-fold')] = el.classList.contains('is-collapsed');
+        });
+        try { localStorage.setItem(SETTINGS_FOLD_KEY, JSON.stringify(state)); } catch (e) { /* ignore */ }
+    }
+    function loadSettingsFoldState() {
+        try {
+            var raw = localStorage.getItem(SETTINGS_FOLD_KEY);
+            if (!raw) return;
+            var state = JSON.parse(raw);
+            document.querySelectorAll('[data-settings-fold]').forEach(function (el) {
+                var key = el.getAttribute('data-settings-fold');
+                if (Object.prototype.hasOwnProperty.call(state, key)) {
+                    setSettingsFold(el, !!state[key]);
+                }
+            });
+        } catch (e) { /* ignore */ }
+    }
+    document.querySelectorAll('.settings-fold-head').forEach(function (btn) {
+        btn.addEventListener('click', function () {
+            var panel = btn.closest('[data-settings-fold]');
+            if (!panel) return;
+            setSettingsFold(panel, !panel.classList.contains('is-collapsed'));
+            saveSettingsFoldState();
+        });
+    });
+    loadSettingsFoldState();
+
     var CTP_FOLD_KEY = 'qihuo_ctp_fold';
     function setCtpFold(el, collapsed) {
         if (!el) return;
@@ -470,6 +551,8 @@
     var ctpForm = document.getElementById('ctp-settings-form');
     if (ctpForm) {
         ctpForm.addEventListener('submit', function (ev) {
+            var ctpCard = document.querySelector('[data-settings-fold="ctp"]');
+            if (ctpCard) setSettingsFold(ctpCard, false);
             var simnowFold = document.querySelector('[data-ctp-fold="simnow"]');
             if (simnowFold) setCtpFold(simnowFold, false);
             var pwd = document.getElementById('simnow_password');