添加自动更新功能

src/App.vue

@@ -213,6 +213,15 @@
     <PlayerBar v-if="player.currentSong" />
     <ToastContainer />
 
+    <UpdateDialog
+      :visible="updater.updateAvailable.value && !!updater.updateInfo.value"
+      :info="{ version: updater.updateInfo.value?.version || '', date: updater.updateInfo.value?.date ?? null, body: updater.updateInfo.value?.body ?? null, currentVersion: updater.currentVersion.value }"
+      :downloading="updater.downloading.value"
+      :download-progress="updater.downloadProgress.value"
+      @update="updater.downloadAndInstall()"
+      @ignore="updater.ignoreVersion(updater.updateInfo.value?.version || '')"
+    />
+
     <Transition name="fade">
       <div v-if="showCloseModal" class="fixed inset-0 z-[60] flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showCloseModal = false">
         <div class="bg-surface border border-line rounded-2xl shadow-2xl w-80 p-6 select-auto">
@@ -263,8 +272,10 @@ import { useSettingsStore, type CloseAction } from './stores/settings';
 import PlayerBar from './components/PlayerBar.vue';
 import ToastContainer from './components/ToastContainer.vue';
 import CommentSection from './components/CommentSection.vue';
+import UpdateDialog from './components/UpdateDialog.vue';
 import { usePlayerStore } from './stores/player';
 import { useLyric } from './composables/UserLyric';
+import { useUpdater } from './composables/useUpdater';
 import { getCurrentWindow } from '@tauri-apps/api/window';
 import { listen } from '@tauri-apps/api/event';
 import { register, unregister } from '@tauri-apps/plugin-global-shortcut';
@@ -274,6 +285,7 @@ const route = useRoute();
 const userStore = useUserStore();
 const player = usePlayerStore();
 const settings = useSettingsStore();
+const updater = useUpdater();
 
 const createdPlaylists = ref<any[]>([]);
 const subPlaylists = ref<any[]>([]);
@@ -426,6 +438,8 @@ onMounted(async () => {
       });
     }
   } catch {}
+
+  updater.checkForUpdate(true);
 });
 
 const currentWindow = getCurrentWindow();

src/components/UpdateDialog.vue

@@ -0,0 +1,87 @@
+<template>
+  <Transition name="fade">
+    <div v-if="visible" class="fixed inset-0 z-[70] flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="handleIgnore">
+      <div class="bg-surface border border-line rounded-2xl shadow-2xl w-[440px] max-h-[80vh] flex flex-col select-auto">
+        <div class="p-6 pb-4">
+          <div class="flex items-center gap-3 mb-1">
+            <div class="w-10 h-10 rounded-xl bg-accent/15 flex items-center justify-center flex-shrink-0">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-accent-text"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+            </div>
+            <div>
+              <h2 class="text-lg font-semibold text-content">发现新版本</h2>
+              <p class="text-xs text-content-3 mt-0.5">
+                v{{ info.currentVersion }} → <span class="text-accent-text font-medium">v{{ info.version }}</span>
+              </p>
+            </div>
+          </div>
+          <p v-if="info.date" class="text-xs text-content-3 mt-2 ml-[52px]">{{ formatDate(info.date) }}</p>
+        </div>
+
+        <div v-if="info.body" class="px-6 pb-4 flex-1 overflow-y-auto max-h-60 ml-[52px]">
+          <div class="text-sm text-content-2 leading-relaxed whitespace-pre-wrap">{{ info.body }}</div>
+        </div>
+        <div v-else class="px-6 pb-4 ml-[52px]">
+          <p class="text-sm text-content-3">暂无更新日志</p>
+        </div>
+
+        <div v-if="downloading" class="px-6 pb-2">
+          <div class="w-full bg-subtle rounded-full h-2 overflow-hidden">
+            <div class="h-full bg-accent rounded-full transition-all duration-300" :style="{ width: downloadProgress + '%' }"></div>
+          </div>
+          <p class="text-xs text-content-3 mt-1 text-center">正在下载更新 {{ downloadProgress }}%</p>
+        </div>
+
+        <div class="p-4 border-t border-line flex gap-3">
+          <button
+            @click="handleIgnore"
+            :disabled="downloading"
+            class="flex-1 py-2 rounded-lg bg-muted hover:bg-emphasis text-sm text-content-2 transition disabled:opacity-50"
+          >
+            忽略此版本
+          </button>
+          <button
+            @click="handleUpdate"
+            :disabled="downloading"
+            class="flex-1 py-2 rounded-lg bg-accent hover:bg-accent-hover text-white text-sm font-medium transition disabled:opacity-50"
+          >
+            {{ downloading ? `下载中 ${downloadProgress}%` : '立即更新' }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import type { UpdateInfo } from '../composables/useUpdater'
+
+const props = defineProps<{
+  visible: boolean
+  info: UpdateInfo & { currentVersion: string }
+  downloading: boolean
+  downloadProgress: number
+}>()
+
+const emit = defineEmits<{
+  update: []
+  ignore: []
+}>()
+
+function handleUpdate() {
+  emit('update')
+}
+
+function handleIgnore() {
+  if (props.downloading) return
+  emit('ignore')
+}
+
+function formatDate(dateStr: string) {
+  try {
+    const d = new Date(dateStr)
+    return d.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' })
+  } catch {
+    return dateStr
+  }
+}
+</script>

src/composables/useUpdater.ts

@@ -0,0 +1,143 @@
+import { ref } from 'vue'
+import { check } from '@tauri-apps/plugin-updater'
+import { relaunch } from '@tauri-apps/plugin-process'
+import { getVersion } from '@tauri-apps/api/app'
+
+export interface UpdateInfo {
+  version: string
+  date: string | null
+  body: string | null
+}
+
+const IGNORED_VERSION_KEY = 'updater_ignored_version'
+
+export function useUpdater() {
+  const checking = ref(false)
+  const downloading = ref(false)
+  const downloadProgress = ref(0)
+  const updateAvailable = ref(false)
+  const updateInfo = ref<UpdateInfo | null>(null)
+  const currentVersion = ref('')
+  const error = ref('')
+
+  async function getCurrentVersion() {
+    try {
+      currentVersion.value = await getVersion()
+    } catch {
+      currentVersion.value = ''
+    }
+  }
+
+  function getIgnoredVersion(): string {
+    try {
+      return localStorage.getItem(IGNORED_VERSION_KEY) || ''
+    } catch {
+      return ''
+    }
+  }
+
+  function setIgnoredVersion(version: string) {
+    try {
+      localStorage.setItem(IGNORED_VERSION_KEY, version)
+    } catch {}
+  }
+
+  async function checkForUpdate(silent = false): Promise<UpdateInfo | null> {
+    if (checking.value) return null
+    checking.value = true
+    error.value = ''
+    updateAvailable.value = false
+    updateInfo.value = null
+
+    try {
+      await getCurrentVersion()
+      const result = await check()
+
+      if (!result) {
+        if (!silent) error.value = '当前已是最新版本'
+        return null
+      }
+
+      const info: UpdateInfo = {
+        version: result.version,
+        date: result.date ?? null,
+        body: result.body ?? null,
+      }
+
+      const ignored = getIgnoredVersion()
+      if (info.version === ignored) {
+        if (!silent) error.value = '当前已是最新版本'
+        return null
+      }
+
+      updateAvailable.value = true
+      updateInfo.value = info
+      return info
+    } catch (e: any) {
+      if (!silent) error.value = `检查更新失败: ${e}`
+      return null
+    } finally {
+      checking.value = false
+    }
+  }
+
+  async function downloadAndInstall() {
+    if (downloading.value) return
+    downloading.value = true
+    downloadProgress.value = 0
+    error.value = ''
+
+    try {
+      const result = await check()
+      if (!result) {
+        error.value = '未找到可用更新'
+        return
+      }
+
+      let downloaded = 0
+      let contentLength = 0
+      await result.downloadAndInstall((event) => {
+        switch (event.event) {
+          case 'Started':
+            contentLength = event.data.contentLength ?? 0
+            break
+          case 'Progress':
+            downloaded += event.data.chunkLength
+            if (contentLength > 0) {
+              downloadProgress.value = Math.round((downloaded / contentLength) * 100)
+            }
+            break
+          case 'Finished':
+            downloadProgress.value = 100
+            break
+        }
+      })
+
+      await relaunch()
+    } catch (e: any) {
+      error.value = `更新失败: ${e}`
+    } finally {
+      downloading.value = false
+    }
+  }
+
+  function ignoreVersion(version: string) {
+    setIgnoredVersion(version)
+    updateAvailable.value = false
+    updateInfo.value = null
+  }
+
+  return {
+    checking,
+    downloading,
+    downloadProgress,
+    updateAvailable,
+    updateInfo,
+    currentVersion,
+    error,
+    checkForUpdate,
+    downloadAndInstall,
+    ignoreVersion,
+    getCurrentVersion,
+  }
+}

src/views/Settings.vue

@@ -146,7 +146,7 @@
     <section class="mb-8">
       <h2 class="text-sm text-content-2 uppercase tracking-wider mb-4">关于</h2>
       <div class="space-y-4">
-        <a @click.prevent="openUrl('https://gitea.atdunbg.xyz/atdunbg/Nekosonic-Music')"
+        <a @click.prevent="openUrl('https://github.com/atdunbg/Nekosonic-Music')"
           class="flex items-center gap-4 p-4 bg-subtle rounded-xl hover:bg-muted transition cursor-pointer">
           <img src="../assets/app-icon.png" class="w-12 h-12 rounded-xl flex-shrink-0" alt="Nekosonic" />
           <div>
@@ -158,15 +158,15 @@
           Nekosonic 是一款高颜值的跨平台第三方网易云音乐桌面客户端，基于 Tauri 2 + Vue 3 构建，提供轻量流畅的音乐播放体验。
         </p>
         <button
-          @click="checkUpdate"
-          :disabled="checkingUpdate"
+          @click="handleCheckUpdate"
+          :disabled="updater.checking.value"
           class="flex items-center gap-2 px-4 py-2 bg-subtle hover:bg-muted rounded-lg text-sm transition"
         >
-          <svg v-if="!checkingUpdate" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
+          <svg v-if="!updater.checking.value" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
           <svg v-else class="animate-spin" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12a9 9 0 11-6.22-8.56"/></svg>
-          {{ checkingUpdate ? '获取中...' : '查看最新版日志' }}
+          {{ updater.checking.value ? '检查中...' : '检查更新' }}
         </button>
-        <p v-if="updateMessage && !latestRelease" class="text-xs" :class="updateMessageClass">{{ updateMessage }}</p>
+        <p v-if="updater.error.value" class="text-xs text-content-3">{{ updater.error.value }}</p>
       </div>
     </section>
     <Transition name="fade">
@@ -188,35 +188,6 @@
       </div>
     </Transition>
 
-    <Transition name="fade">
-      <div v-if="showUpdateModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showUpdateModal = false">
-        <div class="bg-surface border border-line rounded-2xl shadow-2xl w-[420px] max-h-[80vh] flex flex-col select-auto">
-          <div class="p-6 pb-4">
-            <div class="flex items-center justify-between mb-1">
-              <h2 class="text-lg font-semibold text-content">最新版本日志</h2>
-              <span v-if="latestRelease" class="text-xs font-medium px-2 py-0.5 rounded-full bg-accent/15 text-accent-text">v{{ latestRelease.tag_name?.replace('v', '') }}</span>
-            </div>
-            <p v-if="latestRelease?.published_at" class="text-xs text-content-3 mt-1">{{ formatDate(latestRelease.published_at) }}</p>
-          </div>
-          <div v-if="latestRelease?.body" class="px-6 pb-4 flex-1 overflow-y-auto max-h-60">
-            <div class="text-sm text-content-2 leading-relaxed whitespace-pre-wrap">{{ latestRelease.body }}</div>
-          </div>
-          <div v-else class="px-6 pb-4">
-            <p class="text-sm text-content-3">暂无更新日志</p>
-          </div>
-          <div class="p-4 border-t border-line flex gap-3">
-            <button @click="showUpdateModal = false"
-              class="flex-1 py-2 rounded-lg bg-muted hover:bg-emphasis text-sm text-content-2 transition">
-              关闭
-            </button>
-            <button v-if="latestRelease?.html_url" @click="openUrl(latestRelease.html_url)"
-              class="flex-1 py-2 rounded-lg bg-accent/20 hover:bg-accent/30 text-accent-text text-sm font-medium transition">
-              在 Gitea 中查看
-            </button>
-          </div>
-        </div>
-      </div>
-    </Transition>
   </div>
 </template>
 
@@ -224,6 +195,7 @@
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import { useSettingsStore, qualityLabels, closeActionLabels, defaultShortcuts, type CloseAction } from '../stores/settings';
 import { useToast } from '../composables/useToast';
+import { useUpdater } from '../composables/useUpdater';
 import { invoke } from '@tauri-apps/api/core';
 import { getVersion } from '@tauri-apps/api/app';
 import { openUrl } from '@tauri-apps/plugin-opener';
@@ -232,6 +204,7 @@ import CustomSelect from '../components/CustomSelect.vue';
 
 const settings = useSettingsStore();
 const { showToast } = useToast();
+const updater = useUpdater();
 
 const appVersion = ref('');
 const defaultDownloadPath = ref('');
@@ -264,45 +237,15 @@ function clearDownloadPath() {
   showToast('已重置为默认路径', 'success');
 }
 
-const checkingUpdate = ref(false);
-const updateMessage = ref('');
-const updateMessageClass = ref('text-content-2');
-const latestRelease = ref<any>(null);
-const showUpdateModal = ref(false);
-
 const themeOptions = [
   { label: '深色', value: 'dark' as const },
   { label: '浅色', value: 'light' as const },
 ];
 
-async function checkUpdate() {
-  checkingUpdate.value = true;
-  updateMessage.value = '';
-  try {
-    const resp = await fetch('https://gitea.atdunbg.xyz/api/v1/repos/atdunbg/Nekosonic-Music/releases?limit=1&draft=false');
-    if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
-    const releases = await resp.json();
-    if (releases && releases.length > 0) {
-      latestRelease.value = releases[0];
-      showUpdateModal.value = true;
-    } else {
-      updateMessage.value = '暂无发布版本';
-      updateMessageClass.value = 'text-content-3';
-    }
-  } catch (e: any) {
-    updateMessage.value = `获取失败: ${e}`;
-    updateMessageClass.value = 'text-danger';
-  } finally {
-    checkingUpdate.value = false;
-  }
-}
-
-function formatDate(dateStr: string) {
-  try {
-    const d = new Date(dateStr);
-    return d.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric' });
-  } catch {
-    return dateStr;
+async function handleCheckUpdate() {
+  const result = await updater.checkForUpdate(false);
+  if (!result) {
+    showToast(updater.error.value || '当前已是最新版本', 'info');
   }
 }