add Notify
This commit is contained in:
Timi
@@ -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>
|
||||
Reference in New Issue
Block a user