ngfrontend/src/App.vue

<template>
  <div id="app">
    <router-view />
    <el-dialog
      v-if="dialogVisible"
      :title="$t('notificationProps.title')"
      :visible.sync="dialogVisible"
      width="320px"
      custom-class="message_refresh"
      :close-on-click-modal="false"
      top="0vh"
    >
      <span>{{ $t('notificationProps.description') }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ $t('notificationProps.cancelButtonText') }}</el-button>
        <el-button type="primary" @click="notificationRefresh">{{ $t('notificationProps.confirmButtonText') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import store from './store'

export default {
  name: 'App',
  data() {
    return {
      dialogVisible: false
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const self = this
      const language = store.state.app.language
      document.body.addEventListener('plugin_web_update_notice', (e) => {
        const { version, options } = e.detail
        console.log(version, options)
        self.dialogVisible = true
        // if (language === 'en') {
        //   self.$confirm('System update detected, please refresh the page？', '📢 System update', {
        //     distinguishCancelAndClose: true,
        //     closeOnClickModal: false,
        //     customClass: 'message_refresh',
        //     confirmButtonText: 'refresh',
        //     cancelButtonText: 'dismiss'
        //   })
        //     .then(() => {
        //       location.reload()
        //     })
        //     .catch(action => {
        //       self.$message({
        //         type: 'info',
        //         message: action === 'cancel'
        //           ? 'Abandon'
        //           : 'Stay on the current page'
        //       })
        //     })
        // } else {
        //   self.$confirm('检测到系统更新，请刷新页面？', '📢 系统更新', {
        //     distinguishCancelAndClose: true,
        //     closeOnClickModal: false,
        //     customClass: 'message_refresh',
        //     confirmButtonText: '刷新',
        //     cancelButtonText: '放弃'
        //   })
        //     .then(() => {
        //       location.reload()
        //     })
        //     .catch(action => {
        //       self.$message({
        //         type: 'info',
        //         message: action === 'cancel'
        //           ? '放弃'
        //           : '停留在当前页面'
        //       })
        //     })
        // }
      })
    },
    notificationRefresh() {
      location.reload()
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" >
 .message_refresh{
   width: 320px;
   top: 50%;
   transform: translateY(-50%);
 }
</style>