rename notify

src/pages/notify/NotifyDetail.vue

@@ -1,78 +1,176 @@
 <template>
-	<div v-can="corePermissionCodes.notify.read" class="notify-detail">
-		<article v-if="detail" class="article">
-			<header class="header">
-				<h1 v-text="getSubject(detail)" />
-				<div class="sender">
-					发送用户：<span v-text="getSenderName(detail)" />
-				</div>
-				<pass-time-label class="time" :timestamp="detail.sendAt" underline />
-			</header>
-			<section class="body">
-				<notify-view
-					:detail="detail"
-					empty-text="暂无通知内容"
-					:resolve-attachment-url="resolveAttachmentUrl"
-				/>
-			</section>
-		</article>
+	<div v-can="corePermissionCodes.notify.read" class="notify-management-detail">
 		<t-empty
-			v-else
+			v-if="!detail"
 			:description="isLoading ? '正在加载通知' : '通知不存在'"
 		/>
+		<template v-else>
+			<article class="article">
+				<header class="header">
+					<h1 v-text="getSubject(detail)" />
+					<div class="time" v-text="getSendTime(detail.detailList?.[0])" />
+				</header>
+				<section class="body">
+					<notify-view
+						v-if="mainDetail"
+						:detail="mainDetail"
+						empty-text="暂无通知内容"
+						:resolve-attachment-url="resolveAttachmentUrl"
+					/>
+					<div v-else class="empty-content">暂无通知内容</div>
+				</section>
+			</article>
+			<t-cell-group title="通知状态" theme="card">
+				<t-cell title="接收用户" :note="`${detail.detailList?.length || 0} 人`" />
+				<t-cell title="已读用户" :note="`${readCount} 人`" />
+				<t-cell title="当前状态">
+					<template #note>
+						<t-tag size="small" :theme="getSummaryTheme" :content="getSummaryStatus" />
+					</template>
+				</t-cell>
+			</t-cell-group>
+			<div v-if="canCancelNotify && canCancel" class="actions">
+				<t-button theme="primary" variant="outline" block :loading="isCanceling" @click="confirmCancel">
+					取消发送
+				</t-button>
+			</div>
+			<div v-if="canDeleteNotify" class="actions">
+				<t-button theme="danger" variant="outline" block :loading="isDeleting" @click="confirmDelete">
+					删除通知
+				</t-button>
+			</div>
+			<t-segmented
+				v-model="recipientFilter"
+				class="filter"
+				block
+				:options="recipientFilterOptions"
+			/>
+			<t-cell-group v-if="filteredDetailList.length" title="发送用户" theme="card" class="recipients">
+				<t-cell v-for="item in filteredDetailList" :key="item.id">
+					<template #title>
+						<div class="recipient-title">
+							<span v-text="getRecipientName(item)" />
+							<t-tag size="small" :theme="getReadTheme(item)" :content="getReadText(item)" />
+						</div>
+					</template>
+					<template #description>
+						<div class="recipient-description">
+							<span v-text="getRecipientContact(item)" />
+							<span v-if="item.resultDesc" v-text="item.resultDesc" />
+						</div>
+					</template>
+					<template #note>
+						<span v-text="getReadTime(item)" />
+					</template>
+				</t-cell>
+			</t-cell-group>
+			<t-empty v-else description="暂无匹配的接收用户" />
+		</template>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { NotifyView } from "timi-tdesign-mobile";
-import { PassTimeLabel } from "timi-web";
-import { NotifyAPI, type NotifyDetail } from "timi-web-api";
+import { Time } from "timi-web";
+import { NotifyAPI, type Notify, type NotifyDetail, useUserStore } from "timi-web-api";
 import { DialogPlugin } from "tdesign-mobile-vue";
-import { useNavBarStore } from "@/store/navBarStore";
+import { Message } from "@/utils/message";
 import { getErrorMessage } from "@/utils/error";
 import { getAttachmentReadURL } from "@/utils/attachment";
+import { useNavBarStore } from "@/store/navBarStore";
 import { corePermissionCodes } from "@/utils/permission";
-import { Message } from "@/utils/message.ts";
 
-const route = useRoute();
-const router = useRouter();
-const navBarStore = useNavBarStore();
+type RecipientFilter = "all" | "unread" | "read";
+type NotifyTagTheme = "default" | "success" | "warning" | "primary" | "danger";
 
 defineOptions({
 	name: "NotifyDetail"
 });
 
+const route = useRoute();
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const canDeleteNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.delete));
+const canCancelNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.cancel));
+
 // ---------- 通知数据 ----------
 
-const detail = ref<NotifyDetail>();
+const detail = ref<Notify>();
 const isLoading = ref(false);
+const isCanceling = ref(false);
 const isDeleting = ref(false);
+const recipientFilter = ref<RecipientFilter>("all");
 let loadToken = 0;
 
+const recipientFilterOptions = [
+	{ value: "all" as RecipientFilter, label: "全部" },
+	{ value: "unread" as RecipientFilter, label: "未读" },
+	{ value: "read" as RecipientFilter, label: "已读" }
+];
+const mainDetail = computed(() => detail.value?.detailList?.[0]);
+const readCount = computed(() => detail.value?.detailList?.filter(item => Boolean(item.readAt)).length || 0);
+const filteredDetailList = computed(() => {
+	const detailList = detail.value?.detailList || [];
+	if (recipientFilter.value === "unread") {
+		return detailList.filter(item => !item.readAt);
+	}
+	if (recipientFilter.value === "read") {
+		return detailList.filter(item => Boolean(item.readAt));
+	}
+	return detailList;
+});
+const canCancel = computed(() => detail.value?.detailList?.some(item => isCancelable(item)) || false);
+const getSummaryStatus = computed(() => {
+	const detailList = detail.value?.detailList || [];
+	if (canCancel.value) {
+		return "待发送";
+	}
+	if (detailList.length && detailList.every(item => item.status === "CANCEL")) {
+		return "已取消";
+	}
+	if (detailList.some(item => item.status === "FAIL" || item.status === "TIMEOUT")) {
+		return "部分失败";
+	}
+	return "已发送";
+});
+const getSummaryTheme = computed<NotifyTagTheme>(() => {
+	if (getSummaryStatus.value === "待发送") {
+		return "warning";
+	}
+	if (getSummaryStatus.value === "已取消") {
+		return "default";
+	}
+	if (getSummaryStatus.value === "部分失败") {
+		return "danger";
+	}
+	return "success";
+});
+
+function resolveAttachmentUrl(attachmentId: string): string {
+	return getAttachmentReadURL(attachmentId);
+}
+
 async function loadDetail(): Promise<void> {
 	const requestToken = loadToken + 1;
 	loadToken = requestToken;
+	detail.value = undefined;
 	navBarStore.clearRight();
-	const detailId = String(route.params.id || "");
-	if (!detailId) {
-		detail.value = undefined;
+	const notifyId = String(route.params.id || "");
+	if (!notifyId) {
 		return;
 	}
 
-	detail.value = undefined;
 	isLoading.value = true;
 	try {
-		const result = await NotifyAPI.internalDetail(detailId);
+		const result = await NotifyAPI.managementDetail(notifyId);
 		if (requestToken !== loadToken) {
 			return;
 		}
-
 		detail.value = result;
-		setDeleteAction();
-		await markRead(result, requestToken);
+		setRightAction();
 	} catch (error) {
-		console.warn("通知详情加载失败", error);
-		Message.error("通知详情加载失败");
+		Message.error(getErrorMessage(error, "通知详情加载失败"));
 	} finally {
 		if (requestToken === loadToken) {
 			isLoading.value = false;
@@ -80,81 +178,127 @@ async function loadDetail(): Promise<void> {
 	}
 }
 
-function setDeleteAction(): void {
-	if (detail.value?.id) {
+function setRightAction(): void {
+	if (detail.value?.id && canDeleteNotify.value) {
 		navBarStore.setRightText("删除", "var(--td-error-color)", confirmDelete);
 	}
 }
 
-async function confirmDelete(): Promise<void> {
-	const detailId = detail.value?.id;
-	if (!detailId || isDeleting.value) {
+// ---------- 通知操作 ----------
+
+function isCancelable(item: NotifyDetail): boolean {
+	return item.status === "WAITING" && Boolean(item.sendAt && Time.now() < item.sendAt);
+}
+
+async function confirmCancel(): Promise<void> {
+	const notifyId = detail.value?.id;
+	if (!notifyId || !canCancelNotify.value || !canCancel.value || isCanceling.value) {
 		return;
 	}
+	const dialog = DialogPlugin.confirm({
+		title: "取消定时通知",
+		content: "确定取消这条尚未发送的通知吗？",
+		cancelBtn: "返回",
+		confirmBtn: "取消发送",
+		onCancel() {
+			dialog.destroy();
+		},
+		async onConfirm() {
+			dialog.destroy();
+			isCanceling.value = true;
+			try {
+				await NotifyAPI.managementCancel(notifyId);
+				await loadDetail();
+				Message.success("通知已取消");
+			} catch (error) {
+				Message.error(getErrorMessage(error, "通知取消失败"));
+			} finally {
+				isCanceling.value = false;
+			}
+		}
+	});
+}
 
+async function confirmDelete(): Promise<void> {
+	const notifyId = detail.value?.id;
+	if (!notifyId || !canDeleteNotify.value || isDeleting.value) {
+		return;
+	}
 	const dialog = DialogPlugin.confirm({
 		title: "删除通知",
-		content: "确定删除这条通知吗？删除后将不再显示。",
-		cancelBtn: "取消",
+		content: "确定删除这条通知吗？删除后收件人也将无法查看。",
+		cancelBtn: "返回",
 		confirmBtn: "删除",
 		onCancel() {
 			dialog.destroy();
 		},
 		async onConfirm() {
 			dialog.destroy();
-			await deleteDetail(detailId);
+			isDeleting.value = true;
+			navBarStore.clearRight();
+			try {
+				await NotifyAPI.managementDelete(notifyId);
+				Message.success("通知已删除");
+				await router.replace({ name: "NotifyList" });
+			} catch (error) {
+				Message.error(getErrorMessage(error, "通知删除失败"));
+				setRightAction();
+			} finally {
+				isDeleting.value = false;
+			}
 		}
 	});
 }
 
-async function deleteDetail(detailId: string): Promise<void> {
-	if (isDeleting.value) {
-		return;
-	}
-
-	isDeleting.value = true;
-	navBarStore.clearRight();
-	try {
-		await NotifyAPI.deleteInternal(detailId);
-		Message.success("通知已删除");
-		await router.replace({ name: "NotifyList" });
-	} catch (error) {
-		Message.error(getErrorMessage(error, "通知删除失败"));
-		setDeleteAction();
-	} finally {
-		isDeleting.value = false;
-	}
-}
-
-async function markRead(item: NotifyDetail, requestToken: number): Promise<void> {
-	if (!item.id || item.readAt) {
-		return;
-	}
-	try {
-		await NotifyAPI.markInternalRead(item.id);
-		if (requestToken === loadToken && detail.value) {
-			detail.value = {
-				...detail.value,
-				readAt: Date.now()
-			};
-		}
-	} catch (error) {
-		console.warn("通知标记已读失败", error);
-	}
-}
-
 // ---------- 展示 ----------
 
-function getSubject(item: NotifyDetail): string {
-	return item.subject?.trim() || "站内通知";
+function getSubject(item: Notify): string {
+	return item.detailList?.[0]?.subject?.trim() || "站内通知";
 }
 
-function getSenderName(item: NotifyDetail): string {
-	return item.fromUser?.nick?.trim() || item.fromUser?.name?.trim() || "系统通知";
+function getSendTime(item?: NotifyDetail): string {
+	if (!item?.sendAt) {
+		return "-";
+	}
+	if (isCancelable(item)) {
+		return `定时 ${Time.toDateTime(item.sendAt)}`;
+	}
+	return Time.toDateTime(item.sendAt);
 }
 
-function resolveAttachmentUrl(attachmentId: string): string {
-	return getAttachmentReadURL(attachmentId);
+function getRecipientName(item: NotifyDetail): string {
+	return item.toUser?.nick?.trim() || item.toUser?.name?.trim() || item.sendTo || "未知用户";
+}
+
+function getRecipientContact(item: NotifyDetail): string {
+	return item.toUser?.phoneNo || item.sendTo || "-";
+}
+
+function getReadText(item: NotifyDetail): string {
+	if (isCancelable(item)) {
+		return "待发送";
+	}
+	if (item.status === "CANCEL") {
+		return "已取消";
+	}
+	if (item.status === "FAIL" || item.status === "TIMEOUT") {
+		return item.status === "TIMEOUT" ? "已超时" : "发送失败";
+	}
+	return item.readAt ? "已读" : "未读";
+}
+
+function getReadTheme(item: NotifyDetail): NotifyTagTheme {
+	if (isCancelable(item)) {
+		return "warning";
+	}
+	if (item.status === "CANCEL" || item.status === "FAIL" || item.status === "TIMEOUT") {
+		return "danger";
+	}
+	return item.readAt ? "primary" : "default";
+}
+
+function getReadTime(item: NotifyDetail): string {
+	return item.readAt ? `已读 ${Time.toDateTime(item.readAt)}` : "未读";
 }
 
 // ---------- 生命周期 ----------
@@ -163,35 +307,30 @@ watch(() => route.params.id, async () => {
 	await loadDetail();
 }, { immediate: true });
 
-onMounted(() => {
-	navBarStore.clearRight();
-});
-
-onUnmounted(() => {
-	navBarStore.clearRight();
-});
+onMounted(() => navBarStore.clearRight());
+onUnmounted(() => navBarStore.clearRight());
 </script>
 
 <style scoped lang="less">
-.notify-detail {
+.notify-management-detail {
 	gap: 1rem;
 	min-height: 100%;
-	padding: calc(var(--app-nav-height) + 1rem) 0 1rem 0;
+	padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
 	display: flex;
 	flex-direction: column;
 
 	.article {
 		padding: 1.25rem 1rem;
 		margin: 0 1rem;
-		background: rgba(255, 255, 255, .92);
+		background: var(--td-bg-color-container);
 		box-shadow: var(--td-shadow-1);
 		border-radius: 1.4rem;
 	}
 
 	.header {
 		text-align: center;
-		border-bottom: 1px solid rgba(148, 163, 184, .2);
 		padding-bottom: 1rem;
+		border-bottom: 1px solid rgba(148, 163, 184, .2);
 
 		h1 {
 			margin: 0;
@@ -204,12 +343,6 @@ onUnmounted(() => {
 			margin-top: .5rem;
 			font-size: .8125rem;
 		}
-
-		.sender {
-			color: #64748b;
-			margin-top: .5rem;
-			font-size: .8125rem;
-		}
 	}
 
 	.body {
@@ -217,32 +350,72 @@ onUnmounted(() => {
 		padding-top: 1rem;
 		font-size: .9375rem;
 		line-height: 1.8;
-		white-space: pre-wrap;
 		word-break: break-word;
+
+		.empty-content {
+			color: #64748b;
+			text-align: center;
+		}
+	}
+
+	.actions {
+		padding: 0 1rem;
+	}
+
+	.filter {
+		width: calc(100% - 2rem);
+		margin: 0 1rem;
+	}
+
+	.recipients {
+		:deep(.t-cell__title) {
+			flex: 1 1 0;
+			min-width: 0;
+		}
+
+		:deep(.t-cell__description) {
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+
+		.recipient-title,
+		.recipient-description {
+			display: flex;
+			align-items: center;
+		}
+
+		.recipient-title {
+			gap: .5rem;
+
+			> span:first-child {
+				min-width: 0;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+		}
+
+		.recipient-description {
+			gap: .75rem;
+		}
 	}
 }
 
 :global(html.theme-dark) {
-	.notify-detail {
-		.article {
-			background: rgba(15, 23, 42, .88);
-			box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
-		}
-
+	.notify-management-detail {
 		.header {
-			border-bottom-color: rgba(148, 163, 184, .16);
-
 			.time {
 				color: #94a3b8;
 			}
-
-			.sender {
-				color: #94a3b8;
-			}
 		}
 
 		.body {
 			color: #cbd5e1;
+
+			.empty-content {
+				color: #94a3b8;
+			}
 		}
 	}
 }