diff --git a/static/css/records.css b/static/css/records.css index 65f3dc5..65e3cc2 100644 --- a/static/css/records.css +++ b/static/css/records.css @@ -140,66 +140,139 @@ border-color: rgba(239, 68, 68, .35); } -/* 平板横屏:每条记录单行展示,右侧保留「详情」 */ -html:is([data-layout="tablet"], .layout-tablet) .records-mobile-item { +/* 交易记录简洁行(对齐数据看板平仓记录) */ +.records-trade-row { + border: 1px solid var(--card-border); + border-radius: 12px; + background: var(--card-inner); + padding: .75rem .85rem; + margin-bottom: .55rem; + color: inherit; + transition: border-color .2s, box-shadow .2s; +} + +.records-trade-main { + min-width: 0; +} + +.records-trade-head { + margin-bottom: .3rem; +} + +.records-trade-title { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: .3rem .4rem; + min-width: 0; +} + +.records-trade-code { + font-size: .84rem; +} + +.records-verified-badge { + font-size: .62rem; +} + +.records-trade-summary { + font-size: .78rem; + color: var(--text-muted); + line-height: 1.45; +} + +.records-trade-actions { + display: none; + align-items: center; + gap: .3rem; + flex-shrink: 0; + flex-wrap: nowrap; +} + +.records-trade-verify-form { + display: inline-flex; + margin: 0; +} + +.records-trade-actions .btn-link, +.records-trade-actions a, +.records-trade-actions button { + font-size: .72rem; + padding: .3rem .5rem; + border-radius: 6px; + text-decoration: none; + border: none; + cursor: pointer; + white-space: nowrap; + flex-shrink: 0; +} + +.records-trade-actions .btn-link { + background: transparent; + color: var(--accent); +} + +.records-trade-phone-foot { + display: flex; + justify-content: flex-end; + margin-top: .35rem; +} + +html:is([data-mobile="1"], .layout-phone) .records-trade-row, +html:is([data-layout="phone"], .layout-phone) .records-trade-row { + cursor: pointer; +} + +html:is([data-mobile="1"], .layout-phone) .records-trade-row:hover, +html:is([data-layout="phone"], .layout-phone) .records-trade-row:hover { + border-color: var(--accent); + box-shadow: 0 0 0 1px rgba(56, 189, 248, .2); +} + +/* 平板横屏:单行 + 右侧操作 */ +html:is([data-layout="tablet"], .layout-tablet) .records-trade-row { display: flex; flex-direction: row; align-items: center; gap: .5rem .65rem; - padding: .5rem .75rem; + padding: .5rem .65rem; overflow: hidden; } -html:is([data-layout="tablet"], .layout-tablet) .records-mobile-item-head, -html:is([data-layout="tablet"], .layout-tablet) .records-mobile-item-meta, -html:is([data-layout="tablet"], .layout-tablet) .records-mobile-item-foot { - display: inline-flex; +html:is([data-layout="tablet"], .layout-tablet) .records-trade-main { + flex: 1 1 auto; + min-width: 0; + display: flex; + flex-direction: row; align-items: center; - margin-bottom: 0; - gap: .35rem; + gap: .55rem .75rem; } -html:is([data-layout="tablet"], .layout-tablet) .records-mobile-item-head { +html:is([data-layout="tablet"], .layout-tablet) .records-trade-head { + margin-bottom: 0; flex: 0 1 auto; min-width: 0; - justify-content: flex-start; } html:is([data-layout="tablet"], .layout-tablet) .records-mobile-symbol { font-size: .84rem; - max-width: 7.5rem; + max-width: 6.5rem; } -html:is([data-layout="tablet"], .layout-tablet) .records-mobile-item-meta { +html:is([data-layout="tablet"], .layout-tablet) .records-trade-summary { flex: 1 1 auto; min-width: 0; - flex-wrap: nowrap; + white-space: nowrap; overflow: hidden; - font-size: .7rem; - white-space: nowrap; + text-overflow: ellipsis; + font-size: .76rem; } -html:is([data-layout="tablet"], .layout-tablet) .records-mobile-item-meta .badge { - flex-shrink: 0; +html:is([data-layout="tablet"], .layout-tablet) .records-trade-actions { + display: flex; } -html:is([data-layout="tablet"], .layout-tablet) .records-mobile-item-foot { - flex: 0 0 auto; - margin-left: auto; - justify-content: flex-end; - gap: .45rem; -} - -html:is([data-layout="tablet"], .layout-tablet) .records-mobile-pnl { - font-size: .82rem; - white-space: nowrap; -} - -html:is([data-layout="tablet"], .layout-tablet) .records-mobile-chevron { - flex-shrink: 0; -} - -html:is([data-layout="tablet"], .layout-tablet) .records-mobile-pnl-lbl { +html:is([data-layout="tablet"], .layout-tablet) .records-trade-phone-foot { display: none; } diff --git a/static/js/records.js b/static/js/records.js index fdacc11..c9d3ce1 100644 --- a/static/js/records.js +++ b/static/js/records.js @@ -12,10 +12,9 @@ return String(v).replace('T', ' ').slice(0, 16); } - function pnlClass(v) { - var n = parseFloat(v); - if (isNaN(n) || n === 0) return 'is-flat'; - return n > 0 ? 'is-profit' : 'is-loss'; + function isTabletLayout() { + var root = document.documentElement; + return root.dataset.layout === 'tablet' || root.classList.contains('layout-tablet'); } function showTradeModal(data) { @@ -29,6 +28,7 @@ { label: '类型', value: esc(data.monitor_type) + ' · ' + esc(data.source), wide: false }, { label: '方向', value: esc(data.direction), wide: false }, { label: '成交价', value: esc(data.entry_price), wide: false }, + { label: '平仓价', value: esc(data.close_price), wide: false }, { label: '手数', value: esc(data.lots), wide: false }, { label: '止损', value: esc(data.stop_loss), wide: false }, { label: '止盈', value: esc(data.take_profit), wide: false }, @@ -53,7 +53,7 @@ html += '