feat(desktop): add client release updater

apps/desktop-client/src/renderer/components/DesktopShell.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
 import {
   AppstoreOutlined,
+  DownloadOutlined,
   LinkOutlined,
   LogoutOutlined,
   RobotOutlined,
   SendOutlined,
   SettingOutlined,
 } from '@ant-design/icons-vue'
-import { computed } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import { RouterLink, RouterView, useRoute } from 'vue-router'
 
+import { useClientRelease } from '../composables/useClientRelease'
 import { useDesktopRuntime } from '../composables/useDesktopRuntime'
 import { useDesktopSession } from '../composables/useDesktopSession'
 import { desktopMonitoringMediaCatalog, desktopPublishMediaCatalog } from '../lib/media-catalog'
@@ -17,6 +19,21 @@ import { desktopMonitoringMediaCatalog, desktopPublishMediaCatalog } from '../li
 const route = useRoute()
 const { snapshot, error, refreshAccounts } = useDesktopRuntime()
 const { session, logout } = useDesktopSession()
+const {
+  check: checkClientRelease,
+  startUpdate: startClientUpdate,
+  openManualDownload,
+  updateProgress,
+  updateError,
+  updateManualDownloadRequired,
+  manualDownloadLoading,
+  updating,
+} = useClientRelease()
+let hasCheckedClientRelease = false
+const updateModalOpen = ref(false)
+const updateModalVersion = ref('')
+const updateModalForce = ref(false)
+const updateModalStarted = ref(false)
 
 const accountAwareRoutes = new Set(['/media-platforms', '/ai-platforms'])
 
@@ -66,12 +83,7 @@ const navItems = computed(() => {
 
 const operatorName = computed(() => {
   const user = session.value?.user
-  return (
-    user?.name?.trim() ||
-    user?.phone?.trim() ||
-    user?.email?.trim() ||
-    '未命名操作员'
-  )
+  return user?.name?.trim() || user?.phone?.trim() || user?.email?.trim() || '未命名操作员'
 })
 const operatorEmail = computed(() => {
   const user = session.value?.user
@@ -87,10 +99,131 @@ const clientLabel = computed(
   () =>
     liveClientLabel.value ?? session.value?.desktopClient?.device_name ?? '当前设备尚未注册 client',
 )
+const updateProgressPercent = computed(() => {
+  const percent = updateProgress.value?.percent
+  if (typeof percent !== 'number' || !Number.isFinite(percent)) {
+    return null
+  }
+  return Math.max(0, Math.min(100, Math.round(percent)))
+})
+const updateProgressLabel = computed(() => {
+  if (isUpdateFailed.value) {
+    return '热更新失败，请去官网更新'
+  }
+  switch (updateProgress.value?.stage) {
+    case 'checking':
+      return '正在准备更新'
+    case 'downloading':
+      return updateProgressPercent.value === null
+        ? '正在下载更新'
+        : `正在下载 ${updateProgressPercent.value}%`
+    case 'downloaded':
+      return '下载完成，准备安装'
+    case 'installing':
+      return '正在重启安装'
+    case 'not-available':
+      return '当前已是最新版本'
+    default:
+      return updateModalStarted.value ? '正在准备更新' : ''
+  }
+})
+const isUpdateFailed = computed(() => Boolean(updateError.value))
+const updateProgressBarPercent = computed(() => {
+  if (!updateModalStarted.value) {
+    return 0
+  }
+  if (updateProgress.value?.stage === 'checking') {
+    return 8
+  }
+  if (updateProgress.value?.stage === 'downloaded' || updateProgress.value?.stage === 'installing') {
+    return 100
+  }
+  return updateProgressPercent.value ?? 8
+})
+const updatePrimaryLabel = computed(() => {
+  if (!updateModalStarted.value) {
+    return '立即更新'
+  }
+  if (updating.value) {
+    return '更新中'
+  }
+  return updateError.value ? '重试更新' : '立即更新'
+})
+const updateModalEyebrow = computed(() => {
+  if (isUpdateFailed.value) {
+    return '热更新失败'
+  }
+  return updateModalForce.value ? '必须更新' : '发现新版本'
+})
+const updateModalTitle = computed(() => {
+  if (isUpdateFailed.value) {
+    return '热更新失败，请去官网更新'
+  }
+  return '发现新的客户端版本'
+})
+const updateModalDescription = computed(() => {
+  if (isUpdateFailed.value) {
+    return `最新版本 ${updateModalVersion.value} 已可下载，请前往官网下载安装包后手动更新。`
+  }
+  return `最新版本 ${updateModalVersion.value} 已可下载。自动更新失败时会打开官网下载地址。`
+})
 
 function openSettingsWindow() {
   void window.desktopBridge.app.openSettingsWindow()
 }
+
+async function startClientReleaseUpdate() {
+  updateModalStarted.value = true
+  const updated = await startClientUpdate()
+  if (updated) {
+    return
+  }
+}
+
+function notifyClientUpdate(latestVersion: string, forceUpdate: boolean) {
+  updateModalVersion.value = latestVersion
+  updateModalForce.value = forceUpdate
+  updateModalStarted.value = false
+  updateModalOpen.value = true
+}
+
+function closeUpdateModal() {
+  if (isUpdateFailed.value || updateModalForce.value || updating.value) {
+    return
+  }
+  updateModalOpen.value = false
+}
+
+function openUpdateManualDownload() {
+  void openManualDownload()
+}
+
+function quitApp() {
+  void window.desktopBridge.app.quitApp()
+}
+
+async function checkClientReleaseOnce() {
+  if (hasCheckedClientRelease || !session.value?.clientToken) {
+    return
+  }
+  hasCheckedClientRelease = true
+  const result = await checkClientRelease('silent')
+  if (!result?.update_available) {
+    return
+  }
+  notifyClientUpdate(result.latest_version, result.force_update)
+}
+
+onMounted(() => {
+  void checkClientReleaseOnce()
+})
+
+watch(
+  () => session.value?.clientToken,
+  () => {
+    void checkClientReleaseOnce()
+  },
+)
 </script>
 
 <template>
@@ -172,6 +305,89 @@ function openSettingsWindow() {
       <div class="content-dragbar" aria-hidden="true"></div>
       <RouterView />
     </main>
+
+    <a-modal
+      v-model:open="updateModalOpen"
+      :closable="!isUpdateFailed && !updateModalForce && !updating"
+      :mask-closable="!isUpdateFailed && !updateModalForce && !updating"
+      :keyboard="!isUpdateFailed && !updateModalForce && !updating"
+      :footer="null"
+      width="520px"
+      centered
+      class="client-update-modal"
+      @cancel="closeUpdateModal"
+    >
+      <section class="client-update-dialog">
+        <div class="client-update-dialog__mark">
+          <DownloadOutlined />
+        </div>
+        <div class="client-update-dialog__copy">
+          <span>{{ updateModalEyebrow }}</span>
+          <h2>{{ updateModalTitle }}</h2>
+          <p>{{ updateModalDescription }}</p>
+          <button
+            v-if="isUpdateFailed"
+            type="button"
+            class="client-update-link-button"
+            :disabled="manualDownloadLoading"
+            @click="openUpdateManualDownload"
+          >
+            <DownloadOutlined />
+            {{ manualDownloadLoading ? '正在打开更新包链接' : '打开更新包链接' }}
+          </button>
+        </div>
+
+        <div v-if="updateModalStarted && !isUpdateFailed" class="client-update-progress">
+          <div class="client-update-progress__meta">
+            <strong>{{ updateProgressLabel }}</strong>
+            <span v-if="updateProgressPercent !== null">{{ updateProgressPercent }}%</span>
+          </div>
+          <div class="client-update-progress__bar">
+            <span :style="{ width: `${updateProgressBarPercent}%` }"></span>
+          </div>
+        </div>
+
+        <div class="client-update-dialog__actions">
+          <button
+            v-if="isUpdateFailed"
+            type="button"
+            class="client-update-button client-update-button--primary"
+            @click="quitApp"
+          >
+            退出
+          </button>
+          <button
+            v-else-if="!updateModalForce"
+            type="button"
+            class="client-update-button client-update-button--ghost"
+            :disabled="updating"
+            @click="closeUpdateModal"
+          >
+            稍后
+          </button>
+          <button
+            v-if="!isUpdateFailed && updateManualDownloadRequired"
+            type="button"
+            class="client-update-button client-update-button--ghost"
+            :disabled="manualDownloadLoading"
+            @click="openUpdateManualDownload"
+          >
+            <DownloadOutlined />
+            {{ manualDownloadLoading ? '打开中' : '官网下载' }}
+          </button>
+          <button
+            v-if="!isUpdateFailed"
+            type="button"
+            class="client-update-button client-update-button--primary"
+            :disabled="updating"
+            @click="startClientReleaseUpdate"
+          >
+            <DownloadOutlined />
+            {{ updatePrimaryLabel }}
+          </button>
+        </div>
+      </section>
+    </a-modal>
   </div>
 </template>
 
@@ -548,6 +764,195 @@ h1 {
   z-index: 5;
 }
 
+:global(.client-update-modal .ant-modal-content) {
+  overflow: hidden;
+  border-radius: 12px;
+  padding: 0;
+  box-shadow:
+    0 22px 48px rgba(15, 23, 42, 0.18),
+    0 8px 18px rgba(15, 23, 42, 0.08);
+}
+
+:global(.client-update-modal .ant-modal-close) {
+  top: 18px;
+  right: 18px;
+}
+
+.client-update-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+  padding: 34px 36px 30px;
+  background: #ffffff;
+}
+
+.client-update-dialog__mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  border-radius: 8px;
+  background: #e6f4ff;
+  color: #1677ff;
+  font-size: 20px;
+}
+
+.client-update-dialog__copy {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.client-update-dialog__copy span {
+  color: #1677ff;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.client-update-dialog__copy h2 {
+  margin: 0;
+  color: #111827;
+  font-size: 24px;
+  font-weight: 800;
+  line-height: 1.25;
+}
+
+.client-update-dialog__copy p {
+  margin: 0;
+  color: #374151;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.75;
+}
+
+.client-update-link-button {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 36px;
+  padding: 0 0 2px;
+  border: 0;
+  border-bottom: 2px solid rgba(22, 119, 255, 0.28);
+  background: transparent;
+  color: #1677ff;
+  cursor: pointer;
+  font-size: 15px;
+  font-weight: 800;
+  transition:
+    border-color 0.2s ease,
+    color 0.2s ease,
+    opacity 0.2s ease;
+}
+
+.client-update-link-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.client-update-link-button:not(:disabled):hover {
+  border-color: #1677ff;
+  color: #0958d9;
+}
+
+.client-update-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.client-update-progress__meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: #64748b;
+  font-size: 13px;
+}
+
+.client-update-progress__meta strong {
+  min-width: 0;
+  color: #334155;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.client-update-progress__meta span {
+  color: #1677ff;
+  font-weight: 800;
+}
+
+.client-update-progress__bar {
+  height: 8px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #eef2f7;
+}
+
+.client-update-progress__bar span {
+  display: block;
+  width: 0;
+  height: 100%;
+  border-radius: inherit;
+  background: #1677ff;
+  transition: width 0.2s ease;
+}
+
+.client-update-dialog__actions {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 12px;
+}
+
+.client-update-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  min-width: 104px;
+  height: 40px;
+  padding: 0 18px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 15px;
+  font-weight: 800;
+  transition:
+    background 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease,
+    opacity 0.2s ease;
+}
+
+.client-update-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.62;
+}
+
+.client-update-button--primary {
+  border: 1px solid #1677ff;
+  background: #1677ff;
+  color: #ffffff;
+}
+
+.client-update-button--primary:not(:disabled):hover {
+  background: #0958d9;
+  border-color: #0958d9;
+}
+
+.client-update-button--ghost {
+  border: 1px solid #dbe3ee;
+  background: #ffffff;
+  color: #475569;
+}
+
+.client-update-button--ghost:not(:disabled):hover {
+  border-color: #b6cff5;
+  color: #1677ff;
+  background: #f8fbff;
+}
+
 @media (max-width: 1080px) {
   .sidebar {
     width: 260px;

apps/desktop-client/src/renderer/composables/useClientRelease.ts

@@ -0,0 +1,194 @@
+import type {
+  DesktopClientReleaseCheckResponse,
+  DesktopClientUpdateProgressEvent,
+} from '@geo/shared-types'
+import { computed, readonly, ref } from 'vue'
+
+type CheckMode = 'manual' | 'silent'
+
+const release = ref<DesktopClientReleaseCheckResponse | null>(null)
+const loading = ref(false)
+const error = ref<string | null>(null)
+const lastCheckedAt = ref<number | null>(null)
+const updateProgress = ref<DesktopClientUpdateProgressEvent | null>(null)
+const updateError = ref<string | null>(null)
+const updateManualDownloadRequired = ref(false)
+const manualDownloadLoading = ref(false)
+let inFlight: Promise<DesktopClientReleaseCheckResponse | null> | null = null
+let updateInFlight: Promise<boolean> | null = null
+let progressListenerRegistered = false
+
+const MANUAL_DOWNLOAD_UPDATE_ERROR = '自动更新包校验失败，请前往官网下载最新版客户端'
+
+function normalizeReleaseError(err: unknown): string {
+  const message = err instanceof Error ? err.message : String(err)
+  if (message.includes('desktop_client_not_registered')) {
+    return '当前客户端尚未注册'
+  }
+  if (message.includes('desktop_client_release_not_configured')) {
+    return '暂未配置当前平台版本'
+  }
+  return message || '版本检查失败'
+}
+
+async function check(
+  mode: CheckMode = 'manual',
+): Promise<DesktopClientReleaseCheckResponse | null> {
+  if (inFlight) {
+    return inFlight
+  }
+
+  loading.value = true
+  if (mode === 'manual') {
+    error.value = null
+  }
+
+  inFlight = window.desktopBridge.app
+    .checkClientRelease()
+    .then((result) => {
+      release.value = result
+      error.value = null
+      lastCheckedAt.value = Date.now()
+      return result
+    })
+    .catch((err: unknown) => {
+      const message = normalizeReleaseError(err)
+      if (mode === 'manual') {
+        error.value = message
+      }
+      return null
+    })
+    .finally(() => {
+      loading.value = false
+      inFlight = null
+    })
+
+  return inFlight
+}
+
+function clearReleaseCheck(): void {
+  release.value = null
+  error.value = null
+  lastCheckedAt.value = null
+}
+
+function normalizeUpdateError(err: unknown): string {
+  const message = err instanceof Error ? err.message : String(err)
+  if (requiresManualDownload(message)) {
+    return MANUAL_DOWNLOAD_UPDATE_ERROR
+  }
+  if (message.includes('desktop_update_requires_packaged_app')) {
+    return '自动更新需要在打包后的客户端中执行'
+  }
+  if (message.includes('desktop_client_release_missing_sha256')) {
+    return '自动更新需要先配置安装包 SHA256'
+  }
+  if (message.includes('desktop_client_update_package_not_supported')) {
+    return '当前安装包格式不支持自动更新'
+  }
+  return message || '自动更新失败'
+}
+
+function requiresManualDownload(message: string): boolean {
+  return (
+    message.includes('desktop_client_update_signature_validation_failed') ||
+    message.includes('Code signature') ||
+    message.includes('did not pass validation') ||
+    message.includes('代码未能满足指定的代码要求')
+  )
+}
+
+function ensureProgressListener(): void {
+  if (progressListenerRegistered) {
+    return
+  }
+  progressListenerRegistered = true
+  window.desktopBridge.app.onClientUpdateProgress((event) => {
+    updateProgress.value = event
+    if (event.stage === 'error') {
+      const message = event.message ?? '自动更新失败'
+      updateManualDownloadRequired.value = requiresManualDownload(message)
+      updateError.value = normalizeUpdateError(message)
+    }
+  })
+}
+
+async function startUpdate(): Promise<boolean> {
+  ensureProgressListener()
+  if (updateInFlight) {
+    return updateInFlight
+  }
+  updateError.value = null
+  updateManualDownloadRequired.value = false
+  updateProgress.value = {
+    stage: 'checking',
+    percent: null,
+    transferred: null,
+    total: null,
+    bytesPerSecond: null,
+    version: release.value?.latest_version ?? null,
+  }
+
+  updateInFlight = window.desktopBridge.app
+    .startClientUpdate()
+    .then((result) => result.update_available)
+    .catch((err: unknown) => {
+      const message = err instanceof Error ? err.message : String(err)
+      updateManualDownloadRequired.value = requiresManualDownload(message)
+      updateError.value = normalizeUpdateError(err)
+      return false
+    })
+    .finally(() => {
+      updateInFlight = null
+    })
+
+  return updateInFlight
+}
+
+async function openManualDownload(): Promise<boolean> {
+  if (manualDownloadLoading.value) {
+    return false
+  }
+  manualDownloadLoading.value = true
+  try {
+    const result = await window.desktopBridge.app.clientReleaseDownloadURL()
+    if (!result.download_url) {
+      updateError.value = '暂未配置官网下载地址'
+      return false
+    }
+    await window.desktopBridge.app.openExternalUrl(result.download_url)
+    return true
+  } catch (err: unknown) {
+    updateError.value = normalizeReleaseError(err)
+    return false
+  } finally {
+    manualDownloadLoading.value = false
+  }
+}
+
+export function useClientRelease() {
+  ensureProgressListener()
+  return {
+    release: readonly(release),
+    loading: readonly(loading),
+    error: readonly(error),
+    lastCheckedAt: readonly(lastCheckedAt),
+    updateProgress: readonly(updateProgress),
+    updateError: readonly(updateError),
+    updateManualDownloadRequired: readonly(updateManualDownloadRequired),
+    manualDownloadLoading: readonly(manualDownloadLoading),
+    updateAvailable: computed(() => release.value?.update_available === true),
+    forceUpdate: computed(() => release.value?.force_update === true),
+    updating: computed(
+      () =>
+        updateProgress.value?.stage === 'checking' ||
+        updateProgress.value?.stage === 'downloading' ||
+        updateProgress.value?.stage === 'downloaded' ||
+        updateProgress.value?.stage === 'installing',
+    ),
+    check,
+    startUpdate,
+    openManualDownload,
+    clearReleaseCheck,
+  }
+}

apps/desktop-client/src/renderer/composables/useDesktopSession.ts

@@ -479,12 +479,28 @@ async function registerPayload(
   device?: ResolvedDeviceInfo,
 ): Promise<DesktopClientRegisterRequest> {
   const resolvedDevice = device ?? (await resolveDeviceInfo())
+  const versionInfo = await resolveVersionInfo()
   return {
     client_id: await resolveDesktopClientID(user),
     device_name: resolvedDevice.device_name,
     os: resolvedDevice.os,
     cpu_arch: resolvedDevice.cpu_arch,
-    client_version: '0.1.0-dev',
+    client_version: versionInfo.version,
+    channel: versionInfo.channel,
+  }
+}
+
+async function resolveVersionInfo(): Promise<{ version: string; channel: string }> {
+  try {
+    const info = await window.desktopBridge?.app?.versionInfo?.()
+    if (info?.version && info.channel) {
+      return info
+    }
+  } catch (err) {
+    console.warn('[desktop-session] versionInfo bridge failed', err)
+  }
+  return {
+    version: '0.1.0',
     channel: 'dev',
   }
 }
@@ -519,6 +535,7 @@ function createPreviewUser(): UserInfo {
 async function createPreviewClient(): Promise<DesktopClientInfo> {
   const now = new Date().toISOString()
   const device = await resolveDeviceInfo()
+  const versionInfo = await resolveVersionInfo()
   return {
     id: 'preview-client',
     tenant_id: 0,
@@ -527,8 +544,8 @@ async function createPreviewClient(): Promise<DesktopClientInfo> {
     device_name: `Preview ${device.device_name}`,
     os: device.os,
     cpu_arch: device.cpu_arch,
-    client_version: '0.1.0-preview',
-    channel: 'dev',
+    client_version: versionInfo.version,
+    channel: versionInfo.channel,
     created_at: now,
     last_seen_at: now,
     last_rotated_at: now,

apps/desktop-client/src/renderer/env.d.ts

@@ -1,6 +1,9 @@
 import type {
   CreatePublishJobResponse,
   DesktopAccountInfo,
+  DesktopClientReleaseCheckResponse,
+  DesktopClientUpdateProgressEvent,
+  DesktopClientUpdateResult,
   DesktopClientRotateResponse,
   DesktopPublishTaskListResponse,
   DesktopRuntimeSessionSyncRequest,
@@ -36,6 +39,14 @@ declare global {
     desktopBridge: {
       app: {
         ping(): Promise<string>
+        versionInfo(): Promise<{
+          version: string
+          channel: string
+        }>
+        checkClientRelease(): Promise<DesktopClientReleaseCheckResponse>
+        clientReleaseDownloadURL(): Promise<{ download_url: string }>
+        quitApp(): Promise<null>
+        startClientUpdate(): Promise<DesktopClientUpdateResult>
         deviceInfo(): Promise<{
           device_name: string
           os: string
@@ -70,9 +81,7 @@ declare global {
         openSettingsWindow(): Promise<null>
         getAppSettings(): Promise<DesktopAppSettings>
         getLoginCredentials(): Promise<DesktopLoginCredentials | null>
-        saveLoginCredentials(
-          credentials: DesktopLoginCredentials,
-        ): Promise<DesktopLoginCredentials>
+        saveLoginCredentials(credentials: DesktopLoginCredentials): Promise<DesktopLoginCredentials>
         clearLoginCredentials(): Promise<null>
         setAppSetting(key: keyof DesktopAppSettings, value: boolean): Promise<DesktopAppSettings>
         syncRuntimeSession(session: DesktopRuntimeSessionSyncRequest | null): Promise<null>
@@ -94,6 +103,9 @@ declare global {
           }) => void,
         ): () => void
         onNetworkObserved(listener: (event: DesktopObservedRequest) => void): () => void
+        onClientUpdateProgress(
+          listener: (event: DesktopClientUpdateProgressEvent) => void,
+        ): () => void
       }
       workbenchNavigation: {
         getState(): Promise<WorkbenchNavigationState>

apps/desktop-client/src/renderer/views/SettingsView.vue

@@ -1,17 +1,36 @@
 <script setup lang="ts">
 import {
+  DownloadOutlined,
   InfoCircleOutlined,
   LoginOutlined,
   SlidersOutlined,
+  SyncOutlined,
   ToolOutlined,
 } from '@ant-design/icons-vue'
 import { computed, onMounted, ref, watch } from 'vue'
 
+import { useClientRelease } from '../composables/useClientRelease'
 import { useDesktopRuntime } from '../composables/useDesktopRuntime'
 import { DEFAULT_API_BASE_URL, useDesktopSession } from '../composables/useDesktopSession'
 
 const { snapshot } = useDesktopRuntime()
 const { apiBaseURL, setApiBaseURL } = useDesktopSession()
+const {
+  release: clientRelease,
+  loading: releaseLoading,
+  error: releaseError,
+  lastCheckedAt,
+  updateProgress,
+  updateError,
+  updateManualDownloadRequired,
+  manualDownloadLoading,
+  updateAvailable,
+  forceUpdate,
+  updating,
+  check: checkClientRelease,
+  startUpdate: startClientUpdate,
+  openManualDownload,
+} = useClientRelease()
 
 type SectionKey =
   | 'general'
@@ -54,6 +73,75 @@ const subsystemEntries = computed(() =>
 )
 
 const appVersion = computed(() => snapshot.value?.app.version ?? '0.1.0')
+const releaseCheckedAtLabel = computed(() => {
+  if (!lastCheckedAt.value) {
+    return ''
+  }
+  return new Date(lastCheckedAt.value).toLocaleString('zh-CN', {
+    hour12: false,
+  })
+})
+const releaseStateLabel = computed(() => {
+  if (releaseLoading.value) {
+    return '检查中'
+  }
+  if (releaseError.value) {
+    return '检查失败'
+  }
+  if (!clientRelease.value) {
+    return '未检查'
+  }
+  if (updateAvailable.value) {
+    return forceUpdate.value ? '必须更新' : '发现新版本'
+  }
+  return '已是最新'
+})
+const releaseDetail = computed(() => {
+  if (releaseError.value) {
+    return releaseError.value
+  }
+  if (!clientRelease.value) {
+    return '当前版本会按平台、架构和渠道匹配运营端配置'
+  }
+  if (updateAvailable.value) {
+    return `最新版本 ${clientRelease.value.latest_version}`
+  }
+  return `当前版本 ${clientRelease.value.current_version}`
+})
+const releaseSourceLabel = computed(() => {
+  if (!clientRelease.value) {
+    return ''
+  }
+  return clientRelease.value.download_source === 'oss' ? 'OSS 自动地址' : '自定义地址'
+})
+const updateProgressPercent = computed(() => {
+  const percent = updateProgress.value?.percent
+  if (typeof percent !== 'number' || !Number.isFinite(percent)) {
+    return null
+  }
+  return Math.max(0, Math.min(100, Math.round(percent)))
+})
+const updateProgressLabel = computed(() => {
+  if (updateError.value) {
+    return updateError.value
+  }
+  switch (updateProgress.value?.stage) {
+    case 'checking':
+      return '正在准备更新'
+    case 'downloading':
+      return updateProgressPercent.value === null
+        ? '正在下载更新'
+        : `正在下载 ${updateProgressPercent.value}%`
+    case 'downloaded':
+      return '下载完成，准备安装'
+    case 'installing':
+      return '正在重启安装'
+    case 'not-available':
+      return '当前已是最新版本'
+    default:
+      return ''
+  }
+})
 const hasServerSettingChanged = computed(
   () => normalizeServerURLInput(serverBaseURL.value) !== apiBaseURL.value,
 )
@@ -86,6 +174,21 @@ function openServiceTerms() {
   void window.desktopBridge.app.openExternalUrl('https://shengxintui.com/terms')
 }
 
+function checkReleaseManually() {
+  void checkClientRelease('manual')
+}
+
+async function openReleaseDownload() {
+  if (!clientRelease.value?.update_available) {
+    return
+  }
+  await startClientUpdate()
+}
+
+async function openOfficialDownload() {
+  await openManualDownload()
+}
+
 function normalizeServerURLInput(value: string): string {
   return value.trim() || DEFAULT_API_BASE_URL
 }
@@ -155,6 +258,7 @@ async function toggleAppSetting(key: keyof DesktopAppSettings) {
 
 onMounted(() => {
   void loadAppSettings()
+  void checkClientRelease('silent')
 })
 
 watch(apiBaseURL, (next) => {
@@ -192,7 +296,61 @@ watch(apiBaseURL, (next) => {
               <span class="brand-ring"></span>
               <span class="brand-core"></span>
             </div>
-            <strong>版本: {{ appVersion }}</strong>
+            <div class="about-version-copy">
+              <span>当前版本</span>
+              <strong>{{ appVersion }}</strong>
+            </div>
+          </div>
+
+          <div class="release-check-card">
+            <div class="release-check-copy">
+              <span class="release-state" :class="{ 'is-update': updateAvailable }">
+                {{ releaseStateLabel }}
+              </span>
+              <strong>{{ releaseDetail }}</strong>
+              <p v-if="clientRelease">
+                {{ releaseSourceLabel }}
+                <span v-if="releaseCheckedAtLabel">· {{ releaseCheckedAtLabel }}</span>
+              </p>
+              <p v-else>检查服务端配置的最新客户端版本和下载地址</p>
+            </div>
+            <div class="release-check-actions">
+              <button
+                type="button"
+                class="server-button"
+                :disabled="releaseLoading"
+                @click="checkReleaseManually"
+              >
+                <SyncOutlined />
+                {{ releaseLoading ? '检查中' : '检查更新' }}
+              </button>
+              <button
+                v-if="clientRelease && updateAvailable"
+                type="button"
+                class="server-button server-button--primary"
+                :disabled="updating"
+                @click="openReleaseDownload"
+              >
+                <DownloadOutlined />
+                {{ updating ? '更新中' : '立即更新' }}
+              </button>
+              <button
+                v-if="clientRelease && updateAvailable && updateManualDownloadRequired"
+                type="button"
+                class="server-button"
+                :disabled="manualDownloadLoading"
+                @click="openOfficialDownload"
+              >
+                <DownloadOutlined />
+                {{ manualDownloadLoading ? '打开中' : '官网下载' }}
+              </button>
+            </div>
+            <div v-if="updateProgressLabel" class="release-update-progress">
+              <div class="release-update-progress__bar">
+                <span :style="{ width: `${updateProgressPercent ?? 12}%` }"></span>
+              </div>
+              <p>{{ updateProgressLabel }}</p>
+            </div>
           </div>
 
           <footer class="about-footer">
@@ -398,7 +556,7 @@ watch(apiBaseURL, (next) => {
 .settings-heading h1 {
   margin: 0;
   color: #000000;
-  font-size:22px;
+  font-size: 22px;
   font-weight: 900;
   line-height: 1;
 }
@@ -412,6 +570,9 @@ watch(apiBaseURL, (next) => {
 
 .about-page {
   position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
   min-height: 100%;
   padding: 28px 44px 108px;
 }
@@ -432,6 +593,19 @@ watch(apiBaseURL, (next) => {
   font-weight: 800;
 }
 
+.about-version-copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.about-version-copy span {
+  color: #777777;
+  font-size: 13px;
+  font-weight: 700;
+}
+
 .about-logo {
   position: relative;
   display: grid;
@@ -460,6 +634,83 @@ watch(apiBaseURL, (next) => {
   box-shadow: 0 3px 8px rgba(22, 119, 255, 0.35);
 }
 
+.release-check-card {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 20px;
+  align-items: center;
+  padding: 22px 30px;
+  border-radius: 8px;
+  background: #ffffff;
+}
+
+.release-update-progress {
+  grid-column: 1 / -1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.release-update-progress__bar {
+  height: 6px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #eeeeef;
+}
+
+.release-update-progress__bar span {
+  display: block;
+  width: 0;
+  height: 100%;
+  border-radius: inherit;
+  background: #1677ff;
+  transition: width 0.2s ease;
+}
+
+.release-update-progress p {
+  margin: 0;
+  color: #777777;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.release-check-copy {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 7px;
+}
+
+.release-state {
+  color: #777777;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.release-state.is-update {
+  color: #d93025;
+}
+
+.release-check-copy strong {
+  color: #070707;
+  font-size: 16px;
+  font-weight: 850;
+}
+
+.release-check-copy p {
+  margin: 0;
+  color: #777777;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.release-check-actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
 .about-footer {
   position: absolute;
   left: 0;
@@ -580,6 +831,10 @@ watch(apiBaseURL, (next) => {
 }
 
 .server-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
   height: 32px;
   padding: 0 14px;
   border: 0;
@@ -763,5 +1018,13 @@ watch(apiBaseURL, (next) => {
     grid-template-columns: 1fr;
     gap: 14px;
   }
+
+  .release-check-card {
+    grid-template-columns: 1fr;
+  }
+
+  .release-check-actions {
+    justify-content: flex-start;
+  }
 }
 </style>