feie9454/digital-human-monitor-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

全新UI语言

Browse Source
This commit is contained in:
feie9454
2026-07-11 23:37:48 +08:00
parent 4dde861c99
commit 386a28709f
19 changed files with 1032 additions and 1931 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/messages/[messageId]/page.tsx
+20 -104
View File
@@ -3,119 +3,35 @@ import { notFound } from "next/navigation";
import { PanelShell } from "@/components/panel-shell";
import { getCaregiverMessageDetail } from "@/lib/caregiver-panel";
import {
formatDateTime,
getDeviceName,
getImportanceLabel,
getMessageDirectionLabel,
getMessageStatusLabel,
} from "@/lib/panel-format";
import { formatDateTime, getDeviceName, getMessageDirectionLabel, getMessageStatusLabel } from "@/lib/panel-format";
import { requireCaregiverSession } from "@/lib/page-auth";
import { getCaregiverDisplayName } from "@/lib/session";
export const dynamic = "force-dynamic";
type MessageDetailPageProps = {
params: Promise<{ messageId: string }>;
};
export default async function MessageDetailPage({ params }: MessageDetailPageProps) {
const { messageId } = await params;
const publicId = Number.parseInt(messageId, 10);
if (!Number.isFinite(publicId) || publicId <= 0) {
notFound();
}
export default async function MessageDetailPage({ params }: PageProps<"/messages/[messageId]">) {
const publicId = Number.parseInt((await params).messageId, 10);
if (!Number.isFinite(publicId) || publicId <= 0) notFound();
const caregiver = await requireCaregiverSession(`/messages/${publicId}`);
const message = await getCaregiverMessageDetail(caregiver.id, publicId);
if (!message) {
notFound();
}
if (!message) notFound();
return (
<PanelShell
currentPath="/messages"
title={`留言 #${message.publicId}`}
description="查看这条留言的完整内容和设备信息。"
caregiverLabel={getCaregiverDisplayName(caregiver)}
>
<section className="grid gap-6 xl:grid-cols-[1.2fr_0.8fr]">
<article className="rounded-[32px] border border-white/75 bg-white/82 p-6 shadow-[0_26px_60px_rgba(115,76,42,0.12)]">
<div className="flex flex-wrap items-center gap-2 text-sm text-[var(--muted)]">
<span className="rounded-full bg-[var(--paper-soft)] px-3 py-1 font-semibold text-[var(--ink)]">
#{message.publicId}
</span>
<span className="rounded-full bg-[var(--paper-soft)] px-3 py-1">
{getMessageDirectionLabel(message.direction)}
</span>
<span className="rounded-full bg-[var(--paper-soft)] px-3 py-1">
{getImportanceLabel(message.importance)}
</span>
<span className="rounded-full bg-[var(--paper-soft)] px-3 py-1">
{getMessageStatusLabel(message)}
</span>
</div>
<h2 className="mt-5 font-[family-name:var(--font-display)] text-4xl leading-[1.2] text-[var(--ink)]">
{message.content}
</h2>
{message.recipientRelation ? (
<p className="mt-4 text-sm leading-7 text-[var(--muted)]">
目标对象：{message.recipientRelation}
</p>
) : null}
</article>
<aside className="rounded-[32px] border border-white/75 bg-white/82 p-6 shadow-[0_26px_60px_rgba(115,76,42,0.12)]">
<p className="text-sm font-medium tracking-[0.18em] text-[var(--copper)] uppercase">
设备信息
</p>
<div className="mt-5 space-y-4 text-sm leading-7 text-[var(--muted)]">
<div className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4">
<p>所属设备</p>
<p className="mt-2 font-semibold text-[var(--ink)]">
{getDeviceName(message.elderDevice.displayName)}
</p>
</div>
<div className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4">
<p>设备标识</p>
<p className="mt-2 break-all font-semibold text-[var(--ink)]">
{message.elderDevice.deviceUuid}
</p>
</div>
<div className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4">
<p>创建时间</p>
<p className="mt-2 font-semibold text-[var(--ink)]">
{formatDateTime(message.createdAt)}
</p>
</div>
<div className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4">
<p>最近在线</p>
<p className="mt-2 font-semibold text-[var(--ink)]">
{formatDateTime(message.elderDevice.lastSeenAt)}
</p>
</div>
</div>
<div className="mt-6 flex flex-wrap gap-3">
<Link
href="/messages"
className="inline-flex h-12 items-center justify-center rounded-full bg-[var(--copper)] px-5 text-sm font-semibold text-white transition hover:bg-[var(--copper-deep)]"
>
返回留言板
</Link>
<Link
href={`/devices/${message.elderDevice.deviceUuid}`}
className="inline-flex h-12 items-center justify-center rounded-full border border-[var(--line)] bg-white px-5 text-sm font-semibold text-[var(--ink)] transition hover:bg-[var(--paper-soft)]"
>
查看设备
</Link>
</div>
</aside>
<PanelShell currentPath="/messages" title={`留言 #${message.publicId}`} caregiverLabel={getCaregiverDisplayName(caregiver)} backHref="/messages">
<article className="card card-pad" style={{ paddingTop: 16, paddingBottom: 16 }}>
<div style={{ display: "flex", gap: 6, flexWrap: "wrap" }}>
<span className="tag" style={{ color: "var(--muted)", background: "rgba(32,29,26,.06)" }}>{getMessageDirectionLabel(message.direction)}</span>
{message.importance !== "NORMAL" ? <span className="tag">重要</span> : null}
<span className="tag" style={{ color: "var(--muted)", background: "rgba(32,29,26,.06)" }}>{getMessageStatusLabel(message)}</span>
</div>
<p style={{ margin: "12px 0 0", fontSize: 17, lineHeight: 1.65 }}>{message.content}</p>
</article>
<section className="card">
<div className="list-row"><span style={{ color: "var(--muted)" }}>所属设备</span><strong style={{ marginLeft: "auto", fontSize: 13 }}>{getDeviceName(message.elderDevice.displayName)}</strong></div>
<div className="list-row"><span style={{ color: "var(--muted)" }}>时间</span><strong style={{ marginLeft: "auto", fontSize: 13 }}>{formatDateTime(message.createdAt)}</strong></div>
<div className="list-row"><span style={{ color: "var(--muted)" }}>送达方式</span><strong style={{ marginLeft: "auto", fontSize: 13 }}>数字人口播</strong></div>
</section>
<Link href={`/devices/${message.elderDevice.deviceUuid}`} className="btn primary block">回一句问候</Link>
</PanelShell>
);
}
}