new-88live/components/app-update-sheet/app-update-sheet.vue

<template>
	<view v-if="visible" class="upd-mask" @tap.stop="onMaskTap">
		<view class="upd-sheet" @tap.stop>
			<view class="upd-head">
				<view class="upd-head-icon-wrap">
					<text class="upd-head-icon">↑</text>
				</view>
				<view class="upd-head-text">
					<text class="upd-title">{{ meta.title || copy.title }}</text>
					<text class="upd-version">{{ copy.latest }} {{ meta.versionName || '' }}</text>
				</view>
			</view>

			<scroll-view scroll-y class="upd-body">
				<rich-text class="upd-content" :nodes="meta.content || ''" />
			</scroll-view>

			<view v-if="download.start" class="upd-progress-wrap">
				<view class="upd-progress-bar">
					<view class="upd-progress-fill" :style="{ width: download.progress + '%' }" />
				</view>
				<text class="upd-progress-txt">{{ download.progress }}%</text>
				<text class="upd-progress-sub">
					{{ copy.downloading }}
				</text>
			</view>

			<view v-else-if="download.install" class="upd-install">
				<text class="upd-install-txt">{{ copy.installing }}</text>
			</view>

			<view v-else class="upd-actions">
				<button
					v-if="!enforce"
					class="upd-btn upd-btn--ghost"
					@tap="onIgnore"
				>
					<text class="upd-btn-txt">{{ copy.ignore }}</text>
				</button>
				<button class="upd-btn upd-btn--primary" @tap="onDownload">
					<text class="upd-btn-txt upd-btn-txt--light">{{ copy.updateNow }}</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex'

export default {
	name: 'AppUpdateSheet',
	computed: {
		...mapState('release', {
			visible: (state) => state.visible,
			meta: (state) => state.meta,
			download: (state) => state.download,
			link: (state) => state.link
		}),
		enforce() {
			return Number(this.meta && this.meta.enforce) === 1
		},
		copy() {
			const t = this.$t.bind(this)
			return {
				title: t('update.title'),
				latest: t('update.latest'),
				ignore: t('update.ignore'),
				updateNow: t('update.updateNow'),
				installing: t('update.installing'),
				downloading: t('update.downloading')
			}
		}
	},
	methods: {
		onMaskTap() {
			if (this.enforce) return
			this.onIgnore()
		},
		onIgnore() {
			this.$store.dispatch('release/ignore')
		},
		onDownload() {
			if (!this.link || !this.link.url) {
				this.$appKit.msg(this.copy.updateNow)
				return
			}
			this.$store.dispatch('release/startDownload')
		}
	}
}
</script>

<style scoped>
.upd-mask {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index: 9999;
	background: rgba(15, 23, 42, 0.45);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48rpx 40rpx;
	box-sizing: border-box;
}

.upd-sheet {
	width: 100%;
	max-width: 640rpx;
	background: #ffffff;
	border-radius: 28rpx;
	overflow: hidden;
	box-shadow: 0 24rpx 64rpx rgba(74, 140, 255, 0.18);
}

.upd-head {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 32rpx 32rpx 20rpx;
	background: linear-gradient(135deg, #4a8cff 0%, #6b5cff 100%);
}

.upd-head-icon-wrap {
	width: 88rpx;
	height: 88rpx;
	border-radius: 24rpx;
	background: rgba(255, 255, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 20rpx;
	flex-shrink: 0;
}

.upd-head-icon {
	font-size: 44rpx;
	color: #ffffff;
	font-weight: 700;
	line-height: 1;
}

.upd-head-text {
	flex: 1;
	min-width: 0;
}

.upd-title {
	display: block;
	font-size: 32rpx;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 8rpx;
}

.upd-version {
	display: block;
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.88);
}

.upd-body {
	max-height: 360rpx;
	padding: 24rpx 32rpx 8rpx;
	box-sizing: border-box;
}

.upd-content {
	font-size: 28rpx;
	line-height: 1.55;
	color: #4b5563;
}

.upd-progress-wrap {
	padding: 8rpx 32rpx 32rpx;
}

.upd-progress-bar {
	height: 12rpx;
	border-radius: 6rpx;
	background: #eef1f6;
	overflow: hidden;
	margin-bottom: 12rpx;
}

.upd-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #4a8cff 0%, #6b5cff 100%);
	border-radius: 6rpx;
}

.upd-progress-txt {
	display: block;
	font-size: 26rpx;
	color: #1a1d26;
	font-weight: 600;
	text-align: center;
}

.upd-progress-sub {
	display: block;
	margin-top: 8rpx;
	font-size: 24rpx;
	color: #8a8d9e;
	text-align: center;
}

.upd-install {
	padding: 24rpx 32rpx 36rpx;
	text-align: center;
}

.upd-install-txt {
	font-size: 28rpx;
	color: #4a8cff;
}

.upd-actions {
	display: flex;
	flex-direction: row;
	padding: 16rpx 32rpx 32rpx;
	box-sizing: border-box;
}

.upd-btn {
	flex: 1;
	margin-right: 20rpx;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 44rpx;
	margin: 0;
	padding: 0;
	border: none;
}

.upd-btn::after {
	border: none;
}

.upd-btn--ghost {
	background: #f0f3f8;
}

.upd-btn--primary {
	background: linear-gradient(135deg, #4a8cff 0%, #6b5cff 100%);
	box-shadow: 0 10rpx 28rpx rgba(74, 140, 255, 0.28);
	margin-right: 0;
}

.upd-btn-txt {
	font-size: 30rpx;
	font-weight: 600;
	color: #4b5563;
}

.upd-btn-txt--light {
	color: #ffffff;
}
</style>