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"
@@ -134,18 +134,28 @@
                 @change="showGridChange"
               />
             </el-dropdown-item>
+            <el-dropdown-item>
+              <span class="icon iconfont icon-adaptor icon16" />
+              <span class="text14 margin-left8">{{ $t('panel.auto_size_adaptor') }}</span>
+              <el-switch
+                v-model="autoSizeAdaptorSwitch"
+                :class="[{['grid-active']: autoSizeAdaptorSwitch},'margin-left8']"
+                size="mini"
+                @change="showSizeAdaptorSwitchChange"
+              />
+            </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"
@@ -255,15 +265,15 @@
 <script>
 import generateID from '@/components/canvas/utils/generateID'
 import toast from '@/components/canvas/utils/toast'
-import {mapState} from 'vuex'
-import {commonAttr, commonStyle} from '@/components/canvas/customComponent/component-list'
+import { mapState } from 'vuex'
+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 {panelUpdate, removePanelCache, saveCache} from '@/api/panel/panel'
-import {getPanelAllLinkageInfo, saveLinkage} from '@/api/panel/linkage'
+import { deepCopy, mobile2MainCanvas } from '@/components/canvas/utils/utils'
+import { panelUpdate, removePanelCache, saveCache } from '@/api/panel/panel'
+import { getPanelAllLinkageInfo, saveLinkage } from '@/api/panel/linkage'
 import bus from '@/utils/bus'
-import {queryPanelJumpInfo} from '@/api/panel/linkJump'
-import {inOtherPlatform} from '@/utils/index'
+import { queryPanelJumpInfo } from '@/api/panel/linkJump'
+import { inOtherPlatform } from '@/utils/index'
 
 export default {
   name: 'Toolbar',
@@ -365,7 +375,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() {
@@ -548,7 +558,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() {
@@ -575,7 +585,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++
             }
@@ -629,6 +639,7 @@ export default {
     showSizeAdaptorSwitchChange() {
       this.$store.commit('canvasChange')
       this.canvasStyleData.autoSizeAdaptor = !this.canvasStyleData.autoSizeAdaptor
+      eventBus.$emit('componentSizeAdaptorChange')
     },
     showPageLineChange() {
       this.$store.commit('canvasChange')

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

@@ -1117,6 +1117,7 @@ export default {
     this.$store.commit('getEditor')
     const _this = this
     eventBus.$on('hideArea', this.hideArea)
+    eventBus.$on('componentSizeAdaptorChange', this.changeScale)
     eventBus.$on('startMoveIn', this.startMoveIn)
     bus.$on('onRemoveLastItem', this.removeLastItem)
     bus.$on('trigger-search-button', this.triggerSearchButton)
@@ -1133,6 +1134,7 @@ export default {
   beforeDestroy() {
     eventBus.$off('hideArea', this.hideArea)
     eventBus.$off('startMoveIn', this.startMoveIn)
+    eventBus.$off('componentSizeAdaptorChange', this.changeScale)
     bus.$off('onRemoveLastItem', this.removeLastItem)
     bus.$off('trigger-search-button', this.triggerSearchButton)
     bus.$off('refresh-button-info', this.refreshButtonInfo)

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

@@ -260,7 +260,9 @@ export default {
       ],
       needToChangeWidth: [
         'left',
-        'width',
+        'width'
+      ],
+      needToChangeInnerWidth: [
         'fontSize',
         'activeFontSize',
         'borderWidth',
@@ -370,6 +372,7 @@ export default {
       return this.componentDataShow || []
     },
     ...mapState([
+      'previewCanvasScale',
       'isClickComponent'
     ]),
 
@@ -681,6 +684,10 @@ export default {
     format(value, scale) {
       return value * scale / 100
     },
+
+    formatPoint(value, pointScale) {
+      return value * pointScale
+    },
     handleScaleChange() {
       if (this.componentData) {
         const componentData = deepCopy(this.componentData)
@@ -690,10 +697,13 @@ export default {
               component.style[key] = this.format(component.style[key], this.scaleHeight)
             }
             if (this.needToChangeWidth.includes(key)) {
+              component.style[key] = this.format(component.style[key], this.scaleWidth)
+            }
+            if (this.needToChangeInnerWidth.includes(key)) {
               if ((key === 'fontSize' || key === 'activeFontSize') && (this.terminal === 'mobile' || ['custom', 'v-text'].includes(component.type))) {
                 // do nothing 移动端字符大小无需按照比例缩放，当前保持不变(包括 v-text 和 过滤组件)
               } else {
-                component.style[key] = this.format(component.style[key], this.scaleWidth)
+                component.style[key] = this.formatPoint(component.style[key], this.previewCanvasScale.scalePointWidth)
               }
             }
           })

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

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

core/frontend/src/styles/deicon/demo_index.html

@@ -54,6 +54,18 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe63e;</span>
+                <div class="name">adaptor</div>
+                <div class="code-name">&amp;#xe63e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe886;</span>
+                <div class="name">颜色</div>
+                <div class="code-name">&amp;#xe886;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe644;</span>
                 <div class="name">command</div>
@@ -810,9 +822,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1669699377636') format('woff2'),
-       url('iconfont.woff?t=1669699377636') format('woff'),
-       url('iconfont.ttf?t=1669699377636') format('truetype');
+  src: url('iconfont.woff2?t=1698903637839') format('woff2'),
+       url('iconfont.woff?t=1698903637839') format('woff'),
+       url('iconfont.ttf?t=1698903637839') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -838,6 +850,24 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-adaptor"></span>
+            <div class="name">
+              adaptor
+            </div>
+            <div class="code-name">.icon-adaptor
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yanse"></span>
+            <div class="name">
+              颜色
+            </div>
+            <div class="code-name">.icon-yanse
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-command"></span>
             <div class="name">
@@ -1972,6 +2002,22 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-adaptor"></use>
+                </svg>
+                <div class="name">adaptor</div>
+                <div class="code-name">#icon-adaptor</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yanse"></use>
+                </svg>
+                <div class="name">颜色</div>
+                <div class="code-name">#icon-yanse</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-command"></use>

core/frontend/src/styles/deicon/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2459092 */
-  src: url('iconfont.woff2?t=1669699377636') format('woff2'),
-       url('iconfont.woff?t=1669699377636') format('woff'),
-       url('iconfont.ttf?t=1669699377636') format('truetype');
+  src: url('iconfont.woff2?t=1698903637839') format('woff2'),
+       url('iconfont.woff?t=1698903637839') format('woff'),
+       url('iconfont.ttf?t=1698903637839') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-adaptor:before {
+  content: "\e63e";
+}
+
+.icon-yanse:before {
+  content: "\e886";
+}
+
 .icon-command:before {
   content: "\e644";
 }

core/frontend/src/styles/deicon/iconfont.json

@@ -5,6 +5,20 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "34289857",
+      "name": "adaptor",
+      "font_class": "adaptor",
+      "unicode": "e63e",
+      "unicode_decimal": 58942
+    },
+    {
+      "icon_id": "9626971",
+      "name": "颜色",
+      "font_class": "yanse",
+      "unicode": "e886",
+      "unicode_decimal": 59526
+    },
     {
       "icon_id": "1567487",
       "name": "command",