feat(web): refresh palette, simplify ranking toolbar and drop export

reaction_board/web/static/charts.js

@@ -6,15 +6,21 @@ let resizeObserver = null;
 function colors() {
   const styles = getComputedStyle(document.documentElement);
   return {
-    text: styles.getPropertyValue("--text").trim() || "#1c1f23",
-    muted: styles.getPropertyValue("--muted").trim() || "#6b7280",
-    grid: styles.getPropertyValue("--grid").trim() || "#e8ebf0",
-    accent: "#fb7299",
-    blue: "#00aeec",
-    surface: styles.getPropertyValue("--surface").trim() || "#ffffff",
+    text: styles.getPropertyValue("--text").trim() || "#2a201a",
+    muted: styles.getPropertyValue("--muted").trim() || "#7b6a58",
+    grid: styles.getPropertyValue("--grid").trim() || "#eadfce",
+    accent: styles.getPropertyValue("--accent").trim() || "#a9702f",
+    blue: styles.getPropertyValue("--blue").trim() || "#5f7f96",
+    success: styles.getPropertyValue("--success").trim() || "#5f7a4e",
+    danger: styles.getPropertyValue("--danger").trim() || "#b4553f",
+    surface: styles.getPropertyValue("--surface").trim() || "#fffdf9",
   };
 }
 
+export function themeColor(name) {
+  return colors()[name] || colors().accent;
+}
+
 function ensureEcharts() {
   if (!window.echarts) {
     throw new Error("ECharts 未加载，请检查 /static/vendor/echarts.min.js");
@@ -54,16 +60,10 @@ export function disposeAll() {
   resizeObserver = null;
 }
 
-const palette = {
-  accent: "#fb7299",
-  blue: "#00aeec",
-  purple: "#9b7bff",
-  green: "#22c55e",
-};
-
-export function lineChart(element, { dates, values, name = "数值", color = palette.accent, scale = false }) {
+export function lineChart(element, { dates, values, name = "数值", color, scale = false }) {
   if (!element) return null;
   const theme = colors();
+  const lineColor = color || theme.accent;
   const option = {
     animationDuration: 300,
     backgroundColor: "transparent",
@@ -114,14 +114,14 @@ export function lineChart(element, { dates, values, name = "数值", color = pal
       symbol: "circle",
       symbolSize: 5,
       showSymbol: values.length <= 45,
-      lineStyle: { width: 2.2, color },
-      itemStyle: { color },
+      lineStyle: { width: 2.2, color: lineColor },
+      itemStyle: { color: lineColor },
       areaStyle: {
         color: {
           type: "linear", x: 0, y: 0, x2: 0, y2: 1,
           colorStops: [
-            { offset: 0, color: `${color}55` },
-            { offset: 1, color: `${color}00` },
+            { offset: 0, color: `${lineColor}55` },
+            { offset: 1, color: `${lineColor}00` },
           ],
         },
       },
@@ -130,9 +130,10 @@ export function lineChart(element, { dates, values, name = "数值", color = pal
   return mount(element, option);
 }
 
-export function barChart(element, { labels, values, name = "数值", color = palette.blue }) {
+export function barChart(element, { labels, values, name = "数值", color }) {
   if (!element) return null;
   const theme = colors();
+  const barColor = color || theme.blue;
   const option = {
     animationDuration: 300,
     backgroundColor: "transparent",
@@ -176,7 +177,7 @@ export function barChart(element, { labels, values, name = "数值", color = pal
       type: "bar",
       data: values,
       barMaxWidth: 26,
-      itemStyle: { color, borderRadius: [4, 4, 0, 0] },
+      itemStyle: { color: barColor, borderRadius: [4, 4, 0, 0] },
     }],
   };
   return mount(element, option);