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>