diff --git a/lib/common/static/instance_theme.css b/lib/common/static/instance_theme.css index d6d1d06..b69d76b 100644 --- a/lib/common/static/instance_theme.css +++ b/lib/common/static/instance_theme.css @@ -5412,6 +5412,113 @@ html[data-theme="light"] .settings-account-summary { box-shadow: 0 1px 3px rgba(20, 34, 50, 0.06); } +/* 期权复盘 · 亮色主题(覆盖面板内暗色默认变量) */ +html[data-theme="light"] .options-review-wrap { + --or-section-bg: #fff; + --or-section-shadow: 0 1px 3px rgba(20, 34, 50, 0.06); + --or-border: #9eb0c4; + --or-border-soft: #c8d4e0; + --or-border-faint: #dce4ec; + --or-text: #142232; + --or-title: #142232; + --or-muted: #3a5068; + --or-filters-bg: #eef3f8; + --or-tile-bg: #f6f9fc; + --or-badge-bg: rgba(0, 110, 154, 0.1); + --or-accent-bg: rgba(0, 110, 154, 0.12); + --or-accent-fg: #004d6e; + --or-accent-border: rgba(0, 95, 140, 0.28); + --or-row-active-bg: rgba(0, 110, 154, 0.08); + --or-row-hover-bg: rgba(0, 110, 154, 0.06); + --or-modal-bg: #fff; + --or-modal-shadow: 0 12px 40px rgba(20, 34, 50, 0.18); + --or-backdrop: rgba(20, 34, 50, 0.45); + --or-img-bg: #eef3f8; + color: #142232; +} + +html[data-theme="light"] .options-review-wrap .or-section { + background: #fff !important; + border-color: #9eb0c4 !important; + box-shadow: 0 1px 3px rgba(20, 34, 50, 0.06); + color: #142232 !important; +} + +html[data-theme="light"] .options-review-wrap .or-section-title, +html[data-theme="light"] .options-review-wrap .or-detail-modal-head h3, +html[data-theme="light"] .options-review-wrap .or-page-head h2 { + color: #142232 !important; +} + +html[data-theme="light"] .options-review-wrap .or-section-desc, +html[data-theme="light"] .options-review-wrap .muted, +html[data-theme="light"] .options-review-wrap .sub { + color: #3a5068 !important; +} + +html[data-theme="light"] .options-review-wrap .or-filters { + background: #eef3f8 !important; + border-color: #c8d4e0 !important; +} + +html[data-theme="light"] .options-review-wrap .or-kpi-tile, +html[data-theme="light"] .options-review-wrap .or-stat-card, +html[data-theme="light"] .options-review-wrap .or-detail-img-cell { + background: #f6f9fc !important; + border-color: #c8d4e0 !important; +} + +html[data-theme="light"] .options-review-wrap .or-tab { + background: #fff !important; + color: #006e9a !important; + border-color: rgba(0, 95, 140, 0.22) !important; +} + +html[data-theme="light"] .options-review-wrap .or-tab.active { + background: rgba(0, 110, 154, 0.12) !important; + color: #004d6e !important; + border-color: rgba(0, 95, 140, 0.28) !important; +} + +html[data-theme="light"] .options-review-wrap .or-step { + background: rgba(0, 110, 154, 0.12) !important; + color: #004d6e !important; + border-color: rgba(0, 95, 140, 0.28) !important; +} + +html[data-theme="light"] .options-review-wrap .or-badge { + background: rgba(0, 110, 154, 0.1) !important; + color: #004d6e !important; +} + +html[data-theme="light"] .options-review-wrap .or-detail-modal { + background: #fff !important; + color: #142232 !important; + border-color: #9eb0c4 !important; + box-shadow: 0 12px 40px rgba(20, 34, 50, 0.18); +} + +html[data-theme="light"] .options-review-wrap .or-detail-backdrop { + background: rgba(20, 34, 50, 0.45) !important; +} + +html[data-theme="light"] .options-review-wrap .options-strike-table thead th { + background: #eef3f8 !important; + color: #334155 !important; + border-bottom: 1px solid #c8d4e0 !important; +} + +html[data-theme="light"] .options-review-wrap .options-strike-table th, +html[data-theme="light"] .options-review-wrap .options-strike-table td { + color: #142232 !important; + border-bottom-color: #d0dae4 !important; +} + +html[data-theme="light"] .options-review-wrap .or-trades-table tr.or-row-active, +html[data-theme="light"] .options-review-wrap .or-reviewed-table tbody tr:hover { + background: rgba(0, 110, 154, 0.08) !important; +} + .pos-pnl-profit { color: #7ee787; } diff --git a/lib/common/static/options_review.js b/lib/common/static/options_review.js index a02ee35..126fad4 100644 --- a/lib/common/static/options_review.js +++ b/lib/common/static/options_review.js @@ -115,17 +115,17 @@ ); } - function pnlStyle(v) { + function pnlClass(v) { var n = Number(v); - if (n > 0) return "color:#3dd68c"; - if (n < 0) return "color:#f07178"; + if (n > 0) return "pos-pnl-profit"; + if (n < 0) return "pos-pnl-loss"; return ""; } - function resultStyle(tag) { + function resultClass(tag) { var t = String(tag || "").trim(); - if (t === "盈利") return "color:#3dd68c;font-weight:600"; - if (t === "亏损") return "color:#f07178;font-weight:600"; + if (t === "盈利") return "pos-pnl-profit"; + if (t === "亏损") return "pos-pnl-loss"; return ""; } @@ -395,8 +395,8 @@ "" + escapeHtml(tradeTitle(t)) + "" + - '' + fmtPnl(t.realized_pnl_total) + "" + @@ -496,8 +496,8 @@ "" + escapeHtml(direction || "—") + "" + - '' + fmtPnl(t.realized_pnl_total) + "" + @@ -516,8 +516,8 @@ "" + escapeHtml(entryLogic || "—") + "" + - '' + escapeHtml(t.result_tag || "—") + "" + @@ -713,10 +713,20 @@ } meta.innerHTML = cells .map(function (pair) { + var cls = ""; + if (pair[0] === "盈亏" || pair[0] === "永续盈亏" || pair[0] === "期权盈亏") { + cls = pnlClass(t.realized_pnl_total); + if (pair[0] === "永续盈亏") cls = pnlClass(t.realized_pnl_perp); + if (pair[0] === "期权盈亏") cls = pnlClass(t.realized_pnl_options); + } else if (pair[0] === "结果") { + cls = resultClass(e.result_tag); + } return ( "
" + escapeHtml(pair[0]) + - "
" + + '
' + escapeHtml(pair[1]) + "
" ); @@ -739,7 +749,9 @@ escapeHtml(legRoleLabel(leg.leg_role)) + "" + escapeHtml(leg.inst_id || leg.symbol || "") + - "" + + "" + fmtPnl(leg.realized_pnl) + "" + escapeHtml(closeReasonLabel(leg.close_reason)) + @@ -811,14 +823,14 @@ ["平均持有", fmtHold(k.avg_hold_sec)], ] .map(function (pair) { - var style = ""; - if (pair[0] === "累计盈亏") style = pnlStyle(k.pnl_sum); - if (pair[0] === "平均盈亏") style = pnlStyle(k.avg_pnl); + var cls = ""; + if (pair[0] === "累计盈亏") cls = pnlClass(k.pnl_sum); + if (pair[0] === "平均盈亏") cls = pnlClass(k.avg_pnl); return ( '
' + pair[0] + - '
' + pair[1] + "
" diff --git a/lib/instance/templates/embed_shell.html b/lib/instance/templates/embed_shell.html index 89bfa33..7b83572 100644 --- a/lib/instance/templates/embed_shell.html +++ b/lib/instance/templates/embed_shell.html @@ -8,7 +8,7 @@ - + {{ pwa_app_name }} diff --git a/lib/instance/templates/index.html b/lib/instance/templates/index.html index 63db10f..891ac09 100644 --- a/lib/instance/templates/index.html +++ b/lib/instance/templates/index.html @@ -18,7 +18,7 @@ {{ pwa_app_name }} - + div{min-width:0;flex:1} .or-step{ flex-shrink:0;width:1.55rem;height:1.55rem;border-radius:999px; display:inline-flex;align-items:center;justify-content:center; font-size:.72rem;font-weight:700; - background:rgba(99,102,241,.28);color:#c7c9ff; - border:1px solid rgba(129,140,248,.45); + background:var(--or-accent-bg, rgba(99,102,241,.28)); + color:var(--or-accent-fg, #c7c9ff); + border:1px solid var(--or-accent-border, rgba(129,140,248,.45)); } - .or-section-title{font-size:.95rem;font-weight:650;line-height:1.3} - .or-section-desc{margin:4px 0 0;font-size:.72rem;opacity:.72;line-height:1.45} + .or-section-title{font-size:.95rem;font-weight:650;line-height:1.3;color:var(--or-title, inherit)} + .or-section-desc{margin:4px 0 0;font-size:.72rem;opacity:.72;line-height:1.45;color:var(--or-muted, inherit)} .or-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px} .or-toolbar{display:flex;flex-direction:column;gap:0;margin:0} .or-tab{ - border:1px solid rgba(127,127,127,.35);background:transparent;color:inherit; + border:1px solid var(--or-border, rgba(127,127,127,.35));background:transparent;color:inherit; padding:6px 12px;border-radius:8px;cursor:pointer;font-size:.78rem; } .or-tab.active{ - background:rgba(99,102,241,.28);border-color:rgba(129,140,248,.55); - color:#e8e9ff;font-weight:600; + background:var(--or-accent-bg, rgba(99,102,241,.28)); + border-color:var(--or-accent-border, rgba(129,140,248,.55)); + color:var(--or-accent-fg, #e8e9ff);font-weight:600; } .or-filters{ display:flex;flex-wrap:wrap;gap:8px;align-items:center; margin:0;padding:10px 12px;border-radius:10px; - background:rgba(0,0,0,.22);border:1px solid rgba(127,127,127,.18); + background:var(--or-filters-bg, rgba(0,0,0,.22)); + border:1px solid var(--or-border-soft, rgba(127,127,127,.18)); } .or-filters select,.or-filters input[type="search"],.or-filters input[type="datetime-local"]{ font-size:.76rem;min-height:2rem; @@ -56,18 +60,19 @@ .or-filters label{display:flex;align-items:center;gap:5px;font-size:.72rem;opacity:.85} .or-badge{ display:inline-block;padding:1px 7px;border-radius:999px; - background:rgba(127,127,127,.22);font-size:.7rem;vertical-align:middle; + background:var(--or-badge-bg, rgba(127,127,127,.22));font-size:.7rem;vertical-align:middle; } .or-list-title{display:none} .or-trades-table,.or-reviewed-table{font-size:.78rem} .or-trades-table tr.or-row-active{ - outline:1px solid rgba(129,140,248,.55);background:rgba(99,102,241,.1); + outline:1px solid var(--or-accent-border, rgba(129,140,248,.55)); + background:var(--or-row-active-bg, rgba(99,102,241,.1)); } .or-reviewed-table tbody tr{cursor:pointer} - .or-reviewed-table tbody tr:hover{background:rgba(99,102,241,.08)} + .or-reviewed-table tbody tr:hover{background:var(--or-row-hover-bg, rgba(99,102,241,.08))} .or-pager{ display:flex;align-items:center;gap:8px;margin-top:10px; - padding-top:8px;border-top:1px dashed rgba(127,127,127,.2);font-size:.74rem; + padding-top:8px;border-top:1px dashed var(--or-border-soft, rgba(127,127,127,.2));font-size:.74rem; } .or-list-loading{opacity:.55;pointer-events:none;transition:opacity .12s ease} .or-trades-table-wrap,.or-reviewed-table-wrap{min-height:9.5rem;overflow-x:auto} @@ -77,8 +82,8 @@ gap:8px;margin-bottom:12px; } .or-kpi-tile{ - border:1px solid rgba(127,127,127,.22);border-radius:10px; - padding:10px 12px;background:rgba(0,0,0,.2);min-width:0; + border:1px solid var(--or-border-soft, rgba(127,127,127,.22));border-radius:10px; + padding:10px 12px;background:var(--or-tile-bg, rgba(0,0,0,.2));min-width:0; } .or-kpi-label{font-size:.7rem;opacity:.7;margin-bottom:4px} .or-kpi-value{font-size:.95rem;font-weight:650;letter-spacing:.01em;word-break:break-all} @@ -86,16 +91,16 @@ display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px; } .or-stat-card{ - border:1px solid rgba(127,127,127,.22);border-radius:10px; - padding:10px 12px;background:rgba(0,0,0,.16);font-size:.76rem; + border:1px solid var(--or-border-soft, rgba(127,127,127,.22));border-radius:10px; + padding:10px 12px;background:var(--or-tile-bg, rgba(0,0,0,.16));font-size:.76rem; } .or-stat-card-title{ font-weight:650;margin-bottom:8px;font-size:.78rem; - padding-bottom:6px;border-bottom:1px solid rgba(127,127,127,.18); + padding-bottom:6px;border-bottom:1px solid var(--or-border-soft, rgba(127,127,127,.18)); } .or-stat-row{ display:flex;justify-content:space-between;align-items:baseline;gap:10px; - padding:5px 0;border-bottom:1px solid rgba(127,127,127,.1); + padding:5px 0;border-bottom:1px solid var(--or-border-faint, rgba(127,127,127,.1)); } .or-stat-row:last-child{border-bottom:none;padding-bottom:0} .or-stat-key{opacity:.9;min-width:0;overflow:hidden;text-overflow:ellipsis} @@ -116,7 +121,7 @@ .or-detail-backdrop{ position:fixed;inset:0;z-index:1300; display:flex;align-items:center;justify-content:center; - padding:16px;background:rgba(0,0,0,.72); + padding:16px;background:var(--or-backdrop, rgba(0,0,0,.72)); } .or-detail-backdrop[hidden]{display:none!important} .or-img-lightbox{ @@ -132,26 +137,26 @@ } .or-detail-modal{ width:min(96vw,920px);max-height:90vh;overflow:auto; - background:var(--card-bg,#121726);color:inherit; - border:1px solid rgba(127,127,127,.35);border-radius:10px; - padding:14px 16px 18px;box-shadow:0 12px 40px rgba(0,0,0,.45); + background:var(--or-modal-bg, var(--card-bg, #121726));color:var(--or-text, inherit); + border:1px solid var(--or-border, rgba(127,127,127,.35));border-radius:10px; + padding:14px 16px 18px;box-shadow:var(--or-modal-shadow, 0 12px 40px rgba(0,0,0,.45)); } .or-detail-modal-head{display:flex;align-items:center;gap:8px;margin-bottom:10px} - .or-detail-modal-head h3{margin:0;margin-right:auto;font-size:.95rem} + .or-detail-modal-head h3{margin:0;margin-right:auto;font-size:.95rem;color:var(--or-title, inherit)} .or-detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px 12px;font-size:.76rem;margin-bottom:8px} .or-detail-images{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;margin:10px 0 4px; } .or-detail-img-cell{ - min-width:0;border:1px solid rgba(127,127,127,.25);border-radius:8px; + min-width:0;border:1px solid var(--or-border-soft, rgba(127,127,127,.25));border-radius:8px; padding:8px;display:flex;flex-direction:column;gap:6px; - background:rgba(0,0,0,.18); + background:var(--or-tile-bg, rgba(0,0,0,.18)); } .or-detail-img-label{font-size:.72rem;opacity:.85;font-weight:600} .or-detail-img-thumb{ width:100%;max-height:280px;object-fit:contain; - border-radius:6px;cursor:zoom-in;background:rgba(0,0,0,.25); + border-radius:6px;cursor:zoom-in;background:var(--or-img-bg, rgba(0,0,0,.25)); } .or-detail-img-miss{ min-height:120px;display:flex;align-items:center;justify-content:center; @@ -159,8 +164,8 @@ } .or-slot-thumb{ display:block;margin-top:6px;max-width:160px;max-height:90px; - object-fit:contain;border-radius:4px;border:1px solid rgba(127,127,127,.3); - background:rgba(0,0,0,.2);cursor:zoom-in; + object-fit:contain;border-radius:4px;border:1px solid var(--or-border, rgba(127,127,127,.3)); + background:var(--or-img-bg, rgba(0,0,0,.2));cursor:zoom-in; } @media (max-width:900px){ .or-kpi-row{grid-template-columns:repeat(3,minmax(0,1fr))} @@ -403,4 +408,4 @@ - +