refactor: 移动电源操作倒计时逻辑至全局组件 GlobalPowerCountdown.vue[待测试]
This commit is contained in:
@@ -112,43 +112,7 @@
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
<!-- 电源操作倒计时全屏弹窗 -->
|
||||
<div v-if="powerCountdownVisible" class="power-countdown-overlay">
|
||||
<div class="power-countdown-container">
|
||||
<div class="countdown-content">
|
||||
<div class="warning-icon">⚠️</div>
|
||||
<h2 class="countdown-title">{{ powerCountdownData.title || `${getPowerActionText(powerAction)}倒计时` }}</h2>
|
||||
<p class="countdown-message">
|
||||
{{ powerCountdownData.message || `程序将在倒计时结束后执行 ${getPowerActionText(powerAction)} 操作` }}
|
||||
</p>
|
||||
<div class="countdown-timer" v-if="powerCountdownData.countdown !== undefined">
|
||||
<span class="countdown-number">{{ powerCountdownData.countdown }}</span>
|
||||
<span class="countdown-unit">秒</span>
|
||||
</div>
|
||||
<div class="countdown-timer" v-else>
|
||||
<span class="countdown-text">等待后端倒计时...</span>
|
||||
</div>
|
||||
<a-progress
|
||||
v-if="powerCountdownData.countdown !== undefined"
|
||||
:percent="Math.max(0, Math.min(100, (60 - powerCountdownData.countdown) / 60 * 100))"
|
||||
:show-info="false"
|
||||
:stroke-color="(powerCountdownData.countdown || 0) <= 10 ? '#ff4d4f' : '#1890ff'"
|
||||
:stroke-width="8"
|
||||
class="countdown-progress"
|
||||
/>
|
||||
<div class="countdown-actions">
|
||||
<a-button
|
||||
type="primary"
|
||||
size="large"
|
||||
@click="cancelPowerAction"
|
||||
class="cancel-button"
|
||||
>
|
||||
取消操作
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 电源操作倒计时弹窗已移至全局组件 GlobalPowerCountdown.vue -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -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 */
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user