From 19b7853057f1726c9468e6aa3257f5c4657fbc61 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Thu, 3 Mar 2022 10:25:50 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=B0=BA=E5=AF=B8?=
 =?UTF-8?q?=E6=8E=A7=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChartItemSetting/SizeSetting.vue          | 37 +++++++++++++++++++
 src/components/ChartItemSetting/index.ts      |  8 ++--
 .../components/ChartSetting/index.vue         |  4 +-
 3 files changed, 45 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ChartItemSetting/SizeSetting.vue

diff --git a/src/components/ChartItemSetting/SizeSetting.vue b/src/components/ChartItemSetting/SizeSetting.vue
new file mode 100644
index 00000000..6ff8b4b9
--- /dev/null
+++ b/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>
diff --git a/src/components/ChartItemSetting/index.ts b/src/components/ChartItemSetting/index.ts
index c733beb2..ff561729 100644
--- a/src/components/ChartItemSetting/index.ts
+++ b/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 }
diff --git a/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue b/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue
index d41038db..37464d97 100644
--- a/src/views/chart/ContentConfigurations/components/ChartSetting/index.vue
+++ b/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'