feat: 添加 Tauri 自动更新器插件支持 (updater plugin)
- 添加 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
This commit is contained in:
Joe Allen
@@ -10,6 +10,7 @@ pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
.pnpm-store
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
@@ -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"
|
||||
},
|
||||
|
||||
Generated
+20
@@ -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
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
[toolchain]
|
||||
channel = "nightly"
|
||||
targets = ["x86_64-pc-windows-gnu"]
|
||||
@@ -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"
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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,7 +45,8 @@
|
||||
],
|
||||
"windows": {
|
||||
"nsis": {
|
||||
"language": ["SimpChinese", "English"]
|
||||
"languages": ["SimpChinese", "English"],
|
||||
"displayLanguageSelector": true
|
||||
},
|
||||
"wix": {
|
||||
"language": ["zh-CN", "en-US"]
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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,
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user