661 lines
16 KiB
Vue
661 lines
16 KiB
Vue
<script setup lang="ts">
|
||
import { computed, onMounted, onUnmounted, ref, watch } from "vue";
|
||
import {
|
||
WarningFilled,
|
||
Close,
|
||
Bell,
|
||
UploadFilled,
|
||
CircleCheckFilled,
|
||
CircleCloseFilled,
|
||
Loading
|
||
} from "@element-plus/icons-vue";
|
||
import { useAlertMarquee, type AlertMessage } from "@/composables/useAlertMarquee";
|
||
import { useImportTaskStore, type ImportTask } from "@/store/importTasks";
|
||
import { useFloatingDrag } from "@/composables/useFloatingDrag";
|
||
|
||
const {
|
||
messages,
|
||
messagesReversed,
|
||
latestMessage,
|
||
messageCount,
|
||
hasMessages,
|
||
drawerVisible,
|
||
detailTarget,
|
||
detailVisible,
|
||
position,
|
||
showDetail,
|
||
closeDetail,
|
||
removeAlert,
|
||
clearAll,
|
||
startPolling,
|
||
stopPolling
|
||
} = useAlertMarquee();
|
||
|
||
const importStore = useImportTaskStore();
|
||
|
||
// ---- 悬浮滚动条拖拽 ----
|
||
|
||
const scrollbarRef = ref<HTMLElement | null>(null);
|
||
|
||
const { isDragging, dragMoved, onPointerDown } = useFloatingDrag(position, scrollbarRef);
|
||
|
||
// ---- 滚动条手动关闭后，有新通知时自动弹出 ----
|
||
|
||
const scrollbarDismissed = ref(false);
|
||
|
||
function dismissScrollbar(): void {
|
||
scrollbarDismissed.value = true;
|
||
}
|
||
|
||
function onViewDetail(): void {
|
||
if (latestMessage.value) {
|
||
showDetail(latestMessage.value);
|
||
}
|
||
}
|
||
|
||
// 监听消息数量变化：有新通知时重新显示滚动条
|
||
watch(messageCount, (now, prev) => {
|
||
if (now > prev) {
|
||
scrollbarDismissed.value = false;
|
||
}
|
||
});
|
||
|
||
const showScrollbar = computed(() => hasMessages.value && !scrollbarDismissed.value);
|
||
|
||
// ---- 拖拽时跳过按钮点击 ----
|
||
|
||
const INTERACTIVE_SEL = "button, a, [role=button]";
|
||
|
||
function onScrollbarPointerDown(e: PointerEvent): void {
|
||
if (e.target instanceof HTMLElement && e.target.closest(INTERACTIVE_SEL)) return;
|
||
onPointerDown(e);
|
||
}
|
||
|
||
// ---- 初始位置 ----
|
||
|
||
const initialized = ref(false);
|
||
|
||
function initPosition(): void {
|
||
if (initialized.value) return;
|
||
initialized.value = true;
|
||
if (position.value.x === 0 && position.value.y === 0) {
|
||
position.value = {
|
||
x: (window.innerWidth - 640) / 2,
|
||
y: 56
|
||
};
|
||
}
|
||
}
|
||
|
||
// ---- 窗口大小变化时钳制位置 ----
|
||
|
||
function clampPosition(): void {
|
||
const w = 640;
|
||
const h = 43;
|
||
position.value = {
|
||
x: Math.max(0, Math.min(position.value.x, window.innerWidth - w)),
|
||
y: Math.max(52, Math.min(position.value.y, window.innerHeight - h - 20))
|
||
};
|
||
}
|
||
|
||
// ---- 窗口 resize 时保持居中 ----
|
||
|
||
function recenter(): void {
|
||
const w = 640;
|
||
position.value = {
|
||
x: (window.innerWidth - w) / 2,
|
||
y: position.value.y
|
||
};
|
||
}
|
||
|
||
onMounted(() => {
|
||
startPolling(30000);
|
||
initPosition();
|
||
window.addEventListener("resize", recenter);
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
stopPolling();
|
||
window.removeEventListener("resize", recenter);
|
||
});
|
||
|
||
// ---- 位置样式 ----
|
||
|
||
const positionStyle = computed(() => ({
|
||
left: position.value.x + "px",
|
||
top: position.value.y + "px"
|
||
}));
|
||
|
||
// ---- 统一时间线：警告 + 导入任务，按时间倒序 ----
|
||
|
||
type TimelineItem =
|
||
| { kind: "alert"; data: AlertMessage; ts: string }
|
||
| { kind: "import"; data: ImportTask; ts: number };
|
||
|
||
const timeline = computed<TimelineItem[]>(() => {
|
||
const items: TimelineItem[] = [];
|
||
|
||
for (const msg of messages.value) {
|
||
items.push({ kind: "alert", data: msg, ts: msg.publishTime });
|
||
}
|
||
|
||
for (const task of importStore.recentTasks) {
|
||
items.push({ kind: "import", data: task, ts: task.createdAt });
|
||
}
|
||
|
||
// 按时间倒序：alert 用 publishTime 字符串不好比，放前面；
|
||
// import 用 createdAt 数字好排序
|
||
items.sort((a, b) => {
|
||
const ta = a.kind === "import" ? (a.data as ImportTask).createdAt : 0;
|
||
const tb = b.kind === "import" ? (b.data as ImportTask).createdAt : 0;
|
||
// alert 没有精确时间戳，统一用 0 兜底；实际排序以 createdAt 为主
|
||
return tb - ta;
|
||
});
|
||
|
||
return items;
|
||
});
|
||
|
||
const hasTimeline = computed(() => timeline.value.length > 0);
|
||
|
||
// ---- 级别标签类型映射 ----
|
||
|
||
function tagType(level: string): "info" | "warning" | "danger" {
|
||
if (level === "danger") return "danger";
|
||
if (level === "warning") return "warning";
|
||
return "info";
|
||
}
|
||
|
||
// ---- 导入任务状态辅助 ----
|
||
|
||
function importStatusText(status: ImportTask["status"]): string {
|
||
const map: Record<string, string> = {
|
||
pending: "等待中",
|
||
uploading: "上传中",
|
||
processing: "处理中",
|
||
success: "已完成",
|
||
error: "失败"
|
||
};
|
||
return map[status] ?? status;
|
||
}
|
||
|
||
function importProgressPercent(task: ImportTask): number {
|
||
if (task.totalRows <= 0) return 0;
|
||
return Math.round((task.processedRows / task.totalRows) * 100);
|
||
}
|
||
|
||
function formatImportTime(ts: number): string {
|
||
const d = new Date(ts);
|
||
return d.toLocaleTimeString("zh-CN", { hour12: false });
|
||
}
|
||
|
||
// ---- 清空全部（仅清空警告，导入任务由各自逻辑管理） ----
|
||
|
||
function handleClearAll(): void {
|
||
clearAll();
|
||
importStore.clearCompleted();
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<!-- ===== 悬浮滚动条（仅展示最新警告） ===== -->
|
||
<div
|
||
v-show="showScrollbar"
|
||
ref="scrollbarRef"
|
||
class="alert-scrollbar"
|
||
:class="{ 'is-dragging': isDragging }"
|
||
:style="positionStyle"
|
||
@pointerdown="onScrollbarPointerDown"
|
||
>
|
||
<span class="alert-scrollbar__icon">
|
||
<el-icon :size="16"><WarningFilled /></el-icon>
|
||
</span>
|
||
<div class="alert-scrollbar__text-wrap">
|
||
<span
|
||
class="alert-scrollbar__text"
|
||
:class="{ 'is-scroll': latestMessage && latestMessage.content.length > 60 }"
|
||
>{{ latestMessage?.content ?? "" }}</span>
|
||
</div>
|
||
<span class="alert-scrollbar__badge">{{ messageCount }}</span>
|
||
<button class="alert-scrollbar__btn-detail" @click.stop="onViewDetail">查看详情</button>
|
||
<button class="alert-scrollbar__btn-close" @click.stop="dismissScrollbar">关闭</button>
|
||
</div>
|
||
|
||
<!-- ===== 通知中心抽屉 ===== -->
|
||
<el-drawer
|
||
v-model="drawerVisible"
|
||
direction="rtl"
|
||
size="420px"
|
||
:with-header="true"
|
||
>
|
||
<template #header>
|
||
<div class="drawer-header">
|
||
<span class="drawer-header__title">
|
||
<el-icon :size="18"><Bell /></el-icon>
|
||
通知中心
|
||
</span>
|
||
<el-button
|
||
v-if="hasTimeline"
|
||
text
|
||
type="danger"
|
||
size="small"
|
||
@click="handleClearAll"
|
||
>
|
||
清空全部
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
|
||
<!-- 统一时间线 -->
|
||
<div v-if="hasTimeline" class="drawer-list">
|
||
<template v-for="item in timeline" :key="item.kind === 'alert' ? item.data.id : item.data.id">
|
||
<!-- ===== 警告消息 ===== -->
|
||
<div
|
||
v-if="item.kind === 'alert'"
|
||
class="drawer-item drawer-item--clickable"
|
||
@click="showDetail(item.data)"
|
||
>
|
||
<div class="drawer-item__left">
|
||
<span class="drawer-item__dot" :class="'dot--' + item.data.level"></span>
|
||
<div class="drawer-item__body">
|
||
<p class="drawer-item__content">{{ item.data.content }}</p>
|
||
<span class="drawer-item__time">{{ item.data.publishTime }}</span>
|
||
</div>
|
||
</div>
|
||
<button
|
||
class="drawer-item__close"
|
||
title="移除"
|
||
@click.stop="removeAlert(item.data.id)"
|
||
>
|
||
<el-icon :size="12"><Close /></el-icon>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- ===== 导入任务 ===== -->
|
||
<div
|
||
v-else
|
||
class="drawer-item drawer-item--import"
|
||
>
|
||
<div class="drawer-item__left">
|
||
<!-- 状态图标 -->
|
||
<span class="drawer-item__import-icon" :class="'import--' + item.data.status">
|
||
<el-icon :size="16">
|
||
<CircleCheckFilled v-if="item.data.status === 'success'" />
|
||
<CircleCloseFilled v-else-if="item.data.status === 'error'" />
|
||
<Loading v-else />
|
||
</el-icon>
|
||
</span>
|
||
<div class="drawer-item__body">
|
||
<p class="drawer-item__content">
|
||
{{ item.data.fileName }}
|
||
<span class="import-status-tag" :class="'import-status--' + item.data.status">
|
||
{{ importStatusText(item.data.status) }}
|
||
</span>
|
||
</p>
|
||
<!-- 进度条（仅处理中显示） -->
|
||
<div
|
||
v-if="item.data.status === 'processing' && item.data.totalRows > 0"
|
||
class="import-progress"
|
||
>
|
||
<el-progress
|
||
:percentage="importProgressPercent(item.data)"
|
||
:stroke-width="4"
|
||
:show-text="true"
|
||
/>
|
||
</div>
|
||
<!-- 失败消息 -->
|
||
<p
|
||
v-if="item.data.status === 'error' && item.data.message"
|
||
class="import-error-msg"
|
||
>{{ item.data.message }}</p>
|
||
<span class="drawer-item__time">{{ formatImportTime(item.data.createdAt) }}</span>
|
||
</div>
|
||
</div>
|
||
<!-- 仅已完成/失败的任务可关闭 -->
|
||
<button
|
||
v-if="item.data.status === 'success' || item.data.status === 'error'"
|
||
class="drawer-item__close"
|
||
title="移除"
|
||
@click.stop="importStore.removeTask(item.data.id)"
|
||
>
|
||
<el-icon :size="12"><Close /></el-icon>
|
||
</button>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
|
||
<!-- 空状态 -->
|
||
<div v-else class="drawer-empty">
|
||
<el-icon :size="48" color="#c0c4cc"><Bell /></el-icon>
|
||
<p>暂无通知</p>
|
||
</div>
|
||
</el-drawer>
|
||
|
||
<!-- ===== 详情弹窗（仅警告消息） ===== -->
|
||
<el-dialog
|
||
v-model="detailVisible"
|
||
title="通知详情"
|
||
width="520px"
|
||
:close-on-click-modal="true"
|
||
destroy-on-close
|
||
>
|
||
<template v-if="detailTarget">
|
||
<div class="detail-level">
|
||
<el-tag :type="tagType(detailTarget.level)" size="small">
|
||
{{ detailTarget.level === "danger" ? "紧急" : detailTarget.level === "warning" ? "警告" : "提示" }}
|
||
</el-tag>
|
||
</div>
|
||
<div class="detail-time">
|
||
发布时间：{{ detailTarget.publishTime }}
|
||
</div>
|
||
<div class="detail-content">
|
||
{{ detailTarget.content }}
|
||
</div>
|
||
</template>
|
||
<template #footer>
|
||
<el-button @click="closeDetail">关闭</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* ================================================
|
||
悬浮滚动条
|
||
================================================ */
|
||
.alert-scrollbar {
|
||
position: fixed;
|
||
z-index: 1990;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
height: 43px;
|
||
width: 640px;
|
||
max-width: calc(100vw - 32px);
|
||
padding: 0 14px;
|
||
background: rgba(245, 108, 108, 0.85);
|
||
border-radius: 18px;
|
||
box-shadow: 0 2px 10px rgba(245, 108, 108, 0.35);
|
||
backdrop-filter: blur(4px);
|
||
-webkit-backdrop-filter: blur(4px);
|
||
cursor: pointer;
|
||
user-select: none;
|
||
touch-action: none;
|
||
transition: opacity 0.2s, box-shadow 0.2s;
|
||
}
|
||
|
||
.alert-scrollbar:hover {
|
||
box-shadow: 0 4px 16px rgba(245, 108, 108, 0.5);
|
||
}
|
||
|
||
.alert-scrollbar.is-dragging {
|
||
opacity: 0.7;
|
||
transition: none !important;
|
||
cursor: grabbing;
|
||
}
|
||
|
||
.alert-scrollbar__icon {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
color: #fff;
|
||
}
|
||
|
||
.alert-scrollbar__text-wrap {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
min-width: 0;
|
||
}
|
||
|
||
.alert-scrollbar__text {
|
||
display: inline-block;
|
||
white-space: nowrap;
|
||
font-size: 12px;
|
||
color: #fff;
|
||
line-height: 43px;
|
||
}
|
||
|
||
.alert-scrollbar__text.is-scroll {
|
||
animation: scrollbar-marquee 12s linear infinite;
|
||
}
|
||
|
||
@keyframes scrollbar-marquee {
|
||
0% { transform: translateX(0); }
|
||
80% { transform: translateX(calc(-100% + 530px)); }
|
||
100% { transform: translateX(calc(-100% + 530px)); }
|
||
}
|
||
|
||
.alert-scrollbar__badge {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-width: 20px;
|
||
height: 20px;
|
||
padding: 0 5px;
|
||
border-radius: 10px;
|
||
background: rgba(255, 255, 255, 0.3);
|
||
color: #fff;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
line-height: 1;
|
||
}
|
||
|
||
.alert-scrollbar__btn-detail,
|
||
.alert-scrollbar__btn-close {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 26px;
|
||
padding: 0 10px;
|
||
border: none;
|
||
border-radius: 13px;
|
||
font-size: 12px;
|
||
cursor: pointer;
|
||
transition: background 0.15s;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.alert-scrollbar__btn-detail {
|
||
background: rgba(255, 255, 255, 0.25);
|
||
color: #fff;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.alert-scrollbar__btn-detail:hover {
|
||
background: rgba(255, 255, 255, 0.4);
|
||
}
|
||
|
||
.alert-scrollbar__btn-close {
|
||
background: rgba(0, 0, 0, 0.15);
|
||
color: rgba(255, 255, 255, 0.85);
|
||
}
|
||
|
||
.alert-scrollbar__btn-close:hover {
|
||
background: rgba(0, 0, 0, 0.3);
|
||
color: #fff;
|
||
}
|
||
|
||
/* ================================================
|
||
通知中心抽屉
|
||
================================================ */
|
||
.drawer-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
}
|
||
|
||
.drawer-header__title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.drawer-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
/* 基础条目 */
|
||
.drawer-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
gap: 8px;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid #ebeef5;
|
||
transition: background 0.15s;
|
||
}
|
||
|
||
.drawer-item--clickable {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.drawer-item--clickable:hover {
|
||
background: #f5f7fa;
|
||
margin: 0 -20px;
|
||
padding-left: 20px;
|
||
padding-right: 20px;
|
||
}
|
||
|
||
.drawer-item__left {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 10px;
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* 警告色点 */
|
||
.drawer-item__dot {
|
||
flex-shrink: 0;
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.dot--danger { background: #f56c6c; }
|
||
.dot--warning { background: #e6a23c; }
|
||
.dot--info { background: #409eff; }
|
||
|
||
/* 导入状态图标 */
|
||
.drawer-item__import-icon {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.import--success { color: #67c23a; }
|
||
.import--error { color: #f56c6c; }
|
||
.import--uploading,
|
||
.import--processing,
|
||
.import--pending { color: #409eff; }
|
||
|
||
.drawer-item__body {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.drawer-item__content {
|
||
margin: 0;
|
||
font-size: 13px;
|
||
color: #303133;
|
||
line-height: 1.5;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 导入状态标签 */
|
||
.import-status-tag {
|
||
display: inline-block;
|
||
margin-left: 6px;
|
||
font-size: 11px;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.import-status--uploading,
|
||
.import-status--processing,
|
||
.import-status--pending { color: #409eff; }
|
||
.import-status--success { color: #67c23a; }
|
||
.import-status--error { color: #f56c6c; }
|
||
|
||
/* 导入进度条 */
|
||
.import-progress {
|
||
margin-top: 6px;
|
||
}
|
||
|
||
/* 导入失败消息 */
|
||
.import-error-msg {
|
||
margin: 4px 0 0;
|
||
font-size: 12px;
|
||
color: #f56c6c;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.drawer-item__time {
|
||
display: block;
|
||
margin-top: 4px;
|
||
font-size: 11px;
|
||
color: #909399;
|
||
}
|
||
|
||
.drawer-item__close {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 22px;
|
||
height: 22px;
|
||
padding: 0;
|
||
margin-top: 2px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
background: transparent;
|
||
color: #c0c4cc;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
}
|
||
|
||
.drawer-item__close:hover {
|
||
background: #f56c6c;
|
||
color: #fff;
|
||
}
|
||
|
||
.drawer-empty {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 60px 0;
|
||
color: #c0c4cc;
|
||
font-size: 14px;
|
||
gap: 12px;
|
||
}
|
||
|
||
/* ================================================
|
||
详情弹窗
|
||
================================================ */
|
||
.detail-level {
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.detail-time {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.detail-content {
|
||
font-size: 14px;
|
||
color: #303133;
|
||
line-height: 1.7;
|
||
white-space: pre-wrap;
|
||
word-break: break-all;
|
||
}
|
||
</style>
|