R64 A1-A6：新员工入门引导

client/src/components/onboarding/WelcomeDialog.tsx

@@ -0,0 +1,106 @@
+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: "event_available",
+    label: "请假申请",
+    description: "提交和查看请假流程",
+    to: "/leave-requests",
+  },
+  {
+    icon: "request_quote",
+    label: "报销提交",
+    description: "进入报销工作台创建单据",
+    to: "/reimbursements",
+  },
+  {
+    icon: "schedule",
+    label: "考勤打卡",
+    description: "查看今日状态并完成打卡",
+    to: "/attendance",
+  },
+  {
+    icon: "manage_accounts",
+    label: "个人设置",
+    description: "补充资料并维护通知偏好",
+    to: "/settings/profile",
+  },
+  {
+    icon: "notifications",
+    label: "通知中心",
+    description: "查看审批和业务消息",
+    to: "/notifications",
+  },
+];
+
+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-2">
+          {WELCOME_LINKS.map((item) => (
+            <Link
+              key={item.label}
+              to={item.to}
+              onClick={onClose}
+              className="rounded-2xl border border-zinc-200 bg-white px-4 py-4 shadow-sm transition-colors hover:bg-zinc-50"
+            >
+              <div className="flex items-start gap-3">
+                <div className="flex size-10 items-center justify-center rounded-2xl 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-2xl 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>
+  );
+}