fix: 新增主题色配置

src/components/ChartItemSetting/CollapseItem.vue

@@ -1,9 +1,11 @@
 <template>
-  <n-divider style="margin: 10px 0" />
+  <n-divider style="margin: 10px 0;" />
-  <n-collapse arrow-placement="right" default-expanded-names="1">
+  <n-collapse arrow-placement="right">
     <!-- 右侧 -->
     <template #header-extra>
-      <slot name="header" />
+      <div @click="click">
+        <slot name="header" />
+      </div>
     </template>
 
     <n-collapse-item :title="name" name="1">
@@ -19,4 +21,8 @@ defineProps({
     required: true
   }
 })
+const click = (e:MouseEvent) => {
+  e.preventDefault()
+  e.stopPropagation()
+}
 </script>

src/components/ChartItemSetting/GlobalSetting.vue

@@ -1,22 +1,42 @@
 <template>
   <div class="go-global-setting">
     <CollapseItem name="标题">
+      <template #header>
+        <n-switch v-model:value="title.show" size="small" />
+      </template>
       <SettingItemBox name="标题">
-        <SettingItem width="200">
+        <SettingItem name="颜色">
           <n-color-picker v-model:value="title.textStyle.color" size="small" />
         </SettingItem>
+        <SettingItem name="大小">
+          <n-input-number
+            v-model:value="title.textStyle.fontSize"
+            :min="1"
+            size="small"
+          />
+        </SettingItem>
       </SettingItemBox>
       <SettingItemBox name="副标题">
-        <SettingItem width="200">
+        <SettingItem name="颜色">
           <n-color-picker
             size="small"
             v-model:value="title.subtextStyle.color"
           />
         </SettingItem>
+        <SettingItem name="大小">
+          <n-input-number
+            v-model:value="title.subtextStyle.fontSize"
+            :min="1"
+            size="small"
+          />
+        </SettingItem>
       </SettingItemBox>
     </CollapseItem>
 
     <CollapseItem name="X轴">
+      <template #header>
+        <n-switch v-model:value="xAxis.show" size="small" />
+      </template>
       <SettingItemBox name="名称">
         <SettingItem name="颜色">
           <n-color-picker
@@ -32,10 +52,7 @@
           </n-space>
         </SettingItem>
         <SettingItem name="颜色">
-          <n-color-picker
+          <n-color-picker size="small" v-model:value="xAxis.axisLabel.color" />
-            size="small"
-            v-model:value="xAxis.axisLabel.color"
-          />
         </SettingItem>
       </SettingItemBox>
       <SettingItemBox name="轴线">
@@ -87,15 +104,26 @@
           />
         </SettingItem>
         <SettingItem name="类型">
-          <n-select v-model:value="xAxis.splitLine.lineStyle.type" size="small" :options="axisConf.splitLint.lineStyle.type" />
+          <n-select
+            v-model:value="xAxis.splitLine.lineStyle.type"
+            size="small"
+            :options="axisConf.splitLint.lineStyle.type"
+          />
         </SettingItem>
         <SettingItem name="位置">
-          <n-select v-model:value="xAxis.position" size="small" :options="axisConf.xposition" />
+          <n-select
+            v-model:value="xAxis.position"
+            size="small"
+            :options="axisConf.xposition"
+          />
         </SettingItem>
       </SettingItemBox>
     </CollapseItem>
 
     <CollapseItem name="Y轴">
+      <template #header>
+        <n-switch v-model:value="yAxis.show" size="small" />
+      </template>
       <SettingItemBox name="名称">
         <SettingItem name="颜色">
           <n-color-picker
@@ -104,17 +132,14 @@
           />
         </SettingItem>
       </SettingItemBox>
-       <SettingItemBox name="标签">
+      <SettingItemBox name="标签">
         <SettingItem name="展示">
           <n-space>
             <n-switch v-model:value="yAxis.axisLabel.show" size="small" />
           </n-space>
         </SettingItem>
         <SettingItem name="颜色">
-          <n-color-picker
+          <n-color-picker size="small" v-model:value="yAxis.axisLabel.color" />
-            size="small"
-            v-model:value="yAxis.axisLabel.color"
-          />
         </SettingItem>
       </SettingItemBox>
       <SettingItemBox name="轴线">
@@ -171,15 +196,26 @@
           />
         </SettingItem>
         <SettingItem name="类型">
-          <n-select v-model:value="yAxis.splitLine.lineStyle.type" size="small" :options="axisConf.splitLint.lineStyle.type" />
+          <n-select
+            v-model:value="yAxis.splitLine.lineStyle.type"
+            size="small"
+            :options="axisConf.splitLint.lineStyle.type"
+          />
         </SettingItem>
         <SettingItem name="位置">
-          <n-select v-model:value="yAxis.position" size="small" :options="axisConf.yposition" />
+          <n-select
+            v-model:value="yAxis.position"
+            size="small"
+            :options="axisConf.yposition"
+          />
         </SettingItem>
       </SettingItemBox>
     </CollapseItem>
 
     <CollapseItem name="图例">
+      <template #header>
+        <n-switch v-model:value="legend.show" size="small" />
+      </template>
       <SettingItemBox name="图例文字">
         <SettingItem>
           <n-color-picker size="small" v-model:value="legend.textStyle.color" />

src/settings/chartThemes/global.theme.json

@@ -1,13 +1,17 @@
 {
   "title": {
+    "show": true,
     "textStyle": {
-      "color": "#464646"
+      "color": "#464646",
+      "fontSize": 18
     },
     "subtextStyle": {
-      "color": "#6e7079"
+      "color": "#6e7079",
+      "fontSize": 14
     }
   },
   "xAxis": {
+    "show": true,
     "nameTextStyle": {
       "color": "#B9B8CE"
     },
@@ -37,6 +41,7 @@
     }
   },
   "yAxis": {
+    "show": true,
     "nameTextStyle": {
       "color": "#B9B8CE"
     },
@@ -66,6 +71,7 @@
     }
   },
   "legend": {
+    "show": true,
     "textStyle": {
       "color": "#B9B8CE"
     }