From f5a702fab1e62795217b41c420456941f9b59a80 Mon Sep 17 00:00:00 2001
From: Joe Allen <49467845+LiJoeAllen@users.noreply.github.com>
Date: Thu, 20 Aug 2026 15:16:23 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20Tauri=20=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E6=9B=B4=E6=96=B0=E5=99=A8=E6=8F=92=E4=BB=B6=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=20(updater=20plugin)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 tauri-plugin-updater / tauri-plugin-process Rust 依赖
- 注册 updater 和 process 插件到 Tauri 构建器
- 配置 tauri.conf.json 更新器端点与公钥占位
- 添加 @tauri-apps/plugin-updater / plugin-process npm 依赖
- 创建 useUpdater composable（静默检查、手动检查、下载进度、安装重启）
- 在 AppLayout 标题栏集成更新交互 UI（下载按钮、进度条、安装状态）
- 添加 .pnpm-store 到 .gitignore
---
 .gitignore                    |   1 +
 package.json                  |   2 +
 pnpm-lock.yaml                |  20 +++++
 rust-toolchain.toml           |   3 -
 src-tauri/Cargo.toml          |   2 +
 src-tauri/src/lib.rs          |   2 +
 src-tauri/tauri.conf.json     |  15 +++-
 src/components/AppLayout.vue  | 147 +++++++++++++++++++++++++++++++
 src/composables/useUpdater.ts | 159 ++++++++++++++++++++++++++++++++++
 9 files changed, 346 insertions(+), 5 deletions(-)
 delete mode 100644 rust-toolchain.toml
 create mode 100644 src/composables/useUpdater.ts

diff --git a/.gitignore b/.gitignore
index 98d4b33..1280c1b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
+.pnpm-store
 dist
 dist-ssr
 *.local
diff --git a/package.json b/package.json
index fd96ebd..e0f4fa2 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
     "@element-plus/icons-vue": "^2.3.2",
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-opener": "^2",
+    "@tauri-apps/plugin-process": "^2",
+    "@tauri-apps/plugin-updater": "^2",
     "element-plus": "^2.14.4",
     "vue": "^3.5.13"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 540cacc..2d4b079 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,12 @@ importers:
       '@tauri-apps/plugin-opener':
         specifier: ^2
         version: 2.5.4
+      '@tauri-apps/plugin-process':
+        specifier: ^2
+        version: 2.3.1
+      '@tauri-apps/plugin-updater':
+        specifier: ^2
+        version: 2.10.1
       element-plus:
         specifier: ^2.14.4
         version: 2.14.4(vue@3.5.41(typescript@6.0.3))
@@ -261,6 +267,12 @@ packages:
   '@tauri-apps/plugin-opener@2.5.4':
     resolution: {integrity: sha512-1HnPkb+AmgO29HBazm4uPLKB+r7zzcTBW1d0fyYp1uP+jwtpoiNDGKMMzz58SFp49nOIrxdE3aUJtT57lfO9CQ==}
 
+  '@tauri-apps/plugin-process@2.3.1':
+    resolution: {integrity: sha512-nCa4fGVaDL/B9ai03VyPOjfAHRHSBz5v6F/ObsB73r/dA3MHHhZtldaDMIc0V/pnUw9ehzr2iEG+XkSEyC0JJA==}
+
+  '@tauri-apps/plugin-updater@2.10.1':
+    resolution: {integrity: sha512-NFYMg+tWOZPJdzE/PpFj2qfqwAWwNS3kXrb1tm1gnBJ9mYzZ4WDRrwy8udzWoAnfGCHLuePNLY1WVCNHnh3eRA==}
+
   '@types/lodash-es@4.17.12':
     resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
 
@@ -705,6 +717,14 @@ snapshots:
     dependencies:
       '@tauri-apps/api': 2.11.1
 
+  '@tauri-apps/plugin-process@2.3.1':
+    dependencies:
+      '@tauri-apps/api': 2.11.1
+
+  '@tauri-apps/plugin-updater@2.10.1':
+    dependencies:
+      '@tauri-apps/api': 2.11.1
+
   '@types/lodash-es@4.17.12':
     dependencies:
       '@types/lodash': 4.17.25
diff --git a/rust-toolchain.toml b/rust-toolchain.toml
deleted file mode 100644
index 47103d1..0000000
--- a/rust-toolchain.toml
+++ /dev/null
@@ -1,3 +0,0 @@
-[toolchain]
-channel = "nightly"
-targets = ["x86_64-pc-windows-gnu"]
\ No newline at end of file
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 2b214a0..49a0555 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -23,6 +23,8 @@ tauri-build = { version = "2", features = [] }
 [dependencies]
 tauri = { version = "2", features = [] }
 tauri-plugin-opener = "2"
+tauri-plugin-process = "2"
+tauri-plugin-updater = "2"
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 rumqttc-v5-next = "0.34"
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index c821929..3705f5c 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -944,6 +944,8 @@ pub fn run() {
 
     tauri::Builder::default()
         .plugin(tauri_plugin_opener::init())
+        .plugin(tauri_plugin_process::init())
+        .plugin(tauri_plugin_updater::Builder::new().build())
         .manage(AppState {
             clients: RwLock::new(HashMap::new()),
             log_writer,
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index f50412e..f6dc1d2 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -23,6 +23,16 @@
       "csp": null
     }
   },
+  "plugins": {
+    "updater": {
+      "active": true,
+      "dialog": true,
+      "endpoints": [
+        "https://releases.mqttx.app/update/{{target}}-{{arch}}/{{current_version}}"
+      ],
+      "pubkey": "请替换为你的公钥——使用 `tauri signer generate` 生成签名密钥对后，将公钥粘贴至此"
+    }
+  },
   "bundle": {
     "active": true,
     "targets": "all",
@@ -35,11 +45,12 @@
     ],
     "windows": {
       "nsis": {
-        "language": ["SimpChinese", "English"]
+        "languages": ["SimpChinese", "English"],
+        "displayLanguageSelector": true
       },
       "wix": {
         "language": ["zh-CN", "en-US"]
       }
     }
   }
-}
+}
\ No newline at end of file
diff --git a/src/components/AppLayout.vue b/src/components/AppLayout.vue
index 7279472..53c5dbe 100644
--- a/src/components/AppLayout.vue
+++ b/src/components/AppLayout.vue
@@ -1,11 +1,19 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useMqttBridge } from '../stores/useMqttBridge'
+import { useUpdater } from '../composables/useUpdater'
 import ConnectionList from './connections/ConnectionList.vue'
 import PresetList from './presets/PresetList.vue'
 import DashboardView from './dashboard/DashboardView.vue'
 
 const { init } = useMqttBridge()
+const {
+  state: updateState,
+  checking: updateChecking,
+  checkForUpdates,
+  downloadAndInstall,
+  silentCheck,
+} = useUpdater()
 
 const activeTab = ref<'connections' | 'presets' | 'dashboard'>('dashboard')
 const isDark = ref(false)
@@ -29,6 +37,9 @@ function getSystemTheme(): boolean {
 onMounted(() => {
   init()
 
+  // 静默检查更新（应用启动时）
+  silentCheck()
+
   // Listen for system theme changes
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
     const saved = localStorage.getItem('mqttx_theme')
@@ -90,6 +101,65 @@ onMounted(() => {
         </button>
       </div>
       <div class="header-right">
+        <!-- 更新按钮 -->
+        <button
+          v-if="updateState.available && !updateState.downloading && !updateState.installing"
+          class="update-btn"
+          @click="downloadAndInstall"
+          title="有新版本可用"
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+            <polyline points="7 10 12 15 17 10"/>
+            <line x1="12" y1="15" x2="12" y2="3"/>
+          </svg>
+          <span class="update-badge">v{{ updateState.version }}</span>
+        </button>
+
+        <!-- 下载进度 -->
+        <div
+          v-else-if="updateState.downloading"
+          class="update-progress"
+          title="正在下载更新..."
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+            <polyline points="7 10 12 15 17 10"/>
+            <line x1="12" y1="15" x2="12" y2="3"/>
+          </svg>
+          <span class="progress-text">{{ updateState.downloadProgress }}%</span>
+        </div>
+
+        <!-- 安装中 -->
+        <div
+          v-else-if="updateState.installing"
+          class="update-installing"
+          title="正在安装更新..."
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="spin">
+            <circle cx="12" cy="12" r="10" stroke-dasharray="32" stroke-dashoffset="32"/>
+          </svg>
+          <span class="progress-text">安装中...</span>
+        </div>
+
+        <!-- 手动检查更新按钮（无更新时） -->
+        <button
+          v-else
+          class="check-update-btn"
+          :disabled="updateChecking"
+          @click="checkForUpdates"
+          :title="updateChecking ? '检查中...' : '检查更新'"
+        >
+          <svg
+            width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+            :class="{ spin: updateChecking }"
+          >
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+            <polyline points="7 10 12 15 17 10"/>
+            <line x1="12" y1="15" x2="12" y2="3"/>
+          </svg>
+        </button>
+
         <button class="theme-btn" @click="toggleTheme" :title="isDark ? '切换到亮色模式' : '切换到暗色模式'">
           <svg v-if="isDark" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
           <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
@@ -213,6 +283,83 @@ onMounted(() => {
   flex-shrink: 0;
 }
 
+/* ─── Update Button ──────────────────────────────────────────── */
+.update-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 10px;
+  height: 30px;
+  border: 1px solid var(--el-color-primary, #409eff);
+  border-radius: 6px;
+  background: var(--el-color-primary-light-9, #ecf5ff);
+  color: var(--el-color-primary, #409eff);
+  cursor: pointer;
+  transition: all 0.2s;
+  font-family: inherit;
+  font-size: 13px;
+  white-space: nowrap;
+}
+.update-btn:hover {
+  background: var(--el-color-primary, #409eff);
+  color: #fff;
+}
+.update-badge {
+  font-weight: 600;
+  font-size: 11px;
+}
+
+/* ─── Update Progress ────────────────────────────────────────── */
+.update-progress,
+.update-installing {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0 10px;
+  height: 30px;
+  border-radius: 6px;
+  background: var(--comfort-fill-color, var(--el-fill-color));
+  color: var(--comfort-text-secondary);
+  font-size: 12px;
+}
+.progress-text {
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+}
+
+/* ─── Check Update Button ────────────────────────────────────── */
+.check-update-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border: 1px solid var(--comfort-border);
+  border-radius: 6px;
+  background: var(--comfort-bg-card);
+  color: var(--comfort-text-secondary);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.check-update-btn:hover:not(:disabled) {
+  color: var(--comfort-primary);
+  border-color: var(--comfort-primary-light);
+  background: var(--comfort-primary-bg);
+}
+.check-update-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ─── Spin animation ─────────────────────────────────────────── */
+.spin {
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
 /* ─── Main ───────────────────────────────────────────────────── */
 .app-main {
   flex: 1;
diff --git a/src/composables/useUpdater.ts b/src/composables/useUpdater.ts
new file mode 100644
index 0000000..4fb2844
--- /dev/null
+++ b/src/composables/useUpdater.ts
@@ -0,0 +1,159 @@
+import { ref, onMounted } from 'vue'
+import { check } from '@tauri-apps/plugin-updater'
+import { relaunch } from '@tauri-apps/plugin-process'
+
+/**
+ * 更新状态
+ */
+export interface UpdateState {
+  /** 是否有可用更新 */
+  available: boolean
+  /** 当前版本 */
+  currentVersion: string
+  /** 新版本号 */
+  version?: string
+  /** 更新日期 */
+  date?: string
+  /** 更新说明 */
+  body?: string
+  /** 下载进度 (0-100) */
+  downloadProgress: number
+  /** 是否正在下载 */
+  downloading: boolean
+  /** 是否正在安装 */
+  installing: boolean
+  /** 错误信息 */
+  error: string | null
+}
+
+/**
+ * Tauri 自动更新 composable
+ *
+ * 用法：
+ * ```ts
+ * const updater = useUpdater()
+ * await updater.checkForUpdates()
+ * ```
+ */
+export function useUpdater() {
+  const state = ref<UpdateState>({
+    available: false,
+    currentVersion: '',
+    downloadProgress: 0,
+    downloading: false,
+    installing: false,
+    error: null,
+  })
+
+  const checking = ref(false)
+
+  /**
+   * 检查更新
+   */
+  async function checkForUpdates(): Promise<void> {
+    checking.value = true
+    state.value.error = null
+
+    try {
+      const update = await check()
+
+      if (update) {
+        state.value.available = true
+        state.value.version = update.version
+        state.value.date = update.date ?? undefined
+        state.value.body = update.body ?? undefined
+        state.value.currentVersion = update.currentVersion ?? ''
+      } else {
+        state.value.available = false
+      }
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : String(err)
+      // 忽略网络错误（用户可能离线）, 只记录不显示错误
+      console.debug('[updater] 检查更新失败:', message)
+      state.value.error = null // 不显示错误给用户，静默失败
+    } finally {
+      checking.value = false
+    }
+  }
+
+  /**
+   * 下载并安装更新，然后重启应用
+   */
+  async function downloadAndInstall(): Promise<void> {
+    if (!state.value.available) return
+
+    state.value.downloading = true
+    state.value.error = null
+
+    try {
+      const update = await check()
+      if (!update) {
+        state.value.available = false
+        return
+      }
+
+      // 下载更新（带进度）
+      let downloaded = 0
+      let total = 0
+
+      await update.download((event) => {
+        switch (event.event) {
+          case 'Started':
+            total = event.data.contentLength ?? 0
+            state.value.downloadProgress = 0
+            break
+          case 'Progress':
+            downloaded += event.data.chunkLength
+            if (total > 0) {
+              state.value.downloadProgress = Math.min(
+                100,
+                Math.round((downloaded / total) * 100),
+              )
+            }
+            break
+          case 'Finished':
+            state.value.downloadProgress = 100
+            break
+        }
+      })
+
+      state.value.downloading = false
+      state.value.installing = true
+
+      // 安装并重启
+      await update.install()
+      await relaunch()
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : String(err)
+      state.value.error = message
+      state.value.downloading = false
+      state.value.installing = false
+    }
+  }
+
+  /**
+   * 静默检查更新（应用启动时调用，仅当有更新时设置状态）
+   */
+  async function silentCheck(): Promise<void> {
+    try {
+      const update = await check()
+      if (update) {
+        state.value.available = true
+        state.value.version = update.version
+        state.value.date = update.date ?? undefined
+        state.value.body = update.body ?? undefined
+        state.value.currentVersion = update.currentVersion ?? ''
+      }
+    } catch {
+      // 静默失败，不显示任何错误
+    }
+  }
+
+  return {
+    state,
+    checking,
+    checkForUpdates,
+    downloadAndInstall,
+    silentCheck,
+  }
+}
\ No newline at end of file