From 028c03733c7e5befffd4465fba9a95bf26eda2ad Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Fri, 24 Jun 2022 17:59:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=BE=E7=89=87=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=B0=BA=E5=AF=B8=E9=80=82=E5=BA=94=E6=96=B9?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/canvas/components/TextAttr.vue | 48 ++++++++++++++-----
 .../canvas/custom-component/Picture.vue       | 25 ++++++++--
 .../canvas/custom-component/component-list.js | 12 +++--
 frontend/src/components/canvas/utils/utils.js |  4 ++
 frontend/src/lang/en.js                       | 11 +++++
 frontend/src/lang/tw.js                       | 11 +++++
 frontend/src/lang/zh.js                       | 11 +++++
 frontend/src/views/panel/edit/index.vue       |  4 +-
 8 files changed, 104 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/canvas/components/TextAttr.vue b/frontend/src/components/canvas/components/TextAttr.vue
index 4ac2dfb775..8714099d1e 100644
--- a/frontend/src/components/canvas/components/TextAttr.vue
+++ b/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;
 
   }
diff --git a/frontend/src/components/canvas/custom-component/Picture.vue b/frontend/src/components/canvas/custom-component/Picture.vue
index f990025ad8..7bc43a8210 100644
--- a/frontend/src/components/canvas/custom-component/Picture.vue
+++ b/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 {
-    width: 100%;
-    height: 100%;
+.pic-main{
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
 }
 </style>
diff --git a/frontend/src/components/canvas/custom-component/component-list.js b/frontend/src/components/canvas/custom-component/component-list.js
index b38fa05afc..b66a1de213 100644
--- a/frontend/src/components/canvas/custom-component/component-list.js
+++ b/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,
diff --git a/frontend/src/components/canvas/utils/utils.js b/frontend/src/components/canvas/utils/utils.js
index 97a233fbf1..a251c94adb 100644
--- a/frontend/src/components/canvas/utils/utils.js
+++ b/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
diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js
index 7e6c211535..5602e49706 100644
--- a/frontend/src/lang/en.js
+++ b/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',
diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js
index b556de08b1..b5b883efde 100644
--- a/frontend/src/lang/tw.js
+++ b/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: '主題色更換',
diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js
index 8b2e178a5a..e57c36e298 100644
--- a/frontend/src/lang/zh.js
+++ b/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: '主题色更换',
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index c178715265..0d4ee83382 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/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