feat(HEL-524): 板块轮动落地 B 五彩版，侧栏/品牌去独立底色
- 新增 5 档强度色 token（日/夜两套，含渐变填充与光晕 alpha），tokens.css - 板块轮动卡片改为 heat-tier-1..5，固定阈值 <65/65-74/75-84/85-94/95+ 映射青/蓝/紫/橙/红，9 个日期列共用同一套映射，与涨跌无关 - 悬停/选中/追踪三态用 --tier-* 局部变量统一驱动，选中态（当次点击格） 用渐变实色+2px 亮边+光晕，追踪态（其余同名格）保留档位底色+2px 描边 +圆点标记，不新增业务状态；修复 hover 规则与 selected 同优先级导致 悬停会覆盖选中/追踪样式的层叠顺序问题（:hover 增加 :not(.selected)） - 图例改为 5 档 + “颜色＝强度档位，与涨跌无关” 说明，禁止对普通卡使用绿色 - 侧栏/品牌区去掉独立色块：.module-nav 融入页面 --canvas， 品牌区与顶栏同层（--header-bg），收起侧栏整行透明；仅作用于 非移动端且非「问天」路由，问天页面零改动 - 清理死代码：未生效的 .selected 旧规则与引用未定义变量的 --rotation-heat 声明 - 更新 e2e 断言以匹配新 tier 类名；重新生成 architecture-inventory.json Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
总工
co-authored by
Cursor
multica-agent
Cursor
multica-agent
parent
5385bad9ec
commit
4a90c32fcc
+137
-79
@@ -28,14 +28,6 @@
|
||||
background: var(--selected);
|
||||
}
|
||||
|
||||
.rotation-sector-chip.selected {
|
||||
border-color: var(--action);
|
||||
|
||||
background: var(--action-soft);
|
||||
|
||||
color: var(--action-hover);
|
||||
}
|
||||
|
||||
.rotation-sector-chip > span {
|
||||
color: var(--text-secondary);
|
||||
|
||||
@@ -158,8 +150,6 @@
|
||||
cursor: pointer;
|
||||
|
||||
border-bottom: 1px dashed var(--border);
|
||||
|
||||
background: color-mix(in srgb, var(--accent) calc(4% + var(--rotation-heat) * 46%), transparent);
|
||||
}
|
||||
|
||||
.redesigned-rotation-view {
|
||||
@@ -397,8 +387,12 @@
|
||||
|
||||
display: flex;
|
||||
|
||||
flex-wrap: wrap;
|
||||
|
||||
align-items: center;
|
||||
|
||||
row-gap: 4px;
|
||||
|
||||
gap: 14px;
|
||||
|
||||
padding: 8px 14px;
|
||||
@@ -434,18 +428,32 @@
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
#rotationView .rotation-swatch.strong {
|
||||
background: var(--accent);
|
||||
#rotationView .rotation-swatch.tier-1 {
|
||||
background: var(--rotation-tier1-bar);
|
||||
}
|
||||
|
||||
#rotationView .rotation-swatch.warm {
|
||||
background: var(--accent-soft);
|
||||
#rotationView .rotation-swatch.tier-2 {
|
||||
background: var(--rotation-tier2-bar);
|
||||
}
|
||||
|
||||
#rotationView .rotation-swatch.mild {
|
||||
background: var(--surface-muted);
|
||||
#rotationView .rotation-swatch.tier-3 {
|
||||
background: var(--rotation-tier3-bar);
|
||||
}
|
||||
|
||||
border: 1px solid var(--border);
|
||||
#rotationView .rotation-swatch.tier-4 {
|
||||
background: var(--rotation-tier4-bar);
|
||||
}
|
||||
|
||||
#rotationView .rotation-swatch.tier-5 {
|
||||
background: var(--rotation-tier5-bar);
|
||||
}
|
||||
|
||||
#rotationView .rotation-legend-note {
|
||||
margin-left: auto;
|
||||
|
||||
color: var(--r2-faint);
|
||||
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#rotationView .rotation-tracker {
|
||||
@@ -818,10 +826,59 @@
|
||||
|
||||
#rotationView .rotation-history.tracking .rotation-sector-chip.selected {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
border-color: var(--r2-blue);
|
||||
/* 追踪态：命中被追踪板块名、但不是当次点击的那一格 —— 保持档位底色，2px 同档位描边（含 80% 不透明度），
|
||||
连点标记不做动画，仅描边淡入 200ms */
|
||||
#rotationView .rotation-sector-chip.selected:not(.current-cell) {
|
||||
border-width: 2px;
|
||||
|
||||
box-shadow: inset 3px 0 0 var(--r2-blue), 0 0 0 1px var(--accent-soft);
|
||||
border-color: color-mix(in srgb, var(--tier-bar) 80%, transparent);
|
||||
|
||||
transition: border-color 200ms var(--ease-out);
|
||||
}
|
||||
|
||||
/* 选中态：仅当次点击的日期+板块这一格 —— 同档位实色渐变 + 2px 亮描边 + 克制光晕，全页最多一张 */
|
||||
#rotationView .rotation-sector-chip.selected.current-cell {
|
||||
border-width: 2px;
|
||||
|
||||
border-color: var(--tier-text);
|
||||
|
||||
background: linear-gradient(135deg, var(--tier-fill-start), var(--tier-fill-end));
|
||||
|
||||
box-shadow: 0 0 16px color-mix(in srgb, var(--tier-bar) var(--rotation-tier-glow-alpha), transparent);
|
||||
|
||||
color: var(--text-inverse);
|
||||
|
||||
transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
|
||||
}
|
||||
|
||||
#rotationView .rotation-sector-chip.selected.current-cell strong,
|
||||
#rotationView .rotation-sector-chip.selected.current-cell small,
|
||||
#rotationView .rotation-sector-chip.selected.current-cell small b {
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
#rotationView .rotation-track-dot {
|
||||
width: 6px;
|
||||
|
||||
height: 6px;
|
||||
|
||||
position: absolute;
|
||||
|
||||
top: 6px;
|
||||
|
||||
right: 6px;
|
||||
|
||||
border-radius: 50%;
|
||||
|
||||
background: var(--tier-bar);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#rotationView .rotation-sector-chip.selected.current-cell {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.rotation-cell-tooltip {
|
||||
@@ -1050,40 +1107,79 @@
|
||||
}
|
||||
}
|
||||
|
||||
#rotationView .rotation-sector-chip.heat-mild {
|
||||
border-color: var(--border);
|
||||
|
||||
background: var(--surface-muted);
|
||||
|
||||
box-shadow: none;
|
||||
/* HEL-524: 五档强度色 —— 同一强度值在 9 个日期列中颜色完全一致，仅代表强度档位，与涨跌无关。
|
||||
普通卡只用低透明着色，页面/主容器/日期分栏的层级由 HEL-522 的明度骨架承担，这里不重复叠加。 */
|
||||
#rotationView .rotation-sector-chip.heat-tier-1 {
|
||||
--tier-bar: var(--rotation-tier1-bar);
|
||||
--tier-bg: var(--rotation-tier1-bg);
|
||||
--tier-border: var(--rotation-tier1-border);
|
||||
--tier-text: var(--rotation-tier1-text);
|
||||
--tier-fill-start: var(--rotation-tier1-fill-start);
|
||||
--tier-fill-end: var(--rotation-tier1-fill-end);
|
||||
}
|
||||
|
||||
#rotationView .rotation-sector-chip.heat-strong {
|
||||
border-color: var(--action-line);
|
||||
|
||||
background: var(--accent-soft);
|
||||
|
||||
box-shadow: none;
|
||||
#rotationView .rotation-sector-chip.heat-tier-2 {
|
||||
--tier-bar: var(--rotation-tier2-bar);
|
||||
--tier-bg: var(--rotation-tier2-bg);
|
||||
--tier-border: var(--rotation-tier2-border);
|
||||
--tier-text: var(--rotation-tier2-text);
|
||||
--tier-fill-start: var(--rotation-tier2-fill-start);
|
||||
--tier-fill-end: var(--rotation-tier2-fill-end);
|
||||
}
|
||||
|
||||
#rotationView .rotation-sector-chip.heat-warm {
|
||||
border-color: var(--action-line);
|
||||
|
||||
background: color-mix(in srgb, var(--accent) 12%, var(--surface));
|
||||
|
||||
box-shadow: none;
|
||||
#rotationView .rotation-sector-chip.heat-tier-3 {
|
||||
--tier-bar: var(--rotation-tier3-bar);
|
||||
--tier-bg: var(--rotation-tier3-bg);
|
||||
--tier-border: var(--rotation-tier3-border);
|
||||
--tier-text: var(--rotation-tier3-text);
|
||||
--tier-fill-start: var(--rotation-tier3-fill-start);
|
||||
--tier-fill-end: var(--rotation-tier3-fill-end);
|
||||
}
|
||||
|
||||
#rotationView .rotation-sector-chip:hover {
|
||||
#rotationView .rotation-sector-chip.heat-tier-4 {
|
||||
--tier-bar: var(--rotation-tier4-bar);
|
||||
--tier-bg: var(--rotation-tier4-bg);
|
||||
--tier-border: var(--rotation-tier4-border);
|
||||
--tier-text: var(--rotation-tier4-text);
|
||||
--tier-fill-start: var(--rotation-tier4-fill-start);
|
||||
--tier-fill-end: var(--rotation-tier4-fill-end);
|
||||
}
|
||||
|
||||
#rotationView .rotation-sector-chip.heat-tier-5 {
|
||||
--tier-bar: var(--rotation-tier5-bar);
|
||||
--tier-bg: var(--rotation-tier5-bg);
|
||||
--tier-border: var(--rotation-tier5-border);
|
||||
--tier-text: var(--rotation-tier5-text);
|
||||
--tier-fill-start: var(--rotation-tier5-fill-start);
|
||||
--tier-fill-end: var(--rotation-tier5-fill-end);
|
||||
}
|
||||
|
||||
#rotationView .rotation-sector-chip[class*="heat-tier-"] {
|
||||
border-color: var(--tier-border);
|
||||
|
||||
background: var(--tier-bg);
|
||||
|
||||
box-shadow: inset 4px 0 0 0 var(--tier-bar);
|
||||
|
||||
transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out), filter 240ms, opacity 220ms;
|
||||
}
|
||||
|
||||
#rotationView .rotation-sector-chip[class*="heat-tier-"] .rotation-strength {
|
||||
color: var(--tier-text);
|
||||
}
|
||||
|
||||
/* 悬停态：卡底与描边 alpha 适度提升，120ms ease-out，可打断，不打乱档位色含义；
|
||||
已经处于选中/追踪态的卡片保持其自身样式，不叠加普通悬停处理 */
|
||||
#rotationView .rotation-sector-chip[class*="heat-tier-"]:hover:not(.selected) {
|
||||
z-index: 6;
|
||||
|
||||
border-color: var(--accent);
|
||||
background: color-mix(in srgb, var(--tier-bar) 8%, var(--tier-bg) 92%);
|
||||
|
||||
border-color: color-mix(in srgb, var(--tier-bar) 26%, var(--tier-border) 74%);
|
||||
|
||||
filter: saturate(1.06);
|
||||
|
||||
transform: translate3d(2px, -2px, 0px) scale(1.015);
|
||||
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
#rotationView .rotation-table {
|
||||
@@ -1207,30 +1303,6 @@
|
||||
box-shadow: var(--control-shadow);
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] #rotationView .rotation-sector-chip.heat-strong {
|
||||
border-color: var(--blue-line);
|
||||
|
||||
background: var(--heat-strong-bg);
|
||||
|
||||
color: var(--heat-strong-ink);
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] #rotationView .rotation-sector-chip.heat-warm {
|
||||
border-color: var(--border-strong);
|
||||
|
||||
background: var(--heat-warm-bg);
|
||||
|
||||
color: var(--heat-warm-ink);
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] #rotationView .rotation-sector-chip.heat-mild {
|
||||
border-color: var(--border);
|
||||
|
||||
background: var(--heat-mild-bg);
|
||||
|
||||
color: var(--heat-mild-ink);
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] #rotationView :is(.rotation-rank, .rotation-table thead th, .trend-flat) {
|
||||
border-color: var(--border);
|
||||
|
||||
@@ -1243,20 +1315,6 @@
|
||||
background: var(--action-soft);
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] #rotationView :is(.rotation-swatch.warm) {
|
||||
border-color: var(--blue-line);
|
||||
|
||||
background: var(--action-soft);
|
||||
|
||||
color: var(--action);
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] #rotationView :is(.rotation-swatch.mild) {
|
||||
border-color: var(--border);
|
||||
|
||||
background: var(--surface-muted);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
#rotationView :is(.rotation-table-frame, .rotation-detail-card) {
|
||||
max-height: none;
|
||||
|
||||
Reference in New Issue
Block a user