feat: 图片组件增加尺寸适应方式

frontend/src/components/canvas/components/TextAttr.vue

@@ -105,7 +105,7 @@
       </div>
       <div v-if="attrShow('borderColor')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
         <div style="width: 16px;height: 18px">
-          <el-tooltip content="边框颜色">
+          <el-tooltip :content="$t('panel.border_color')">
             <i class="iconfont icon-huabi" @click="goBoardColor" />
           </el-tooltip>
           <div :style="boardDivColor" />
@@ -115,7 +115,7 @@
 
       <div v-if="attrShow('backgroundColor')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
         <div style="width: 16px;height: 18px">
-          <el-tooltip content="背景颜色">
+          <el-tooltip :content="$t('panel.background_color')">
             <i class="iconfont icon-beijingse1" @click="goBackgroundColor" />
           </el-tooltip>
           <div :style="backgroundDivColor" />
@@ -123,58 +123,70 @@
         </div>
       </div>
       <div v-if="attrShow('videoLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-tooltip content="视频信息">
+        <el-tooltip :content="$t('panel.video_info')">
           <VideoLinks :link-info="curComponent.videoLinks" />
         </el-tooltip>
       </div>
 
       <div v-if="attrShow('streamMediaLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-tooltip content="流媒体信息">
+        <el-tooltip :content="$t('panel.stream_media_info')">
           <StreamMediaLinks :link-info="curComponent.streamMediaLinks" />
         </el-tooltip>
       </div>
 
       <div v-if="attrShow('frameLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 2px;">
-        <el-tooltip content="网页地址">
+        <el-tooltip :content="$t('panel.web_addr')">
           <FrameLinks :link-info="curComponent.frameLinks" />
         </el-tooltip>
       </div>
       <div v-if="attrShow('date-format')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
-        <el-tooltip content="日期格式">
+        <el-tooltip :content="$t('panel.data_format')">
           <date-format :format-info="curComponent.formatInfo" />
         </el-tooltip>
       </div>
 
       <div v-if="attrShow('deTabStyle')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
-        <el-tooltip content="tab内部样式">
+        <el-tooltip :content="$t('panel.tab_inner_style')">
           <tab-style :style-info="styleInfo" />
         </el-tooltip>
       </div>
 
       <div v-if="attrShow('titlePostion')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
-        <el-tooltip content="标题位置">
+        <el-tooltip :content="$t('panel.title_position')">
           <title-postion :element-type="elementType" :show-vertical="showVertical" :style-info="styleInfo" />
         </el-tooltip>
       </div>
       <!--tab 内部组件样式-->
       <div v-if="attrTabShow('videoLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
-        <el-tooltip content="视频信息">
+        <el-tooltip :content="$t('panel.video_info')">
           <VideoLinks :attr-position="'tab'" :link-info="curActiveTabInner.videoLinks" />
         </el-tooltip>
       </div>
 
       <div v-if="attrTabShow('streamMediaLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
-        <el-tooltip content="流媒体信息">
+        <el-tooltip :content="$t('panel.stream_media_info')">
           <StreamMediaLinks :attr-position="'tab'" :link-info="curActiveTabInner.streamMediaLinks" />
         </el-tooltip>
       </div>
 
       <div v-if="attrTabShow('frameLinks')" style="width: 20px;float: left;margin-top: 2px;margin-left: 10px;">
-        <el-tooltip content="网页地址">
+        <el-tooltip :content="$t('panel.web_addr')">
           <FrameLinks :attr-position="'tab'" :link-info="curActiveTabInner.frameLinks" />
         </el-tooltip>
       </div>
 
+      <div v-if="attrShow('adaptation')" style="width: 100px;margin-top: 2px;margin-right:2px;float: left">
+        <el-tooltip :content="$t('panel.pic_size')">
+          <el-select v-model="styleInfo.adaptation" size="mini" @change="styleChange">
+            <el-option
+              v-for="item in pictureAdaptation"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-tooltip>
+      </div>
     </div>
   </el-card>
 </template>
@@ -257,12 +269,23 @@ export default {
         value: '5',
         label: '5'
       }],
+      pictureAdaptation: [{
+        value: 'adaptation',
+        label: this.$t('panel.pic_adaptation')
+      }, {
+        value: 'equiratio',
+        label: this.$t('panel.pic_equiratio')
+      }, {
+        value: 'original',
+        label: this.$t('panel.pic_original')
+      }],
       // 矩形组件显示的属性
       'picture-add': [
         'borderStyle',
         'borderWidth',
         'borderColor',
-        'hyperlinks'
+        'hyperlinks',
+        'adaptation'
       ],
       // 过滤组件显示的属性
       'custom': [
@@ -480,6 +503,7 @@ export default {
   .el-card-main {
     height: 34px;
     z-index: 10;
+    padding-right: 2px;
     position: absolute;
 
   }

frontend/src/components/canvas/custom-component/Picture.vue

@@ -1,8 +1,8 @@
 <template>
   <div style="overflow: hidden;width: 100%;height: 100%;">
-    <img v-if="!showLink" :src="element.propValue">
+    <img v-if="!showLink" :style="imageAdapter" :src="element.propValue">
     <a v-if="showLink" :title="element.hyperlinks.content " :target="element.hyperlinks.openMode " :href="element.hyperlinks.content ">
-      <img :src="element.propValue">
+      <img :style="imageAdapter" :src="element.propValue">
     </a>
   </div>
 </template>
@@ -23,14 +23,29 @@ export default {
   computed: {
     showLink() {
       return this.editMode === 'preview' && this.element && this.element.hyperlinks && this.element.hyperlinks.enable
+    },
+    imageAdapter() {
+      const style = {
+        position: 'relative',
+        width: '100%',
+        height: '100%'
+      }
+      if (this.element.style.adaptation === 'original') {
+        style.width = 'auto'
+        style.height = 'auto'
+      } else if (this.element.style.adaptation === 'equiratio') {
+        style.height = 'auto'
+      }
+      return style
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-img {
+.pic-main{
-    width: 100%;
+  overflow: hidden;
-    height: 100%;
+  width: 100%;
+  height: 100%;
 }
 </style>

frontend/src/components/canvas/custom-component/component-list.js

@@ -56,6 +56,11 @@ export const commonStyle = {
   borderRadius: 0
 }
 
+export const PIC_STYLE = {
+  ...commonStyle,
+  adaptation: 'adaptation'
+}
+
 export const commonAttr = {
   animations: [],
   events: {},
@@ -163,7 +168,7 @@ export const assistList = [
 export const pictureList = [
   {
     id: '20001',
-    component: 'picture-add',
+    component: 'Picture',
     type: 'picture-add',
     label: '图片',
     icon: 'iconfont icon-picture',
@@ -457,7 +462,7 @@ const list = [
   },
   {
     id: '20001',
-    component: 'picture-add',
+    component: 'Picture',
     type: 'picture-add',
     label: '图片',
     icon: 'iconfont icon-picture',
@@ -466,7 +471,8 @@ const list = [
     hyperlinks: HYPERLINKS,
     style: {
       width: 400,
-      height: 200
+      height: 200,
+      adaptation: 'adaptation'
     },
     x: 1,
     y: 1,

frontend/src/components/canvas/utils/utils.js

@@ -123,6 +123,10 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
       item.commonBackground.enable = false
       item.commonBackground.backgroundType = 'innerImage'
     }
+    // picture component
+    if (item.component && item.component === 'Picture') {
+      item.style.adaptation = item.style.adaptation || 'adaptation'
+    }
   })
   // 初始化密度为最高密度
   componentStyle.aidedDesign.matrixBase = 4

frontend/src/lang/en.js

@@ -1464,6 +1464,17 @@ export default {
     sure_bt: 'Confirm'
   },
   panel: {
+    pic_adaptation: 'Adaptation',
+    pic_equiratio: 'Equiratio',
+    pic_original: 'Original',
+    pic_size: 'Image Size',
+    web_addr: 'Web Address',
+    stream_media_info: 'Stream Media Info',
+    video_info: 'Video Info',
+    title_position: 'Title Position',
+    tab_inner_style: 'Tab Inner Style',
+    data_format: 'Data Format',
+    border_color: 'Border Color',
     theme_change_warn: 'Subject Change',
     theme_change_tips: 'Changing the theme will overwrite the view related theme attributes. It is recommended to back up in advance. Do you want to continue the replacement?',
     theme_color_change_warn: 'Theme Color Change',

frontend/src/lang/tw.js

@@ -1465,6 +1465,17 @@ export default {
     sure_bt: '確定'
   },
   panel: {
+    pic_adaptation: '适应组件',
+    pic_equiratio: '等比适应',
+    pic_original: '原始尺寸',
+    pic_size: '图片尺寸',
+    web_addr: '网页地址',
+    stream_media_info: '流媒体信息',
+    video_info: '视频信息',
+    title_position: '标题位置',
+    tab_inner_style: 'tab内部样式',
+    data_format: '日期格式',
+    border_color: '边框颜色',
     theme_change_warn: '主題更換',
     theme_change_tips: '更換主題將會覆蓋視圖相關主題屬性建議提前備份,是否繼續更換？',
     theme_color_change_warn: '主題色更換',

frontend/src/lang/zh.js

@@ -1472,6 +1472,17 @@ export default {
     sure_bt: '确定'
   },
   panel: {
+    pic_adaptation: '适应组件',
+    pic_equiratio: '等比适应',
+    pic_original: '原始尺寸',
+    pic_size: '图片尺寸',
+    web_addr: '网页地址',
+    stream_media_info: '流媒体信息',
+    video_info: '视频信息',
+    title_position: '标题位置',
+    tab_inner_style: 'tab内部样式',
+    data_format: '日期格式',
+    border_color: '边框颜色',
     theme_change_warn: '主题更换',
     theme_change_tips: '更换主题将会覆盖视图相关主题属性建议提前备份,是否继续更换？',
     theme_color_change_warn: '主题色更换',

frontend/src/views/panel/edit/index.vue

@@ -341,7 +341,7 @@ import { deepCopy, matrixBaseChange } from '@/components/canvas/utils/utils'
 import componentList, {
   BASE_MOBILE_STYLE,
   COMMON_BACKGROUND,
-  HYPERLINKS
+  HYPERLINKS, PIC_STYLE
 } from '@/components/canvas/custom-component/component-list' // 左侧列表数据
 import { mapState } from 'vuex'
 import { uuid } from 'vue-uuid'
@@ -967,7 +967,7 @@ export default {
             propValue: fileResult,
             commonBackground: deepCopy(COMMON_BACKGROUND),
             style: {
-              ...commonStyle
+              ...PIC_STYLE
             }
           }
           component.auxiliaryMatrix = false