From 362efe228af25d97e5615a60fbe51e014a052a5a Mon Sep 17 00:00:00 2001 From: claude_dev Date: Wed, 9 Sep 2026 12:18:18 +0800 Subject: [PATCH] =?UTF-8?q?feat(frontend):=20=E5=9B=A0=E5=AD=90=E7=B1=BB?= =?UTF-8?q?=E5=88=AB=E4=BD=93=E7=B3=BB=E5=8A=A0composite=E5=90=88=E6=88=90?= =?UTF-8?q?=E7=B1=BB=E2=80=94=E2=80=94chips+detail/picker=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F+--magenta=E7=B1=BB=E5=88=AB=E8=89=B2=20[nas]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Code --- frontend/src/styles/tokens.css | 3 +++ frontend/src/views/factor/FactorPicker.vue | 2 ++ frontend/src/views/factor/Leaderboard.vue | 8 ++++++++ frontend/src/views/factor/LeaderboardDetail.vue | 7 +++++++ 4 files changed, 20 insertions(+) diff --git a/frontend/src/styles/tokens.css b/frontend/src/styles/tokens.css index ae00d03..3dca21f 100644 --- a/frontend/src/styles/tokens.css +++ b/frontend/src/styles/tokens.css @@ -26,6 +26,9 @@ /* —— 类别色：teal（fundamental 财务因子）—— */ --teal: #2dd4bf; /* fundamental 类别色 */ + /* —— 类别色：magenta（composite 合成因子）—— */ + --magenta: #e879f9; /* composite 类别色 */ + /* —— 数据高亮：琥珀 —— */ --amber: #ffb000; /* 数据高亮/警告 */ --warn: #ffb000; /* 语义别名 */ diff --git a/frontend/src/views/factor/FactorPicker.vue b/frontend/src/views/factor/FactorPicker.vue index 5b39bfe..85da270 100644 --- a/frontend/src/views/factor/FactorPicker.vue +++ b/frontend/src/views/factor/FactorPicker.vue @@ -167,6 +167,7 @@ defineExpose({ hydrate }) .cat-builtin { color: var(--amber); background: rgba(255,176,0,.1); border-color: rgba(255,176,0,.3); } .cat-custom { color: var(--text-2); background: rgba(122,138,154,.1); border-color: rgba(122,138,154,.3); } .cat-fundamental { color: var(--teal); background: rgba(45,212,191,.1); border-color: rgba(45,212,191,.3); } +.cat-composite { color: var(--magenta); background: rgba(232,121,249,.1); border-color: rgba(232,121,249,.3); } .grid { display: flex; flex-wrap: wrap; gap: 5px; } .fxp { font-family: var(--mono); font-size: 11px; padding: 2px 9px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--panel); color: var(--text-2); cursor: pointer; transition: all .12s ease; user-select: none; } .fxp:hover { color: var(--text); border-color: var(--text-3); } @@ -175,6 +176,7 @@ defineExpose({ hydrate }) .fxp.sel.sel-builtin { color: var(--amber); border-color: rgba(255,176,0,.45); background: var(--amber-soft); } .fxp.sel.sel-custom { color: var(--text); border-color: var(--text-3); background: var(--bg-hover); } .fxp.sel.sel-fundamental { color: var(--teal); border-color: rgba(45,212,191,.45); background: rgba(45,212,191,.12); } +.fxp.sel.sel-composite { color: var(--magenta); border-color: rgba(232,121,249,.45); background: rgba(232,121,249,.12); } .picked { display: flex; align-items: center; gap: 8px; margin-top: 12px; border: 1px dashed rgba(0,229,255,.3); background: rgba(0,229,255,.04); border-radius: var(--r-md); padding: 8px 12px; flex-wrap: wrap; min-height: 38px; } .pk { font-family: var(--mono); font-size: 10.5px; color: var(--brand); letter-spacing: .1em; white-space: nowrap; } .chips { display: flex; gap: 5px; flex-wrap: wrap; flex: 1; } diff --git a/frontend/src/views/factor/Leaderboard.vue b/frontend/src/views/factor/Leaderboard.vue index b773ba2..ff29b29 100644 --- a/frontend/src/views/factor/Leaderboard.vue +++ b/frontend/src/views/factor/Leaderboard.vue @@ -23,6 +23,7 @@ const CATEGORY_CHIPS = [ { key: 'alpha158', label: 'Alpha158' }, { key: 'builtin', label: '内置' }, { key: 'fundamental', label: '财务基本面' }, + { key: 'composite', label: '合成因子' }, ] async function load() { @@ -89,6 +90,7 @@ function getCategoryClass(cat: string): string { alpha158: 'cat-alpha158', builtin: 'cat-builtin', fundamental: 'cat-fundamental', + composite: 'cat-composite', } return map[cat] || 'cat-builtin' } @@ -616,6 +618,12 @@ td .fexpr { border-color: rgba(45, 212, 191, 0.3); } +.cat-composite { + color: var(--magenta); + background: rgba(232, 121, 249, 0.1); + border-color: rgba(232, 121, 249, 0.3); +} + .pos { color: var(--up); } diff --git a/frontend/src/views/factor/LeaderboardDetail.vue b/frontend/src/views/factor/LeaderboardDetail.vue index 7ad579d..4f9d237 100644 --- a/frontend/src/views/factor/LeaderboardDetail.vue +++ b/frontend/src/views/factor/LeaderboardDetail.vue @@ -327,6 +327,7 @@ const categoryClass = computed(() => { alpha158: 'cat-alpha158', builtin: 'cat-builtin', fundamental: 'cat-fundamental', + composite: 'cat-composite', } return map[detail.value.category] || 'cat-builtin' }) @@ -757,6 +758,12 @@ function pct(val: number | null | undefined): string { border-color: rgba(45, 212, 191, 0.3); } +.cat-composite { + color: var(--magenta); + background: rgba(232, 121, 249, 0.1); + border-color: rgba(232, 121, 249, 0.3); +} + .st { display: inline-flex; align-items: center;