update notify style

package.json

@@ -19,7 +19,7 @@
 		"less": "^4.3.0",
 		"pinia": "^3.0.2",
 		"tdesign-mobile-vue": "^1.16.0",
-		"timi-tdesign-mobile": "0.0.10",
+		"timi-tdesign-mobile": "link:E:/WebProject/timi-tdesign-mobile",
 		"timi-web-api": "link:E:/WebProject/timi-web-api",
 		"timi-web": "link:E:/WebProject/timi-web",
 		"ts-node": "^10.9.2",

src/pages/customer/CustomerList.vue

@@ -66,7 +66,7 @@
 
 <script setup lang="ts">
 import { Message } from "@/utils/message";
-import { Time, Toolkit } from "timi-web";
+import { Time, Toolkit, WebToolkit } from "timi-web";
 import { type Page, type PageResult, useUserStore } from "timi-web-api";
 import CustomerAPI from "@/api/CustomerAPI";
 import TagSelector from "@/components/TagSelector.vue";
@@ -226,7 +226,7 @@ async function doExport(): Promise<void> {
 	isExporting.value = true;
 	try {
 		const blob = await CustomerAPI.exportXSSF(page);
-		Toolkit.downloadBlob(blob, `客户列表-${Time.formatDate(new Date())}.xlsx`);
+		WebToolkit.downloadBlob(blob, `客户列表-${Time.formatDate(new Date())}.xlsx`);
 		Message.success("导出已开始");
 	} finally {
 		isExporting.value = false;

src/pages/event/EventRecordList.vue

@@ -127,7 +127,7 @@
 
 <script setup lang="ts">
 import { DialogPlugin, type DropdownValue } from "tdesign-mobile-vue";
-import { Time, Toolkit } from "timi-web";
+import { Time, WebToolkit } from "timi-web";
 import { useUserStore } from "timi-web-api";
 import EventAPI from "@/api/EventAPI";
 import EventRecordAPI from "@/api/EventRecordAPI";
@@ -413,7 +413,7 @@ async function exportExcel(): Promise<void> {
 			size: pageSize,
 			...buildRangeReq()
 		});
-		Toolkit.downloadBlob(blob, `登记事件记录-${Time.formatDate(new Date())}.xlsx`);
+		WebToolkit.downloadBlob(blob, `登记事件记录-${Time.formatDate(new Date())}.xlsx`);
 		Message.success("导出已开始");
 	} finally {
 		isExporting.value = false;

src/pages/notify/NotifyCreate.vue

@@ -11,12 +11,15 @@
 				/>
 			</t-form-item>
 			<t-form-item
+				class="recipient-item"
 				label="接收用户"
-				:description="selectedRecipientDescription"
 				required-mark
 				arrow
 				@click="openRecipientPicker"
-			/>
+				content-align="right"
+			>
+				<span class="value clip-text" v-text="selectedRecipientDescription" />
+			</t-form-item>
 			<t-form-item label="发送时间" arrow @click="openSchedulePicker">
 				<div class="schedule-value">
 					<span v-text="scheduleAtText || '立即发送'" />
@@ -372,6 +375,14 @@ onUnmounted(() => navBarStore.clearRight());
 			justify-content: flex-end;
 		}
 
+		.recipient-item {
+
+			.value {
+				max-width: 12rem;
+				text-align: right;
+			}
+		}
+
 		.editor-wrapper {
 			width: 100%;
 			min-width: 0;

src/pages/notify/NotifyDetail.vue

@@ -1,76 +1,37 @@
 <template>
-	<div v-can="corePermissionCodes.notify.read" class="notify-management-detail">
+	<div v-can="corePermissionCodes.notify.read" class="notify-detail">
 		<t-empty
 			v-if="!detail"
 			:description="isLoading ? '正在加载通知' : '通知不存在'"
 		/>
 		<template v-else>
-			<article class="article">
+			<t-cell-group title="通知状态" theme="card" v-entrance-transition>
-				<header class="header">
+				<t-cell title="发送用户" :note="`${detail.detailList?.length || 0} 人`" arrow @click="openRecipientList"/>
-					<h1 v-text="getSubject(detail)" />
+				<t-cell title="已读用户" :note="`${readCount} 人`" arrow @click="openReadRecipientList"/>
-					<div class="time" v-text="getSendTime(detail.detailList?.[0])" />
+				<t-cell title="未读用户" :note="`${unreadCount} 人`" arrow @click="openUnreadRecipientList"/>
-				</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">
+			<div v-if="canCancelNotify && canCancel" class="actions" v-entrance-transition="70">
 				<t-button theme="primary" variant="outline" block :loading="isCanceling" @click="confirmCancel">
 					取消发送
 				</t-button>
 			</div>
-			<div v-if="canDeleteNotify" class="actions">
+			<notify-content
-				<t-button theme="danger" variant="outline" block :loading="isDeleting" @click="confirmDelete">
+				:detail="mainDetail"
-					删除通知
+				:subject="getSubject(detail)"
-				</t-button>
+				:time="getSendTime(mainDetail)"
-			</div>
+				:resolve-attachment-url="resolveAttachmentUrl"
-			<t-segmented
+				v-entrance-transition="140"
-				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";
@@ -79,9 +40,10 @@ import { getErrorMessage } from "@/utils/error";
 import { getAttachmentReadURL } from "@/utils/attachment";
 import { useNavBarStore } from "@/store/navBarStore";
 import { corePermissionCodes } from "@/utils/permission";
+import NotifyContent from "@/pages/notify/component/NotifyContent.vue";
 
-type RecipientFilter = "all" | "unread" | "read";
 type NotifyTagTheme = "default" | "success" | "warning" | "primary" | "danger";
+type RecipientFilter = "all" | "unread" | "read";
 
 defineOptions({
 	name: "NotifyDetail"
@@ -100,26 +62,11 @@ 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 unreadCount = computed(() => detail.value?.detailList?.filter(item => !item.readAt).length || 0);
-	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 || [];
@@ -266,39 +213,36 @@ function getSendTime(item?: NotifyDetail): string {
 	return Time.toDateTime(item.sendAt);
 }
 
-function getRecipientName(item: NotifyDetail): string {
+async function openRecipientList(): Promise<void> {
-	return item.toUser?.nick?.trim() || item.toUser?.name?.trim() || item.sendTo || "未知用户";
+	const notifyId = detail.value?.id;
+	if (!notifyId) {
+		return;
+	}
+	await router.push({
+		name: "NotifyRecipientList",
+		params: { id: notifyId },
+		query: { filter: "all" satisfies RecipientFilter }
+	});
 }
 
-function getRecipientContact(item: NotifyDetail): string {
+async function openReadRecipientList(): Promise<void> {
-	return item.toUser?.phoneNo || item.sendTo || "-";
+	await openRecipientListByFilter("read");
 }
 
-function getReadText(item: NotifyDetail): string {
+async function openUnreadRecipientList(): Promise<void> {
-	if (isCancelable(item)) {
+	await openRecipientListByFilter("unread");
-		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 {
+async function openRecipientListByFilter(filter: RecipientFilter): Promise<void> {
-	if (isCancelable(item)) {
+	const notifyId = detail.value?.id;
-		return "warning";
+	if (!notifyId) {
+		return;
 	}
-	if (item.status === "CANCEL" || item.status === "FAIL" || item.status === "TIMEOUT") {
+	await router.push({
-		return "danger";
+		name: "NotifyRecipientList",
-	}
+		params: { id: notifyId },
-	return item.readAt ? "primary" : "default";
+		query: { filter }
-}
+	});
-
-function getReadTime(item: NotifyDetail): string {
-	return item.readAt ? `已读 ${Time.toDateTime(item.readAt)}` : "未读";
 }
 
 // ---------- 生命周期 ----------
@@ -312,10 +256,10 @@ onUnmounted(() => navBarStore.clearRight());
 </script>
 
 <style scoped lang="less">
-.notify-management-detail {
+.notify-detail {
 	gap: 1rem;
 	min-height: 100%;
-	padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
+	padding: var(--app-nav-height) 0 1rem;
 	display: flex;
 	flex-direction: column;
 
@@ -361,62 +305,5 @@ onUnmounted(() => navBarStore.clearRight());
 	.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/NotifyList.vue

@@ -6,18 +6,18 @@
 			@refresh="refresh"
 			@scrolltolower="loadMore"
 		>
-			<t-cell-group v-if="pageResult.list.length" class="items" theme="card">
+			<t-cell-group
+				v-if="pageResult.list.length"
+				class="items fix-last-cell-line"
+				theme="card"
+			>
 				<t-swipe-cell
-					v-for="item in pageResult.list"
+					v-for="(item, index) in pageResult.list"
 					:key="item.id"
 					class="item"
+					v-entrance-transition="index * 30"
 				>
-					<t-cell
+					<t-cell :description="getSendTime(item)" arrow @click="toDetail(item)">
-						:description="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" />

src/pages/notify/NotifyRecipientList.vue

@@ -0,0 +1,215 @@
+<template>
+	<div v-can="corePermissionCodes.notify.read" class="notify-recipient-list">
+		<template v-if="detail">
+			<t-segmented
+				v-model="recipientFilter"
+				class="filter"
+				block
+				:options="recipientFilterOptions"
+				v-entrance-transition
+			/>
+			<t-cell-group v-if="filteredDetailList.length" title="发送用户" theme="card" class="recipients">
+				<t-cell
+					v-for="(item, index) in filteredDetailList"
+					:key="item.id"
+					v-entrance-transition="index * 70"
+				>
+					<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="暂无匹配的接收用户" v-entrance-transition="70" />
+		</template>
+		<t-empty
+			v-else
+			:description="isLoading ? '正在加载发送用户' : '通知不存在'"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Time } from "timi-web";
+import { NotifyAPI, type Notify, type NotifyDetail } from "timi-web-api";
+import { Message } from "@/utils/message";
+import { getErrorMessage } from "@/utils/error";
+import { useNavBarStore } from "@/store/navBarStore";
+import { corePermissionCodes } from "@/utils/permission";
+
+type RecipientFilter = "all" | "unread" | "read";
+type NotifyTagTheme = "default" | "success" | "warning" | "primary" | "danger";
+
+defineOptions({
+	name: "NotifyRecipientList"
+});
+
+const route = useRoute();
+const navBarStore = useNavBarStore();
+
+// ---------- 通知数据 ----------
+
+const detail = ref<Notify>();
+const isLoading = ref(false);
+const recipientFilter = ref<RecipientFilter>(getRecipientFilterFromRoute());
+let loadToken = 0;
+
+const recipientFilterOptions = [
+	{ value: "all" as RecipientFilter, label: "全部" },
+	{ value: "unread" as RecipientFilter, label: "未读" },
+	{ value: "read" as RecipientFilter, label: "已读" }
+];
+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;
+});
+
+function getRecipientFilterFromRoute(): RecipientFilter {
+	const filter = String(route.query.filter || "");
+	return filter === "unread" || filter === "read" ? filter : "all";
+}
+
+async function loadDetail(): Promise<void> {
+	const requestToken = loadToken + 1;
+	loadToken = requestToken;
+	detail.value = undefined;
+	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;
+	} catch (error) {
+		Message.error(getErrorMessage(error, "发送用户加载失败"));
+	} finally {
+		if (requestToken === loadToken) {
+			isLoading.value = false;
+		}
+	}
+}
+
+// ---------- 用户展示 ----------
+
+function isCancelable(item: NotifyDetail): boolean {
+	return item.status === "WAITING" && Boolean(item.sendAt && Time.now() < 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 });
+
+watch(() => route.query.filter, () => {
+	recipientFilter.value = getRecipientFilterFromRoute();
+});
+
+onMounted(() => navBarStore.clearRight());
+</script>
+
+<style scoped lang="less">
+.notify-recipient-list {
+	gap: 1rem;
+	min-height: 100%;
+	padding: calc(var(--app-nav-height) + 1rem) 0 1rem;
+	display: flex;
+	flex-direction: column;
+
+	.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;
+		}
+	}
+}
+</style>

src/pages/notify/UserNotifyDetail.vue

@@ -1,21 +1,12 @@
 <template>
 	<div v-can="corePermissionCodes.notify.read" class="notify-detail">
-		<article v-if="detail" class="article">
+		<notify-content
-			<header class="header">
+			v-if="detail"
-				<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="暂无通知内容"
+			:sender="getSenderName(detail)"
+			:timestamp="detail.sendAt"
 			:resolve-attachment-url="resolveAttachmentUrl"
 		/>
-			</section>
-		</article>
 		<t-empty
 			v-else
 			:description="isLoading ? '正在加载通知' : '通知不存在'"
@@ -24,8 +15,6 @@
 </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";
@@ -33,6 +22,7 @@ import { getErrorMessage } from "@/utils/error";
 import { getAttachmentReadURL } from "@/utils/attachment";
 import { corePermissionCodes } from "@/utils/permission";
 import { Message } from "@/utils/message.ts";
+import NotifyContent from "@/pages/notify/component/NotifyContent.vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -145,10 +135,6 @@ async function markRead(item: NotifyDetail, requestToken: number): Promise<void>
 
 // ---------- 展示 ----------
 
-function getSubject(item: NotifyDetail): string {
-	return item.subject?.trim() || "站内通知";
-}
-
 function getSenderName(item: NotifyDetail): string {
 	return item.fromUser?.nick?.trim() || item.fromUser?.name?.trim() || "系统通知";
 }
@@ -179,71 +165,5 @@ onUnmounted(() => {
 	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/component/NotifyContent.vue

@@ -0,0 +1,114 @@
+<template>
+	<article class="notify-content">
+		<header class="header">
+			<h1 v-text="subjectValue" />
+			<div v-if="sender" class="sender">
+				发送用户：<span v-text="sender" />
+			</div>
+			<pass-time-label
+				v-if="timestamp !== undefined"
+				class="time"
+				:timestamp="timestamp"
+				underline
+			/>
+			<div v-else-if="time" class="time" v-text="time" />
+		</header>
+		<section class="body">
+			<notify-view
+				:detail="detail"
+				:empty-text="emptyText"
+				:resolve-attachment-url="resolveAttachmentUrl"
+			/>
+		</section>
+	</article>
+</template>
+
+<script setup lang="ts">
+import { NotifyView } from "timi-tdesign-mobile";
+import { PassTimeLabel } from "timi-web";
+import type { NotifyDetail } from "timi-web-api";
+
+defineOptions({
+	name: "NotifyContent"
+});
+
+const props = withDefaults(defineProps<{
+	detail?: NotifyDetail;
+	emptyText?: string;
+	resolveAttachmentUrl?: (attachmentId: string) => string | Promise<string>;
+	sender?: string;
+	subject?: string;
+	time?: string;
+	timestamp?: number;
+}>(), {
+	emptyText: "暂无通知内容",
+	sender: "",
+	subject: "",
+	time: ""
+});
+
+const subjectValue = computed(() => props.subject.trim() || props.detail?.subject?.trim() || "站内通知");
+</script>
+
+<style scoped lang="less">
+.notify-content {
+	margin: 0 1rem;
+	padding: 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,
+		.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;
+
+		:deep(.content) {
+			border: none;
+			padding: 0;
+		}
+	}
+}
+
+:global(html.theme-dark) {
+	.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,
+		.sender {
+			color: #94a3b8;
+		}
+	}
+
+	.body {
+		color: #cbd5e1;
+	}
+}
+</style>

src/pages/store/StoreList.vue

@@ -39,7 +39,7 @@
 
 <script setup lang="ts">
 import { Message } from "@/utils/message";
-import { Time, Toolkit } from "timi-web";
+import { Time, WebToolkit } from "timi-web";
 import { type Page, type PageResult, useUserStore } from "timi-web-api";
 import StoreAPI from "@/api/StoreAPI";
 import { useNavBarStore } from "@/store/navBarStore";
@@ -152,7 +152,7 @@ async function exportExcel(): Promise<void> {
 			size: 10000,
 			orderMap: page.orderMap
 		});
-		Toolkit.downloadBlob(blob, `门店列表-${Time.formatDate(new Date())}.xlsx`);
+		WebToolkit.downloadBlob(blob, `门店列表-${Time.formatDate(new Date())}.xlsx`);
 		Message.success("导出已开始");
 	} finally {
 		isExporting.value = false;

src/router/routes/managementRoutes.ts

@@ -3,6 +3,7 @@ import AppSettings from "@/pages/setting/AppSettings.vue";
 import NotifyList from "@/pages/notify/NotifyList.vue";
 import NotifyCreate from "@/pages/notify/NotifyCreate.vue";
 import NotifyDetail from "@/pages/notify/NotifyDetail.vue";
+import NotifyRecipientList from "@/pages/notify/NotifyRecipientList.vue";
 import UserProfile from "@/pages/user/UserProfile.vue";
 import UserPassword from "@/pages/user/UserPassword.vue";
 import CustomerQrCode from "@/pages/customer/CustomerQrCode.vue";
@@ -142,6 +143,20 @@ export const managementSettingRoutes: RouteRecordRaw[] = [
 			darkBodyBackground: "#10161f"
 		}
 	},
+	{
+		path: "/management/notifications/:id/recipients",
+		name: "NotifyRecipientList",
+		component: NotifyRecipientList,
+		meta: {
+			depth: 5,
+			navBarVisible: true,
+			navBarCanBack: true,
+			navBarTitle: "发送用户",
+			tabBarVisible: false,
+			bodyBackground: "#F5F5F8",
+			darkBodyBackground: "#10161f"
+		}
+	},
 	{
 		path: "/management/tags",
 		name: "TagList",

src/styles/global.less

@@ -100,6 +100,10 @@ html.theme-dark body {
 	}
 }
 
+.fix-last-cell-line .item:last-child .t-cell:after {
+	display: none;
+}
+
 .entrance-fade-up-enter-active {
 	transition: opacity .4s ease, transform .4s ease;
 	transition-delay: var(--entrance-delay, 0ms);