JoeAllen/mqttx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加 Tauri 自动更新器插件支持 (updater plugin)

Browse Source 
- 添加 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
2026-08-20 15:16:23 +08:00
parent 77724e13a1
commit f5a702fab1
9 changed files with 346 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/AppLayout.vue
+147
View File
@@ -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;
src/composables/useUpdater.ts
+159
View File
@@ -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,
}
}