feat: standardize cms data views

components/ui/dialog.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+type DialogProps = {
+  open: boolean;
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  onClose: () => void;
+  className?: string;
+};
+
+export function Dialog({
+  open,
+  title,
+  description,
+  children,
+  footer,
+  onClose,
+  className,
+}: DialogProps): React.ReactElement | null {
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/32 p-3 backdrop-blur-sm sm:items-center">
+      <section
+        aria-modal="true"
+        className={cn(
+          "flex max-h-[92svh] w-full max-w-3xl flex-col overflow-hidden rounded-lg border bg-card shadow-xl",
+          className,
+        )}
+        role="dialog"
+      >
+        <header className="flex shrink-0 items-start justify-between gap-4 border-b p-5">
+          <div className="min-w-0">
+            <h2 className="text-lg font-semibold">{title}</h2>
+            {description ? <p className="mt-1 text-sm text-muted-foreground">{description}</p> : null}
+          </div>
+          <button
+            aria-label="关闭弹窗"
+            className="inline-flex size-10 shrink-0 items-center justify-center rounded-md border bg-background text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            onClick={onClose}
+            type="button"
+          >
+            <X className="size-4" aria-hidden="true" />
+          </button>
+        </header>
+        <div className="min-h-0 flex-1 overflow-y-auto p-5">{children}</div>
+        {footer ? <footer className="shrink-0 border-t bg-secondary/35 p-4">{footer}</footer> : null}
+      </section>
+    </div>
+  );
+}

modules/elders/components/EldersClient.tsx

@@ -1,15 +1,16 @@
 "use client";
 
 import { FormEvent, useMemo, useState } from "react";
-import { Edit3, Plus, Trash2, X } from "lucide-react";
+import { Edit3, Filter, Plus, Search, Trash2 } from "lucide-react";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Dialog } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import type { ApiResult } from "@/modules/core/server/api";
 import type { Permission } from "@/modules/core/types";
-import type { Elder, ElderInput } from "@/modules/elders/types";
+import type { CareLevel, Elder, ElderInput, ElderStatus } from "@/modules/elders/types";
 import { CARE_LEVEL_LABELS, ELDER_STATUS_LABELS, GENDER_LABELS } from "@/modules/elders/types";
 
 type EldersClientProps = {
@@ -30,6 +31,10 @@ const emptyInput: ElderInput = {
   medicalNotes: "",
 };
 
+const PAGE_SIZE = 8;
+const ALL_STATUS = "all";
+const ALL_CARE_LEVELS = "all";
+
 function elderToInput(elder: Elder): ElderInput {
   return {
     name: elder.name,
@@ -45,12 +50,53 @@ function elderToInput(elder: Elder): ElderInput {
   };
 }
 
+function formatDateTime(value: string): string {
+  return new Date(value).toLocaleString("zh-CN");
+}
+
+function getRiskLabel(elder: Elder): { label: string; variant: "danger" | "warning" | "success" } {
+  if (elder.careLevel === "intensive") {
+    return { label: "红色重点", variant: "danger" };
+  }
+
+  if (elder.status === "pending" || elder.careLevel === "assisted") {
+    return { label: "黄色关注", variant: "warning" };
+  }
+
+  return { label: "绿色稳定", variant: "success" };
+}
+
+function matchesFilters(
+  elder: Elder,
+  query: string,
+  statusFilter: ElderStatus | typeof ALL_STATUS,
+  careLevelFilter: CareLevel | typeof ALL_CARE_LEVELS,
+): boolean {
+  const normalizedQuery = query.trim().toLowerCase();
+  const matchesSearch =
+    normalizedQuery.length === 0 ||
+    [elder.name, elder.room, elder.bed, elder.primaryContact, elder.phone, elder.medicalNotes]
+      .join(" ")
+      .toLowerCase()
+      .includes(normalizedQuery);
+  const matchesStatus = statusFilter === ALL_STATUS || elder.status === statusFilter;
+  const matchesCareLevel = careLevelFilter === ALL_CARE_LEVELS || elder.careLevel === careLevelFilter;
+
+  return matchesSearch && matchesStatus && matchesCareLevel;
+}
+
 export function EldersClient({ initialElders, permissions }: EldersClientProps): React.ReactElement {
   const [elders, setElders] = useState(initialElders);
   const [editingId, setEditingId] = useState<string | null>(null);
   const [form, setForm] = useState<ElderInput>(emptyInput);
   const [message, setMessage] = useState("");
   const [isPending, setIsPending] = useState(false);
+  const [isFormOpen, setIsFormOpen] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<Elder | null>(null);
+  const [query, setQuery] = useState("");
+  const [statusFilter, setStatusFilter] = useState<ElderStatus | typeof ALL_STATUS>(ALL_STATUS);
+  const [careLevelFilter, setCareLevelFilter] = useState<CareLevel | typeof ALL_CARE_LEVELS>(ALL_CARE_LEVELS);
+  const [page, setPage] = useState(1);
 
   const canCreate = permissions.includes("elder:create");
   const canUpdate = permissions.includes("elder:update");
@@ -62,9 +108,19 @@ export function EldersClient({ initialElders, permissions }: EldersClientProps):
     const activeCount = elders.filter((elder) => elder.status === "active").length;
     const pendingCount = elders.filter((elder) => elder.status === "pending").length;
     const intensiveCount = elders.filter((elder) => elder.careLevel === "intensive").length;
-    return { activeCount, pendingCount, intensiveCount };
+    const warningCount = elders.filter((elder) => getRiskLabel(elder).variant !== "success").length;
+    return { activeCount, pendingCount, intensiveCount, warningCount };
   }, [elders]);
 
+  const filteredElders = useMemo(
+    () => elders.filter((elder) => matchesFilters(elder, query, statusFilter, careLevelFilter)),
+    [careLevelFilter, elders, query, statusFilter],
+  );
+  const pageCount = Math.max(1, Math.ceil(filteredElders.length / PAGE_SIZE));
+  const safePage = Math.min(page, pageCount);
+  const pageStart = (safePage - 1) * PAGE_SIZE;
+  const visibleElders = filteredElders.slice(pageStart, pageStart + PAGE_SIZE);
+
   function updateField<K extends keyof ElderInput>(key: K, value: ElderInput[K]): void {
     setForm((current) => ({ ...current, [key]: value }));
   }
@@ -73,12 +129,39 @@ export function EldersClient({ initialElders, permissions }: EldersClientProps):
     setEditingId(null);
     setForm(emptyInput);
     setMessage("");
+    setIsFormOpen(true);
   }
 
   function beginEdit(elder: Elder): void {
     setEditingId(elder.id);
     setForm(elderToInput(elder));
     setMessage("");
+    setIsFormOpen(true);
+  }
+
+  function closeForm(): void {
+    if (isPending) {
+      return;
+    }
+
+    setIsFormOpen(false);
+    setEditingId(null);
+    setForm(emptyInput);
+  }
+
+  function updateQuery(value: string): void {
+    setQuery(value);
+    setPage(1);
+  }
+
+  function updateStatusFilter(value: string): void {
+    setStatusFilter(value as ElderStatus | typeof ALL_STATUS);
+    setPage(1);
+  }
+
+  function updateCareLevelFilter(value: string): void {
+    setCareLevelFilter(value as CareLevel | typeof ALL_CARE_LEVELS);
+    setPage(1);
   }
 
   async function refreshElders(): Promise<void> {
@@ -115,10 +198,15 @@ export function EldersClient({ initialElders, permissions }: EldersClientProps):
     await refreshElders();
     setEditingId(null);
     setForm(emptyInput);
+    setIsFormOpen(false);
     setMessage(result.reason);
   }
 
-  async function handleDelete(elder: Elder): Promise<void> {
+  async function handleDelete(): Promise<void> {
+    if (!deleteTarget) {
+      return;
+    }
+
     if (!canDelete) {
       setMessage("当前角色无权删除老人档案");
       return;
@@ -127,7 +215,7 @@ export function EldersClient({ initialElders, permissions }: EldersClientProps):
     setIsPending(true);
     setMessage("");
 
-    const response = await fetch(`/api/elders/${elder.id}`, { method: "DELETE" });
+    const response = await fetch(`/api/elders/${deleteTarget.id}`, { method: "DELETE" });
     const result = (await response.json()) as ApiResult<{ elder: Elder }>;
     setIsPending(false);
 
@@ -137,6 +225,7 @@ export function EldersClient({ initialElders, permissions }: EldersClientProps):
     }
 
     await refreshElders();
+    setDeleteTarget(null);
     setMessage(result.reason);
   }
 
@@ -146,37 +235,210 @@ export function EldersClient({ initialElders, permissions }: EldersClientProps):
         <div>
           <Badge variant="success">全栈 CRUD</Badge>
           <h1 className="mt-3 text-3xl font-semibold tracking-normal">老人档案</h1>
-          <p className="mt-2 text-sm text-muted-foreground">服务端持久化档案、权限校验和审计记录。</p>
-        </div>
-        <div className="grid gap-2 text-sm sm:grid-cols-3">
-          <div className="rounded-md border bg-white/72 px-4 py-3">
-            <p className="text-muted-foreground">在院老人</p>
-            <p className="mt-1 text-2xl font-semibold">{metrics.activeCount}</p>
-          </div>
-          <div className="rounded-md border bg-white/72 px-4 py-3">
-            <p className="text-muted-foreground">待入住</p>
-            <p className="mt-1 text-2xl font-semibold">{metrics.pendingCount}</p>
-          </div>
-          <div className="rounded-md border bg-white/72 px-4 py-3">
-            <p className="text-muted-foreground">重点照护</p>
-            <p className="mt-1 text-2xl font-semibold">{metrics.intensiveCount}</p>
+          <p className="mt-2 text-sm text-muted-foreground">列表管理、筛选搜索、分页、弹窗维护和审计持久化。</p>
         </div>
+        <div className="flex flex-wrap gap-2">
+          <Button disabled={!canCreate} onClick={beginCreate} type="button">
+            <Plus className="size-4" aria-hidden="true" />
+            新增老人
+          </Button>
         </div>
       </section>
 
-      <section className="grid gap-4 xl:grid-cols-[0.82fr_1.18fr]">
+      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
         <Card>
-          <CardHeader className="flex flex-row items-center justify-between">
-            <CardTitle>{isEditing ? "编辑档案" : "新增档案"}</CardTitle>
-            {isEditing ? (
-              <Button type="button" variant="ghost" size="sm" onClick={beginCreate}>
-                <X className="size-4" aria-hidden="true" />
-                取消
-              </Button>
+          <CardHeader className="p-4">
+            <CardDescription>在院老人</CardDescription>
+            <CardTitle className="text-3xl">{metrics.activeCount}</CardTitle>
+          </CardHeader>
+        </Card>
+        <Card>
+          <CardHeader className="p-4">
+            <CardDescription>待入住</CardDescription>
+            <CardTitle className="text-3xl">{metrics.pendingCount}</CardTitle>
+          </CardHeader>
+        </Card>
+        <Card className="border-red-200 bg-red-50/70">
+          <CardHeader className="p-4">
+            <CardDescription className="text-red-700">红色重点</CardDescription>
+            <CardTitle className="text-3xl text-red-700">{metrics.intensiveCount}</CardTitle>
+          </CardHeader>
+        </Card>
+        <Card>
+          <CardHeader className="p-4">
+            <CardDescription>需关注标记</CardDescription>
+            <CardTitle className="text-3xl">{metrics.warningCount}</CardTitle>
+          </CardHeader>
+        </Card>
+      </section>
+
+      <Card>
+        <CardHeader className="gap-4">
+          <div className="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
+            <div>
+              <CardTitle>档案列表</CardTitle>
+              <CardDescription className="mt-1">
+                共 {filteredElders.length} 条匹配记录，按状态、照护等级和关键词快速定位。
+              </CardDescription>
+            </div>
+            <div className="grid gap-2 sm:grid-cols-[minmax(220px,1fr)_150px_150px]">
+              <label className="relative block">
+                <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+                <Input
+                  className="pl-9"
+                  onChange={(event) => updateQuery(event.target.value)}
+                  placeholder="搜索姓名、床位、联系人"
+                  value={query}
+                />
+              </label>
+              <label className="relative block">
+                <Filter className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+                <select
+                  className="h-11 w-full rounded-md border bg-background px-9 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+                  onChange={(event) => updateStatusFilter(event.target.value)}
+                  value={statusFilter}
+                >
+                  <option value={ALL_STATUS}>全部状态</option>
+                  {Object.entries(ELDER_STATUS_LABELS).map(([value, label]) => (
+                    <option key={value} value={value}>
+                      {label}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <select
+                className="h-11 w-full rounded-md border bg-background px-3 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+                onChange={(event) => updateCareLevelFilter(event.target.value)}
+                value={careLevelFilter}
+              >
+                <option value={ALL_CARE_LEVELS}>全部照护</option>
+                {Object.entries(CARE_LEVEL_LABELS).map(([value, label]) => (
+                  <option key={value} value={value}>
+                    {label}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+          {message ? (
+            <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
+              {message}
+            </p>
           ) : null}
         </CardHeader>
         <CardContent>
-            <form className="grid gap-3" onSubmit={handleSubmit}>
+          <div className="overflow-x-auto rounded-md border">
+            <table className="w-full min-w-[980px] text-sm">
+              <thead className="bg-secondary text-left text-xs text-muted-foreground">
+                <tr>
+                  <th className="px-4 py-3 font-medium">姓名</th>
+                  <th className="px-4 py-3 font-medium">照护</th>
+                  <th className="px-4 py-3 font-medium">床位</th>
+                  <th className="px-4 py-3 font-medium">联系人</th>
+                  <th className="px-4 py-3 font-medium">状态</th>
+                  <th className="px-4 py-3 font-medium">标记</th>
+                  <th className="px-4 py-3 text-right font-medium">操作</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y bg-card">
+                {visibleElders.map((elder) => {
+                  const risk = getRiskLabel(elder);
+
+                  return (
+                    <tr key={elder.id}>
+                      <td className="px-4 py-3">
+                        <p className="font-medium">{elder.name}</p>
+                        <p className="text-xs text-muted-foreground">
+                          {GENDER_LABELS[elder.gender]} · {elder.age} 岁
+                        </p>
+                      </td>
+                      <td className="px-4 py-3">{CARE_LEVEL_LABELS[elder.careLevel]}</td>
+                      <td className="px-4 py-3 text-muted-foreground">
+                        {elder.room}-{elder.bed}
+                      </td>
+                      <td className="px-4 py-3 text-muted-foreground">
+                        {elder.primaryContact} / {elder.phone}
+                      </td>
+                      <td className="px-4 py-3">
+                        <Badge variant={elder.status === "active" ? "success" : "secondary"}>
+                          {ELDER_STATUS_LABELS[elder.status]}
+                        </Badge>
+                      </td>
+                      <td className="px-4 py-3">
+                        <Badge variant={risk.variant}>{risk.label}</Badge>
+                      </td>
+                      <td className="px-4 py-3">
+                        <div className="flex justify-end gap-2">
+                          <Button
+                            disabled={!canUpdate}
+                            onClick={() => beginEdit(elder)}
+                            size="sm"
+                            type="button"
+                            variant="outline"
+                          >
+                            <Edit3 className="size-4" aria-hidden="true" />
+                            编辑
+                          </Button>
+                          <Button
+                            disabled={!canDelete || isPending}
+                            onClick={() => setDeleteTarget(elder)}
+                            size="sm"
+                            type="button"
+                            variant="destructive"
+                          >
+                            <Trash2 className="size-4" aria-hidden="true" />
+                            删除
+                          </Button>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })}
+                {visibleElders.length === 0 ? (
+                  <tr>
+                    <td className="px-4 py-8 text-center text-muted-foreground" colSpan={7}>
+                      暂无匹配老人档案
+                    </td>
+                  </tr>
+                ) : null}
+              </tbody>
+            </table>
+          </div>
+          <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+            <p className="text-sm text-muted-foreground">
+              第 {safePage} / {pageCount} 页
+            </p>
+            <div className="flex gap-2">
+              <Button
+                disabled={safePage === 1}
+                onClick={() => setPage((current) => Math.max(1, current - 1))}
+                size="sm"
+                type="button"
+                variant="outline"
+              >
+                上一页
+              </Button>
+              <Button
+                disabled={safePage === pageCount}
+                onClick={() => setPage((current) => Math.min(pageCount, current + 1))}
+                size="sm"
+                type="button"
+                variant="outline"
+              >
+                下一页
+              </Button>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Dialog
+        description="保存后会写入服务端数据文件，并生成审计记录。"
+        onClose={closeForm}
+        open={isFormOpen}
+        title={isEditing ? "编辑老人档案" : "新增老人档案"}
+      >
+        <form className="grid gap-3" id="elder-form" onSubmit={handleSubmit}>
           <label className="grid gap-1.5 text-sm font-medium">
             姓名
             <Input value={form.name} onChange={(event) => updateField("name", event.target.value)} />
@@ -186,8 +448,8 @@ export function EldersClient({ initialElders, permissions }: EldersClientProps):
               性别
               <select
                 className="h-11 rounded-md border bg-background px-3 text-sm"
-                    value={form.gender}
                 onChange={(event) => updateField("gender", event.target.value as ElderInput["gender"])}
+                value={form.gender}
               >
                 {Object.entries(GENDER_LABELS).map(([value, label]) => (
                   <option key={value} value={value}>
@@ -199,11 +461,11 @@ export function EldersClient({ initialElders, permissions }: EldersClientProps):
             <label className="grid gap-1.5 text-sm font-medium">
               年龄
               <Input
-                    type="number"
-                    min={0}
                 max={130}
-                    value={form.age}
+                min={0}
                 onChange={(event) => updateField("age", Number(event.target.value))}
+                type="number"
+                value={form.age}
               />
             </label>
           </div>
@@ -212,8 +474,8 @@ export function EldersClient({ initialElders, permissions }: EldersClientProps):
               护理等级
               <select
                 className="h-11 rounded-md border bg-background px-3 text-sm"
-                    value={form.careLevel}
                 onChange={(event) => updateField("careLevel", event.target.value as ElderInput["careLevel"])}
+                value={form.careLevel}
               >
                 {Object.entries(CARE_LEVEL_LABELS).map(([value, label]) => (
                   <option key={value} value={value}>
@@ -226,8 +488,8 @@ export function EldersClient({ initialElders, permissions }: EldersClientProps):
               状态
               <select
                 className="h-11 rounded-md border bg-background px-3 text-sm"
-                    value={form.status}
                 onChange={(event) => updateField("status", event.target.value as ElderInput["status"])}
+                value={form.status}
               >
                 {Object.entries(ELDER_STATUS_LABELS).map(([value, label]) => (
                   <option key={value} value={value}>
@@ -249,10 +511,7 @@ export function EldersClient({ initialElders, permissions }: EldersClientProps):
           </div>
           <label className="grid gap-1.5 text-sm font-medium">
             联系人
-                <Input
-                  value={form.primaryContact}
-                  onChange={(event) => updateField("primaryContact", event.target.value)}
-                />
+            <Input value={form.primaryContact} onChange={(event) => updateField("primaryContact", event.target.value)} />
           </label>
           <label className="grid gap-1.5 text-sm font-medium">
             联系电话
@@ -262,103 +521,51 @@ export function EldersClient({ initialElders, permissions }: EldersClientProps):
             健康备注
             <textarea
               className="min-h-24 rounded-md border bg-background px-3 py-2 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
-                  value={form.medicalNotes}
               onChange={(event) => updateField("medicalNotes", event.target.value)}
+              value={form.medicalNotes}
             />
           </label>
-
           {message ? (
             <p className="rounded-md bg-secondary px-3 py-2 text-sm text-secondary-foreground" role="status">
               {message}
             </p>
           ) : null}
-
-              <Button type="submit" disabled={isPending || !canSubmit}>
+          <div className="flex flex-col-reverse gap-2 pt-2 sm:flex-row sm:justify-end">
+            <Button disabled={isPending} onClick={closeForm} type="button" variant="outline">
+              取消
+            </Button>
+            <Button disabled={isPending || !canSubmit} type="submit">
               <Plus className="size-4" aria-hidden="true" />
               {isEditing ? "保存修改" : "新增老人"}
             </Button>
+          </div>
         </form>
-          </CardContent>
-        </Card>
+      </Dialog>
 
-        <Card>
-          <CardHeader>
-            <CardTitle>档案列表</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="overflow-x-auto rounded-md border">
-              <table className="w-full min-w-[820px] text-sm">
-                <thead className="bg-secondary text-left text-xs text-muted-foreground">
-                  <tr>
-                    <th className="px-4 py-3 font-medium">姓名</th>
-                    <th className="px-4 py-3 font-medium">照护</th>
-                    <th className="px-4 py-3 font-medium">床位</th>
-                    <th className="px-4 py-3 font-medium">联系人</th>
-                    <th className="px-4 py-3 font-medium">状态</th>
-                    <th className="px-4 py-3 text-right font-medium">操作</th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y bg-card">
-                  {elders.map((elder) => (
-                    <tr key={elder.id}>
-                      <td className="px-4 py-3">
-                        <p className="font-medium">{elder.name}</p>
-                        <p className="text-xs text-muted-foreground">
-                          {GENDER_LABELS[elder.gender]} · {elder.age} 岁
-                        </p>
-                      </td>
-                      <td className="px-4 py-3">{CARE_LEVEL_LABELS[elder.careLevel]}</td>
-                      <td className="px-4 py-3 text-muted-foreground">
-                        {elder.room}-{elder.bed}
-                      </td>
-                      <td className="px-4 py-3 text-muted-foreground">
-                        {elder.primaryContact} / {elder.phone}
-                      </td>
-                      <td className="px-4 py-3">
-                        <Badge variant={elder.status === "active" ? "success" : "secondary"}>
-                          {ELDER_STATUS_LABELS[elder.status]}
-                        </Badge>
-                      </td>
-                      <td className="px-4 py-3">
-                        <div className="flex justify-end gap-2">
-                          <Button
-                            type="button"
-                            variant="outline"
-                            size="sm"
-                            onClick={() => beginEdit(elder)}
-                            disabled={!canUpdate}
+      <Dialog
+        className="max-w-md"
+        description={deleteTarget ? `确认删除 ${deleteTarget.name} 的档案？该操作会写入审计日志。` : undefined}
+        onClose={() => setDeleteTarget(null)}
+        open={deleteTarget !== null}
+        title="删除确认"
       >
-                            <Edit3 className="size-4" aria-hidden="true" />
-                            编辑
-                          </Button>
-                          <Button
-                            type="button"
-                            variant="destructive"
-                            size="sm"
-                            onClick={() => void handleDelete(elder)}
-                            disabled={!canDelete || isPending}
-                          >
-                            <Trash2 className="size-4" aria-hidden="true" />
-                            删除
-                          </Button>
+        <div className="flex flex-col gap-4">
+          {deleteTarget ? (
+            <div className="rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-700">
+              {deleteTarget.name}，{deleteTarget.room}-{deleteTarget.bed}，最近更新：
+              {formatDateTime(deleteTarget.updatedAt)}
             </div>
-                      </td>
-                    </tr>
-                  ))}
-                  {elders.length === 0 ? (
-                    <tr>
-                      <td className="px-4 py-8 text-center text-muted-foreground" colSpan={6}>
-                        暂无老人档案
-                      </td>
-                    </tr>
           ) : null}
-                </tbody>
-              </table>
+          <div className="flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+            <Button disabled={isPending} onClick={() => setDeleteTarget(null)} type="button" variant="outline">
+              取消
+            </Button>
+            <Button disabled={isPending || !canDelete} onClick={() => void handleDelete()} type="button" variant="destructive">
+              删除档案
+            </Button>
           </div>
-          </CardContent>
-        </Card>
-      </section>
+        </div>
+      </Dialog>
     </div>
   );
 }
-

modules/settings/components/SettingsOverview.tsx

@@ -1,5 +1,7 @@
+import { Activity, AlertTriangle, ShieldCheck, Users } from "lucide-react";
+
 import { Badge } from "@/components/ui/badge";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import type { AuditLog, PublicAccount, RoleDefinition } from "@/modules/core/types";
 import { ROLE_LABELS } from "@/modules/core/types";
 
@@ -14,6 +16,20 @@ export function SettingsOverview({
   roles,
   auditLogs,
 }: SettingsOverviewProps): React.ReactElement {
+  const activeAccountCount = accounts.filter((account) => account.status === "active").length;
+  const disabledAccountCount = accounts.length - activeAccountCount;
+  const deniedAuditCount = auditLogs.filter((log) => log.result === "denied").length;
+  const failureAuditCount = auditLogs.filter((log) => log.result === "failure").length;
+  const successAuditCount = auditLogs.filter((log) => log.result === "success").length;
+  const totalPermissionCount = roles.reduce((sum, role) => sum + role.permissions.length, 0);
+  const actionCounts = auditLogs.reduce<Record<string, number>>((counts, log) => {
+    counts[log.action] = (counts[log.action] ?? 0) + 1;
+    return counts;
+  }, {});
+  const topActions = Object.entries(actionCounts)
+    .sort((left, right) => right[1] - left[1])
+    .slice(0, 4);
+
   return (
     <div className="mx-auto flex w-full max-w-7xl flex-col gap-5">
       <section className="border-b pb-5">
@@ -22,32 +38,98 @@ export function SettingsOverview({
         <p className="mt-2 text-sm text-muted-foreground">内置角色、账号状态和关键操作审计。</p>
       </section>
 
-      <section className="grid gap-4 md:grid-cols-3">
+      <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
         <Card>
-          <CardHeader>
-            <CardTitle>系统账号</CardTitle>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0">
+            <div>
+              <CardDescription>系统账号</CardDescription>
+              <CardTitle className="mt-2 text-3xl">{accounts.length}</CardTitle>
+            </div>
+            <Users className="size-5 text-primary" aria-hidden="true" />
           </CardHeader>
-          <CardContent>
-            <p className="text-3xl font-semibold">{accounts.length}</p>
-            <p className="mt-2 text-sm text-muted-foreground">服务端持久化账号</p>
+          <CardContent className="pt-0">
+            <p className="text-sm text-muted-foreground">启用 {activeAccountCount} 个，停用 {disabledAccountCount} 个</p>
           </CardContent>
         </Card>
         <Card>
-          <CardHeader>
-            <CardTitle>角色数量</CardTitle>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0">
+            <div>
+              <CardDescription>角色数量</CardDescription>
+              <CardTitle className="mt-2 text-3xl">{roles.length}</CardTitle>
+            </div>
+            <ShieldCheck className="size-5 text-primary" aria-hidden="true" />
           </CardHeader>
-          <CardContent>
-            <p className="text-3xl font-semibold">{roles.length}</p>
-            <p className="mt-2 text-sm text-muted-foreground">内置权限组</p>
+          <CardContent className="pt-0">
+            <p className="text-sm text-muted-foreground">累计覆盖 {totalPermissionCount} 项权限</p>
+          </CardContent>
+        </Card>
+        <Card className="border-red-200 bg-red-50/70">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0">
+            <div>
+              <CardDescription className="text-red-700">红色审计</CardDescription>
+              <CardTitle className="mt-2 text-3xl text-red-700">{deniedAuditCount + failureAuditCount}</CardTitle>
+            </div>
+            <AlertTriangle className="size-5 text-red-600" aria-hidden="true" />
+          </CardHeader>
+          <CardContent className="pt-0">
+            <p className="text-sm text-red-700">拒绝 {deniedAuditCount} 条，失败 {failureAuditCount} 条</p>
           </CardContent>
         </Card>
         <Card>
-          <CardHeader>
-            <CardTitle>审计日志</CardTitle>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0">
+            <div>
+              <CardDescription>审计日志</CardDescription>
+              <CardTitle className="mt-2 text-3xl">{auditLogs.length}</CardTitle>
+            </div>
+            <Activity className="size-5 text-primary" aria-hidden="true" />
           </CardHeader>
-          <CardContent>
-            <p className="text-3xl font-semibold">{auditLogs.length}</p>
-            <p className="mt-2 text-sm text-muted-foreground">最近 100 条</p>
+          <CardContent className="pt-0">
+            <p className="text-sm text-muted-foreground">成功 {successAuditCount} 条，最近 100 条</p>
+          </CardContent>
+        </Card>
+      </section>
+
+      <section className="grid gap-4 lg:grid-cols-[0.8fr_1.2fr]">
+        <Card>
+          <CardHeader>
+            <CardTitle>风险标记</CardTitle>
+          </CardHeader>
+          <CardContent className="grid gap-3">
+            <div className="flex items-center justify-between rounded-md border border-red-200 bg-red-50 p-3">
+              <span className="text-sm text-red-700">红色：拒绝/失败审计</span>
+              <Badge variant="danger">{deniedAuditCount + failureAuditCount}</Badge>
+            </div>
+            <div className="flex items-center justify-between rounded-md border border-amber-200 bg-amber-50 p-3">
+              <span className="text-sm text-amber-700">黄色：停用账号</span>
+              <Badge variant="warning">{disabledAccountCount}</Badge>
+            </div>
+            <div className="flex items-center justify-between rounded-md border border-emerald-200 bg-emerald-50 p-3">
+              <span className="text-sm text-emerald-700">绿色：成功审计</span>
+              <Badge variant="success">{successAuditCount}</Badge>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>高频动作</CardTitle>
+          </CardHeader>
+          <CardContent className="grid gap-3">
+            {topActions.map(([action, count]) => (
+              <div key={action} className="grid gap-2 rounded-md border p-3">
+                <div className="flex items-center justify-between gap-3 text-sm">
+                  <span className="font-medium">{action}</span>
+                  <span className="text-muted-foreground">{count} 次</span>
+                </div>
+                <div className="h-2 rounded-full bg-muted">
+                  <div
+                    className="h-2 rounded-full bg-primary"
+                    style={{ width: `${Math.max(10, Math.min(100, count * 18))}%` }}
+                  />
+                </div>
+              </div>
+            ))}
+            {topActions.length === 0 ? <p className="text-sm text-muted-foreground">暂无审计动作统计</p> : null}
           </CardContent>
         </Card>
       </section>
@@ -173,4 +255,3 @@ export function SettingsOverview({
     </div>
   );
 }
-

modules/shared/components/CmsModuleClient.tsx

@@ -0,0 +1,235 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { Eye, Filter, Search } from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Dialog } from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+
+export type CmsRecordTone = "success" | "warning" | "danger" | "secondary";
+
+export type CmsRecord = {
+  id: string;
+  title: string;
+  owner: string;
+  status: string;
+  statusTone: CmsRecordTone;
+  category: string;
+  updatedAt: string;
+  priority: "高" | "中" | "低";
+  summary: string;
+};
+
+type CmsModuleClientProps = {
+  records: CmsRecord[];
+};
+
+const PAGE_SIZE = 5;
+const ALL_STATUS = "全部状态";
+
+function matchesRecord(record: CmsRecord, query: string, status: string): boolean {
+  const normalizedQuery = query.trim().toLowerCase();
+  const matchesSearch =
+    normalizedQuery.length === 0 ||
+    [record.title, record.owner, record.category, record.summary]
+      .join(" ")
+      .toLowerCase()
+      .includes(normalizedQuery);
+  const matchesStatus = status === ALL_STATUS || record.status === status;
+
+  return matchesSearch && matchesStatus;
+}
+
+export function CmsModuleClient({ records }: CmsModuleClientProps): React.ReactElement {
+  const [query, setQuery] = useState("");
+  const [status, setStatus] = useState(ALL_STATUS);
+  const [page, setPage] = useState(1);
+  const [selectedRecord, setSelectedRecord] = useState<CmsRecord | null>(null);
+
+  const statusOptions = useMemo(() => {
+    const uniqueStatuses = new Set(records.map((record) => record.status));
+    return [ALL_STATUS, ...Array.from(uniqueStatuses)];
+  }, [records]);
+
+  const filteredRecords = useMemo(
+    () => records.filter((record) => matchesRecord(record, query, status)),
+    [query, records, status],
+  );
+  const pageCount = Math.max(1, Math.ceil(filteredRecords.length / PAGE_SIZE));
+  const safePage = Math.min(page, pageCount);
+  const pageStart = (safePage - 1) * PAGE_SIZE;
+  const visibleRecords = filteredRecords.slice(pageStart, pageStart + PAGE_SIZE);
+  const highPriorityCount = filteredRecords.filter((record) => record.priority === "高").length;
+
+  function updateQuery(value: string): void {
+    setQuery(value);
+    setPage(1);
+  }
+
+  function updateStatus(value: string): void {
+    setStatus(value);
+    setPage(1);
+  }
+
+  return (
+    <section className="rounded-lg border bg-card">
+      <div className="flex flex-col gap-4 border-b p-5 lg:flex-row lg:items-end lg:justify-between">
+        <div>
+          <h2 className="text-base font-semibold">数据列表</h2>
+          <p className="mt-1 text-sm text-muted-foreground">
+            共 {filteredRecords.length} 条记录，{highPriorityCount} 条高优先级已标记。
+          </p>
+        </div>
+        <div className="grid gap-2 sm:grid-cols-[minmax(220px,1fr)_160px]">
+          <label className="relative block">
+            <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              className="pl-9"
+              onChange={(event) => updateQuery(event.target.value)}
+              placeholder="搜索名称、负责人、分类"
+              value={query}
+            />
+          </label>
+          <label className="relative block">
+            <Filter className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <select
+              className="h-11 w-full rounded-md border bg-background px-9 text-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring"
+              onChange={(event) => updateStatus(event.target.value)}
+              value={status}
+            >
+              {statusOptions.map((option) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
+            </select>
+          </label>
+        </div>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="w-full min-w-[860px] text-sm">
+          <thead className="bg-secondary text-left text-xs text-muted-foreground">
+            <tr>
+              <th className="px-4 py-3 font-medium">记录</th>
+              <th className="px-4 py-3 font-medium">分类</th>
+              <th className="px-4 py-3 font-medium">负责人</th>
+              <th className="px-4 py-3 font-medium">状态</th>
+              <th className="px-4 py-3 font-medium">标记</th>
+              <th className="px-4 py-3 text-right font-medium">操作</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y bg-card">
+            {visibleRecords.map((record) => (
+              <tr key={record.id}>
+                <td className="px-4 py-3">
+                  <p className="font-medium">{record.title}</p>
+                  <p className="mt-1 max-w-md truncate text-xs text-muted-foreground">{record.summary}</p>
+                </td>
+                <td className="px-4 py-3 text-muted-foreground">{record.category}</td>
+                <td className="px-4 py-3">{record.owner}</td>
+                <td className="px-4 py-3">
+                  <Badge variant={record.statusTone}>{record.status}</Badge>
+                </td>
+                <td className="px-4 py-3">
+                  <Badge variant={record.priority === "高" ? "danger" : record.priority === "中" ? "warning" : "secondary"}>
+                    {record.priority}优先级
+                  </Badge>
+                </td>
+                <td className="px-4 py-3">
+                  <div className="flex justify-end">
+                    <Button onClick={() => setSelectedRecord(record)} size="sm" type="button" variant="outline">
+                      <Eye className="size-4" aria-hidden="true" />
+                      详情
+                    </Button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+            {visibleRecords.length === 0 ? (
+              <tr>
+                <td className="px-4 py-8 text-center text-muted-foreground" colSpan={6}>
+                  暂无匹配记录
+                </td>
+              </tr>
+            ) : null}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="flex flex-col gap-3 border-t p-4 sm:flex-row sm:items-center sm:justify-between">
+        <p className="text-sm text-muted-foreground">
+          第 {safePage} / {pageCount} 页
+        </p>
+        <div className="flex gap-2">
+          <Button
+            disabled={safePage === 1}
+            onClick={() => setPage((current) => Math.max(1, current - 1))}
+            size="sm"
+            type="button"
+            variant="outline"
+          >
+            上一页
+          </Button>
+          <Button
+            disabled={safePage === pageCount}
+            onClick={() => setPage((current) => Math.min(pageCount, current + 1))}
+            size="sm"
+            type="button"
+            variant="outline"
+          >
+            下一页
+          </Button>
+        </div>
+      </div>
+
+      <Dialog
+        description={selectedRecord?.summary}
+        onClose={() => setSelectedRecord(null)}
+        open={selectedRecord !== null}
+        title={selectedRecord?.title ?? "记录详情"}
+      >
+        {selectedRecord ? (
+          <dl className="grid gap-3 text-sm sm:grid-cols-2">
+            <div className="rounded-md border p-3">
+              <dt className="text-muted-foreground">分类</dt>
+              <dd className="mt-1 font-medium">{selectedRecord.category}</dd>
+            </div>
+            <div className="rounded-md border p-3">
+              <dt className="text-muted-foreground">负责人</dt>
+              <dd className="mt-1 font-medium">{selectedRecord.owner}</dd>
+            </div>
+            <div className="rounded-md border p-3">
+              <dt className="text-muted-foreground">状态</dt>
+              <dd className="mt-1">
+                <Badge variant={selectedRecord.statusTone}>{selectedRecord.status}</Badge>
+              </dd>
+            </div>
+            <div className="rounded-md border p-3">
+              <dt className="text-muted-foreground">最近更新</dt>
+              <dd className="mt-1 font-medium">{selectedRecord.updatedAt}</dd>
+            </div>
+            <div className="rounded-md border p-3 sm:col-span-2">
+              <dt className="text-muted-foreground">数据标记</dt>
+              <dd className="mt-2">
+                <Badge
+                  variant={
+                    selectedRecord.priority === "高"
+                      ? "danger"
+                      : selectedRecord.priority === "中"
+                        ? "warning"
+                        : "secondary"
+                  }
+                >
+                  {selectedRecord.priority}优先级
+                </Badge>
+              </dd>
+            </div>
+          </dl>
+        ) : null}
+      </Dialog>
+    </section>
+  );
+}

modules/shared/components/ModulePage.tsx

@@ -1,9 +1,10 @@
 import type { LucideIcon } from "lucide-react";
-import { ArrowRight, CheckCircle2 } from "lucide-react";
+import { ArrowRight, BarChart3, CheckCircle2, Flag } from "lucide-react";
 
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { CmsModuleClient, type CmsRecord, type CmsRecordTone } from "@/modules/shared/components/CmsModuleClient";
 
 type ModuleMetric = {
   label: string;
@@ -21,14 +22,85 @@ type ModulePageProps = {
   workflows: string[];
 };
 
+const STATUS_OPTIONS: Array<{ status: string; tone: CmsRecordTone }> = [
+  { status: "进行中", tone: "warning" },
+  { status: "已归档", tone: "success" },
+  { status: "需复核", tone: "danger" },
+  { status: "待处理", tone: "secondary" },
+];
+
+const PRIORITY_OPTIONS: CmsRecord["priority"][] = ["高", "中", "低"];
+
+function pickStatus(index: number): { status: string; tone: CmsRecordTone } {
+  return STATUS_OPTIONS[index % STATUS_OPTIONS.length] ?? { status: "待处理", tone: "secondary" };
+}
+
+function pickPriority(index: number): CmsRecord["priority"] {
+  return PRIORITY_OPTIONS[index % PRIORITY_OPTIONS.length] ?? "低";
+}
+
+function buildCmsRecords(title: string, metrics: ModuleMetric[], workflows: string[]): CmsRecord[] {
+  const workflowRecords = workflows.map((workflow, index) => {
+    const status = pickStatus(index);
+
+    return {
+      id: `workflow-${index + 1}`,
+      title: workflow,
+      owner: index % 2 === 0 ? "运营主管" : "护理组长",
+      status: status.status,
+      statusTone: status.tone,
+      category: title,
+      updatedAt: `今日 ${9 + index}:30`,
+      priority: pickPriority(index),
+      summary: `${title}流程节点：${workflow}，支持按状态筛选、搜索和详情查看。`,
+    };
+  });
+
+  const metricRecords = metrics.map((metric, index) => {
+    const status = pickStatus(index + workflows.length);
+
+    return {
+      id: `metric-${index + 1}`,
+      title: `${metric.label}数据巡检`,
+      owner: "数据管理员",
+      status: status.status,
+      statusTone: status.tone,
+      category: "指标分析",
+      updatedAt: `昨日 ${14 + index}:00`,
+      priority: metric.value.includes("%") ? "中" : pickPriority(index + 1),
+      summary: `${metric.label}当前值 ${metric.value}，${metric.detail}。`,
+    };
+  });
+
+  return [
+    ...workflowRecords,
+    ...metricRecords,
+    {
+      id: "system-red-flag",
+      title: `${title}红色标记复核`,
+      owner: "值班主管",
+      status: "需复核",
+      statusTone: "danger",
+      category: "风险标记",
+      updatedAt: "今日 08:45",
+      priority: "高",
+      summary: "内置样例风险标记，用于演示红色、黄色、绿色状态分层和待办优先级。",
+    },
+  ];
+}
+
 export function ModulePage({
   title,
   eyebrow,
+  description,
   icon: Icon,
   phase,
   metrics,
   workflows,
 }: ModulePageProps): React.ReactElement {
+  const records = buildCmsRecords(title, metrics, workflows);
+  const highPriorityCount = records.filter((record) => record.priority === "高").length;
+
   return (
     <div className="mx-auto flex w-full max-w-7xl flex-col gap-6">
       <section className="flex flex-col justify-between gap-4 border-b pb-5 lg:flex-row lg:items-end">
@@ -43,6 +115,7 @@ export function ModulePage({
               <h1 className="text-2xl font-semibold tracking-normal md:text-3xl">{title}</h1>
             </div>
           </div>
+          <p className="mt-3 text-sm text-muted-foreground">{description}</p>
         </div>
         <div className="flex gap-2">
           <Button variant="outline">筛选</Button>
@@ -67,22 +140,41 @@ export function ModulePage({
         ))}
       </section>
 
-      <section>
-        <Card>
-          <CardHeader>
-            <CardTitle>流转</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <ol className="grid gap-3 md:grid-cols-2">
-              {workflows.map((workflow) => (
-                <li key={workflow} className="flex items-start gap-3 rounded-md border bg-secondary/30 p-3">
+      <section className="grid gap-4 lg:grid-cols-[0.72fr_1.28fr]">
+        <div className="rounded-lg border bg-card p-5">
+          <div className="flex items-center gap-3">
+            <span className="inline-flex size-10 items-center justify-center rounded-md bg-secondary text-primary">
+              <BarChart3 className="size-5" aria-hidden="true" />
+            </span>
+            <div>
+              <h2 className="text-base font-semibold">分析摘要</h2>
+              <p className="text-sm text-muted-foreground">内置样例数据用于看板和列表联动。</p>
+            </div>
+          </div>
+          <div className="mt-5 grid gap-3">
+            <div className="flex items-center justify-between rounded-md border p-3">
+              <span className="text-sm text-muted-foreground">列表记录</span>
+              <strong>{records.length}</strong>
+            </div>
+            <div className="flex items-center justify-between rounded-md border border-red-200 bg-red-50 p-3 text-red-700">
+              <span className="flex items-center gap-2 text-sm">
+                <Flag className="size-4" aria-hidden="true" />
+                红色标记
+              </span>
+              <strong>{highPriorityCount}</strong>
+            </div>
+            <ol className="grid gap-2">
+              {workflows.slice(0, 3).map((workflow) => (
+                <li key={workflow} className="flex items-start gap-2 text-sm">
                   <CheckCircle2 className="mt-0.5 size-4 shrink-0 text-primary" aria-hidden="true" />
-                  <span className="text-sm">{workflow}</span>
+                  <span>{workflow}</span>
                 </li>
               ))}
             </ol>
-          </CardContent>
-        </Card>
+          </div>
+        </div>
+
+        <CmsModuleClient records={records} />
       </section>
     </div>
   );