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-19 19:45:32 +08:00
parent b68bfc6287
commit bbfc055c21
12 changed files with 910 additions and 431 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/family/page.tsx
+67 -8
View File
@@ -6,13 +6,72 @@ import { requireCaregiverSession } from "@/lib/page-auth";
import { getCaregiverDisplayName } from "@/lib/session";
export const dynamic = "force-dynamic";
const roleLabel = { ADMIN: "管理员", CAREGIVER: "照护成员", CARING: "关怀成员" } as const;
const avatarStyles = [
{ background: "rgba(192,90,30,.1)", color: "var(--accent)" },
{ background: "rgba(101,118,90,.12)", color: "var(--olive)" },
{ background: "rgba(33,30,26,.06)", color: "var(--muted)" },
];
export default async function FamilyPage() {
const caregiver = await requireCaregiverSession("/family"); const workspace = await requireFamilyWorkspace(caregiver.id); const deviceUuid = workspace.elderProfile.elderDevice.deviceUuid;
const roleLabel = { ADMIN: "管理员", CAREGIVER: "照护成员", CARING: "关怀成员" } as const;
return <PanelShell currentPath="/family" title={workspace.name} description={`${workspace.memberships.length} 位家人共同参与`} caregiverLabel={getCaregiverDisplayName(caregiver)}>
<FamilyPostForm deviceUuid={deviceUuid} />
<section><div className="section-title"><h2>家庭动态</h2></div><div className="card">{workspace.posts.length ? workspace.posts.map((post) => <article key={post.id} className="timeline-item"><div className="timeline-top">{post.elderAuthored ? `${workspace.elderProfile.preferredName}通过安智伴说` : post.author?.nickname || post.author?.username || "家里人"}<span className="timeline-time">{formatDateTime(post.createdAt)}</span></div><p className="timeline-body">{post.content}</p><span className="tag">{post.visibility === "FAMILY_ONLY" ? "仅家人" : post.visibility === "ELDER_ONLY" ? "只给长辈" : "全家可见"}</span></article>) : <div className="empty">发出第一条家庭动态，让关心流动起来。</div>}</div></section>
<section><div className="section-title"><h2>家庭成员</h2></div><div className="card">{workspace.memberships.map((member) => <div key={member.id} className="list-row"><span className="avatar">{(member.caregiver.nickname || member.caregiver.username || "家").slice(-1)}</span><span className="row-main"><span className="row-title">{member.caregiver.nickname || member.caregiver.username || "家庭成员"}{member.relationLabel ? ` · ${member.relationLabel}` : ""}</span><span className="row-meta">{roleLabel[member.role]}{member.dutyOrder ? ` · 值守顺序 ${member.dutyOrder}` : ""}</span></span></div>)}</div></section>
<section><div className="section-title"><h2>邀请家人</h2><span>链接 24 小时有效</span></div><InviteMemberForm deviceUuid={deviceUuid} /></section>
</PanelShell>;
const caregiver = await requireCaregiverSession("/family");
const workspace = await requireFamilyWorkspace(caregiver.id);
const deviceUuid = workspace.elderProfile.elderDevice.deviceUuid;
return (
<PanelShell
currentPath="/family"
title={workspace.name}
description={`${workspace.memberships.length} 位家人共同参与`}
caregiverLabel={getCaregiverDisplayName(caregiver)}
caregiverId={caregiver.id}
>
<FamilyPostForm deviceUuid={deviceUuid} />
<section>
<div className="section-title"><h2>家庭动态</h2></div>
<div className="card">
{workspace.posts.length ? workspace.posts.map((post) => (
<article key={post.id} className="timeline-item">
<div className="timeline-top">
{post.elderAuthored ? `${workspace.elderProfile.preferredName}通过安智伴说` : post.author?.nickname || post.author?.username || "家里人"}
<span className="timeline-time">{formatDateTime(post.createdAt)}</span>
</div>
<p className="timeline-body">{post.content}</p>
<span className="tag" style={{ marginTop: 8 }}>
{post.visibility === "FAMILY_ONLY" ? "仅家人" : post.visibility === "ELDER_ONLY" ? "只给长辈" : "全家可见"}
</span>
</article>
)) : <div className="empty">发出第一条家庭动态，让关心流动起来。</div>}
</div>
</section>
<section>
<div className="section-title"><h2>家庭成员</h2></div>
<div className="card">
{workspace.memberships.map((member, index) => {
const name = member.caregiver.nickname || member.caregiver.username || "家庭成员";
return (
<div key={member.id} className="list-row" style={{ alignItems: "center" }}>
<span className="member-avatar" style={avatarStyles[index % avatarStyles.length]}>{name.slice(-1)}</span>
<span className="row-main">
<span className="row-title">{name}</span>
<span className="row-meta">
{member.relationLabel || "家人"}{member.dutyOrder ? ` · 值守顺序 ${member.dutyOrder}` : ""}
</span>
</span>
<span className="member-role">{roleLabel[member.role]}</span>
</div>
);
})}
</div>
</section>
<section>
<div className="section-title"><h2>邀请家人</h2><span>链接 24 小时有效</span></div>
<InviteMemberForm deviceUuid={deviceUuid} />
</section>
</PanelShell>
);
}