From 2101ae99083f8049e411089989e441fdf913c31a Mon Sep 17 00:00:00 2001 From: AoXuan Date: Thu, 25 Sep 2025 00:43:03 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E7=A7=BB=E5=8A=A8=E7=94=B5?= =?UTF-8?q?=E6=BA=90=E6=93=8D=E4=BD=9C=E5=80=92=E8=AE=A1=E6=97=B6=E9=80=BB?= =?UTF-8?q?=E8=BE=91=E8=87=B3=E5=85=A8=E5=B1=80=E7=BB=84=E4=BB=B6=20Global?= =?UTF-8?q?PowerCountdown.vue[=E5=BE=85=E6=B5=8B=E8=AF=95]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/App.vue | 4 + .../src/components/GlobalPowerCountdown.vue | 307 ++++++++++++++++++ frontend/src/views/scheduler/index.vue | 183 +---------- .../src/views/scheduler/useSchedulerLogic.ts | 88 ++--- 4 files changed, 333 insertions(+), 249 deletions(-) create mode 100644 frontend/src/components/GlobalPowerCountdown.vue diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 9c02e1e..9d6bc4e 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -8,6 +8,7 @@ import AppLayout from './components/AppLayout.vue' import TitleBar from './components/TitleBar.vue' import UpdateModal from './components/UpdateModal.vue' import DevDebugPanel from './components/DevDebugPanel.vue' +import GlobalPowerCountdown from './components/GlobalPowerCountdown.vue' import zhCN from 'ant-design-vue/es/locale/zh_CN' import { logger } from '@/utils/logger' @@ -49,6 +50,9 @@ onMounted(() => { + + + diff --git a/frontend/src/components/GlobalPowerCountdown.vue b/frontend/src/components/GlobalPowerCountdown.vue new file mode 100644 index 0000000..4d0da8d --- /dev/null +++ b/frontend/src/components/GlobalPowerCountdown.vue @@ -0,0 +1,307 @@ + + + + + \ No newline at end of file diff --git a/frontend/src/views/scheduler/index.vue b/frontend/src/views/scheduler/index.vue index fb2a959..67ee33a 100644 --- a/frontend/src/views/scheduler/index.vue +++ b/frontend/src/views/scheduler/index.vue @@ -112,43 +112,7 @@ - -
-
-
-
⚠️
-

{{ powerCountdownData.title || `${getPowerActionText(powerAction)}倒计时` }}

-

- {{ powerCountdownData.message || `程序将在倒计时结束后执行 ${getPowerActionText(powerAction)} 操作` }} -

-
- {{ powerCountdownData.countdown }} - 秒 -
-
- 等待后端倒计时... -
- -
- - 取消操作 - -
-
-
-
+ @@ -346,127 +310,7 @@ onUnmounted(() => { overflow: hidden; } -/* 电源操作倒计时全屏弹窗样式 */ -.power-countdown-overlay { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: rgba(0, 0, 0, 0.8); - backdrop-filter: blur(8px); - z-index: 9999; - display: flex; - align-items: center; - justify-content: center; - animation: fadeIn 0.3s ease-out; -} - -.power-countdown-container { - background: var(--ant-color-bg-container); - border-radius: 16px; - padding: 48px; - box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2); - text-align: center; - max-width: 500px; - width: 90%; - animation: slideIn 0.3s ease-out; -} - -.countdown-content .warning-icon { - font-size: 64px; - margin-bottom: 24px; - display: block; - animation: pulse 2s infinite; -} - -.countdown-title { - font-size: 28px; - font-weight: 600; - color: var(--ant-color-text); - margin: 0 0 16px 0; -} - -.countdown-message { - font-size: 16px; - color: var(--ant-color-text-secondary); - margin: 0 0 32px 0; - line-height: 1.5; -} - -.countdown-timer { - display: flex; - align-items: baseline; - justify-content: center; - margin-bottom: 32px; -} - -.countdown-number { - font-size: 72px; - font-weight: 700; - color: var(--ant-color-primary); - line-height: 1; - margin-right: 8px; - font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace; -} - -.countdown-unit { - font-size: 24px; - color: var(--ant-color-text-secondary); - font-weight: 500; -} - -.countdown-text { - font-size: 24px; - color: var(--ant-color-text-secondary); - font-weight: 500; -} - -.countdown-progress { - margin-bottom: 32px; -} - -.countdown-actions { - display: flex; - justify-content: center; -} - -.cancel-button { - padding: 12px 32px; - height: auto; - font-size: 16px; - font-weight: 500; -} - -/* 动画效果 */ -@keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -@keyframes slideIn { - from { - opacity: 0; - transform: translateY(-20px) scale(0.95); - } - to { - opacity: 1; - transform: translateY(0) scale(1); - } -} - -@keyframes pulse { - 0%, 100% { - transform: scale(1); - } - 50% { - transform: scale(1.1); - } -} +/* 电源操作倒计时弹窗样式已移至 GlobalPowerCountdown.vue */ /* 响应式 - 移动端适配 */ @media (max-width: 768px) { @@ -499,27 +343,6 @@ onUnmounted(() => { width: 100%; } - /* 移动端倒计时弹窗适配 */ - .power-countdown-container { - padding: 32px 24px; - margin: 16px; - } - - .countdown-title { - font-size: 24px; - } - - .countdown-number { - font-size: 56px; - } - - .countdown-unit { - font-size: 20px; - } - - .countdown-content .warning-icon { - font-size: 48px; - margin-bottom: 16px; - } + /* 移动端倒计时弹窗适配已移至 GlobalPowerCountdown.vue */ } \ No newline at end of file diff --git a/frontend/src/views/scheduler/useSchedulerLogic.ts b/frontend/src/views/scheduler/useSchedulerLogic.ts index 01711f0..7b541bc 100644 --- a/frontend/src/views/scheduler/useSchedulerLogic.ts +++ b/frontend/src/views/scheduler/useSchedulerLogic.ts @@ -8,7 +8,6 @@ import schedulerHandlers from './schedulerHandlers' import type { ComboBoxItem } from '@/api/models/ComboBoxItem' import type { QueueItem, Script } from './schedulerConstants' import { - getPowerActionText, type SchedulerTab, type TaskMessage, type SchedulerStatus, @@ -94,13 +93,15 @@ export function useSchedulerLogic() { // 电源操作 - 从本地存储加载或使用默认值 const powerAction = ref(loadPowerActionFromStorage()) + // 注意：电源倒计时弹窗已移至全局组件 GlobalPowerCountdown.vue + // 这里保留引用以避免破坏现有代码，但实际功能由全局组件处理 const powerCountdownVisible = ref(false) const powerCountdownData = ref<{ title?: string message?: string countdown?: number }>({}) - // 前端自己的60秒倒计时 + // 前端自己的60秒倒计时 - 已移至全局组件 let powerCountdownTimer: ReturnType | null = null // 消息弹窗 @@ -508,10 +509,10 @@ export function useSchedulerLogic() { } const handleMessageDialog = (tab: SchedulerTab, data: any) => { - // 处理倒计时消息 + // 处理倒计时消息 - 已移至全局组件处理 if (data.type === 'Countdown') { - console.log('[Scheduler] 收到倒计时消息，启动60秒倒计时:', data) - startPowerCountdown(data) + console.log('[Scheduler] 收到倒计时消息，由全局组件处理:', data) + // 不再在调度中心处理倒计时，由 GlobalPowerCountdown 组件处理 return } @@ -654,68 +655,16 @@ export function useSchedulerLogic() { console.log('[Scheduler] 电源操作显示已更新为:', newPowerAction) } - // 启动60秒倒计时 - const startPowerCountdown = (data: any) => { - // 清除之前的计时器 - if (powerCountdownTimer) { - clearInterval(powerCountdownTimer) - powerCountdownTimer = null - } - - // 显示倒计时弹窗 - powerCountdownVisible.value = true - - // 设置倒计时数据，从60秒开始 - powerCountdownData.value = { - title: data.title || `${getPowerActionText(powerAction.value)}倒计时`, - message: data.message || `程序将在倒计时结束后执行 ${getPowerActionText(powerAction.value)} 操作`, - countdown: 60 - } - - // 启动每秒倒计时 - powerCountdownTimer = setInterval(() => { - if (powerCountdownData.value.countdown && powerCountdownData.value.countdown > 0) { - powerCountdownData.value.countdown-- - console.log('[Scheduler] 倒计时:', powerCountdownData.value.countdown) - - // 倒计时结束 - if (powerCountdownData.value.countdown <= 0) { - if (powerCountdownTimer) { - clearInterval(powerCountdownTimer) - powerCountdownTimer = null - } - powerCountdownVisible.value = false - console.log('[Scheduler] 倒计时结束，弹窗关闭') - } - } - }, 1000) - } - - // 移除自动执行电源操作，由后端完全控制 + // 启动60秒倒计时 - 已移至全局组件，这里保留空函数避免破坏现有代码 +// 移除自动执行电源操作，由后端完全控制 // const executePowerAction = async () => { // // 不再自己执行电源操作，完全由后端控制 // } const cancelPowerAction = async () => { - // 清除倒计时器 - if (powerCountdownTimer) { - clearInterval(powerCountdownTimer) - powerCountdownTimer = null - } - - // 关闭倒计时弹窗 - powerCountdownVisible.value = false - - // 调用取消电源操作的API - try { - await Service.cancelPowerTaskApiDispatchCancelPowerPost() - message.success('已取消电源操作') - } catch (error) { - console.error('取消电源操作失败:', error) - message.error('取消电源操作失败') - } - - // 注意：这里不重置 powerAction，保留用户选择 + console.log('[Scheduler] cancelPowerAction 已移至全局组件，调度中心不再处理') + // 电源操作取消功能已移至 GlobalPowerCountdown 组件 + // 这里保留空函数以避免破坏现有的调用代码 } // 移除自动检查任务完成的逻辑，完全由后端控制 @@ -788,8 +737,8 @@ export function useSchedulerLogic() { }, onCountdown: (data) => { try { - // 直接启动前端倒计时 - startPowerCountdown(data) + // 倒计时已移至全局组件处理，这里不再处理 + console.log('[Scheduler] 倒计时消息由全局组件处理:', data) } catch (e) { console.warn('[Scheduler] registerSchedulerUI onCountdown error:', e) } @@ -814,7 +763,8 @@ export function useSchedulerLogic() { const pendingCountdown = schedulerHandlers.consumePendingCountdown() if (pendingCountdown) { try { - startPowerCountdown(pendingCountdown) + // 倒计时已移至全局组件处理，这里不再处理 + console.log('[Scheduler] 待处理倒计时消息由全局组件处理:', pendingCountdown) } catch (e) { console.warn('[Scheduler] replay pending countdown error:', e) } @@ -844,9 +794,9 @@ export function useSchedulerLogic() { console.log('[Scheduler] 收到Main消息:', { type, data }) if (type === 'Message' && data && data.type === 'Countdown') { - // 收到倒计时消息，启动前端60秒倒计时 - console.log('[Scheduler] 收到倒计时消息，启动前端60秒倒计时:', data) - startPowerCountdown(data) + // 收到倒计时消息，由全局组件处理 + console.log('[Scheduler] 收到倒计时消息，由全局组件处理:', data) + // 不再在调度中心处理倒计时 } else if (type === 'Update' && data && data.PowerSign !== undefined) { // 收到电源操作更新消息，更新显示 console.log('[Scheduler] 收到电源操作更新消息:', data.PowerSign) @@ -856,7 +806,7 @@ export function useSchedulerLogic() { // 清理函数 const cleanup = () => { - // 清理倒计时器 + // 清理倒计时器 - 已移至全局组件，这里保留以避免错误 if (powerCountdownTimer) { clearInterval(powerCountdownTimer) powerCountdownTimer = null