fix: remove fake module data
This commit is contained in:
@@ -158,6 +158,48 @@ The project Dialog adapter must:
|
|||||||
- Browser validation should assert the panel center is within 2px of the viewport center
|
- Browser validation should assert the panel center is within 2px of the viewport center
|
||||||
on desktop and mobile.
|
on desktop and mobile.
|
||||||
|
|
||||||
|
### Static Module Data Contract
|
||||||
|
|
||||||
|
Static or reserved module pages must not fabricate operational data. If a module does
|
||||||
|
not have a Drizzle-backed query/API and real persisted records, render a clear empty or
|
||||||
|
not-connected state instead of generated counters, fake workflows, sample records, or
|
||||||
|
mock priority/status rows.
|
||||||
|
|
||||||
|
`modules/shared/components/ModulePage.tsx` is the shared placeholder for these modules.
|
||||||
|
Its props should stay descriptive only:
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
type ModulePageProps = {
|
||||||
|
title: string;
|
||||||
|
eyebrow: string;
|
||||||
|
description: string;
|
||||||
|
icon: LucideIcon;
|
||||||
|
phase: "待接入" | "二期预留" | "三期预留";
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
// Bad: static pages pretending to have live business data.
|
||||||
|
<ModulePage
|
||||||
|
title="Care"
|
||||||
|
metrics={[{ label: "Today", value: "184", detail: "142 done" }]}
|
||||||
|
workflows={["Create plan", "Dispatch task"]}
|
||||||
|
/>
|
||||||
|
|
||||||
|
// Good: no fabricated records until a real data source exists.
|
||||||
|
<ModulePage
|
||||||
|
title="Care"
|
||||||
|
eyebrow="Plans and inspections"
|
||||||
|
description="Pending connection to care plans, task dispatch, and execution records."
|
||||||
|
icon={ClipboardCheck}
|
||||||
|
phase="待接入"
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|
||||||
|
When a module becomes real, replace the placeholder with a Server Component that loads
|
||||||
|
data from the server boundary and pass only persisted, permission-filtered data into
|
||||||
|
client components.
|
||||||
|
|
||||||
### Use Proper Elements
|
### Use Proper Elements
|
||||||
|
|
||||||
```typescript
|
```typescript
|
||||||
|
|||||||
@@ -7,15 +7,9 @@ export default function AlertsPage(): React.ReactElement {
|
|||||||
<ModulePage
|
<ModulePage
|
||||||
title="规则预警"
|
title="规则预警"
|
||||||
eyebrow="规则中心与风险识别"
|
eyebrow="规则中心与风险识别"
|
||||||
description="三期引入健康阈值、任务逾期、设备故障、应急事件和风险老人识别规则。"
|
description="三期计划接入健康阈值、任务逾期、设备故障、应急事件和风险老人识别规则。"
|
||||||
icon={Radio}
|
icon={Radio}
|
||||||
phase="三期预留"
|
phase="三期预留"
|
||||||
metrics={[
|
|
||||||
{ label: "规则类型", value: "5", detail: "健康、用药、护理、设备、应急" },
|
|
||||||
{ label: "预警状态", value: "4", detail: "生成、确认、处理、关闭" },
|
|
||||||
{ label: "风险维度", value: "3", detail: "健康异常、事件频次、护理强度" },
|
|
||||||
]}
|
|
||||||
workflows={["配置预警规则", "匹配业务来源数据", "生成预警记录", "确认处理并关闭"]}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,15 +7,9 @@ export default function CarePage(): React.ReactElement {
|
|||||||
<ModulePage
|
<ModulePage
|
||||||
title="护理服务"
|
title="护理服务"
|
||||||
eyebrow="护理计划、任务与巡检"
|
eyebrow="护理计划、任务与巡检"
|
||||||
description="按护理等级制定计划,生成任务并支持接收、执行、完成和逾期标记。"
|
description="待接入护理等级、护理计划、任务派发、执行记录和逾期状态数据源。"
|
||||||
icon={ClipboardCheck}
|
icon={ClipboardCheck}
|
||||||
phase="一期"
|
phase="待接入"
|
||||||
metrics={[
|
|
||||||
{ label: "今日任务", value: "184", detail: "已完成 142 项" },
|
|
||||||
{ label: "逾期任务", value: "4", detail: "集中在午间巡检和复测任务" },
|
|
||||||
{ label: "巡检打卡", value: "91%", detail: "一楼护理区已全部完成" },
|
|
||||||
]}
|
|
||||||
workflows={["配置护理等级", "创建护理计划", "派发护理任务", "巡检打卡并提交记录"]}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,15 +7,9 @@ export default function DevicesPage(): React.ReactElement {
|
|||||||
<ModulePage
|
<ModulePage
|
||||||
title="设备运维"
|
title="设备运维"
|
||||||
eyebrow="设备台账与维修工单"
|
eyebrow="设备台账与维修工单"
|
||||||
description="维护设备编号、类型、位置、状态和责任人,支持故障上报与维修归档。"
|
description="待接入设备台账、故障上报、维修派单、处理记录和状态恢复数据源。"
|
||||||
icon={Wrench}
|
icon={Wrench}
|
||||||
phase="一期"
|
phase="待接入"
|
||||||
metrics={[
|
|
||||||
{ label: "设备总数", value: "312", detail: "床旁呼叫、监测设备、公共设施" },
|
|
||||||
{ label: "故障设备", value: "2", detail: "均已生成维修工单" },
|
|
||||||
{ label: "待派单", value: "1", detail: "需维修人员确认" },
|
|
||||||
]}
|
|
||||||
workflows={["登记设备台账", "上报设备故障", "派发维修工单", "记录维修结果并恢复状态"]}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,15 +7,9 @@ export default function EmergencyPage(): React.ReactElement {
|
|||||||
<ModulePage
|
<ModulePage
|
||||||
title="安全应急"
|
title="安全应急"
|
||||||
eyebrow="紧急呼叫与事件处理"
|
eyebrow="紧急呼叫与事件处理"
|
||||||
description="支持老人或护理人员提交紧急呼叫,形成接警、派发、处理、完成、归档闭环。"
|
description="待接入紧急呼叫、接警派发、事件处理、完成归档和通知数据源。"
|
||||||
icon={ShieldAlert}
|
icon={ShieldAlert}
|
||||||
phase="一期"
|
phase="待接入"
|
||||||
metrics={[
|
|
||||||
{ label: "今日呼叫", value: "6", detail: "平均响应 2 分 18 秒" },
|
|
||||||
{ label: "处理中", value: "1", detail: "已通知护理主管与医护人员" },
|
|
||||||
{ label: "已归档", value: "21", detail: "本周事件处理率 100%" },
|
|
||||||
]}
|
|
||||||
workflows={["提交紧急呼叫", "生成应急事件", "派发责任人员", "记录处理结果并通知相关人员"]}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,15 +7,9 @@ export default function FamilyPage(): React.ReactElement {
|
|||||||
<ModulePage
|
<ModulePage
|
||||||
title="家属服务"
|
title="家属服务"
|
||||||
eyebrow="家属端与探访反馈"
|
eyebrow="家属端与探访反馈"
|
||||||
description="二期补齐家属查看老人动态、健康记录、护理记录、探访预约和服务反馈能力。"
|
description="二期计划接入家属授权、老人动态、探访预约和服务反馈数据源。"
|
||||||
icon={TabletSmartphone}
|
icon={TabletSmartphone}
|
||||||
phase="二期预留"
|
phase="二期预留"
|
||||||
metrics={[
|
|
||||||
{ label: "绑定家属", value: "214", detail: "一个老人可绑定多个授权家属" },
|
|
||||||
{ label: "探访预约", value: "12", detail: "待审核 4 条" },
|
|
||||||
{ label: "服务反馈", value: "7", detail: "2 条需要机构回复" },
|
|
||||||
]}
|
|
||||||
workflows={["绑定老人和家属账号", "查看授权范围内数据", "提交探访预约", "反馈处理与归档"]}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,15 +7,9 @@ export default function HealthPage(): React.ReactElement {
|
|||||||
<ModulePage
|
<ModulePage
|
||||||
title="健康照护"
|
title="健康照护"
|
||||||
eyebrow="健康档案与生命体征"
|
eyebrow="健康档案与生命体征"
|
||||||
description="记录体温、血压、心率、血氧、慢病信息和异常复核建议。"
|
description="待接入生命体征、健康档案、慢病信息和异常复核数据源。"
|
||||||
icon={HeartPulse}
|
icon={HeartPulse}
|
||||||
phase="一期"
|
phase="待接入"
|
||||||
metrics={[
|
|
||||||
{ label: "今日记录", value: "236", detail: "覆盖重点老人 100%" },
|
|
||||||
{ label: "异常体征", value: "9", detail: "血压异常 5 条,血氧异常 1 条" },
|
|
||||||
{ label: "待医护复核", value: "3", detail: "需在 30 分钟内处理" },
|
|
||||||
]}
|
|
||||||
workflows={["录入生命体征", "维护健康摘要", "识别异常指标", "形成处理建议并归档"]}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,15 +7,9 @@ export default function NoticesPage(): React.ReactElement {
|
|||||||
<ModulePage
|
<ModulePage
|
||||||
title="公告通知"
|
title="公告通知"
|
||||||
eyebrow="公告发布与阅读状态"
|
eyebrow="公告发布与阅读状态"
|
||||||
description="按角色和范围发布公告,区分草稿、发布、未读和已读状态。"
|
description="待接入公告草稿、发布范围、阅读状态和通知记录数据源。"
|
||||||
icon={Bell}
|
icon={Bell}
|
||||||
phase="一期"
|
phase="待接入"
|
||||||
metrics={[
|
|
||||||
{ label: "已发布公告", value: "18", detail: "本月面向全员 5 条" },
|
|
||||||
{ label: "未读消息", value: "64", detail: "护理人员未读占比最高" },
|
|
||||||
{ label: "草稿", value: "3", detail: "草稿不会对目标用户可见" },
|
|
||||||
]}
|
|
||||||
workflows={["创建公告草稿", "选择目标角色与范围", "发布通知", "跟踪阅读状态"]}
|
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,233 +0,0 @@
|
|||||||
"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";
|
|
||||||
import { Select } from "@/components/ui/select";
|
|
||||||
import { Table } from "@/components/ui/table";
|
|
||||||
|
|
||||||
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>
|
|
||||||
<div className="relative block">
|
|
||||||
<Filter className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
|
|
||||||
<Select
|
|
||||||
aria-label="按状态筛选"
|
|
||||||
className="w-full pl-9"
|
|
||||||
onValueChange={updateStatus}
|
|
||||||
options={statusOptions.map((option) => ({ value: option, label: option }))}
|
|
||||||
value={status}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="overflow-x-auto">
|
|
||||||
<Table className="w-full min-w-[860px] text-sm">
|
|
||||||
<Table.Header className="bg-secondary text-left text-xs text-muted-foreground">
|
|
||||||
<Table.Row>
|
|
||||||
<Table.Head className="px-4 py-3 font-medium">记录</Table.Head>
|
|
||||||
<Table.Head className="px-4 py-3 font-medium">分类</Table.Head>
|
|
||||||
<Table.Head className="px-4 py-3 font-medium">负责人</Table.Head>
|
|
||||||
<Table.Head className="px-4 py-3 font-medium">状态</Table.Head>
|
|
||||||
<Table.Head className="px-4 py-3 font-medium">标记</Table.Head>
|
|
||||||
<Table.Head className="px-4 py-3 text-right font-medium">操作</Table.Head>
|
|
||||||
</Table.Row>
|
|
||||||
</Table.Header>
|
|
||||||
<Table.Body className="divide-y bg-card">
|
|
||||||
{visibleRecords.map((record) => (
|
|
||||||
<Table.Row key={record.id}>
|
|
||||||
<Table.Cell 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>
|
|
||||||
</Table.Cell>
|
|
||||||
<Table.Cell className="px-4 py-3 text-muted-foreground">{record.category}</Table.Cell>
|
|
||||||
<Table.Cell className="px-4 py-3">{record.owner}</Table.Cell>
|
|
||||||
<Table.Cell className="px-4 py-3">
|
|
||||||
<Badge variant={record.statusTone}>{record.status}</Badge>
|
|
||||||
</Table.Cell>
|
|
||||||
<Table.Cell className="px-4 py-3">
|
|
||||||
<Badge variant={record.priority === "高" ? "danger" : record.priority === "中" ? "warning" : "secondary"}>
|
|
||||||
{record.priority}优先级
|
|
||||||
</Badge>
|
|
||||||
</Table.Cell>
|
|
||||||
<Table.Cell 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>
|
|
||||||
</Table.Cell>
|
|
||||||
</Table.Row>
|
|
||||||
))}
|
|
||||||
{visibleRecords.length === 0 ? (
|
|
||||||
<Table.Row>
|
|
||||||
<Table.Cell className="px-4 py-8 text-center text-muted-foreground" colSpan={6}>
|
|
||||||
暂无匹配记录
|
|
||||||
</Table.Cell>
|
|
||||||
</Table.Row>
|
|
||||||
) : null}
|
|
||||||
</Table.Body>
|
|
||||||
</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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,180 +1,84 @@
|
|||||||
import type { LucideIcon } from "lucide-react";
|
import type { LucideIcon } from "lucide-react";
|
||||||
import { ArrowRight, BarChart3, CheckCircle2, Flag } from "lucide-react";
|
import { Database, ExternalLink } from "lucide-react";
|
||||||
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
import { Badge } from "@/components/ui/badge";
|
||||||
import { Button } from "@/components/ui/button";
|
import { LinkButton } from "@/components/ui/button";
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
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;
|
|
||||||
value: string;
|
|
||||||
detail: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
type ModulePageProps = {
|
type ModulePageProps = {
|
||||||
title: string;
|
title: string;
|
||||||
eyebrow: string;
|
eyebrow: string;
|
||||||
description: string;
|
description: string;
|
||||||
icon: LucideIcon;
|
icon: LucideIcon;
|
||||||
phase: "一期" | "二期预留" | "三期预留";
|
phase: "待接入" | "二期预留" | "三期预留";
|
||||||
metrics: ModuleMetric[];
|
|
||||||
workflows: string[];
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const STATUS_OPTIONS: Array<{ status: string; tone: CmsRecordTone }> = [
|
const realWorkspaceLinks = [
|
||||||
{ status: "进行中", tone: "warning" },
|
{ href: "/app/dashboard", label: "运营看板" },
|
||||||
{ status: "已归档", tone: "success" },
|
{ href: "/app/elders", label: "老人档案" },
|
||||||
{ status: "需复核", tone: "danger" },
|
{ href: "/app/beds", label: "床位房间" },
|
||||||
{ status: "待处理", tone: "secondary" },
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const PRIORITY_OPTIONS: CmsRecord["priority"][] = ["高", "中", "低"];
|
export function ModulePage({ title, eyebrow, description, icon: Icon, phase }: ModulePageProps): React.ReactElement {
|
||||||
|
|
||||||
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 (
|
return (
|
||||||
<div className="mx-auto flex w-full max-w-7xl flex-col gap-6">
|
<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">
|
<section className="flex flex-col gap-3 border-b pb-4 lg:flex-row lg:items-start lg:justify-between">
|
||||||
<div className="max-w-3xl">
|
<div className="flex min-w-0 items-center gap-3">
|
||||||
<Badge variant={phase === "一期" ? "success" : "secondary"}>{phase}</Badge>
|
<span className="inline-flex size-9 items-center justify-center rounded-md bg-secondary text-primary">
|
||||||
<div className="mt-4 flex items-center gap-3">
|
<Icon className="size-4" aria-hidden="true" />
|
||||||
<span className="inline-flex size-11 items-center justify-center rounded-md bg-secondary text-primary">
|
|
||||||
<Icon className="size-5" aria-hidden="true" />
|
|
||||||
</span>
|
</span>
|
||||||
<div>
|
<div className="min-w-0">
|
||||||
<p className="text-xs font-medium text-muted-foreground">{eyebrow}</p>
|
<div className="flex items-center gap-2">
|
||||||
<h1 className="text-2xl font-semibold tracking-normal md:text-3xl">{title}</h1>
|
<h1 className="truncate text-xl font-semibold tracking-normal">{title}</h1>
|
||||||
|
<Badge variant="secondary">{phase}</Badge>
|
||||||
</div>
|
</div>
|
||||||
|
<p className="mt-1 truncate text-sm text-muted-foreground">{eyebrow}</p>
|
||||||
|
<p className="mt-2 max-w-3xl text-sm text-muted-foreground">{description}</p>
|
||||||
</div>
|
</div>
|
||||||
<p className="mt-3 text-sm text-muted-foreground">{description}</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Button variant="outline">筛选</Button>
|
|
||||||
<Button>
|
|
||||||
新增记录
|
|
||||||
<ArrowRight className="size-4" aria-hidden="true" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="grid gap-4 md:grid-cols-3">
|
<section className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_24rem]">
|
||||||
{metrics.map((metric) => (
|
<Card>
|
||||||
<Card key={metric.label}>
|
<CardHeader>
|
||||||
<CardHeader className="p-4">
|
<CardTitle className="flex items-center gap-2 text-base">
|
||||||
<CardDescription>{metric.label}</CardDescription>
|
<Database className="size-5 text-primary" aria-hidden="true" />
|
||||||
<CardTitle className="text-2xl">{metric.value}</CardTitle>
|
数据状态
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>当前模块未接入真实业务数据源。</CardDescription>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardContent className="p-4 pt-0">
|
<CardContent>
|
||||||
<p className="text-xs text-muted-foreground">{metric.detail}</p>
|
<dl className="grid gap-3 text-sm">
|
||||||
|
<div className="flex items-center justify-between gap-4 border-b pb-3">
|
||||||
|
<dt className="text-muted-foreground">业务记录</dt>
|
||||||
|
<dd className="font-medium">暂不展示</dd>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between gap-4 border-b pb-3">
|
||||||
|
<dt className="text-muted-foreground">统计指标</dt>
|
||||||
|
<dd className="font-medium">暂不展示</dd>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between gap-4">
|
||||||
|
<dt className="text-muted-foreground">待办流程</dt>
|
||||||
|
<dd className="font-medium">待真实流程接入</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
))}
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className="grid gap-4 lg:grid-cols-[0.72fr_1.28fr]">
|
<Card>
|
||||||
<div className="rounded-lg border bg-card p-5">
|
<CardHeader>
|
||||||
<div className="flex items-center gap-3">
|
<CardTitle className="text-base">已接入工作区</CardTitle>
|
||||||
<span className="inline-flex size-10 items-center justify-center rounded-md bg-secondary text-primary">
|
<CardDescription>以下页面展示真实系统数据。</CardDescription>
|
||||||
<BarChart3 className="size-5" aria-hidden="true" />
|
</CardHeader>
|
||||||
</span>
|
<CardContent className="grid gap-2">
|
||||||
<div>
|
{realWorkspaceLinks.map((link) => (
|
||||||
<h2 className="text-base font-semibold">分析摘要</h2>
|
<LinkButton className="w-full justify-between" href={link.href} key={link.href} variant="outline">
|
||||||
<p className="text-sm text-muted-foreground">内置样例数据用于看板和列表联动。</p>
|
{link.label}
|
||||||
</div>
|
<ExternalLink className="size-4" aria-hidden="true" />
|
||||||
</div>
|
</LinkButton>
|
||||||
<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>{workflow}</span>
|
|
||||||
</li>
|
|
||||||
))}
|
))}
|
||||||
</ol>
|
</CardContent>
|
||||||
</div>
|
</Card>
|
||||||
</div>
|
|
||||||
|
|
||||||
<CmsModuleClient records={records} />
|
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user