feat(update): 重构自动更新系统，使用 electron-updater 替代手动下载

- CI 构建 macOS 拆分为 x64/arm64 分别构建，合并 latest-mac.yml
- 主进程使用 electron-updater 管理检查、下载、安装全流程
- 渲染进程 UpdateModal 改为响应式同步主进程更新状态
- IPC 通道统一为 app-update:* 系列
- 窗口拦截外部链接在系统浏览器打开
- 新增 5 语言更新相关国际化文案

src/renderer/components/common/DisclaimerModal.vue

@@ -1,7 +1,6 @@
 <template>
   <Teleport to="body">
     <Transition name="disclaimer-modal">
-      <!-- 免责声明页面 -->
       <div
         v-if="showDisclaimer"
         class="fixed inset-0 z-[999999] flex items-center justify-center bg-black/60 backdrop-blur-md"
@@ -9,17 +8,13 @@
         <div
           class="w-full max-w-md mx-4 bg-white dark:bg-gray-900 rounded-3xl overflow-hidden shadow-2xl"
         >
-          <!-- 顶部渐变装饰 -->
           <div class="h-2 bg-gradient-to-r from-amber-400 via-orange-500 to-red-500"></div>
-          <!-- 标题 -->
           <h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white px-6 mt-10">
             {{ t('comp.disclaimer.title') }}
           </h2>
 
-          <!-- 内容区域 -->
           <div class="px-6 py-6">
             <div class="space-y-4 text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
-              <!-- 警告框 -->
               <div
                 class="p-4 rounded-2xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800"
               >
@@ -31,7 +26,6 @@
                 </div>
               </div>
 
-              <!-- 免责条款列表 -->
               <div class="space-y-3">
                 <div class="flex items-start gap-3">
                   <div
@@ -63,7 +57,6 @@
             </div>
           </div>
 
-          <!-- 操作按钮 -->
           <div class="px-6 pb-8 space-y-3">
             <button
               @click="handleAgree"
@@ -86,7 +79,6 @@
       </div>
     </Transition>
 
-    <!-- 捐赠页面 -->
     <Transition name="donate-modal">
       <div
         v-if="showDonate"
@@ -95,10 +87,8 @@
         <div
           class="w-full max-w-md mx-4 bg-white dark:bg-gray-900 rounded-3xl overflow-hidden shadow-2xl"
         >
-          <!-- 顶部渐变装饰 -->
           <div class="h-2 bg-gradient-to-r from-pink-400 via-rose-500 to-red-500"></div>
 
-          <!-- 图标区域 -->
           <div class="flex justify-center pt-8 pb-4">
             <div
               class="w-20 h-20 rounded-2xl bg-gradient-to-br from-pink-400 to-rose-500 flex items-center justify-center shadow-lg"
@@ -107,7 +97,6 @@
             </div>
           </div>
 
-          <!-- 标题 -->
           <h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white px-6">
             {{ t('comp.donate.title') }}
           </h2>
@@ -116,9 +105,7 @@
             {{ t('comp.donate.subtitle') }}
           </p>
 
-          <!-- 内容区域 -->
           <div class="px-6 py-6">
-            <!-- 提示信息 -->
             <div
               class="p-4 rounded-2xl bg-rose-50 dark:bg-rose-900/20 border border-rose-200 dark:border-rose-800 mb-6"
             >
@@ -130,7 +117,6 @@
               </div>
             </div>
 
-            <!-- 捐赠方式 -->
             <div class="grid grid-cols-2 gap-4">
               <button
                 @click="openDonateLink('wechat')"
@@ -158,7 +144,6 @@
             </div>
           </div>
 
-          <!-- 进入应用按钮 -->
           <div class="px-6 pb-8">
             <button
               @click="handleEnterApp"
@@ -178,7 +163,6 @@
       </div>
     </Transition>
 
-    <!-- 收款码弹窗 -->
     <Transition name="qrcode-modal">
       <div
         v-if="showQRCode"
@@ -188,7 +172,6 @@
         <div
           class="w-full max-w-sm mx-4 bg-white dark:bg-gray-900 rounded-3xl overflow-hidden shadow-2xl"
         >
-          <!-- 顶部渐变装饰 -->
           <div
             class="h-2"
             :class="
@@ -198,7 +181,6 @@
             "
           ></div>
 
-          <!-- 标题 -->
           <div class="flex items-center justify-between px-6 py-4">
             <h3 class="text-lg font-bold text-gray-900 dark:text-white">
               {{ qrcodeType === 'wechat' ? t('comp.donate.wechatQR') : t('comp.donate.alipayQR') }}
@@ -211,7 +193,6 @@
             </button>
           </div>
 
-          <!-- 二维码图片 -->
           <div class="px-6 pb-6">
             <div class="bg-white p-4 rounded-2xl">
               <img
@@ -234,28 +215,33 @@
 import { onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-// 导入收款码图片
 import alipayQRCode from '@/assets/alipay.png';
 import wechatQRCode from '@/assets/wechat.png';
 import { isElectron, isLyricWindow } from '@/utils';
 
+import config from '../../../../package.json';
+
 const { t } = useI18n();
 
-// 缓存键
 const DISCLAIMER_AGREED_KEY = 'disclaimer_agreed_timestamp';
+const DONATION_SHOWN_VERSION_KEY = 'donation_shown_version';
 
 const showDisclaimer = ref(false);
 const showDonate = ref(false);
 const showQRCode = ref(false);
 const qrcodeType = ref<'wechat' | 'alipay'>('wechat');
-const isTransitioning = ref(false); // 防止用户点击过快
+const isTransitioning = ref(false);
 
-// 检查是否需要显示免责声明
 const shouldShowDisclaimer = () => {
   return !localStorage.getItem(DISCLAIMER_AGREED_KEY);
 };
 
-// 处理同意
+const shouldShowDonateAfterUpdate = () => {
+  if (!localStorage.getItem(DISCLAIMER_AGREED_KEY)) return false;
+  const shownVersion = localStorage.getItem(DONATION_SHOWN_VERSION_KEY);
+  return shownVersion !== config.version;
+};
+
 const handleAgree = () => {
   if (isTransitioning.value) return;
   isTransitioning.value = true;
@@ -267,22 +253,18 @@ const handleAgree = () => {
   }, 300);
 };
 
-// 处理不同意 - 退出应用
 const handleDisagree = () => {
   if (isTransitioning.value) return;
   isTransitioning.value = true;
 
   if (isElectron) {
-    // Electron 环境下强制退出应用
     window.api?.quitApp?.();
   } else {
-    // Web 环境下尝试关闭窗口
     window.close();
   }
   isTransitioning.value = false;
 };
 
-// 打开捐赠链接
 const openDonateLink = (type: 'wechat' | 'alipay') => {
   if (isTransitioning.value) return;
 
@@ -290,18 +272,16 @@ const openDonateLink = (type: 'wechat' | 'alipay') => {
   showQRCode.value = true;
 };
 
-// 关闭二维码弹窗
 const closeQRCode = () => {
   showQRCode.value = false;
 };
 
-// 进入应用
 const handleEnterApp = () => {
   if (isTransitioning.value) return;
   isTransitioning.value = true;
 
-  // 记录同意时间
   localStorage.setItem(DISCLAIMER_AGREED_KEY, Date.now().toString());
+  localStorage.setItem(DONATION_SHOWN_VERSION_KEY, config.version);
   showDonate.value = false;
 
   setTimeout(() => {
@@ -310,18 +290,20 @@ const handleEnterApp = () => {
 };
 
 onMounted(() => {
-  // 歌词窗口不显示免责声明
   if (isLyricWindow.value) return;
 
-  // 检查是否需要显示免责声明
   if (shouldShowDisclaimer()) {
     showDisclaimer.value = true;
+    return;
+  }
+
+  if (shouldShowDonateAfterUpdate()) {
+    showDonate.value = true;
   }
 });
 </script>
 
 <style scoped>
-/* 免责声明弹窗动画 */
 .disclaimer-modal-enter-active,
 .disclaimer-modal-leave-active {
   transition: opacity 0.3s ease;
@@ -332,7 +314,6 @@ onMounted(() => {
   opacity: 0;
 }
 
-/* 捐赠弹窗动画 */
 .donate-modal-enter-active,
 .donate-modal-leave-active {
   transition: opacity 0.3s ease;
@@ -343,7 +324,6 @@ onMounted(() => {
   opacity: 0;
 }
 
-/* 二维码弹窗动画 */
 .qrcode-modal-enter-active,
 .qrcode-modal-leave-active {
   transition: opacity 0.3s ease;

src/renderer/components/common/UpdateModal.vue

@@ -3,31 +3,31 @@
     v-model:show="showModal"
     preset="dialog"
     :show-icon="false"
-    :mask-closable="!downloading"
-    :closable="!downloading"
+    :mask-closable="!isChecking"
+    :closable="!isChecking"
     class="update-modal"
     style="width: 800px; max-width: 90vw"
   >
     <div class="p-6 pb-4">
-      <!-- 头部：图标 + 版本信息 -->
-      <div class="flex items-center mb-6">
+      <div class="mb-6 flex items-center">
         <div
-          class="w-20 h-20 mr-5 flex-shrink-0 overflow-hidden rounded-2xl shadow-lg ring-2 ring-neutral-100 dark:ring-neutral-800"
+          class="mr-5 h-20 w-20 flex-shrink-0 overflow-hidden rounded-2xl shadow-lg ring-2 ring-neutral-100 dark:ring-neutral-800"
         >
-          <img src="@/assets/logo.png" alt="App Icon" class="w-full h-full object-cover" />
+          <img src="@/assets/logo.png" alt="App Icon" class="h-full w-full object-cover" />
         </div>
-        <div class="flex-1 min-w-0">
-          <h2 class="text-2xl font-bold tracking-tight text-neutral-900 dark:text-white mb-1.5">
-            {{ t('comp.update.title') }} {{ updateInfo.latestVersion }}
+        <div class="min-w-0 flex-1">
+          <h2 class="mb-1.5 text-2xl font-bold tracking-tight text-neutral-900 dark:text-white">
+            {{ t('comp.update.title') }} {{ updateVersionText }}
           </h2>
           <div class="flex items-center gap-2">
             <span
-              class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-neutral-100 text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400"
+              class="inline-flex items-center rounded-full bg-neutral-100 px-2.5 py-0.5 text-xs font-semibold text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400"
             >
-              {{ t('comp.update.currentVersion') }} {{ updateInfo.currentVersion }}
+              {{ t('comp.update.currentVersion') }} {{ currentVersionText }}
             </span>
             <span
-              class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-primary/10 text-primary dark:bg-primary/20"
+              v-if="showNewBadge"
+              class="inline-flex items-center rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-semibold text-primary dark:bg-primary/20"
             >
               NEW
             </span>
@@ -35,8 +35,10 @@
         </div>
       </div>
 
-      <!-- 更新日志 -->
-      <div class="mb-6 rounded-2xl bg-neutral-50 dark:bg-neutral-800/50 overflow-hidden">
+      <div
+        v-if="hasReleaseNotes"
+        class="mb-6 overflow-hidden rounded-2xl bg-neutral-50 dark:bg-neutral-800/50"
+      >
         <n-scrollbar style="max-height: 300px">
           <div
             class="update-body p-5 text-sm leading-relaxed text-neutral-600 dark:text-neutral-300"
@@ -45,61 +47,54 @@
         </n-scrollbar>
       </div>
 
-      <!-- 下载进度 -->
-      <div v-if="downloading" class="mb-6 rounded-2xl bg-neutral-50 dark:bg-neutral-800/50 p-4">
-        <div class="flex items-center justify-between mb-2.5">
-          <span class="text-sm text-neutral-500 dark:text-neutral-400">{{ downloadStatus }}</span>
-          <span class="text-sm font-bold text-primary">{{ downloadProgress }}%</span>
+      <div
+        v-if="showProgressCard"
+        class="mb-6 rounded-2xl bg-neutral-50 p-4 dark:bg-neutral-800/50"
+      >
+        <div class="mb-2.5 flex items-center justify-between">
+          <span class="text-sm text-neutral-500 dark:text-neutral-400">{{ progressText }}</span>
+          <span class="text-sm font-bold text-primary">{{ progressPercent }}%</span>
         </div>
         <div
           class="relative h-2 w-full overflow-hidden rounded-full bg-neutral-200 dark:bg-neutral-700"
         >
           <div
             class="absolute inset-y-0 left-0 rounded-full bg-primary transition-all duration-300 ease-out shadow-[0_0_10px_rgba(34,197,94,0.4)]"
-            :style="{ width: `${downloadProgress}%` }"
+            :style="{ width: `${progressPercent}%` }"
           />
         </div>
       </div>
 
-      <!-- 操作按钮 -->
-      <div class="flex gap-3" :class="{ 'mt-6': !downloading }">
+      <div
+        v-if="showErrorCard"
+        class="mb-6 rounded-2xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-700 dark:border-amber-900/60 dark:bg-amber-950/30 dark:text-amber-200"
+      >
+        <div class="mb-1 font-semibold">{{ t('comp.update.autoUpdateFailed') }}</div>
+        <div>{{ errorText }}</div>
+      </div>
+
+      <div class="flex gap-3" :class="{ 'mt-6': !showProgressCard }">
         <button
-          class="flex-1 rounded-xl py-2.5 text-sm font-semibold transition-all duration-200 bg-neutral-100 text-neutral-600 hover:bg-neutral-200 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700 disabled:opacity-50 disabled:cursor-not-allowed"
-          :disabled="downloading"
+          class="flex-1 rounded-xl bg-neutral-100 py-2.5 text-sm font-semibold text-neutral-600 transition-all duration-200 hover:bg-neutral-200 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-800 dark:text-neutral-300 dark:hover:bg-neutral-700"
+          :disabled="isChecking"
           @click="closeModal"
         >
           {{ t('comp.update.cancel') }}
         </button>
         <button
-          v-if="!downloading"
-          class="flex-1 rounded-xl py-2.5 text-sm font-semibold transition-all duration-200 bg-primary text-white hover:bg-primary/90 shadow-lg shadow-primary/25 hover:scale-[1.02] active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
-          :disabled="downloading"
-          @click="handleUpdate"
+          class="flex-1 rounded-xl bg-primary py-2.5 text-sm font-semibold text-white transition-all duration-200 hover:scale-[1.02] hover:bg-primary/90 active:scale-95 disabled:cursor-not-allowed disabled:opacity-50"
+          :disabled="primaryButtonDisabled"
+          @click="handlePrimaryAction"
         >
-          {{ downloadBtnText }}
-        </button>
-        <button
-          v-else
-          class="flex-1 rounded-xl py-2.5 text-sm font-semibold transition-all duration-200 bg-primary text-white hover:bg-primary/90 shadow-lg shadow-primary/25 hover:scale-[1.02] active:scale-95"
-          @click="closeModal"
-        >
-          {{ t('comp.update.backgroundDownload') }}
+          {{ primaryButtonText }}
         </button>
       </div>
 
-      <!-- 底部提示 -->
       <p
-        v-if="!downloading"
+        v-if="showManualHint"
         class="mt-4 text-center text-xs text-neutral-400 dark:text-neutral-500"
       >
-        {{ t('comp.installApp.downloadProblem') }}
-        <a
-          class="text-primary hover:text-primary/80 transition-colors"
-          target="_blank"
-          href="https://github.com/algerkong/AlgerMusicPlayer/releases"
-          >GitHub</a
-        >
-        {{ t('comp.installApp.downloadProblemLinkText') }}
+        {{ t('comp.update.manualFallbackHint') }}
       </p>
     </div>
   </n-modal>
@@ -107,301 +102,235 @@
 
 <script setup lang="ts">
 import { marked } from 'marked';
-import { computed, h, onMounted, onUnmounted, ref } from 'vue';
+import { computed, onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { useSettingsStore } from '@/store/modules/settings';
-import { checkUpdate, getProxyNodes, UpdateResult } from '@/utils/update';
 
-import config from '../../../../package.json';
+import {
+  APP_UPDATE_STATUS,
+  type AppUpdateState,
+  createDefaultAppUpdateState
+} from '../../../shared/appUpdate';
 
-const { t } = useI18n();
-const dialog = useDialog();
-const message = useMessage();
-
-// 配置 marked（只需执行一次）
 marked.setOptions({ breaks: true, gfm: true });
 
-const GITHUB_RELEASE_BASE = 'https://github.com/algerkong/AlgerMusicPlayer/releases/download';
-const GITHUB_RELEASES_URL = 'https://github.com/algerkong/AlgerMusicPlayer/releases';
-
+const { t } = useI18n();
+const message = useMessage();
 const settingsStore = useSettingsStore();
-const ipc = window.electron.ipcRenderer;
 
 const showModal = computed({
   get: () => settingsStore.showUpdateModal,
-  set: (val) => settingsStore.setShowUpdateModal(val)
+  set: (value) => settingsStore.setShowUpdateModal(value)
 });
 
-const updateInfo = ref<UpdateResult>({
-  hasUpdate: false,
-  latestVersion: '',
-  currentVersion: config.version,
-  releaseInfo: null
-});
+const updateState = computed(() => settingsStore.appUpdateState);
+const isChecking = computed(() => updateState.value.status === APP_UPDATE_STATUS.checking);
+const isDownloading = computed(() => updateState.value.status === APP_UPDATE_STATUS.downloading);
+const isDownloaded = computed(() => updateState.value.status === APP_UPDATE_STATUS.downloaded);
+const showErrorCard = computed(() => updateState.value.status === APP_UPDATE_STATUS.error);
+const showManualHint = computed(() => showErrorCard.value);
+const showProgressCard = computed(() => isDownloading.value || isDownloaded.value);
+const showNewBadge = computed(
+  () =>
+    updateState.value.status === APP_UPDATE_STATUS.available ||
+    updateState.value.status === APP_UPDATE_STATUS.downloading ||
+    updateState.value.status === APP_UPDATE_STATUS.downloaded
+);
+const hasReleaseNotes = computed(() => Boolean(updateState.value.releaseNotes));
 
-const downloading = ref(false);
-const downloadProgress = ref(0);
-const downloadStatus = ref(t('comp.update.prepareDownload'));
-const isDialogShown = ref(false);
+const currentVersionText = computed(() => updateState.value.currentVersion || '--');
+const updateVersionText = computed(() => updateState.value.availableVersion || '--');
+const progressPercent = computed(() => Math.round(updateState.value.downloadProgress));
+const errorText = computed(() => updateState.value.errorMessage || t('comp.update.downloadFailed'));
 
 const parsedReleaseNotes = computed(() => {
-  const body = updateInfo.value.releaseInfo?.body;
-  if (!body) return '';
+  const releaseNotes = updateState.value.releaseNotes;
+  if (!releaseNotes) return '';
+
   try {
-    return marked.parse(body);
+    return marked.parse(releaseNotes) as string;
   } catch (error) {
     console.error('Markdown 解析失败:', error);
-    return body;
+    return releaseNotes;
   }
 });
 
-const downloadBtnText = computed(() =>
-  downloading.value ? t('comp.update.downloading') : t('comp.update.nowUpdate')
-);
+const progressText = computed(() => {
+  if (isDownloaded.value) {
+    return t('comp.update.readyToInstall');
+  }
+
+  if (!isDownloading.value) {
+    return t('comp.update.prepareDownload');
+  }
+
+  const downloaded = formatBytes(updateState.value.downloadedBytes);
+  const total = formatBytes(updateState.value.totalBytes);
+  return `${t('comp.update.downloading')} ${downloaded} / ${total}`;
+});
+
+const primaryButtonText = computed(() => {
+  switch (updateState.value.status) {
+    case APP_UPDATE_STATUS.checking:
+      return t('comp.update.checking');
+    case APP_UPDATE_STATUS.available:
+      return t('comp.update.nowUpdate');
+    case APP_UPDATE_STATUS.downloading:
+      return t('comp.update.backgroundDownload');
+    case APP_UPDATE_STATUS.downloaded:
+      return t('comp.update.yesInstall');
+    case APP_UPDATE_STATUS.error:
+      return t('comp.update.openOfficialSite');
+    default:
+      return t('comp.update.nowUpdate');
+  }
+});
+
+const primaryButtonDisabled = computed(() => isChecking.value);
+
+const formatBytes = (bytes: number): string => {
+  if (!bytes) {
+    return '0 B';
+  }
+
+  const units = ['B', 'KB', 'MB', 'GB'];
+  const base = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
+  const value = bytes / 1024 ** base;
+  return `${value.toFixed(base === 0 ? 0 : 2)} ${units[base]}`;
+};
+
+const syncUpdateState = (state: AppUpdateState) => {
+  const previousStatus = settingsStore.appUpdateState.status;
+  settingsStore.setAppUpdateState(state);
+
+  if (
+    state.status === APP_UPDATE_STATUS.available ||
+    state.status === APP_UPDATE_STATUS.downloaded
+  ) {
+    settingsStore.setShowUpdateModal(true);
+    return;
+  }
+
+  if (
+    state.status === APP_UPDATE_STATUS.error &&
+    (previousStatus === APP_UPDATE_STATUS.available ||
+      previousStatus === APP_UPDATE_STATUS.downloading)
+  ) {
+    settingsStore.setShowUpdateModal(true);
+  }
+};
 
 const closeModal = () => {
   showModal.value = false;
 };
 
-// ---- 下载 URL 解析 ----
-
-const buildReleaseUrl = (version: string, suffix: string): string =>
-  `${GITHUB_RELEASE_BASE}/v${version}/AlgerMusicPlayer-${version}${suffix}`;
-
-const resolveDownloadUrl = (
-  assets: any[],
-  platform: string,
-  arch: string,
-  version: string
-): string => {
-  // 从 release assets 中按平台/架构匹配
-  const findAsset = (keywords: string[]): string | undefined =>
-    assets.find((a) => keywords.every((k) => a.name.includes(k)))?.browser_download_url;
-
-  if (platform === 'darwin') {
-    const macArch = arch === 'arm64' ? 'arm64' : 'x64';
-    return findAsset(['mac', macArch]) || buildReleaseUrl(version, `-${macArch}.dmg`);
-  }
-
-  if (platform === 'win32') {
-    const winArch = arch === 'x64' ? 'x64' : 'ia32';
-    return (
-      findAsset(['win', winArch]) ||
-      buildReleaseUrl(version, `-win-${winArch}.exe`) ||
-      buildReleaseUrl(version, '-win.exe')
-    );
-  }
-
-  if (platform === 'linux') {
-    return (
-      findAsset(['x64', '.AppImage']) ||
-      findAsset(['x64', '.deb']) ||
-      buildReleaseUrl(version, '-linux-x64.AppImage')
-    );
-  }
-
-  return '';
-};
-
-// ---- IPC 事件处理 ----
-
-const onDownloadProgress = (_event: any, progress: number, status: string) => {
-  downloadProgress.value = progress;
-  downloadStatus.value = status;
-};
-
-const showInstallDialog = (filePath: string) => {
-  const copyFilePath = () => {
-    navigator.clipboard
-      .writeText(filePath)
-      .then(() => message.success(t('comp.update.copySuccess')))
-      .catch(() => message.error(t('comp.update.copyFailed')));
-  };
-
-  const dialogRef = dialog.create({
-    title: t('comp.update.installConfirmTitle'),
-    content: () =>
-      h('div', { class: 'flex flex-col gap-3' }, [
-        h(
-          'p',
-          { class: 'text-base font-medium text-neutral-800 dark:text-neutral-100' },
-          t('comp.update.installConfirmContent')
-        ),
-        h('div', { class: 'h-px bg-neutral-200 dark:bg-neutral-700' }),
-        h(
-          'p',
-          { class: 'text-sm text-neutral-500 dark:text-neutral-400' },
-          t('comp.update.manualInstallTip')
-        ),
-        h('div', { class: 'flex items-center gap-3 mt-1' }, [
-          h('div', { class: 'flex-1 min-w-0' }, [
-            h(
-              'p',
-              { class: 'text-xs text-neutral-400 dark:text-neutral-500 mb-1' },
-              t('comp.update.fileLocation')
-            ),
-            h(
-              'div',
-              {
-                class:
-                  'rounded-xl bg-neutral-100 dark:bg-neutral-800 px-3 py-2 text-xs font-mono text-neutral-700 dark:text-neutral-300 break-all'
-              },
-              filePath
-            )
-          ]),
-          h(
-            'button',
-            {
-              class:
-                'flex items-center gap-1.5 rounded-xl bg-neutral-200 dark:bg-neutral-700 px-3 py-2 text-xs text-neutral-600 dark:text-neutral-300 cursor-pointer transition-colors hover:bg-neutral-300 dark:hover:bg-neutral-600 flex-shrink-0',
-              onClick: copyFilePath
-            },
-            [h('i', { class: 'ri-file-copy-line text-sm' }), h('span', t('comp.update.copy'))]
-          )
-        ])
-      ]),
-    positiveText: t('comp.update.yesInstall'),
-    negativeText: t('comp.update.noThanks'),
-    onPositiveClick: () => {
-      ipc.send('install-update', filePath);
-    },
-    onNegativeClick: () => {
-      dialogRef.destroy();
-    },
-    onClose: () => {
-      isDialogShown.value = false;
-    }
-  });
-};
-
-const onDownloadComplete = (_event: any, success: boolean, filePath: string) => {
-  downloading.value = false;
-  closeModal();
-
-  if (success && !isDialogShown.value) {
-    isDialogShown.value = true;
-    showInstallDialog(filePath);
-  } else if (!success) {
-    message.error(t('comp.update.downloadFailed'));
-  }
-};
-
-// ---- 生命周期 ----
-
-const registerIpcListeners = () => {
-  // 先移除旧监听，防止重复注册
-  ipc.removeListener('download-progress', onDownloadProgress);
-  ipc.removeListener('download-complete', onDownloadComplete);
-  ipc.on('download-progress', onDownloadProgress);
-  ipc.on('download-complete', onDownloadComplete);
-};
-
-const removeIpcListeners = () => {
-  ipc.removeListener('download-progress', onDownloadProgress);
-  ipc.removeListener('download-complete', onDownloadComplete);
-};
-
-onMounted(async () => {
-  registerIpcListeners();
+const handlePrimaryAction = async () => {
   try {
-    const result = await checkUpdate(config.version);
-    if (result) {
-      updateInfo.value = result;
-      showModal.value = true;
+    switch (updateState.value.status) {
+      case APP_UPDATE_STATUS.available:
+        await window.api.downloadAppUpdate();
+        break;
+      case APP_UPDATE_STATUS.downloading:
+        closeModal();
+        break;
+      case APP_UPDATE_STATUS.downloaded:
+        await window.api.installAppUpdate();
+        break;
+      case APP_UPDATE_STATUS.error:
+        await window.api.openAppUpdatePage();
+        break;
+      default:
+        break;
     }
   } catch (error) {
-    console.error('检查更新失败:', error);
+    console.error('执行更新操作失败:', error);
+    message.error(t('comp.update.autoUpdateFailed'));
   }
+};
+
+const initializeUpdateState = async () => {
+  try {
+    const currentState = await window.api.getAppUpdateState();
+    syncUpdateState(currentState);
+
+    if (currentState.supported && currentState.status === APP_UPDATE_STATUS.idle) {
+      await window.api.checkAppUpdate(false);
+    }
+  } catch (error) {
+    console.error('初始化更新状态失败:', error);
+    settingsStore.setAppUpdateState(createDefaultAppUpdateState());
+  }
+};
+
+onMounted(() => {
+  window.api.removeAppUpdateListeners();
+  window.api.onAppUpdateState(syncUpdateState);
+  void initializeUpdateState();
 });
 
 onUnmounted(() => {
-  removeIpcListeners();
-  isDialogShown.value = false;
+  window.api.removeAppUpdateListeners();
 });
-
-// ---- 触发更新下载 ----
-
-const handleUpdate = async () => {
-  const { releaseInfo, latestVersion } = updateInfo.value;
-  const assets = releaseInfo?.assets ?? [];
-  const { platform } = window.electron.process;
-  const arch = ipc.sendSync('get-arch');
-
-  const downloadUrl = resolveDownloadUrl(assets, platform, arch, latestVersion);
-
-  if (!downloadUrl) {
-    message.error(t('comp.update.noDownloadUrl'));
-    window.open(`${GITHUB_RELEASES_URL}/latest`, '_blank');
-    return;
-  }
-
-  try {
-    downloading.value = true;
-    downloadProgress.value = 0;
-    downloadStatus.value = t('comp.update.prepareDownload');
-    isDialogShown.value = false;
-
-    const proxyHosts = await getProxyNodes();
-    ipc.send('start-download', `${proxyHosts[0]}/${downloadUrl}`);
-  } catch (error) {
-    downloading.value = false;
-    message.error(t('comp.update.startFailed'));
-    console.error('下载失败:', error);
-  }
-};
 </script>
 
 <style scoped>
-/* 弹窗圆角 */
 .update-modal :deep(.n-dialog) {
-  border-radius: 1.25rem; /* 20px — rounded-2xl 级别 */
+  border-radius: 1.25rem;
   overflow: hidden;
 }
 
-/* 更新日志 Markdown 渲染样式 */
 .update-body :deep(h1) {
   font-size: 1.25rem;
   font-weight: 700;
   margin-bottom: 0.75rem;
 }
+
 .update-body :deep(h2) {
   font-size: 1.125rem;
   font-weight: 700;
   margin-bottom: 0.75rem;
 }
+
 .update-body :deep(h3) {
   font-size: 1rem;
   font-weight: 700;
   margin-bottom: 0.5rem;
 }
+
 .update-body :deep(p) {
   margin-bottom: 0.75rem;
   line-height: 1.625;
 }
+
 .update-body :deep(ul) {
   list-style-type: disc;
   list-style-position: inside;
   margin-bottom: 0.75rem;
 }
+
 .update-body :deep(ol) {
   list-style-type: decimal;
   list-style-position: inside;
   margin-bottom: 0.75rem;
 }
+
 .update-body :deep(li) {
   margin-bottom: 0.5rem;
   line-height: 1.625;
 }
+
 .update-body :deep(code) {
   padding: 0.125rem 0.375rem;
   border-radius: 0.375rem;
   font-size: 0.8125rem;
   background-color: rgb(245 245 245);
 }
+
 .dark .update-body :deep(code) {
   background-color: rgb(64 64 64);
 }
+
 .update-body :deep(pre) {
   padding: 0.75rem;
   border-radius: 0.75rem;
@@ -409,51 +338,69 @@ const handleUpdate = async () => {
   margin-bottom: 0.75rem;
   background-color: rgb(245 245 245);
 }
+
 .dark .update-body :deep(pre) {
   background-color: rgb(64 64 64);
 }
+
 .update-body :deep(pre code) {
   background-color: transparent;
   padding: 0;
 }
+
 .update-body :deep(blockquote) {
   padding-left: 1rem;
-  border-left: 4px solid rgb(229 229 229);
+  border-left: 0.25rem solid rgb(229 229 229);
   margin-bottom: 0.75rem;
+  color: rgb(115 115 115);
 }
+
 .dark .update-body :deep(blockquote) {
   border-left-color: rgb(82 82 82);
+  color: rgb(163 163 163);
 }
+
 .update-body :deep(a) {
-  color: #22c55e;
-  transition: color 0.2s;
+  color: rgb(var(--primary-color));
+  text-decoration: underline;
 }
+
 .update-body :deep(a:hover) {
-  color: rgb(34 197 94 / 0.8);
+  opacity: 0.85;
 }
+
 .update-body :deep(hr) {
   margin: 1rem 0;
-  border-color: rgb(229 229 229);
+  border: 0;
+  border-top: 1px solid rgb(229 229 229);
 }
+
 .dark .update-body :deep(hr) {
-  border-color: rgb(82 82 82);
+  border-top-color: rgb(82 82 82);
 }
+
 .update-body :deep(table) {
   width: 100%;
+  border-collapse: collapse;
   margin-bottom: 0.75rem;
 }
+
 .update-body :deep(th),
 .update-body :deep(td) {
-  padding: 0.5rem 0.75rem;
   border: 1px solid rgb(229 229 229);
+  padding: 0.5rem 0.75rem;
+  text-align: left;
 }
+
 .dark .update-body :deep(th),
 .dark .update-body :deep(td) {
   border-color: rgb(82 82 82);
 }
+
 .update-body :deep(th) {
   background-color: rgb(245 245 245);
 }
+
 .dark .update-body :deep(th) {
   background-color: rgb(64 64 64);
 }

src/renderer/store/modules/settings.ts

@@ -14,11 +14,14 @@ import {
   watchSystemTheme
 } from '@/utils/theme';
 
+import { type AppUpdateState,createDefaultAppUpdateState } from '../../../shared/appUpdate';
+
 export const useSettingsStore = defineStore('settings', () => {
   const theme = ref<ThemeType>(getCurrentTheme());
   const isMobile = ref(false);
   const isMiniMode = ref(false);
   const showUpdateModal = ref(false);
+  const appUpdateState = ref<AppUpdateState>(createDefaultAppUpdateState());
   const showArtistDrawer = ref(false);
   const currentArtistId = ref<number | null>(null);
   const systemFonts = ref<{ label: string; value: string }[]>([
@@ -147,6 +150,10 @@ export const useSettingsStore = defineStore('settings', () => {
     showUpdateModal.value = value;
   };
 
+  const setAppUpdateState = (value: AppUpdateState) => {
+    appUpdateState.value = value;
+  };
+
   const setShowArtistDrawer = (show: boolean) => {
     showArtistDrawer.value = show;
     if (!show) {
@@ -263,6 +270,7 @@ export const useSettingsStore = defineStore('settings', () => {
     isMobile,
     isMiniMode,
     showUpdateModal,
+    appUpdateState,
     showArtistDrawer,
     currentArtistId,
     systemFonts,
@@ -272,6 +280,7 @@ export const useSettingsStore = defineStore('settings', () => {
     setAutoTheme,
     setMiniMode,
     setShowUpdateModal,
+    setAppUpdateState,
     setShowArtistDrawer,
     setCurrentArtistId,
     setSystemFonts,

src/renderer/views/set/index.vue

@@ -614,10 +614,15 @@
             <!-- 版本信息 -->
             <setting-item :title="t('settings.about.version')">
               <template #description>
-                {{ updateInfo.currentVersion }}
-                <n-tag v-if="updateInfo.hasUpdate" type="success" class="ml-2">
-                  {{ t('settings.about.hasUpdate') }} {{ updateInfo.latestVersion }}
-                </n-tag>
+                <div class="flex flex-wrap items-center gap-2">
+                  <span>{{ updateInfo.currentVersion }}</span>
+                  <n-tag v-if="updateInfo.hasUpdate" type="success">
+                    {{ t('settings.about.hasUpdate') }} {{ updateInfo.latestVersion }}
+                  </n-tag>
+                </div>
+                <div v-if="hasManualUpdateFallback" class="mt-2 text-xs text-amber-600">
+                  {{ appUpdateState.errorMessage || t('settings.about.messages.checkError') }}
+                </div>
               </template>
               <template #action>
                 <div class="flex items-center gap-2 flex-wrap">
@@ -627,6 +632,14 @@
                   <n-button v-if="updateInfo.hasUpdate" size="small" @click="openReleasePage">
                     {{ t('settings.about.gotoUpdate') }}
                   </n-button>
+                  <n-button
+                    v-if="hasManualUpdateFallback"
+                    size="small"
+                    tertiary
+                    @click="openManualUpdatePage"
+                  >
+                    {{ t('settings.about.manualUpdate') }}
+                  </n-button>
                 </div>
               </template>
             </setting-item>
@@ -705,6 +718,11 @@ import { openDirectory, selectDirectory } from '@/utils/fileOperation';
 import { checkUpdate, UpdateResult } from '@/utils/update';
 
 import config from '../../../../package.json';
+import {
+  APP_UPDATE_STATUS,
+  createDefaultAppUpdateState,
+  hasAvailableAppUpdate
+} from '../../../shared/appUpdate';
 import SettingItem from './SettingItem.vue';
 import SettingSection from './SettingSection.vue';
 
@@ -853,19 +871,62 @@ const handleGpuAccelerationChange = (enabled: boolean) => {
 
 // ==================== 更新检查 ====================
 const checking = ref(false);
-const updateInfo = ref<UpdateResult>({
+const webUpdateInfo = ref<UpdateResult>({
   hasUpdate: false,
   latestVersion: '',
   currentVersion: config.version,
   releaseInfo: null
 });
 
+const appUpdateState = computed(() => settingsStore.appUpdateState);
+const hasAppUpdate = computed(() => hasAvailableAppUpdate(appUpdateState.value));
+const hasManualUpdateFallback = computed(
+  () => isElectron && appUpdateState.value.status === APP_UPDATE_STATUS.error
+);
+
+const updateInfo = computed<UpdateResult>(() => {
+  if (!isElectron) {
+    return webUpdateInfo.value;
+  }
+
+  return {
+    hasUpdate: hasAppUpdate.value,
+    latestVersion: appUpdateState.value.availableVersion ?? '',
+    currentVersion: appUpdateState.value.currentVersion || config.version,
+    releaseInfo: appUpdateState.value.availableVersion
+      ? {
+          tag_name: appUpdateState.value.availableVersion,
+          body: appUpdateState.value.releaseNotes,
+          html_url: appUpdateState.value.releasePageUrl,
+          assets: []
+        }
+      : null
+  };
+});
+
 const checkForUpdates = async (isClick = false) => {
   checking.value = true;
   try {
+    if (isElectron) {
+      const result = await window.api.checkAppUpdate(isClick);
+      settingsStore.setAppUpdateState(result);
+
+      if (hasAvailableAppUpdate(result)) {
+        if (isClick) {
+          settingsStore.setShowUpdateModal(true);
+        }
+      } else if (result.status === APP_UPDATE_STATUS.notAvailable && isClick) {
+        message.success(t('settings.about.latest'));
+      } else if (result.status === APP_UPDATE_STATUS.error && isClick) {
+        message.error(result.errorMessage || t('settings.about.messages.checkError'));
+      }
+
+      return;
+    }
+
     const result = await checkUpdate(config.version);
     if (result) {
-      updateInfo.value = result;
+      webUpdateInfo.value = result;
       if (!result.hasUpdate && isClick) {
         message.success(t('settings.about.latest'));
       }
@@ -883,7 +944,21 @@ const checkForUpdates = async (isClick = false) => {
 };
 
 const openReleasePage = () => {
-  settingsStore.showUpdateModal = true;
+  if (isElectron) {
+    settingsStore.setShowUpdateModal(true);
+    return;
+  }
+
+  window.open(updateInfo.value.releaseInfo?.html_url || setData.value.authorUrl);
+};
+
+const openManualUpdatePage = async () => {
+  if (isElectron) {
+    await window.api.openAppUpdatePage();
+    return;
+  }
+
+  window.open(updateInfo.value.releaseInfo?.html_url || setData.value.authorUrl);
 };
 
 const openAuthor = () => {
@@ -1399,7 +1474,9 @@ const currentSection = ref('basic');
 
 // ==================== 初始化 ====================
 onMounted(async () => {
-  checkForUpdates();
+  if (isElectron && settingsStore.appUpdateState.currentVersion === '') {
+    settingsStore.setAppUpdateState(createDefaultAppUpdateState(config.version));
+  }
   if (setData.value.proxyConfig) {
     proxyForm.value = { ...setData.value.proxyConfig };
   }