rename notify

src/pages/notify/NotifyCreate.vue

@@ -75,7 +75,7 @@ import { useNavBarStore } from "@/store/navBarStore";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
 
 defineOptions({
-	name: "NotifyManagementCreate"
+	name: "NotifyCreate"
 });
 
 const router = useRouter();
@@ -245,12 +245,12 @@ async function saveNotification(): Promise<void> {
 		Message.success(sendAt ? "定时通知已创建" : "通知已发送");
 		if (result.id) {
 			await router.replace({
-				name: "NotifyManagementDetail",
+				name: "NotifyDetail",
 				params: { id: result.id }
 			});
 			return;
 		}
-		await router.replace({ name: "NotifyManagement" });
+		await router.replace({ name: "NotifyList" });
 	} catch (error) {
 		Message.error(getErrorMessage(error, "通知保存失败"));
 	} finally {

src/pages/notify/NotifyDetail.vue

@@ -1,78 +1,176 @@
 <template>
-	<div v-can="corePermissionCodes.notify.read" class="notify-detail">
+	<div v-can="corePermissionCodes.notify.read" class="notify-management-detail">
-		<article v-if="detail" class="article">
+		<t-empty
+			v-if="!detail"
+			:description="isLoading ? '正在加载通知' : '通知不存在'"
+		/>
+		<template v-else>
+			<article class="article">
 				<header class="header">
 					<h1 v-text="getSubject(detail)" />
-				<div class="sender">
+					<div class="time" v-text="getSendTime(detail.detailList?.[0])" />
-					发送用户：<span v-text="getSenderName(detail)" />
-				</div>
-				<pass-time-label class="time" :timestamp="detail.sendAt" underline />
 				</header>
 				<section class="body">
 					<notify-view
-					:detail="detail"
+						v-if="mainDetail"
+						:detail="mainDetail"
 						empty-text="暂无通知内容"
 						:resolve-attachment-url="resolveAttachmentUrl"
 					/>
+					<div v-else class="empty-content">暂无通知内容</div>
 				</section>
 			</article>
-		<t-empty
+			<t-cell-group title="通知状态" theme="card">
-			v-else
+				<t-cell title="接收用户" :note="`${detail.detailList?.length || 0} 人`" />
-			:description="isLoading ? '正在加载通知' : '通知不存在'"
+				<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 { Time } from "timi-web";
-import { NotifyAPI, type NotifyDetail } from "timi-web-api";
+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();
+type RecipientFilter = "all" | "unread" | "read";
-const router = useRouter();
+type NotifyTagTheme = "default" | "success" | "warning" | "primary" | "danger";
-const navBarStore = useNavBarStore();
 
 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;
-	navBarStore.clearRight();
-	const detailId = String(route.params.id || "");
-	if (!detailId) {
 	detail.value = undefined;
+	navBarStore.clearRight();
+	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();
+		setRightAction();
-		await markRead(result, requestToken);
 	} catch (error) {
-		console.warn("通知详情加载失败", error);
+		Message.error(getErrorMessage(error, "通知详情加载失败"));
-		Message.error("通知详情加载失败");
 	} finally {
 		if (requestToken === loadToken) {
 			isLoading.value = false;
@@ -80,81 +178,127 @@ async function loadDetail(): Promise<void> {
 	}
 }
 
-function setDeleteAction(): void {
+function setRightAction(): void {
-	if (detail.value?.id) {
+	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: "确定删除这条通知吗？删除后将不再显示。",
+		content: "确定删除这条通知吗？删除后收件人也将无法查看。",
-		cancelBtn: "取消",
+		cancelBtn: "返回",
 		confirmBtn: "删除",
 		onCancel() {
 			dialog.destroy();
 		},
 		async onConfirm() {
 			dialog.destroy();
-			await deleteDetail(detailId);
-		}
-	});
-}
-
-async function deleteDetail(detailId: string): Promise<void> {
-	if (isDeleting.value) {
-		return;
-	}
-
 			isDeleting.value = true;
 			navBarStore.clearRight();
 			try {
-		await NotifyAPI.deleteInternal(detailId);
+				await NotifyAPI.managementDelete(notifyId);
 				Message.success("通知已删除");
 				await router.replace({ name: "NotifyList" });
 			} catch (error) {
 				Message.error(getErrorMessage(error, "通知删除失败"));
-		setDeleteAction();
+				setRightAction();
 			} 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 {
+function getSubject(item: Notify): string {
-	return item.subject?.trim() || "站内通知";
+	return item.detailList?.[0]?.subject?.trim() || "站内通知";
 }
 
-function getSenderName(item: NotifyDetail): string {
+function getSendTime(item?: NotifyDetail): string {
-	return item.fromUser?.nick?.trim() || item.fromUser?.name?.trim() || "系统通知";
+	if (!item?.sendAt) {
+		return "-";
+	}
+	if (isCancelable(item)) {
+		return `定时 ${Time.toDateTime(item.sendAt)}`;
+	}
+	return Time.toDateTime(item.sendAt);
 }
 
-function resolveAttachmentUrl(attachmentId: string): string {
+function getRecipientName(item: NotifyDetail): string {
-	return getAttachmentReadURL(attachmentId);
+	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(() => {
+onMounted(() => navBarStore.clearRight());
-	navBarStore.clearRight();
+onUnmounted(() => 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 {
+	.notify-management-detail {
-		.article {
-			background: rgba(15, 23, 42, .88);
-			box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
-		}
-
 		.header {
-			border-bottom-color: rgba(148, 163, 184, .16);
-
 			.time {
 				color: #94a3b8;
 			}
-
-			.sender {
-				color: #94a3b8;
-			}
 		}
 
 		.body {
 			color: #cbd5e1;
+
+			.empty-content {
+				color: #94a3b8;
+			}
 		}
 	}
 }

src/pages/notify/NotifyList.vue

@@ -1,12 +1,5 @@
 <template>
-	<div v-can="corePermissionCodes.notify.read" class="notify-list">
+	<div v-can="corePermissionCodes.notify.read" class="notify-management">
-		<t-segmented
-			v-model="filterMode"
-			class="filter"
-			block
-			:options="filterOptions"
-			@change="switchFilter"
-		/>
 		<t-pull-down-refresh
 			v-model="isRefreshing"
 			:refresh-timeout="30000"
@@ -20,45 +13,42 @@
 					class="item"
 				>
 					<t-cell
-						:description="getPreview(item)"
+						:description="getSendTime(item)"
-						:note="getTime(item)"
 						arrow
 						hover
 						@click="toDetail(item)"
 					>
 						<template #leftIcon>
-							<div class="icon" :class="{ unread: isUnread(item) }">
+							<div class="icon" :class="{ scheduled: isScheduled(item) }">
-								<t-icon name="notification" size="1.25rem" />
+								<t-icon :name="isScheduled(item) ? 'time' : 'notification'" size="1.25rem" />
 							</div>
 						</template>
 						<template #title>
 							<div class="title">
 								<span v-text="getSubject(item)" />
-								<t-tag
-									v-if="isUnread(item)"
-									class="unread-label"
-									theme="danger"
-									size="small"
-								>未读</t-tag>
 							</div>
 						</template>
+						<template #note>
+							<t-tag size="small" :theme="getStatusTheme(item)" :content="getStatusText(item)" />
+						</template>
 					</t-cell>
 					<template #right>
 						<t-button
+							v-if="canCancel(item)"
+							class="cancel"
+							theme="primary"
+							@click.stop="confirmCancel(item)"
+						>取消</t-button>
+						<t-button
+							v-if="canDeleteNotify"
 							class="delete"
 							theme="danger"
-							:loading="deletingId === item.id"
 							@click.stop="confirmDelete(item)"
-						>
+						>删除</t-button>
-							删除
-						</t-button>
 					</template>
 				</t-swipe-cell>
 			</t-cell-group>
-			<t-empty
+			<t-empty v-else-if="!isLoading" description="暂无已发送通知" />
-				v-else-if="!isLoading"
-				description="暂无站内通知"
-			/>
 			<div class="load-state" v-text="loadStateText" />
 		</t-pull-down-refresh>
 	</div>
@@ -66,14 +56,14 @@
 
 <script setup lang="ts">
 import { Time } from "timi-web";
-import { NotifyAPI, type NotifyDetail, type Page, type PageResult, useUserStore } from "timi-web-api";
+import { NotifyAPI, type Notify, type NotifyManagementItem, type Page, type PageResult, useUserStore } from "timi-web-api";
 import { DialogPlugin } from "tdesign-mobile-vue";
 import { Message } from "@/utils/message";
-import { useNavBarStore } from "@/store/navBarStore";
 import { getErrorMessage } from "@/utils/error";
+import { useNavBarStore } from "@/store/navBarStore";
 import { corePermissionCodes } from "@/utils/permission";
 
-type NotifyFilter = "all" | "unread";
+type NotifyTagTheme = "default" | "success" | "warning" | "primary" | "danger";
 
 defineOptions({
 	name: "NotifyList"
@@ -84,33 +74,24 @@ const router = useRouter();
 const navBarStore = useNavBarStore();
 const userStore = useUserStore();
 const canReadNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.read));
-
+const canCreateNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.create));
-// ---------- 筛选 ----------
+const canDeleteNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.delete));
-
+const canCancelNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.cancel));
-const filterMode = ref<NotifyFilter>("all");
-const unreadCount = ref(0);
-const unreadTabLabel = computed(() => 0 < unreadCount.value ? `未读 ${unreadCount.value}` : "未读");
-const filterOptions = computed(() => [
-	{ value: "all" as NotifyFilter, label: "全部" },
-	{ value: "unread" as NotifyFilter, label: unreadTabLabel.value }
-]);
 
 // ---------- 列表分页 ----------
 
 const isRefreshing = ref(false);
 const isLoading = ref(false);
 const isNoMore = ref(false);
-const page = reactive<Page<NotifyDetail>>({
+const page = reactive<Page<Notify>>({
 	index: 0,
-	size: pageSize
+	size: pageSize,
+	orderMap: { createdAt: "DESC" }
 });
-const pageResult = reactive<PageResult<NotifyDetail>>({
+const pageResult = reactive<PageResult<NotifyManagementItem>>({
 	total: 0,
 	list: []
 });
-let loadToken = 0;
-let loadingPromise: Promise<void> | undefined;
-let isPageActive = true;
 
 const loadStateText = computed(() => {
 	if (isLoading.value) {
@@ -122,185 +103,93 @@ const loadStateText = computed(() => {
 	return "上拉加载更多";
 });
 
-async function fetchPage(requestToken: number): Promise<void> {
+// ---------- 展示 ----------
-	isLoading.value = true;
+
-	const result = await NotifyAPI.listInternal(page, filterMode.value === "unread");
+function getSubject(item: NotifyManagementItem): string {
-	if (requestToken !== loadToken) {
+	return item.subject?.trim() || "站内通知";
-		return;
-	}
-	pageResult.total = result.total || 0;
-	pageResult.list = pageResult.list.concat(result.list || []);
-	page.index += 1;
-	isNoMore.value = pageResult.list.length >= pageResult.total || (result.list || []).length < page.size;
 }
 
-async function loadMore(): Promise<void> {
+function isScheduled(item: NotifyManagementItem): boolean {
-	if (loadingPromise) {
+	return Boolean(item.sendAt && item.waitingCount && Time.now() < item.sendAt);
-		await loadingPromise;
+}
-		return;
+
+function getStatusText(item: NotifyManagementItem): string {
+	if (isScheduled(item)) {
+		return "待发送";
 	}
-	if (isNoMore.value) {
+	const total = item.recipientCount || 0;
+	if (0 < total && item.cancelCount === total) {
+		return "已取消";
+	}
+	if (item.failCount || item.timeoutCount) {
+		return "部分失败";
+	}
+	return "已发送";
+}
+
+function getStatusTheme(item: NotifyManagementItem): NotifyTagTheme {
+	if (isScheduled(item)) {
+		return "warning";
+	}
+	if (getStatusText(item) === "已取消") {
+		return "default";
+	}
+	if (getStatusText(item) === "部分失败") {
+		return "danger";
+	}
+	return "success";
+}
+
+function getSendTime(item: NotifyManagementItem): string {
+	if (isScheduled(item)) {
+		return `定时 ${Time.toDateTime(item.sendAt)}`;
+	}
+	return Time.toPassedDateTime(item.sendAt || item.createdAt) || "-";
+}
+
+function canCancel(item: NotifyManagementItem): boolean {
+	return canCancelNotify.value && isScheduled(item);
+}
+
+// ---------- 列表操作 ----------
+
+async function loadMore(): Promise<void> {
+	if (isLoading.value || isNoMore.value || !canReadNotify.value) {
 		return;
 	}
 
-	const requestToken = loadToken;
+	isLoading.value = true;
-	const request = (async () => {
 	try {
-			await fetchPage(requestToken);
+		const result = await NotifyAPI.listManagement(page);
+		pageResult.total = result.total || 0;
+		pageResult.list.push(...(result.list || []));
+		page.index += 1;
+		isNoMore.value = pageResult.list.length >= pageResult.total || (result.list || []).length < page.size;
+	} catch (error) {
+		Message.error(getErrorMessage(error, "通知列表加载失败"));
 	} finally {
-			if (requestToken === loadToken) {
 		isLoading.value = false;
 	}
-		}
-	})();
-	loadingPromise = request;
-	try {
-		await request;
-	} finally {
-		if (loadingPromise === request) {
-			loadingPromise = undefined;
-		}
-	}
 }
 
 async function reloadList(): Promise<void> {
-	const requestToken = loadToken + 1;
-	loadToken = requestToken;
 	page.index = 0;
 	pageResult.total = 0;
 	pageResult.list = [];
 	isNoMore.value = false;
-	if (loadingPromise) {
-		await loadingPromise;
-	}
-	if (requestToken === loadToken) {
 	await loadMore();
-	}
 }
 
 async function refresh(): Promise<void> {
 	isRefreshing.value = true;
 	try {
 		await reloadList();
-		await loadUnreadCount();
 	} finally {
 		isRefreshing.value = false;
 	}
 }
 
-// ---------- 操作 ----------
+async function toDetail(item: NotifyManagementItem): Promise<void> {
-
-const isMarkingAllRead = ref(false);
-const deletingId = ref("");
-
-async function loadUnreadCount(): Promise<void> {
-	try {
-		unreadCount.value = Math.max(0, await NotifyAPI.countUnreadInternal());
-	} catch (error) {
-		unreadCount.value = 0;
-		console.warn("未读通知数量加载失败", error);
-	} finally {
-		updateNavBarAction();
-	}
-}
-
-async function switchFilter(context: { value: string | number }): Promise<void> {
-	const nextFilter = String(context.value) as NotifyFilter;
-	if (nextFilter !== "all" && nextFilter !== "unread") {
-		return;
-	}
-	filterMode.value = nextFilter;
-	await reloadList();
-}
-
-async function markAllRead(): Promise<void> {
-	if (isMarkingAllRead.value || unreadCount.value === 0) {
-		return;
-	}
-	isMarkingAllRead.value = true;
-	try {
-		await NotifyAPI.markAllInternalRead();
-		unreadCount.value = 0;
-		await reloadList();
-		Message.success("已全部标记为已读");
-	} catch (error) {
-		console.warn("全部通知标记已读失败", error);
-		Message.error("全部标记已读失败");
-	} finally {
-		isMarkingAllRead.value = false;
-		updateNavBarAction();
-	}
-}
-
-async function confirmDelete(item: NotifyDetail): Promise<void> {
-	if (!item.id || deletingId.value) {
-		return;
-	}
-
-	const detailId = item.id;
-	const dialog = DialogPlugin.confirm({
-		title: "删除通知",
-		content: "确定删除这条通知吗？删除后将不再显示。",
-		cancelBtn: "取消",
-		confirmBtn: "删除",
-		onCancel() {
-			dialog.destroy();
-		},
-		async onConfirm() {
-			dialog.destroy();
-			await deleteNotification(detailId);
-		}
-	});
-}
-
-async function deleteNotification(detailId: string): Promise<void> {
-	if (deletingId.value) {
-		return;
-	}
-
-	deletingId.value = detailId;
-	try {
-		await NotifyAPI.deleteInternal(detailId);
-		await reloadList();
-		await loadUnreadCount();
-		Message.success("通知已删除");
-	} catch (error) {
-		Message.error(getErrorMessage(error, "通知删除失败"));
-	} finally {
-		deletingId.value = "";
-	}
-}
-
-function updateNavBarAction(): void {
-	if (!isPageActive) {
-		return;
-	}
-	navBarStore.clearRight();
-	if (0 < unreadCount.value) {
-		navBarStore.setRightText("全部已读", "var(--td-brand-color)", markAllRead);
-	}
-}
-
-// ---------- 展示和导航 ----------
-
-function isUnread(item: NotifyDetail): boolean {
-	return !item.readAt;
-}
-
-function getSubject(item: NotifyDetail): string {
-	return item.subject?.trim() || "站内通知";
-}
-
-function getPreview(item: NotifyDetail): string {
-	const text = item.content?.replace(/\s+/g, " ").trim() || "无通知内容";
-	return 80 < text.length ? `${text.slice(0, 80)}...` : text;
-}
-
-function getTime(item: NotifyDetail): string {
-	return Time.toPassedDateTime(item.createdAt || item.sendAt) || "-";
-}
-
-async function toDetail(item: NotifyDetail): Promise<void> {
 	if (!item.id) {
 		return;
 	}
@@ -310,6 +199,62 @@ async function toDetail(item: NotifyDetail): Promise<void> {
 	});
 }
 
+async function toCreate(): Promise<void> {
+	await router.push({ name: "NotifyCreate" });
+}
+
+async function confirmCancel(item: NotifyManagementItem): Promise<void> {
+	if (!item.id || !canCancel(item)) {
+		return;
+	}
+	const notifyId = item.id;
+	const dialog = DialogPlugin.confirm({
+		title: "取消定时通知",
+		content: "确定取消这条尚未发送的通知吗？",
+		cancelBtn: "返回",
+		confirmBtn: "取消发送",
+		onCancel() {
+			dialog.destroy();
+		},
+		async onConfirm() {
+			dialog.destroy();
+			try {
+				await NotifyAPI.managementCancel(notifyId);
+				await reloadList();
+				Message.success("通知已取消");
+			} catch (error) {
+				Message.error(getErrorMessage(error, "通知取消失败"));
+			}
+		}
+	});
+}
+
+async function confirmDelete(item: NotifyManagementItem): Promise<void> {
+	if (!item.id || !canDeleteNotify.value) {
+		return;
+	}
+	const notifyId = item.id;
+	const dialog = DialogPlugin.confirm({
+		title: "删除通知",
+		content: "确定删除这条通知吗？删除后收件人也将无法查看。",
+		cancelBtn: "返回",
+		confirmBtn: "删除",
+		onCancel() {
+			dialog.destroy();
+		},
+		async onConfirm() {
+			dialog.destroy();
+			try {
+				await NotifyAPI.managementDelete(notifyId);
+				await reloadList();
+				Message.success("通知已删除");
+			} catch (error) {
+				Message.error(getErrorMessage(error, "通知删除失败"));
+			}
+		}
+	});
+}
+
 // ---------- 生命周期 ----------
 
 onMounted(async () => {
@@ -317,51 +262,31 @@ onMounted(async () => {
 	if (!canReadNotify.value) {
 		return;
 	}
-	try {
+	if (canCreateNotify.value) {
-		await reloadList();
+		navBarStore.setRightText("新建", "var(--td-brand-color)", toCreate);
-		await loadUnreadCount();
-	} catch (error) {
-		console.warn("站内通知加载失败", error);
-		Message.error("站内通知加载失败");
 	}
+	await reloadList();
 });
 
-onUnmounted(() => {
+onUnmounted(() => navBarStore.clearRight());
-	isPageActive = false;
-	navBarStore.clearRight();
-});
 </script>
 
 <style scoped lang="less">
-.notify-list {
+.notify-management {
-	display: flex;
-	padding: calc(var(--app-nav-height) + 1rem) 0 1rem 0;
 	min-height: 100%;
-	flex-direction: column;
+	padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
-
-	.filter {
-		width: calc(100% - 2rem);
-		margin: 0 1rem;
-	}
 
 	.items {
 		overflow: hidden;
-		padding-top: 1rem;
 
 		.item {
-
+			.cancel,
 			.delete {
 				height: 100%;
 				padding: 0 1rem;
 				border-radius: 0;
 			}
 
-			&:last-child {
-				:deep(.t-cell:after) {
-					display: none;
-				}
-			}
-
 			:deep(.t-cell__title) {
 				flex: 1 1 0;
 				min-width: 0;
@@ -387,16 +312,20 @@ onUnmounted(() => {
 				border-radius: .875rem;
 				justify-content: center;
 
-				&.unread {
+				&.scheduled {
-					color: #0f766e;
+					color: #b45309;
-					background: #ccfbf1;
+					background: #fef3c7;
 				}
 			}
 
+			.title,
+			.description {
+				display: flex;
+				align-items: center;
+			}
+
 			.title {
 				gap: .5rem;
-				display: flex;
-				align-items: center;
 
 				> span:first-child {
 					min-width: 0;
@@ -406,29 +335,24 @@ onUnmounted(() => {
 				}
 			}
 
-			.unread-label {
+			.description {
-				font-size: .6875rem;
+				gap: .75rem;
 			}
 		}
 	}
 }
 
 :global(html.theme-dark) {
-	.notify-list {
+	.notify-management {
 		.icon {
 			color: #94a3b8;
 			background: #1e293b;
 
-			&.unread {
+			&.scheduled {
-				color: #5eead4;
+				color: #fbbf24;
-				background: rgba(13, 148, 136, .2);
+				background: rgba(180, 83, 9, .2);
 			}
 		}
-
-		.unread-label {
-			color: #5eead4;
-			background: rgba(13, 148, 136, .2);
-		}
 	}
 }
 </style>

src/pages/notify/NotifyManagement.vue

@@ -1,372 +0,0 @@
-<template>
-	<div v-can="corePermissionCodes.notify.read" class="notify-management">
-		<t-pull-down-refresh
-			v-model="isRefreshing"
-			:refresh-timeout="30000"
-			@refresh="refresh"
-			@scrolltolower="loadMore"
-		>
-			<t-cell-group v-if="pageResult.list.length" class="items" theme="card">
-				<t-swipe-cell
-					v-for="item in pageResult.list"
-					:key="item.id"
-					class="item"
-				>
-					<t-cell
-						:description="getPreview(item)"
-						:note="getSendTime(item)"
-						arrow
-						hover
-						@click="toDetail(item)"
-					>
-						<template #leftIcon>
-							<div class="icon" :class="{ scheduled: isScheduled(item) }">
-								<t-icon :name="isScheduled(item) ? 'time' : 'notification'" size="1.25rem" />
-							</div>
-						</template>
-						<template #title>
-							<div class="title">
-								<span v-text="getSubject(item)" />
-								<t-tag size="small" :theme="getStatusTheme(item)" :content="getStatusText(item)" />
-							</div>
-						</template>
-						<template #description>
-							<div class="description">
-								<span v-text="getRecipientSummary(item)" />
-								<span v-if="item.readCount" v-text="`已读 ${item.readCount}`" />
-							</div>
-						</template>
-					</t-cell>
-					<template #right>
-						<t-button
-							v-if="canCancel(item)"
-							class="cancel"
-							theme="primary"
-							@click.stop="confirmCancel(item)"
-						>取消</t-button>
-						<t-button
-							v-if="canDeleteNotify"
-							class="delete"
-							theme="danger"
-							@click.stop="confirmDelete(item)"
-						>删除</t-button>
-					</template>
-				</t-swipe-cell>
-			</t-cell-group>
-			<t-empty v-else-if="!isLoading" description="暂无已发送通知" />
-			<div class="load-state" v-text="loadStateText" />
-		</t-pull-down-refresh>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { Time } from "timi-web";
-import { NotifyAPI, type Notify, type NotifyManagementItem, type Page, type PageResult, useUserStore } from "timi-web-api";
-import { DialogPlugin } from "tdesign-mobile-vue";
-import { Message } from "@/utils/message";
-import { getErrorMessage } from "@/utils/error";
-import { useNavBarStore } from "@/store/navBarStore";
-import { corePermissionCodes } from "@/utils/permission";
-
-type NotifyTagTheme = "default" | "success" | "warning" | "primary" | "danger";
-
-defineOptions({
-	name: "NotifyManagement"
-});
-
-const pageSize = 20;
-const router = useRouter();
-const navBarStore = useNavBarStore();
-const userStore = useUserStore();
-const canReadNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.read));
-const canCreateNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.create));
-const canDeleteNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.delete));
-const canCancelNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.cancel));
-
-// ---------- 列表分页 ----------
-
-const isRefreshing = ref(false);
-const isLoading = ref(false);
-const isNoMore = ref(false);
-const page = reactive<Page<Notify>>({
-	index: 0,
-	size: pageSize,
-	orderMap: { createdAt: "DESC" }
-});
-const pageResult = reactive<PageResult<NotifyManagementItem>>({
-	total: 0,
-	list: []
-});
-
-const loadStateText = computed(() => {
-	if (isLoading.value) {
-		return "正在加载通知";
-	}
-	if (isNoMore.value) {
-		return pageResult.list.length ? "没有更多通知" : "";
-	}
-	return "上拉加载更多";
-});
-
-// ---------- 展示 ----------
-
-function getSubject(item: NotifyManagementItem): string {
-	return item.subject?.trim() || "站内通知";
-}
-
-function getPreview(item: NotifyManagementItem): string {
-	const text = item.content?.replace(/\s+/g, " ").trim() || "无通知内容";
-	return 80 < text.length ? `${text.slice(0, 80)}...` : text;
-}
-
-function isScheduled(item: NotifyManagementItem): boolean {
-	return Boolean(item.sendAt && item.waitingCount && Time.now() < item.sendAt);
-}
-
-function getStatusText(item: NotifyManagementItem): string {
-	if (isScheduled(item)) {
-		return "待发送";
-	}
-	const total = item.recipientCount || 0;
-	if (0 < total && item.cancelCount === total) {
-		return "已取消";
-	}
-	if (item.failCount || item.timeoutCount) {
-		return "部分失败";
-	}
-	return "已发送";
-}
-
-function getStatusTheme(item: NotifyManagementItem): NotifyTagTheme {
-	if (isScheduled(item)) {
-		return "warning";
-	}
-	if (getStatusText(item) === "已取消") {
-		return "default";
-	}
-	if (getStatusText(item) === "部分失败") {
-		return "danger";
-	}
-	return "success";
-}
-
-function getRecipientSummary(item: NotifyManagementItem): string {
-	return `${item.recipientCount || 0} 位接收用户`;
-}
-
-function getSendTime(item: NotifyManagementItem): string {
-	if (isScheduled(item)) {
-		return `定时 ${Time.toDateTime(item.sendAt)}`;
-	}
-	return Time.toPassedDateTime(item.sendAt || item.createdAt) || "-";
-}
-
-function canCancel(item: NotifyManagementItem): boolean {
-	return canCancelNotify.value && isScheduled(item);
-}
-
-// ---------- 列表操作 ----------
-
-async function loadMore(): Promise<void> {
-	if (isLoading.value || isNoMore.value || !canReadNotify.value) {
-		return;
-	}
-
-	isLoading.value = true;
-	try {
-		const result = await NotifyAPI.listManagement(page);
-		pageResult.total = result.total || 0;
-		pageResult.list.push(...(result.list || []));
-		page.index += 1;
-		isNoMore.value = pageResult.list.length >= pageResult.total || (result.list || []).length < page.size;
-	} catch (error) {
-		Message.error(getErrorMessage(error, "通知列表加载失败"));
-	} finally {
-		isLoading.value = false;
-	}
-}
-
-async function reloadList(): Promise<void> {
-	page.index = 0;
-	pageResult.total = 0;
-	pageResult.list = [];
-	isNoMore.value = false;
-	await loadMore();
-}
-
-async function refresh(): Promise<void> {
-	isRefreshing.value = true;
-	try {
-		await reloadList();
-	} finally {
-		isRefreshing.value = false;
-	}
-}
-
-async function toDetail(item: NotifyManagementItem): Promise<void> {
-	if (!item.id) {
-		return;
-	}
-	await router.push({
-		name: "NotifyManagementDetail",
-		params: { id: item.id }
-	});
-}
-
-async function toCreate(): Promise<void> {
-	await router.push({ name: "NotifyManagementCreate" });
-}
-
-async function confirmCancel(item: NotifyManagementItem): Promise<void> {
-	if (!item.id || !canCancel(item)) {
-		return;
-	}
-	const notifyId = item.id;
-	const dialog = DialogPlugin.confirm({
-		title: "取消定时通知",
-		content: "确定取消这条尚未发送的通知吗？",
-		cancelBtn: "返回",
-		confirmBtn: "取消发送",
-		onCancel() {
-			dialog.destroy();
-		},
-		async onConfirm() {
-			dialog.destroy();
-			try {
-				await NotifyAPI.managementCancel(notifyId);
-				await reloadList();
-				Message.success("通知已取消");
-			} catch (error) {
-				Message.error(getErrorMessage(error, "通知取消失败"));
-			}
-		}
-	});
-}
-
-async function confirmDelete(item: NotifyManagementItem): Promise<void> {
-	if (!item.id || !canDeleteNotify.value) {
-		return;
-	}
-	const notifyId = item.id;
-	const dialog = DialogPlugin.confirm({
-		title: "删除通知",
-		content: "确定删除这条通知吗？删除后收件人也将无法查看。",
-		cancelBtn: "返回",
-		confirmBtn: "删除",
-		onCancel() {
-			dialog.destroy();
-		},
-		async onConfirm() {
-			dialog.destroy();
-			try {
-				await NotifyAPI.managementDelete(notifyId);
-				await reloadList();
-				Message.success("通知已删除");
-			} catch (error) {
-				Message.error(getErrorMessage(error, "通知删除失败"));
-			}
-		}
-	});
-}
-
-// ---------- 生命周期 ----------
-
-onMounted(async () => {
-	navBarStore.clearRight();
-	if (!canReadNotify.value) {
-		return;
-	}
-	if (canCreateNotify.value) {
-		navBarStore.setRightText("新建", "var(--td-brand-color)", toCreate);
-	}
-	await reloadList();
-});
-
-onUnmounted(() => navBarStore.clearRight());
-</script>
-
-<style scoped lang="less">
-.notify-management {
-	min-height: 100%;
-	padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
-
-	.items {
-		overflow: hidden;
-
-		.item {
-			.cancel,
-			.delete {
-				height: 100%;
-				padding: 0 1rem;
-				border-radius: 0;
-			}
-
-			:deep(.t-cell__title) {
-				flex: 1 1 0;
-				min-width: 0;
-			}
-
-			:deep(.t-cell__description) {
-				overflow: hidden;
-				white-space: nowrap;
-				text-overflow: ellipsis;
-			}
-
-			:deep(.t-cell__note) {
-				white-space: nowrap;
-			}
-
-			.icon {
-				width: 3.5rem;
-				height: 3.5rem;
-				color: #64748b;
-				display: flex;
-				background: #e2e8f0;
-				align-items: center;
-				border-radius: .875rem;
-				justify-content: center;
-
-				&.scheduled {
-					color: #b45309;
-					background: #fef3c7;
-				}
-			}
-
-			.title,
-			.description {
-				display: flex;
-				align-items: center;
-			}
-
-			.title {
-				gap: .5rem;
-
-				> span:first-child {
-					min-width: 0;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-				}
-			}
-
-			.description {
-				gap: .75rem;
-			}
-		}
-	}
-}
-
-:global(html.theme-dark) {
-	.notify-management {
-		.icon {
-			color: #94a3b8;
-			background: #1e293b;
-
-			&.scheduled {
-				color: #fbbf24;
-				background: rgba(180, 83, 9, .2);
-			}
-		}
-	}
-}
-</style>

src/pages/notify/NotifyManagementDetail.vue

@@ -1,422 +0,0 @@
-<template>
-	<div v-can="corePermissionCodes.notify.read" class="notify-management-detail">
-		<t-empty
-			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 { Time } from "timi-web";
-import { NotifyAPI, type Notify, type NotifyDetail, useUserStore } from "timi-web-api";
-import { DialogPlugin } from "tdesign-mobile-vue";
-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";
-
-type RecipientFilter = "all" | "unread" | "read";
-type NotifyTagTheme = "default" | "success" | "warning" | "primary" | "danger";
-
-defineOptions({
-	name: "NotifyManagementDetail"
-});
-
-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<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 notifyId = String(route.params.id || "");
-	if (!notifyId) {
-		return;
-	}
-
-	isLoading.value = true;
-	try {
-		const result = await NotifyAPI.managementDetail(notifyId);
-		if (requestToken !== loadToken) {
-			return;
-		}
-		detail.value = result;
-		setRightAction();
-	} catch (error) {
-		Message.error(getErrorMessage(error, "通知详情加载失败"));
-	} finally {
-		if (requestToken === loadToken) {
-			isLoading.value = false;
-		}
-	}
-}
-
-function setRightAction(): void {
-	if (detail.value?.id && canDeleteNotify.value) {
-		navBarStore.setRightText("删除", "var(--td-error-color)", confirmDelete);
-	}
-}
-
-// ---------- 通知操作 ----------
-
-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: "返回",
-		confirmBtn: "删除",
-		onCancel() {
-			dialog.destroy();
-		},
-		async onConfirm() {
-			dialog.destroy();
-			isDeleting.value = true;
-			navBarStore.clearRight();
-			try {
-				await NotifyAPI.managementDelete(notifyId);
-				Message.success("通知已删除");
-				await router.replace({ name: "NotifyManagement" });
-			} catch (error) {
-				Message.error(getErrorMessage(error, "通知删除失败"));
-				setRightAction();
-			} finally {
-				isDeleting.value = false;
-			}
-		}
-	});
-}
-
-// ---------- 展示 ----------
-
-function getSubject(item: Notify): string {
-	return item.detailList?.[0]?.subject?.trim() || "站内通知";
-}
-
-function getSendTime(item?: NotifyDetail): string {
-	if (!item?.sendAt) {
-		return "-";
-	}
-	if (isCancelable(item)) {
-		return `定时 ${Time.toDateTime(item.sendAt)}`;
-	}
-	return Time.toDateTime(item.sendAt);
-}
-
-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)}` : "未读";
-}
-
-// ---------- 生命周期 ----------
-
-watch(() => route.params.id, async () => {
-	await loadDetail();
-}, { immediate: true });
-
-onMounted(() => navBarStore.clearRight());
-onUnmounted(() => navBarStore.clearRight());
-</script>
-
-<style scoped lang="less">
-.notify-management-detail {
-	gap: 1rem;
-	min-height: 100%;
-	padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
-	display: flex;
-	flex-direction: column;
-
-	.article {
-		padding: 1.25rem 1rem;
-		margin: 0 1rem;
-		background: var(--td-bg-color-container);
-		box-shadow: var(--td-shadow-1);
-		border-radius: 1.4rem;
-	}
-
-	.header {
-		text-align: center;
-		padding-bottom: 1rem;
-		border-bottom: 1px solid rgba(148, 163, 184, .2);
-
-		h1 {
-			margin: 0;
-			font-size: 1.25rem;
-			line-height: 1.5;
-		}
-
-		.time {
-			color: #64748b;
-			margin-top: .5rem;
-			font-size: .8125rem;
-		}
-	}
-
-	.body {
-		color: #334155;
-		padding-top: 1rem;
-		font-size: .9375rem;
-		line-height: 1.8;
-		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-management-detail {
-		.header {
-			.time {
-				color: #94a3b8;
-			}
-		}
-
-		.body {
-			color: #cbd5e1;
-
-			.empty-content {
-				color: #94a3b8;
-			}
-		}
-	}
-}
-</style>

src/pages/notify/UserNotifyDetail.vue

@@ -0,0 +1,249 @@
+<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>
+		<t-empty
+			v-else
+			:description="isLoading ? '正在加载通知' : '通知不存在'"
+		/>
+	</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 { DialogPlugin } from "tdesign-mobile-vue";
+import { useNavBarStore } from "@/store/navBarStore";
+import { getErrorMessage } from "@/utils/error";
+import { getAttachmentReadURL } from "@/utils/attachment";
+import { corePermissionCodes } from "@/utils/permission";
+import { Message } from "@/utils/message.ts";
+
+const route = useRoute();
+const router = useRouter();
+const navBarStore = useNavBarStore();
+
+defineOptions({
+	name: "UserNotifyDetail"
+});
+
+// ---------- 通知数据 ----------
+
+const detail = ref<NotifyDetail>();
+const isLoading = ref(false);
+const isDeleting = ref(false);
+let loadToken = 0;
+
+async function loadDetail(): Promise<void> {
+	const requestToken = loadToken + 1;
+	loadToken = requestToken;
+	navBarStore.clearRight();
+	const detailId = String(route.params.id || "");
+	if (!detailId) {
+		detail.value = undefined;
+		return;
+	}
+
+	detail.value = undefined;
+	isLoading.value = true;
+	try {
+		const result = await NotifyAPI.internalDetail(detailId);
+		if (requestToken !== loadToken) {
+			return;
+		}
+
+		detail.value = result;
+		setDeleteAction();
+		await markRead(result, requestToken);
+	} catch (error) {
+		console.warn("通知详情加载失败", error);
+		Message.error("通知详情加载失败");
+	} finally {
+		if (requestToken === loadToken) {
+			isLoading.value = false;
+		}
+	}
+}
+
+function setDeleteAction(): void {
+	if (detail.value?.id) {
+		navBarStore.setRightText("删除", "var(--td-error-color)", confirmDelete);
+	}
+}
+
+async function confirmDelete(): Promise<void> {
+	const detailId = detail.value?.id;
+	if (!detailId || isDeleting.value) {
+		return;
+	}
+
+	const dialog = DialogPlugin.confirm({
+		title: "删除通知",
+		content: "确定删除这条通知吗？删除后将不再显示。",
+		cancelBtn: "取消",
+		confirmBtn: "删除",
+		onCancel() {
+			dialog.destroy();
+		},
+		async onConfirm() {
+			dialog.destroy();
+			await deleteDetail(detailId);
+		}
+	});
+}
+
+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: "UserNotifyList" });
+	} 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 getSenderName(item: NotifyDetail): string {
+	return item.fromUser?.nick?.trim() || item.fromUser?.name?.trim() || "系统通知";
+}
+
+function resolveAttachmentUrl(attachmentId: string): string {
+	return getAttachmentReadURL(attachmentId);
+}
+
+// ---------- 生命周期 ----------
+
+watch(() => route.params.id, async () => {
+	await loadDetail();
+}, { immediate: true });
+
+onMounted(() => {
+	navBarStore.clearRight();
+});
+
+onUnmounted(() => {
+	navBarStore.clearRight();
+});
+</script>
+
+<style scoped lang="less">
+.notify-detail {
+	gap: 1rem;
+	min-height: 100%;
+	padding: calc(var(--app-nav-height) + 1rem) 0 1rem 0;
+	display: flex;
+	flex-direction: column;
+
+	.article {
+		padding: 1.25rem 1rem;
+		margin: 0 1rem;
+		background: rgba(255, 255, 255, .92);
+		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;
+
+		h1 {
+			margin: 0;
+			font-size: 1.25rem;
+			line-height: 1.5;
+		}
+
+		.time {
+			color: #64748b;
+			margin-top: .5rem;
+			font-size: .8125rem;
+		}
+
+		.sender {
+			color: #64748b;
+			margin-top: .5rem;
+			font-size: .8125rem;
+		}
+	}
+
+	.body {
+		color: #334155;
+		padding-top: 1rem;
+		font-size: .9375rem;
+		line-height: 1.8;
+		white-space: pre-wrap;
+		word-break: break-word;
+	}
+}
+
+:global(html.theme-dark) {
+	.notify-detail {
+		.article {
+			background: rgba(15, 23, 42, .88);
+			box-shadow: 0 .75rem 2rem rgba(2, 6, 23, .32);
+		}
+
+		.header {
+			border-bottom-color: rgba(148, 163, 184, .16);
+
+			.time {
+				color: #94a3b8;
+			}
+
+			.sender {
+				color: #94a3b8;
+			}
+		}
+
+		.body {
+			color: #cbd5e1;
+		}
+	}
+}
+</style>

src/pages/notify/UserNotifyList.vue

@@ -0,0 +1,434 @@
+<template>
+	<div v-can="corePermissionCodes.notify.read" class="notify-list">
+		<t-segmented
+			v-model="filterMode"
+			class="filter"
+			block
+			:options="filterOptions"
+			@change="switchFilter"
+		/>
+		<t-pull-down-refresh
+			v-model="isRefreshing"
+			:refresh-timeout="30000"
+			@refresh="refresh"
+			@scrolltolower="loadMore"
+		>
+			<t-cell-group v-if="pageResult.list.length" class="items" theme="card">
+				<t-swipe-cell
+					v-for="item in pageResult.list"
+					:key="item.id"
+					class="item"
+				>
+					<t-cell
+						:description="getPreview(item)"
+						:note="getTime(item)"
+						arrow
+						hover
+						@click="toDetail(item)"
+					>
+						<template #leftIcon>
+							<div class="icon" :class="{ unread: isUnread(item) }">
+								<t-icon name="notification" size="1.25rem" />
+							</div>
+						</template>
+						<template #title>
+							<div class="title">
+								<span v-text="getSubject(item)" />
+								<t-tag
+									v-if="isUnread(item)"
+									class="unread-label"
+									theme="danger"
+									size="small"
+								>未读</t-tag>
+							</div>
+						</template>
+					</t-cell>
+					<template #right>
+						<t-button
+							class="delete"
+							theme="danger"
+							:loading="deletingId === item.id"
+							@click.stop="confirmDelete(item)"
+						>
+							删除
+						</t-button>
+					</template>
+				</t-swipe-cell>
+			</t-cell-group>
+			<t-empty
+				v-else-if="!isLoading"
+				description="暂无站内通知"
+			/>
+			<div class="load-state" v-text="loadStateText" />
+		</t-pull-down-refresh>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Time } from "timi-web";
+import { NotifyAPI, type NotifyDetail, type Page, type PageResult, useUserStore } from "timi-web-api";
+import { DialogPlugin } from "tdesign-mobile-vue";
+import { Message } from "@/utils/message";
+import { useNavBarStore } from "@/store/navBarStore";
+import { getErrorMessage } from "@/utils/error";
+import { corePermissionCodes } from "@/utils/permission";
+
+type NotifyFilter = "all" | "unread";
+
+defineOptions({
+	name: "UserNotifyList"
+});
+
+const pageSize = 20;
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const userStore = useUserStore();
+const canReadNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.read));
+
+// ---------- 筛选 ----------
+
+const filterMode = ref<NotifyFilter>("all");
+const unreadCount = ref(0);
+const unreadTabLabel = computed(() => 0 < unreadCount.value ? `未读 ${unreadCount.value}` : "未读");
+const filterOptions = computed(() => [
+	{ value: "all" as NotifyFilter, label: "全部" },
+	{ value: "unread" as NotifyFilter, label: unreadTabLabel.value }
+]);
+
+// ---------- 列表分页 ----------
+
+const isRefreshing = ref(false);
+const isLoading = ref(false);
+const isNoMore = ref(false);
+const page = reactive<Page<NotifyDetail>>({
+	index: 0,
+	size: pageSize
+});
+const pageResult = reactive<PageResult<NotifyDetail>>({
+	total: 0,
+	list: []
+});
+let loadToken = 0;
+let loadingPromise: Promise<void> | undefined;
+let isPageActive = true;
+
+const loadStateText = computed(() => {
+	if (isLoading.value) {
+		return "正在加载通知";
+	}
+	if (isNoMore.value) {
+		return pageResult.list.length ? "没有更多通知" : "";
+	}
+	return "上拉加载更多";
+});
+
+async function fetchPage(requestToken: number): Promise<void> {
+	isLoading.value = true;
+	const result = await NotifyAPI.listInternal(page, filterMode.value === "unread");
+	if (requestToken !== loadToken) {
+		return;
+	}
+	pageResult.total = result.total || 0;
+	pageResult.list = pageResult.list.concat(result.list || []);
+	page.index += 1;
+	isNoMore.value = pageResult.list.length >= pageResult.total || (result.list || []).length < page.size;
+}
+
+async function loadMore(): Promise<void> {
+	if (loadingPromise) {
+		await loadingPromise;
+		return;
+	}
+	if (isNoMore.value) {
+		return;
+	}
+
+	const requestToken = loadToken;
+	const request = (async () => {
+		try {
+			await fetchPage(requestToken);
+		} finally {
+			if (requestToken === loadToken) {
+				isLoading.value = false;
+			}
+		}
+	})();
+	loadingPromise = request;
+	try {
+		await request;
+	} finally {
+		if (loadingPromise === request) {
+			loadingPromise = undefined;
+		}
+	}
+}
+
+async function reloadList(): Promise<void> {
+	const requestToken = loadToken + 1;
+	loadToken = requestToken;
+	page.index = 0;
+	pageResult.total = 0;
+	pageResult.list = [];
+	isNoMore.value = false;
+	if (loadingPromise) {
+		await loadingPromise;
+	}
+	if (requestToken === loadToken) {
+		await loadMore();
+	}
+}
+
+async function refresh(): Promise<void> {
+	isRefreshing.value = true;
+	try {
+		await reloadList();
+		await loadUnreadCount();
+	} finally {
+		isRefreshing.value = false;
+	}
+}
+
+// ---------- 操作 ----------
+
+const isMarkingAllRead = ref(false);
+const deletingId = ref("");
+
+async function loadUnreadCount(): Promise<void> {
+	try {
+		unreadCount.value = Math.max(0, await NotifyAPI.countUnreadInternal());
+	} catch (error) {
+		unreadCount.value = 0;
+		console.warn("未读通知数量加载失败", error);
+	} finally {
+		updateNavBarAction();
+	}
+}
+
+async function switchFilter(context: { value: string | number }): Promise<void> {
+	const nextFilter = String(context.value) as NotifyFilter;
+	if (nextFilter !== "all" && nextFilter !== "unread") {
+		return;
+	}
+	filterMode.value = nextFilter;
+	await reloadList();
+}
+
+async function markAllRead(): Promise<void> {
+	if (isMarkingAllRead.value || unreadCount.value === 0) {
+		return;
+	}
+	isMarkingAllRead.value = true;
+	try {
+		await NotifyAPI.markAllInternalRead();
+		unreadCount.value = 0;
+		await reloadList();
+		Message.success("已全部标记为已读");
+	} catch (error) {
+		console.warn("全部通知标记已读失败", error);
+		Message.error("全部标记已读失败");
+	} finally {
+		isMarkingAllRead.value = false;
+		updateNavBarAction();
+	}
+}
+
+async function confirmDelete(item: NotifyDetail): Promise<void> {
+	if (!item.id || deletingId.value) {
+		return;
+	}
+
+	const detailId = item.id;
+	const dialog = DialogPlugin.confirm({
+		title: "删除通知",
+		content: "确定删除这条通知吗？删除后将不再显示。",
+		cancelBtn: "取消",
+		confirmBtn: "删除",
+		onCancel() {
+			dialog.destroy();
+		},
+		async onConfirm() {
+			dialog.destroy();
+			await deleteNotification(detailId);
+		}
+	});
+}
+
+async function deleteNotification(detailId: string): Promise<void> {
+	if (deletingId.value) {
+		return;
+	}
+
+	deletingId.value = detailId;
+	try {
+		await NotifyAPI.deleteInternal(detailId);
+		await reloadList();
+		await loadUnreadCount();
+		Message.success("通知已删除");
+	} catch (error) {
+		Message.error(getErrorMessage(error, "通知删除失败"));
+	} finally {
+		deletingId.value = "";
+	}
+}
+
+function updateNavBarAction(): void {
+	if (!isPageActive) {
+		return;
+	}
+	navBarStore.clearRight();
+	if (0 < unreadCount.value) {
+		navBarStore.setRightText("全部已读", "var(--td-brand-color)", markAllRead);
+	}
+}
+
+// ---------- 展示和导航 ----------
+
+function isUnread(item: NotifyDetail): boolean {
+	return !item.readAt;
+}
+
+function getSubject(item: NotifyDetail): string {
+	return item.subject?.trim() || "站内通知";
+}
+
+function getPreview(item: NotifyDetail): string {
+	const text = item.content?.replace(/\s+/g, " ").trim() || "无通知内容";
+	return 80 < text.length ? `${text.slice(0, 80)}...` : text;
+}
+
+function getTime(item: NotifyDetail): string {
+	return Time.toPassedDateTime(item.createdAt || item.sendAt) || "-";
+}
+
+async function toDetail(item: NotifyDetail): Promise<void> {
+	if (!item.id) {
+		return;
+	}
+	await router.push({
+		name: "UserNotifyDetail",
+		params: { id: item.id }
+	});
+}
+
+// ---------- 生命周期 ----------
+
+onMounted(async () => {
+	navBarStore.clearRight();
+	if (!canReadNotify.value) {
+		return;
+	}
+	try {
+		await reloadList();
+		await loadUnreadCount();
+	} catch (error) {
+		console.warn("站内通知加载失败", error);
+		Message.error("站内通知加载失败");
+	}
+});
+
+onUnmounted(() => {
+	isPageActive = false;
+	navBarStore.clearRight();
+});
+</script>
+
+<style scoped lang="less">
+.notify-list {
+	display: flex;
+	padding: calc(var(--app-nav-height) + 1rem) 0 1rem 0;
+	min-height: 100%;
+	flex-direction: column;
+
+	.filter {
+		width: calc(100% - 2rem);
+		margin: 0 1rem;
+	}
+
+	.items {
+		overflow: hidden;
+		padding-top: 1rem;
+
+		.item {
+
+			.delete {
+				height: 100%;
+				padding: 0 1rem;
+				border-radius: 0;
+			}
+
+			&:last-child {
+				:deep(.t-cell:after) {
+					display: none;
+				}
+			}
+
+			:deep(.t-cell__title) {
+				flex: 1 1 0;
+				min-width: 0;
+			}
+
+			:deep(.t-cell__description) {
+				overflow: hidden;
+				white-space: nowrap;
+				text-overflow: ellipsis;
+			}
+
+			:deep(.t-cell__note) {
+				white-space: nowrap;
+			}
+
+			.icon {
+				width: 3.5rem;
+				height: 3.5rem;
+				color: #64748b;
+				display: flex;
+				background: #e2e8f0;
+				align-items: center;
+				border-radius: .875rem;
+				justify-content: center;
+
+				&.unread {
+					color: #0f766e;
+					background: #ccfbf1;
+				}
+			}
+
+			.title {
+				gap: .5rem;
+				display: flex;
+				align-items: center;
+
+				> span:first-child {
+					min-width: 0;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+			}
+
+			.unread-label {
+				font-size: .6875rem;
+			}
+		}
+	}
+}
+
+:global(html.theme-dark) {
+	.notify-list {
+		.icon {
+			color: #94a3b8;
+			background: #1e293b;
+
+			&.unread {
+				color: #5eead4;
+				background: rgba(13, 148, 136, .2);
+			}
+		}
+
+		.unread-label {
+			color: #5eead4;
+			background: rgba(13, 148, 136, .2);
+		}
+	}
+}
+</style>

src/router/routes/managementRoutes.ts

@@ -1,8 +1,8 @@
 import type { RouteRecordRaw } from "vue-router";
 import AppSettings from "@/pages/setting/AppSettings.vue";
-import NotifyManagement from "@/pages/notify/NotifyManagement.vue";
+import NotifyList from "@/pages/notify/NotifyList.vue";
-import NotifyManagementCreate from "@/pages/notify/NotifyManagementCreate.vue";
+import NotifyCreate from "@/pages/notify/NotifyCreate.vue";
-import NotifyManagementDetail from "@/pages/notify/NotifyManagementDetail.vue";
+import NotifyDetail from "@/pages/notify/NotifyDetail.vue";
 import UserProfile from "@/pages/user/UserProfile.vue";
 import UserPassword from "@/pages/user/UserPassword.vue";
 import CustomerQrCode from "@/pages/customer/CustomerQrCode.vue";
@@ -102,8 +102,8 @@ export const managementSettingRoutes: RouteRecordRaw[] = [
 	},
 	{
 		path: "/management/notifications",
-		name: "NotifyManagement",
+		name: "NotifyList",
-		component: NotifyManagement,
+		component: NotifyList,
 		meta: {
 			depth: 3,
 			navBarVisible: true,
@@ -116,8 +116,8 @@ export const managementSettingRoutes: RouteRecordRaw[] = [
 	},
 	{
 		path: "/management/notifications/create",
-		name: "NotifyManagementCreate",
+		name: "NotifyCreate",
-		component: NotifyManagementCreate,
+		component: NotifyCreate,
 		meta: {
 			depth: 4,
 			navBarVisible: true,
@@ -130,8 +130,8 @@ export const managementSettingRoutes: RouteRecordRaw[] = [
 	},
 	{
 		path: "/management/notifications/:id",
-		name: "NotifyManagementDetail",
+		name: "NotifyDetail",
-		component: NotifyManagementDetail,
+		component: NotifyDetail,
 		meta: {
 			depth: 4,
 			navBarVisible: true,

src/router/routes/notifyRoutes.ts

@@ -1,12 +1,12 @@
 import type { RouteRecordRaw } from "vue-router";
-import NotifyDetail from "@/pages/notify/NotifyDetail.vue";
+import UserNotifyDetail from "@/pages/notify/UserNotifyDetail.vue";
-import NotifyList from "@/pages/notify/NotifyList.vue";
+import UserNotifyList from "@/pages/notify/UserNotifyList.vue";
 
 const notifyRoutes: RouteRecordRaw[] = [
 	{
 		path: "/notify",
-		name: "NotifyList",
+		name: "UserNotifyList",
-		component: NotifyList,
+		component: UserNotifyList,
 		meta: {
 			depth: 3,
 			navBarVisible: true,
@@ -19,8 +19,8 @@ const notifyRoutes: RouteRecordRaw[] = [
 	},
 	{
 		path: "/notify/:id",
-		name: "NotifyDetail",
+		name: "UserNotifyDetail",
-		component: NotifyDetail,
+		component: UserNotifyDetail,
 		meta: {
 			depth: 4,
 			navBarVisible: true,