feat(仪表板): 增加组件内部样式是否自适应仪表板缩放功能 #5793

core/frontend/src/components/canvas/components/Toolbar.vue

@@ -7,10 +7,10 @@
         @change="openMobileLayout"
       >
         <el-radio-button :label="false">
-          <span class="icon iconfont icon-icon_pc_outlined icon16_only" />
+          <span class="icon iconfont icon-icon_pc_outlined icon16_only"/>
         </el-radio-button>
         <el-radio-button :label="true">
-          <span class="icon iconfont icon-icon_phone_outlined icon16_only" />
+          <span class="icon iconfont icon-icon_phone_outlined icon16_only"/>
         </el-radio-button>
       </el-radio-group>
     </div>
@@ -99,7 +99,7 @@
             <el-dropdown-item>
               <el-dropdown placement="right-start">
                 <span>
-                  <span class="icon iconfont icon-icon_moments-categories_outlined icon16" />
+                  <span class="icon iconfont icon-icon_moments-categories_outlined icon16"/>
                   <span class="text14 margin-left8">{{ $t('panel.new_element_distribution') }}</span>
                   <svg-icon
                     icon-class="icon_right_outlined"
@@ -135,17 +135,17 @@
               />
             </el-dropdown-item>
             <el-dropdown-item @click.native="openOuterParamsSet">
-              <span class="icon iconfont icon-icon-quicksetting icon16" />
+              <span class="icon iconfont icon-icon-quicksetting icon16"/>
               <span class="text14 margin-left8">{{ $t('panel.params_setting') }}</span>
             </el-dropdown-item>
             <el-dropdown-item @click.native="clearCanvas">
-              <span class="icon iconfont icon-icon_clear_outlined icon16" />
+              <span class="icon iconfont icon-icon_clear_outlined icon16"/>
               <span class="text14 margin-left8">{{ $t('panel.clean_canvas') }}</span>
             </el-dropdown-item>
             <el-dropdown-item
               v-if="showWatermarkSetting"
             >
-              <span class="icon iconfont icon-WATERMARK icon16" />
+              <span class="icon iconfont icon-WATERMARK icon16"/>
               <span class="text14 margin-left8">{{ $t('panel.watermark') }}</span>
               <el-switch
                 v-model="panelInfo.watermarkOpen"
@@ -192,7 +192,7 @@
         @click="batchOption"
       ><span
         class="icon-font-margin"
-      >{{ batchOptStatus?$t('panel.cancel_batch_opt'):$t('panel.batch_opt') }}</span></span>
+      >{{ batchOptStatus ? $t('panel.cancel_batch_opt') : $t('panel.batch_opt') }}</span></span>
       <span style="float: right;margin-right: 24px">
         <el-button
           size="mini"
@@ -222,8 +222,8 @@
         </el-col>
         <el-col :span="20">
           <span style="font-size: 13px;margin-left: 10px;font-weight: bold;line-height: 20px">{{
-            $t('panel.panel_save_warn_tips')
+              $t('panel.panel_save_warn_tips')
-          }}</span>
+            }}</span>
         </el-col>
       </el-row>
       <div
@@ -255,15 +255,16 @@
 <script>
 import generateID from '@/components/canvas/utils/generateID'
 import toast from '@/components/canvas/utils/toast'
-import { mapState } from 'vuex'
+import {mapState} from 'vuex'
-import { commonAttr, commonStyle } from '@/components/canvas/customComponent/component-list'
+import {commonAttr, commonStyle} from '@/components/canvas/customComponent/component-list'
 import eventBus from '@/components/canvas/utils/eventBus'
-import { deepCopy, mobile2MainCanvas } from '@/components/canvas/utils/utils'
+import {deepCopy, mobile2MainCanvas} from '@/components/canvas/utils/utils'
-import { panelUpdate, removePanelCache, saveCache } from '@/api/panel/panel'
+import {panelUpdate, removePanelCache, saveCache} from '@/api/panel/panel'
-import { getPanelAllLinkageInfo, saveLinkage } from '@/api/panel/linkage'
+import {getPanelAllLinkageInfo, saveLinkage} from '@/api/panel/linkage'
 import bus from '@/utils/bus'
-import { queryPanelJumpInfo } from '@/api/panel/linkJump'
+import {queryPanelJumpInfo} from '@/api/panel/linkJump'
-import { inOtherPlatform } from '@/utils/index'
+import {inOtherPlatform} from '@/utils/index'
+
 export default {
   name: 'Toolbar',
   props: {
@@ -274,6 +275,7 @@ export default {
     return {
       showPageLine: false,
       showGridSwitch: false,
+      autoSizeAdaptorSwitch: true,
       mobileLayoutInitStatus: false,
       isShowPreview: false,
       needToChange: [
@@ -333,6 +335,7 @@ export default {
     this.scale = this.canvasStyleData.scale
     this.mobileLayoutInitStatus = this.mobileLayoutStatus
     this.showGridSwitch = this.canvasStyleData.aidedDesign.showGrid
+    this.autoSizeAdaptorSwitch = this.canvasStyleData.autoSizeAdaptor || true
     this.showPageLine = this.canvasStyleData.pdfPageLine?.showPageLine
     this.autoCache()
   },
@@ -362,7 +365,7 @@ export default {
       this.$emit('close-left-panel')
       removePanelCache(this.panelInfo.id)
       this.$nextTick(() => {
-        bus.$emit('PanelSwitchComponent', { name: 'PanelMain' })
+        bus.$emit('PanelSwitchComponent', {name: 'PanelMain'})
       })
     },
     closePanelEdit() {
@@ -545,7 +548,7 @@ export default {
       this.$store.commit('setComponentData', [])
       this.$store.commit('recordSnapshot', 'clearCanvas')
       bus.$emit('change_panel_right_draw', false)
-      this.$store.commit('setCurComponent', { component: null, index: null })
+      this.$store.commit('setCurComponent', {component: null, index: null})
     },
 
     handlePreviewChange() {
@@ -572,7 +575,7 @@ export default {
         const linkageInfo = this.targetLinkageInfo[key]
         const linkageFields = linkageInfo['linkageFields']
         if (linkageFields) {
-          linkageFields.forEach(function(linkage) {
+          linkageFields.forEach(function (linkage) {
             if (!(linkage.sourceField && linkage.targetField)) {
               subCheckCount++
             }
@@ -623,6 +626,10 @@ export default {
       this.$store.commit('canvasChange')
       this.canvasStyleData.aidedDesign.showGrid = !this.canvasStyleData.aidedDesign.showGrid
     },
+    showSizeAdaptorSwitchChange() {
+      this.$store.commit('canvasChange')
+      this.canvasStyleData.autoSizeAdaptor = !this.canvasStyleData.autoSizeAdaptor
+    },
     showPageLineChange() {
       this.$store.commit('canvasChange')
       this.canvasStyleData.pdfPageLine.showPageLine = !this.canvasStyleData.pdfPageLine.showPageLine

core/frontend/src/components/canvas/components/editor/DeEditor.vue

@@ -150,13 +150,13 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import {mapState} from 'vuex'
 import Shape from './Shape'
 import DeDrag from '@/components/deDrag'
 
 // eslint-disable-next-line no-unused-vars
-import { getComponentRotatedStyle, getStyle } from '@/components/canvas/utils/style'
+import {getComponentRotatedStyle, getStyle} from '@/components/canvas/utils/style'
-import { _$, imgUrlTrans } from '@/components/canvas/utils/utils'
+import {_$, imgUrlTrans} from '@/components/canvas/utils/utils'
 import ContextMenu from './ContextMenu'
 import MarkLine from './MarkLine'
 import Area from './Area'
@@ -164,13 +164,13 @@ import eventBus from '@/components/canvas/utils/eventBus'
 import Grid from './Grid'
 import PageLineEditor from './PageLineEditor'
 import PGrid from './PGrid'
-import { changeStyleWithScale } from '@/components/canvas/utils/translate'
+import {changeStyleWithScale} from '@/components/canvas/utils/translate'
 import UserViewDialog from '@/components/canvas/customComponent/UserViewDialog'
 import DeOutWidget from '@/components/dataease/DeOutWidget'
 import DragShadow from '@/components/deDrag/Shadow'
 import bus from '@/utils/bus'
 import LinkJumpSet from '@/views/panel/linkJumpSet'
-import { buildFilterMap, buildViewKeyMap, formatCondition, valueValid, viewIdMatch } from '@/utils/conditionUtil'
+import {buildFilterMap, buildViewKeyMap, formatCondition, valueValid, viewIdMatch} from '@/utils/conditionUtil'
 // 挤占式画布
 import _ from 'lodash'
 import _jq from 'jquery'
@@ -190,11 +190,11 @@ let itemMaxX = 0
 
 function debounce(func, time) {
   if (!isOverlay) {
-    (function(t) {
+    (function (t) {
       isOverlay = true
-      setTimeout(function() {
+      setTimeout(function () {
         t()
-        setTimeout(function() {
+        setTimeout(function () {
           isOverlay = false
           if (lastTask !== undefined) {
             debounce(lastTask, time)
@@ -319,10 +319,10 @@ function init() {
   resetPositionBox.call(this)
   initPosition(this)
   let i = 0
-  const timeid = setInterval(function() {
+  const timeid = setInterval(function () {
     if (i >= vm.yourList.length) {
       clearInterval(timeid)
-      vm.$nextTick(function() {
+      vm.$nextTick(function () {
         vm.moveAnimate = true
       })
     } else {
@@ -339,7 +339,7 @@ function resizePlayer(item, newSize) {
   removeItemFromPositionBox.call(vm, item)
 
   const belowItems = findBelowItems.call(this, item)
-  _.forEach(belowItems, function(upItem) {
+  _.forEach(belowItems, function (upItem) {
     const canGoUpRows = canItemGoUp.call(vm, upItem)
     if (canGoUpRows > 0) {
       moveItemUp.call(vm, upItem, canGoUpRows)
@@ -426,7 +426,7 @@ function movePlayer(item, position) {
   removeItemFromPositionBox.call(vm, item)
 
   const belowItems = findBelowItems.call(this, item)
-  _.forEach(belowItems, function(upItem) {
+  _.forEach(belowItems, function (upItem) {
     const canGoUpRows = canItemGoUp.call(vm, upItem)
     if (canGoUpRows > 0) {
       moveItemUp.call(vm, upItem, canGoUpRows)
@@ -452,7 +452,7 @@ function removeItem(index) {
     removeItemFromPositionBox.call(vm, item)
 
     const belowItems = findBelowItems.call(this, item)
-    _.forEach(belowItems, function(upItem) {
+    _.forEach(belowItems, function (upItem) {
       const canGoUpRows = canItemGoUp.call(vm, upItem)
       if (canGoUpRows > 0) {
         moveItemUp.call(vm, upItem, canGoUpRows)
@@ -544,7 +544,7 @@ function findClosetCoords(item, tCoord) {
     y: collisionsItem[0].coord.el.y
   })
 
-  setTimeout(function() {
+  setTimeout(function () {
     isOverlay = false
   }, 200)
 }
@@ -592,7 +592,7 @@ function changeItemCoord(item) {
     el: item
   }
 
-  const index = _.findIndex(vm.coordinates, function(o) {
+  const index = _.findIndex(vm.coordinates, function (o) {
     return o.el._dragId === item._dragId
   })
   if (index !== -1) {
@@ -609,7 +609,7 @@ function emptyTargetCell(item) {
   const vm = this
   const belowItems = findBelowItems.call(vm, item)
 
-  _.forEach(belowItems, function(downItem, index) {
+  _.forEach(belowItems, function (downItem, index) {
     if (downItem._dragId === item._dragId) return
     const moveSize = item.y + item.sizey - downItem.y
     if (moveSize > 0) {
@@ -649,7 +649,7 @@ function moveItemDown(item, size) {
   const vm = this
   removeItemFromPositionBox.call(vm, item)
   const belowItems = findBelowItems.call(vm, item)
-  _.forEach(belowItems, function(downItem, index) {
+  _.forEach(belowItems, function (downItem, index) {
     if (downItem._dragId === item._dragId) return
     const moveSize = calcDiff.call(vm, item, downItem, size)
     if (moveSize > 0) {
@@ -722,7 +722,7 @@ function moveItemUp(item, size) {
 
   changeItemCoord.call(this, item)
 
-  _.forEach(belowItems, function(upItem, index) {
+  _.forEach(belowItems, function (upItem, index) {
     const moveSize = canItemGoUp.call(vm, upItem)
     if (moveSize > 0) {
       moveItemUp.call(vm, upItem, moveSize)
@@ -806,19 +806,19 @@ export default {
     dragStart: {
       required: false,
       type: Function,
-      default: function() {
+      default: function () {
       }
     },
     dragging: {
       required: false,
       type: Function,
-      default: function() {
+      default: function () {
       }
     },
     dragEnd: {
       required: false,
       type: Function,
-      default: function() {
+      default: function () {
       }
     },
     resizable: {
@@ -829,19 +829,19 @@ export default {
     resizeStart: {
       required: false,
       type: Function,
-      default: function() {
+      default: function () {
       }
     },
     resizing: {
       required: false,
       type: Function,
-      default: function() {
+      default: function () {
       }
     },
     resizeEnd: {
       required: false,
       type: Function,
-      default: function() {
+      default: function () {
       }
     },
     matrixCount: {
@@ -1004,6 +1004,7 @@ export default {
       return this.curCanvasScaleMap[this.canvasId]
     },
     ...mapState([
+      'canvasStyleData',
       'curComponent',
       'editor',
       'linkageSettingStatus',
@@ -1287,7 +1288,7 @@ export default {
       }
       return -1
     },
-    pluginEditHandler({ e, id }) {
+    pluginEditHandler({e, id}) {
       let index = -1
       for (let i = 0; i < this.componentData.length; i++) {
         const item = this.componentData[i]
@@ -1397,12 +1398,12 @@ export default {
     getSelectArea() {
       const result = []
       // 区域起点坐标
-      const { x, y } = this.start
+      const {x, y} = this.start
       // 计算所有的组件数据，判断是否在选中区域内
       this.componentData.forEach(component => {
         if (component.isLock) return
 
-        const { left, top, width, height } = component.style
+        const {left, top, width, height} = component.style
         if (x <= left && y <= top && (left + width <= x + this.width) && (top + height <= y + this.height)) {
           result.push(component)
         }
@@ -1458,7 +1459,7 @@ export default {
 
     getTextareaHeight(element, text) {
       // eslint-disable-next-line prefer-const
-      let { lineHeight, fontSize, height } = element.style
+      let {lineHeight, fontSize, height} = element.style
       if (lineHeight === '') {
         lineHeight = 1.5
       }
@@ -1523,8 +1524,8 @@ export default {
           })
         if (this.canvasId === 'canvas-main') {
           this.$store.commit('setPreviewCanvasScale', {
-            scaleWidth: this.scalePointWidth,
+            scaleWidth: this.canvasStyleData.autoSizeAdaptor ? this.scalePointWidth : 1,
-            scaleHeight: this.scalePointHeight
+            scaleHeight: this.canvasStyleData.autoSizeAdaptor ? this.scalePointHeight : 1
           })
         }
       }
@@ -1549,7 +1550,7 @@ export default {
       }
     },
     getRefLineParams(params) {
-      const { vLine, hLine } = params
+      const {vLine, hLine} = params
       this.vLine = vLine
       this.hLine = hLine
     },
@@ -1702,8 +1703,8 @@ export default {
       newX = newX > 0 ? newX : 1
       newY = newY > 0 ? newY : 1
       if (item.sizex !== nowX || item.sizey !== nowY) {
-        debounce((function(newX, oldX, newY, oldY) {
+        debounce((function (newX, oldX, newY, oldY) {
-          return function() {
+          return function () {
             if (newX !== oldX || oldY !== newY) {
               movePlayer.call(vm, resizeItem, {
                 x: newX,
@@ -1739,8 +1740,8 @@ export default {
         return
       }
       if (newX !== oldX || oldY !== newY) {
-        debounce((function(newX, oldX, newY, oldY) {
+        debounce((function (newX, oldX, newY, oldY) {
-          return function() {
+          return function () {
             if (newX !== oldX || oldY !== newY) {
               movePlayer.call(vm, moveItem, {
                 x: newX,
@@ -1778,7 +1779,7 @@ export default {
       // 不使用copy 保持原有对象
       const finalList = []
       const _this = this
-      _.forEach(this.componentData, function(item, index) {
+      _.forEach(this.componentData, function (item, index) {
         if (_.isEmpty(item)) return
         if (_this.canvasId === item.canvasId) {
           delete item['_dragId']
@@ -1820,7 +1821,7 @@ export default {
     addItemBox(item) {
       this.yourList.push(item)
 
-      this.$nextTick(function() {
+      this.$nextTick(function () {
         addItem.call(this, item, this.yourList.length - 1)
       })
     },
@@ -1851,7 +1852,7 @@ export default {
     // 调整父级组件边界
     resizeParentBoundsRef() {
       const _this = this
-      _this.componentData.forEach(function(data, index) {
+      _this.componentData.forEach(function (data, index) {
         _this.$refs.deDragRef && _this.$refs.deDragRef[index] && _this.$refs.deDragRef[index].checkParentSize()
       })
     },

core/frontend/src/components/canvas/components/editor/Preview.vue

@@ -664,8 +664,8 @@ export default {
       }
       if (this.isMainCanvas()) {
         this.$store.commit('setPreviewCanvasScale', {
-          scaleWidth: (this.scaleWidth / 100),
+          scaleWidth: this.canvasStyleData.autoSizeAdaptor ? (this.scaleWidth / 100) : 1,
-          scaleHeight: (this.scaleHeight / 100)
+          scaleHeight: this.canvasStyleData.autoSizeAdaptor ? (this.scaleHeight / 100) : 1
         })
       }
       this.handleScaleChange()

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

@@ -86,6 +86,7 @@ export function panelInit(componentData, componentStyle) {
 
 export function panelDataPrepare(componentData, componentStyle, callback) {
   // style初始化
+  componentStyle.autoSizeAdaptor = (componentStyle.autoSizeAdaptor || true)
   componentStyle.refreshTime = (componentStyle.refreshTime || 5)
   componentStyle.refreshViewLoading = (componentStyle.refreshViewLoading || false)
   componentStyle.refreshUnit = (componentStyle.refreshUnit || 'minute')

core/frontend/src/icons/svg/icon_auto-adaptor.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1698901715032" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4099" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M960.605 932.345v-240.231c0.045-7.2-2.723-14.445-8.213-19.98-11.115-11.047-29.002-11.047-40.071 0-5.535 5.535-8.303 12.757-8.303 19.98v171.923l-351.99-352.035 351.99-352.013v171.855c0 7.245 2.767 14.49 8.303 20.002 11.070 11.070 28.957 11.070 40.071 0 5.49-5.511 8.257-12.78 8.213-20.002v-240.187c0.045-7.223-2.723-14.468-8.213-20.003-5.58-5.511-12.803-8.279-20.025-8.302h-240.233c-7.222 0-14.467 2.79-19.98 8.302-11.115 11.049-11.115 28.957 0 40.050 5.511 5.535 12.735 8.302 19.98 8.279h171.9l-352.013 352.013-352.012-352.035h171.855c7.268 0.022 14.49-2.745 20.025-8.279 11.070-11.047 11.070-29.002 0-40.050-5.49-5.511-12.758-8.279-20.025-8.303h-240.187c-7.268 0-14.513 2.79-20.025 8.303-5.513 5.558-8.279 12.803-8.279 20.048v240.165c0 7.245 2.79 14.512 8.279 20.002 11.070 11.070 28.98 11.070 40.028 0 5.513-5.511 8.279-12.713 8.279-20.002v-171.855l352.058 352.012-352.035 352.035v-171.922c0-7.2-2.745-14.445-8.279-19.98-11.070-11.047-29.002-11.047-40.028 0-5.558 5.535-8.279 12.757-8.279 19.98v240.231c0 7.223 2.79 14.468 8.279 20.048 5.535 5.468 12.757 8.279 20.025 8.279h240.188c7.268 0 14.49-2.745 20.025-8.279 11.070-11.047 11.070-29.002 0-40.050-5.535-5.535-12.78-8.257-20.025-8.257h-171.877l352.012-352.035 352.013 352.035h-171.9c-7.222 0-14.467 2.768-19.98 8.257-11.115 11.049-11.115 29.002 0 40.050 5.511 5.468 12.735 8.279 19.98 8.279h240.255c7.2 0 14.445-2.813 20.025-8.279 5.467-5.602 8.19-12.825 8.19-20.048z" p-id="4100" fill="#646A73"></path></svg>

core/frontend/src/lang/en.js

@@ -2313,6 +2313,7 @@ export default {
     suspension: 'suspension',
     new_element_distribution: 'Element Distribution',
     aided_grid: 'Aided Grid',
+    auto_size_adaptor: 'Component Adaptor',
     aided_grid_open: 'Open',
     aided_grid_close: 'Close',
     export_pdf_page: 'Pagination Line',

core/frontend/src/lang/tw.js

@@ -2307,6 +2307,7 @@ export default {
     suspension: '懸浮',
     new_element_distribution: '元素移入分佈方式',
     aided_grid: '輔助設計網格',
+    auto_size_adaptor: '組件自適應',
     aided_grid_open: '打開',
     aided_grid_close: '關閉',
     export_pdf_page: '分頁線',

core/frontend/src/lang/zh.js

@@ -2307,6 +2307,7 @@ export default {
     suspension: '悬浮',
     new_element_distribution: '元素移入分布方式',
     aided_grid: '辅助设计网格',
+    auto_size_adaptor: '组件自适应',
     aided_grid_open: '打开',
     aided_grid_close: '关闭',
     export_pdf_page: '分页线',

core/frontend/src/views/panel/panel.js

@@ -75,6 +75,7 @@ export const CANVAS_STYLE = {
     showPageLine: false,
     proportion: null
   },
+  autoSizeAdaptor: true, // 组件内容大小自适应(自适应时会根据画布缩放比例对内容进行缩放，关闭则显示内部文本实际大小)
   refreshViewEnable: false, // 开启视图刷新（默认关闭）
   refreshViewLoading: true, // 仪表板视图loading提示
   refreshUnit: 'minute', // 仪表板刷新时间带外 默认 分钟