feat(desktop): add client release updater

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>