feat: unify trading workspace visual system

This commit is contained in:
leefer
2026-08-06 02:48:46 +08:00
parent b3a21d05b7
commit bd97ba1829
25 changed files with 803 additions and 800 deletions
+73 -61
View File
@@ -16,25 +16,25 @@
--line-strong: var(--border-strong);
--surface-muted: #f8fafc;
--surface-muted: var(--surface-subtle);
border-radius: 8px;
border-radius: 0;
color: rgb(31, 41, 55);
color: var(--text-primary);
--action: #1769c2;
--action: var(--primary);
--action-hover: #10569f;
--action-hover: var(--primary-hover);
--action-soft: #eaf2fb;
--action-soft: var(--surface-selected);
--border: #dfe4e9;
--border: var(--color-border);
--border-strong: #cbd3dc;
--border-strong: var(--color-border-strong);
border-color: var(--border);
border-color: transparent;
background: var(--surface);
background: transparent;
}
.auction-phase-notice > div {
@@ -378,7 +378,7 @@
}
.auction-table tbody tr:hover td {
background: rgb(248, 250, 255);
background: var(--table-hover);
}
.auction-stock-cell {
@@ -488,7 +488,7 @@
padding-left: 4px;
background: rgb(255, 255, 255);
background: var(--surface);
color: rgb(180, 83, 9);
@@ -548,7 +548,7 @@
border-bottom-color: rgb(232, 237, 241);
background: rgb(244, 247, 249);
background: var(--table-header);
}
.auction-phase-notice {
@@ -566,7 +566,7 @@
border: 0px;
background: rgb(243, 244, 246);
background: var(--surface-muted);
border-radius: 5px;
}
@@ -652,13 +652,13 @@
margin-left: auto;
padding: 14px 16px 18px;
padding: var(--page-pad-y) 0 18px;
}
.auction-page-head-v2 {
min-width: 0px;
min-height: 62px;
min-height: 40px;
display: flex;
@@ -718,13 +718,15 @@
gap: 7px;
padding: 6px 10px;
padding: 0 0 0 12px;
border: 1px solid var(--r2-line);
border: 0;
border-radius: 7px;
border-left: 1px solid var(--r2-line);
background: rgb(255, 255, 255);
border-radius: 0;
background: transparent;
color: var(--r2-sub);
@@ -778,21 +780,21 @@
}
.auction-phase-notice-v2[data-phase="selection"] {
border-color: rgb(242, 214, 164);
border-color: var(--warning-color);
background: rgb(255, 250, 241);
background: transparent;
}
.auction-phase-notice-v2[data-phase="selection"] .auction-phase-marker {
background: rgb(217, 119, 6);
background: var(--warning-color);
animation: 1.8s ease-in-out 0s infinite normal none running auction-pulse;
}
.auction-phase-notice-v2[data-phase="finalized"] {
border-color: rgb(207, 224, 215);
border-color: var(--market-down);
background: rgb(244, 251, 247);
background: transparent;
}
.auction-phase-notice-v2[data-phase="finalized"] .auction-phase-marker {
@@ -831,25 +833,27 @@
}
.auction-summary-v2 {
min-width: 390px;
min-width: 348px;
display: grid;
grid-template-columns: repeat(4, minmax(82px, 1fr));
border: 1px solid var(--r2-line);
border: 0;
border-radius: 9px;
border-left: 1px solid var(--r2-line-soft);
background: rgb(255, 255, 255);
border-radius: 0;
box-shadow: var(--r2-shadow);
background: var(--surface);
box-shadow: none;
}
.auction-summary-v2 > div {
min-width: 0px;
min-height: 48px;
min-height: 44px;
display: grid;
@@ -908,9 +912,9 @@
border-radius: 7px;
background: rgb(255, 255, 255);
background: var(--surface);
color: rgb(55, 65, 81);
color: var(--text-primary);
font-size: 12px;
@@ -953,9 +957,9 @@
border-radius: var(--r2-radius);
background: rgb(255, 255, 255);
background: var(--surface);
box-shadow: var(--r2-shadow);
box-shadow: var(--card-shadow);
}
.auction-primary-card {
@@ -965,9 +969,9 @@
border-radius: var(--r2-radius);
background: rgb(255, 255, 255);
background: var(--surface);
box-shadow: var(--r2-shadow);
box-shadow: var(--card-shadow);
min-height: 0px;
@@ -1073,7 +1077,7 @@
justify-content: space-between;
background: rgb(250, 251, 252);
background: var(--surface-subtle);
}
.auction-expectation-v2,
@@ -1128,13 +1132,13 @@
}
.auction-filter-segments button.active {
background: rgb(255, 255, 255);
background: var(--surface);
color: var(--r2-ink);
font-weight: 600;
box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 2px;
box-shadow: var(--shadow-xs);
}
.auction-search-v2 {
@@ -1154,7 +1158,7 @@
border-radius: 7px;
background: rgb(255, 255, 255);
background: var(--surface);
}
.auction-search-v2 .lucide {
@@ -1182,7 +1186,7 @@
.auction-search-v2:focus-within {
border-color: var(--r2-blue-line);
box-shadow: rgba(37, 99, 235, 0.08) 0px 0px 0px 2px;
box-shadow: 0 0 0 2px var(--focus-ring);
}
.auction-export-button:focus-visible,
@@ -1227,7 +1231,7 @@
height: 35px;
background: rgb(248, 250, 252);
background: var(--table-header);
color: var(--r2-sub);
@@ -1279,7 +1283,7 @@
}
.auction-table-v2 tbody tr:hover td {
background: rgb(248, 250, 255);
background: var(--table-hover);
}
.auction-stock-cell-v2 {
@@ -1349,7 +1353,7 @@
border-radius: 3px;
background: rgb(240, 242, 245);
background: var(--surface-muted);
color: var(--r2-sub);
@@ -1361,7 +1365,7 @@
.auction-source-tags-v2 b:nth-child(n+2) {
background: var(--r2-blue-soft);
color: rgb(70, 100, 160);
color: var(--r2-blue);
}
#auctionView .auction-core-tags {
@@ -1397,7 +1401,7 @@
}
#auctionView .auction-score {
color: rgb(49, 95, 123);
color: var(--r2-blue);
font-weight: 750;
}
@@ -1431,9 +1435,9 @@
}
#auctionView .auction-expectation.matched {
background: rgb(243, 244, 246);
background: var(--surface-muted);
color: rgb(75, 85, 99);
color: var(--text-secondary);
}
#auctionView .auction-expectation.below {
@@ -1541,7 +1545,7 @@
border-radius: 5px;
background: rgb(243, 244, 246);
background: var(--surface-muted);
color: var(--r2-sub);
@@ -1619,15 +1623,15 @@
}
#auctionView .auction-theme-status.strong {
background: rgb(219, 231, 255);
background: var(--r2-blue-soft);
color: rgb(40, 88, 188);
color: var(--r2-blue);
}
#auctionView .auction-theme-status.steady {
background: rgb(233, 240, 255);
background: var(--r2-blue-soft);
color: rgb(70, 100, 160);
color: var(--r2-blue);
}
#auctionView .auction-theme-status.mixed {
@@ -1637,7 +1641,7 @@
}
#auctionView .auction-theme-status.weak {
background: rgb(243, 244, 246);
background: var(--surface-muted);
color: var(--r2-sub);
}
@@ -1707,7 +1711,7 @@
background: var(--r2-blue-soft);
color: rgb(70, 100, 160);
color: var(--r2-blue);
font-size: 10px;
}
@@ -1873,7 +1877,7 @@
padding-left: 3px;
background: rgb(255, 255, 255);
background: var(--surface);
color: rgb(217, 119, 6);
@@ -2102,7 +2106,7 @@
@media (min-width: 721px) and (max-height: 900px) {
.redesigned-auction-view {
padding: 10px 12px 12px;
padding: 10px 0 12px;
}
.auction-page-head-v2 {
@@ -2250,7 +2254,7 @@
background: var(--surface);
}
:root[data-theme="dark"] #auctionView :is(.auction-phase-notice-v2, .auction-export-button, .auction-refresh-button, .auction-filter-segments, .auction-table-v2 thead th) {
:root[data-theme="dark"] #auctionView :is(.auction-export-button, .auction-refresh-button, .auction-filter-segments, .auction-table-v2 thead th) {
border-color: var(--border);
background: var(--surface-muted);
@@ -2258,16 +2262,24 @@
color: var(--text-secondary);
}
:root[data-theme="dark"] #auctionView .auction-phase-notice-v2 {
border-left-color: var(--border);
background: transparent;
color: var(--text-secondary);
}
:root[data-theme="dark"] #auctionView .auction-phase-notice-v2[data-phase="selection"] {
border-color: var(--warning-line);
background: var(--warning-soft);
background: transparent;
}
:root[data-theme="dark"] #auctionView .auction-phase-notice-v2[data-phase="finalized"] {
border-color: var(--market-down-soft);
background: var(--market-down-soft);
background: transparent;
}
:root[data-theme="dark"] #auctionView :is(.auction-filter-segments button.active, .auction-source-tags-v2 b) {