From b117f21e3a8f20367c315a1ac2b56d20d77aae52 Mon Sep 17 00:00:00 2001
From: Marcus <1922576605@qq.com>
Date: Tue, 13 Oct 2026 04:06:16 -0700
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=9B=B4=E6=96=B0=E7=89=A9?=
 =?UTF-8?q?=E6=96=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/resources/materials/area-chart.json       |  26 +-
 app/resources/materials/bar-chart.json        |  26 +-
 app/resources/materials/bar-line-chart.json   |  38 +-
 app/resources/materials/field_groups.json     |  24 +-
 app/resources/materials/funnel-chart.json     |   9 +-
 app/resources/materials/gauge-chart.json      |  26 +-
 app/resources/materials/hbar-chart.json       |  38 +-
 app/resources/materials/heatmap-chart.json    |  27 +-
 app/resources/materials/line-chart.json       |  26 +-
 .../materials/pictorial-bar-chart.json        |  21 +-
 app/resources/materials/pie-chart.json        |  14 +-
 .../materials/progress-ring-chart.json        |  11 +-
 app/resources/materials/radar-chart.json      |  32 +-
 app/resources/materials/ring-chart.json       |  14 +-
 app/resources/materials/rose-chart.json       |  14 +-
 app/resources/materials/scatter-chart.json    |  31 +-
 .../materials/stacked-bar-chart.json          |  26 +-
 app/resources/materials/stat-card.json        | 579 ++++++++++++++++++
 app/resources/materials/text.json             |   4 +-
 19 files changed, 650 insertions(+), 336 deletions(-)
 create mode 100644 app/resources/materials/stat-card.json

diff --git a/app/resources/materials/area-chart.json b/app/resources/materials/area-chart.json
index 666d080..cc1ec36 100644
--- a/app/resources/materials/area-chart.json
+++ b/app/resources/materials/area-chart.json
@@ -99,17 +99,13 @@
           "left": "center",
           "itemWidth": 12,
           "itemHeight": 8,
-          "show": true,
-          "textStyle": {
-            "color": "#cfd3dc"
-          }
+          "show": true
         },
         "title": {
           "text": "成交额趋势",
           "top": 8,
           "left": "center",
           "textStyle": {
-            "color": "#e5eaf3",
             "fontSize": 16
           }
         },
@@ -157,26 +153,10 @@
         },
         "xAxis": {
           "type": "category",
-          "boundaryGap": false,
-          "axisLine": {
-            "lineStyle": {
-              "color": "#4c4d4f"
-            }
-          },
-          "axisLabel": {
-            "color": "#cfd3dc"
-          }
+          "boundaryGap": false
         },
         "yAxis": {
-          "type": "value",
-          "axisLabel": {
-            "color": "#cfd3dc"
-          },
-          "splitLine": {
-            "lineStyle": {
-              "color": "rgba(255, 255, 255, 0.08)"
-            }
-          }
+          "type": "value"
         },
         "series": [
           {
diff --git a/app/resources/materials/bar-chart.json b/app/resources/materials/bar-chart.json
index 55a1242..c3bf984 100644
--- a/app/resources/materials/bar-chart.json
+++ b/app/resources/materials/bar-chart.json
@@ -175,17 +175,13 @@
           "left": "center",
           "itemWidth": 12,
           "itemHeight": 8,
-          "show": true,
-          "textStyle": {
-            "color": "#cfd3dc"
-          }
+          "show": true
         },
         "title": {
           "text": "月度销售额",
           "top": 8,
           "left": "center",
           "textStyle": {
-            "color": "#e5eaf3",
             "fontSize": 16
           }
         },
@@ -226,26 +222,10 @@
           "containLabel": true
         },
         "xAxis": {
-          "type": "category",
-          "axisLine": {
-            "lineStyle": {
-              "color": "#4c4d4f"
-            }
-          },
-          "axisLabel": {
-            "color": "#cfd3dc"
-          }
+          "type": "category"
         },
         "yAxis": {
-          "type": "value",
-          "axisLabel": {
-            "color": "#cfd3dc"
-          },
-          "splitLine": {
-            "lineStyle": {
-              "color": "rgba(255, 255, 255, 0.08)"
-            }
-          }
+          "type": "value"
         },
         "series": [
           {
diff --git a/app/resources/materials/bar-line-chart.json b/app/resources/materials/bar-line-chart.json
index 2875750..3cee14e 100644
--- a/app/resources/materials/bar-line-chart.json
+++ b/app/resources/materials/bar-line-chart.json
@@ -139,7 +139,8 @@
           "aliases": [
             "横轴文字颜色"
           ],
-          "panel": false
+          "panel": false,
+          "themed": true
         },
         {
           "path": "props.option.xAxis.axisLabel.fontSize",
@@ -259,17 +260,13 @@
           "left": "center",
           "itemWidth": 12,
           "itemHeight": 8,
-          "show": true,
-          "textStyle": {
-            "color": "#cfd3dc"
-          }
+          "show": true
         },
         "title": {
           "text": "销售额与增长率",
           "top": 8,
           "left": "center",
           "textStyle": {
-            "color": "#e5eaf3",
             "fontSize": 16
           }
         },
@@ -318,45 +315,22 @@
           "containLabel": true
         },
         "xAxis": {
-          "type": "category",
-          "axisLine": {
-            "lineStyle": {
-              "color": "#4c4d4f"
-            }
-          },
-          "axisLabel": {
-            "color": "#cfd3dc"
-          }
+          "type": "category"
         },
         "yAxis": [
           {
             "type": "value",
-            "axisLabel": {
-              "color": "#cfd3dc"
-            },
-            "splitLine": {
-              "lineStyle": {
-                "color": "rgba(255, 255, 255, 0.08)"
-              }
-            },
-            "name": "销售额",
-            "nameTextStyle": {
-              "color": "#a3a6ad"
-            }
+            "name": "销售额"
           },
           {
             "type": "value",
             "axisLabel": {
-              "color": "#cfd3dc",
               "formatter": "{value}%"
             },
             "splitLine": {
               "show": false
             },
-            "name": "增长率",
-            "nameTextStyle": {
-              "color": "#a3a6ad"
-            }
+            "name": "增长率"
           }
         ],
         "series": [
diff --git a/app/resources/materials/field_groups.json b/app/resources/materials/field_groups.json
index fa4f5c3..c2ccfef 100644
--- a/app/resources/materials/field_groups.json
+++ b/app/resources/materials/field_groups.json
@@ -96,7 +96,8 @@
         "aliases": [
           "标题颜色",
           "标题文字颜色"
-        ]
+        ],
+        "themed": true
       },
       {
         "path": "props.option.title.left",
@@ -175,7 +176,8 @@
           "图例颜色",
           "图例文字颜色"
         ],
-        "panel": false
+        "panel": false,
+        "themed": true
       },
       {
         "path": "props.option.legend.textStyle.fontSize",
@@ -251,7 +253,8 @@
           "横轴文字颜色",
           "X轴标签颜色"
         ],
-        "panel": false
+        "panel": false,
+        "themed": true
       },
       {
         "path": "props.option.xAxis.axisLabel.fontSize",
@@ -277,7 +280,8 @@
           "横轴颜色",
           "坐标轴颜色"
         ],
-        "panel": false
+        "panel": false,
+        "themed": true
       },
       {
         "path": "props.option.yAxis.axisLabel.color",
@@ -288,7 +292,8 @@
           "纵轴文字颜色",
           "Y轴标签颜色"
         ],
-        "panel": false
+        "panel": false,
+        "themed": true
       },
       {
         "path": "props.option.yAxis.axisLabel.fontSize",
@@ -314,7 +319,8 @@
           "分隔线颜色",
           "背景线颜色"
         ],
-        "panel": false
+        "panel": false,
+        "themed": true
       }
     ]
   },
@@ -551,7 +557,8 @@
         "aliases": [
           "标签颜色"
         ],
-        "panel": false
+        "panel": false,
+        "themed": true
       },
       {
         "path": "props.option.series.0.label.fontSize",
@@ -627,7 +634,8 @@
         "aliases": [
           "数字颜色"
         ],
-        "panel": false
+        "panel": false,
+        "themed": true
       },
       {
         "path": "props.option.series.0.detail.fontSize",
diff --git a/app/resources/materials/funnel-chart.json b/app/resources/materials/funnel-chart.json
index 860dc6f..e6a4862 100644
--- a/app/resources/materials/funnel-chart.json
+++ b/app/resources/materials/funnel-chart.json
@@ -133,17 +133,13 @@
           "left": "center",
           "itemWidth": 12,
           "itemHeight": 8,
-          "show": true,
-          "textStyle": {
-            "color": "#cfd3dc"
-          }
+          "show": true
         },
         "title": {
           "text": "转化漏斗",
           "top": 8,
           "left": "center",
           "textStyle": {
-            "color": "#e5eaf3",
             "fontSize": 16
           }
         },
@@ -182,9 +178,6 @@
             "maxSize": "100%",
             "sort": "descending",
             "gap": 4,
-            "label": {
-              "color": "#cfd3dc"
-            },
             "itemStyle": {
               "borderColor": "transparent"
             },
diff --git a/app/resources/materials/gauge-chart.json b/app/resources/materials/gauge-chart.json
index 9dc7ad8..aa27b26 100644
--- a/app/resources/materials/gauge-chart.json
+++ b/app/resources/materials/gauge-chart.json
@@ -42,7 +42,8 @@
           "label": "指针颜色",
           "description": "指针的颜色",
           "value_type": "color",
-          "panel": false
+          "panel": false,
+          "themed": true
         },
         {
           "path": "props.option.series.0.axisLabel.color",
@@ -52,7 +53,8 @@
           "aliases": [
             "刻度颜色"
           ],
-          "panel": false
+          "panel": false,
+          "themed": true
         },
         {
           "path": "props.option.series.0.axisLabel.fontSize",
@@ -153,7 +155,6 @@
           "top": 8,
           "left": "center",
           "textStyle": {
-            "color": "#e5eaf3",
             "fontSize": 16
           }
         },
@@ -189,13 +190,7 @@
             },
             "axisLine": {
               "lineStyle": {
-                "width": 12,
-                "color": [
-                  [
-                    1,
-                    "rgba(255, 255, 255, 0.1)"
-                  ]
-                ]
+                "width": 12
               }
             },
             "axisTick": {
@@ -204,25 +199,17 @@
             "splitLine": {
               "length": 8,
               "lineStyle": {
-                "width": 1,
-                "color": "#4c4d4f"
+                "width": 1
               }
             },
             "axisLabel": {
-              "color": "#cfd3dc",
               "distance": 16
             },
-            "pointer": {
-              "itemStyle": {
-                "color": "#e5eaf3"
-              }
-            },
             "title": {
               "offsetCenter": [
                 0,
                 "72%"
               ],
-              "color": "#cfd3dc",
               "fontSize": 13
             },
             "detail": {
@@ -231,7 +218,6 @@
                 0,
                 "46%"
               ],
-              "color": "#e5eaf3",
               "fontSize": 28,
               "formatter": "{value}%"
             },
diff --git a/app/resources/materials/hbar-chart.json b/app/resources/materials/hbar-chart.json
index ff0ac84..156ce0d 100644
--- a/app/resources/materials/hbar-chart.json
+++ b/app/resources/materials/hbar-chart.json
@@ -36,7 +36,8 @@
             "横轴文字颜色",
             "数值轴文字颜色"
           ],
-          "panel": false
+          "panel": false,
+          "themed": true
         },
         {
           "path": "props.option.xAxis.axisLabel.fontSize",
@@ -62,7 +63,8 @@
             "分隔线颜色",
             "背景线颜色"
           ],
-          "panel": false
+          "panel": false,
+          "themed": true
         },
         {
           "path": "props.option.yAxis.axisLabel.color",
@@ -73,7 +75,8 @@
             "纵轴文字颜色",
             "类目文字颜色"
           ],
-          "panel": false
+          "panel": false,
+          "themed": true
         },
         {
           "path": "props.option.yAxis.axisLabel.fontSize",
@@ -99,7 +102,8 @@
             "纵轴颜色",
             "坐标轴颜色"
           ],
-          "panel": false
+          "panel": false,
+          "themed": true
         }
       ]
     },
@@ -255,17 +259,13 @@
           "left": "center",
           "itemWidth": 12,
           "itemHeight": 8,
-          "show": true,
-          "textStyle": {
-            "color": "#cfd3dc"
-          }
+          "show": true
         },
         "title": {
           "text": "地区销售额",
           "top": 8,
           "left": "center",
           "textStyle": {
-            "color": "#e5eaf3",
             "fontSize": 16
           }
         },
@@ -302,26 +302,10 @@
           "containLabel": true
         },
         "xAxis": {
-          "type": "value",
-          "axisLabel": {
-            "color": "#cfd3dc"
-          },
-          "splitLine": {
-            "lineStyle": {
-              "color": "rgba(255, 255, 255, 0.08)"
-            }
-          }
+          "type": "value"
         },
         "yAxis": {
-          "type": "category",
-          "axisLine": {
-            "lineStyle": {
-              "color": "#4c4d4f"
-            }
-          },
-          "axisLabel": {
-            "color": "#cfd3dc"
-          }
+          "type": "category"
         },
         "series": [
           {
diff --git a/app/resources/materials/heatmap-chart.json b/app/resources/materials/heatmap-chart.json
index cba7888..73013fe 100644
--- a/app/resources/materials/heatmap-chart.json
+++ b/app/resources/materials/heatmap-chart.json
@@ -40,7 +40,8 @@
           "aliases": [
             "横轴文字颜色"
           ],
-          "panel": false
+          "panel": false,
+          "themed": true
         },
         {
           "path": "props.option.xAxis.axisLabel.fontSize",
@@ -64,7 +65,8 @@
           "aliases": [
             "纵轴文字颜色"
           ],
-          "panel": false
+          "panel": false,
+          "themed": true
         },
         {
           "path": "props.option.yAxis.axisLabel.fontSize",
@@ -251,7 +253,6 @@
           "top": 8,
           "left": "center",
           "textStyle": {
-            "color": "#e5eaf3",
             "fontSize": 16
           }
         },
@@ -481,28 +482,12 @@
         },
         "xAxis": {
           "type": "category",
-          "axisLine": {
-            "lineStyle": {
-              "color": "#4c4d4f"
-            }
-          },
-          "axisLabel": {
-            "color": "#cfd3dc"
-          },
           "splitArea": {
             "show": true
           }
         },
         "yAxis": {
           "type": "category",
-          "axisLine": {
-            "lineStyle": {
-              "color": "#4c4d4f"
-            }
-          },
-          "axisLabel": {
-            "color": "#cfd3dc"
-          },
           "inverse": true,
           "splitArea": {
             "show": true
@@ -516,9 +501,6 @@
           "left": "center",
           "bottom": 4,
           "itemHeight": 120,
-          "textStyle": {
-            "color": "#cfd3dc"
-          },
           "inRange": {
             "color": [
               "#1d2b44",
@@ -540,7 +522,6 @@
               "fontSize": 11
             },
             "itemStyle": {
-              "borderColor": "#141414",
               "borderWidth": 2
             },
             "encode": {
diff --git a/app/resources/materials/line-chart.json b/app/resources/materials/line-chart.json
index 0a75f1b..3ce87a6 100644
--- a/app/resources/materials/line-chart.json
+++ b/app/resources/materials/line-chart.json
@@ -81,17 +81,13 @@
           "left": "center",
           "itemWidth": 12,
           "itemHeight": 8,
-          "show": true,
-          "textStyle": {
-            "color": "#cfd3dc"
-          }
+          "show": true
         },
         "title": {
           "text": "访问量趋势",
           "top": 8,
           "left": "center",
           "textStyle": {
-            "color": "#e5eaf3",
             "fontSize": 16
           }
         },
@@ -139,26 +135,10 @@
         },
         "xAxis": {
           "type": "category",
-          "boundaryGap": false,
-          "axisLine": {
-            "lineStyle": {
-              "color": "#4c4d4f"
-            }
-          },
-          "axisLabel": {
-            "color": "#cfd3dc"
-          }
+          "boundaryGap": false
         },
         "yAxis": {
-          "type": "value",
-          "axisLabel": {
-            "color": "#cfd3dc"
-          },
-          "splitLine": {
-            "lineStyle": {
-              "color": "rgba(255, 255, 255, 0.08)"
-            }
-          }
+          "type": "value"
         },
         "series": [
           {
diff --git a/app/resources/materials/pictorial-bar-chart.json b/app/resources/materials/pictorial-bar-chart.json
index 59fbe98..3df7c9b 100644
--- a/app/resources/materials/pictorial-bar-chart.json
+++ b/app/resources/materials/pictorial-bar-chart.json
@@ -181,7 +181,6 @@
           "top": 8,
           "left": "center",
           "textStyle": {
-            "color": "#e5eaf3",
             "fontSize": 16
           }
         },
@@ -223,26 +222,10 @@
           "containLabel": true
         },
         "xAxis": {
-          "type": "category",
-          "axisLine": {
-            "lineStyle": {
-              "color": "#4c4d4f"
-            }
-          },
-          "axisLabel": {
-            "color": "#cfd3dc"
-          }
+          "type": "category"
         },
         "yAxis": {
-          "type": "value",
-          "axisLabel": {
-            "color": "#cfd3dc"
-          },
-          "splitLine": {
-            "lineStyle": {
-              "color": "rgba(255, 255, 255, 0.08)"
-            }
-          }
+          "type": "value"
         },
         "series": [
           {
diff --git a/app/resources/materials/pie-chart.json b/app/resources/materials/pie-chart.json
index 2efd65e..ee304c7 100644
--- a/app/resources/materials/pie-chart.json
+++ b/app/resources/materials/pie-chart.json
@@ -87,17 +87,13 @@
           "left": "center",
           "itemWidth": 12,
           "itemHeight": 8,
-          "show": true,
-          "textStyle": {
-            "color": "#cfd3dc"
-          }
+          "show": true
         },
         "title": {
           "text": "访问来源占比",
           "top": 8,
           "left": "center",
           "textStyle": {
-            "color": "#e5eaf3",
             "fontSize": 16
           }
         },
@@ -133,14 +129,6 @@
               "62%"
             ],
             "avoidLabelOverlap": true,
-            "label": {
-              "color": "#cfd3dc"
-            },
-            "labelLine": {
-              "lineStyle": {
-                "color": "#a3a6ad"
-              }
-            },
             "encode": {
               "itemName": "channel",
               "value": "value"
diff --git a/app/resources/materials/progress-ring-chart.json b/app/resources/materials/progress-ring-chart.json
index 12c77f0..6d94006 100644
--- a/app/resources/materials/progress-ring-chart.json
+++ b/app/resources/materials/progress-ring-chart.json
@@ -122,7 +122,6 @@
           "top": 8,
           "left": "center",
           "textStyle": {
-            "color": "#e5eaf3",
             "fontSize": 16
           }
         },
@@ -163,13 +162,7 @@
             },
             "axisLine": {
               "lineStyle": {
-                "width": 14,
-                "color": [
-                  [
-                    1,
-                    "rgba(255, 255, 255, 0.1)"
-                  ]
-                ]
+                "width": 14
               }
             },
             "axisTick": {
@@ -186,7 +179,6 @@
                 0,
                 "28%"
               ],
-              "color": "#cfd3dc",
               "fontSize": 13
             },
             "detail": {
@@ -195,7 +187,6 @@
                 0,
                 "-8%"
               ],
-              "color": "#e5eaf3",
               "fontSize": 30,
               "fontWeight": "bold",
               "formatter": "{value}%"
diff --git a/app/resources/materials/radar-chart.json b/app/resources/materials/radar-chart.json
index b5889a2..7bff14c 100644
--- a/app/resources/materials/radar-chart.json
+++ b/app/resources/materials/radar-chart.json
@@ -98,7 +98,8 @@
             "维度颜色",
             "指标文字颜色"
           ],
-          "panel": false
+          "panel": false,
+          "themed": true
         },
         {
           "path": "props.option.radar.axisName.fontSize",
@@ -209,17 +210,13 @@
           "left": "center",
           "itemWidth": 12,
           "itemHeight": 8,
-          "show": true,
-          "textStyle": {
-            "color": "#cfd3dc"
-          }
+          "show": true
         },
         "title": {
           "text": "店铺服务评分",
           "top": 8,
           "left": "center",
           "textStyle": {
-            "color": "#e5eaf3",
             "fontSize": 16
           }
         },
@@ -251,28 +248,7 @@
               "name": "售后保障",
               "max": 100
             }
-          ],
-          "axisName": {
-            "color": "#cfd3dc"
-          },
-          "splitLine": {
-            "lineStyle": {
-              "color": "rgba(255, 255, 255, 0.12)"
-            }
-          },
-          "splitArea": {
-            "areaStyle": {
-              "color": [
-                "rgba(255, 255, 255, 0.03)",
-                "rgba(255, 255, 255, 0.06)"
-              ]
-            }
-          },
-          "axisLine": {
-            "lineStyle": {
-              "color": "rgba(255, 255, 255, 0.16)"
-            }
-          }
+          ]
         },
         "dataset": {
           "source": [
diff --git a/app/resources/materials/ring-chart.json b/app/resources/materials/ring-chart.json
index d5e11e1..81c0160 100644
--- a/app/resources/materials/ring-chart.json
+++ b/app/resources/materials/ring-chart.json
@@ -107,17 +107,13 @@
           "left": "center",
           "itemWidth": 12,
           "itemHeight": 8,
-          "show": true,
-          "textStyle": {
-            "color": "#cfd3dc"
-          }
+          "show": true
         },
         "title": {
           "text": "设备占比",
           "top": 8,
           "left": "center",
           "textStyle": {
-            "color": "#e5eaf3",
             "fontSize": 16
           }
         },
@@ -157,14 +153,6 @@
               "62%"
             ],
             "avoidLabelOverlap": true,
-            "label": {
-              "color": "#cfd3dc"
-            },
-            "labelLine": {
-              "lineStyle": {
-                "color": "#a3a6ad"
-              }
-            },
             "encode": {
               "itemName": "device",
               "value": "value"
diff --git a/app/resources/materials/rose-chart.json b/app/resources/materials/rose-chart.json
index 2b90653..d5137eb 100644
--- a/app/resources/materials/rose-chart.json
+++ b/app/resources/materials/rose-chart.json
@@ -129,17 +129,13 @@
           "left": "center",
           "itemWidth": 12,
           "itemHeight": 8,
-          "show": true,
-          "textStyle": {
-            "color": "#cfd3dc"
-          }
+          "show": true
         },
         "title": {
           "text": "区域销售分布",
           "top": 8,
           "left": "center",
           "textStyle": {
-            "color": "#e5eaf3",
             "fontSize": 16
           }
         },
@@ -190,14 +186,6 @@
             "itemStyle": {
               "borderRadius": 4
             },
-            "label": {
-              "color": "#cfd3dc"
-            },
-            "labelLine": {
-              "lineStyle": {
-                "color": "#a3a6ad"
-              }
-            },
             "encode": {
               "itemName": "region",
               "value": "value"
diff --git a/app/resources/materials/scatter-chart.json b/app/resources/materials/scatter-chart.json
index c65b743..3895ff7 100644
--- a/app/resources/materials/scatter-chart.json
+++ b/app/resources/materials/scatter-chart.json
@@ -124,17 +124,13 @@
           "left": "center",
           "itemWidth": 12,
           "itemHeight": 8,
-          "show": true,
-          "textStyle": {
-            "color": "#cfd3dc"
-          }
+          "show": true
         },
         "title": {
           "text": "访客数与销售额",
           "top": 8,
           "left": "center",
           "textStyle": {
-            "color": "#e5eaf3",
             "fontSize": 16
           }
         },
@@ -185,31 +181,10 @@
           "containLabel": true
         },
         "xAxis": {
-          "type": "value",
-          "axisLine": {
-            "lineStyle": {
-              "color": "#4c4d4f"
-            }
-          },
-          "axisLabel": {
-            "color": "#cfd3dc"
-          },
-          "splitLine": {
-            "lineStyle": {
-              "color": "rgba(255, 255, 255, 0.08)"
-            }
-          }
+          "type": "value"
         },
         "yAxis": {
-          "type": "value",
-          "axisLabel": {
-            "color": "#cfd3dc"
-          },
-          "splitLine": {
-            "lineStyle": {
-              "color": "rgba(255, 255, 255, 0.08)"
-            }
-          }
+          "type": "value"
         },
         "series": [
           {
diff --git a/app/resources/materials/stacked-bar-chart.json b/app/resources/materials/stacked-bar-chart.json
index ff6a21e..248db05 100644
--- a/app/resources/materials/stacked-bar-chart.json
+++ b/app/resources/materials/stacked-bar-chart.json
@@ -210,17 +210,13 @@
           "left": "center",
           "itemWidth": 12,
           "itemHeight": 8,
-          "show": true,
-          "textStyle": {
-            "color": "#cfd3dc"
-          }
+          "show": true
         },
         "title": {
           "text": "各渠道月度销售额",
           "top": 8,
           "left": "center",
           "textStyle": {
-            "color": "#e5eaf3",
             "fontSize": 16
           }
         },
@@ -278,26 +274,10 @@
           "containLabel": true
         },
         "xAxis": {
-          "type": "category",
-          "axisLine": {
-            "lineStyle": {
-              "color": "#4c4d4f"
-            }
-          },
-          "axisLabel": {
-            "color": "#cfd3dc"
-          }
+          "type": "category"
         },
         "yAxis": {
-          "type": "value",
-          "axisLabel": {
-            "color": "#cfd3dc"
-          },
-          "splitLine": {
-            "lineStyle": {
-              "color": "rgba(255, 255, 255, 0.08)"
-            }
-          }
+          "type": "value"
         },
         "series": [
           {
diff --git a/app/resources/materials/stat-card.json b/app/resources/materials/stat-card.json
new file mode 100644
index 0000000..6990a57
--- /dev/null
+++ b/app/resources/materials/stat-card.json
@@ -0,0 +1,579 @@
+{
+  "order": 17,
+  "key": "stat-card",
+  "type": "stat-card",
+  "name": "指标卡",
+  "description": "突出显示一个关键数字（如销售额、订单数、转化率），可带前后缀、万/亿换算、环比同比等对比和涨跌颜色，以及迷你趋势线",
+  "tags": [
+    "info",
+    "指标卡",
+    "KPI",
+    "数字",
+    "统计",
+    "stat"
+  ],
+  "renderer": "stat",
+  "group": "info",
+  "icon": "solar:graph-up-bold",
+  "sample_data": true,
+  "usage_notes": [
+    "默认数值仅用于演示，不是真实业务数据",
+    "一个指标卡只显示一个指标，多个指标用多个指标卡并排",
+    "百分比指标写成百分数，例如 4.2 表示 4.2%，后缀写 %",
+    "对比的数值是变化量：正数上升、负数下降，前端按正负显示箭头；百分比变化写百分数，比率指标的变化后缀写“个百分点”",
+    "成本、退款率、投诉量等越低越好的指标把 downIsGood 设为 true，涨跌颜色随之反过来",
+    "数值、对比的变化量和趋势数据可以写 $query：数值和变化量的结果要一行一列，趋势数据只选一列",
+    "迷你趋势线的 trend.data 是按时间先后排列的一组数字；trend.show 设为 true 才显示",
+    "前缀、后缀、说明为空字符串时不显示；对比用 show 控制是否显示"
+  ],
+  "field_groups": [
+    "node-base",
+    {
+      "key": "stat-content",
+      "label": "指标",
+      "description": "指标名、数值、前后缀和数值下方的补充说明",
+      "fields": [
+        {
+          "path": "props.title",
+          "label": "指标名",
+          "description": "显示在数值上方的指标名称，是用户在大屏上看到的卡片名字",
+          "value_type": "string",
+          "aliases": [
+            "标题",
+            "名称",
+            "指标名称",
+            "卡片标题"
+          ]
+        },
+        {
+          "path": "props.value",
+          "label": "数值",
+          "description": "指标的数值，写原始数字；万/亿换算、小数位和千分位由数值格式控制",
+          "value_type": "number",
+          "aliases": [
+            "数字",
+            "指标值",
+            "数据"
+          ]
+        },
+        {
+          "path": "props.prefix",
+          "label": "前缀",
+          "description": "数值前面的符号，例如 ¥；为空时不显示",
+          "value_type": "string",
+          "aliases": [
+            "货币符号",
+            "符号"
+          ]
+        },
+        {
+          "path": "props.suffix",
+          "label": "后缀",
+          "description": "数值后面的单位，例如 %、单、人；为空时不显示",
+          "value_type": "string",
+          "aliases": [
+            "单位"
+          ]
+        },
+        {
+          "path": "props.detail",
+          "label": "说明",
+          "description": "数值下方的一行补充说明，例如“目标完成率 86%”；为空时不显示",
+          "value_type": "string",
+          "aliases": [
+            "补充说明",
+            "备注",
+            "副标题",
+            "描述"
+          ]
+        }
+      ]
+    },
+    {
+      "key": "stat-format",
+      "label": "数值格式",
+      "description": "数值的万/亿换算、小数位数、千分位和数字滚动动画",
+      "fields": [
+        {
+          "path": "props.scale",
+          "label": "大数单位",
+          "description": "数值换算成万或亿后显示，单位字紧跟在数值后面、后缀前面；换算后至少保留三位有效数字",
+          "value_type": "enum",
+          "options": [
+            {
+              "value": "none",
+              "label": "原值",
+              "description": "不换算"
+            },
+            {
+              "value": "auto",
+              "label": "自动",
+              "description": "1 亿及以上显示为亿，10 万及以上显示为万，更小的显示完整数字"
+            },
+            {
+              "value": "wan",
+              "label": "万"
+            },
+            {
+              "value": "yi",
+              "label": "亿"
+            }
+          ],
+          "aliases": [
+            "单位换算",
+            "万元",
+            "亿元",
+            "数量级"
+          ]
+        },
+        {
+          "path": "props.precision",
+          "label": "小数位",
+          "description": "最多保留的小数位数，末尾的 0 不显示",
+          "value_type": "integer",
+          "minimum": 0,
+          "maximum": 4,
+          "aliases": [
+            "精度",
+            "小数位数",
+            "保留几位小数"
+          ]
+        },
+        {
+          "path": "props.separator",
+          "label": "千分位",
+          "description": "整数部分是否每三位加逗号，例如 8,420",
+          "value_type": "boolean",
+          "aliases": [
+            "千分位分隔符",
+            "逗号"
+          ]
+        },
+        {
+          "path": "props.animate",
+          "label": "数字动画",
+          "description": "数值变化时从旧值滚动到新值",
+          "value_type": "boolean",
+          "aliases": [
+            "滚动动画",
+            "动画",
+            "数字滚动"
+          ]
+        }
+      ]
+    },
+    {
+      "key": "stat-compare",
+      "label": "对比",
+      "description": "数值下方最多两项对比（如环比、同比），以及涨跌对应的好坏颜色",
+      "fields": [
+        {
+          "path": "props.downIsGood",
+          "label": "下降为好",
+          "description": "指标越低越好时开启（成本、退款率等），下降显示好的颜色、上升显示坏的颜色",
+          "value_type": "boolean",
+          "aliases": [
+            "越低越好",
+            "反转涨跌颜色",
+            "涨跌颜色反转"
+          ]
+        },
+        {
+          "path": "props.compare.show",
+          "label": "显示对比1",
+          "description": "是否显示第一项对比",
+          "value_type": "boolean",
+          "aliases": [
+            "显示环比",
+            "隐藏环比",
+            "显示对比"
+          ]
+        },
+        {
+          "path": "props.compare.label",
+          "label": "对比1名称",
+          "description": "第一项对比的名称，例如 环比、较上月",
+          "value_type": "string",
+          "aliases": [
+            "环比名称",
+            "对比名称"
+          ]
+        },
+        {
+          "path": "props.compare.value",
+          "label": "对比1数值",
+          "description": "第一项对比的变化量，正数上升、负数下降，例如 12.5 配合后缀 % 显示为上升 12.5%",
+          "value_type": "number",
+          "aliases": [
+            "环比",
+            "环比数值",
+            "增长率",
+            "涨幅",
+            "变化"
+          ]
+        },
+        {
+          "path": "props.compare.suffix",
+          "label": "对比1后缀",
+          "description": "第一项对比数值后的单位，例如 %、个百分点；为空时不显示",
+          "value_type": "string",
+          "aliases": [
+            "环比单位"
+          ]
+        },
+        {
+          "path": "props.compare2.show",
+          "label": "显示对比2",
+          "description": "是否显示第二项对比",
+          "value_type": "boolean",
+          "aliases": [
+            "显示同比",
+            "隐藏同比"
+          ]
+        },
+        {
+          "path": "props.compare2.label",
+          "label": "对比2名称",
+          "description": "第二项对比的名称，例如 同比、较目标",
+          "value_type": "string",
+          "aliases": [
+            "同比名称"
+          ]
+        },
+        {
+          "path": "props.compare2.value",
+          "label": "对比2数值",
+          "description": "第二项对比的变化量，正数上升、负数下降",
+          "value_type": "number",
+          "aliases": [
+            "同比",
+            "同比数值"
+          ]
+        },
+        {
+          "path": "props.compare2.suffix",
+          "label": "对比2后缀",
+          "description": "第二项对比数值后的单位，例如 %、个百分点；为空时不显示",
+          "value_type": "string",
+          "aliases": [
+            "同比单位"
+          ]
+        }
+      ]
+    },
+    {
+      "key": "stat-trend",
+      "label": "趋势线",
+      "description": "卡片上的迷你趋势线：只看走势，不显示坐标轴和数值",
+      "fields": [
+        {
+          "path": "props.trend.show",
+          "label": "显示趋势线",
+          "description": "是否显示迷你趋势线",
+          "value_type": "boolean",
+          "aliases": [
+            "迷你图",
+            "迷你趋势线",
+            "走势图",
+            "sparkline",
+            "隐藏趋势线"
+          ]
+        },
+        {
+          "path": "props.trend.type",
+          "label": "趋势图类型",
+          "description": "迷你趋势线的画法",
+          "value_type": "enum",
+          "options": [
+            {
+              "value": "line",
+              "label": "折线"
+            },
+            {
+              "value": "area",
+              "label": "面积"
+            },
+            {
+              "value": "bar",
+              "label": "柱状"
+            }
+          ],
+          "aliases": [
+            "趋势线样式",
+            "迷你图类型"
+          ]
+        },
+        {
+          "path": "props.trend.position",
+          "label": "趋势线位置",
+          "description": "迷你趋势线放在哪里",
+          "value_type": "enum",
+          "options": [
+            {
+              "value": "right",
+              "label": "数值右侧",
+              "description": "卡片右侧约四成宽度"
+            },
+            {
+              "value": "bottom",
+              "label": "底部背景",
+              "description": "铺满卡片底部，半透明地衬在文字后面"
+            }
+          ],
+          "aliases": [
+            "迷你图位置"
+          ]
+        },
+        {
+          "path": "props.trend.data",
+          "label": "趋势数据",
+          "description": "按时间先后排列的数值，例如近 6 个月每月的销售额；6~12 个点为宜",
+          "value_type": "array",
+          "item_type": "number",
+          "panel": false,
+          "aliases": [
+            "走势数据",
+            "迷你图数据",
+            "趋势"
+          ]
+        },
+        {
+          "path": "style.trendColor",
+          "label": "趋势线色",
+          "description": "迷你趋势线的颜色，面积图的填充由它渐变到透明",
+          "value_type": "color",
+          "aliases": [
+            "迷你图颜色",
+            "走势颜色"
+          ]
+        }
+      ]
+    },
+    {
+      "key": "stat-style",
+      "label": "样式",
+      "description": "对齐方式、指标名和数值的颜色字号、好坏颜色、卡片背景和边框",
+      "fields": [
+        {
+          "path": "style.textAlign",
+          "label": "对齐",
+          "description": "卡片内容的水平位置",
+          "value_type": "enum",
+          "options": [
+            {
+              "value": "left",
+              "label": "左对齐"
+            },
+            {
+              "value": "center",
+              "label": "居中"
+            },
+            {
+              "value": "right",
+              "label": "右对齐"
+            }
+          ],
+          "aliases": [
+            "水平对齐",
+            "对齐方式"
+          ]
+        },
+        {
+          "path": "style.titleColor",
+          "label": "指标名色",
+          "description": "指标名的颜色，对比名称和说明也用这个颜色",
+          "value_type": "color",
+          "aliases": [
+            "标题颜色",
+            "名称颜色"
+          ],
+          "themed": true
+        },
+        {
+          "path": "style.titleFontSize",
+          "label": "指标名字号",
+          "description": "指标名的文字大小",
+          "value_type": "number",
+          "minimum": 8,
+          "maximum": 72,
+          "unit": "px",
+          "aliases": [
+            "标题字号",
+            "标题大小"
+          ]
+        },
+        {
+          "path": "style.valueColor",
+          "label": "数值色",
+          "description": "数值、前缀和后缀的颜色",
+          "value_type": "color",
+          "aliases": [
+            "数字颜色",
+            "数值颜色"
+          ],
+          "themed": true
+        },
+        {
+          "path": "style.valueFontSize",
+          "label": "数值字号",
+          "description": "数值的文字大小，前后缀按比例缩小",
+          "value_type": "number",
+          "minimum": 12,
+          "maximum": 200,
+          "unit": "px",
+          "aliases": [
+            "数字大小",
+            "数值大小",
+            "数字字号"
+          ]
+        },
+        {
+          "path": "style.goodColor",
+          "label": "向好色",
+          "description": "对比向好时的颜色：默认上升用它，开启下降为好后下降用它",
+          "value_type": "color",
+          "aliases": [
+            "上涨颜色",
+            "增长颜色",
+            "正向颜色"
+          ]
+        },
+        {
+          "path": "style.badColor",
+          "label": "变差色",
+          "description": "对比变差时的颜色：默认下降用它，开启下降为好后上升用它",
+          "value_type": "color",
+          "aliases": [
+            "下跌颜色",
+            "下降颜色",
+            "负向颜色"
+          ]
+        },
+        {
+          "path": "style.backgroundColor",
+          "label": "背景色",
+          "description": "卡片的背景颜色",
+          "value_type": "color",
+          "aliases": [
+            "背景颜色",
+            "底色",
+            "卡片颜色"
+          ],
+          "themed": true
+        },
+        {
+          "path": "style.borderColor",
+          "label": "边框色",
+          "description": "卡片 1px 边框的颜色，设为 transparent 不显示边框",
+          "value_type": "color",
+          "aliases": [
+            "边框颜色",
+            "描边颜色"
+          ],
+          "themed": true
+        },
+        {
+          "path": "style.borderRadius",
+          "label": "圆角",
+          "description": "卡片四角的圆角半径",
+          "value_type": "number",
+          "minimum": 0,
+          "maximum": 100,
+          "unit": "px",
+          "aliases": [
+            "圆角大小",
+            "边角"
+          ]
+        }
+      ]
+    }
+  ],
+  "eventOptions": [
+    {
+      "label": "点击事件",
+      "value": "click"
+    },
+    {
+      "label": "双击事件",
+      "value": "dblclick"
+    },
+    {
+      "label": "鼠标进入事件",
+      "value": "mouseenter"
+    },
+    {
+      "label": "鼠标离开事件",
+      "value": "mouseleave"
+    },
+    {
+      "label": "鼠标按下事件",
+      "value": "mousedown"
+    },
+    {
+      "label": "鼠标抬起事件",
+      "value": "mouseup"
+    },
+    {
+      "label": "鼠标移动事件",
+      "value": "mousemove"
+    },
+    {
+      "label": "鼠标滚轮事件",
+      "value": "mousewheel"
+    },
+    {
+      "label": "生命周期事件",
+      "value": "vnodeMounted"
+    }
+  ],
+  "schema": {
+    "type": "stat-card",
+    "name": "指标卡",
+    "layout": {
+      "x": 0,
+      "y": 0,
+      "width": 320,
+      "height": 150
+    },
+    "props": {
+      "title": "销售额",
+      "value": 1286000,
+      "prefix": "",
+      "suffix": "",
+      "detail": "",
+      "scale": "auto",
+      "precision": 2,
+      "separator": true,
+      "animate": true,
+      "downIsGood": false,
+      "compare": {
+        "show": false,
+        "label": "环比",
+        "value": 0,
+        "suffix": "%"
+      },
+      "compare2": {
+        "show": false,
+        "label": "同比",
+        "value": 0,
+        "suffix": "%"
+      },
+      "trend": {
+        "show": false,
+        "type": "area",
+        "position": "right",
+        "data": []
+      }
+    },
+    "style": {
+      "textAlign": "left",
+      "titleFontSize": 14,
+      "valueFontSize": 32,
+      "goodColor": "#67c23a",
+      "badColor": "#f56c6c",
+      "borderRadius": 8,
+      "trendColor": "#409eff"
+    },
+    "events": []
+  }
+}
diff --git a/app/resources/materials/text.json b/app/resources/materials/text.json
index b0cc494..79ea97f 100644
--- a/app/resources/materials/text.json
+++ b/app/resources/materials/text.json
@@ -50,7 +50,8 @@
           "aliases": [
             "文字颜色",
             "字体颜色"
-          ]
+          ],
+          "themed": true
         },
         {
           "path": "style.fontSize",
@@ -196,7 +197,6 @@
       "content": "电商运营数据看板"
     },
     "style": {
-      "color": "#e5eaf3",
       "fontSize": 16,
       "textAlign": "center",
       "alignItems": "center"