feat: 新增尺寸控件

src/components/ChartItemSetting/SizeSetting.vue

@@ -0,0 +1,37 @@
+<template>
+  <SettingItemBox name="尺寸">
+    <n-input-number
+      v-model:value="chartAttr.w"
+      :min="50"
+      size="small"
+      placeholder="px"
+    >
+      <template #prefix>
+        <n-text depth="3">宽度</n-text>
+      </template>
+    </n-input-number>
+    <n-input-number
+      v-model:value="chartAttr.h"
+      :min="50"
+      size="small"
+      placeholder="px"
+    >
+      <template #prefix>
+        <n-text depth="3">高度</n-text>
+      </template>
+    </n-input-number>
+  </SettingItemBox>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { PickCreateComponentType } from '@/packages/index.d'
+import { SettingItemBox } from '@/components/ChartItemSetting/index'
+
+const props = defineProps({
+  chartAttr: {
+    type: Object as PropType<Omit<PickCreateComponentType<'attr'>, 'node'>>,
+    required: true
+  }
+})
+</script>

src/components/ChartItemSetting/index.ts

@@ -3,9 +3,11 @@ import SettingItem from './SettingItem.vue'
 import SettingItemBox from './SettingItemBox.vue'
 import CollapseItem from './CollapseItem.vue'
 
-// 全局配置属性通用模板
+// 全局配置属性
 import GlobalSetting from './GlobalSetting.vue'
-// 方向通用模板
+// 方向
 import PositionSetting from './PositionSetting.vue'
+// 尺寸
+import SizeSetting from './SizeSetting.vue'
 
-export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, PositionSetting }
+export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, PositionSetting, SizeSetting }

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

@@ -11,6 +11,8 @@
         v-model:value="targetData.chartConfig.title"
       />
     </SettingItemBox>
+    <!-- 尺寸 -->
+    <SizeSetting :chartAttr="targetData.attr" />
     <!-- 位置 -->
     <PositionSetting :chartAttr="targetData.attr" />
     <!-- 自定义配置项 -->
@@ -24,7 +26,7 @@
 import { computed, Ref } from 'vue'
 import { loadAsyncComponent } from '@/utils'
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { GlobalSetting, PositionSetting } from '@/components/ChartItemSetting/index'
+import { GlobalSetting, PositionSetting, SizeSetting } from '@/components/ChartItemSetting/index'
 import { CreateComponentType } from '@/packages/index.d'
 import { SettingItemBox } from '@/components/ChartItemSetting/index'