feat(frontend): 因子类别体系加composite合成类——chips+detail/picker样式+--magenta类别色 [nas]

Co-Authored-By: Claude Code <noreply@anthropic.com>

frontend/src/styles/tokens.css

@@ -26,6 +26,9 @@
   /* —— 类别色：teal（fundamental 财务因子）—— */
   --teal: #2dd4bf;        /* fundamental 类别色 */
 
+  /* —— 类别色：magenta（composite 合成因子）—— */
+  --magenta: #e879f9;     /* composite 类别色 */
+
   /* —— 数据高亮：琥珀 —— */
   --amber: #ffb000;       /* 数据高亮/警告 */
   --warn: #ffb000;        /* 语义别名 */

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; }

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);
 }

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;