mirror of
https://github.com/LifeArchiveProject/WeChatDataAnalysis.git
synced 2026-02-19 06:10:52 +08:00
feat(app-shell): 桌面端集成自动更新(electron-updater)
- 集成 electron-updater:检查更新/下载/安装/忽略此版本,并推送下载进度到前端 - 打包版启动后自动检查更新;托盘菜单支持手动检查 - preload 暴露 updater IPC + __brand 标记;前端新增更新弹窗与设置页版本/检查更新入口 - 补全发布配置:artifactName/publish;release workflow 增加上传 latest.yml
This commit is contained in:
164
frontend/components/DesktopUpdateDialog.vue
Normal file
164
frontend/components/DesktopUpdateDialog.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div v-if="open && info" class="fixed inset-0 z-[9999] flex items-center justify-center">
|
||||
<div class="absolute inset-0 bg-black/40" @click="onBackdropClick" />
|
||||
|
||||
<div class="relative w-[min(520px,calc(100vw-32px))] rounded-lg bg-white shadow-xl border border-gray-200">
|
||||
<button
|
||||
class="absolute right-3 top-3 h-8 w-8 rounded-md text-gray-500 hover:bg-gray-100 hover:text-gray-700"
|
||||
type="button"
|
||||
@click="emitClose"
|
||||
aria-label="Close"
|
||||
>
|
||||
<span class="text-xl leading-none">×</span>
|
||||
</button>
|
||||
|
||||
<div class="px-5 pt-5 pb-4">
|
||||
<div class="text-xs text-gray-500">
|
||||
{{ readyToInstall ? '更新已下载完成' : '发现新版本' }}
|
||||
</div>
|
||||
<div class="mt-1 text-lg font-semibold text-gray-900">
|
||||
{{ info.version || '—' }}
|
||||
</div>
|
||||
|
||||
<div v-if="readyToInstall" class="mt-2 text-xs text-gray-600">
|
||||
你可以选择现在重启安装,或稍后再安装。
|
||||
</div>
|
||||
|
||||
<div class="mt-4 rounded-md border border-gray-200 bg-gray-50 p-3">
|
||||
<div class="text-xs font-medium text-gray-700">更新内容</div>
|
||||
<div class="mt-2 text-xs text-gray-700 whitespace-pre-wrap break-words">
|
||||
{{ info.releaseNotes || '修复了一些已知问题,提升了稳定性。' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="mt-3 text-xs text-red-600 whitespace-pre-wrap break-words">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<div v-if="isDownloading" class="mt-4">
|
||||
<div class="flex items-center justify-between gap-3 text-xs text-gray-600">
|
||||
<span v-if="speedText">{{ speedText }}</span>
|
||||
<span v-else>下载中...</span>
|
||||
<span>{{ percentText }}</span>
|
||||
<span v-if="remainingText">剩余 {{ remainingText }}</span>
|
||||
</div>
|
||||
<div class="mt-2 h-2 w-full rounded bg-gray-200 overflow-hidden">
|
||||
<div class="h-2 bg-emerald-500" :style="{ width: `${percent}%` }" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="isDownloading" class="mt-5 flex items-center justify-end gap-2">
|
||||
<button
|
||||
class="px-3 py-1.5 rounded-md border border-gray-200 bg-white text-sm text-gray-700 hover:bg-gray-50"
|
||||
type="button"
|
||||
@click="emitClose"
|
||||
>
|
||||
后台下载
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="mt-5 flex items-center justify-end gap-2">
|
||||
<button
|
||||
class="px-3 py-1.5 rounded-md border border-gray-200 bg-white text-sm text-gray-700 hover:bg-gray-50"
|
||||
type="button"
|
||||
@click="emitClose"
|
||||
>
|
||||
稍后
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="readyToInstall"
|
||||
class="px-3 py-1.5 rounded-md bg-emerald-600 text-white text-sm hover:bg-emerald-700"
|
||||
type="button"
|
||||
@click="emitInstall"
|
||||
>
|
||||
立即重启安装
|
||||
</button>
|
||||
|
||||
<template v-else>
|
||||
<button
|
||||
v-if="hasIgnore"
|
||||
class="px-3 py-1.5 rounded-md border border-gray-200 bg-white text-sm text-gray-700 hover:bg-gray-50"
|
||||
type="button"
|
||||
@click="emitIgnore"
|
||||
>
|
||||
忽略此版本
|
||||
</button>
|
||||
<button
|
||||
class="px-3 py-1.5 rounded-md bg-emerald-600 text-white text-sm hover:bg-emerald-700"
|
||||
type="button"
|
||||
@click="emitUpdate"
|
||||
>
|
||||
立即更新
|
||||
</button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
open: { type: Boolean, default: false },
|
||||
info: { type: Object, default: null }, // { version, releaseNotes }
|
||||
isDownloading: { type: Boolean, default: false },
|
||||
readyToInstall: { type: Boolean, default: false },
|
||||
progress: { type: [Number, Object], default: () => ({ percent: 0 }) },
|
||||
error: { type: String, default: "" },
|
||||
hasIgnore: { type: Boolean, default: true },
|
||||
});
|
||||
|
||||
const emit = defineEmits(["close", "update", "install", "ignore"]);
|
||||
|
||||
const safeProgress = computed(() => {
|
||||
if (typeof props.progress === "number") return { percent: props.progress };
|
||||
if (props.progress && typeof props.progress === "object") return props.progress;
|
||||
return { percent: 0 };
|
||||
});
|
||||
|
||||
const percent = computed(() => {
|
||||
const p = Number(safeProgress.value?.percent || 0);
|
||||
if (!Number.isFinite(p)) return 0;
|
||||
return Math.max(0, Math.min(100, p));
|
||||
});
|
||||
|
||||
const percentText = computed(() => `${percent.value.toFixed(0)}%`);
|
||||
|
||||
const formatBytes = (bytes) => {
|
||||
const b = Number(bytes || 0);
|
||||
if (!Number.isFinite(b) || b <= 0) return "0 B";
|
||||
const k = 1024;
|
||||
const sizes = ["B", "KB", "MB", "GB", "TB"];
|
||||
const i = Math.floor(Math.log(b) / Math.log(k));
|
||||
const idx = Math.max(0, Math.min(i, sizes.length - 1));
|
||||
return `${(b / Math.pow(k, idx)).toFixed(1)} ${sizes[idx]}`;
|
||||
};
|
||||
|
||||
const speedText = computed(() => {
|
||||
const bps = safeProgress.value?.bytesPerSecond;
|
||||
if (bps == null) return "";
|
||||
return `${formatBytes(bps)}/s`;
|
||||
});
|
||||
|
||||
const remainingText = computed(() => {
|
||||
const s = safeProgress.value?.remaining;
|
||||
const sec = Number(s);
|
||||
if (!Number.isFinite(sec)) return "";
|
||||
if (sec < 60) return `${Math.ceil(sec)} 秒`;
|
||||
const min = Math.floor(sec / 60);
|
||||
const rem = Math.ceil(sec % 60);
|
||||
return `${min} 分 ${rem} 秒`;
|
||||
});
|
||||
|
||||
const emitClose = () => emit("close");
|
||||
const emitUpdate = () => emit("update");
|
||||
const emitInstall = () => emit("install");
|
||||
const emitIgnore = () => emit("ignore");
|
||||
|
||||
const onBackdropClick = () => {
|
||||
emitClose();
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user