feat: 新增图表位置处理

src/components/ChartItemSetting/GlobalSetting.vue

@@ -1,5 +1,4 @@
 <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" />
@@ -18,10 +17,7 @@
     </SettingItemBox>
     <SettingItemBox name="副标题">
       <SettingItem name="颜色">
-          <n-color-picker
+        <n-color-picker size="small" v-model:value="title.subtextStyle.color" />
-            size="small"
-            v-model:value="title.subtextStyle.color"
-          />
       </SettingItem>
       <SettingItem name="大小">
         <n-input-number
@@ -232,7 +228,6 @@
       </SettingItem>
     </SettingItemBox>
   </CollapseItem>
-  </div>
 </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,6 +1,5 @@
 <template>
   <div class="go-chart-content-details" v-if="targetData">
-    <div class="chart-config">
     <SettingItemBox name="名称">
       <n-input
         type="text"
@@ -11,7 +10,7 @@
         v-model:value="targetData.chartConfig.title"
       />
     </SettingItemBox>
-    </div>
+    <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 CanvasPage = loadAsyncComponent(() =>
-const ChartSetting = loadAsyncComponent(() =>import('./components/ChartSetting/index.vue'))
+  import('./components/CanvasPage/index.vue')
-const ChartData = loadAsyncComponent(() => import('./components/ChartData/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;
+  .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 = PickCreateComponentType<'attr'>
-type AttrType = PickPublicConfigType<'attr'>
 
 export const useComponentStyle = (attr: AttrType, index: number) => {
   const componentStyle = {