iter(g276): 新增迷你趋势线组件

2026-10-26 23:02:15 +08:00
parent 573d3aa8a9
commit eac7d4b337
12 changed files with 215 additions and 10 deletions
@@ -5786,3 +5786,25 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); }
  font-variant-numeric: tabular-nums; /* 等宽数字：列表里时间列不左右抖动 */
  white-space: nowrap; /* 「3 分钟前」不该被折成两行 */
 }
+
+/* ---- 迷你趋势线：颜色一律走 currentColor，因此放进任何容器都自动跟随该处文字色 ---- */
+.ua-spark {
+  display: block;
+  overflow: visible; /* 末点圆点可能压在边缘，别被 svg 自身裁掉 */
+  color: var(--ua-color-accent); /* 缺省跟主题强调色；想换色在父级改 color 即可 */
+}
+
+.ua-spark-line {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5; /* 细线：趋势线是辅助信息，不该抢主数值 */
+}
+
+.ua-spark-area {
+  fill: color-mix(in srgb, currentColor var(--ua-alpha-tint), transparent); /* 面积比线更淡一层，避免压过折线 */
+  stroke: none;
+}
+
+.ua-spark-dot {
+  fill: currentColor;
+}