From bbfc055c21551a08b2599d3f5995ccc9060289bb Mon Sep 17 00:00:00 2001 From: feie9454 Date: Sun, 19 Jul 2026 19:45:32 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96ui?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- DESIGN_SYSTEM.md | 50 ++-- app/care/page.tsx | 73 +++++- app/companion/page.tsx | 66 +++++- app/family/page.tsx | 75 +++++- app/globals.css | 241 ++++++++++++------- app/guard/page.tsx | 100 +++++++- app/layout.tsx | 2 +- app/settings/page.tsx | 23 +- components/family-guard-actions.tsx | 345 +++++++++++++++++++++++++--- components/panel-shell.tsx | 13 +- components/pwa-controls.tsx | 325 +++++++------------------- lib/caregiver-panel.ts | 28 ++- 12 files changed, 910 insertions(+), 431 deletions(-) diff --git a/DESIGN_SYSTEM.md b/DESIGN_SYSTEM.md index 098571a..8ff3c1a 100644 --- a/DESIGN_SYSTEM.md +++ b/DESIGN_SYSTEM.md @@ -1,50 +1,52 @@ # 安智伴家属端设计规范 v2 -本规范以移动版原型为唯一视觉基准，设计目标是「安静、可信、清晰」：减少装饰，优先呈现长辈状态、留言与陪伴动态。 +本规范以 2026-07-19 最新移动版原型为唯一视觉基准，设计目标是「安静、可信、清晰」。保留暖纸底色与铜橙主色，优先呈现长辈状态、家庭协作和可执行动作。 ## 画布与布局 -- 移动端内容宽度：`100%`，最大 `430px`；原型验收尺寸为 `390 × 844`。 -- 页面背景：`#F4F3F1`；桌面居中画布：`#E9E7E3`。 -- 页面水平留白：`14px`；模块垂直间距：`12px`，首页可用 `14px`。 -- 主页面预留 `84px` 底部导航空间；详情页使用顶部返回栏，不显示底部导航。 +- 移动端内容宽度：`100%`，最大 `430px`；原型画板为 `430 × 912px`。 +- 页面背景：`#F5F4F2`；桌面居中画布：`#E7E4DF`。 +- 页面水平留白：`18px`；主模块垂直间距：`18px`。 +- 主页面顶部留白 `22px`，底部为五项固定导航，内容预留 `110px`。 +- 桌面端画板圆角 `30px`，移动端贴合视口，不保留外部装饰。 ## 颜色 | 语义 | 值 | 用途 | | --- | --- | --- | -| 主文字 | `#201D1A` | 标题、正文、深色按钮 | +| 主文字 | `#211E1A` | 标题、正文、深色按钮 | | 次文字 | `#3D3833` | 列表正文 | -| 辅助文字 | `#8A857E` | 时间、状态、说明 | -| 弱辅助文字 | `#B3AEA6` | 次级时间、图标 | +| 辅助文字 | `#8B857C` | 时间、状态、说明 | +| 弱辅助文字 | `#B5AFA6` | 次级时间、图标 | | 品牌强调 | `#C05A1E` | 主按钮、未读、当前导航 | | 成功/在线 | `#3F9D63` | 在线状态、成功反馈 | -| 危险操作 | `#B4482C` | 退出、解绑 | -| 分隔线 | `rgba(32,29,26,.08)` | 卡片与列表分隔 | +| 危险操作 | `#B4482C` | 退出、风险状态 | +| 橄榄辅助 | `#65765A` | 设备、陪伴类图标 | +| 分隔线 | `rgba(33,30,26,.08)` | 卡片与列表分隔 | -所有值均定义在 `app/globals.css` 的 CSS 变量中，页面不得自行引入新的近似色。 +所有值均定义在 `app/globals.css`，页面不要自行引入近似色。 ## 字体与信息层级 - 字体栈：系统无衬线字体，中文优先苹方、冬青黑体、微软雅黑。 -- 页面标题：`20px / 700`；详情标题：`16px / 700`。 -- 区块标题：`14px / 700`；列表正文：`14px / 1.5`。 -- 元信息：`11–12px`；数字指标：`18–20px / 700`。 -- 不使用全大写眉题、衬线展示字体或大面积超大标题。 +- 页面标题：`21px / 700`；详情标题：`16px / 700`。 +- 区块标题：`15px / 700`；列表正文：`13–14px / 1.6`。 +- 元信息：`11.5–12.5px`；数字指标：`21px / 700`。 ## 组件规则 -- 卡片：白色背景、`12px` 圆角、`1px` 弱边框，不使用重阴影。 -- 列表：左右 `14px`、上下 `11–13px`；列表内部使用弱分隔线。 -- 按钮：高度 `40px`，圆角 `10px`；小按钮高度 `32px`、圆角 `8px`。 -- 输入框：高度 `44px`，圆角 `10px`；聚焦时使用品牌色边框与轻微外环。 -- 标签：仅用于「重要」等高价值状态，字号 `10px`，浅品牌色背景。 -- 底部导航：固定四项——概览、留言、设备、我的；当前项使用品牌色。 -- 分段控件：浅灰底，选中项为白底并带极轻阴影。 +- 卡片：白色背景、`14px` 圆角、`1px` 弱边框，不使用重阴影。 +- 列表：左右 `16px`、上下 `13px`，内部使用弱分隔线。 +- 主按钮与输入框：统一 `44px` 高、`10–11px` 圆角。 +- 小按钮：`32px` 高、`8px` 圆角。 +- 表单字段必须有标签；下拉框隐藏系统箭头并使用统一箭头。 +- 标签只用于重要状态，使用浅品牌色或浅成功色背景。 +- 底部导航固定五项：守护、家庭、照护、陪伴、我的。 +- 照护页使用浅灰分段控件，选中项为白底并带极轻阴影。 ## 交互与可访问性 - 页面跳转使用 Next.js `Link`，保留客户端导航与预取能力。 -- 可点击区域不小于 `32px`；主要操作不小于 `40px`。 +- 主要点击区域不小于 `40px`，小型操作不小于 `32px`。 - 状态不能只依赖颜色，在线、未读、重要均同时提供文字或数量。 -- 动效只用于导航进度、扫码线和必要反馈；尊重系统减少动态设置。 +- 动效仅用于在线呼吸点、导航进度和必要反馈，并尊重系统减少动态设置。 diff --git a/app/care/page.tsx b/app/care/page.tsx index c23d71d..bbcdb29 100644 --- a/app/care/page.tsx +++ b/app/care/page.tsx @@ -1,3 +1,5 @@ +import Link from "next/link"; + import { MedicationForm, MemoForm, TaskActions, TaskForm } from "@/components/family-guard-actions"; import { PanelShell } from "@/components/panel-shell"; import { requireFamilyWorkspace } from "@/lib/family-page"; @@ -6,10 +8,71 @@ import { requireCaregiverSession } from "@/lib/page-auth"; import { getCaregiverDisplayName } from "@/lib/session"; export const dynamic = "force-dynamic"; + export default async function CarePage({ searchParams }: PageProps<"/care">) { - const caregiver = await requireCaregiverSession("/care"); const workspace = await requireFamilyWorkspace(caregiver.id); const tab = String((await searchParams).tab || "tasks"); const uuid = workspace.elderProfile.elderDevice.deviceUuid; - return -
任务用药备忘
- {tab === "medications" ? <>

用药计划

仅提醒与记录，不替代医嘱
{workspace.medicationPlans.length ? workspace.medicationPlans.map((plan) =>
{plan.name}{plan.active ? "进行中" : "已暂停"}

每次 {plan.dosage} · {JSON.parse(plan.timesJson).join("、")}{plan.instructions ? ` · ${plan.instructions}` : ""}

信息来源：{plan.source === "PRESCRIPTION" ? "医生处方" : plan.source === "PACKAGE_LABEL" ? "药盒标签" : "家属录入"}

) :
还没有用药计划。
}
: tab === "memos" ? <>

家庭备忘录

{workspace.memos.length ? workspace.memos.map((memo) =>
{memo.title}{memo.priority === "PINNED" ? "长期置顶" : memo.priority === "IMPORTANT" ? "重要" : "普通"}

{memo.content}

{memo.visibility === "FAMILY_ONLY" ? "仅家人可见" : "可由数字人告诉长辈"}

) :
还没有家庭备忘。
}
: <>

照护交接

{workspace.tasks.length ? workspace.tasks.map((task) =>
{task.title}{task.dueAt ? formatDateTime(task.dueAt) : "未设期限"}

{task.description || "等待家人认领"}

{task.assignedTo ? `负责人：${task.assignedTo.nickname || task.assignedTo.username || "家人"}` : "尚未认领"}

) :
还没有照护任务。
}
} - ; + const caregiver = await requireCaregiverSession("/care"); + const workspace = await requireFamilyWorkspace(caregiver.id); + const tab = String((await searchParams).tab || "tasks"); + const deviceUuid = workspace.elderProfile.elderDevice.deviceUuid; + + return ( + +
+ 任务 + 用药 + 备忘 +
+ + {tab === "medications" ? ( + <> + +
+

用药计划

仅提醒与记录，不替代医嘱
+
+ {workspace.medicationPlans.length ? workspace.medicationPlans.map((plan) => ( +
+
{plan.name}{plan.active ? "进行中" : "已暂停"}
+

每次 {plan.dosage} · {JSON.parse(plan.timesJson).join("、")}{plan.instructions ? ` · ${plan.instructions}` : ""}

+

信息来源：{plan.source === "PRESCRIPTION" ? "医生处方" : plan.source === "PACKAGE_LABEL" ? "药盒标签" : "家属录入"}

+
+ )) :
还没有用药计划。
} +
+
+ + ) : tab === "memos" ? ( + <> + +
+

家庭备忘录

+
+ {workspace.memos.length ? workspace.memos.map((memo) => ( +
+
{memo.title}{memo.priority === "PINNED" ? "长期置顶" : memo.priority === "IMPORTANT" ? "重要" : "普通"}
+

{memo.content}

+

{memo.visibility === "FAMILY_ONLY" ? "仅家人可见" : "可由数字人告诉长辈"}

+
+ )) :
还没有家庭备忘。
} +
+
+ + ) : ( + <> + +
+

照护交接

认领后全家可见
+
+ {workspace.tasks.length ? workspace.tasks.map((task) => ( +
+
{task.title}{task.dueAt ? formatDateTime(task.dueAt) : "未设期限"}
+

{task.description || "等待家人认领"}

+

{task.assignedTo ? `负责人：${task.assignedTo.nickname || task.assignedTo.username || "家人"}` : "尚未认领"}

+ +
+ )) :
还没有照护任务。
} +
+
+ + )} + + ); } diff --git a/app/companion/page.tsx b/app/companion/page.tsx index 16aae14..a5bb4bd 100644 --- a/app/companion/page.tsx +++ b/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
双向留言家人问候由数字人口播，长辈口述实时送达陪伴动态查看数字人对话和智能服务记录
家庭记忆册数据结构已预留，作为下一阶段增强功能

本周家庭连接

家庭发布了 {workspace.posts.length} 条动态，留下 {workspace.memos.length} 条共同记忆与备忘。

; } +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 ( + +
+ + + + 双向留言 + 家人问候由数字人口播，长辈口述实时送达 + + + {messageOverview.unreadIncomingCount > 0 ? {messageOverview.unreadIncomingCount} : null} + + + + + + + 陪伴动态 + 查看数字人对话和智能服务记录 + + + +
+ + + 家庭记忆册 + 收藏长辈的语音与照片故事 + + 即将上线 +
+
+ +
+

本周家庭连接

+
+
{workspace.posts.length}家庭动态
+
{workspace.memos.length}共同备忘
+
{messageOverview.messages.length}留言往来
+
+

数字人每天会把家人的问候念给长辈听，长辈的回应会同步到留言板。

+
+ + ); +} diff --git a/app/family/page.tsx b/app/family/page.tsx index 081b905..6c925ea 100644 --- a/app/family/page.tsx +++ b/app/family/page.tsx @@ -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 - -

家庭动态

{workspace.posts.length ? workspace.posts.map((post) =>
{post.elderAuthored ? `${workspace.elderProfile.preferredName}通过安智伴说` : post.author?.nickname || post.author?.username || "家里人"}{formatDateTime(post.createdAt)}

{post.content}

{post.visibility === "FAMILY_ONLY" ? "仅家人" : post.visibility === "ELDER_ONLY" ? "只给长辈" : "全家可见"}
) :
发出第一条家庭动态，让关心流动起来。
}
-

家庭成员

{workspace.memberships.map((member) =>
{(member.caregiver.nickname || member.caregiver.username || "家").slice(-1)}{member.caregiver.nickname || member.caregiver.username || "家庭成员"}{member.relationLabel ? ` · ${member.relationLabel}` : ""}{roleLabel[member.role]}{member.dutyOrder ? ` · 值守顺序 ${member.dutyOrder}` : ""}
)}
-

邀请家人

链接 24 小时有效
- ; + const caregiver = await requireCaregiverSession("/family"); + const workspace = await requireFamilyWorkspace(caregiver.id); + const deviceUuid = workspace.elderProfile.elderDevice.deviceUuid; + + return ( + + + +
+

家庭动态

+
+ {workspace.posts.length ? workspace.posts.map((post) => ( +
+
+ {post.elderAuthored ? `${workspace.elderProfile.preferredName}通过安智伴说` : post.author?.nickname || post.author?.username || "家里人"} + {formatDateTime(post.createdAt)} +
+

{post.content}

+ + {post.visibility === "FAMILY_ONLY" ? "仅家人" : post.visibility === "ELDER_ONLY" ? "只给长辈" : "全家可见"} + +
+ )) :
发出第一条家庭动态，让关心流动起来。
} +
+
+ +
+

家庭成员

+
+ {workspace.memberships.map((member, index) => { + const name = member.caregiver.nickname || member.caregiver.username || "家庭成员"; + return ( +
+ {name.slice(-1)} + + {name} + + {member.relationLabel || "家人"}{member.dutyOrder ? ` · 值守顺序 ${member.dutyOrder}` : ""} + + + {roleLabel[member.role]} +
+ ); + })} +
+
+ +
+

邀请家人

链接 24 小时有效
+ +
+ + ); } diff --git a/app/globals.css b/app/globals.css index e068859..ba59c9b 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,19 +1,19 @@ @import "tailwindcss"; :root { - --canvas: #e9e7e3; - --paper: #f4f3f1; + --canvas: #e7e4df; + --paper: #f5f4f2; --surface: #ffffff; --surface-soft: #faf9f8; - --ink: #201d1a; + --ink: #211e1a; --ink-soft: #3d3833; - --muted: #8a857e; - --muted-light: #b3aea6; - --line: rgba(32, 29, 26, 0.08); - --line-strong: rgba(32, 29, 26, 0.14); + --muted: #8b857c; + --muted-light: #b5afa6; + --line: rgba(33, 30, 26, 0.08); + --line-strong: rgba(33, 30, 26, 0.15); --accent: #c05a1e; --accent-hover: #96431a; - --accent-soft: rgba(192, 90, 30, 0.1); + --accent-soft: rgba(192, 90, 30, 0.09); --copper: var(--accent); --copper-deep: var(--accent-hover); --paper-soft: var(--surface-soft); @@ -23,7 +23,7 @@ --danger: #b4482c; --radius-sm: 8px; --radius-md: 10px; - --radius-lg: 12px; + --radius-lg: 14px; --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; --font-display: var(--font-body); } @@ -40,6 +40,7 @@ body { margin: 0; color: var(--ink); background: var(--canvas); font-family: var a { color: inherit; text-decoration: none; } button, input, textarea, select { font: inherit; } button { cursor: pointer; } +button:disabled { cursor: not-allowed; opacity: .6; } textarea { resize: none; } *::-webkit-scrollbar { display: none; } ::selection { background: rgba(192, 90, 30, 0.18); } @@ -52,81 +53,157 @@ textarea { resize: none; } margin: 0 auto; overflow: hidden; background: var(--paper); - box-shadow: 0 0 0 1px rgba(32,29,26,.03); + box-shadow: 0 0 0 1px rgba(33, 30, 26, .03); } -.app-content { min-height: 100dvh; padding: 14px 14px 84px; } -.app-content.detail { padding-top: 0; padding-bottom: 24px; } -.app-stack { display: flex; flex-direction: column; gap: 12px; } -.page-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:2px 2px 0; } -.page-heading h1 { margin:0; font-size:20px; line-height:1.35; font-weight:700; letter-spacing:.01em; } -.page-heading p { margin:3px 0 0; color:var(--muted); font-size:12px; line-height:1.5; } -.avatar { display:flex; width:34px; height:34px; flex:none; align-items:center; justify-content:center; border:0; border-radius:50%; background:var(--ink); color:var(--paper); font-size:14px; font-weight:600; } -.detail-header { position:sticky; top:0; z-index:5; display:flex; min-height:54px; align-items:center; gap:6px; padding:10px 0; background:rgba(244,243,241,.96); backdrop-filter:blur(10px); } -.detail-header h1 { margin:0; flex:1; font-size:16px; font-weight:700; } -.back-button { display:flex; width:30px; height:30px; align-items:center; justify-content:center; border:0; background:transparent; color:var(--ink); } -.card { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); } -.card-pad { padding:13px 14px; } -.list-row { display:flex; width:100%; align-items:flex-start; gap:10px; padding:11px 14px; border:0; border-top:1px solid var(--line); background:transparent; color:var(--ink); text-align:left; } -.list-row:first-child { border-top:0; } -.list-row:hover { background:var(--surface-soft); } -.row-main { flex:1; min-width:0; } -.row-title { display:block; color:var(--ink); font-size:14px; line-height:1.5; font-weight:600; } -.row-meta { display:flex; align-items:center; gap:6px; margin-top:4px; color:var(--muted); font-size:12px; line-height:1.45; } -.dot { width:7px; height:7px; flex:none; margin-top:6px; border-radius:50%; background:var(--accent); } -.dot.online { background:var(--success); } -.dot.offline { background:#c7c2ba; } -.tag { display:inline-flex; align-items:center; border-radius:4px; padding:1px 5px; background:var(--accent-soft); color:var(--accent); font-size:10px; font-weight:600; } -.section-title { display:flex; align-items:baseline; justify-content:space-between; padding:0 2px 8px; } -.section-title h2 { margin:0; font-size:14px; font-weight:700; } -.section-title a { color:var(--accent); font-size:13px; font-weight:500; } -.stats { display:grid; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); } -.stat { padding:11px 4px; text-align:center; } -.stat + .stat { border-left:1px solid var(--line); } -.stat strong { display:block; font-size:20px; line-height:1.2; font-weight:700; } -.stat:first-child strong, .stat.accent strong { color:var(--accent); } -.stat span { display:block; margin-top:3px; color:var(--muted); font-size:11px; } -.button-row { display:flex; gap:10px; } -.btn { display:inline-flex; min-height:40px; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line-strong); border-radius:var(--radius-md); padding:0 14px; background:var(--surface); color:var(--ink); font-size:13.5px; font-weight:600; } -.btn:hover { background:var(--surface-soft); } -.btn.primary { border-color:var(--accent); background:var(--accent); color:#fff; } -.btn.primary:hover { background:var(--accent-hover); } -.btn.dark { border-color:var(--ink); background:var(--ink); color:#fff; } -.btn.small { min-height:32px; border-radius:8px; padding:0 12px; font-size:13px; } -.btn.block { width:100%; } -.segment { display:flex; padding:2px; border-radius:9px; background:rgba(32,29,26,.06); } -.segment a, .segment button { flex:1; height:30px; border:0; border-radius:7px; background:transparent; color:var(--muted); font-size:13px; font-weight:600; text-align:center; line-height:30px; } -.segment .active { background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.06); } -.field { width:100%; height:44px; border:1px solid rgba(32,29,26,.12); border-radius:10px; padding:0 13px; outline:0; background:#fff; color:var(--ink); font-size:14px; } -.field:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } -textarea.field { height:auto; min-height:84px; padding:9px 11px; line-height:1.5; background:var(--surface-soft); } -.empty { padding:34px 20px; color:var(--muted); text-align:center; font-size:13px; line-height:1.7; } -.muted-note { margin:0; color:var(--muted-light); font-size:11.5px; line-height:1.6; } -.bottom-nav { position:fixed; z-index:20; right:0; bottom:0; left:0; display:grid; grid-template-columns:repeat(4,1fr); width:100%; max-width:430px; margin:0 auto; padding:6px 0 calc(10px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(255,255,255,.96); backdrop-filter:blur(10px); } -.nav-item { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:4px 0; color:var(--muted); font-size:10px; font-weight:600; } -.nav-item.active { color:var(--accent); } -.nav-badge { position:absolute; top:0; left:calc(50% + 6px); min-width:16px; height:16px; border-radius:8px; padding:0 4px; background:var(--accent); color:#fff; font-size:10px; line-height:16px; text-align:center; } -.device-icon { display:flex; width:40px; height:40px; flex:none; align-items:center; justify-content:center; border-radius:10px; background:rgba(192,90,30,.08); color:var(--accent); } -.timeline-item { padding:11px 14px; border-top:1px solid var(--line); } -.timeline-item:first-child { border-top:0; } -.timeline-top { display:flex; align-items:baseline; gap:8px; color:var(--muted); font-size:12px; font-weight:600; } -.timeline-time { margin-left:auto; color:var(--muted-light); font-size:11.5px; font-weight:400; white-space:nowrap; } -.timeline-body { margin:4px 0 0; color:var(--ink-soft); font-size:13.5px; line-height:1.55; } -.settings-controls > * { border:1px solid var(--line)!important; border-radius:12px!important; background:#fff!important; padding:14px!important; box-shadow:none!important; } -.settings-controls h2, .settings-controls h3 { font-family:var(--font-body)!important; font-size:15px!important; line-height:1.45!important; } -.settings-controls p { font-size:12px!important; line-height:1.65!important; } -.device-manage summary { list-style:none; } -.device-manage[open] summary { margin-bottom:10px; } -.device-manage > :not(summary) { border:1px solid var(--line)!important; border-radius:12px!important; background:#fff!important; padding:14px!important; box-shadow:none!important; } -.scan-panel > div { border:0!important; border-radius:0!important; background:transparent!important; padding:0!important; box-shadow:none!important; } -.scan-panel > div > p:first-child, .scan-panel > div > h2, .scan-panel > div > h2 + p { display:none!important; } -.scan-panel video { border-radius:14px; } +.app-content { min-height: 100dvh; padding: 22px 18px 110px; } +.app-content.detail { padding-top: 0; padding-bottom: 28px; } +.app-stack { display: flex; flex-direction: column; gap: 18px; } +.page-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 2px; } +.page-heading h1 { margin: 0; font-size: 21px; line-height: 1.35; font-weight: 700; letter-spacing: .01em; } +.page-heading p { margin: 4px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; } +.avatar { display: flex; width: 36px; height: 36px; flex: none; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 600; } +.detail-header { position: sticky; top: 0; z-index: 5; display: flex; min-height: 58px; align-items: center; gap: 7px; padding: 11px 0; background: rgba(245, 244, 242, .96); backdrop-filter: blur(10px); } +.detail-header h1 { margin: 0; flex: 1; font-size: 16px; font-weight: 700; } +.back-button { display: flex; width: 32px; height: 32px; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ink); } -@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} } -@keyframes route-progress-slide { 0%{transform:translateX(-140%)} 100%{transform:translateX(240%)} } -.route-progress-bar { animation:route-progress-slide 1.15s ease-in-out infinite; background:var(--accent)!important; } +.card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); } +.card-pad { padding: 15px 16px; } +.list-row { display: flex; width: 100%; align-items: flex-start; gap: 11px; padding: 12px 16px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; } +.list-row:first-child { border-top: 0; } +.list-row:hover { background: var(--surface-soft); } +.row-main { flex: 1; min-width: 0; } +.row-title { display: block; color: var(--ink); font-size: 14px; line-height: 1.5; font-weight: 600; } +.row-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.5; } +.dot { width: 7px; height: 7px; flex: none; margin-top: 6px; border-radius: 50%; background: var(--accent); } +.dot.online { background: var(--success); animation: pulse 2.4s ease-in-out infinite; } +.dot.offline { background: #c7c2ba; } +.tag { display: inline-flex; align-items: center; border-radius: 5px; padding: 2px 7px; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; } +.tag.success { background: rgba(63, 157, 99, .1); color: var(--success); } +.section-title { display: flex; align-items: baseline; justify-content: space-between; padding: 0 2px 9px; } +.section-title h2 { margin: 0; font-size: 15px; font-weight: 700; } +.section-title > span { color: var(--muted-light); font-size: 12px; } +.section-title a { color: var(--accent); font-size: 12.5px; font-weight: 600; } + +.stats { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); } +.stat { padding: 13px 4px; text-align: center; } +.stat + .stat { border-left: 1px solid var(--line); } +.stat strong { display: block; font-size: 21px; line-height: 1.2; font-weight: 700; } +.stat:first-child strong, .stat.accent strong { color: var(--accent); } +.stat span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; } + +.button-row { display: flex; gap: 8px; } +.btn { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 0 13px; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; } +.btn:hover { background: var(--surface-soft); } +.btn.primary { border-color: var(--accent); background: var(--accent); color: #fff; } +.btn.primary:hover { border-color: var(--accent-hover); background: var(--accent-hover); } +.btn.dark { border-color: var(--ink); background: var(--ink); color: #fff; } +.btn.small { min-height: 32px; border-radius: 8px; padding: 0 13px; font-size: 12.5px; } +.btn.block { width: 100%; } +.btn.muted { color: var(--muted); } + +.segment { display: flex; gap: 2px; padding: 3px; border-radius: 11px; background: rgba(33, 30, 26, .06); } +.segment a, .segment button { flex: 1; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; text-align: center; line-height: 34px; } +.segment .active { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); } + +.field-label { display: block; margin: 0 0 7px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .02em; } +.field { width: 100%; height: 44px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 0 13px; outline: 0; background: #fff; color: var(--ink); font-size: 14px; } +.field::placeholder { color: var(--muted-light); } +.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } +textarea.field { height: auto; min-height: 78px; padding: 11px 13px; line-height: 1.6; background: var(--surface-soft); } +select.field { + appearance: none; + padding-right: 34px; + cursor: pointer; + background-color: #fff; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%238b857c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); + background-position: right 11px center; + background-repeat: no-repeat; +} +.form-stack { display: flex; flex-direction: column; gap: 10px; } +.form-grid { display: grid; gap: 10px; } +.form-grid.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } +.form-grid.action { grid-template-columns: minmax(0, 1fr) 110px; } +.form-grid.publish { grid-template-columns: minmax(0, 1fr) 96px; } +.form-grid.memo-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 82px; } +.form-notice { margin: 9px 0 0; color: var(--success); font-size: 12px; line-height: 1.5; } + +.elder-status { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); } +.elder-status-main { display: flex; align-items: center; gap: 12px; padding: 15px 16px; } +.elder-avatar { display: flex; width: 46px; height: 46px; flex: none; align-items: center; justify-content: center; border-radius: 50%; background: rgba(101, 118, 90, .12); color: var(--olive); font-size: 18px; font-weight: 700; } +.elder-name { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; } +.online-label { font-size: 12px; font-weight: 600; } +.elder-meta { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; } +.checkin-action { border-top: 1px solid var(--line); padding: 12px 16px 14px; } +.checkin-action .form-notice { text-align: center; } + +.timeline-item { padding: 13px 16px; border-top: 1px solid var(--line); } +.timeline-item:first-child { border-top: 0; } +.timeline-top { display: flex; align-items: baseline; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 600; } +.timeline-top.strong { color: var(--ink); font-size: 13.5px; font-weight: 700; } +.timeline-time { margin-left: auto; color: var(--muted-light); font-size: 11.5px; font-weight: 400; white-space: nowrap; } +.timeline-body { margin: 5px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.6; } +.timeline-item > .row-meta { margin-top: 5px; } +.timeline-item > .button-row { margin-top: 10px; } +.alert-title { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-size: 13.5px; font-weight: 700; } +.alert-title.red { color: #b33a2b; } + +.member-avatar { display: flex; width: 36px; height: 36px; flex: none; align-items: center; justify-content: center; border-radius: 50%; font-size: 14px; font-weight: 700; } +.member-role { flex: none; border-radius: 5px; padding: 2px 7px; background: rgba(33, 30, 26, .05); color: var(--muted); font-size: 11px; font-weight: 600; } +.feature-row { align-items: center; gap: 12px; padding: 14px 16px; } +.feature-icon { display: flex; width: 40px; height: 40px; flex: none; align-items: center; justify-content: center; border-radius: 11px; background: var(--accent-soft); color: var(--accent); } +.feature-icon.olive { background: rgba(101, 118, 90, .1); color: var(--olive); } +.feature-icon.muted { background: rgba(33, 30, 26, .05); color: var(--muted); } +.feature-disabled { opacity: .55; } +.chevron { flex: none; color: var(--muted-light); } +.count-badge { min-width: 18px; height: 18px; border-radius: 9px; padding: 0 5px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } + +.settings-profile { display: flex; align-items: center; gap: 13px; padding: 16px; } +.settings-profile .avatar { width: 48px; height: 48px; font-size: 18px; } +.settings-row { display: flex; width: 100%; align-items: center; gap: 12px; padding: 13px 16px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; } +.settings-row:first-child { border-top: 0; } +.settings-row:hover { background: var(--surface-soft); } +.settings-icon { display: flex; width: 36px; height: 36px; flex: none; align-items: center; justify-content: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent); } +.settings-icon.olive { background: rgba(101, 118, 90, .1); color: var(--olive); } +.settings-icon.muted { background: rgba(33, 30, 26, .05); color: var(--muted); } +.toggle { width: 46px; height: 27px; flex: none; position: relative; border: 0; border-radius: 14px; background: rgba(33, 30, 26, .18); transition: background .2s; } +.toggle.on { background: var(--success); } +.toggle-knob { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: left .2s; } +.toggle.on .toggle-knob { left: 22px; } + +.empty { padding: 34px 20px; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.7; } +.muted-note { margin: 0; color: var(--muted-light); font-size: 11.5px; line-height: 1.6; } +.bottom-nav { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; max-width: 430px; margin: 0 auto; padding: 8px 4px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); } +.nav-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px 0; color: #9a948b; font-size: 10.5px; font-weight: 600; } +.nav-item.active { color: var(--accent); } +.nav-badge { position: absolute; top: 1px; left: calc(50% + 7px); min-width: 16px; height: 16px; border-radius: 8px; padding: 0 4px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } +.device-icon { display: flex; width: 40px; height: 40px; flex: none; align-items: center; justify-content: center; border-radius: 10px; background: rgba(192, 90, 30, .08); color: var(--accent); } + +.settings-controls > * { border: 1px solid var(--line) !important; border-radius: 14px !important; background: #fff !important; padding: 15px 16px !important; box-shadow: none !important; } +.settings-controls h2, .settings-controls h3 { font-family: var(--font-body) !important; font-size: 15px !important; line-height: 1.45 !important; } +.settings-controls p { font-size: 12px !important; line-height: 1.65 !important; } +.device-manage summary { list-style: none; } +.device-manage[open] summary { margin-bottom: 10px; } +.device-manage > :not(summary) { border: 1px solid var(--line) !important; border-radius: 14px !important; background: #fff !important; padding: 15px 16px !important; box-shadow: none !important; } +.scan-panel > div { border: 0 !important; border-radius: 0 !important; background: transparent !important; padding: 0 !important; box-shadow: none !important; } +.scan-panel > div > p:first-child, .scan-panel > div > h2, .scan-panel > div > h2 + p { display: none !important; } +.scan-panel video { border-radius: 14px; } + +@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } } +@keyframes route-progress-slide { 0% { transform: translateX(-140%); } 100% { transform: translateX(240%); } } +.route-progress-bar { animation: route-progress-slide 1.15s ease-in-out infinite; background: var(--accent) !important; } + +@media (max-width: 390px) { + .form-grid.memo-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } + .form-grid.memo-actions .btn { grid-column: 1 / -1; } + .stats .stat strong { font-size: 19px; } +} @media (min-width: 700px) { - .app-frame { min-height:calc(100dvh - 32px); margin:16px auto; border-radius:18px; box-shadow:0 18px 60px rgba(32,29,26,.12); } - .app-content { min-height:calc(100dvh - 32px); } - .bottom-nav { bottom:16px; border-radius:0 0 18px 18px; } + .app-frame { min-height: calc(100dvh - 72px); margin: 36px auto; border-radius: 30px; box-shadow: 0 24px 70px rgba(33, 30, 26, .16), 0 0 0 1px rgba(33, 30, 26, .05); } + .app-content { min-height: calc(100dvh - 72px); } + .bottom-nav { bottom: 36px; border-radius: 0 0 30px 30px; } +} + +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } diff --git a/app/guard/page.tsx b/app/guard/page.tsx index 78d93be..c09d537 100644 --- a/app/guard/page.tsx +++ b/app/guard/page.tsx @@ -1,4 +1,5 @@ import { AlertTriangle, CheckCircle2, HeartPulse, PhoneCall } from "lucide-react"; + import { AlertActions, CheckInButton } from "@/components/family-guard-actions"; import { PanelShell } from "@/components/panel-shell"; import { requireFamilyWorkspace } from "@/lib/family-page"; @@ -7,17 +8,92 @@ import { requireCaregiverSession } from "@/lib/page-auth"; import { getCaregiverDisplayName } from "@/lib/session"; export const dynamic = "force-dynamic"; + export default async function GuardPage() { - const caregiver = await requireCaregiverSession("/guard"); const workspace = await requireFamilyWorkspace(caregiver.id); - const openAlerts = workspace.alerts.filter((a) => a.status === "OPEN" || a.status === "ACKNOWLEDGED"); - const todayDoses = workspace.medicationPlans.flatMap((p) => p.doses).filter((d) => d.scheduledFor.toDateString() === new Date().toDateString()); - const doneDoses = todayDoses.filter((d) => d.status === "TAKEN").length; - const openTasks = workspace.tasks.filter((t) => t.status !== "COMPLETED" && t.status !== "CANCELLED"); - const pendingCheckIns = workspace.checkIns.filter((c) => c.status === "PENDING"); - return -
{openAlerts.length}待处理提醒
{doneDoses}/{todayDoses.length}今日用药
{openTasks.length}照护事项
{pendingCheckIns.length}待报平安
- -

风险提醒

人工确认后再处置
{workspace.alerts.length ? workspace.alerts.map((alert) =>
{alert.title}{formatDateTime(alert.createdAt)}

{alert.summary}

{alert.claimedBy ? `已由 ${alert.claimedBy.nickname || alert.claimedBy.username || "家人"} 接手` : "尚未认领"}

) :

当前没有待处理的风险提醒
}
-

今日状态

设备最近在线{formatDateTime(workspace.elderProfile.elderDevice.lastSeenAt)}

仅根据终端在线和主动交互记录展示，不代表生命体征状态。

家庭值守

{workspace.memberships.filter((m) => m.emergencyPush).map((m) => m.caregiver.nickname || m.caregiver.username || "家人").join("、") || "尚未设置"}

- ; + const caregiver = await requireCaregiverSession("/guard"); + const workspace = await requireFamilyWorkspace(caregiver.id); + const elder = workspace.elderProfile; + const device = elder.elderDevice; + const lastSeenAt = device.lastSeenAt; + const isOnline = Boolean(lastSeenAt); + const openAlerts = workspace.alerts.filter((alert) => alert.status === "OPEN" || alert.status === "ACKNOWLEDGED"); + const today = new Date().toDateString(); + const todayDoses = workspace.medicationPlans.flatMap((plan) => plan.doses).filter((dose) => dose.scheduledFor.toDateString() === today); + const doneDoses = todayDoses.filter((dose) => dose.status === "TAKEN").length; + const openTasks = workspace.tasks.filter((task) => task.status !== "COMPLETED" && task.status !== "CANCELLED"); + const pendingCheckIns = workspace.checkIns.filter((checkIn) => checkIn.status === "PENDING"); + const dutyNames = workspace.memberships + .filter((membership) => membership.emergencyPush) + .map((membership) => membership.caregiver.nickname || membership.caregiver.username || "家人"); + + return ( + +
+
+ {elder.preferredName.slice(0, 1)} + + + {elder.preferredName} + + + {isOnline ? "在线" : "离线"} + + + + {isOnline ? `最近与数字人互动 · ${device.displayName || "长辈终端"}` : `最近在线：${formatDateTime(lastSeenAt)} · ${device.displayName || "长辈终端"}`} + + +
+ +
+ +
+
{openAlerts.length}待处理提醒
+
{doneDoses}/{todayDoses.length}今日用药
+
{openTasks.length}照护事项
+
{pendingCheckIns.length}待报平安
+
+ +
+

风险提醒

人工确认后再处置
+
+ {workspace.alerts.length ? workspace.alerts.map((alert) => ( +
+
+ + {alert.title} + + {formatDateTime(alert.createdAt)} +
+

{alert.summary}

+

{alert.claimedBy ? `已由 ${alert.claimedBy.nickname || alert.claimedBy.username || "家人"} 接手` : "尚未认领"}

+ +
+ )) : ( +

当前没有待处理的风险提醒
+ )} +
+
+ +
+

今日状态

+
+
+
设备最近在线{formatDateTime(lastSeenAt)}
+

仅根据终端在线和主动交互记录展示，不代表生命体征状态。

+
+
+
家庭值守
+

{dutyNames.length ? `${dutyNames.join("、")}已开启紧急推送` : "尚未设置家庭值守"}

+
+
+
+ + ); } diff --git a/app/layout.tsx b/app/layout.tsx index 0be7cf8..ffa8d52 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -31,7 +31,7 @@ export const metadata: Metadata = { }; export const viewport: Viewport = { - themeColor: "#F4F3F1", + themeColor: "#F5F4F2", }; export default function RootLayout({ diff --git a/app/settings/page.tsx b/app/settings/page.tsx index dac0682..9e07592 100644 --- a/app/settings/page.tsx +++ b/app/settings/page.tsx @@ -1,6 +1,7 @@ +import { ChevronRight } from "lucide-react"; + import { PanelShell } from "@/components/panel-shell"; import { PwaControls } from "@/components/pwa-controls"; -import { PushTestPanel } from "@/components/push-test-panel"; import { getCaregiverSettingsOverview } from "@/lib/caregiver-panel"; import { requireCaregiverSession } from "@/lib/page-auth"; import { getCaregiverDisplayName } from "@/lib/session"; @@ -13,17 +14,23 @@ export default async function SettingsPage() { const name = getCaregiverDisplayName(caregiver); return ( - -
- {name.slice(-1)} - {name}已绑定 {overview.deviceCount} 台设备 · {overview.pushSubscriptionCount} 台设备已开启提醒 + +
+ {name.slice(-1)} + + {name} + 已绑定 {overview.deviceCount} 台设备 · {overview.pushSubscriptionCount} 台设备已开启提醒 + +
-
-
+
+

通知与设备

+ +
- +

安智伴 · AI 数字人陪护 · 家属端 v2

 diff --git a/components/family-guard-actions.tsx b/components/family-guard-actions.tsx index 4ef16a2..6a728e0 100644 --- a/components/family-guard-actions.tsx +++ b/components/family-guard-actions.tsx @@ -1,73 +1,350 @@ "use client"; +import { ShieldCheck } from "lucide-react"; import { useRouter } from "next/navigation"; -import { FormEvent, useState } from "react"; +import { type FormEvent, useState } from "react"; async function api(path: string, method: string, body: Record) { - const response = await fetch(path, { method, headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) }); + const response = await fetch(path, { + method, + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(body), + }); const payload = await response.json().catch(() => ({})); if (!response.ok) throw new Error(payload.error || "操作失败，请稍后再试。"); return payload; } -function Notice({ text }: { text: string }) { return text ?

{text}

: null; } +function Notice({ text }: { text: string }) { + return text ?

{text}

: null; +} export function FamilyPostForm({ deviceUuid }: { deviceUuid: string }) { - const router = useRouter(); const [notice, setNotice] = useState(""); const [busy, setBusy] = useState(false); + const router = useRouter(); + const [notice, setNotice] = useState(""); + const [busy, setBusy] = useState(false); + async function submit(event: FormEvent) { - event.preventDefault(); setBusy(true); const form = new FormData(event.currentTarget); - try { await api("/api/family-feed", "POST", { deviceUuid, content: form.get("content"), visibility: form.get("visibility") }); event.currentTarget.reset(); setNotice("已发布到家庭动态。"); router.refresh(); } - catch (e) { setNotice(e instanceof Error ? e.message : "发布失败。"); } finally { setBusy(false); } + event.preventDefault(); + setBusy(true); + const form = new FormData(event.currentTarget); + try { + await api("/api/family-feed", "POST", { + deviceUuid, + content: form.get("content"), + visibility: form.get("visibility"), + }); + event.currentTarget.reset(); + setNotice("已发布到家庭动态。"); + router.refresh(); + } catch (error) { + setNotice(error instanceof Error ? error.message : "发布失败。"); + } finally { + setBusy(false); + } } - return