feat: 新增全局测试

src/components/ConfigItemCom/CollapseItem.vue → src/components/ChartItemSetting/CollapseItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <n-divider />
+  <n-divider style="margin: 10px 0" />
   <n-collapse arrow-placement="right" default-expanded-names="1">
     <!-- 右侧 -->
     <template #header-extra>

src/components/ChartItemSetting/GlobalSetting.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="go-global-setting">
+    <CollapseItem name="标题">
+      <SettingItemBox name="标题">
+        <SettingItem width="200">
+          <n-color-picker v-model:value="title.textStyle.color" size="small" />
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="副标题">
+        <SettingItem width="200">
+          <n-color-picker
+            size="small"
+            v-model:value="title.subtextStyle.color"
+          />
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+
+    <CollapseItem name="X轴">
+      <SettingItemBox name="文本">
+        <SettingItem name="颜色">
+          <n-color-picker
+            size="small"
+            v-model:value="xAxis.nameTextStyle.color"
+          />
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="轴线">
+        <SettingItem name="颜色">
+          <n-color-picker
+            v-model:value="xAxis.axisLine.lineStyle.color"
+            size="small"
+          />
+        </SettingItem>
+        <SettingItem name="粗细">
+          <n-input-number
+            v-model:value="xAxis.axisLine.lineStyle.width"
+            :min="1"
+            size="small"
+          />
+        </SettingItem>
+        <SettingItem name="对齐零">
+          <n-space>
+            <n-switch v-model:value="xAxis.axisLine.onZero" size="small" />
+          </n-space>
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="分割线">
+        <SettingItem name="颜色">
+          <n-color-picker
+            v-model:value="xAxis.splitLine.lineStyle.color"
+            size="small"
+          />
+        </SettingItem>
+        <SettingItem name="粗细">
+          <n-input-number
+            v-model:value="xAxis.splitLine.lineStyle.width"
+            :min="1"
+            size="small"
+          />
+        </SettingItem>
+        <SettingItem name="类型">
+          <n-select v-model:value="xAxis.splitLine.lineStyle.type" size="small" :options="axisConf.splitLint.lineStyle.type" />
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+
+    <CollapseItem name="Y轴">
+      <SettingItemBox name="文本">
+        <SettingItem name="颜色">
+          <n-color-picker
+            size="small"
+            v-model:value="yAxis.nameTextStyle.color"
+          />
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="轴线">
+        <SettingItem name="颜色">
+          <n-color-picker
+            v-model:value="yAxis.axisLine.lineStyle.color"
+            size="small"
+          />
+        </SettingItem>
+        <SettingItem name="粗细">
+          <n-input-number
+            v-model:value="yAxis.axisLine.lineStyle.width"
+            :min="1"
+            size="small"
+          />
+        </SettingItem>
+        <SettingItem name="对齐零">
+          <n-space>
+            <n-switch v-model:value="yAxis.axisLine.onZero" size="small" />
+          </n-space>
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="分割线">
+        <SettingItem name="颜色">
+          <n-color-picker
+            v-model:value="yAxis.splitLine.lineStyle.color"
+            size="small"
+          />
+        </SettingItem>
+        <SettingItem name="粗细">
+          <n-input-number
+            v-model:value="yAxis.splitLine.lineStyle.width"
+            :min="1"
+            size="small"
+          />
+        </SettingItem>
+        <SettingItem name="类型">
+          <n-select v-model:value="yAxis.splitLine.lineStyle.type" size="small" :options="axisConf.splitLint.lineStyle.type" />
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+
+    <CollapseItem name="图例">
+      <SettingItemBox name="图例文字">
+        <SettingItem>
+          <n-color-picker size="small" v-model:value="legend.textStyle.color" />
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toRefs, PropType } from 'vue'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+import { axisConf } from '@/packages/chartConfiguration/echarts/index'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/ChartItemSetting/index'
+
+const props = defineProps({
+  data: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const { title, xAxis, yAxis, legend } = toRefs(props.data)
+</script>
+
+<style lang="scss" scoped>
+@include go(global-setting) {
+}
+</style>

src/components/ChartItemSetting/SettingItem.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="go-setting-item" :style="{ width: width + 'px' }">
+    <slot />
+    <n-text class="name" depth="3">{{ name }}</n-text>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  name: {
+    type: String,
+    required: false
+  },
+  width: {
+    type: Number,
+    required: false
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+@include go(setting-item) {
+  display: flex;
+  flex-direction: column;
+  min-width: 110px;
+  text-align: start;
+  margin-bottom: 5px;
+  .name {
+    margin-top: 2px;
+  }
+}
+</style>

src/components/ChartItemSetting/SettingItemBox.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="go-config-item-box">
+    <n-text class="item-left" depth="2">{{ name }}</n-text>
+    <div class="item-right" justify="space-between">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  name: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+$leftWidth: 80px;
+@include go('config-item-box') {
+  position: relative;
+  display: flex;
+  margin-top: 10px;
+  .item-left {
+    width: $leftWidth;
+    text-align: left;
+    margin-left: 10px;
+    font-size: 12px;
+  }
+  .item-right {
+    display: grid;
+    grid-column-gap: 10px;
+    grid-template-columns: 1fr 1fr;
+    width: calc(100% - #{$leftWidth});
+  }
+}
+</style>

src/components/ChartItemSetting/index.ts

@@ -0,0 +1,9 @@
+// 设置项布局
+import SettingItem from './SettingItem.vue'
+import SettingItemBox from './SettingItemBox.vue'
+import CollapseItem from './CollapseItem.vue'
+
+// 全局配置属性通用模板
+import GlobalSetting from './GlobalSetting.vue'
+
+export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting }

src/components/ConfigItemCom/ConfigItem.vue

@@ -1,26 +0,0 @@
-<template>
-  <div
-    v-if="type === 'number'"
-    :style="{ width: width ? width + 'px' : '100%' }"
-  >
-    <slot />
-  </div>
-  <div v-else :style="{ width: `${width}px` }">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  width: {
-    type: Number,
-    required: false
-  },
-  type: {
-    type: String,
-    required: false
-  }
-})
-</script>
-
-<style lang="scss" scoped></style>

src/components/ConfigItemCom/ConfigItemBox.vue

@@ -1,33 +0,0 @@
-<template>
-  <div class="go-config-item-box go-flex-items-center">
-    <n-text class="item-left">{{ name }}</n-text>
-    <n-space class="item-right" justify="space-between">
-      <slot />
-    </n-space>
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  name: {
-    type: String,
-    required: true
-  }
-})
-</script>
-
-<style lang="scss" scoped>
-$leftWidth: 100px;
-@include go('config-item-box') {
-  position: relative;
-  justify-content: flex-start;
-  .item-left {
-    width: $leftWidth;
-    text-align: left;
-    margin-left: 10px;
-  }
-  .item-right {
-    margin-left: 10px;
-  }
-}
-</style>

src/components/ConfigItemCom/GlobalSetting.vue

@@ -1,53 +0,0 @@
-<template>
-  <div class="go-global-setting">
-    <CollapseItem name="标题">
-      <ConfigItemBox name="标题颜色">
-        <ConfigItem :width="200">
-          <n-color-picker
-            v-model:value="title.textStyle.color"
-          />
-        </ConfigItem>
-      </ConfigItemBox>
-      <ConfigItemBox name="副标题颜色">
-        <ConfigItem :width="200">
-          <n-color-picker
-            v-model:value="title.subtextStyle.color"
-          />
-        </ConfigItem>
-      </ConfigItemBox>
-    </CollapseItem>
-    <CollapseItem name="图例">
-      <ConfigItemBox name="图例文字颜色">
-        <ConfigItem :width="200">
-          <n-color-picker
-            v-model:value="legend.textStyle.color"
-          />
-        </ConfigItem>
-      </ConfigItemBox>
-    </CollapseItem>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { toRefs, PropType } from 'vue'
-import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
-import {
-  CollapseItem,
-  ConfigItemBox,
-  ConfigItem
-} from '@/components/ConfigItemCom/index'
-
-const props = defineProps({
-  data: {
-    type: Object as PropType<GlobalThemeJsonType>,
-    required: true
-  }
-})
-
-const { title, legend } = toRefs(props.data)
-</script>
-
-<style lang="scss" scoped>
-@include go(global-setting) {
-}
-</style>

src/components/ConfigItemCom/index.ts

@@ -1,9 +0,0 @@
-// 设置项布局
-import ConfigItem from './ConfigItem.vue'
-import ConfigItemBox from './ConfigItemBox.vue'
-import CollapseItem from './CollapseItem.vue'
-
-// 全局配置属性通用模板
-import GlobalSetting from './GlobalSetting.vue'
-
-export { CollapseItem, ConfigItemBox, ConfigItem, GlobalSetting }

src/packages/chartConfiguration/echarts/axis.ts

@@ -0,0 +1,20 @@
+export const axisConf = {
+  splitLint: {
+    lineStyle: {
+      type: [
+        {
+          label: 'solid',
+          value: 'solid'
+        },
+        {
+          label: 'dashed',
+          value: 'dashed'
+        },
+        {
+          label: 'dotted',
+          value: 'dotted'
+        }
+      ]
+    }
+  }
+}

src/packages/chartConfiguration/echarts/index.ts

@@ -0,0 +1 @@
+export * from './axis'

src/settings/chartThemes/global.theme.json

@@ -16,13 +16,13 @@
         "color": "#B9B8CE",
         "width": 1
       },
-      "onZero": true,
-      "onZeroAxisIndex": null
+      "onZero": true
     },
     "splitLine": {
       "lineStyle": {
         "color": "#484753",
-        "width": 1
+        "width": 1,
+        "type": "solid"
       }
     }
   },
@@ -35,13 +35,13 @@
         "color": "#B9B8CE",
         "width": 1
       },
-      "onZero": true,
-      "onZeroAxisIndex": null
+      "onZero": true
     },
     "splitLine": {
       "lineStyle": {
         "color": "#484753",
-        "width": 1
+        "width": 1,
+        "type": "solid"
       }
     }
   },

src/views/chart/ContentDetails/components/CanvasPage/components/ChartThemSetting/index.vue

@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { GlobalSetting } from '@/components/ConfigItemCom/index'
+import { GlobalSetting } from '@/components/ChartItemSetting/index'
 
 const chartEditStoreStore = useChartEditStoreStore()
 const { chartThemeSetting } = chartEditStoreStore.getEditCanvasConfig