NEZ-878 feat: 界面检测页面是否开启缩放，开启时友好提示

nezha-fronted/src/App.vue

@@ -1,5 +1,6 @@
 <template>
   <div id="app">
+    <browser-window-zoom />
     <keep-alive>
       <router-view style="height: 100%"/>
     </keep-alive>
@@ -7,8 +8,12 @@
 </template>
 
 <script>
+import browserWindowZoom from '@/components/common/browserWindowZoom'
 export default {
   name: 'App',
+  components: {
+    browserWindowZoom
+  },
   async created () {
     const Timestamp = new Date().getTime()
     const url = 'static/config.json?Timestamp=' + Timestamp

nezha-fronted/src/assets/css/nzIcon.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "nz-icon"; /* Project id 2030432 */
-  src: url('./font/iconfont.woff2?t=1625712906789') format('woff2'),
+  src: url('./font/iconfont.woff2?t=1628215874870') format('woff2'),
-  url('./font/iconfont.woff?t=1625712906789') format('woff'),
+  url('./font/iconfont.woff?t=1628215874870') format('woff'),
-  url('./font/iconfont.ttf?t=1625712906789') format('truetype');
+  url('./font/iconfont.ttf?t=1628215874870') format('truetype');
 }
 
 .nz-icon {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.nz-icon-about-full:before {
+  content: "\e735";
+}
+
+.nz-icon-batchadd:before {
+  content: "\e734";
+}
+
 .nz-icon-rectangle1:before {
   content: "\e730";
 }

nezha-fronted/src/components/common/browserWindowZoom.vue

@@ -0,0 +1,134 @@
+<template>
+  <transition name="el-zoom-in-center">
+    <div v-show="browserWindowZoom" class="zoom">
+      <i class="nz-icon nz-icon-about-full"></i>
+      <span>{{$t('tip.zoomStatusPrompt')}}</span>
+      <button class="zoom-button" @click="doNotAskAgain">{{$t('tip.doNotAskAgain')}}</button>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'browserWindowZoom',
+  data () {
+    return {
+      browserWindowZoom: false,
+      timer: null,
+      flag: true
+    }
+  },
+  mounted () {
+    // 获取localStorage中的key值
+    const data = localStorage.getItem('browserZoom')
+    // 判断是否执行缩放弹框功能
+    if (data != 0) {
+      window.addEventListener('resize', this.browserZoom)
+    }
+  },
+  beforeDestroy () {
+    // 移除定时器
+    clearInterval(this.timer)
+  },
+  methods: {
+    doNotAskAgain () {
+      // 点击事件隐藏弹框
+      this.browserWindowZoom = false
+      // 存储localStorage的key值
+      localStorage.setItem('browserZoom', 0)
+      // 移除事件
+      window.removeEventListener('resize', this.browserZoom)
+    },
+    browserZoom () {
+      // 初始缩放比例
+      let originPixelRatio = localStorage.devicePixelRatio
+      if (!originPixelRatio) {
+        originPixelRatio = window.devicePixelRatio
+        // 整数才保存
+        if (Number.isInteger(originPixelRatio)) {
+          localStorage.devicePixelRatio = originPixelRatio
+        }
+      }
+      let lastPixelRatio = originPixelRatio
+      const currentPixelRatio = window.devicePixelRatio
+      if (currentPixelRatio !== lastPixelRatio) {
+        // console.log('缩放比例是：' + Math.round(1000 * (currentPixelRatio / originPixelRatio)) / 10 + '%');
+        // 计算缩放百分比
+        const zoom = Math.round(1000 * (currentPixelRatio / originPixelRatio)) / 10 + '%'
+        if (zoom != '100%') {
+          // 缩放时显示弹框
+          this.browserWindowZoom = true
+          let flag = true
+          // 防止重复触发
+          // 定时器5秒后隐藏弹框
+          if (flag === true) {
+            this.timer = setTimeout(() => {
+              this.browserWindowZoom = false
+            }, 5000)
+            flag = false
+          }
+          flag = true
+        }
+      }
+      // 记住上一次的设备像素比
+      lastPixelRatio = currentPixelRatio
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .transition-box {
+    margin-bottom: 10px;
+    width: 200px;
+    height: 100px;
+    border-radius: 4px;
+    background-color: #409EFF;
+    text-align: center;
+    color: #fff;
+    padding: 40px 20px;
+    box-sizing: border-box;
+    margin-right: 20px;
+  }
+  .zoom {
+    background: #F9F9F9;
+    border: 1px solid #DBDBDB;
+    border-radius: 2px;
+    width: 400px;
+    height: 108px;
+    position: absolute;
+    z-index: 1;
+    left: 50%;
+    top: 50px;
+    margin-left: -186px;
+    span {
+      font-family: Roboto-Regular;
+      margin-top: 15px;
+      font-size: 14px;
+      color: #666666;
+      line-height: 20px;
+      font-weight: 400;
+      width: 350px;
+      height: 40px;
+      margin-left: 40px;
+      display: inline-block;
+    }
+    i {
+      position: absolute;
+      color: #FA901C;
+      top: 15px;
+      left: 12px;
+    }
+    .zoom-button {
+      margin-top: 10px;
+      margin-left: 39px;
+      border: 1px solid #DBDBDB;
+      border-radius: 4px;
+      background-color: #F9F9F9;
+      color: #000;
+      font-style: italic;
+      font-weight: 900;
+      padding: 4px 10px;
+    }
+  }
+</style>

nezha-fronted/src/components/common/language/cn.js

@@ -570,6 +570,8 @@ const cn = {
     resetPrompt: '确认重置吗？',
     confirmBatchDelete: '确定删除这{0}条数据吗？',
     assetConfirmDelete: '关联的Endpoint和告警将会被删除，确认删除吗？',
+    zoomStatusPrompt: '您的浏览器目前处于缩放状态，页面可能会出现错位，建议100%大小。',
+    doNotAskAgain: '不再询问',
     yes: '是',
     no: '否',
     deleteSuccess: '删除成功',

nezha-fronted/src/components/common/language/en.js

@@ -577,6 +577,8 @@ const en = {
     resetPrompt: 'Are you sure to reset?',
     confirmBatchDelete: 'Are you sure to delete these {0} pieces of data',
     assetConfirmDelete: 'Related endpoints and alerts will be removed, are you sure you want to delete this asset?', // Related endpoints and alerts will be removed, are you sure you want to delete this asset?
+    zoomStatusPrompt: 'Your browser is currently in zoom state, the page may appear dislocation, the proposed 100% size.',
+    doNotAskAgain: 'Do not ask again',
     yes: 'Yes', // "是"
     no: 'No', // No
     deleteSuccess: 'Delete success', // "删除成功"