feat: 新增图表位置处理

src/components/ChartItemSetting/GlobalSetting.vue

@@ -1,238 +1,233 @@
 <template>
-  <div class="go-global-setting">
-    <CollapseItem v-if="title" name="标题">
-      <template #header>
-        <n-switch v-show="inChart" v-model:value="title.show" size="small" />
-      </template>
-      <SettingItemBox name="标题">
-        <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 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 v-if="title" name="标题">
+    <template #header>
+      <n-switch v-show="inChart" v-model:value="title.show" size="small" />
+    </template>
+    <SettingItemBox name="标题">
+      <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 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 v-if="xAxis" name="X轴">
-      <template #header>
-        <n-switch v-show="inChart" v-model:value="xAxis.show" size="small" />
-      </template>
-      <SettingItemBox name="名称">
-        <SettingItem name="颜色">
-          <n-color-picker
-            size="small"
-            v-model:value="xAxis.nameTextStyle.color"
-          />
-        </SettingItem>
-      </SettingItemBox>
-      <SettingItemBox name="标签">
-        <SettingItem v-show="inChart" name="展示">
-          <n-space>
-            <n-switch v-model:value="xAxis.axisLabel.show" size="small" />
-          </n-space>
-        </SettingItem>
-        <SettingItem name="颜色">
-          <n-color-picker size="small" v-model:value="xAxis.axisLabel.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 v-show="inChart" name="展示">
-          <n-space>
-            <n-switch v-model:value="xAxis.axisTick.show" size="small" />
-          </n-space>
-        </SettingItem>
-        <SettingItem name="长度">
-          <n-input-number
-            v-model:value="xAxis.axisTick.length"
-            :min="1"
-            size="small"
-          />
-        </SettingItem>
-      </SettingItemBox>
-      <SettingItemBox name="分割线">
-        <SettingItem v-show="inChart" name="展示">
-          <n-space>
-            <n-switch v-model:value="xAxis.splitLine.show" size="small" />
-          </n-space>
-        </SettingItem>
-        <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>
-        <SettingItem name="位置">
-          <n-select
-            v-model:value="xAxis.position"
-            size="small"
-            :options="axisConf.xposition"
-          />
-        </SettingItem>
-      </SettingItemBox>
-    </CollapseItem>
+  <CollapseItem v-if="xAxis" name="X轴">
+    <template #header>
+      <n-switch v-show="inChart" v-model:value="xAxis.show" size="small" />
+    </template>
+    <SettingItemBox name="名称">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          v-model:value="xAxis.nameTextStyle.color"
+        />
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="标签">
+      <SettingItem v-show="inChart" name="展示">
+        <n-space>
+          <n-switch v-model:value="xAxis.axisLabel.show" size="small" />
+        </n-space>
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker size="small" v-model:value="xAxis.axisLabel.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 v-show="inChart" name="展示">
+        <n-space>
+          <n-switch v-model:value="xAxis.axisTick.show" size="small" />
+        </n-space>
+      </SettingItem>
+      <SettingItem name="长度">
+        <n-input-number
+          v-model:value="xAxis.axisTick.length"
+          :min="1"
+          size="small"
+        />
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="分割线">
+      <SettingItem v-show="inChart" name="展示">
+        <n-space>
+          <n-switch v-model:value="xAxis.splitLine.show" size="small" />
+        </n-space>
+      </SettingItem>
+      <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>
+      <SettingItem name="位置">
+        <n-select
+          v-model:value="xAxis.position"
+          size="small"
+          :options="axisConf.xposition"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
 
-    <CollapseItem v-if="yAxis" name="Y轴">
-      <template #header>
-        <n-switch v-show="inChart" v-model:value="yAxis.show" size="small" />
-      </template>
-      <SettingItemBox name="名称">
-        <SettingItem name="颜色">
-          <n-color-picker
-            size="small"
-            v-model:value="yAxis.nameTextStyle.color"
-          />
-        </SettingItem>
-      </SettingItemBox>
-      <SettingItemBox name="标签">
-        <SettingItem v-show="inChart" name="展示">
-          <n-space>
-            <n-switch v-model:value="yAxis.axisLabel.show" size="small" />
-          </n-space>
-        </SettingItem>
-        <SettingItem name="颜色">
-          <n-color-picker size="small" v-model:value="yAxis.axisLabel.color" />
-        </SettingItem>
-      </SettingItemBox>
-      <SettingItemBox name="轴线">
-        <SettingItem v-show="inChart" name="展示">
-          <n-space>
-            <n-switch v-model:value="yAxis.axisLine.show" size="small" />
-          </n-space>
-        </SettingItem>
-        <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 v-show="inChart" name="展示">
-          <n-space>
-            <n-switch v-model:value="yAxis.axisTick.show" size="small" />
-          </n-space>
-        </SettingItem>
-        <SettingItem name="长度">
-          <n-input-number
-            v-model:value="yAxis.axisTick.length"
-            :min="1"
-            size="small"
-          />
-        </SettingItem>
-      </SettingItemBox>
-      <SettingItemBox name="分割线">
-        <SettingItem v-show="inChart" name="展示">
-          <n-space>
-            <n-switch v-model:value="yAxis.splitLine.show" size="small" />
-          </n-space>
-        </SettingItem>
-        <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>
-        <SettingItem name="位置">
-          <n-select
-            v-model:value="yAxis.position"
-            size="small"
-            :options="axisConf.yposition"
-          />
-        </SettingItem>
-      </SettingItemBox>
-    </CollapseItem>
+  <CollapseItem v-if="yAxis" name="Y轴">
+    <template #header>
+      <n-switch v-show="inChart" v-model:value="yAxis.show" size="small" />
+    </template>
+    <SettingItemBox name="名称">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          v-model:value="yAxis.nameTextStyle.color"
+        />
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="标签">
+      <SettingItem v-show="inChart" name="展示">
+        <n-space>
+          <n-switch v-model:value="yAxis.axisLabel.show" size="small" />
+        </n-space>
+      </SettingItem>
+      <SettingItem name="颜色">
+        <n-color-picker size="small" v-model:value="yAxis.axisLabel.color" />
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="轴线">
+      <SettingItem v-show="inChart" name="展示">
+        <n-space>
+          <n-switch v-model:value="yAxis.axisLine.show" size="small" />
+        </n-space>
+      </SettingItem>
+      <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 v-show="inChart" name="展示">
+        <n-space>
+          <n-switch v-model:value="yAxis.axisTick.show" size="small" />
+        </n-space>
+      </SettingItem>
+      <SettingItem name="长度">
+        <n-input-number
+          v-model:value="yAxis.axisTick.length"
+          :min="1"
+          size="small"
+        />
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="分割线">
+      <SettingItem v-show="inChart" name="展示">
+        <n-space>
+          <n-switch v-model:value="yAxis.splitLine.show" size="small" />
+        </n-space>
+      </SettingItem>
+      <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>
+      <SettingItem name="位置">
+        <n-select
+          v-model:value="yAxis.position"
+          size="small"
+          :options="axisConf.yposition"
+        />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
 
-    <CollapseItem v-if="legend" name="图例">
-      <template #header>
-        <n-switch v-show="inChart" v-model:value="legend.show" size="small" />
-      </template>
-      <SettingItemBox name="图例文字">
-        <SettingItem>
-          <n-color-picker size="small" v-model:value="legend.textStyle.color" />
-        </SettingItem>
-      </SettingItemBox>
-    </CollapseItem>
-  </div>
+  <CollapseItem v-if="legend" name="图例">
+    <template #header>
+      <n-switch v-show="inChart" v-model:value="legend.show" size="small" />
+    </template>
+    <SettingItemBox name="图例文字">
+      <SettingItem>
+        <n-color-picker size="small" v-model:value="legend.textStyle.color" />
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
 </template>
 
 <script setup lang="ts">
@@ -246,7 +241,7 @@ import {
 } from '@/components/ChartItemSetting/index'
 
 const props = defineProps({
-  optiondata: {
+  optionData: {
     type: Object as PropType<GlobalThemeJsonType>,
     required: true
   },
@@ -258,23 +253,18 @@ const props = defineProps({
 })
 
 const title = computed(() => {
-  return props.optiondata.title
+  return props.optionData.title
 })
 
 const xAxis = computed(() => {
-  return props.optiondata.xAxis
+  return props.optionData.xAxis
 })
 
 const yAxis = computed(() => {
-  return props.optiondata.yAxis
+  return props.optionData.yAxis
 })
 
 const legend = computed(() => {
-  return props.optiondata.legend
+  return props.optionData.legend
 })
 </script>
-
-<style lang="scss" scoped>
-@include go(global-setting) {
-}
-</style>

src/components/ChartItemSetting/PositionSetting.vue

@@ -0,0 +1,37 @@
+<template>
+  <SettingItemBox name="边距">
+    <n-input-number
+      v-model:value="chartAttr.y"
+      :min="0"
+      size="small"
+      placeholder="px"
+    >
+      <template #prefix>
+        <n-text depth="3">上边</n-text>
+      </template>
+    </n-input-number>
+    <n-input-number
+      v-model:value="chartAttr.x"
+      :min="0"
+      size="small"
+      placeholder="px"
+    >
+      <template #prefix>
+        <n-text depth="3">左</n-text>
+      </template>
+    </n-input-number>
+  </SettingItemBox>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { PickCreateComponentType } from '@/packages/index.d'
+import { SettingItemBox } from '@/components/ChartItemSetting/index'
+
+const props = defineProps({
+  chartAttr: {
+    type: Object as PropType<Omit<PickCreateComponentType<'attr'>, 'node'>>,
+    required: true
+  }
+})
+</script>

src/components/ChartItemSetting/SettingItemBox.vue

@@ -21,7 +21,7 @@ $leftWidth: 60px;
 @include go('config-item-box') {
   position: relative;
   display: flex;
-  margin-top: 10px;
+  margin: 20px 0;
   .item-left {
     width: $leftWidth;
     text-align: left;

src/components/ChartItemSetting/index.ts

@@ -5,5 +5,7 @@ import CollapseItem from './CollapseItem.vue'
 
 // 全局配置属性通用模板
 import GlobalSetting from './GlobalSetting.vue'
+// 方向通用模板
+import PositionSetting from './PositionSetting.vue'
 
-export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting }
+export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, PositionSetting }

src/packages/index.d.ts

@@ -25,6 +25,9 @@ export interface CreateComponentType extends PublicConfigType {
   option: GlobalThemeJsonType
 }
 
+// 获取组件实例类中某个key对应value类型的方法
+export type PickCreateComponentType<T extends keyof CreateComponentType> = Pick<CreateComponentType, T>[T]
+
 // 包分类枚举
 export enum PackagesCategoryEnum {
   CHARTS = 'Charts',

src/packages/index.ts

@@ -32,7 +32,6 @@ const packagesInstall = (app: App): void => {
  * @param dropData
  */
 const createComponent = async (dropData: ConfigType) => {
-  console.log(dropData)
   const { category } = dropData
   const key = dropData.key.substring(1)
   const chart = await import(`./components/${dropData.package}/${category}/${key}/config.ts`)

src/settings/chartThemes/global.theme.json

@@ -32,7 +32,7 @@
       "length": 5
     },
     "splitLine": {
-      "show": true,
+      "show": false,
       "lineStyle": {
         "color": "#484753",
         "width": 1,

src/store/modules/chartEditStore/chartEditStore.ts

@@ -130,6 +130,10 @@ export const useChartEditStoreStore = defineStore({
     },
     // * 找到目标 id 数据下标位置
     fetchTargetIndex(): number {
+      if(!this.getTargetChart.selectId) {
+        loadingFinish()
+        return -1
+      }
       const index = this.componentList.findIndex(e => e.id === this.getTargetChart.selectId)
       if (index === -1) {
         loadingError()
@@ -183,7 +187,7 @@ export const useChartEditStoreStore = defineStore({
         dom.style[key] = value
       }
     },
-    // * 移动组件列表位置到两端
+    // * 移动组件列表层级位置到两端
     setBothEnds(isEnd = false, isHistory = true): void {
       try {
         loadingStart()

src/views/chart/ContentDetails/components/ChartSetting/index.vue

@@ -1,17 +1,16 @@
 <template>
   <div class="go-chart-content-details" v-if="targetData">
-    <div class="chart-config">
-      <SettingItemBox name="名称">
-        <n-input
-          type="text"
-          maxlength="6"
-          show-count
-          placeholder="请输入图表名称"
-          size="small"
-          v-model:value="targetData.chartConfig.title"
-        />
-      </SettingItemBox>
-    </div>
+    <SettingItemBox name="名称">
+      <n-input
+        type="text"
+        maxlength="6"
+        show-count
+        placeholder="请输入图表名称"
+        size="small"
+        v-model:value="targetData.chartConfig.title"
+      />
+    </SettingItemBox>
+    <PositionSetting :chartAttr="targetData.attr" />
     <GlobalSetting :optionData="targetData.option" :in-chart="true" />
   </div>
 </template>
@@ -20,7 +19,7 @@
 import { computed, Ref } from 'vue'
 import { loadAsyncComponent } from '@/utils'
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { GlobalSetting } from '@/components/ChartItemSetting/index'
+import { GlobalSetting, PositionSetting } from '@/components/ChartItemSetting/index'
 import { CreateComponentType } from '@/packages/index.d'
 import { SettingItemBox } from '@/components/ChartItemSetting/index'
 
@@ -38,8 +37,5 @@ const targetData: Ref<CreateComponentType> = computed(() => {
 
 <style lang="scss" scoped>
 @include go('chart-content-details') {
-  .chart-config {
-    padding: 20px 0;
-  }
 }
 </style>

src/views/chart/ContentDetails/index.vue

@@ -19,7 +19,7 @@
         :showTop="false"
         :depth="2"
       >
-        <!-- 画布 -->
+        <!-- 页面配置 -->
         <n-tabs
           v-show="!selectTarget"
           class="tabs-box"
@@ -91,9 +91,15 @@ const chartEditStoreStore = useChartEditStoreStore()
 const { ConstructIcon, FlashIcon, DesktopOutlineIcon } = icon.ionicons5
 
 const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue'))
-const CanvasPage = loadAsyncComponent(() =>import('./components/CanvasPage/index.vue'))
-const ChartSetting = loadAsyncComponent(() =>import('./components/ChartSetting/index.vue'))
-const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue'))
+const CanvasPage = loadAsyncComponent(() =>
+  import('./components/CanvasPage/index.vue')
+)
+const ChartSetting = loadAsyncComponent(() =>
+  import('./components/ChartSetting/index.vue')
+)
+const ChartData = loadAsyncComponent(() =>
+  import('./components/ChartData/index.vue')
+)
 
 const collapsed = ref<boolean>(getDetails.value)
 
@@ -151,10 +157,12 @@ const canvasTabList = [
 
 <style lang="scss" scoped>
 @include go(content-layers) {
-  padding: 10px;
   overflow: hidden;
-  .icon-position {
-    padding-top: 2px;
+  .tabs-box {
+    padding: 10px;
+    .icon-position {
+      padding-top: 2px;
+    }
   }
 }
 </style>

src/views/chart/ContentEdit/hooks/useStyle.hook.ts

@@ -1,7 +1,6 @@
-import { PublicConfigType } from '@/packages/index.d'
+import { PickCreateComponentType } from '@/packages/index.d'
 
-type PickPublicConfigType<T extends keyof PublicConfigType> = Pick<PublicConfigType, T>[T]
-type AttrType = PickPublicConfigType<'attr'>
+type AttrType = PickCreateComponentType<'attr'>
 
 export const useComponentStyle = (attr: AttrType, index: number) => {
   const componentStyle = {