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;