From 9a3d5ee0a8bc31fdd5f73b4972e8d068f5ec12f3 Mon Sep 17 00:00:00 2001 From: MS-01-Codex <3647348c-0c07-48e0-8938-fb9280321c5f@agents.multica.local> Date: Thu, 20 Aug 2026 04:34:36 +0800 Subject: [PATCH] feat: apply B-147 visual tokens to remaining market data pages Unify ladder, themes, rotation, auction, dragon-tiger and popularity with shared tokens, left-aligned first columns, and table density. Co-authored-by: Cursor Co-authored-by: multica-agent --- config/architecture-inventory.json | 18 ++-- frontend/index.html | 12 +-- frontend/pages.config.js | 16 +-- frontend/pages/auction/foundation.css | 83 +++++++++------- frontend/pages/dragon-tiger/foundation.css | 52 ++++++---- frontend/pages/dragon-tiger/page.js | 4 +- frontend/pages/ladder/foundation.css | 44 +++++---- frontend/pages/ladder/page.js | 2 +- frontend/pages/popularity/foundation.css | 83 +++++++++------- frontend/pages/popularity/page.js | 4 +- frontend/pages/rotation/foundation.css | 109 ++++++++++++--------- frontend/pages/rotation/page.html | 2 +- frontend/pages/rotation/page.js | 2 +- frontend/pages/themes/foundation.css | 59 ++++++----- frontend/pages/themes/page.html | 2 +- frontend/pages/themes/page.js | 2 +- 16 files changed, 279 insertions(+), 215 deletions(-) diff --git a/config/architecture-inventory.json b/config/architecture-inventory.json index 07a9553..13c30d1 100644 --- a/config/architecture-inventory.json +++ b/config/architecture-inventory.json @@ -383,12 +383,12 @@ "/pages/market/foundation.css?v=20260806-1", "/pages/sentiment/foundation.css?v=20260820-2", "/pages/pools/foundation.css?v=20260820-1", - "/pages/ladder/foundation.css?v=20260806-1", - "/pages/rotation/foundation.css?v=20260806-1", - "/pages/auction/foundation.css?v=20260806-2", - "/pages/themes/foundation.css?v=20260806-1", - "/pages/popularity/foundation.css?v=20260806-1", - "/pages/dragon-tiger/foundation.css?v=20260806-1", + "/pages/ladder/foundation.css?v=20260820-1", + "/pages/rotation/foundation.css?v=20260820-1", + "/pages/auction/foundation.css?v=20260820-1", + "/pages/themes/foundation.css?v=20260820-1", + "/pages/popularity/foundation.css?v=20260820-1", + "/pages/dragon-tiger/foundation.css?v=20260820-1", "/pages/screener/foundation.css?v=20260806-2", "/pages/mentor/foundation.css?v=20260820-2", "/pages/heaven/foundation.css?v=20260806-2", @@ -471,8 +471,8 @@ }, { "path": "frontend/pages/auction/foundation.css", - "bytes": 34990, - "lines": 2409 + "bytes": 35329, + "lines": 2420 }, { "path": "database.py", @@ -736,7 +736,7 @@ }, { "path": "frontend/pages/themes/page.html", - "bytes": 3309, + "bytes": 3316, "lines": 55 }, { diff --git a/frontend/index.html b/frontend/index.html index 9811095..3b2b1a9 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -30,12 +30,12 @@ - - - - - - + + + + + + diff --git a/frontend/pages.config.js b/frontend/pages.config.js index 010abf1..1f14cab 100644 --- a/frontend/pages.config.js +++ b/frontend/pages.config.js @@ -45,12 +45,12 @@ ["pools", "/pages/pools/page.html?v=20260820-1", ["limitPool", "brokenView", "downView", "yesterdayView", "performanceView"]], ["sentiment", "/pages/sentiment/page.html?v=20260803-1", ["sentimentCycleView"]], ["heaven", "/pages/heaven/page.html?v=20260803-1", ["heavenView"]], - ["ladder", "/pages/ladder/page.html?v=20260803-1", ["ladderView"]], + ["ladder", "/pages/ladder/page.html?v=20260820-1", ["ladderView"]], ["screener", "/pages/screener/page.html?v=20260804-1", ["screenerView", "screenerTrackingView"]], ["mentor", "/pages/mentor/page.html?v=20260820-1", ["mentorView"]], - ["rotation", "/pages/rotation/page.html?v=20260803-1", ["rotationView"]], + ["rotation", "/pages/rotation/page.html?v=20260820-1", ["rotationView"]], ["auction", "/pages/auction/page.html?v=20260803-1", ["auctionView"]], - ["themes", "/pages/themes/page.html?v=20260803-1", ["themeLibraryView"]], + ["themes", "/pages/themes/page.html?v=20260820-1", ["themeLibraryView"]], ["popularity", "/pages/popularity/page.html?v=20260803-1", ["popularityView"]], ["dragon_tiger", "/pages/dragon-tiger/page.html?v=20260803-1", ["dragonView"]], ["review", "/pages/review/page.html?v=20260803-1", ["reviewWorkspaceView"]], @@ -74,12 +74,12 @@ "/pages/market/preview.js?v=20260806-1", "/pages/market/search.js?v=20260803-1", "/pages/market/bindings.js?v=20260803-1", - "/pages/ladder/page.js?v=20260729-1", - "/pages/rotation/page.js?v=20260729-1", + "/pages/ladder/page.js?v=20260820-1", + "/pages/rotation/page.js?v=20260820-1", "/pages/auction/page.js?v=20260729-1", - "/pages/themes/page.js?v=20260729-1", - "/pages/popularity/page.js?v=20260729-1", - "/pages/dragon-tiger/page.js?v=20260806-1", + "/pages/themes/page.js?v=20260820-1", + "/pages/popularity/page.js?v=20260820-1", + "/pages/dragon-tiger/page.js?v=20260820-1", "/pages/screener/page.js?v=20260806-1", "/pages/mentor/page.js?v=20260820-1", "/pages/heaven/page.js?v=20260729-1", diff --git a/frontend/pages/auction/foundation.css b/frontend/pages/auction/foundation.css index 521a05d..be12e23 100644 --- a/frontend/pages/auction/foundation.css +++ b/frontend/pages/auction/foundation.css @@ -1,8 +1,8 @@ /* Canonical CSS owner: auction. Historical layers consolidated 2026-08-02. */ #auctionView .section-toolbar h2 { - font-size: 17px; + font-size: var(--font-size-page-title); - font-weight: 800; + font-weight: var(--font-weight-semibold); } @media (max-width: 767px) { @@ -354,9 +354,9 @@ } .auction-phase-notice[data-phase="archive"] { - background: rgb(238, 242, 246); + background: var(--surface-muted); - color: rgb(89, 101, 116); + color: var(--text-2); } .auction-phase-marker { @@ -374,7 +374,7 @@ .auction-table { min-width: 860px; - font-size: 12.5px; + font-size: var(--font-size-table); } .auction-table tbody tr:hover td { @@ -462,7 +462,7 @@ transition: opacity var(--motion-fast) ease; - background: rgb(201, 214, 238); + background: var(--accent-soft); } .auction-amount-average { @@ -522,7 +522,7 @@ } .auction-table td { - height: 44px; + height: 40px; padding-right: 12px; @@ -530,7 +530,7 @@ border-right: 0px; - border-bottom-color: rgb(232, 237, 241); + border-bottom-color: var(--border); } .auction-table th { @@ -540,13 +540,13 @@ border-right: 0px; - height: 38px; + height: 36px; - color: rgb(107, 114, 128); + color: var(--text-2); - font-size: 12px; + font-size: var(--font-size-caption); - border-bottom-color: rgb(232, 237, 241); + border-bottom-color: var(--border); background: var(--table-header); } @@ -694,9 +694,9 @@ color: var(--r2-ink); - font-size: 17px; + font-size: var(--font-size-page-title); - font-weight: 800; + font-weight: var(--font-weight-semibold); letter-spacing: 0px; } @@ -812,13 +812,13 @@ 100% { opacity: 0.42; - box-shadow: rgba(37, 99, 235, 0.18) 0px 0px 0px 0px; + box-shadow: 0 0 0 0 var(--focus-ring); } 50% { opacity: 1; - box-shadow: rgba(37, 99, 235, 0) 0px 0px 0px 4px; + box-shadow: 0 0 0 4px transparent; } } @@ -896,7 +896,9 @@ .auction-export-button, .auction-refresh-button { - min-height: 30px; + min-height: 32px; + + height: 32px; display: inline-flex; @@ -906,17 +908,17 @@ gap: 5px; - padding: 5px 11px; + padding: 0 12px; - border: 1px solid var(--r2-line); + border: 1px solid var(--border-strong); - border-radius: 7px; + border-radius: 8px; background: var(--surface); color: var(--text-primary); - font-size: 12px; + font-size: var(--font-size-label); font-weight: 500; @@ -1144,7 +1146,7 @@ .auction-search-v2 { min-width: 0px; - height: 31px; + height: 32px; display: flex; @@ -1154,9 +1156,9 @@ padding: 0px 9px; - border: 1px solid var(--r2-line); + border: 1px solid var(--border-strong); - border-radius: 7px; + border-radius: 8px; background: var(--surface); } @@ -1193,7 +1195,7 @@ .auction-filter-segments button:focus-visible, .auction-refresh-button:focus-visible, .auction-tabs-v2 button:focus-visible { - outline: rgba(37, 99, 235, 0.28) solid 2px; + outline: 2px solid var(--accent); outline-offset: 2px; } @@ -1219,7 +1221,7 @@ border-collapse: collapse; - font-size: 12.5px; + font-size: var(--font-size-table); } .auction-table-v2 thead th { @@ -1229,12 +1231,16 @@ z-index: 2; - height: 35px; + height: 36px; + + padding: 0 12px; background: var(--table-header); color: var(--r2-sub); + font-size: var(--font-size-caption); + font-weight: 600; text-align: left; @@ -1242,6 +1248,11 @@ white-space: nowrap; } +.auction-table-v2 thead th:first-child, +.auction-table-v2 tbody td:first-child { + text-align: left; +} + .auction-table-v2 thead th.number { text-align: right; } @@ -1269,7 +1280,9 @@ } .auction-table-v2 tbody td { - height: 47px; + height: 40px; + + padding: 0 12px; border-bottom: 1px solid var(--r2-line-soft); @@ -1819,7 +1832,7 @@ border-radius: 3px 3px 0px 0px; - background: rgb(201, 214, 238); + background: var(--accent-soft); transition: opacity 180ms, transform 180ms; @@ -1915,7 +1928,7 @@ border-radius: 2px; - background: rgb(201, 214, 238); + background: var(--accent-soft); } .auction-volume-legend i.current { @@ -2138,11 +2151,9 @@ } .auction-table-v2 tbody td { - height: 43px; + height: 40px; - padding-top: 6px; - - padding-bottom: 6px; + padding: 0 12px; } } @@ -2165,9 +2176,9 @@ } .auc-head h2 { - font-size: 17px; + font-size: var(--font-size-page-title); - font-weight: 800; + font-weight: var(--font-weight-semibold); } .auc-grid { diff --git a/frontend/pages/dragon-tiger/foundation.css b/frontend/pages/dragon-tiger/foundation.css index 6f2aeae..f68b6cd 100644 --- a/frontend/pages/dragon-tiger/foundation.css +++ b/frontend/pages/dragon-tiger/foundation.css @@ -82,7 +82,7 @@ } .dragon-operation-table th { - background: rgb(232, 240, 244); + background: var(--table-header); } .seat-cell { @@ -952,6 +952,10 @@ margin: 0px; color: var(--r2-ink); + + font-size: var(--font-size-page-title); + + font-weight: var(--font-weight-semibold); } .dragon-title-v2 > span { @@ -991,7 +995,7 @@ align-items: center; - min-height: 34px; + min-height: 32px; padding: 3px; @@ -1003,19 +1007,19 @@ } .dragon-view-tabs-v2 button { - min-height: 27px; + min-height: 26px; padding: 0px 13px; border: 0px; - border-radius: 5px; + border-radius: 6px; background: transparent; color: var(--r2-sub); - font-size: 11px; + font-size: var(--font-size-label); cursor: pointer; } @@ -1037,11 +1041,15 @@ } .dragon-action-v2 { - min-height: 34px; + min-height: 32px; - padding: 0px 11px; + height: 32px; - border-radius: 7px; + padding: 0px 12px; + + border-radius: 8px; + + font-size: var(--font-size-label); } .dragon-action-v2 .lucide { @@ -1101,9 +1109,9 @@ } .dragon-summary-v2 .dragon-metric span { - color: var(--r2-sub); + color: var(--text-3); - font-size: 11px; + font-size: var(--font-size-caption); } .dragon-summary-v2 .dragon-metric strong { @@ -1111,9 +1119,9 @@ color: var(--r2-ink); - font-size: 18px; + font-size: var(--font-size-metric); - font-weight: 750; + font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; } @@ -1245,7 +1253,7 @@ width: 230px; - height: 33px; + height: 32px; flex: 0 0 auto; @@ -1253,9 +1261,9 @@ padding: 0px 10px; - border: 1px solid rgb(216, 221, 229); + border: 1px solid var(--border-strong); - border-radius: 7px; + border-radius: 8px; color: var(--r2-faint); @@ -1263,9 +1271,9 @@ } .dragon-search-v2:focus-within { - border-color: rgb(150, 181, 242); + border-color: var(--accent); - box-shadow: rgba(37, 99, 235, 0.09) 0px 0px 0px 3px; + box-shadow: 0 0 0 2px var(--focus-ring); } .dragon-search-v2 .lucide { @@ -1421,7 +1429,7 @@ #dragonView .dragon-operation-table :is(th, td).row-number { padding-inline: 8px; - text-align: center; + text-align: left; } #dragonView .dragon-operation-table td.stock-code { @@ -1435,6 +1443,12 @@ z-index: 2; + height: 36px; + + padding: 0 12px; + + font-size: var(--font-size-caption); + background: var(--surface-subtle); } @@ -2389,7 +2403,7 @@ table.tbl { border-collapse: collapse; - font-size: 12.5px; + font-size: var(--font-size-table); } .tbl .num { diff --git a/frontend/pages/dragon-tiger/page.js b/frontend/pages/dragon-tiger/page.js index 24ce530..9d25dbc 100644 --- a/frontend/pages/dragon-tiger/page.js +++ b/frontend/pages/dragon-tiger/page.js @@ -299,10 +299,10 @@ function renderDragonTraderDetail(trader) {
- + ${(trader.operations || []).map((operation, index) => ` - + diff --git a/frontend/pages/ladder/foundation.css b/frontend/pages/ladder/foundation.css index 4a5b884..1380596 100644 --- a/frontend/pages/ladder/foundation.css +++ b/frontend/pages/ladder/foundation.css @@ -14,7 +14,7 @@ padding: 9px 4px; - border-bottom: 1px solid rgb(232, 236, 239); + border-bottom: 1px solid var(--border); cursor: pointer; } @@ -128,7 +128,7 @@ gap: 5px; - background: rgb(247, 249, 250); + background: var(--surface-muted); cursor: pointer; @@ -140,11 +140,11 @@ border: 1px dashed var(--border-strong); - border-radius: 6px; + border-radius: 8px; color: var(--text-secondary); - font-size: 11px; + font-size: var(--font-size-caption); white-space: nowrap; } @@ -152,7 +152,7 @@ .ladder-gap { min-height: 68px; - background: repeating-linear-gradient(135deg, rgb(255, 255, 255), rgb(255, 255, 255) 9px, rgb(250, 251, 252) 9px, rgb(250, 251, 252) 18px); + background: repeating-linear-gradient(135deg, var(--surface), var(--surface) 9px, var(--surface-subtle) 9px, var(--surface-subtle) 18px); } .ladder-gap-note { @@ -353,6 +353,12 @@ box-shadow: none; } +.ladder-page-head .section-title-group h2 { + font-size: var(--font-size-page-title); + + font-weight: var(--font-weight-semibold); +} + .ladder-page-head { margin-bottom: 12px; } @@ -384,13 +390,15 @@ } .ladder-sort-segment button { + min-height: 28px; + padding: 4px 12px; border-radius: 6px; color: var(--r2-sub); - font-size: 12px; + font-size: var(--font-size-label); } .ladder-sort-segment button.active { @@ -448,11 +456,11 @@ border-right: 1px solid var(--r2-line-soft); - background: linear-gradient(90deg, color-mix(in srgb, var(--tier-color) 8%, #fff), #fff); + background: linear-gradient(90deg, color-mix(in srgb, var(--tier-color) 8%, var(--surface)), var(--surface)); } .market-ladder-tier.is-gap .market-ladder-label { - background: repeating-linear-gradient(45deg, rgb(250, 250, 250), rgb(250, 250, 250) 8px, rgb(243, 244, 246) 8px, rgb(243, 244, 246) 16px); + background: repeating-linear-gradient(45deg, var(--surface-subtle), var(--surface-subtle) 8px, var(--surface-muted) 8px, var(--surface-muted) 16px); } .market-ladder-level { @@ -571,9 +579,9 @@ white-space: nowrap; - font-size: 13px; + font-size: var(--font-size-table); - font-weight: 800; + font-weight: var(--font-weight-semibold); } .market-ladder-stock-first .stock-code { @@ -613,7 +621,7 @@ .market-ladder-tag.one-price { background: var(--r2-up-soft); - color: rgb(194, 46, 46); + color: var(--r2-up); font-weight: 700; } @@ -762,9 +770,9 @@ .market-ladder-insight-card > header h3 { margin: 0px; - font-size: 13.5px; + font-size: var(--font-size-card-title); - font-weight: 700; + font-weight: var(--font-weight-semibold); } .market-ladder-insight-card > header span { @@ -796,9 +804,9 @@ .market-ladder-apex strong { color: var(--r2-up); - font-size: 26px; + font-size: var(--font-size-metric); - font-weight: 800; + font-weight: var(--font-weight-semibold); } .market-ladder-apex em { @@ -900,7 +908,7 @@ } .market-ladder-pyramid-row.is-gap > i { - background: repeating-linear-gradient(45deg, rgb(229, 231, 235), rgb(229, 231, 235) 4px, rgb(243, 244, 246) 4px, rgb(243, 244, 246) 8px); + background: repeating-linear-gradient(45deg, var(--border), var(--border) 4px, var(--surface-muted) 4px, var(--surface-muted) 8px); } .market-ladder-pyramid-row.is-gap > i b { @@ -968,11 +976,11 @@ } .market-ladder-rate-list > div > i b.is-low { - background: rgb(245, 158, 11); + background: var(--r2-amber); } .market-ladder-rate-list > div > i b.is-zero { - background: rgb(209, 213, 219); + background: var(--border-strong); } .market-ladder-rate-list > div > strong { diff --git a/frontend/pages/ladder/page.js b/frontend/pages/ladder/page.js index 3902428..7a037b8 100644 --- a/frontend/pages/ladder/page.js +++ b/frontend/pages/ladder/page.js @@ -51,7 +51,7 @@ function renderLadderBoard(ladders) { const stocks = expanded ? groupStocks : groupStocks.slice(0, limit); const remaining = Math.max(0, groupStocks.length - stocks.length); const label = group.label || (level === 1 ? "首板" : level === 5 && maxLevel < 5 ? "5板+" : `${level}板`); - const color = { 1: "#2563eb", 2: "#16a34a", 3: "#d97706", 4: "#e04536" }[level] || "#9ca3af"; + const color = { 1: "#3370ff", 2: "#16a34a", 3: "#b45309", 4: "#e04536" }[level] || "#8f959e"; return `
${escapeHtml(label)}
${number(group.count)} 只
${number(group.count) && level > 1 ? `
${escapeHtml(label)} · ${formatNumber(number(group.count) / Math.max(number(groupMap.get(level - 1)?.count), 1) * 100, 1)}%
` : ""}
diff --git a/frontend/pages/popularity/foundation.css b/frontend/pages/popularity/foundation.css index f10cb06..343a218 100644 --- a/frontend/pages/popularity/foundation.css +++ b/frontend/pages/popularity/foundation.css @@ -22,11 +22,11 @@ } .popularity-source-tag.dual { - border-color: rgb(230, 199, 115); + border-color: var(--warn); background: var(--amber-soft); - color: rgb(118, 83, 20); + color: var(--warn); } .popularity-concepts { @@ -44,21 +44,21 @@ } #popularityView .data-table { - font-size: 12px; + font-size: var(--font-size-table); } #popularityView .data-table thead th { - height: 32px; + height: 36px; - padding: 6px 9px; + padding: 0 12px; - font-size: 11.5px; + font-size: var(--font-size-caption); } #popularityView .data-table tbody td { - height: 39px; + height: 40px; - padding: 5px 9px; + padding: 0 12px; } .redesigned-popularity-view { @@ -93,6 +93,10 @@ margin: 0px; color: var(--r2-ink); + + font-size: var(--font-size-page-title); + + font-weight: var(--font-weight-semibold); } .popularity-title-v2 > span { @@ -140,7 +144,7 @@ align-items: center; - min-height: 34px; + min-height: 32px; padding: 3px; @@ -152,19 +156,19 @@ } .popularity-source-tabs-v2 button { - min-height: 27px; + min-height: 26px; padding: 0px 13px; border: 0px; - border-radius: 5px; + border-radius: 6px; background: transparent; color: var(--r2-sub); - font-size: 11px; + font-size: var(--font-size-label); cursor: pointer; } @@ -190,11 +194,15 @@ } .popularity-refresh-v2 { - min-height: 34px; + min-height: 32px; - padding: 0px 11px; + height: 32px; - border-radius: 7px; + padding: 0px 12px; + + border-radius: 8px; + + font-size: var(--font-size-label); } .popularity-refresh-v2 .lucide { @@ -244,15 +252,15 @@ width: 3px; - background: rgb(199, 216, 251); + background: var(--accent-soft); } .popularity-glance-v2 article:nth-child(2)::before { - background: rgb(183, 221, 207); + background: var(--down-soft); } .popularity-glance-v2 article.consensus::before { - background: rgb(230, 199, 115); + background: var(--warn); } .popularity-glance-v2 article > span { @@ -372,7 +380,7 @@ width: 230px; - height: 33px; + height: 32px; flex: 0 0 auto; @@ -380,9 +388,9 @@ padding: 0px 10px; - border: 1px solid rgb(216, 221, 229); + border: 1px solid var(--border-strong); - border-radius: 7px; + border-radius: 8px; color: var(--r2-faint); @@ -390,9 +398,9 @@ } .popularity-search-v2:focus-within { - border-color: rgb(150, 181, 242); + border-color: var(--accent); - box-shadow: rgba(37, 99, 235, 0.09) 0px 0px 0px 3px; + box-shadow: 0 0 0 2px var(--focus-ring); } .popularity-search-v2 .lucide { @@ -446,15 +454,15 @@ z-index: 2; - height: 35px; + height: 36px; - padding: 7px 10px; + padding: 0 12px; border-bottom-color: var(--r2-line); color: var(--r2-sub); - font-size: 10.5px; + font-size: var(--font-size-caption); } .popularity-table-v2 thead th:nth-child(1) { @@ -477,11 +485,11 @@ } .popularity-table-v2 tbody td { - height: 43px; + height: 40px; - padding: 7px 10px; + padding: 0 12px; - font-size: 11.5px; + font-size: var(--font-size-table); } .popularity-table-v2 tbody tr { @@ -541,9 +549,9 @@ color: var(--r2-ink); - font-size: 12px; + font-size: var(--font-size-table); - font-weight: 700; + font-weight: var(--font-weight-semibold); text-overflow: ellipsis; @@ -559,7 +567,7 @@ } .popularity-list-rank-v2 { - color: rgb(64, 85, 115); + color: var(--text-2); } .popularity-movement-v2 { @@ -658,11 +666,9 @@ } .popularity-table-v2 tbody td { - height: 39px; + height: 40px; - padding-top: 5px; - - padding-bottom: 5px; + padding: 0 12px; } } @@ -857,8 +863,11 @@ width: auto; } -#popularityView .popularity-table-v2 th:first-child { +#popularityView .popularity-table-v2 th:first-child, +#popularityView .popularity-table-v2 td:first-child { width: var(--col-rank); + + text-align: left; } #popularityView .popularity-table-v2 th:nth-child(2) { diff --git a/frontend/pages/popularity/page.js b/frontend/pages/popularity/page.js index c9971ee..a0526a4 100644 --- a/frontend/pages/popularity/page.js +++ b/frontend/pages/popularity/page.js @@ -50,7 +50,7 @@ function renderPopularityTable() { setText("popularityTableTitle", `${sourceName}榜`); setText("popularityTableNote", combined ? "按双榜排名综合排序 · 已隐藏重复的榜单状态" : "按榜单名次排序 · 状态显示是否同时进入另一榜"); const headers = [ - ["排名", "number num"], ["股票", ""], ["最新价（元）", "number num"], ["涨跌幅（%）", "number num"], + ["排名", "row-number"], ["股票", ""], ["最新价（元）", "number num"], ["涨跌幅（%）", "number num"], ...(source !== "dc" ? [["同花顺", "number num"]] : []), ...(source !== "ths" ? [["东方财富", "number num"]] : []), ["排名变化", "number num"], ["热门概念", ""], ...(!combined ? [["榜单状态", ""]] : []), @@ -63,7 +63,7 @@ function renderPopularityTable() { const move = row.rank_change; const movement = move === null || move === undefined ? "新" : number(move) > 0 ? `↑${number(move)}` : number(move) < 0 ? `↓${Math.abs(number(move))}` : "持平"; return `
- + diff --git a/frontend/pages/rotation/foundation.css b/frontend/pages/rotation/foundation.css index 1b6604f..3dac085 100644 --- a/frontend/pages/rotation/foundation.css +++ b/frontend/pages/rotation/foundation.css @@ -25,7 +25,7 @@ } .rotation-day.selected-day { - background: rgb(240, 246, 253); + background: var(--selected); } .rotation-sector-chip.selected { @@ -81,11 +81,11 @@ } .rotation-day:nth-child(2n+1) { - background: rgb(246, 248, 250); + background: var(--surface-subtle); } .rotation-day-sector { - border-color: rgb(231, 235, 239); + border-color: var(--border); border-radius: 4px; @@ -107,7 +107,7 @@ } :where(#rotationView) .rotation-swatch { - background: rgba(53, 106, 230, 0.12); + background: var(--accent-soft); } :where(#rotationView) .rotation-tracker-copy { @@ -157,9 +157,9 @@ cursor: pointer; - border-bottom: 1px dashed rgba(135, 149, 173, 0.22); + border-bottom: 1px dashed var(--border); - background: rgba(53, 106, 230, calc(.04 + var(--rotation-heat) * .46)); + background: color-mix(in srgb, var(--accent) calc(4% + var(--rotation-heat) * 46%), transparent); } .redesigned-rotation-view { @@ -185,9 +185,9 @@ color: var(--r2-ink); - font-size: 17px; + font-size: var(--font-size-page-title); - font-weight: 800; + font-weight: var(--font-weight-semibold); letter-spacing: 0px; } @@ -241,7 +241,7 @@ color: var(--r2-sub); - font-size: 12px; + font-size: var(--font-size-label); line-height: 1; } @@ -260,13 +260,15 @@ .rotation-order-control button:focus-visible, .rotation-sector-chip:focus-visible, .rotation-track-cancel:focus-visible { - outline: rgba(37, 99, 235, 0.28) solid 2px; + outline: 2px solid var(--accent); outline-offset: 2px; } .rotation-export-button { - min-height: 30px; + min-height: 32px; + + height: 32px; display: inline-flex; @@ -274,17 +276,17 @@ justify-content: center; - padding: 5px 12px; + padding: 0 12px; - border: 1px solid var(--r2-line); + border: 1px solid var(--border-strong); - border-radius: 7px; + border-radius: 8px; background: var(--surface); - color: rgb(55, 65, 81); + color: var(--text-primary); - font-size: 12px; + font-size: var(--font-size-label); font-weight: 500; } @@ -433,17 +435,17 @@ } #rotationView .rotation-swatch.strong { - background: rgb(112, 155, 245); + background: var(--accent); } #rotationView .rotation-swatch.warm { - background: rgb(203, 220, 255); + background: var(--accent-soft); } #rotationView .rotation-swatch.mild { - background: rgb(240, 244, 250); + background: var(--surface-muted); - border: 1px solid rgb(223, 230, 240); + border: 1px solid var(--border); } #rotationView .rotation-tracker { @@ -487,7 +489,7 @@ } #rotationView .rotation-tracker-copy span { - color: rgb(59, 98, 196); + color: var(--accent-hover); font-size: 12px; @@ -535,7 +537,7 @@ border-radius: 2px 2px 0px 0px; - background: rgb(147, 180, 245); + background: var(--accent); } #rotationView .rotation-tracker-spark small { @@ -543,7 +545,7 @@ top: -1px; - color: rgb(59, 98, 196); + color: var(--accent-hover); font-size: 9px; } @@ -555,7 +557,7 @@ border-style: dashed dashed none; - border-color: rgb(185, 200, 232) rgb(185, 200, 232) currentcolor; + border-color: var(--action-line) var(--action-line) currentcolor; border-image: none; @@ -567,7 +569,9 @@ } .rotation-track-cancel { - min-height: 30px; + min-height: 32px; + + height: 32px; display: inline-flex; @@ -575,21 +579,21 @@ justify-content: center; - border: 1px solid var(--r2-line); + border: 1px solid var(--border-strong); - border-radius: 7px; + border-radius: 8px; background: var(--surface); - color: rgb(55, 65, 81); + color: var(--text-primary); - font-size: 12px; + font-size: var(--font-size-label); font-weight: 500; margin-left: auto; - padding: 4px 9px; + padding: 0 12px; } #rotationView .rotation-history { @@ -697,7 +701,7 @@ padding: 5px; - background: rgb(251, 252, 254); + background: var(--surface-subtle); } #rotationView .rotation-sector-chip { @@ -817,7 +821,7 @@ border-color: var(--r2-blue); - box-shadow: inset 3px 0 0 var(--r2-blue), 0 0 0 1px rgba(37, 99, 235, .12); + box-shadow: inset 3px 0 0 var(--r2-blue), 0 0 0 1px var(--accent-soft); } .rotation-cell-tooltip { @@ -864,9 +868,9 @@ } #rotationView .rotation-table thead th { - height: 37px; + height: 36px; - padding: 8px 12px; + padding: 0 12px; border-bottom: 1px solid var(--r2-line); @@ -874,7 +878,7 @@ color: var(--r2-sub); - font-size: 12px; + font-size: var(--font-size-caption); font-weight: 600; @@ -887,8 +891,13 @@ text-align: right; } +#rotationView .rotation-table thead th:first-child, +#rotationView .rotation-table tbody td:first-child { + text-align: left; +} + #rotationView .rotation-table thead th[data-auto-sort] { - color: rgb(75, 85, 99); + color: var(--text-2); cursor: pointer; @@ -918,14 +927,16 @@ } #rotationView .rotation-table tbody td { - height: 42px; + height: 40px; - padding: 8px 12px; + padding: 0 12px; border-bottom: 1px solid var(--r2-line-soft); color: var(--r2-ink); + font-size: var(--font-size-table); + white-space: nowrap; } @@ -934,7 +945,7 @@ } #rotationView .rotation-table tbody tr:hover td { - background: rgb(248, 250, 255); + background: var(--table-hover); } #rotationView .rotation-table .stock-name { @@ -954,9 +965,9 @@ } #rotationView .trend-cool { - background: rgb(232, 244, 253); + background: var(--accent-soft); - color: rgb(37, 99, 235); + color: var(--accent); } #rotationView .trend-new { @@ -1040,25 +1051,25 @@ } #rotationView .rotation-sector-chip.heat-mild { - border-color: rgb(229, 234, 241); + border-color: var(--border); - background: rgb(246, 248, 251); + background: var(--surface-muted); box-shadow: none; } #rotationView .rotation-sector-chip.heat-strong { - border-color: rgba(37, 99, 235, 0.24); + border-color: var(--action-line); - background: rgb(197, 215, 251); + background: var(--accent-soft); box-shadow: none; } #rotationView .rotation-sector-chip.heat-warm { - border-color: rgba(37, 99, 235, 0.12); + border-color: var(--action-line); - background: rgb(231, 239, 255); + background: color-mix(in srgb, var(--accent) 12%, var(--surface)); box-shadow: none; } @@ -1066,7 +1077,7 @@ #rotationView .rotation-sector-chip:hover { z-index: 6; - border-color: rgba(37, 99, 235, 0.34); + border-color: var(--accent); filter: saturate(1.06); @@ -1080,7 +1091,7 @@ border-collapse: collapse; - font-size: 12.5px; + font-size: var(--font-size-table); table-layout: auto; diff --git a/frontend/pages/rotation/page.html b/frontend/pages/rotation/page.html index 057c8f3..90b14fa 100644 --- a/frontend/pages/rotation/page.html +++ b/frontend/pages/rotation/page.html @@ -41,7 +41,7 @@
序号股票方向涨幅（%）买入（百万）卖出（百万）净额（百万）关联席位标签 / 上榜原因
序号股票方向涨幅（%）买入（百万）卖出（百万）净额（百万）关联席位标签 / 上榜原因
${index + 1}${index + 1} ${escapeHtml(operation.name)}${escapeHtml(operation.code)} ${escapeHtml(operation.direction)} ${operation.change == null ? "" : signed(operation.change)}
${index + 1}${index < 3 ? '热' : ""}${index + 1}${index < 3 ? '热' : ""}
${escapeHtml(row.name)}${escapeHtml(row.code)}
 ${row.price == null ? "" : formatNumber(row.price, 2)} ${row.change == null ? "" : signed(row.change)}
- + diff --git a/frontend/pages/rotation/page.js b/frontend/pages/rotation/page.js index 1274118..5bd762f 100644 --- a/frontend/pages/rotation/page.js +++ b/frontend/pages/rotation/page.js @@ -161,7 +161,7 @@ function renderRotationMembers() { setText("rotationDetailTitle", `${payload.meta?.sector_name || state.rotationSelectedSector}成分股`); setText("rotationDetailMeta", `${displayCompactDate(payload.meta?.trade_date)} · ${number(payload.meta?.quoted_count)} / ${number(payload.meta?.member_count)} 只`); body.innerHTML = rows.map((row, index) => ` - + diff --git a/frontend/pages/themes/foundation.css b/frontend/pages/themes/foundation.css index 5628f5a..f8ee048 100644 --- a/frontend/pages/themes/foundation.css +++ b/frontend/pages/themes/foundation.css @@ -184,15 +184,15 @@ padding: 9px 13px; - border-bottom-color: rgb(231, 235, 239); + border-bottom-color: var(--border); } .theme-directory-item:hover { - background: rgb(241, 246, 251); + background: var(--hover); } .theme-directory-item.active { - background: rgb(234, 242, 251); + background: var(--selected); box-shadow: inset 3px 0 var(--action); } @@ -294,6 +294,10 @@ margin: 0px; color: var(--r2-ink); + + font-size: var(--font-size-page-title); + + font-weight: var(--font-weight-semibold); } .theme-title-v2 > div > span { @@ -331,7 +335,7 @@ .theme-search-v2 { width: 250px; - height: 34px; + height: 32px; display: flex; @@ -341,9 +345,9 @@ padding: 0px 10px; - border: 1px solid var(--control-border); + border: 1px solid var(--border-strong); - border-radius: 7px; + border-radius: 8px; background: var(--surface); @@ -389,11 +393,15 @@ } .theme-refresh-v2 { - min-height: 34px; + min-height: 32px; + + height: 32px; padding: 0px 12px; - border-radius: 7px; + border-radius: 8px; + + font-size: var(--font-size-label); } .theme-refresh-v2 .lucide { @@ -441,17 +449,17 @@ } .theme-summary-v2 span { - color: var(--r2-sub); + color: var(--text-3); - font-size: 11px; + font-size: var(--font-size-caption); } .theme-summary-v2 strong { color: var(--r2-ink); - font-size: 19px; + font-size: var(--font-size-metric); - font-weight: var(--font-weight-bold); + font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; } @@ -527,9 +535,9 @@ color: var(--r2-ink); - font-size: 14px; + font-size: var(--font-size-card-title); - font-weight: 700; + font-weight: var(--font-weight-semibold); } .theme-card-head-v2 span { @@ -1028,9 +1036,9 @@ z-index: 2; - height: 34px; + height: 36px; - padding: 6px 11px; + padding: 0 12px; border-bottom-color: var(--r2-line); @@ -1038,15 +1046,20 @@ color: var(--r2-sub); - font-size: 10.5px; + font-size: var(--font-size-caption); } .theme-members-table-v2 tbody td { - height: 39px; + height: 40px; - padding: 7px 11px; + padding: 0 12px; - font-size: 11.5px; + font-size: var(--font-size-table); +} + +.theme-members-table-v2 thead th:first-child, +.theme-members-table-v2 tbody td:first-child { + text-align: left; } .theme-members-table-v2 tbody tr { @@ -1184,11 +1197,9 @@ } .theme-members-table-v2 tbody td { - height: 35px; + height: 40px; - padding-top: 5px; - - padding-bottom: 5px; + padding: 0 12px; } } diff --git a/frontend/pages/themes/page.html b/frontend/pages/themes/page.html index cdd589d..3d42c21 100644 --- a/frontend/pages/themes/page.html +++ b/frontend/pages/themes/page.html @@ -46,7 +46,7 @@ 0 只
-
序号代码股票序号代码股票 涨跌幅（%） 开盘价（元）收盘价（元） 成交额（亿）行情状态
${index + 1}${escapeHtml(row.code)}${escapeHtml(row.name)}
${index + 1}${escapeHtml(row.code)}${escapeHtml(row.name)} ${row.quoted ? signed(row.change) : ""} ${row.quoted ? formatNumber(row.open, 2) : ""}${row.quoted ? formatNumber(row.close, 2) : ""} ${row.quoted ? formatNumber(row.amount_billion, 2) : ""}${row.quoted ? "正常交易" : "当日无行情"}
序号股票涨跌幅（%）↕收盘价（元）↕成交额（亿）↕
+
序号股票涨跌幅（%）↕收盘价（元）↕成交额（亿）↕
diff --git a/frontend/pages/themes/page.js b/frontend/pages/themes/page.js index ce70249..74704dc 100644 --- a/frontend/pages/themes/page.js +++ b/frontend/pages/themes/page.js @@ -97,7 +97,7 @@ function renderThemeDetail() { setText("themeMemberCount", `有行情 ${number(summary.quoted_count)} / ${number(summary.member_count)}`); const body = document.querySelector("#themeMemberTableBody"); body.innerHTML = (payload.members || []).map((row, index) => ` - ${index + 1} + ${index + 1} ${escapeHtml(row.name)}${escapeHtml(row.code)} ${row.has_quote ? signed(row.change) : ""} ${row.has_quote ? formatNumber(row.price, 2) : ""}${row.has_quote ? formatNumber(row.amount_billion, 2) : ""}`).join("");