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

优化文案

Browse Source
This commit is contained in:
feie9454
2026-04-17 12:38:59 +08:00
parent 0da5936ce0
commit 032e207888
19 changed files with 6670 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/activity/page.tsx
+136 -69
View File
@@ -1,4 +1,5 @@
import { PanelShell } from "@/components/panel-shell";
import { ActivityChart } from "@/components/activity-chart";
import { getCaregiverActivity } from "@/lib/caregiver-panel";
import {
formatDateTime,
@@ -11,102 +12,168 @@ import { requireCaregiverSession } from "@/lib/page-auth";
export const dynamic = "force-dynamic";
function aggregateByDate(items: { createdAt: Date | string }[]) {
const counts: Record<string, number> = {};
for (const item of items) {
const date = new Date(item.createdAt);
const key = `${date.getMonth() + 1}/${date.getDate()}`;
counts[key] = (counts[key] || 0) + 1;
}
return Object.entries(counts)
.map(([date, count]) => ({ date, count }))
.reverse();
}
export default async function ActivityPage() {
const caregiver = await requireCaregiverSession("/activity");
const { usageEvents, conversationTurns, toolCalls } = await getCaregiverActivity(
caregiver.id,
);
const usageChartData = aggregateByDate(usageEvents);
const conversationChartData = aggregateByDate(conversationTurns);
return (
<PanelShell
currentPath="/activity"
title="活动记录独立成页，回看陪伴过程更清楚。"
description="这里专门收下老人端的使用事件、最近对话片段和工具调用，不再和留言流混排。"
title="陪伴动态"
description="了解长辈最近的使用情况、聊天内容和智能服务记录。"
caregiverToken={caregiver.sessionToken}
>
{usageEvents.length === 0 && conversationTurns.length === 0 && toolCalls.length === 0 ? (
<section className="rounded-[32px] border border-dashed border-[var(--line)] bg-white/72 px-6 py-10 text-center shadow-[0_20px_50px_rgba(115,76,42,0.10)]">
<h2 className="font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
还没有活动记录
暂时没有动态
</h2>
<p className="mx-auto mt-4 max-w-2xl text-base leading-8 text-[var(--muted)]">
等老人端开始对话、切换镜头或触发桥接工具后，这里会自动累积活动时间线。
长辈开始使用智能助理后，这里会自动记录使用情况和聊天内容，方便您随时了解。
</p>
</section>
) : (
<section className="grid gap-6 xl:grid-cols-3">
<div 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>
<h2 className="mt-2 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
老人端操作轨迹
</h2>
<div className="mt-5 space-y-3">
{usageEvents.map((event) => (
<div key={event.id} className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4">
<div className="flex items-center justify-between gap-3 text-xs text-[var(--muted)]">
<span>{getDeviceName(event.elderDevice.displayName)}</span>
<span>{formatDateTime(event.createdAt)}</span>
</div>
<p className="mt-2 text-sm leading-7 text-[var(--ink)]">
{getUsageLabel(event.eventType)}
<>
{(usageChartData.length > 1 || conversationChartData.length > 1) && (
<section className="grid gap-6 xl:grid-cols-2">
{usageChartData.length > 1 && (
<div 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>
<h2 className="mt-2 font-[family-name:var(--font-display)] text-2xl text-[var(--ink)]">
最近使用趋势
</h2>
<div className="mt-4">
<ActivityChart data={usageChartData} color="#c76733" />
</div>
</div>
))}
</div>
</div>
)}
{conversationChartData.length > 1 && (
<div 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>
<h2 className="mt-2 font-[family-name:var(--font-display)] text-2xl text-[var(--ink)]">
最近对话趋势
</h2>
<div className="mt-4">
<ActivityChart data={conversationChartData} color="#76845e" />
</div>
</div>
)}
</section>
)}
<div 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>
<h2 className="mt-2 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
最近说了什么
</h2>
<div className="mt-5 space-y-3">
{conversationTurns.map((turn) => (
<div key={turn.id} className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4">
<div className="flex items-center justify-between gap-3 text-xs text-[var(--muted)]">
<span>{getConversationRoleLabel(turn.role)}</span>
<span>{formatDateTime(turn.createdAt)}</span>
</div>
<p className="mt-2 text-xs text-[var(--muted)]">
{getDeviceName(turn.elderDevice.displayName)}
<section className="grid gap-6 xl:grid-cols-3">
<div 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>
<h2 className="mt-2 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
最近的操作
</h2>
<div className="mt-5 space-y-3">
{usageEvents.length === 0 ? (
<p className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4 text-sm leading-7 text-[var(--muted)]">
暂时没有使用记录。
</p>
<p className="mt-2 text-sm leading-7 text-[var(--ink)]">
{truncateText(turn.content, 132)}
</p>
</div>
))}
) : (
usageEvents.map((event) => (
<div key={event.id} className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4">
<div className="flex items-center justify-between gap-3 text-xs text-[var(--muted)]">
<span>{getDeviceName(event.elderDevice.displayName)}</span>
<span>{formatDateTime(event.createdAt)}</span>
</div>
<p className="mt-2 text-sm leading-7 text-[var(--ink)]">
{getUsageLabel(event.eventType)}
</p>
</div>
))
)}
</div>
</div>
</div>
<div 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>
<h2 className="mt-2 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
function calling 执行记录
</h2>
<div className="mt-5 space-y-3">
{toolCalls.map((log) => (
<div key={log.id} className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4">
<div className="flex items-center justify-between gap-3 text-xs text-[var(--muted)]">
<span>{getDeviceName(log.elderDevice.displayName)}</span>
<span>{formatDateTime(log.createdAt)}</span>
</div>
<p className="mt-2 text-sm font-semibold text-[var(--ink)]">
{log.toolName}
<div 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>
<h2 className="mt-2 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
最近的对话
</h2>
<div className="mt-5 space-y-3">
{conversationTurns.length === 0 ? (
<p className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4 text-sm leading-7 text-[var(--muted)]">
暂时没有聊天记录。
</p>
<p className="mt-2 text-sm leading-7 text-[var(--muted)]">
{truncateText(log.outputText || log.argumentsJson, 136)}
</p>
</div>
))}
) : (
conversationTurns.map((turn) => (
<div key={turn.id} className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4">
<div className="flex items-center justify-between gap-3 text-xs text-[var(--muted)]">
<span>{getConversationRoleLabel(turn.role)}</span>
<span>{formatDateTime(turn.createdAt)}</span>
</div>
<p className="mt-2 text-xs text-[var(--muted)]">
{getDeviceName(turn.elderDevice.displayName)}
</p>
<p className="mt-2 text-sm leading-7 text-[var(--ink)]">
{truncateText(turn.content, 132)}
</p>
</div>
))
)}
</div>
</div>
</div>
</section>
<div 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>
<h2 className="mt-2 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
助理做了什么
</h2>
<div className="mt-5 space-y-3">
{toolCalls.length === 0 ? (
<p className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4 text-sm leading-7 text-[var(--muted)]">
暂时没有智能服务记录。
</p>
) : (
toolCalls.map((log) => (
<div key={log.id} className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4">
<div className="flex items-center justify-between gap-3 text-xs text-[var(--muted)]">
<span>{getDeviceName(log.elderDevice.displayName)}</span>
<span>{formatDateTime(log.createdAt)}</span>
</div>
<p className="mt-2 text-sm font-semibold text-[var(--ink)]">
{log.toolName}
</p>
<p className="mt-2 text-sm leading-7 text-[var(--muted)]">
{truncateText(log.outputText || log.argumentsJson, 136)}
</p>
</div>
))
)}
</div>
</div>
</section>
</>
)}
</PanelShell>
);
app/bind/page.tsx
+10 -10
View File
@@ -27,13 +27,13 @@ export default async function BindPage({ searchParams }: BindPageProps) {
<main className="mx-auto flex min-h-screen max-w-3xl items-center px-4 py-8 sm:px-6">
<section className="w-full rounded-[36px] border border-white/70 bg-white/82 p-8 text-center shadow-[0_30px_70px_rgba(115,76,42,0.14)] backdrop-blur">
<p className="text-sm font-medium tracking-[0.18em] text-[var(--copper)] uppercase">
连接家人设备
连接设备
</p>
<h1 className="mt-4 font-[family-name:var(--font-display)] text-4xl text-[var(--ink)]">
还没有收到设备码
还没有收到设备信息
</h1>
<p className="mt-4 text-base leading-8 text-[var(--muted)]">
请让老人打开家人连接页，把二维码给您扫一下，或者把设备码复制过来。
请让长辈打开手机上的「家人连接」页面，把二维码给您扫一下，或将设备码复制过来。
</p>
<div className="mt-6 flex justify-center gap-3">
<Link
@@ -46,7 +46,7 @@ export default async function BindPage({ searchParams }: BindPageProps) {
href="/devices"
className="inline-flex h-12 items-center justify-center rounded-full border border-[var(--line)] bg-[var(--paper-soft)] px-5 text-sm font-semibold text-[var(--ink)] transition hover:bg-white"
>
回到设备页
返回设备页
</Link>
</div>
</section>
@@ -70,17 +70,17 @@ export default async function BindPage({ searchParams }: BindPageProps) {
<main className="mx-auto flex min-h-screen max-w-3xl items-center px-4 py-8 sm:px-6">
<section className="w-full rounded-[36px] border border-white/70 bg-white/84 p-8 shadow-[0_30px_70px_rgba(115,76,42,0.14)] backdrop-blur">
<p className="text-sm font-medium tracking-[0.18em] text-[var(--copper)] uppercase">
绑定完成
连接成功
</p>
<h1 className="mt-4 font-[family-name:var(--font-display)] text-4xl text-[var(--ink)]">
这位老人已经连到当前家属账号
已成功连接长辈的设备
</h1>
<p className="mt-4 text-base leading-8 text-[var(--muted)]">
现在您可以在控制台查看老人给家里的留言、最近陪伴记录，也能马上给老人写下一句问候。
现在可以查看长辈的留言、了解使用动态，也可以随时给长辈写一句问候。
</p>
<div className="mt-6 rounded-[28px] bg-[var(--paper-soft)] p-5">
<p className="text-sm text-[var(--muted)]">设备 UUID</p>
<p className="text-sm text-[var(--muted)]">设备标识</p>
<p className="mt-2 break-all text-lg font-semibold text-[var(--ink)]">
{device.deviceUuid}
</p>
@@ -91,13 +91,13 @@ export default async function BindPage({ searchParams }: BindPageProps) {
href={`/devices/${device.deviceUuid}`}
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"
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>
</section>
app/devices/[deviceUuid]/page.tsx
+15 -15
View File
@@ -41,18 +41,18 @@ export default async function DeviceDetailPage({ params }: DeviceDetailPageProps
<PanelShell
currentPath="/devices"
title={getDeviceName(binding.elderDevice.displayName)}
description="这是一台设备的专属页面。给老人写问候、查看这台设备最近的留言、活动和对话，都在这里完成。"
description="给长辈写问候、查看留言和最近的使用动态。"
caregiverToken={caregiver.sessionToken}
>
<section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
<div className="rounded-[28px] border border-white/80 bg-white/88 p-5">
<p className="text-sm text-[var(--muted)]">老人新留言</p>
<p className="text-sm text-[var(--muted)]">新留言</p>
<p className="mt-3 font-[family-name:var(--font-display)] text-4xl text-[var(--ink)]">
{binding.elderUnreadCount}
</p>
</div>
<div className="rounded-[28px] border border-white/80 bg-white/88 p-5">
<p className="text-sm text-[var(--muted)]">待老人查看</p>
<p className="text-sm text-[var(--muted)]">待查看</p>
<p className="mt-3 font-[family-name:var(--font-display)] text-4xl text-[var(--ink)]">
{binding.familyUnreadCount}
</p>
@@ -64,7 +64,7 @@ export default async function DeviceDetailPage({ params }: DeviceDetailPageProps
</p>
</div>
<div className="rounded-[28px] border border-white/80 bg-white/88 p-5">
<p className="text-sm text-[var(--muted)]">绑定链接</p>
<p className="text-sm text-[var(--muted)]">设备链接</p>
<p className="mt-3 text-sm leading-7 text-[var(--ink)]">
{truncateText(binding.bindUrl, 52)}
</p>
@@ -79,24 +79,24 @@ export default async function DeviceDetailPage({ params }: DeviceDetailPageProps
<div className="flex items-center justify-between gap-3">
<div>
<p className="text-sm font-medium tracking-[0.18em] text-[var(--copper)] uppercase">
老人给家里的话
长辈的话
</p>
<h2 className="mt-2 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
最近通过桥接工具送出的内容
最近收到的留言
</h2>
</div>
<Link
href="/messages"
className="inline-flex h-11 items-center justify-center rounded-full border border-[var(--line)] bg-white px-4 text-sm font-semibold text-[var(--ink)] transition hover:bg-[var(--paper-soft)]"
>
去留言中心
全部留言
</Link>
</div>
<div className="mt-5 space-y-3">
{elderMessages.length === 0 ? (
<p className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4 text-sm leading-7 text-[var(--muted)]">
这台设备暂时还没有新的老人留言。
还没有收到长辈的留言。
</p>
) : (
elderMessages.map((message) => (
@@ -126,13 +126,13 @@ export default async function DeviceDetailPage({ params }: DeviceDetailPageProps
最近活动
</p>
<h2 className="mt-2 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
这台设备刚刚发生了什么
最近的使用情况
</h2>
<div className="mt-5 space-y-3">
{binding.elderDevice.usageEvents.length === 0 ? (
<p className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4 text-sm leading-7 text-[var(--muted)]">
暂时还没有同步到新的使用事件。
暂时还没有使用记录。
</p>
) : (
binding.elderDevice.usageEvents.map((event) => (
@@ -151,16 +151,16 @@ export default async function DeviceDetailPage({ params }: DeviceDetailPageProps
<div className="space-y-6">
<section 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>
<h2 className="mt-2 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
最近写给这位老人的内容
已发出的留言
</h2>
<div className="mt-5 space-y-3">
{familyMessages.length === 0 ? (
<p className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4 text-sm leading-7 text-[var(--muted)]">
还没有发给这位老人的问候。
还没有给这位长辈写过留言。
</p>
) : (
familyMessages.map((message) => (
@@ -190,13 +190,13 @@ export default async function DeviceDetailPage({ params }: DeviceDetailPageProps
最近对话片段
</p>
<h2 className="mt-2 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
快速回看陪伴内容
最近的聊天记录
</h2>
<div className="mt-5 space-y-3">
{binding.elderDevice.conversationTurns.length === 0 ? (
<p className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4 text-sm leading-7 text-[var(--muted)]">
这台设备最近还没有同步到对话片段。
还没有聊天记录。
</p>
) : (
binding.elderDevice.conversationTurns.map((turn) => (
app/devices/page.tsx
+21 -21
View File
@@ -16,8 +16,8 @@ export default async function DevicesPage() {
return (
<PanelShell
currentPath="/devices"
title="设备管理和绑定入口单独放在这里。"
description="手动粘贴设备码、扫码绑定、查看某台设备的专属页，都统一放在设备页，不再和首页摘要、活动记录混在一起。"
title="我的设备"
description="管理已连接的长辈设备，点击进入设备详情查看留言和使用动态。"
caregiverToken={caregiver.sessionToken}
actions={<PwaControls />}
>
@@ -26,15 +26,15 @@ export default async function DevicesPage() {
<div 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>
<h2 className="mt-2 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
一台设备一个详情页
如何连接长辈的设备？
</h2>
<div className="mt-4 space-y-3 rounded-[24px] bg-[var(--paper-soft)] p-5 text-sm leading-7 text-[var(--muted)]">
<p>1. 先通过扫码或粘贴设备码建立连接。</p>
<p>2. 进入设备详情页给这位老人写留言，不再在首页里混排。</p>
<p>3. 每台设备都有自己的最近留言、对话片段和工具调用摘要。</p>
<p>1. 让长辈打开手机上的「家人连接」页面，屏幕会显示一个二维码。</p>
<p>2. 您用自己的手机扫描这个二维码，或将设备码粘贴到左侧输入框。</p>
<p>3. 连接成功后，即可在这里查看长辈的留言、对话和使用动态。</p>
</div>
<div className="mt-6 flex flex-wrap gap-3">
@@ -42,13 +42,13 @@ export default async function DevicesPage() {
href="/scan"
className="inline-flex h-12 items-center justify-center rounded-full bg-[var(--olive)] px-5 text-sm font-semibold text-white transition hover:bg-[var(--olive-deep)]"
>
打开扫码页
扫码连接
</Link>
<Link
href="/messages"
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>
</div>
@@ -57,10 +57,10 @@ export default async function DevicesPage() {
{devices.length === 0 ? (
<section className="rounded-[32px] border border-dashed border-[var(--line)] bg-white/72 px-6 py-10 text-center shadow-[0_20px_50px_rgba(115,76,42,0.10)]">
<h2 className="font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
还没有绑定设备
还没有连接设备
</h2>
<p className="mx-auto mt-4 max-w-2xl text-base leading-8 text-[var(--muted)]">
等待绑定成功后，每台设备都会在这里生成自己的专属入口，后续写留言和查看状态都从设备详情页进入。
扫描长辈手机上的二维码，或者在上方粘贴设备码，即可开始接收长辈的留言和动态。
</p>
</section>
) : (
@@ -74,7 +74,7 @@ export default async function DevicesPage() {
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>
<h2 className="mt-2 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
{getDeviceName(binding.elderDevice.displayName)}
@@ -85,28 +85,28 @@ export default async function DevicesPage() {
最近在线：{formatDateTime(binding.elderDevice.lastSeenAt)}
</span>
<span className="rounded-full border border-[var(--line)] bg-[var(--paper-soft)] px-4 py-2">
老人新留言 {binding.elderUnreadCount}
新留言 {binding.elderUnreadCount}
</span>
<span className="rounded-full border border-[var(--line)] bg-[var(--paper-soft)] px-4 py-2">
待老人查看 {binding.familyUnreadCount}
待查看 {binding.familyUnreadCount}
</span>
</div>
<div className="mt-5 grid gap-3 sm:grid-cols-3">
<div className="rounded-[22px] bg-[var(--paper-soft)] px-4 py-4">
<p className="text-xs text-[var(--muted)]">留言总数</p>
<p className="text-xs text-[var(--muted)]">留言</p>
<p className="mt-2 text-2xl font-semibold text-[var(--ink)]">
{binding.elderDevice._count.messages}
</p>
</div>
<div className="rounded-[22px] bg-[var(--paper-soft)] px-4 py-4">
<p className="text-xs text-[var(--muted)]">对话条数</p>
<p className="text-xs text-[var(--muted)]">对话</p>
<p className="mt-2 text-2xl font-semibold text-[var(--ink)]">
{binding.elderDevice._count.conversationTurns}
</p>
</div>
<div className="rounded-[22px] bg-[var(--paper-soft)] px-4 py-4">
<p className="text-xs text-[var(--muted)]">工具调用</p>
<p className="text-xs text-[var(--muted)]">智能服务</p>
<p className="mt-2 text-2xl font-semibold text-[var(--ink)]">
{binding.elderDevice._count.toolCalls}
</p>
@@ -114,11 +114,11 @@ export default async function DevicesPage() {
</div>
<div className="mt-5 rounded-[24px] bg-[var(--paper-soft)] px-5 py-4">
<p className="text-sm font-semibold text-[var(--ink)]">最近一条动态</p>
<p className="text-sm font-semibold text-[var(--ink)]">最新动态</p>
<p className="mt-2 text-sm leading-7 text-[var(--muted)]">
{latestMessage
? truncateText(latestMessage.content, 96)
: "这台设备还没有同步到新的留言或问候。"}
: "还没有收到新的留言或问候。"}
</p>
</div>
@@ -127,13 +127,13 @@ export default async function DevicesPage() {
href={`/devices/${binding.elderDevice.deviceUuid}`}
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="/messages"
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>
</article>
app/globals.css
-1
View File
@@ -38,7 +38,6 @@ body {
}
a {
color: inherit;
text-decoration: none;
}
app/layout.tsx
+1 -1
View File
@@ -17,7 +17,7 @@ const displayFont = Noto_Serif_SC({
export const metadata: Metadata = {
metadataBase: new URL("https://digital-human.xn--876a.net"),
title: "家人连线台",
description: "给老人设备做绑定、查看留言、追踪陪伴记录的家属端。",
description: "随时了解长辈的近况，查看留言、使用动态，给长辈写问候。",
manifest: "/manifest.webmanifest",
icons: {
icon: [
app/manifest.ts
+1 -1
View File
@@ -4,7 +4,7 @@ export default function manifest(): MetadataRoute.Manifest {
return {
name: "家人连线台",
short_name: "家人连线台",
description: "给老人设备做绑定、查看留言、追踪陪伴记录的家属端。",
description: "随时了解长辈的近况，查看留言、使用动态，给长辈写问候。",
start_url: "/",
display: "standalone",
background_color: "#f6eee1",
app/messages/[messageId]/page.tsx
+5 -5
View File
@@ -37,7 +37,7 @@ export default async function MessageDetailPage({ params }: MessageDetailPagePro
<PanelShell
currentPath="/messages"
title={`留言 #${message.publicId}`}
description="这是单条留言详情页。无论从通知点击进来，还是从留言中心点开，都能在这里看到完整内容与所属设备信息。"
description="查看这条留言的完整内容和设备信息。"
caregiverToken={caregiver.sessionToken}
>
<section className="grid gap-6 xl:grid-cols-[1.2fr_0.8fr]">
@@ -70,7 +70,7 @@ export default async function MessageDetailPage({ params }: MessageDetailPagePro
<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">
@@ -80,7 +80,7 @@ export default async function MessageDetailPage({ params }: MessageDetailPagePro
</p>
</div>
<div className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4">
<p>设备 UUID</p>
<p>设备标识</p>
<p className="mt-2 break-all font-semibold text-[var(--ink)]">
{message.elderDevice.deviceUuid}
</p>
@@ -104,13 +104,13 @@ export default async function MessageDetailPage({ params }: MessageDetailPagePro
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>
app/messages/page.tsx
+13 -13
View File
@@ -31,8 +31,8 @@ export default async function MessagesPage() {
return (
<PanelShell
currentPath="/messages"
title="留言独立成页后，每条消息都能用编号直达。"
description="不论是老人留给家里的话，还是家属写给老人的问候，都集中在这里。点击任何一条卡片，都会进入带 URL 编号的详情页。"
title="留言板"
description="长辈捆来的话和您发出的问候，都在这里。"
caregiverToken={caregiver.sessionToken}
actions={<PwaControls />}
>
@@ -44,13 +44,13 @@ export default async function MessagesPage() {
</p>
</div>
<div className="rounded-[28px] border border-white/80 bg-white/88 p-5">
<p className="text-sm text-[var(--muted)]">老人给家里的未读留言</p>
<p className="text-sm text-[var(--muted)]">长辈的未读留言</p>
<p className="mt-3 font-[family-name:var(--font-display)] text-4xl text-[var(--ink)]">
{unreadIncomingCount}
</p>
</div>
<div className="rounded-[28px] border border-white/80 bg-white/88 p-5">
<p className="text-sm text-[var(--muted)]">待老人查看的家属留言</p>
<p className="text-sm text-[var(--muted)]">待长辈查看</p>
<p className="mt-3 font-[family-name:var(--font-display)] text-4xl text-[var(--ink)]">
{unreadOutgoingCount}
</p>
@@ -60,23 +60,23 @@ export default async function MessagesPage() {
{messages.length === 0 ? (
<section className="rounded-[32px] border border-dashed border-[var(--line)] bg-white/72 px-6 py-10 text-center shadow-[0_20px_50px_rgba(115,76,42,0.10)]">
<h2 className="font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
还没有留言记录
还没有留言
</h2>
<p className="mx-auto mt-4 max-w-2xl text-base leading-8 text-[var(--muted)]">
去设备页给老人留一句问候，或等待老人通过桥接工具给家里捎话；新记录会自动出现在这里，并带有可分享的消息编号。
连接长辈的设备后，就可以在这里查看长辈的留言，也可以给长辈写问候。
</p>
<div className="mt-6 flex justify-center gap-3">
<Link
href="/devices"
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="/scan"
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>
</section>
@@ -84,13 +84,13 @@ export default async function MessagesPage() {
<section className="grid gap-6 xl:grid-cols-2">
{[
{
title: "老人给家里的留言",
subtitle: "收到新话时也会从这里直达详情页。",
title: "长辈的留言",
subtitle: "长辈通过智能助理捆来的话。",
items: incomingMessages,
},
{
title: "家属给老人的问候",
subtitle: "写出去的每条问候也有独立 URL，可回看送达状态。",
title: "我发出的问候",
subtitle: "您写给长辈的每一条问候。",
items: outgoingMessages,
},
].map((section) => (
@@ -99,7 +99,7 @@ export default async function MessagesPage() {
className="rounded-[32px] border border-white/75 bg-white/80 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">
留言列表
{section.title === "长辈的留言" ? "收到的" : "发出的"}
</p>
<h2 className="mt-2 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
{section.title}
app/page.tsx
+53 -44
View File
@@ -1,4 +1,5 @@
import Link from "next/link";
import { MessageCircle, Smartphone, Activity, ScanLine } from "lucide-react";
import { PanelShell } from "@/components/panel-shell";
import { PwaControls } from "@/components/pwa-controls";
@@ -35,32 +36,32 @@ export default async function Home() {
return (
<PanelShell
currentPath="/"
title="首页只保留摘要，不再把所有操作挤在一处。"
description="设备绑定、留言管理、活动回看和扫码入口已经拆到独立路径。这里保留今天最值得先看的摘要，以及最近的新留言。"
title="今日概览"
description="随时了解长辈的近况，留言和动态一目了然。"
caregiverToken={dashboard.caregiver.sessionToken}
actions={<PwaControls />}
>
<section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
<div className="rounded-[28px] border border-white/80 bg-white/88 p-5 shadow-[0_20px_50px_rgba(115,76,42,0.10)]">
<p className="text-sm text-[var(--muted)]">已连接老人设备</p>
<p className="text-sm text-[var(--muted)]">已连接设备</p>
<p className="mt-3 font-[family-name:var(--font-display)] text-4xl text-[var(--ink)]">
{dashboard.devices.length}
</p>
</div>
<div className="rounded-[28px] border border-white/80 bg-white/88 p-5 shadow-[0_20px_50px_rgba(115,76,42,0.10)]">
<p className="text-sm text-[var(--muted)]">老人给家里的未读留言</p>
<p className="text-sm text-[var(--muted)]">长辈的新留言</p>
<p className="mt-3 font-[family-name:var(--font-display)] text-4xl text-[var(--ink)]">
{totalUnreadForCaregiver}
</p>
</div>
<div className="rounded-[28px] border border-white/80 bg-white/88 p-5 shadow-[0_20px_50px_rgba(115,76,42,0.10)]">
<p className="text-sm text-[var(--muted)]">待老人查看的家属留言</p>
<p className="text-sm text-[var(--muted)]">待长辈查看</p>
<p className="mt-3 font-[family-name:var(--font-display)] text-4xl text-[var(--ink)]">
{totalUnreadForElder}
</p>
</div>
<div className="rounded-[28px] border border-white/80 bg-white/88 p-5 shadow-[0_20px_50px_rgba(115,76,42,0.10)]">
<p className="text-sm text-[var(--muted)]">最近存档对话条数</p>
<p className="text-sm text-[var(--muted)]">陪伴对话</p>
<p className="mt-3 font-[family-name:var(--font-display)] text-4xl text-[var(--ink)]">
{totalConversations}
</p>
@@ -71,69 +72,77 @@ export default async function Home() {
{[
{
href: "/messages",
title: "留言中心",
text: "集中看所有老人留言和家属留言，每条消息都有 URL 编号可直接打开。",
title: "留言板",
text: "查看长辈捎来的话，也能回看您发出的每一条问候。",
tone: "bg-[rgba(53,84,141,0.12)]",
icon: MessageCircle,
},
{
href: "/devices",
title: "设备与绑定",
text: "去管理设备、扫码绑定、查看某一台设备的专属详情页和留言入口。",
title: "我的设备",
text: "管理已绑定的长辈设备，进入设备详情给长辈写留言。",
tone: "bg-[rgba(118,132,94,0.14)]",
icon: Smartphone,
},
{
href: "/activity",
title: "活动回看",
text: "把使用事件、工具调用和对话片段拆出来，回看时不再和留言混在一起。",
title: "陪伴动态",
text: "了解长辈最近的使用情况和聊天记录，安心守护。",
tone: "bg-[rgba(199,103,51,0.12)]",
icon: Activity,
},
{
href: "/scan",
title: "扫码绑定",
text: "拿起另一台手机时，直接走扫码页，不必再回首页寻找入口。",
text: "扫描长辈手机上的二维码，一步完成设备连接。",
tone: "bg-[rgba(36,27,20,0.08)]",
icon: ScanLine,
},
].map((item) => (
<Link
key={item.href}
href={item.href}
className="rounded-[28px] border border-white/80 bg-white/84 p-5 shadow-[0_20px_50px_rgba(115,76,42,0.10)] transition hover:-translate-y-0.5"
>
<div className={`inline-flex rounded-full px-3 py-1 text-xs font-semibold text-[var(--ink)] ${item.tone}`}>
跳转路径
</div>
<h2 className="mt-4 font-[family-name:var(--font-display)] text-2xl text-[var(--ink)]">
{item.title}
</h2>
<p className="mt-3 text-sm leading-7 text-[var(--muted)]">{item.text}</p>
<p className="mt-4 text-sm font-semibold text-[var(--copper)]">前往 {item.href}</p>
</Link>
))}
].map((item) => {
const Icon = item.icon;
return (
<Link
key={item.href}
href={item.href}
className="rounded-[28px] border border-white/80 bg-white/84 p-5 shadow-[0_20px_50px_rgba(115,76,42,0.10)] transition hover:-translate-y-0.5"
>
<div className={`inline-flex items-center gap-2 rounded-full px-3 py-1 text-xs font-semibold text-[var(--ink)] ${item.tone}`}>
<Icon size={14} />
{item.title}
</div>
<h2 className="mt-4 font-[family-name:var(--font-display)] text-2xl text-[var(--ink)]">
{item.title}
</h2>
<p className="mt-3 text-sm leading-7 text-[var(--muted)]">{item.text}</p>
<p className="mt-4 text-sm font-semibold text-[var(--copper)]">查看详情 →</p>
</Link>
);
})}
</section>
{dashboard.devices.length === 0 ? (
<section className="rounded-[32px] border border-dashed border-[var(--line)] bg-white/70 px-6 py-10 text-center shadow-[0_20px_50px_rgba(115,76,42,0.10)]">
<p className="text-sm font-medium tracking-[0.18em] text-[var(--copper)] uppercase">
还没有绑定老人设备
开始使用
</p>
<h2 className="mt-3 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
先去设备页或扫码页建立第一条连接
先连接长辈的设备
</h2>
<p className="mx-auto mt-4 max-w-2xl text-base leading-8 text-[var(--muted)]">
绑定完成后，留言中心会出现 URL 编号消息卡，活动页会出现陪伴记录，推送也能直达具体留言。
让长辈打开手机里的「家人连接」页面，用您的手机扫描二维码，即可建立连接。连接成功后，您就能收到长辈的留言和使用动态。
</p>
<div className="mt-6 flex justify-center gap-3">
<Link
href="/devices"
href="/scan"
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="/scan"
href="/devices"
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>
</section>
@@ -143,24 +152,24 @@ export default async function Home() {
<div className="flex items-center justify-between gap-3">
<div>
<p className="text-sm font-medium tracking-[0.18em] text-[var(--copper)] uppercase">
新收到的老人留言
长辈的留言
</p>
<h2 className="mt-2 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
点一下就能按编号直达
最近收到的话
</h2>
</div>
<Link
href="/messages"
className="inline-flex h-11 items-center justify-center rounded-full border border-[var(--line)] bg-white px-4 text-sm font-semibold text-[var(--ink)] transition hover:bg-[var(--paper-soft)]"
>
查看全部留言
查看全部
</Link>
</div>
<div className="mt-5 space-y-3">
{recentIncomingMessages.length === 0 ? (
<p className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4 text-sm leading-7 text-[var(--muted)]">
目前还没有新的老人留言。
暂时还没有收到新留言。
</p>
) : (
recentIncomingMessages.map((message) => (
@@ -190,24 +199,24 @@ export default async function Home() {
<div className="flex items-center justify-between gap-3">
<div>
<p className="text-sm font-medium tracking-[0.18em] text-[var(--copper)] uppercase">
最近发给老人的问候
我发出的问候
</p>
<h2 className="mt-2 font-[family-name:var(--font-display)] text-3xl text-[var(--ink)]">
发出后也能按编号回看
最近写给长辈的话
</h2>
</div>
<Link
href="/devices"
className="inline-flex h-11 items-center justify-center rounded-full border border-[var(--line)] bg-white px-4 text-sm font-semibold text-[var(--ink)] transition hover:bg-[var(--paper-soft)]"
>
去设备页留言
写新留言
</Link>
</div>
<div className="mt-5 space-y-3">
{recentOutgoingMessages.length === 0 ? (
<p className="rounded-[24px] bg-[var(--paper-soft)] px-5 py-4 text-sm leading-7 text-[var(--muted)]">
还没有新的家属留言，可以到设备页针对某一台设备写下问候。
还没有给长辈留过言，去设备页写一句问候吧。
</p>
) : (
recentOutgoingMessages.map((message) => (
app/scan/page.tsx
+7 -7
View File
@@ -8,19 +8,19 @@ export default function ScanPage() {
<section className="grid gap-6 lg:grid-cols-[0.82fr_1.18fr]">
<div className="rounded-[36px] border border-white/70 bg-white/78 p-6 shadow-[0_30px_70px_rgba(115,76,42,0.14)] backdrop-blur">
<p className="text-sm font-medium tracking-[0.18em] text-[var(--copper)] uppercase">
扫码绑定
扫码连接
</p>
<h1 className="mt-4 font-[family-name:var(--font-display)] text-4xl leading-[1.15] text-[var(--ink)]">
对准老人手机里的家人连接二维码
对准长辈手机上的二维码
</h1>
<p className="mt-4 text-base leading-8 text-[var(--muted)]">
扫描成功后，系统会自动把老人的本机 UUID 绑定到当前家属账号。之后，您就能看见老人的留言、最近对话和使用记录。
扫描成功后，系统会自动将长辈的设备连接到您的账号。之后就能随时查看长辈的留言和使用动态。
</p>
<div className="mt-6 space-y-3 rounded-[28px] bg-[var(--paper-soft)] p-5 text-sm leading-7 text-[var(--muted)]">
<p>1. 让老人打开安卓端的家人连接页。</p>
<p>2. 把镜头对准屏幕上的二维码，停稳一两秒。</p>
<p>3. 绑定成功后会自动跳回控制台。</p>
<p>1. 让长辈打开手机上的「家人连接」页面。</p>
<p>2. 将镜头对准屏幕上的二维码，保持一两秒即可。</p>
<p>3. 连接成功后会自动跳转。</p>
</div>
<div className="mt-6 flex flex-wrap gap-3">
@@ -28,7 +28,7 @@ export default function ScanPage() {
href="/devices"
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>
</div>