fix: 分离配置项里的名称部分数据

src/components/ChartItemSetting/NameSetting.vue

@@ -0,0 +1,26 @@
+<template>
+  <setting-item-box name="名称" :alone="true">
+    <n-input
+      type="text"
+      maxlength="6"
+      show-count
+      placeholder="请输入图表名称"
+      size="small"
+      v-model:value="chartConfig.title"
+    ></n-input>
+  </setting-item-box>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { SettingItemBox } from '@/components/ChartItemSetting/index'
+import { ConfigType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<ConfigType>,
+    required: true
+  },
+})
+
+</script>

src/components/ChartItemSetting/PositionSetting.vue

@@ -92,9 +92,7 @@ const props = defineProps({
     required: true
   },
   chartAttr: {
-    type: Object as PropType<
+    type: Object as PropType<PickCreateComponentType<'attr'>>,
-      Omit<PickCreateComponentType<'attr'>, 'node' | 'conNode'>
-    >,
     required: true
   }
 })

src/components/ChartItemSetting/index.ts

@@ -5,6 +5,8 @@ import CollapseItem from './CollapseItem.vue'
 
 // 全局配置属性
 import GlobalSetting from './GlobalSetting.vue'
+// 名称
+import NameSetting from './NameSetting.vue'
 // 方向
 import PositionSetting from './PositionSetting.vue'
 // 尺寸
@@ -12,4 +14,4 @@ import SizeSetting from './SizeSetting.vue'
 // 样式
 import StylesSetting from './StylesSetting.vue'
 
-export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, PositionSetting, SizeSetting, StylesSetting }
+export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, NameSetting, PositionSetting, SizeSetting, StylesSetting }

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

@@ -8,7 +8,7 @@
           v-model:value="canvasConfig.width"
           :validator="validator"
           @update:value="changeSizeHandle"
-       ></n-input-number>
+        ></n-input-number>
       </n-form-item>
       <n-form-item label="高度">
         <n-input-number
@@ -16,7 +16,7 @@
           v-model:value="canvasConfig.height"
           :validator="validator"
           @update:value="changeSizeHandle"
-       ></n-input-number>
+        ></n-input-number>
       </n-form-item>
     </n-form>
 
@@ -52,7 +52,7 @@
           :showPreview="true"
           :swatches="swatchesColors"
           v-model:value="canvasConfig.background"
-       ></n-color-picker>
+        ></n-color-picker>
       </n-space>
       <n-space>
         <n-text>使用颜色</n-text>
@@ -63,24 +63,12 @@
           :round="false"
           :disabled="!canvasConfig.backgroundImage"
           :onUpdate="switchSelectColorHandle"
-       ></n-switch>
+        ></n-switch>
       </n-space>
       <n-space>
         <n-text>背景</n-text>
-        <n-button
+        <n-button size="small" :disabled="!canvasConfig.backgroundImage" @click="clearImage">清除背景图</n-button>
-          size="small"
+        <n-button size="small" :disabled="!canvasConfig.background" @click="clearColor">清除颜色</n-button>
-          :disabled="!canvasConfig.backgroundImage"
-          @click="clearImage"
-        >
-          清除背景图
-        </n-button>
-        <n-button
-          size="small"
-          :disabled="!canvasConfig.background"
-          @click="clearColor"
-        >
-          清除颜色
-        </n-button>
       </n-space>
     </n-space>
 
@@ -110,6 +98,7 @@
 <script setup lang="ts">
 import { ref, nextTick } from 'vue'
 import { backgroundImageSize } from '@/settings/designSetting'
+import { FileTypeEnum } from '@/enums/fileTypeEnum'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { EditCanvasConfigEnum } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { UploadCustomRequestOptions } from 'naive-ui'
@@ -175,7 +164,7 @@ const beforeUploadHandle = async ({ file }) => {
     )
     return false
   }
-  if (type !== 'image/png' && type !== 'image/jpeg' && type !== 'image/gif') {
+  if (type !== FileTypeEnum.PNG && type !== FileTypeEnum.JPEG && type !== FileTypeEnum.GIF) {
     window['$message'].warning('文件格式不符合，请重新上传！')
     return false
   }
@@ -224,16 +213,7 @@ const switchSelectColorHandle = () => {
 
 // 自定义上传操作
 const customRequest = (options: UploadCustomRequestOptions) => {
-  const {
+  const { file } = options
-    file,
-    data,
-    headers,
-    withCredentials,
-    action,
-    onFinish,
-    onError,
-    onProgress
-  } = options
 
   nextTick(() => {
     if (file.file) {

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

@@ -1,16 +1,7 @@
 <template>
   <div class="go-chart-configurations-setting" v-if="targetData">
     <!-- 名称 -->
-    <setting-item-box name="名称">
+    <name-setting :chartConfig="targetData.chartConfig"></name-setting>
-      <n-input
-        type="text"
-        maxlength="6"
-        show-count
-        placeholder="请输入图表名称"
-        size="small"
-        v-model:value="targetData.chartConfig.title"
-     ></n-input>
-    </setting-item-box>
     <!-- 尺寸 -->
     <size-setting :chartAttr="targetData.attr"></size-setting>
     <!-- 位置 -->
@@ -25,10 +16,8 @@
 </template>
 
 <script setup lang="ts">
-import { GlobalSetting, PositionSetting, SizeSetting, StylesSetting } from '@/components/ChartItemSetting/index'
+import { GlobalSetting, NameSetting, PositionSetting, SizeSetting, StylesSetting } from '@/components/ChartItemSetting/index'
-import { SettingItemBox } from '@/components/ChartItemSetting/index'
 import { useTargetData } from '../hooks/useTargetData.hook'
-
 const { targetData, chartEditStore } = useTargetData()
 
 </script>