github.com/easysoft/zendata@v0.0.0-20240513203326-705bd5a7fd67/ui/src/layout/Update.vue (about)

     1  <template>
     2    <div class="right-top-update-main">
     3      <div v-if="version" class="version">V{{version}}</div>
     4  
     5      <a-modal :title="$t('update.title')"
     6               :visible="isVisible"
     7               @cancel="onCancel"
     8               :maskClosable="false"
     9               class="update-modal">
    10        <div>
    11          {{ $t('update.new.pre') }}<b>{{newVersion}}</b>{{ $t('update.new.suf') }}
    12        </div>
    13  
    14        <div v-if="downloadingPercent > 0">
    15          <a-progress :percent="downloadingPercent" />
    16        </div>
    17  
    18        <div v-if="errMsg" class="errors">
    19          <div class="border">{{ $t('update.failed') }}</div>
    20          <div>{{errMsg}}</div>
    21        </div>
    22  
    23        <template #footer>
    24          <div v-if="!updateSuccess">
    25            <a-button @click="update" type="primary">{{ $t('update.update') }}</a-button>
    26            <a-button @click="defer">{{ $t('update.notice.tomorrow') }}</a-button>
    27            <a-button @click="skip">{{ $t('update.notice.skip') }}</a-button>
    28          </div>
    29  
    30          <div v-if="updateSuccess">
    31            <a-button @click="rebootNow" type="primary">{{ $t('update.reboot') }}</a-button>
    32            <a-button @click="rebootLater">{{ $t('update.pending') }}</a-button>
    33          </div>
    34        </template>
    35      </a-modal>
    36    </div>
    37  </template>
    38  
    39  <script>
    40  import {
    41    electronMsgUpdate,
    42    electronMsgDownloading,
    43    skippedVersion, ignoreUtil, electronMsgDownloadSuccess, electronMsgUpdateFail, electronMsgReboot,
    44  } from "../config/settings.js";
    45  import {getCache, setCache} from "../utils/localCache.js";
    46  
    47  export default {
    48    name: 'Update',
    49    components: {
    50    },
    51    data() {
    52      let isVisible = false
    53      let currVersion = ''
    54      let newVersion = ''
    55      let forceUpdate = false
    56      let downloadingPercent = 0
    57      let isElectron = false
    58      let ipcRenderer = undefined
    59      let version = null
    60      let updateSuccess = false
    61      let errMsg = ''
    62  
    63      return {
    64        isVisible,
    65        currVersion,
    66        newVersion,
    67        forceUpdate,
    68        downloadingPercent,
    69        ipcRenderer,
    70        isElectron,
    71        version,
    72        updateSuccess,
    73        errMsg,
    74      }
    75    },
    76  
    77    created() {
    78      console.log('created')
    79      this.isElectron = !!window.require
    80  
    81      if (this.isElectron) {
    82        const remote = window.require('@electron/remote')
    83        this.version = remote.getGlobal('sharedObj').version
    84      }
    85  
    86      if (this.isElectron && !this.ipcRenderer) {
    87        this.ipcRenderer = window.require('electron').ipcRenderer
    88  
    89        console.log('ipcRenderer', this.ipcRenderer)
    90        this.ipcRenderer.on(electronMsgUpdate, async (event, data) => {
    91          console.log('update msg from electron', data)
    92          this.currVersion = data.currVersionStr
    93          this.newVersion = data.newVersionStr
    94          this.forceUpdate = data.forceUpdate
    95  
    96          const skippedVersionVal = await getCache(skippedVersion);
    97          const ignoreUtilVal = await getCache(ignoreUtil);
    98          if (skippedVersionVal === this.newVersion || Date.now() < ignoreUtilVal) return;
    99  
   100          this.isVisible = true
   101        })
   102  
   103        this.ipcRenderer.on(electronMsgDownloading, async (event, data) => {
   104          console.log('downloading msg from electron', data);
   105          this.downloadingPercent = Math.round(data.percent * 100);
   106        })
   107        this.ipcRenderer.on(electronMsgDownloadSuccess, async (event, data) => {
   108          console.log('md5 checking success msg from electron', data);
   109          this.updateSuccess = true
   110        })
   111        this.ipcRenderer.on(electronMsgUpdateFail, async (event, data) => {
   112          console.log('downloading fail msg from electron', data);
   113          this.errMsg = data.err
   114        })
   115      }
   116    },
   117    mounted() {
   118    },
   119  
   120    methods: {
   121      update() {
   122        console.log('update')
   123        this.ipcRenderer.send(electronMsgUpdate, {
   124          currVersion: this.currVersion,
   125          newVersion: this.newVersion,
   126          forceUpdate: this.forceUpdate
   127        })
   128      },
   129      rebootNow() {
   130        console.log('rebootNow')
   131        this.ipcRenderer.send(electronMsgReboot, {})
   132      },
   133      rebootLater() {
   134        console.log('rebootLater')
   135        this.onCancel()
   136      },
   137      defer() {
   138        console.log('defer')
   139        setCache(ignoreUtil, Date.now() + 24 * 3600);
   140        this.isVisible = false
   141      },
   142      skip() {
   143        console.log('skip')
   144        setCache(skippedVersion, this.newVersion);
   145        this.isVisible = false
   146      },
   147  
   148      onCancel() {
   149        console.log('onCancel')
   150        this.isVisible = false
   151      },
   152    }
   153  }
   154  
   155  
   156  </script>
   157  
   158  <style lang="less">
   159  .right-top-update-main {
   160    position: absolute;
   161    right: 5px;
   162    bottom: 0;
   163  }
   164  
   165  .update-modal{
   166    .ant-modal-footer {
   167      text-align: center;
   168    }
   169  
   170    .errors {
   171      margin-top: 12px;
   172      .border {
   173        margin-bottom: 3px;
   174        font-weight: bolder;
   175      }
   176    }
   177  }
   178  </style>