Merge pull request #8097 from dataease/pr@dev@refactor_public-link

refactor(仪表板): 公共链接下载等按钮区域重构 #7461

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

@@ -0,0 +1,220 @@
+<template>
+  <div
+    class="link-bar-main bar-light"
+  >
+    <div class="bar-first">
+      <i class="el-icon-d-arrow-left" />
+    </div>
+    <div class="bar-content">
+      <div class="bar-diver" />
+      <div class="link-icon-active">
+        <svg-icon
+          style="width: 16px;height: 16px"
+          icon-class="icon-fanhui"
+        />
+      </div>
+      <div class="link-icon-active">
+        <svg-icon
+          style="width: 16px;height: 16px"
+          icon-class="icon-xiazai"
+        />
+      </div>
+      <div class="link-icon-active">
+        <svg-icon
+          style="width: 16px;height: 16px"
+          :icon-class="fullscreenState?'icon-suoxiao1':'icon_magnify_outlined'"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { isMobile } from '@/utils'
+import bus from '@/utils/bus'
+
+export default {
+  props: {
+    canvasStyleData: {
+      type: Object,
+      default: null
+    },
+    backToTopBtn: {
+      type: Boolean,
+      default: false
+    },
+    terminal: {
+      type: String,
+      default: 'pc'
+    }
+  },
+  data() {
+    return {
+      fullscreenElement: null,
+      fullscreenState: false
+    }
+  },
+  computed: {
+    isPcTerminal() {
+      return this.terminal === 'pc'
+    },
+    functionClass() {
+      let result = 'function-light'
+      if (this.canvasStyleData?.panel?.themeColor === 'dark') {
+        result = 'function-dark'
+      }
+      return result
+    },
+    existLinkage() {
+      let linkageFiltersCount = 0
+      this.componentData.forEach(item => {
+        if (item.linkageFilters && item.linkageFilters.length > 0) {
+          linkageFiltersCount++
+        }
+      })
+      return linkageFiltersCount
+    },
+    isPublicLink() {
+      return this.$router.currentRoute.path === '/delink'
+    },
+    fromLink() {
+      return this.$route.query.fromLink === 'true'
+    },
+    containerClass() {
+      return this.isPublicLink && this.isPcTerminal ? 'trans-pc' : 'bar-main'
+    },
+    ...mapState([
+      'componentData'
+    ])
+  },
+
+  mounted() {
+    this.fullscreenElement = document.getElementById('fullscreenElement')
+    document.addEventListener('fullscreenchange', this.handleFullscreenChange)
+  },
+  beforeDestroy() {
+    // 在组件销毁前移除事件监听器
+    document.removeEventListener('fullscreenchange', this.handleFullscreenChange)
+  },
+  methods: {
+    handleFullscreenChange() {
+      // 在全屏状态变化时触发此方法
+      if (document.fullscreenElement) {
+        this.fullscreenState = true
+      } else {
+        this.fullscreenState = false
+      }
+    },
+    toggleFullscreen() {
+      if (!document.fullscreenElement) {
+        // 如果当前不是全屏状态，则启动全屏
+        document.documentElement.requestFullscreen().catch(error => {
+          console.error('Request fullscreen failed:', error)
+        })
+      } else {
+        // 如果当前是全屏状态，则退出全屏
+        document.exitFullscreen().catch(error => {
+          console.error('Exit fullscreen failed:', error)
+        })
+      }
+    },
+    clearAllLinkage() {
+      this.$store.commit('clearPanelLinkageInfo')
+      bus.$emit('clear_panel_linkage', { viewId: 'all' })
+    },
+    back2Last() {
+      if (isMobile()) {
+        let parentUrl = window.location.href
+        parentUrl = localStorage.getItem('beforeJumpUrl')
+        localStorage.removeItem('beforeJumpUrl')
+        window.location.href = parentUrl
+        window.location.reload()
+        return false
+      } else {
+        const parentUrl = localStorage.getItem('beforeJumpUrl')
+        localStorage.removeItem('beforeJumpUrl')
+        window.location.href = parentUrl
+        window.location.reload()
+      }
+    },
+    exportPDF() {
+      this.$refs['widget-div'].style.display = ''
+      this.$emit('link-export-pdf')
+    },
+    setWidgetStatus() {
+      if (!this.isPublicLink || !this.$refs['widget-div']) {
+        return
+      }
+      const val = this.$refs['widget-div'].style.display
+
+      this.$refs['widget-div'].style.display = val ? '' : 'block'
+    },
+    backToTop() {
+      this.$emit('back-to-top')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.link-bar-main {
+  position: fixed;
+  display: flex;
+  z-index: 10;
+  height: 30px;
+  width: 130px;
+  bottom: 24px;
+  right: 0px;
+  border-top-left-radius: 50%;
+  border-bottom-left-radius: 50%;
+}
+
+.bar-first {
+  width: 36px;
+  border-left: 1px solid rgba(222, 224, 227, 1);
+  border-top: 1px solid rgba(222, 224, 227, 1);
+  border-bottom: 1px solid rgba(222, 224, 227, 1);
+  background-color: rgba(255, 255, 255, 1);
+  border-top-left-radius: 50%;
+  border-bottom-left-radius: 50%;
+  padding: 3px 0px 4px 8px;
+}
+
+.bar-diver {
+  width: 1px;
+  height: 18px;
+  background: rgba(187, 191, 196, 1);
+}
+
+.bar-content {
+  display: flex;
+  align-items: center;
+  width: 100px;
+  border-top: 1px solid rgba(222, 224, 227, 1);
+  border-bottom: 1px solid rgba(222, 224, 227, 1);
+  background-color: rgba(255, 255, 255, 1);
+}
+
+.link-icon-active {
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  transition: .1s;
+  border-radius: 3px;
+  padding-left: 4px;
+  text-align: center;
+
+  &:active {
+    color: #000;
+    border-color: #3a8ee6;
+    background-color: red;
+    outline: 0;
+  }
+
+  &:hover {
+    background-color: rgba(31, 35, 41, 0.1);
+    color: #3a8ee6;
+  }
+}
+</style>

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

@@ -197,10 +197,11 @@ import { listenGlobalKeyDownPreview } from '@/components/canvas/utils/shortcutKe
 import UserViewDialog from '@/components/canvas/customComponent/UserViewDialog'
 import { hexColorToRGBA } from '@/views/chart/chart/util'
 import { isMobile } from '@/utils/index'
+import LinkOptBar from '@/components/canvas/components/editor/LinkOptBar'
 
 const erd = elementResizeDetectorMaker()
 export default {
-  components: { UserViewDialog, ComponentWrapper, CanvasOptBar, PDFPreExport },
+  components: { LinkOptBar, UserViewDialog, ComponentWrapper, CanvasOptBar, PDFPreExport },
   model: {
     prop: 'show',
     event: 'change'

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

@@ -54,6 +54,24 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe7af;</span>
+                <div class="name">缩小</div>
+                <div class="code-name">&amp;#xe7af;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe641;</span>
+                <div class="name">返回</div>
+                <div class="code-name">&amp;#xe641;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe645;</span>
+                <div class="name">下载</div>
+                <div class="code-name">&amp;#xe645;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe63f;</span>
                 <div class="name">返回顶部</div>
@@ -828,9 +846,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1706079293312') format('woff2'),
+  src: url('iconfont.woff2?t=1708423795790') format('woff2'),
-       url('iconfont.woff?t=1706079293312') format('woff'),
+       url('iconfont.woff?t=1708423795790') format('woff'),
-       url('iconfont.ttf?t=1706079293312') format('truetype');
+       url('iconfont.ttf?t=1708423795790') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -856,6 +874,33 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-suoxiao1"></span>
+            <div class="name">
+              缩小
+            </div>
+            <div class="code-name">.icon-suoxiao1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-fanhui"></span>
+            <div class="name">
+              返回
+            </div>
+            <div class="code-name">.icon-fanhui
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xiazai"></span>
+            <div class="name">
+              下载
+            </div>
+            <div class="code-name">.icon-xiazai
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-back-top"></span>
             <div class="name">
@@ -2017,6 +2062,30 @@
       <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-suoxiao1"></use>
+                </svg>
+                <div class="name">缩小</div>
+                <div class="code-name">#icon-suoxiao1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-fanhui"></use>
+                </svg>
+                <div class="name">返回</div>
+                <div class="code-name">#icon-fanhui</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xiazai"></use>
+                </svg>
+                <div class="name">下载</div>
+                <div class="code-name">#icon-xiazai</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-back-top"></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=1706079293312') format('woff2'),
+  src: url('iconfont.woff2?t=1708423795790') format('woff2'),
-       url('iconfont.woff?t=1706079293312') format('woff'),
+       url('iconfont.woff?t=1708423795790') format('woff'),
-       url('iconfont.ttf?t=1706079293312') format('truetype');
+       url('iconfont.ttf?t=1708423795790') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-suoxiao1:before {
+  content: "\e7af";
+}
+
+.icon-fanhui:before {
+  content: "\e641";
+}
+
+.icon-xiazai:before {
+  content: "\e645";
+}
+
 .icon-back-top:before {
   content: "\e63f";
 }

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

@@ -5,6 +5,27 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "4425891",
+      "name": "缩小",
+      "font_class": "suoxiao1",
+      "unicode": "e7af",
+      "unicode_decimal": 59311
+    },
+    {
+      "icon_id": "526001",
+      "name": "返回",
+      "font_class": "fanhui",
+      "unicode": "e641",
+      "unicode_decimal": 58945
+    },
+    {
+      "icon_id": "4880421",
+      "name": "下载",
+      "font_class": "xiazai",
+      "unicode": "e645",
+      "unicode_decimal": 58949
+    },
     {
       "icon_id": "8224825",
       "name": "返回顶部",