95 行
2.7 KiB
TypeScript
95 行
2.7 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import { Button } from "../ui/button";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "../ui/dialog";
|
|
|
|
type WelcomeLinkItem = {
|
|
icon: string;
|
|
label: string;
|
|
description: string;
|
|
to: string;
|
|
};
|
|
|
|
const WELCOME_LINKS: WelcomeLinkItem[] = [
|
|
{
|
|
icon: "fact_check",
|
|
label: "处理待办",
|
|
description: "先看今天需要审批或跟进的事项",
|
|
to: "/workflow/tasks",
|
|
},
|
|
{
|
|
icon: "request_quote",
|
|
label: "提交报销",
|
|
description: "录入票据和报销说明，查看进度",
|
|
to: "/reimbursements",
|
|
},
|
|
{
|
|
icon: "event_available",
|
|
label: "请假记录",
|
|
description: "日常请假走企业微信，OA 查看记录和状态",
|
|
to: "/leave-requests",
|
|
},
|
|
];
|
|
|
|
export function WelcomeDialog({
|
|
open,
|
|
onClose,
|
|
}: {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
}) {
|
|
return (
|
|
<Dialog open={open} onOpenChange={(nextOpen) => !nextOpen && onClose()}>
|
|
<DialogContent className="max-w-2xl" data-testid="onboarding-welcome-dialog">
|
|
<DialogHeader>
|
|
<DialogTitle>常用入口</DialogTitle>
|
|
<DialogDescription>
|
|
你的账号已就绪。先从工作台处理待办，也可以直接进入常用业务。
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="grid gap-3 sm:grid-cols-3">
|
|
{WELCOME_LINKS.map((item) => (
|
|
<Link
|
|
key={item.label}
|
|
to={item.to}
|
|
onClick={onClose}
|
|
className="rounded-lg border border-zinc-200 bg-white px-4 py-4 shadow-sm transition-colors hover:bg-zinc-50"
|
|
>
|
|
<div className="flex h-full flex-col gap-3">
|
|
<div className="flex size-10 items-center justify-center rounded-md bg-primary/10 text-primary">
|
|
<span className="material-symbols-outlined text-[20px]">{item.icon}</span>
|
|
</div>
|
|
<div className="min-w-0">
|
|
<div className="font-medium text-zinc-900">{item.label}</div>
|
|
<div className="mt-1 text-sm leading-6 text-zinc-500">{item.description}</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
<div className="rounded-lg border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm text-zinc-600">
|
|
关闭后不再显示这个提示；所有功能都可以从左侧菜单进入。
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button
|
|
type="button"
|
|
data-testid="onboarding-welcome-close"
|
|
onClick={onClose}
|
|
>
|
|
开始使用
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|