feat: 自动更新按钮生效

2025-09-13 17:43:36 +08:00
parent 6c7a0226fd
commit b36fb89566
7 changed files with 244 additions and 49 deletions
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -3,7 +3,7 @@ import { onMounted, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import { ConfigProvider } from 'ant-design-vue'
 import { useTheme } from './composables/useTheme.ts'
-import { useUpdateChecker } from './composables/useUpdateChecker.ts'
+import { useUpdateModal } from './composables/useUpdateChecker.ts'
 import AppLayout from './components/AppLayout.vue'
 import TitleBar from './components/TitleBar.vue'
 import UpdateModal from './components/UpdateModal.vue'
@@ -12,7 +12,7 @@ import { logger } from '@/utils/logger'

 const route = useRoute()
 const { antdTheme, initTheme } = useTheme()
-const { updateVisible, updateData, onUpdateConfirmed } = useUpdateChecker()
+const { updateVisible, updateData, onUpdateConfirmed } = useUpdateModal()

 // 判断是否为初始化页面
 const isInitializationPage = computed(() => route.name === 'Initialization')
@@ -55,24 +55,28 @@ onMounted(() => {

 .app-container {
  height: 100vh;
-  overflow: hidden;
  display: flex;
  flex-direction: column;
 }

 .initialization-container {
  height: 100vh;
-  overflow: hidden;
  display: flex;
  flex-direction: column;
 }

 .initialization-content {
  flex: 1;
-  overflow: auto;
+  overflow-y: auto;
+  overflow-x: hidden;
  width: 100%;
-  height: 100%;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
+  /* 隐藏滚动条但保留滚动功能 */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+}
+
+/* 隐藏 Webkit 浏览器的滚动条 */
+.initialization-content::-webkit-scrollbar {
+  display: none;
 }
 </style>
--- a/frontend/src/components/initialization/AdminCheck.vue
+++ b/frontend/src/components/initialization/AdminCheck.vue
@@ -29,6 +29,16 @@ async function handleRestartAsAdmin() {
  display: flex;
  justify-content: center;
  align-items: center;
-  min-height: 60vh;
+  min-height: calc(100vh - 120px); /* 减去标题栏和一些边距 */
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+/* 响应式优化 */
+@media (max-height: 600px) {
+  .admin-check {
+    min-height: auto;
+    padding: 10px;
+  }
 }
 </style>
--- a/frontend/src/components/initialization/AutoMode.vue
+++ b/frontend/src/components/initialization/AutoMode.vue
@@ -42,6 +42,7 @@ import { ref, onMounted } from 'vue'
 import { getConfig } from '@/utils/config'
 import { getMirrorUrl } from '@/config/mirrors'
 import router from '@/router'
+import { useUpdateChecker } from '@/composables/useUpdateChecker'
 import { connectAfterBackendStart } from '@/composables/useWebSocket'


@@ -54,6 +55,9 @@ interface Props {

 const props = defineProps<Props>()

+// 使用更新检查器
+const { startPolling } = useUpdateChecker()
+
 // 状态
 const progress = ref(0)
 const progressText = ref('')
@@ -195,6 +199,10 @@ async function startBackendService() {
  } else {
    console.log('WebSocket连接建立成功')
  }
+  
+  // WebSocket连接完成后，启动版本检查定时任务
+  console.log('启动版本检查定时任务...')
+  await startPolling()
 }

 // 组件挂载时开始自动流程
@@ -210,14 +218,14 @@ onMounted(() => {
  flex-direction: column;
  align-items: center;
  justify-content: center;
-  min-height: 60vh;
+  min-height: calc(100vh - 120px); /* 减去标题栏和一些边距 */
+  padding: 20px;
+  box-sizing: border-box;
 }

 .header {
  text-align: center;
  margin-bottom: 40px;
-  margin-top: 100px;
-  flex: auto;
  display: flex;
  align-items: center;
  justify-content: center;
@@ -236,13 +244,19 @@ onMounted(() => {
  height: 100px;
 }

+.tip {
+  margin-bottom: 20px;
+  text-align: center;
+}
+
 .auto-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin: 40px 0;
-  width: 400px;
+  width: 100%;
+  max-width: 400px;
 }

 .progress-text {
@@ -255,5 +269,39 @@ onMounted(() => {
  margin-top: 20px;
  display: flex;
  gap: 20px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+/* 响应式优化 */
+@media (max-height: 700px) {
+  .auto-mode {
+    min-height: auto;
+    padding: 10px;
+  }
+  
+  .header {
+    margin-bottom: 20px;
+  }
+  
+  .header h1 {
+    font-size: 32px;
+  }
+  
+  .logo {
+    width: 80px;
+    height: 80px;
+  }
+}
+
+@media (max-width: 600px) {
+  .auto-actions {
+    flex-direction: column;
+    align-items: center;
+  }
+  
+  .auto-actions .ant-btn {
+    width: 200px;
+  }
 }
 </style>
--- a/frontend/src/components/initialization/ManualMode.vue
+++ b/frontend/src/components/initialization/ManualMode.vue
@@ -49,12 +49,12 @@
    </div>

    <a-steps :current="currentStep" :status="stepStatus" class="init-steps">
-      <a-step title="主题设置" description="选择您喜欢的主题" />
-      <a-step title="Python 环境" description="安装 Python 运行环境" />
-      <a-step title="Git 工具" description="安装 Git 版本控制工具" />
-      <a-step title="源码获取" description="获取最新的后端代码" />
-      <a-step title="依赖安装" description="安装 Python 依赖包" />
-      <a-step title="启动服务" description="启动后端服务" />
+      <a-step title="设置主题" />
+      <a-step title="配置环境" />
+      <a-step title="Git 工具" />
+      <a-step title="获取源码" />
+      <a-step title="安装依赖" />
+      <a-step title="启动服务" />
    </a-steps>

    <!--    &lt;!&ndash; 全局进度条 &ndash;&gt;-->
@@ -139,6 +139,7 @@
 import { ref, watch } from 'vue'
 import { notification } from 'ant-design-vue'
 import { saveConfig } from '@/utils/config'
+import { useUpdateChecker } from '@/composables/useUpdateChecker'
 import ThemeStep from './ThemeStep.vue'
 import PythonStep from './PythonStep.vue'

@@ -167,6 +168,9 @@ interface Props {

 const props = defineProps<Props>()

+// 使用更新检查器
+const { startPolling } = useUpdateChecker()
+
 // 基础状态
 const currentStep = ref(0)
 const stepStatus = ref<'wait' | 'process' | 'finish' | 'error'>('process')
@@ -391,6 +395,23 @@ async function autoStartBackendService() {
    if (result.success) {
      if (serviceStepRef.value) {
        serviceStepRef.value.serviceProgress = 100
+        serviceStepRef.value.serviceStatus = '后端服务启动成功，正在建立WebSocket连接...'
+      }
+      
+      // 后端启动成功，建立WebSocket连接
+      console.log('后端自动启动成功，正在建立WebSocket连接...')
+      const wsConnected = await connectAfterBackendStart()
+      if (!wsConnected) {
+        console.warn('WebSocket连接建立失败，但继续进入应用')
+      } else {
+        console.log('WebSocket连接建立成功')
+      }
+      
+      // WebSocket连接完成后，启动版本检查定时任务
+      console.log('启动版本检查定时任务...')
+      await startPolling()
+      
+      if (serviceStepRef.value) {
        serviceStepRef.value.serviceStatus = '后端服务启动成功，即将进入主页...'
      }
      stepStatus.value = 'finish'
@@ -448,6 +469,10 @@ async function startBackendService() {
        console.log('WebSocket连接建立成功')
      }
      
+      // WebSocket连接完成后，启动版本检查定时任务
+      console.log('启动版本检查定时任务...')
+      await startPolling()
+      
      if (serviceStepRef.value) {
        serviceStepRef.value.serviceStatus = '后端服务启动成功，即将进入主页...'
      }
@@ -514,25 +539,23 @@ watch(errorMessage, val => {

 <style scoped>
 .manual-mode {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
  width: 100%;
+  max-width: 1000px;
+  margin: 0 auto;
 }

 .header {
  text-align: center;
-  margin-bottom: 40px;
+  margin-bottom: 20px;
 }

-.header h1 {
-  font-size: 28px;
+.header h3 {
+  font-size: 24px;
  font-weight: 600;
  color: var(--ant-color-text);
-  margin-bottom: 8px;
-}
-
-.header p {
-  font-size: 16px;
-  color: var(--ant-color-text-secondary);
-  margin: 0 0 20px 0;
 }

 .init-steps {
@@ -540,21 +563,50 @@ watch(errorMessage, val => {
 }

 .step-content {
+  background-color: var(--ant-color-bg-container);
+  border: 1px solid var(--ant-color-border-secondary);
+  border-radius: 8px;
+  padding: 24px;
  min-height: 300px;
-  margin-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }

 .step-actions {
  display: flex;
  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
+  gap: 16px;
+  margin-top: 20px;
 }

+/* 响应式优化 */
@media (max-width: 768px) {
+  .manual-mode {
+    gap: 15px;
+  }
+
+  .header h3 {
+    font-size: 20px;
+  }
+
+  .init-steps {
+    /* 在小屏幕上，步骤条可以换行显示 */
+    :deep(.ant-steps-item-title) {
+      white-space: normal;
+    }
+  }
+
+  .step-content {
+    padding: 16px;
+    min-height: 250px;
+  }
+}
+
+@media (max-width: 480px) {
  .step-actions {
    flex-direction: column;
-    gap: 12px;
+    align-items: stretch;
  }
 }
 </style>
--- a/frontend/src/composables/useUpdateChecker.ts
+++ b/frontend/src/composables/useUpdateChecker.ts
@@ -1,4 +1,4 @@
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onUnmounted } from 'vue'
 import { Service } from '@/api'
 import { message } from 'ant-design-vue'

@@ -17,11 +17,32 @@ const isPolling = ref(false)
 // 防止重复弹出的状态
 let lastShownVersion: string | null = null

+// 检查自动更新设置是否开启
+const checkAutoUpdateEnabled = async (): Promise<boolean> => {
+  try {
+    const response = await Service.getScriptsApiSettingGetPost()
+    if (response.code === 200 && response.data) {
+      return response.data.Update?.IfAutoUpdate || false
+    }
+  } catch (error) {
+    console.warn('[useUpdateChecker] 获取自动更新设置失败:', error)
+  }
+  return false
+}
+
 export function useUpdateChecker() {
  
  // 执行一次更新检查 - 完全参考顶栏的 pollOnce 逻辑
  const pollOnce = async () => {
    if (isPolling.value) return
+    
+    // 检查自动更新设置是否开启
+    const autoUpdateEnabled = await checkAutoUpdateEnabled()
+    if (!autoUpdateEnabled) {
+      console.log('[useUpdateChecker] 自动检查更新已关闭，跳过定时检查')
+      return
+    }
+    
    isPolling.value = true
    
    try {
@@ -89,8 +110,23 @@ export function useUpdateChecker() {
    updateVisible.value = false
  }

-  // 组件挂载时启动检查器 - 参考顶栏的 onMounted 逻辑
-  onMounted(async () => {
+  // 启动定时检查器
+  const startPolling = async () => {
+    // 检查自动更新设置是否开启
+    const autoUpdateEnabled = await checkAutoUpdateEnabled()
+    if (!autoUpdateEnabled) {
+      console.log('[useUpdateChecker] 自动检查更新已关闭，不启动定时任务')
+      return
+    }
+    
+    // 如果已经在检查中，则不重复启动
+    if (updateCheckTimer) {
+      console.log('[useUpdateChecker] 定时任务已存在，跳过启动')
+      return
+    }
+    
+    console.log('[useUpdateChecker] 启动定时版本检查任务')
+    
    // 延迟3秒后再执行首次检查，确保后端已经完全启动
    setTimeout(async () => {
      await pollOnce()
@@ -98,20 +134,47 @@ export function useUpdateChecker() {
    
    // 每 4 小时检查一次更新
    updateCheckTimer = setInterval(pollOnce, POLL_MS)
-  })
+  }

-  // 组件卸载时清理定时器 - 参考顶栏的 onBeforeUnmount 逻辑
-  onUnmounted(() => {
+  // 停止定时检查器
+  const stopPolling = () => {
    if (updateCheckTimer) {
      clearInterval(updateCheckTimer)
      updateCheckTimer = null
+      console.log('[useUpdateChecker] 停止定时版本检查任务')
    }
+  }
+
+  // 重新启动定时检查器（当设置变更时调用）
+  const restartPolling = async () => {
+    console.log('[useUpdateChecker] 重新启动定时检查任务')
+    stopPolling() // 先停止现有任务
+    await startPolling() // 再根据设置重新启动
+  }
+
+  // 组件卸载时清理定时器
+  onUnmounted(() => {
+    stopPolling()
  })

  return {
    updateVisible,
    updateData,
    checkUpdate,
-    onUpdateConfirmed
+    onUpdateConfirmed,
+    startPolling,
+    stopPolling,
+    restartPolling
+  }
+}
+
+// 创建一个仅用于显示弹窗的轻量版本（给App.vue使用）
+export function useUpdateModal() {
+  return {
+    updateVisible,
+    updateData,
+    onUpdateConfirmed: () => {
+      updateVisible.value = false
+    }
  }
 }
--- a/frontend/src/views/Initialization.vue
+++ b/frontend/src/views/Initialization.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="initialization-container">
+  <div class="initialization-page">
    <!-- 管理员权限检查 -->
    <AdminCheck v-if="!isAdmin" />

@@ -268,17 +268,17 @@ onUnmounted(() => {
 </script>

 <style scoped>
-.initialization-container {
-  min-height: 100vh;
-  padding: 50px 100px;
-  margin: 0 auto;
-  background-color: var(--ant-color-bg-layout);
-  color: var(--ant-color-text);
+.initialization-page {
+  padding: 20px;
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 100%;
 }

+/* 响应式优化 */
@media (max-width: 768px) {
-  .initialization-container {
-    padding: 20px;
+  .initialization-page {
+    padding: 10px;
  }
 }
 </style>
--- a/frontend/src/views/Settings.vue
+++ b/frontend/src/views/Settings.vue
@@ -11,6 +11,7 @@ import { message } from 'ant-design-vue'
 import type { ThemeColor, ThemeMode } from '../composables/useTheme'
 import { useTheme } from '../composables/useTheme.ts'
 import { useSettingsApi } from '../composables/useSettingsApi'
+import { useUpdateChecker } from '../composables/useUpdateChecker'
 import type { SelectValue } from 'ant-design-vue/es/select'
 import type { SettingsData } from '../types/settings'
 import { Service, type VersionOut } from '@/api'
@@ -23,6 +24,7 @@ const app_version = import.meta.env.VITE_APP_VERSION || '获取版本失败！'
 const router = useRouter()
 const { themeMode, themeColor, themeColors, setThemeMode, setThemeColor } = useTheme()
 const { loading, getSettings, updateSettings } = useSettingsApi()
+const { restartPolling } = useUpdateChecker()

 const updateVisible = ref(false)

@@ -184,6 +186,22 @@ const handleSettingChange = async (category: keyof SettingsData, key: string, va
      message.error('托盘设置更新失败')
    }
  }
+
+  // 如果是自动检查更新设置变更，重新启动定时任务
+  if (category === 'Update' && key === 'IfAutoUpdate') {
+    try {
+      console.log(`检测到自动检查更新设置变更: ${value}`)
+      await restartPolling()
+      if (value) {
+        message.success('已启用自动检查更新')
+      } else {
+        message.success('已禁用自动检查更新')
+      }
+    } catch (error) {
+      console.error('重新启动更新检查任务失败:', error)
+      message.error('更新检查设置变更失败')
+    }
+  }
 }

 const getBackendVersion = async () => {