优化ui

app/companion/page.tsx

@@ -1,8 +1,68 @@
+import { ChevronRight, Heart, MessageCircle, MessagesSquare } from "lucide-react";
 import Link from "next/link";
-import { BookHeart, MessageCircle, MessagesSquare } from "lucide-react";
+
 import { PanelShell } from "@/components/panel-shell";
-import { requireFamilyWorkspace as getFamilyWorkspace } from "@/lib/family-page";
+import { getCaregiverMessages } from "@/lib/caregiver-panel";
+import { requireFamilyWorkspace } from "@/lib/family-page";
 import { requireCaregiverSession } from "@/lib/page-auth";
 import { getCaregiverDisplayName } from "@/lib/session";
 
-export default async function CompanionPage() { const caregiver = await requireCaregiverSession("/companion"); const workspace = await getFamilyWorkspace(caregiver.id); return <PanelShell currentPath="/companion" title="温暖陪伴" description="留言、回忆和每一次认真回应" caregiverLabel={getCaregiverDisplayName(caregiver)}><div className="card"><Link className="list-row" href="/messages"><MessageCircle /><span className="row-main"><span className="row-title">双向留言</span><span className="row-meta">家人问候由数字人口播，长辈口述实时送达</span></span></Link><Link className="list-row" href="/activity"><MessagesSquare /><span className="row-main"><span className="row-title">陪伴动态</span><span className="row-meta">查看数字人对话和智能服务记录</span></span></Link><div className="list-row"><BookHeart /><span className="row-main"><span className="row-title">家庭记忆册</span><span className="row-meta">数据结构已预留，作为下一阶段增强功能</span></span></div></div><section className="card card-pad"><h2 style={{ marginTop: 0 }}>本周家庭连接</h2><p className="timeline-body">家庭发布了 {workspace.posts.length} 条动态，留下 {workspace.memos.length} 条共同记忆与备忘。</p></section></PanelShell>; }
+export const dynamic = "force-dynamic";
+
+export default async function CompanionPage() {
+  const caregiver = await requireCaregiverSession("/companion");
+  const [workspace, messageOverview] = await Promise.all([
+    requireFamilyWorkspace(caregiver.id),
+    getCaregiverMessages(caregiver.id),
+  ]);
+
+  return (
+    <PanelShell
+      currentPath="/companion"
+      title="温暖陪伴"
+      description="留言、回忆和每一次认真回应"
+      caregiverLabel={getCaregiverDisplayName(caregiver)}
+      unreadCount={messageOverview.unreadIncomingCount}
+    >
+      <section className="card">
+        <Link className="list-row feature-row" href="/messages">
+          <span className="feature-icon"><MessageCircle size={19} strokeWidth={1.8} /></span>
+          <span className="row-main">
+            <span className="row-title">双向留言</span>
+            <span className="row-meta">家人问候由数字人口播，长辈口述实时送达</span>
+          </span>
+          <span style={{ display: "flex", alignItems: "center", gap: 6 }}>
+            {messageOverview.unreadIncomingCount > 0 ? <span className="count-badge">{messageOverview.unreadIncomingCount}</span> : null}
+            <ChevronRight className="chevron" size={16} strokeWidth={2} />
+          </span>
+        </Link>
+        <Link className="list-row feature-row" href="/activity">
+          <span className="feature-icon olive"><MessagesSquare size={19} strokeWidth={1.8} /></span>
+          <span className="row-main">
+            <span className="row-title">陪伴动态</span>
+            <span className="row-meta">查看数字人对话和智能服务记录</span>
+          </span>
+          <ChevronRight className="chevron" size={16} strokeWidth={2} />
+        </Link>
+        <div className="list-row feature-row feature-disabled">
+          <span className="feature-icon muted"><Heart size={19} strokeWidth={1.8} /></span>
+          <span className="row-main">
+            <span className="row-title">家庭记忆册</span>
+            <span className="row-meta">收藏长辈的语音与照片故事</span>
+          </span>
+          <span className="member-role">即将上线</span>
+        </div>
+      </section>
+
+      <section>
+        <div className="section-title"><h2>本周家庭连接</h2></div>
+        <div className="stats" style={{ gridTemplateColumns: "repeat(3, 1fr)" }}>
+          <div className="stat accent"><strong>{workspace.posts.length}</strong><span>家庭动态</span></div>
+          <div className="stat"><strong>{workspace.memos.length}</strong><span>共同备忘</span></div>
+          <div className="stat"><strong>{messageOverview.messages.length}</strong><span>留言往来</span></div>
+        </div>
+        <p className="muted-note" style={{ margin: "10px 2px 0" }}>数字人每天会把家人的问候念给长辈听，长辈的回应会同步到留言板。</p>
+      </section>
+    </PanelShell>
+  );
+}