feat:任务大纲停止以及执行结果暂停继续逻辑完善
This commit is contained in:
liailing1026
260
frontend/src/components/Notification/Notification.vue
Normal file
260
frontend/src/components/Notification/Notification.vue
Normal file
@@ -0,0 +1,260 @@
|
||||
<template>
|
||||
<teleport to="body">
|
||||
<div class="notification-container">
|
||||
<transition-group
|
||||
name="notification"
|
||||
tag="div"
|
||||
class="notification-list"
|
||||
>
|
||||
<div
|
||||
v-for="notification in notifications"
|
||||
:key="notification.id"
|
||||
:class="[
|
||||
'notification-item',
|
||||
`notification-${notification.type || 'info'}`
|
||||
]"
|
||||
:style="{ zIndex: notification.zIndex || 1000 }"
|
||||
>
|
||||
<div class="notification-content">
|
||||
<div class="notification-icon">
|
||||
<component :is="getIcon(notification.type)" />
|
||||
</div>
|
||||
<div class="notification-message">
|
||||
<div class="notification-title">{{ notification.title }}</div>
|
||||
<div v-if="notification.detailTitle" class="notification-detail-title">
|
||||
{{ notification.detailTitle }}
|
||||
</div>
|
||||
<div v-if="notification.detailMessage" class="notification-detail-desc">
|
||||
{{ notification.detailMessage }}
|
||||
</div>
|
||||
<div v-else-if="notification.message" class="notification-desc">
|
||||
{{ notification.message }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="notification-close" @click="close(notification.id)">
|
||||
<Close />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="notification.showProgress" class="notification-progress">
|
||||
<div
|
||||
class="progress-bar"
|
||||
:style="{ width: `${notification.progress || 0}%` }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</transition-group>
|
||||
</div>
|
||||
</teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import {
|
||||
Close,
|
||||
SuccessFilled as IconSuccess,
|
||||
WarningFilled as IconWarning,
|
||||
CircleCloseFilled,
|
||||
InfoFilled
|
||||
} from '@element-plus/icons-vue'
|
||||
import type { NotificationItem } from '@/composables/useNotification'
|
||||
|
||||
const props = defineProps<{
|
||||
notifications: NotificationItem[]
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
close: [id: string]
|
||||
}>()
|
||||
|
||||
const close = (id: string) => {
|
||||
emit('close', id)
|
||||
}
|
||||
|
||||
const getIcon = (type?: string) => {
|
||||
switch (type) {
|
||||
case 'success':
|
||||
return IconSuccess
|
||||
case 'warning':
|
||||
return IconWarning
|
||||
case 'error':
|
||||
return IconWarning
|
||||
default:
|
||||
return InfoFilled
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.notification-container {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.notification-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.notification-item {
|
||||
pointer-events: auto;
|
||||
min-width: 300px;
|
||||
max-width: 450px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
overflow: hidden;
|
||||
border-left: 4px solid #409eff;
|
||||
}
|
||||
|
||||
.notification-success {
|
||||
border-left-color: #67c23a;
|
||||
}
|
||||
|
||||
.notification-warning {
|
||||
border-left-color: #e6a23c;
|
||||
}
|
||||
|
||||
.notification-error {
|
||||
border-left-color: #f56c6c;
|
||||
}
|
||||
|
||||
.notification-content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 12px 16px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.notification-icon {
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.notification-icon .success {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.notification-icon .warning {
|
||||
color: #e6a23c;
|
||||
}
|
||||
|
||||
.notification-icon .error {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.notification-icon .info {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.notification-message {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.notification-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #303133;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.notification-detail-title {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #409eff;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.notification-detail-desc {
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.notification-desc {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.notification-close {
|
||||
flex-shrink: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #909399;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.notification-close:hover {
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.notification-progress {
|
||||
height: 2px;
|
||||
background: #f0f2f5;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
height: 100%;
|
||||
background: #409eff;
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
/* 进入动画 */
|
||||
.notification-enter-active {
|
||||
animation: slideInRight 0.3s ease-out;
|
||||
}
|
||||
|
||||
/* 离开动画 */
|
||||
.notification-leave-active {
|
||||
animation: slideOutRight 0.3s ease-in;
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutRight {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
/* 列表项移动动画 */
|
||||
.notification-move,
|
||||
.notification-enter-active,
|
||||
.notification-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.notification-leave-active {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user