删除确认改用自定义居中弹窗

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

ft-app/app/templates/options.html

@@ -1,7 +1,97 @@
 {% extends "base.html" %}
-{% block title %}期权交易{% endblock %}
+{% block title %}期权交易
-{% block heading %}期权交易{% endblock %}
+<div id="confirmOverlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:199;" onclick="hideConfirm()"></div>
-{% block breadcrumb %}期权开平仓记录{% endblock %}
+<div id="confirmBox" style="display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:28px 32px;z-index:200;text-align:center;max-width:90vw;">
+  <p id="confirmMsg" style="font-size:0.95rem;margin-bottom:20px;"></p>
+  <div style="display:flex;gap:10px;justify-content:center;">
+    <button class="btn" style="background:var(--th-bg);color:var(--fg);" onclick="hideConfirm()">取消</button>
+    <button class="btn" style="background:var(--danger);color:#fff;" id="confirmBtn">确认删除</button>
+  </div>
+</div>
+<script>
+var confirmTarget = '';
+function confirmDelete(e, msg, url) {
+  e.preventDefault();
+  document.getElementById('confirmMsg').textContent = msg;
+  document.getElementById('confirmBtn').onclick = function() {
+    var f = document.createElement('form');
+    f.method = 'POST';
+    f.action = url;
+    document.body.appendChild(f);
+    f.submit();
+  };
+  document.getElementById('confirmOverlay').style.display = 'block';
+  document.getElementById('confirmBox').style.display = 'block';
+}
+function hideConfirm() {
+  document.getElementById('confirmOverlay').style.display = 'none';
+  document.getElementById('confirmBox').style.display = 'none';
+}
+</script>
+
+{% endblock %}
+{% block heading %}期权交易
+<div id="confirmOverlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:199;" onclick="hideConfirm()"></div>
+<div id="confirmBox" style="display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:28px 32px;z-index:200;text-align:center;max-width:90vw;">
+  <p id="confirmMsg" style="font-size:0.95rem;margin-bottom:20px;"></p>
+  <div style="display:flex;gap:10px;justify-content:center;">
+    <button class="btn" style="background:var(--th-bg);color:var(--fg);" onclick="hideConfirm()">取消</button>
+    <button class="btn" style="background:var(--danger);color:#fff;" id="confirmBtn">确认删除</button>
+  </div>
+</div>
+<script>
+var confirmTarget = '';
+function confirmDelete(e, msg, url) {
+  e.preventDefault();
+  document.getElementById('confirmMsg').textContent = msg;
+  document.getElementById('confirmBtn').onclick = function() {
+    var f = document.createElement('form');
+    f.method = 'POST';
+    f.action = url;
+    document.body.appendChild(f);
+    f.submit();
+  };
+  document.getElementById('confirmOverlay').style.display = 'block';
+  document.getElementById('confirmBox').style.display = 'block';
+}
+function hideConfirm() {
+  document.getElementById('confirmOverlay').style.display = 'none';
+  document.getElementById('confirmBox').style.display = 'none';
+}
+</script>
+
+{% endblock %}
+{% block breadcrumb %}期权开平仓记录
+<div id="confirmOverlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:199;" onclick="hideConfirm()"></div>
+<div id="confirmBox" style="display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:28px 32px;z-index:200;text-align:center;max-width:90vw;">
+  <p id="confirmMsg" style="font-size:0.95rem;margin-bottom:20px;"></p>
+  <div style="display:flex;gap:10px;justify-content:center;">
+    <button class="btn" style="background:var(--th-bg);color:var(--fg);" onclick="hideConfirm()">取消</button>
+    <button class="btn" style="background:var(--danger);color:#fff;" id="confirmBtn">确认删除</button>
+  </div>
+</div>
+<script>
+var confirmTarget = '';
+function confirmDelete(e, msg, url) {
+  e.preventDefault();
+  document.getElementById('confirmMsg').textContent = msg;
+  document.getElementById('confirmBtn').onclick = function() {
+    var f = document.createElement('form');
+    f.method = 'POST';
+    f.action = url;
+    document.body.appendChild(f);
+    f.submit();
+  };
+  document.getElementById('confirmOverlay').style.display = 'block';
+  document.getElementById('confirmBox').style.display = 'block';
+}
+function hideConfirm() {
+  document.getElementById('confirmOverlay').style.display = 'none';
+  document.getElementById('confirmBox').style.display = 'none';
+}
+</script>
+
+{% endblock %}
 
 {% block content %}
 
@@ -121,7 +211,7 @@
       <button style="background:var(--danger-bg);color:var(--danger-fg);border:1px solid var(--danger);padding:3px 10px;border-radius:4px;cursor:pointer;font-size:0.78rem;margin-left:8px;"
               onclick="showEditForm('option', {{ t.id }}, '{{ t.product_code }}', '{{ t.contract_code }}', '{{ t.option_type }}', '{{ t.direction }}', {{ t.strike_price }}, {{ t.open_price }}, {{ t.open_fee or 0 }}, '{{ t.open_date }}', null, null, null, '{{ t.status }}')">编辑</button>
 <form method="post" action="/options/{{ t.id }}/delete" style="display:inline;margin-left:8px;">
-        <button style="background:var(--surface);color:var(--fg);border:1px solid var(--border);padding:3px 10px;border-radius:4px;cursor:pointer;font-size:0.78rem;" onclick="return confirm('删除此记录？')">删除</button>
+        <button style="background:var(--surface);color:var(--fg);border:1px solid var(--border);padding:3px 10px;border-radius:4px;cursor:pointer;font-size:0.78rem;" onclick="confirmDelete(event, '确定删除此记录？', this.closest('form').action)">删除</button>
       </form>
     </td>
   </tr>
@@ -206,7 +296,7 @@
       <button style="background:var(--danger-bg);color:var(--danger-fg);border:1px solid var(--danger);padding:3px 10px;border-radius:4px;cursor:pointer;font-size:0.78rem;margin-left:8px;"
               onclick="showEditForm('option', {{ t.id }}, '{{ t.product_code }}', '{{ t.contract_code }}', '{{ t.option_type }}', '{{ t.direction }}', {{ t.strike_price }}, {{ t.open_price }}, {{ t.open_fee or 0 }}, '{{ t.open_date }}', {{ t.close_price }}, {{ t.close_fee or 0 }}, '{{ t.close_date }}', '{{ t.status }}')">编辑</button>
       <form method="post" action="/options/{{ t.id }}/delete" style="display:inline;margin-left:8px;">
-        <button style="background:var(--surface);color:var(--fg);border:1px solid var(--border);padding:3px 10px;border-radius:4px;cursor:pointer;font-size:0.78rem;" onclick="return confirm('删除此记录？')">删除</button>
+        <button style="background:var(--surface);color:var(--fg);border:1px solid var(--border);padding:3px 10px;border-radius:4px;cursor:pointer;font-size:0.78rem;" onclick="confirmDelete(event, '确定删除此记录？', this.closest('form').action)">删除</button>
       </form>
     </td>
   </tr>
@@ -380,4 +470,34 @@ function hidePnlDrawer() {
   document.getElementById('pnlBox').style.display = 'none';
 }
 </script>
+
+<div id="confirmOverlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:199;" onclick="hideConfirm()"></div>
+<div id="confirmBox" style="display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:28px 32px;z-index:200;text-align:center;max-width:90vw;">
+  <p id="confirmMsg" style="font-size:0.95rem;margin-bottom:20px;"></p>
+  <div style="display:flex;gap:10px;justify-content:center;">
+    <button class="btn" style="background:var(--th-bg);color:var(--fg);" onclick="hideConfirm()">取消</button>
+    <button class="btn" style="background:var(--danger);color:#fff;" id="confirmBtn">确认删除</button>
+  </div>
+</div>
+<script>
+var confirmTarget = '';
+function confirmDelete(e, msg, url) {
+  e.preventDefault();
+  document.getElementById('confirmMsg').textContent = msg;
+  document.getElementById('confirmBtn').onclick = function() {
+    var f = document.createElement('form');
+    f.method = 'POST';
+    f.action = url;
+    document.body.appendChild(f);
+    f.submit();
+  };
+  document.getElementById('confirmOverlay').style.display = 'block';
+  document.getElementById('confirmBox').style.display = 'block';
+}
+function hideConfirm() {
+  document.getElementById('confirmOverlay').style.display = 'none';
+  document.getElementById('confirmBox').style.display = 'none';
+}
+</script>
+
 {% endblock %}

ft-app/app/templates/positions.html

@@ -65,14 +65,14 @@
     <span style="margin-left:auto;display:flex;gap:8px;">
       <form method="post" action="/positions/{{ round.id }}/close" style="display:inline;">
         <input type="hidden" name="result" value="profit_taken">
-        <button class="btn" style="background:var(--success);color:#fff;font-size:0.78rem;padding:4px 14px;" onclick="return confirm('确认 {{ round.contract_code }} 止盈清仓？')">止盈</button>
+        <button class="btn" style="background:var(--success);color:#fff;font-size:0.78rem;padding:4px 14px;" onclick="confirmDelete(event, '确认 {{ round.contract_code }} 止盈清仓？', this.closest('form').action)">止盈</button>
       </form>
       <form method="post" action="/positions/{{ round.id }}/close" style="display:inline;">
         <input type="hidden" name="result" value="meltdown">
-        <button class="btn" style="background:var(--danger);color:#fff;font-size:0.78rem;padding:4px 14px;" onclick="return confirm('确认 {{ round.contract_code }} 熔断清仓？')">熔断</button>
+        <button class="btn" style="background:var(--danger);color:#fff;font-size:0.78rem;padding:4px 14px;" onclick="confirmDelete(event, '确认 {{ round.contract_code }} 熔断清仓？', this.closest('form').action)">熔断</button>
       </form>
       <form method="post" action="/positions/{{ round.id }}/delete" style="display:inline;">
-        <button style="background:none;border:none;color:var(--na);cursor:pointer;font-size:0.78rem;" onclick="return confirm('确认删除 {{ round.contract_code }} 整轮数据？')">删除</button>
+        <button style="background:none;border:none;color:var(--na);cursor:pointer;font-size:0.78rem;" onclick="confirmDelete(event, '确定删除 {{ round.contract_code }} 整轮数据？', this.closest('form').action)">删除</button>
       </form>
     </span>
   </div>
@@ -182,4 +182,33 @@ function filterContracts() {
   }
 }
 </script>
-{% endblock %}
+
+<div id="confirmOverlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:199;" onclick="hideConfirm()"></div>
+<div id="confirmBox" style="display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:28px 32px;z-index:200;text-align:center;max-width:90vw;">
+  <p id="confirmMsg" style="font-size:0.95rem;margin-bottom:20px;"></p>
+  <div style="display:flex;gap:10px;justify-content:center;">
+    <button class="btn" style="background:var(--th-bg);color:var(--fg);" onclick="hideConfirm()">取消</button>
+    <button class="btn" style="background:var(--danger);color:#fff;" id="confirmBtn">确认</button>
+  </div>
+</div>
+<script>
+function confirmDelete(e, msg, url) {
+  e.preventDefault();
+  document.getElementById('confirmMsg').textContent = msg;
+  document.getElementById('confirmBtn').onclick = function() {
+    var f = document.createElement('form');
+    f.method = 'POST';
+    f.action = url;
+    document.body.appendChild(f);
+    f.submit();
+  };
+  document.getElementById('confirmOverlay').style.display = 'block';
+  document.getElementById('confirmBox').style.display = 'block';
+}
+function hideConfirm() {
+  document.getElementById('confirmOverlay').style.display = 'none';
+  document.getElementById('confirmBox').style.display = 'none';
+}
+</script>
+
+{% endblock %}

ft-app/app/templates/trades.html

@@ -1,7 +1,97 @@
 {% extends "base.html" %}
-{% block title %}交易记录{% endblock %}
+{% block title %}交易记录
-{% block heading %}交易记录{% endblock %}
+<div id="confirmOverlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:199;" onclick="hideConfirm()"></div>
-{% block breadcrumb %}开平仓记录{% endblock %}
+<div id="confirmBox" style="display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:28px 32px;z-index:200;text-align:center;max-width:90vw;">
+  <p id="confirmMsg" style="font-size:0.95rem;margin-bottom:20px;"></p>
+  <div style="display:flex;gap:10px;justify-content:center;">
+    <button class="btn" style="background:var(--th-bg);color:var(--fg);" onclick="hideConfirm()">取消</button>
+    <button class="btn" style="background:var(--danger);color:#fff;" id="confirmBtn">确认删除</button>
+  </div>
+</div>
+<script>
+var confirmTarget = '';
+function confirmDelete(e, msg, url) {
+  e.preventDefault();
+  document.getElementById('confirmMsg').textContent = msg;
+  document.getElementById('confirmBtn').onclick = function() {
+    var f = document.createElement('form');
+    f.method = 'POST';
+    f.action = url;
+    document.body.appendChild(f);
+    f.submit();
+  };
+  document.getElementById('confirmOverlay').style.display = 'block';
+  document.getElementById('confirmBox').style.display = 'block';
+}
+function hideConfirm() {
+  document.getElementById('confirmOverlay').style.display = 'none';
+  document.getElementById('confirmBox').style.display = 'none';
+}
+</script>
+
+{% endblock %}
+{% block heading %}交易记录
+<div id="confirmOverlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:199;" onclick="hideConfirm()"></div>
+<div id="confirmBox" style="display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:28px 32px;z-index:200;text-align:center;max-width:90vw;">
+  <p id="confirmMsg" style="font-size:0.95rem;margin-bottom:20px;"></p>
+  <div style="display:flex;gap:10px;justify-content:center;">
+    <button class="btn" style="background:var(--th-bg);color:var(--fg);" onclick="hideConfirm()">取消</button>
+    <button class="btn" style="background:var(--danger);color:#fff;" id="confirmBtn">确认删除</button>
+  </div>
+</div>
+<script>
+var confirmTarget = '';
+function confirmDelete(e, msg, url) {
+  e.preventDefault();
+  document.getElementById('confirmMsg').textContent = msg;
+  document.getElementById('confirmBtn').onclick = function() {
+    var f = document.createElement('form');
+    f.method = 'POST';
+    f.action = url;
+    document.body.appendChild(f);
+    f.submit();
+  };
+  document.getElementById('confirmOverlay').style.display = 'block';
+  document.getElementById('confirmBox').style.display = 'block';
+}
+function hideConfirm() {
+  document.getElementById('confirmOverlay').style.display = 'none';
+  document.getElementById('confirmBox').style.display = 'none';
+}
+</script>
+
+{% endblock %}
+{% block breadcrumb %}开平仓记录
+<div id="confirmOverlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:199;" onclick="hideConfirm()"></div>
+<div id="confirmBox" style="display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:28px 32px;z-index:200;text-align:center;max-width:90vw;">
+  <p id="confirmMsg" style="font-size:0.95rem;margin-bottom:20px;"></p>
+  <div style="display:flex;gap:10px;justify-content:center;">
+    <button class="btn" style="background:var(--th-bg);color:var(--fg);" onclick="hideConfirm()">取消</button>
+    <button class="btn" style="background:var(--danger);color:#fff;" id="confirmBtn">确认删除</button>
+  </div>
+</div>
+<script>
+var confirmTarget = '';
+function confirmDelete(e, msg, url) {
+  e.preventDefault();
+  document.getElementById('confirmMsg').textContent = msg;
+  document.getElementById('confirmBtn').onclick = function() {
+    var f = document.createElement('form');
+    f.method = 'POST';
+    f.action = url;
+    document.body.appendChild(f);
+    f.submit();
+  };
+  document.getElementById('confirmOverlay').style.display = 'block';
+  document.getElementById('confirmBox').style.display = 'block';
+}
+function hideConfirm() {
+  document.getElementById('confirmOverlay').style.display = 'none';
+  document.getElementById('confirmBox').style.display = 'none';
+}
+</script>
+
+{% endblock %}
 
 {% block content %}
 
@@ -101,7 +191,7 @@
       <button style="background:var(--danger-bg);color:var(--danger-fg);border:1px solid var(--danger);padding:3px 10px;border-radius:4px;cursor:pointer;font-size:0.78rem;margin-left:8px;"
               onclick="showEditForm('trade', {{ t.id }}, '{{ t.product_code }}', '{{ t.contract_code }}', '{{ t.direction }}', {{ t.open_price }}, {{ t.open_fee or 0 }}, '{{ t.open_date }}', null, null, null, '{{ t.status }}')">编辑</button>
 <form method="post" action="/trades/{{ t.id }}/delete" style="display:inline;margin-left:8px;">
-        <button style="background:var(--surface);color:var(--fg);border:1px solid var(--border);padding:3px 10px;border-radius:4px;cursor:pointer;font-size:0.78rem;" onclick="return confirm('删除此记录？')">删除</button>
+        <button style="background:var(--surface);color:var(--fg);border:1px solid var(--border);padding:3px 10px;border-radius:4px;cursor:pointer;font-size:0.78rem;" onclick="confirmDelete(event, '确定删除此记录？', this.closest('form').action)">删除</button>
       </form>
     </td>
   </tr>
@@ -178,7 +268,7 @@
       <button style="background:var(--danger-bg);color:var(--danger-fg);border:1px solid var(--danger);padding:3px 10px;border-radius:4px;cursor:pointer;font-size:0.78rem;margin-left:8px;"
               onclick="showEditForm('trade', {{ t.id }}, '{{ t.product_code }}', '{{ t.contract_code }}', '{{ t.direction }}', {{ t.open_price }}, {{ t.open_fee or 0 }}, '{{ t.open_date }}', {{ t.close_price }}, {{ t.close_fee or 0 }}, '{{ t.close_date }}', '{{ t.status }}')">编辑</button>
       <form method="post" action="/trades/{{ t.id }}/delete" style="display:inline;margin-left:8px;">
-        <button style="background:var(--surface);color:var(--fg);border:1px solid var(--border);padding:3px 10px;border-radius:4px;cursor:pointer;font-size:0.78rem;" onclick="return confirm('删除此记录？')">删除</button>
+        <button style="background:var(--surface);color:var(--fg);border:1px solid var(--border);padding:3px 10px;border-radius:4px;cursor:pointer;font-size:0.78rem;" onclick="confirmDelete(event, '确定删除此记录？', this.closest('form').action)">删除</button>
       </form>
     </td>
   </tr>
@@ -338,4 +428,34 @@ function hideEditForm() {
   document.getElementById('editFormBox').style.display = 'none';
 }
 </script>
+
+<div id="confirmOverlay" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:199;" onclick="hideConfirm()"></div>
+<div id="confirmBox" style="display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:28px 32px;z-index:200;text-align:center;max-width:90vw;">
+  <p id="confirmMsg" style="font-size:0.95rem;margin-bottom:20px;"></p>
+  <div style="display:flex;gap:10px;justify-content:center;">
+    <button class="btn" style="background:var(--th-bg);color:var(--fg);" onclick="hideConfirm()">取消</button>
+    <button class="btn" style="background:var(--danger);color:#fff;" id="confirmBtn">确认删除</button>
+  </div>
+</div>
+<script>
+var confirmTarget = '';
+function confirmDelete(e, msg, url) {
+  e.preventDefault();
+  document.getElementById('confirmMsg').textContent = msg;
+  document.getElementById('confirmBtn').onclick = function() {
+    var f = document.createElement('form');
+    f.method = 'POST';
+    f.action = url;
+    document.body.appendChild(f);
+    f.submit();
+  };
+  document.getElementById('confirmOverlay').style.display = 'block';
+  document.getElementById('confirmBox').style.display = 'block';
+}
+function hideConfirm() {
+  document.getElementById('confirmOverlay').style.display = 'none';
+  document.getElementById('confirmBox').style.display = 'none';
+}
+</script>
+
 {% endblock %}