feat: 新增定位和style处理

src/views/chart/ContentConfigurations/components/ChartAnimation/index.vue

@@ -54,7 +54,7 @@ const targetData: Ref<CreateComponentType> = computed(() => {
   return list[targetIndex]
 })
 
-// * 选中样式
+// * 选中的动画样式
 const activeIndex = (value: string) => {
   const selectValue = targetData.value.styles.animations
   if (!selectValue.length) return false

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

@@ -14,7 +14,9 @@
     <!-- 尺寸 -->
     <SizeSetting :chartAttr="targetData.attr" />
     <!-- 位置 -->
-    <PositionSetting :chartAttr="targetData.attr" />
+    <PositionSetting :chartAttr="targetData.attr" :canvasConfig="chartEditStore.getEditCanvasConfig"/>
+    <!-- 样式 -->
+    <StylesSetting :chartStyles="targetData.styles" />
     <!-- 自定义配置项 -->
     <component :is="targetData.chartConfig.conKey" :optionData="targetData.option"></component>
     <!-- 全局设置 --> 
@@ -25,7 +27,7 @@
 <script setup lang="ts">
 import { computed, Ref } from 'vue'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { GlobalSetting, PositionSetting, SizeSetting } from '@/components/ChartItemSetting/index'
+import { GlobalSetting, PositionSetting, SizeSetting, StylesSetting } from '@/components/ChartItemSetting/index'
 import { CreateComponentType } from '@/packages/index.d'
 import { SettingItemBox } from '@/components/ChartItemSetting/index'
 

src/views/chart/HeaderRightBtn/index.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import { reactive } from 'vue'
+import { shallowReactive } from 'vue'
 import { renderIcon, fetchPathByName, routerTurnByPath, setLocalStorage, getLocalStorage } from '@/utils'
 import { PreviewEnum } from '@/enums/pageEnum'
 import { StorageEnum } from '@/enums/storageEnum'
@@ -58,7 +58,7 @@ const sendHandle = () => {
   window['$message'].warning('该功能暂未实现（因为压根没有后台）')
 }
 
-const btnList = reactive([
+const btnList = shallowReactive([
   {
     key: '',
     select: true,