youshang/erp_sb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
ZiJIe
2025-09-25 18:13:48 +08:00
parent e9c90c82a3
commit 1d0bab7804
7 changed files with 1118 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

532
electron-vue-template/src/renderer/components/common/UpdateDialog.vue Normal file
View File

@@ -0,0 +1,532 @@
<template>
<div>
<div class="version-info" @click="autoCheck">v{{ version || '-' }}</div>
<el-dialog v-model="show" width="522px" :close-on-click-modal="false" align-center class="update-dialog" title="软件更新"
:show-close="true"
custom-class="update-dialog">
<!-- 状态：检查更新 -->
<div v-if="stage === 'check'" class="update-content">
<div class="update-layout">
<div class="left-pane">
<img src="/icon/icon.png" class="app-icon app-icon-large" alt="App Icon" />
</div>
<div class="right-pane">
<p class="announce">新版本的"{{ appName || 'App Name' }}"已经发布</p>
<p class="desc">{{ (appName || 'App Name') }} {{ info.latestVersion || '-' }} 可供下载，您现在的版本是 {{ version || '-' }}，要现在下载吗?</p>
<div class="update-details form">
<h4>更新信息</h4>
<el-input
v-model="info.updateNotes"
type="textarea"
class="notes-box"
:rows="6"
readonly
resize="none"
placeholder="• 优化了用户界面体验&#10;• 修复了已知问题&#10;• 提升了系统稳定性&#10;• 增加了新的功能模块&#10;• 优化了数据处理性能" />
</div>
<div class="update-actions row">
<div class="auto-update-section">
<el-checkbox v-model="autoUpdateSelected">以后自动下载并安装更新</el-checkbox>
</div>
<div class="update-buttons">
<div class="left-actions">
<el-button size="small" @click="show=false">跳过这个版本</el-button>
</div>
<div class="right-actions">
<el-button size="small" @click="show=false">稍后提醒</el-button>
<el-button size="small" type="primary" @click="start">安装更新</el-button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 状态：正在下载 -->
<div v-else-if="stage === 'downloading'" class="update-content">
<div class="update-header text-center">
<img src="/icon/icon.png" class="app-icon" alt="App Icon" />
<h3>正在更新 {{ appName || 'erp' }}</h3>
<p>正在下载新版...</p>
</div>
<div class="download-progress">
<div class="progress-info">
<span>{{ prog.current }} / {{ prog.total }}</span>
</div>
<el-progress
:percentage="prog.percentage"
:show-text="false"
:stroke-width="6"
color="#409EFF" />
<div class="progress-details">
<span>{{ prog.percentage }}%</span>
<span v-if="prog.speed">{{ prog.speed }}</span>
</div>
</div>
</div>
<!-- 状态：下载完成 -->
<div v-else-if="stage === 'completed'" class="update-content">
<div class="update-header text-center">
<img src="/icon/icon.png" class="app-icon" alt="App Icon" />
<h3>正在更新 {{ appName || '我了个电商' }}</h3>
<p>可以开始安装了</p>
</div>
<div class="download-progress">
<div class="progress-info">
<span>{{ prog.current }} /{{ prog.total }}</span>
</div>
<el-progress
:percentage="100"
:show-text="false"
:stroke-width="6"
color="#67C23A" />
</div>
<div class="update-buttons">
<el-button @click="cancelDownload">稍后更新</el-button>
<el-button type="primary" @click="installUpdate">安装并重新启动</el-button>
</div>
</div>
</el-dialog>
</div>
</template>
<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
const props = defineProps<{
modelValue: boolean
}>()
const emit = defineEmits<{
'update:modelValue': [value: boolean]
}>()
const show = computed({
get: () => props.modelValue,
set: (value) => emit('update:modelValue', value)
})
type Stage = 'check' | 'downloading' | 'completed'
const stage = ref<Stage>('check')
const appName = ref('ERP客户端')
const autoUpdateSelected = ref(false)
const prog = ref({ percentage: 0, current: '0 MB', total: '0 MB', speed: '' })
const version = ref('2.0.0') // 当前版本号
const downloadedFilePath = ref('') // 下载文件路径
const info = ref({
latestVersion: '2.4.8',
downloadUrl: 'https://qiniu.pxdj.tashowz.com/2025/09/f492725041ba43fb8ded9344ec08d646.exe',
updateNotes: '• 优化了用户界面体验\n• 修复了已知问题\n• 提升了系统稳定性\n• 增加了新的功能模块\n• 优化了数据处理性能'
})
// 自动检查更新
async function autoCheck() {
try {
ElMessage.info('正在检查更新...')
console.log('手动检查更新...')
if (window.electronAPI?.checkForUpdates) {
await window.electronAPI.checkForUpdates()
} else {
// 如果没有 API，直接显示更新对话框
setTimeout(() => {
show.value = true
stage.value = 'check'
}, 500)
}
} catch (error) {
console.error('检查更新失败:', error)
ElMessage.error('检查更新失败')
}
}
// 开始安装更新
async function start() {
stage.value = 'downloading'
prog.value = { percentage: 0, current: '0 MB', total: '0 MB', speed: '' }
try {
if (info.value.downloadUrl && window.electronAPI?.downloadUpdate) {
console.log('开始下载:', info.value.downloadUrl)
// 直接打开浏览器下载，不模拟进度
const result = await window.electronAPI.downloadUpdate(info.value.downloadUrl)
if (result.success) {
ElMessage.success('下载链接已在浏览器中打开，请等待下载完成后手动安装')
show.value = false
} else {
throw new Error(result.error)
}
} else {
ElMessage.error('下载链接不可用')
show.value = false
}
} catch (error) {
console.error('下载失败:', error)
ElMessage.error('下载失败: ' + error)
show.value = false
}
}
// 取消下载
function cancelDownload() {
show.value = false
stage.value = 'check'
}
// 安装更新
async function installUpdate() {
try {
ElMessage.success('正在安装更新，程序将自动重启...')
console.log('准备安装更新')
// 通过 IPC 重启应用
if (window.electronAPI?.restartApp) {
setTimeout(async () => {
await window.electronAPI.restartApp()
}, 1000) // 延迟1秒重启
} else {
// 如果没有重启API，手动关闭窗口
setTimeout(() => {
window.close()
}, 1000)
}
show.value = false
} catch (error) {
console.error('重启失败:', error)
ElMessage.error('重启失败，请手动重启应用')
}
}
// 监听对话框显示
watch(show, async (visible) => {
if (visible) {
await fetchUpdateInfo()
stage.value = 'check'
}
})
async function fetchUpdateInfo() {
try {
// 获取当前版本
if (window.electronAPI?.getVersion) {
const currentVersion = await window.electronAPI.getVersion()
version.value = currentVersion
}
} catch (error) {
console.error('获取更新信息失败:', error)
}
}
// 监听主进程的更新通知
onMounted(() => {
if (window.electronAPI?.onShowUpdateDialog) {
window.electronAPI.onShowUpdateDialog((updateData) => {
console.log('收到更新通知:', updateData)
// 更新信息
if (updateData.currentVersion) {
version.value = updateData.currentVersion
}
if (updateData.latestVersion) {
info.value.latestVersion = updateData.latestVersion
}
if (updateData.downloadUrl) {
info.value.downloadUrl = updateData.downloadUrl
}
if (updateData.updateNotes) {
info.value.updateNotes = updateData.updateNotes
}
// 显示对话框
show.value = true
stage.value = 'check'
})
}
// 初始化获取版本信息
fetchUpdateInfo()
})
// 暴露方法供父组件调用
defineExpose({
showUpdate: (updateData: any) => {
if (updateData.currentVersion) version.value = updateData.currentVersion
if (updateData.latestVersion) info.value.latestVersion = updateData.latestVersion
if (updateData.updateNotes) info.value.updateNotes = updateData.updateNotes
if (updateData.downloadUrl) info.value.downloadUrl = updateData.downloadUrl
show.value = true
}
})
</script>
<style scoped>
.version-info {
position: fixed;
right: 10px;
bottom: 10px;
background: rgba(255,255,255,0.9);
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
color: #909399;
z-index: 1000;
cursor: pointer;
user-select: none;
}
/* 更新对话框整体样式 */
:deep(.update-dialog .el-dialog) {
border-radius: 16px;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.15);
}
:deep(.update-dialog .el-dialog__header) {
display: block;
text-align: left;
}
:deep(.update-dialog .el-dialog__headerbtn) {
top: 12px;
right: 20px;
width: 32px;
height: 32px;
font-size: 18px;
border-radius: 50%;
background-color: transparent;
}
:deep(.update-dialog .el-dialog__headerbtn:hover) {
background-color: #f5f5f5;
}
:deep(.update-dialog .el-dialog__close) {
color: #909399;
font-weight: 400;
}
:deep(.update-dialog .el-dialog__close:hover) {
color: #409EFF;
}
:deep(.update-dialog .el-dialog__body) {
padding: 0;
}
.update-content {
text-align: left;
}
.update-layout {
display: grid;
grid-template-columns: 88px 1fr;
align-items: start;
margin-bottom: 5px;
}
.left-pane { display: flex; flex-direction: column; align-items: flex-start; }
.app-icon-large { width: 70px; height: 70px; border-radius: 12px; margin: 4px 0 0 0; }
.right-pane { min-width: 0; }
.right-pane .announce { font-size: 16px; font-weight: 600; color: #1f2937; margin: 4px 0 6px; word-break: break-word; }
.right-pane .desc { font-size: 13px; color: #6b7280; line-height: 1.6; margin: 0; word-break: break-word; }
.update-header {
display: flex;
align-items: flex-start;
margin-bottom: 24px;
}
.update-header.text-center {
text-align: center;
flex-direction: column;
align-items: center;
}
.app-icon {
width: 70px;
height: 70px;
border-radius: 12px;
margin-right: 16px;
flex-shrink: 0;
}
.update-header.text-center .app-icon {
margin-right: 0;
margin-bottom: 16px;
}
.update-header-content {
flex: 1;
min-width: 0;
}
.update-header h3 {
font-size: 20px;
font-weight: 600;
margin: 16px 0 8px 0;
color: #1f2937;
}
.update-header p {
font-size: 14px;
color: #6b7280;
margin: 0;
line-height: 1.5;
}
.update-details {
border-radius: 8px;
padding: 0;
margin: 12px 0 8px 0;
}
.update-details.form { max-height: none; }
.notes-box :deep(textarea.el-textarea__inner) { white-space: pre-wrap; }
.update-details h4 {
font-size: 14px;
font-weight: 600;
color: #374151;
margin: 0 0 8px 0;
}
.update-details p {
font-size: 13px;
color: #6b7280;
line-height: 1.6;
margin: 0 0 16px 0;
white-space: pre-wrap;
}
.update-details p:last-child {
margin-bottom: 0;
}
.auto-update-section {
margin: 0;
}
:deep(.auto-update-section .el-checkbox) {
color: #374151;
font-size: 14px;
}
.update-actions.row {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.update-buttons {
display: flex;
justify-content: space-between;
gap: 12px;
}
/* 检查更新页：按钮单独一行并靠右，不拉伸 */
.update-actions.row .update-buttons { justify-content: space-between; }
:deep(.update-actions.row .update-buttons .el-button) { flex: none; min-width: 100px; }
.left-actions { display: flex; gap: 12px; }
.right-actions { display: flex; }
.update-buttons.text-center {
justify-content: center;
}
:deep(.update-buttons .el-button) {
flex: 1;
height: 32px;
font-size: 13px;
border-radius: 8px;
}
:deep(.update-buttons.text-center .el-button) {
flex: none;
min-width: 140px;
}
/* 下载进度区域 */
.download-progress {
margin: 24px 0;
}
.progress-info {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
font-size: 14px;
color: #6b7280;
}
.progress-details {
margin-top: 8px;
font-size: 12px;
color: #909399;
display: flex;
justify-content: space-between;
}
/* 进度条自定义样式 */
:deep(.el-progress-bar__outer) {
border-radius: 4px;
background-color: #e5e7eb;
}
:deep(.el-progress-bar__inner) {
border-radius: 4px;
transition: width 0.3s ease;
}
/* 按钮样式调整 */
:deep(.update-buttons .el-button--primary) {
background-color: #2563eb;
border-color: #2563eb;
font-weight: 500;
}
:deep(.update-buttons .el-button--primary:hover) {
background-color: #1d4ed8;
border-color: #1d4ed8;
}
:deep(.update-buttons .el-button:not(.el-button--primary)) {
background-color: #f3f4f6;
border-color: #d1d5db;
color: #374151;
font-weight: 500;
}
:deep(.update-buttons .el-button:not(.el-button--primary):hover) {
background-color: #e5e7eb;
border-color: #9ca3af;
}
/* 响应式调整 */
@media (max-width: 480px) {
.update-content {
padding: 24px 16px;
}
.update-buttons {
flex-direction: column;
}
:deep(.update-buttons .el-button) {
flex: none;
}
}
</style>