fix: remove fake module data

This commit is contained in:
2026-07-02 18:25:09 -07:00
parent 7718d9759c
commit 0b4ed0c0f6
10 changed files with 113 additions and 442 deletions

View File

@@ -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>
);
}

View File

@@ -1,180 +1,84 @@
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 { Button } from "@/components/ui/button";
import { LinkButton } 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;
value: string;
detail: string;
};
type ModulePageProps = {
title: string;
eyebrow: string;
description: string;
icon: LucideIcon;
phase: "一期" | "二期预留" | "三期预留";
metrics: ModuleMetric[];
workflows: string[];
phase: "待接入" | "二期预留" | "三期预留";
};
const STATUS_OPTIONS: Array<{ status: string; tone: CmsRecordTone }> = [
{ status: "进行中", tone: "warning" },
{ status: "已归档", tone: "success" },
{ status: "需复核", tone: "danger" },
{ status: "待处理", tone: "secondary" },
const realWorkspaceLinks = [
{ href: "/app/dashboard", label: "运营看板" },
{ href: "/app/elders", label: "老人档案" },
{ href: "/app/beds", label: "床位房间" },
];
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;
export function ModulePage({ title, eyebrow, description, icon: Icon, phase }: ModulePageProps): React.ReactElement {
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">
<div className="max-w-3xl">
<Badge variant={phase === "一期" ? "success" : "secondary"}>{phase}</Badge>
<div className="mt-4 flex items-center gap-3">
<span className="inline-flex size-11 items-center justify-center rounded-md bg-secondary text-primary">
<Icon className="size-5" aria-hidden="true" />
</span>
<div>
<p className="text-xs font-medium text-muted-foreground">{eyebrow}</p>
<h1 className="text-2xl font-semibold tracking-normal md:text-3xl">{title}</h1>
<section className="flex flex-col gap-3 border-b pb-4 lg:flex-row lg:items-start lg:justify-between">
<div className="flex min-w-0 items-center gap-3">
<span className="inline-flex size-9 items-center justify-center rounded-md bg-secondary text-primary">
<Icon className="size-4" aria-hidden="true" />
</span>
<div className="min-w-0">
<div className="flex items-center gap-2">
<h1 className="truncate text-xl font-semibold tracking-normal">{title}</h1>
<Badge variant="secondary">{phase}</Badge>
</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>
<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>
</section>
<section className="grid gap-4 md:grid-cols-3">
{metrics.map((metric) => (
<Card key={metric.label}>
<CardHeader className="p-4">
<CardDescription>{metric.label}</CardDescription>
<CardTitle className="text-2xl">{metric.value}</CardTitle>
</CardHeader>
<CardContent className="p-4 pt-0">
<p className="text-xs text-muted-foreground">{metric.detail}</p>
</CardContent>
</Card>
))}
</section>
<section className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_24rem]">
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2 text-base">
<Database className="size-5 text-primary" aria-hidden="true" />
</CardTitle>
<CardDescription></CardDescription>
</CardHeader>
<CardContent>
<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>
</Card>
<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>{workflow}</span>
</li>
))}
</ol>
</div>
</div>
<CmsModuleClient records={records} />
<Card>
<CardHeader>
<CardTitle className="text-base"></CardTitle>
<CardDescription></CardDescription>
</CardHeader>
<CardContent className="grid gap-2">
{realWorkspaceLinks.map((link) => (
<LinkButton className="w-full justify-between" href={link.href} key={link.href} variant="outline">
{link.label}
<ExternalLink className="size-4" aria-hidden="true" />
</LinkButton>
))}
</CardContent>
</Card>
</section>
</div>
);