update notify style

2026-08-28 15:56:57 +08:00
parent acddc71430
commit eab8ed48ac
12 changed files with 424 additions and 258 deletions
@@ -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>