feat: 新增图表独立配置混合

src/views/chart/ContentCharts/components/ItemBox/index.vue

@@ -9,7 +9,7 @@
       @dragstart="handleDragStart($event, item)"
     >
       <div class="list-header">
-        <AppleControlBtn :mini="true" :disabled="true"></AppleControlBtn>
+        <MacOsControlBtn :mini="true" :disabled="true"></MacOsControlBtn>
         <n-text class="list-header-text" depth="3">{{ item.title }}</n-text>
       </div>
       <div class="list-center go-flex-center">
@@ -26,7 +26,8 @@
 </template>
 
 <script setup lang="ts">
-import { AppleControlBtn } from '@/components/AppleControlBtn/index'
+import { PropType } from 'vue'
+import { MacOsControlBtn } from '@/components/MacOsControlBtn/index'
 import { requireFallbackImg, componentInstall } from '@/utils'
 import { DragKeyEnum } from '@/enums/editPageEnum'
 import { ConfigType } from '@/packages/index.d'
@@ -34,13 +35,14 @@ import omit from 'lodash/omit'
 
 defineProps({
   menuOptions: {
-    type: Array,
+    type: Array as PropType<ConfigType[]>,
     default: () => []
   }
 })
 
 // 拖拽处理
 const handleDragStart = (e: DragEvent, item: ConfigType) => {
+  // 动态注册图表组件
   componentInstall(item.key, item.node)
   // 将配置项绑定到拖拽属性上
   e!.dataTransfer!.setData(DragKeyEnum.DROG_KEY, JSON.stringify(omit(item, ['node', 'image'])))

src/views/chart/ContentCharts/hooks/useAside.hook.ts

@@ -17,12 +17,12 @@ const {
 
 // 图表
 const { getPackagesList } = usePackagesStore()
-const menuOptions = shallowReactive<{
+const menuOptions:{
   key: string
   icon: ReturnType<typeof renderIcon>
   label: ReturnType<typeof renderLang>
   list: PackagesType
-}[]>([])
+}[] = []
 
 const packagesListObj = {
   [PackagesCategoryEnum.CHARTS]: {

src/views/chart/ContentCharts/index.vue

@@ -43,7 +43,6 @@
 </template>
 
 <script setup lang="ts">
-import { reactive, ref, toRefs } from 'vue'
 import { ContentBox } from '../ContentBox/index'
 import { OptionContent } from './components/OptionContent'
 import {

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

@@ -1,5 +1,6 @@
 <template>
   <div class="go-chart-content-details" v-if="targetData">
+    <!-- 名称 -->
     <SettingItemBox name="名称">
       <n-input
         type="text"
@@ -10,7 +11,11 @@
         v-model:value="targetData.chartConfig.title"
       />
     </SettingItemBox>
+    <!-- 位置 -->
     <PositionSetting :chartAttr="targetData.attr" />
+    <!-- 自定义配置项 -->
+    <component :is="targetData.chartConfig.conNode()" :optionData="targetData.option"></component>
+    <!-- 全局设置 --> 
     <GlobalSetting :optionData="targetData.option" :in-chart="true" />
   </div>
 </template>

src/views/chart/ContentConfigurations/index.ts

@@ -0,0 +1,3 @@
+import ContentConfigurations from './index.vue'
+
+export { ContentConfigurations }

src/views/chart/ContentDetails/index.ts

@@ -1,3 +0,0 @@
-import ContentDetails from './index.vue'
-
-export { ContentDetails }

src/views/chart/ContentEdit/components/EditShapeBox/index.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, PropType, h } from 'vue';
+import { ref, computed, PropType } from 'vue';
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { CreateComponentType } from '@/packages/index.d'

src/views/chart/HeaderLeftBtn/index.vue

@@ -61,7 +61,7 @@ const btnList = reactive<ItemType[]>([
 ])
 
 
-// store 描述的是展示的值，所以和 ContentDetails 的 collapsed 是相反的
+// store 描述的是展示的值，所以和 ContentConfigurations 的 collapsed 是相反的
 const styleHandle = (item: ItemType) => {
   if (item.key === ChartLayoutStoreEnum.DETAILS) {
     return item.select ? '' : 'success'

src/views/chart/index.vue

@@ -16,7 +16,7 @@
       <n-layout-content content-style="overflow:hidden; display: flex">
         <ContentCharts />
         <ContentLayers />
-        <ContentDetails />
+        <ContentConfigurations />
       </n-layout-content>
     </n-layout>
   </div>
@@ -60,8 +60,8 @@ const ContentLayers = loadAsyncComponent(() =>
 const ContentCharts = loadAsyncComponent(() =>
   import('./ContentCharts/index.vue')
 )
-const ContentDetails = loadAsyncComponent(() =>
-  import('./ContentDetails/index.vue')
+const ContentConfigurations = loadAsyncComponent(() =>
+  import('./ContentConfigurations/index.vue')
 )
 
 // 右键