86 lines
3.5 KiB
TypeScript
86 lines
3.5 KiB
TypeScript
import type { LucideIcon } from "lucide-react";
|
|
import { Database, ExternalLink } from "lucide-react";
|
|
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { LinkButton } from "@/components/ui/button";
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
|
|
|
type ModulePageProps = {
|
|
title: string;
|
|
eyebrow: string;
|
|
description: string;
|
|
icon: LucideIcon;
|
|
phase: "待接入" | "二期预留" | "三期预留";
|
|
};
|
|
|
|
const realWorkspaceLinks = [
|
|
{ href: "/app/dashboard", label: "运营看板" },
|
|
{ href: "/app/elders", label: "老人档案" },
|
|
{ href: "/app/beds", label: "床位房间" },
|
|
];
|
|
|
|
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 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>
|
|
</div>
|
|
</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>
|
|
|
|
<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>
|
|
);
|
|
}
|