From c97913da2dcd790720c8b68bc01a594616f70163 Mon Sep 17 00:00:00 2001
From: Timi <imyeyu6@qq.com>
Date: Fri, 21 Aug 2026 13:52:52 +0800
Subject: [PATCH] add Notify

---
 src/layout/MainLayout.vue         |  59 ++--
 src/pages/notify/NotifyDetail.vue | 235 ++++++++++++++++
 src/pages/notify/NotifyList.vue   | 432 ++++++++++++++++++++++++++++++
 src/pages/tabs/HomeTab.vue        |  39 ++-
 src/router/index.ts               |   4 +-
 src/router/routes/notifyRoutes.ts |  36 +++
 src/store/navBarStore.ts          |  11 +
 src/utils/permission.ts           |   3 +
 vite.config.ts                    |  12 +-
 9 files changed, 803 insertions(+), 28 deletions(-)
 create mode 100644 src/pages/notify/NotifyDetail.vue
 create mode 100644 src/pages/notify/NotifyList.vue
 create mode 100644 src/router/routes/notifyRoutes.ts

diff --git a/src/layout/MainLayout.vue b/src/layout/MainLayout.vue
index d580c3d..c03385d 100644
--- a/src/layout/MainLayout.vue
+++ b/src/layout/MainLayout.vue
@@ -14,23 +14,36 @@
 				</div>
 			</template>
 			<template v-if="navBarStore.customRightVisible || navBarStore.rightIcon || navBarStore.rightText" #right>
-				<div v-if="navBarStore.customRightVisible" id="app-nav-right" class="nav-right-slot" />
-				<button
-					v-else-if="navBarStore.rightIcon"
-					class="nav-btn"
-					type="button"
-					@click="navBarStore.rightAction?.()"
-				>
-					<t-icon :name="navBarStore.rightIcon" size="1.25rem" />
-				</button>
-				<span
-					v-else
-					v-text="navBarStore.rightText"
-					class="nav-text"
-					:style="{ color: navBarStore.rightTextColor ? navBarStore.rightTextColor : '#333' }"
-					:class="{ clickable: !!navBarStore.rightAction }"
-					@click="navBarStore.rightAction?.()"
-				></span>
+				<div class="nav-right-slot">
+					<div v-if="navBarStore.customRightVisible" id="app-nav-right" />
+					<t-badge
+						v-else-if="navBarStore.rightIcon && navBarStore.rightBadge !== undefined"
+						class="badge"
+						:count="navBarStore.rightBadge"
+						:max-count="99"
+						:show-zero="false"
+					>
+						<button class="nav-btn" type="button" @click="navBarStore.rightAction?.()">
+							<t-icon :name="navBarStore.rightIcon" size="1.25rem" />
+						</button>
+					</t-badge>
+					<button
+						v-else-if="navBarStore.rightIcon"
+						class="nav-btn"
+						type="button"
+						@click="navBarStore.rightAction?.()"
+					>
+						<t-icon :name="navBarStore.rightIcon" size="1.25rem" />
+					</button>
+					<span
+						v-else
+						v-text="navBarStore.rightText"
+						class="nav-text"
+						:style="{ color: navBarStore.rightTextColor ? navBarStore.rightTextColor : '#333' }"
+						:class="{ clickable: !!navBarStore.rightAction }"
+						@click="navBarStore.rightAction?.()"
+					></span>
+				</div>
 			</template>
 		</t-navbar>
 		<div class="router-view">
@@ -216,6 +229,14 @@ const tabBarHeight = computed(() => {
 			-webkit-backdrop-filter: blur(10px);
 		}
 
+		.badge {
+
+			:deep(.t-badge__content) {
+				display: flex;
+				align-items: center;
+			}
+		}
+
 		.nav-btn {
 			padding: 0;
 			border: none;
@@ -243,6 +264,10 @@ const tabBarHeight = computed(() => {
 			display: flex;
 			align-items: center;
 			justify-content: flex-end;
+
+			:deep(.t-badge) {
+				display: inline-flex;
+			}
 		}
 
 		.nav-text {
diff --git a/src/pages/notify/NotifyDetail.vue b/src/pages/notify/NotifyDetail.vue
new file mode 100644
index 0000000..89b99f1
--- /dev/null
+++ b/src/pages/notify/NotifyDetail.vue
@@ -0,0 +1,235 @@
+<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 v-text="detail.data" />
+		</article>
+		<t-empty
+			v-else
+			:description="isLoading ? '正在加载通知' : '通知不存在'"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { NotifyAPI, type NotifyDetail, PassTimeLabel } from "timi-web";
+import { DialogPlugin, Toast } from "tdesign-mobile-vue";
+import { useNavBarStore } from "@/store/navBarStore";
+import { getErrorMessage } from "@/utils/error";
+import { corePermissionCodes } from "@/utils/permission";
+
+const route = useRoute();
+const router = useRouter();
+const navBarStore = useNavBarStore();
+
+defineOptions({
+	name: "NotifyDetail"
+});
+
+// ---------- 通知数据 ----------
+
+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);
+		Toast.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);
+		Toast.success("通知已删除");
+		await router.replace({ name: "NotifyList" });
+	} catch (error) {
+		Toast.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() || "系统通知";
+}
+
+// ---------- 生命周期 ----------
+
+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>
diff --git a/src/pages/notify/NotifyList.vue b/src/pages/notify/NotifyList.vue
new file mode 100644
index 0000000..62fd1d3
--- /dev/null
+++ b/src/pages/notify/NotifyList.vue
@@ -0,0 +1,432 @@
+<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 { NotifyAPI, Time, type NotifyDetail, type Page, type PageResult, useUserStore } from "timi-web";
+import { DialogPlugin, Toast } from "tdesign-mobile-vue";
+import { useNavBarStore } from "@/store/navBarStore";
+import { getErrorMessage } from "@/utils/error";
+import { corePermissionCodes } from "@/utils/permission";
+
+type NotifyFilter = "all" | "unread";
+
+defineOptions({
+	name: "NotifyList"
+});
+
+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();
+		Toast.success("已全部标记为已读");
+	} catch (error) {
+		console.warn("全部通知标记已读失败", error);
+		Toast.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();
+		Toast.success("通知已删除");
+	} catch (error) {
+		Toast.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.data?.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: "NotifyDetail",
+		params: { id: item.id }
+	});
+}
+
+// ---------- 生命周期 ----------
+
+onMounted(async () => {
+	navBarStore.clearRight();
+	if (!canReadNotify.value) {
+		return;
+	}
+	try {
+		await reloadList();
+		await loadUnreadCount();
+	} catch (error) {
+		console.warn("站内通知加载失败", error);
+		Toast.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>
diff --git a/src/pages/tabs/HomeTab.vue b/src/pages/tabs/HomeTab.vue
index 220605f..b8d36d2 100644
--- a/src/pages/tabs/HomeTab.vue
+++ b/src/pages/tabs/HomeTab.vue
@@ -14,15 +14,19 @@
 </template>
 
 <script setup lang="ts">
-import { useUserStore } from "timi-web";
-import { permissionCodes } from "@/utils/permission";
+import { NotifyAPI, useUserStore } from "timi-web";
+import { useNavBarStore } from "@/store/navBarStore";
+import { corePermissionCodes, permissionCodes } from "@/utils/permission";
 
 defineOptions({
 	name: "HomeTab"
 });
 
 const router = useRouter();
+const navBarStore = useNavBarStore();
 const userStore = useUserStore();
+const unreadNotifyCount = ref(0);
+let isPageActive = true;
 
 const entryList = [
 	{
@@ -56,10 +60,41 @@ const entryList = [
 ];
 
 const visibleEntryList = computed(() => entryList.filter(item => userStore.hasPermissions(item.permission)));
+const canReadNotify = computed(() => userStore.hasPermissions(corePermissionCodes.notify.read));
 
 async function go(path: string): Promise<void> {
 	await router.push(path);
 }
+
+async function goNotifyList(): Promise<void> {
+	await router.push("/notify");
+}
+
+async function loadUnreadNotifyCount(): Promise<void> {
+	try {
+		unreadNotifyCount.value = Math.max(0, await NotifyAPI.countUnreadInternal());
+	} catch (error) {
+		unreadNotifyCount.value = 0;
+		console.warn("未读通知数量加载失败", error);
+	}
+	if (isPageActive) {
+		navBarStore.setRightBadge(unreadNotifyCount.value);
+	}
+}
+
+onMounted(async () => {
+	navBarStore.clearRight();
+	if (canReadNotify.value) {
+		navBarStore.setRightIcon("notification", goNotifyList);
+		navBarStore.setRightBadge(0);
+		await loadUnreadNotifyCount();
+	}
+});
+
+onUnmounted(() => {
+	isPageActive = false;
+	navBarStore.clearRight();
+});
 </script>
 
 <style scoped lang="less">
diff --git a/src/router/index.ts b/src/router/index.ts
index ca6f37e..a89d2eb 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -11,6 +11,7 @@ import pointRoutes from "@/router/routes/pointRoutes";
 import registrationRoutes from "@/router/routes/registrationRoutes";
 import tabRoutes from "@/router/routes/tabRoutes";
 import userRoutes from "@/router/routes/userRoutes";
+import notifyRoutes from "@/router/routes/notifyRoutes";
 import { useCurrentStoreStore } from "@/store/currentStoreStore";
 import { useGlobalUIStore } from "@/store/globalUI";
 import { gaoRoleCodes } from "@/utils/permission";
@@ -25,7 +26,8 @@ const detailRoutes = [
 	...permissionRoutes,
 	...pointRoutes,
 	...chartRoutes,
-	...managementAccountRoutes
+	...managementAccountRoutes,
+	...notifyRoutes
 ];
 
 const router = createRouter({
diff --git a/src/router/routes/notifyRoutes.ts b/src/router/routes/notifyRoutes.ts
new file mode 100644
index 0000000..3e55aa7
--- /dev/null
+++ b/src/router/routes/notifyRoutes.ts
@@ -0,0 +1,36 @@
+import type { RouteRecordRaw } from "vue-router";
+import NotifyDetail from "@/pages/notify/NotifyDetail.vue";
+import NotifyList from "@/pages/notify/NotifyList.vue";
+
+const notifyRoutes: RouteRecordRaw[] = [
+	{
+		path: "/notify",
+		name: "NotifyList",
+		component: NotifyList,
+		meta: {
+			depth: 3,
+			navBarVisible: true,
+			navBarCanBack: true,
+			navBarTitle: "站内通知",
+			tabBarVisible: false,
+			bodyBackground: "#F5F5F8",
+			darkBodyBackground: "#10161f"
+		}
+	},
+	{
+		path: "/notify/:id",
+		name: "NotifyDetail",
+		component: NotifyDetail,
+		meta: {
+			depth: 4,
+			navBarVisible: true,
+			navBarCanBack: true,
+			navBarTitle: "通知详情",
+			tabBarVisible: false,
+			bodyBackground: "#F5F5F8",
+			darkBodyBackground: "#10161f"
+		}
+	}
+];
+
+export default notifyRoutes;
diff --git a/src/store/navBarStore.ts b/src/store/navBarStore.ts
index 2047c8d..c44c113 100644
--- a/src/store/navBarStore.ts
+++ b/src/store/navBarStore.ts
@@ -6,6 +6,7 @@ export const useNavBarStore = defineStore("nav-bar", () => {
 	const title = ref("");
 	const backTo = ref<string>();
 	const rightIcon = ref("");
+	const rightBadge = ref<number>();
 	const rightText = ref("");
 	const rightTextColor = ref("");
 	const rightAction = shallowRef<(() => void | Promise<void>) | undefined>();
@@ -33,6 +34,7 @@ export const useNavBarStore = defineStore("nav-bar", () => {
 
 	function setRightIcon(value?: string, action?: () => void | Promise<void>): void {
 		rightIcon.value = value || "";
+		rightBadge.value = undefined;
 		rightAction.value = action;
 		if (value) {
 			rightText.value = "";
@@ -41,11 +43,16 @@ export const useNavBarStore = defineStore("nav-bar", () => {
 		}
 	}
 
+	function setRightBadge(value?: number): void {
+		rightBadge.value = value === undefined ? undefined : Math.max(0, value);
+	}
+
 	function setRightText(value?: string, color?: string, action?: () => void | Promise<void>): void {
 		rightText.value = value || "";
 		rightTextColor.value = color || "";
 		rightAction.value = action;
 		if (value) {
+			rightBadge.value = undefined;
 			rightIcon.value = "";
 			customRightVisible.value = false;
 		}
@@ -59,6 +66,7 @@ export const useNavBarStore = defineStore("nav-bar", () => {
 		customRightVisible.value = value;
 		if (value) {
 			rightIcon.value = "";
+			rightBadge.value = undefined;
 			rightText.value = "";
 			rightTextColor.value = "";
 			rightAction.value = undefined;
@@ -67,6 +75,7 @@ export const useNavBarStore = defineStore("nav-bar", () => {
 
 	function clearRight(): void {
 		rightIcon.value = "";
+		rightBadge.value = undefined;
 		rightText.value = "";
 		rightTextColor.value = "";
 		rightAction.value = undefined;
@@ -78,6 +87,7 @@ export const useNavBarStore = defineStore("nav-bar", () => {
 		title,
 		backTo,
 		rightIcon,
+		rightBadge,
 		rightText,
 		rightTextColor,
 		rightAction,
@@ -88,6 +98,7 @@ export const useNavBarStore = defineStore("nav-bar", () => {
 		setHeight,
 		setBackTo,
 		setRightIcon,
+		setRightBadge,
 		setRightText,
 		setCustomTitleVisible,
 		setCustomRightVisible,
diff --git a/src/utils/permission.ts b/src/utils/permission.ts
index 4a7c288..07389b8 100644
--- a/src/utils/permission.ts
+++ b/src/utils/permission.ts
@@ -86,6 +86,9 @@ export const corePermissionCodes = {
 		create: "CORE:USER_ROLE:CREATE",
 		read: "CORE:USER_ROLE:READ",
 		delete: "CORE:USER_ROLE:DELETE"
+	},
+	notify: {
+		read: "CORE:NOTIFY:READ"
 	}
 } as const;
 
diff --git a/vite.config.ts b/vite.config.ts
index 313379d..5a162cf 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,13 +6,13 @@ import Components from "unplugin-vue-components/vite";
 import { TDesignResolver } from "unplugin-vue-components/resolvers";
 
 const localTimiWebRoot = fileURLToPath(new URL("../timi-web", import.meta.url));
+const localTimiWebModule = fileURLToPath(new URL("../timi-web/dist/timi-web.mjs", import.meta.url));
+const localTimiWebStyle = fileURLToPath(new URL("../timi-web/dist/timi-web.css", import.meta.url));
 const projectRoot = fileURLToPath(new URL(".", import.meta.url));
 
 export default defineConfig(({ mode }) => {
 	const env = loadEnv(mode, process.cwd(), "");
 	const useLocalTimiWeb = env.VITE_USE_LOCAL_TIMI_WEB !== "false";
-	const useLocalTimiWebSource = useLocalTimiWeb && mode === "development";
-	const useLocalTimiWebPublish = useLocalTimiWeb && mode !== "development";
 	return {
 		resolve: {
 			dedupe: ["vue", "pinia", "vue-router"],
@@ -25,15 +25,11 @@ export default defineConfig(({ mode }) => {
 					? [
 						{
 							find: /^timi-web$/,
-							replacement: useLocalTimiWebSource
-								? fileURLToPath(new URL("../timi-web/src/index.ts", import.meta.url))
-								: fileURLToPath(new URL("../timi-web/dist/timi-web.mjs", import.meta.url))
+							replacement: localTimiWebModule
 						},
 						{
 							find: /^timi-web\/style\.css$/,
-							replacement: useLocalTimiWebPublish
-								? fileURLToPath(new URL("../timi-web/dist/timi-web.css", import.meta.url))
-								: fileURLToPath(new URL("../timi-web/src/assets/style/timi-web.less", import.meta.url))
+							replacement: localTimiWebStyle
 						}
 					]
 					: [])