Merge pull request #7798 from dataease/pr@dev@refactor_screen

refactor: 优化公共链接返回顶部功能

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

@@ -9,7 +9,7 @@
       v-if="isPublicLink"
       ref="widget-div"
       class="function-div"
-      :class="functionClass"
+      :class="[{['function-back-div']: backToTopBtn},functionClass]"
     >
       <el-button-group size="mini">
         <el-button
@@ -39,8 +39,8 @@
             icon-class="link-down"
           />{{ $t('panel.down') }}</span></el-button>
         <el-button
-          id="fullscreenElement"
           v-if="isPcTerminal"
+          id="fullscreenElement"
           size="mini"
           @click="toggleFullscreen"
         >
@@ -48,15 +48,8 @@
             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 || backToTopBtn"
       class="bar-main-right"
@@ -75,6 +68,16 @@
         @click="backToTop"
       ><i class="icon iconfont icon-back-top" />{{ $t('panel.back_to_top') }}</el-button>
     </div>
+    <div
+      v-show="isPublicLink && backToTopBtn"
+      class="link-public"
+    >
+      <el-button
+        size="mini"
+        type="warning"
+        @click="backToTop"
+      ><i class="icon iconfont icon-back-top" />{{ $t('panel.back_to_top') }}</el-button>
+    </div>
   </div>
 </template>
 
@@ -293,4 +296,14 @@ export default {
     }
   }
 
+  .link-public {
+    top: -49px;
+    right: 8px;
+    opacity: 0.8;
+    position: absolute;
+  }
+
+  .function-back-div {
+    right: 100px!important;
+  }
 </style>

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

@@ -846,6 +846,7 @@ export default {
     canvasScroll() {
       // 当滚动距离超过 100px 时显示返回顶部按钮，否则隐藏按钮
       this.backToTopBtnShow = this.$refs[this.previewOutRefId].scrollTop > 200
+      console.log('top=' + this.$refs[this.previewOutRefId].scrollTop + ';this.backToTopBtnShow=' + this.backToTopBtnShow)
       bus.$emit('onScroll')
     },
     initListen() {

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

@@ -55,9 +55,9 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
-              <span class="icon iconfont">&#xe667;</span>
+              <span class="icon iconfont">&#xe63f;</span>
                 <div class="name">返回顶部</div>
-                <div class="code-name">&amp;#xe667;</div>
+                <div class="code-name">&amp;#xe63f;</div>
               </li>
           
             <li class="dib">
@@ -828,9 +828,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1705486315942') format('woff2'),
-       url('iconfont.woff?t=1705486315942') format('woff'),
-       url('iconfont.ttf?t=1705486315942') format('truetype');
+  src: url('iconfont.woff2?t=1706079293312') format('woff2'),
+       url('iconfont.woff?t=1706079293312') format('woff'),
+       url('iconfont.ttf?t=1706079293312') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>

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

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2459092 */
-  src: url('iconfont.woff2?t=1705486315942') format('woff2'),
-       url('iconfont.woff?t=1705486315942') format('woff'),
-       url('iconfont.ttf?t=1705486315942') format('truetype');
+  src: url('iconfont.woff2?t=1706079293312') format('woff2'),
+       url('iconfont.woff?t=1706079293312') format('woff'),
+       url('iconfont.ttf?t=1706079293312') format('truetype');
 }
 
 .iconfont {
@@ -14,7 +14,7 @@
 }
 
 .icon-back-top:before {
-  content: "\e667";
+  content: "\e63f";
 }
 
 .icon-adaptor:before {

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

@@ -6,11 +6,11 @@
   "description": "",
   "glyphs": [
     {
-      "icon_id": "831197",
+      "icon_id": "8224825",
       "name": "返回顶部",
       "font_class": "back-top",
-      "unicode": "e667",
-      "unicode_decimal": 58983
+      "unicode": "e63f",
+      "unicode_decimal": 58943
     },
     {
       "icon_id": "34289857",