157 lines
3.0 KiB
Vue
157 lines
3.0 KiB
Vue
<template lang="pug">
|
||
material-modal(:show="version.showModal" @close="handleClose")
|
||
main(:class="$style.main" v-if="version.newVersion")
|
||
h2 🚀程序更新🚀
|
||
|
||
div.scroll(:class="$style.info")
|
||
div(:class="$style.current")
|
||
h3 最新版本：{{version.newVersion.version}}
|
||
h3 当前版本：{{version.version}}
|
||
h3 版本变化：
|
||
p(v-html="version.newVersion.desc")
|
||
div(:class="$style.history" v-if="history.length")
|
||
h3 历史版本：
|
||
div(:class="$style.item" v-for="ver in history")
|
||
h4 v{{ver.version}}
|
||
p(v-html="ver.desc")
|
||
|
||
div(:class="$style.footer")
|
||
div(:class="$style.desc")
|
||
p 新版本已下载完毕，
|
||
p
|
||
| 你可以选择
|
||
strong 立即重启更新
|
||
| 或稍后
|
||
strong 关闭程序时
|
||
| 自动更新~
|
||
material-btn(:class="$style.btn" @click.onec="handleClick") 立即重启更新
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import { mapGetters, mapMutations } from 'vuex'
|
||
import { rendererSend } from '../../../common/icp'
|
||
import { checkVersion } from '../../utils'
|
||
|
||
export default {
|
||
computed: {
|
||
...mapGetters(['version']),
|
||
history() {
|
||
if (!this.version.newVersion) return []
|
||
let arr = []
|
||
let currentVer = this.version.version
|
||
this.version.newVersion.history.forEach(ver => {
|
||
if (checkVersion(currentVer, ver.version)) arr.push(ver)
|
||
})
|
||
|
||
return arr
|
||
},
|
||
},
|
||
methods: {
|
||
...mapMutations(['setVersionVisible']),
|
||
handleClose() {
|
||
this.setVersionVisible(false)
|
||
},
|
||
handleClick(event) {
|
||
this.handleClose()
|
||
event.target.disabled = true
|
||
rendererSend('quit-update')
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="less" module>
|
||
@import '../../assets/styles/layout.less';
|
||
|
||
.main {
|
||
position: relative;
|
||
padding: 15px;
|
||
max-width: 500px;
|
||
min-width: 300px;
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
justify-content: center;
|
||
// overflow-y: auto;
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
h2 {
|
||
flex: 0 0 none;
|
||
font-size: 16px;
|
||
color: @color-theme_2-font;
|
||
line-height: 1.3;
|
||
text-align: center;
|
||
margin-bottom: 15px;
|
||
}
|
||
h3 {
|
||
font-size: 14px;
|
||
line-height: 1.3;
|
||
}
|
||
}
|
||
|
||
.info {
|
||
flex: 1 1 auto;
|
||
font-size: 13px;
|
||
line-height: 1.5;
|
||
overflow-y: auto;
|
||
height: 100%;
|
||
}
|
||
.current {
|
||
> p {
|
||
padding-left: 15px;
|
||
}
|
||
}
|
||
.history {
|
||
h3 {
|
||
padding-top: 15px;
|
||
}
|
||
|
||
.item {
|
||
+ .item {
|
||
padding-top: 15px;
|
||
}
|
||
h4 {
|
||
font-weight: 700;
|
||
}
|
||
> p {
|
||
padding-left: 10px;
|
||
}
|
||
}
|
||
|
||
}
|
||
.footer {
|
||
flex: 0 0 none;
|
||
.desc {
|
||
font-size: 12px;
|
||
padding: 10px 0;
|
||
color: @color-theme;
|
||
line-height: 1.2;
|
||
strong {
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
}
|
||
.btn {
|
||
display: block;
|
||
width: 100%;
|
||
}
|
||
|
||
each(@themes, {
|
||
:global(#container.@{value}) {
|
||
.main {
|
||
h2 {
|
||
color: ~'@{color-@{value}-theme_2-font}';
|
||
}
|
||
}
|
||
.footer {
|
||
.desc {
|
||
color: ~'@{color-@{value}-theme}';
|
||
}
|
||
}
|
||
}
|
||
})
|
||
|
||
</style>
|