feat：新增图片组件，修改文件组件

src/packages/components/Informations/Mores/Image/config.ts

@@ -2,8 +2,15 @@ import { publicConfig } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
 import { ImageConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
+import logo from '@/../public/logo.png'
 
 export const option = {
+  // 图片路径
+  dataset: logo,
+  // 适应方式
+  fit: 'contain',
+  // 圆角
+  borderRadius: 10
 }
 
 export default class Config extends publicConfig implements CreateComponentType

src/packages/components/Informations/Mores/Image/config.vue

@@ -1,6 +1,67 @@
 <template>
+  <collapse-item name="图片" :expanded="true">
+    <setting-item-box name="路径" :alone="true">
+      <setting-item>
+        <n-input v-model:value="optionData.dataset" size="small"></n-input>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="样式">
+      <setting-item name="类型">
+        <n-select
+          v-model:value="optionData.fit"
+          size="small"
+          :options="fitList"
+        ></n-select>
+      </setting-item>
+      <setting-item name="圆角">
+        <n-input-number
+          v-model:value="optionData.borderRadius"
+          size="small"
+          :min="0"
+          placeholder="圆角"
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
 </template>
 
 <script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem,
+} from '@/components/Pages/ChartItemSetting'
 
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true,
+  },
+})
+
+// 适应类型
+const fitList = [
+  {
+    value: 'fill',
+    label: 'fill'
+  },
+  {
+    value: 'contain',
+    label: 'contain'
+  },
+  {
+    value: 'cover',
+    label: 'cover'
+  },
+  {
+    value: 'scale-down',
+    label: 'scale-down'
+  },
+  {
+    value: 'none',
+    label: 'none'
+  },
+]
 </script>

src/packages/components/Informations/Mores/Image/index.vue

@@ -1,13 +1,42 @@
 <template>
-  <div>
-    图片
+  <div class="go-packages-image">
+    <div :style="getStyle(borderRadius)">
+      <n-image
+        :object-fit="fit"
+        preview-disabled
+        :src="dataset"
+        :fallback-src="requireErrorImg()"
+        :width="w"
+        :height="h"
+      ></n-image>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { PropType, computed, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { requireErrorImg } from '@/utils'
 
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true,
+  },
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { dataset, fit, borderRadius } = toRefs(props.chartConfig.option)
+
+const getStyle = (radius: number) => {
+  return {
+    borderRadius: `${radius}px`,
+    overflow: 'hidden',
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-
+.go-packages-image {
+}
 </style>

src/packages/components/Informations/Texts/TextCommon/config.ts

@@ -14,14 +14,19 @@ export const WritingModeObject = {
 }
 
 export const option = {
-  dataset: '我是一个文本',
+  dataset: '我是文本',
   fontSize: 20,
-  fontColor: '#ffffffff',
+  fontColor: '#ffffff',
   paddingX: 10,
   paddingY: 10,
+
+  // 边框
+  borderWidth: 0,
+  borderColor: '#ffffff',
+  borderRadius: 5,
+
   // 字间距
   letterSpacing: 5,
-  borderRadius: 5,
   writingMode: 'horizontal-tb',
   backgroundColor: '#00000000',
 }

src/packages/components/Informations/Texts/TextCommon/config.vue

@@ -1,50 +1,64 @@
 <template>
-  <CollapseItem name="信息" :expanded="true">
-    <SettingItemBox name="文字" :alone="true">
-      <SettingItem>
+  <collapse-item name="信息" :expanded="true">
+    <setting-item-box name="文字" :alone="true">
+      <setting-item>
         <n-input v-model:value="optionData.dataset" size="small"></n-input>
-      </SettingItem>
-    </SettingItemBox>
-  </CollapseItem>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
 
-  <CollapseItem name="样式" :expanded="true">
-    <SettingItemBox name="文字">
-      <SettingItem name="字体大小">
+  <collapse-item name="样式" :expanded="true">
+    <setting-item-box name="文字">
+      <setting-item name="字体大小">
         <n-input-number v-model:value="optionData.fontSize" size="small" placeholder="字体大小"></n-input-number>
-      </SettingItem>
+      </setting-item>
 
-      <SettingItem name="文本方向">
+      <setting-item name="文本方向">
         <n-select v-model:value="optionData.writingMode" size="small" :options="verticalOptions" />
-      </SettingItem>
+      </setting-item>
       
-      <SettingItem name="X轴内边距">
+      <setting-item name="X轴内边距">
         <n-input-number v-model:value="optionData.paddingX" size="small" placeholder="输入内边距"></n-input-number>
-      </SettingItem>
-      <SettingItem name="Y轴内边距">
+      </setting-item>
+      <setting-item name="Y轴内边距">
         <n-input-number v-model:value="optionData.paddingY" size="small" placeholder="输入内边距"></n-input-number>
-      </SettingItem>
-      <SettingItem name="字间距">
+      </setting-item>
+      <setting-item name="字间距">
         <n-input-number v-model:value="optionData.letterSpacing" size="small" placeholder="输入字间距"></n-input-number>
-      </SettingItem>
-      <SettingItem name="颜色">
+      </setting-item>
+      <setting-item name="颜色">
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.fontColor"></n-color-picker>
-      </SettingItem>
-    </SettingItemBox>
-    
-    <SettingItemBox name="背景">
-      <SettingItem name="背景圆角">
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="边框">
+      <setting-item name="宽度">
+        <n-input-number
+          v-model:value="optionData.borderWidth"
+          size="small"
+          :min="0"
+          placeholder="宽度"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.borderColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="圆角">
         <n-input-number
           v-model:value="optionData.borderRadius"
           size="small"
           :min="0"
-          placeholder="背景圆角"
+          placeholder="圆角"
         ></n-input-number>
-      </SettingItem>
-      <SettingItem name="背景颜色">
+      </setting-item>
+    </setting-item-box>
+    
+    <setting-item-box name="背景" :alone="true">
+      <setting-item name="背景颜色">
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.backgroundColor"></n-color-picker>
-      </SettingItem>
-    </SettingItemBox>
-  </CollapseItem>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
 </template>
 
 <script setup lang="ts">

src/packages/components/Informations/Texts/TextCommon/index.vue

@@ -6,8 +6,13 @@
       padding: ${paddingY}px ${paddingX}px;
       font-size: ${fontSize}px;
       letter-spacing: ${letterSpacing}px;
-      border-radius: ${borderRadius}px;
       writing-mode: ${writingMode};
+
+      border-style: solid;
+      border-width: ${borderWidth}px;
+      border-radius: ${borderRadius}px;
+      border-color: ${borderColor};
+
       background-color:${backgroundColor}`"
     >
       {{ dataset }}
@@ -33,6 +38,8 @@ const {
   letterSpacing,
   paddingY,
   paddingX,
+  borderWidth,
+  borderColor,
   borderRadius,
   writingMode,
   backgroundColor,

src/views/preview/utils/style.ts

@@ -16,11 +16,10 @@ export const getComponentAttrStyle = (attr: AttrType, index: number) => {
 
 // 设置大小
 export const getSizeStyle = (attr: AttrType, scale?: number) => {
-  const sizeStyle = {
+  return ({
     width: `${scale ? scale * attr.w : attr.w}px`,
     height: `${scale ? scale * attr.h : attr.h}px`
-  }
-  return sizeStyle
+  })
 }
 
 // 全局样式