feat: 新增图表位置处理

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 = {