feat(仪表板): 当仪表板向下滚动一定距离，增加返回顶部按钮功能

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

@@ -28,7 +28,7 @@
         ><i
           style="width: 12px;height: 12px"
           class="icon iconfont icon-quxiaoliandong"
-        />{{ $t('panel.remove_all_linkage') }}</el-button>
+        />{{ $t('panel.remove_all_linkage') }}111</el-button>
         <el-button
           size="mini"
           @click="exportPDF"
@@ -46,18 +46,32 @@
             style="width: 12px;height: 12px"
             :icon-class="fullscreenState?'public_fullscreen_exit':'public_fullscreen'"
           />{{ fullscreenState?$t('panel.fullscreen_exit'): $t('panel.fullscreen_preview') }}</span></el-button>
+        <el-button
+          v-show="backToTopBtn"
+          size="mini"
+          type="warning"
+          @click="backToTop"
+        ><i class="icon iconfont icon-back-top" />{{ $t('panel.back_to_top') }}</el-button>
       </el-button-group>
     </div>
 
     <div
-      v-else-if="existLinkage"
+      v-else-if="existLinkage || backToTopBtn"
       class="bar-main-right"
     >
       <el-button
+        v-if="existLinkage"
         size="mini"
         type="warning"
         @click="clearAllLinkage"
       ><i class="icon iconfont icon-quxiaoliandong" />{{ $t('panel.remove_all_linkage') }}</el-button>
+
+      <el-button
+        v-if="backToTopBtn"
+        size="mini"
+        type="warning"
+        @click="backToTop"
+      ><i class="icon iconfont icon-back-top" />{{ $t('panel.back_to_top') }}</el-button>
     </div>
   </div>
 </template>
@@ -72,6 +86,10 @@ export default {
     canvasStyleData: {
       type: Object,
       default: null
+    },
+    backToTopBtn: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -168,6 +186,9 @@ export default {
       const val = this.$refs['widget-div'].style.display
 
       this.$refs['widget-div'].style.display = val ? '' : 'block'
+    },
+    backToTop() {
+      this.$emit('back-to-top')
     }
   }
 }

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

@@ -1,6 +1,7 @@
 <template>
   <div
     :id="previewMainDomId"
+    :ref="previewOutRefId"
     class="bg"
     :style="customStyle"
     @scroll="canvasScroll"
@@ -9,7 +10,9 @@
       v-if="canvasId==='canvas-main'"
       ref="canvas-opt-bar"
       :canvas-style-data="canvasStyleData"
+      :back-to-top-btn="backToTopBtnShow"
       @link-export-pdf="downloadAsPDF"
+      @back-to-top="backToTop"
     />
     <div
       :id="previewDomId"
@@ -239,6 +242,7 @@ export default {
   },
   data() {
     return {
+      backToTopBtnShow: false,
       imageDownloading: false,
       chartDetailsVisible: false,
       canvasMain: null,
@@ -251,6 +255,7 @@ export default {
       previewMainDomId: 'preview-main-' + this.canvasId,
       previewDomId: 'preview-' + this.canvasId,
       previewRefId: 'preview-ref-' + this.canvasId,
+      previewOutRefId: 'preview-out-ref-' + this.canvasId,
       previewTempDomId: 'preview-temp-' + this.canvasId,
       previewTempRefId: 'preview-temp-ref-' + this.canvasId,
       isShowPreview: false,
@@ -777,6 +782,8 @@ export default {
       this.$store.commit('openMobileLayout')
     },
     canvasScroll() {
+      // 当滚动距离超过 100px 时显示返回顶部按钮，否则隐藏按钮
+      this.backToTopBtnShow = this.$refs[this.previewOutRefId].scrollTop > 200
       bus.$emit('onScroll')
     },
     initListen() {
@@ -806,6 +813,9 @@ export default {
         }
       }, 1500)
     },
+    backToTop() {
+      this.$refs[this.previewOutRefId].scrollTop = 0
+    },
     downloadAsPDF() {
       this.dataLoading = true
       this.$emit('change-load-status', true)

core/frontend/src/lang/en.js

@@ -2339,6 +2339,7 @@ export default {
     switch_picture: 'Switch Picture',
     select_field: 'Select View Field',
     remove_all_linkage: 'Remove All Linkage',
+    back_to_top: 'Back To Top',
     exit_un_march_linkage_field: 'Exit Un March Linkage Field',
     details: 'Details',
     setting: 'Setting',

core/frontend/src/lang/tw.js

@@ -2331,6 +2331,7 @@ export default {
     switch_picture: '更換圖片',
     select_field: '選擇視圖字段',
     remove_all_linkage: '清除所有聯動',
+    back_to_top: '返回頂部',
     exit_un_march_linkage_field: '存在未匹配聯動關繫的字段',
     details: '詳情',
     setting: '設置',

core/frontend/src/lang/zh.js

@@ -2334,6 +2334,7 @@ export default {
     switch_picture: '更换图片',
     select_field: '选择视图字段',
     remove_all_linkage: '清除所有联动',
+    back_to_top: '返回顶部',
     exit_un_march_linkage_field: '存在未匹配联动关系的字段',
     details: '详情',
     setting: '设置',

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

@@ -54,6 +54,12 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe667;</span>
+                <div class="name">返回顶部</div>
+                <div class="code-name">&amp;#xe667;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe63e;</span>
                 <div class="name">adaptor</div>
@@ -822,9 +828,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1698903637839') format('woff2'),
+  src: url('iconfont.woff2?t=1705486315942') format('woff2'),
-       url('iconfont.woff?t=1698903637839') format('woff'),
+       url('iconfont.woff?t=1705486315942') format('woff'),
-       url('iconfont.ttf?t=1698903637839') format('truetype');
+       url('iconfont.ttf?t=1705486315942') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -850,6 +856,15 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-back-top"></span>
+            <div class="name">
+              返回顶部
+            </div>
+            <div class="code-name">.icon-back-top
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-adaptor"></span>
             <div class="name">
@@ -2002,6 +2017,14 @@
       <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-back-top"></use>
+                </svg>
+                <div class="name">返回顶部</div>
+                <div class="code-name">#icon-back-top</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-adaptor"></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=1698903637839') format('woff2'),
+  src: url('iconfont.woff2?t=1705486315942') format('woff2'),
-       url('iconfont.woff?t=1698903637839') format('woff'),
+       url('iconfont.woff?t=1705486315942') format('woff'),
-       url('iconfont.ttf?t=1698903637839') format('truetype');
+       url('iconfont.ttf?t=1705486315942') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-back-top:before {
+  content: "\e667";
+}
+
 .icon-adaptor:before {
   content: "\e63e";
 }

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

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "831197",
+      "name": "返回顶部",
+      "font_class": "back-top",
+      "unicode": "e667",
+      "unicode_decimal": 58983
+    },
     {
       "icon_id": "34289857",
       "name": "adaptor",