feat: 新增组件重命名

src/components/ChartItemSetting/GlobalSetting.vue

@@ -257,7 +257,6 @@ const props = defineProps({
   }
 })
 
-console.log(props.data)
 const { title, xAxis, yAxis, legend } = toRefs(props.data)
 </script>
 

src/components/ChartItemSetting/SettingItemBox.vue

@@ -25,6 +25,7 @@ $leftWidth: 60px;
   .item-left {
     width: $leftWidth;
     text-align: left;
+    margin-top: 4px;
     margin-left: 10px;
     font-size: 12px;
   }

src/views/chart/ContentDetails/components/CanvasPage/components/ChartDataSetting/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <h1>全局接口配置</h1>
+</template>
+
+<script setup lang="ts">
+ 
+</script>

src/views/chart/ContentDetails/components/CanvasPage/components/ChartThemSetting/index.vue

@@ -1,11 +0,0 @@
-<template>
-  <GlobalSetting :data="chartThemeSetting" />
-</template>
-
-<script setup lang="ts">
-import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { GlobalSetting } from '@/components/ChartItemSetting/index'
-
-const chartEditStoreStore = useChartEditStoreStore()
-const { chartThemeSetting } = chartEditStoreStore.getEditCanvasConfig
-</script>

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

@@ -128,8 +128,8 @@ const switchSelectColorLoading = ref(false)
 const ChartThemeColor = loadAsyncComponent(() =>
   import('./components/ChartThemeColor/index.vue')
 )
-const ChartThemSetting = loadAsyncComponent(() =>
-  import('./components/ChartThemSetting/index.vue')
+const ChartDataSetting = loadAsyncComponent(() =>
+  import('./components/ChartDataSetting/index.vue')
 )
 
 // 页面设置
@@ -153,9 +153,9 @@ const globalTabList = [
   },
   {
     key: 'ChartSysSetting',
-    title: '全局图表',
+    title: '数据配置',
     icon: ZAxisIcon,
-    render: ChartThemSetting
+    render: ChartDataSetting
   }
 ]
 

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

@@ -1,26 +1,35 @@
 <template>
-  <div class="go-chart-content-details">
-    <GlobalSetting
-      v-if="targetData"
-      :data="targetData.option"
-      :in-chart="true"
-    />
+  <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>
+    <GlobalSetting :data="targetData.option" :in-chart="true" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, Ref } from 'vue'
 import { loadAsyncComponent } from '@/utils'
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { GlobalSetting } from '@/components/ChartItemSetting/index'
 import { CreateComponentType } from '@/packages/index.d'
+import { SettingItemBox } from '@/components/ChartItemSetting/index'
 
 const GlobalSettingCom = loadAsyncComponent(() =>
   import('@/components/ChartItemSetting/index')
 )
 const chartEditStoreStore = useChartEditStoreStore()
 
-const targetData = computed(() => {
+const targetData: Ref<CreateComponentType> = computed(() => {
   const list = chartEditStoreStore.getComponentList
   const targetIndex = chartEditStoreStore.fetchTargetIndex()
   return list[targetIndex]
@@ -29,5 +38,8 @@ const targetData = computed(() => {
 
 <style lang="scss" scoped>
 @include go('chart-content-details') {
+  .chart-config {
+    padding: 20px 0;
+  }
 }
 </style>

src/views/chart/ContentLayers/components/ListItem/index.vue

@@ -13,7 +13,7 @@
       />
       <n-ellipsis>
         <n-text class="list-text">
-          {{ title }}
+          {{ props.componentData.chartConfig.title }}
         </n-text>
       </n-ellipsis>
     </div>
@@ -39,7 +39,7 @@ const props = defineProps({
   }
 })
 
-const { image, title } = toRefs(props.componentData.chartConfig)
+const { image } = toRefs(props.componentData.chartConfig)
 
 // 计算当前选中目标
 const select = computed(() => {