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

client/src/pages/PortalHomePage.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useMemo, useState } from "react";
 import { Link } from "react-router-dom";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { toast } from "sonner";
@@ -19,12 +20,19 @@ import { useAuth } from "../auth/AuthContext";
 import { hasAnyPermission, isManagerRole } from "../auth/permissions";
 import { EmployeeAvatar } from "../components/common/EmployeeAvatar";
 import { EmptyStateCard } from "../components/common/EmptyStateCard";
+import { WelcomeDialog } from "../components/onboarding/WelcomeDialog";
 import { MetricCard } from "../components/patterns/MetricCard";
 import { PageScaffold } from "../components/patterns/PageScaffold";
 import { SectionPanel } from "../components/patterns/SectionPanel";
 import { WorkbenchHero } from "../components/patterns/WorkbenchHero";
 import { Button } from "../components/ui/button";
 import { employeePortalSchema, managerPortalSchema } from "../features/portal/schema";
+import {
+  clearWelcomeDialogFlag,
+  dismissGettingStartedCard,
+  shouldShowGettingStartedCard,
+  shouldShowWelcomeDialog,
+} from "../lib/onboardingGuide";
 import { readRecentVisits } from "../lib/recentVisits";
 
 type SummaryItem = {
@@ -54,6 +62,14 @@ type QuickActionConfig = {
   disabled?: boolean;
 };
 
+type GettingStartedChecklistItem = {
+  key: string;
+  title: string;
+  description: string;
+  href: string;
+  completed: boolean;
+};
+
 const LEAVE_PORTAL_PERMISSIONS = ["leave.view_own", "leave.view_all", "leave.create", "leave.submit"];
 const EXPENSE_PORTAL_PERMISSIONS = ["expense.view_own", "expense.view_all", "expense.create", "expense.proxy_manage"];
 const TODO_SEVERITY_RANK = {
@@ -481,6 +497,70 @@ function AdoptionSummaryPanel({ adoptionSummary }: { adoptionSummary: NonNullabl
   );
 }
 
+function GettingStartedCard({
+  items,
+  completedCount,
+  onDismiss,
+}: {
+  items: GettingStartedChecklistItem[];
+  completedCount: number;
+  onDismiss: () => void;
+}) {
+  const progressPercent = Math.round((completedCount / items.length) * 100);
+
+  return (
+    <SectionPanel
+      title="快速上手"
+      description="先完成基础资料和入口熟悉，再进入请假、通知等日常动作。"
+      actions={(
+        <button
+          type="button"
+          className="text-sm font-medium text-zinc-500 transition-colors hover:text-zinc-700"
+          data-testid="onboarding-getting-started-dismiss"
+          onClick={onDismiss}
+        >
+          关闭清单
+        </button>
+      )}
+      className="shadow-sm"
+    >
+      <div className="space-y-3" data-testid="onboarding-getting-started-card">
+        {items.map((item) => (
+          <Link
+            key={item.key}
+            to={item.href}
+            className="flex items-center gap-3 rounded-2xl border border-zinc-200 bg-white px-4 py-4 transition-colors hover:bg-zinc-50"
+          >
+            <span className={item.completed ? "text-emerald-600" : "text-zinc-400"}>
+              <span className="material-symbols-outlined text-[20px]">
+                {item.completed ? "check_circle" : "radio_button_unchecked"}
+              </span>
+            </span>
+            <div className="min-w-0 flex-1">
+              <div className="font-medium text-zinc-900">{item.title}</div>
+              <div className="mt-1 text-sm leading-6 text-zinc-500">{item.description}</div>
+            </div>
+            <span className="material-symbols-outlined text-zinc-400">arrow_forward</span>
+          </Link>
+        ))}
+
+        <div className="rounded-2xl border border-zinc-200 bg-zinc-50 px-4 py-4">
+          <div className="flex items-center justify-between gap-3 text-sm">
+            <span className="font-medium text-zinc-900">完成进度</span>
+            <span className="text-zinc-500">{completedCount}/{items.length}</span>
+          </div>
+          <div className="mt-3 h-2 overflow-hidden rounded-full bg-zinc-200">
+            <div
+              className="h-full rounded-full bg-primary transition-all"
+              style={{ width: `${progressPercent}%` }}
+            />
+          </div>
+        </div>
+      </div>
+    </SectionPanel>
+  );
+}
+
 function QuickActionTile({
   icon,
   label,
@@ -625,7 +705,9 @@ function RecentActivitiesPanel({ items }: { items: PortalRecentActivity[] }) {
 
 export function PortalHomePage() {
   const queryClient = useQueryClient();
-  const { permissions } = useAuth();
+  const { me, permissions } = useAuth();
+  const [showWelcome, setShowWelcome] = useState(false);
+  const [showGettingStarted, setShowGettingStarted] = useState(false);
   const portalQuery = useQuery({ queryKey: ["portal-home"], queryFn: () => fetchPortalHome() });
   const attendanceTodayQuery = useQuery({
     queryKey: ["portal-home", "attendance", "today"],
@@ -635,6 +717,11 @@ export function PortalHomePage() {
   const canSetupWorkspace = hasAnyPermission(permissions, ["system.settings"]);
   const isManagerView = isManagerRole(permissions);
 
+  useEffect(() => {
+    setShowWelcome(shouldShowWelcomeDialog());
+    setShowGettingStarted(shouldShowGettingStartedCard());
+  }, []);
+
   const attendanceClockInMutation = useMutation({
     mutationFn: () => clockInAttendance(),
     onSuccess: async (response) => {
@@ -696,6 +783,47 @@ export function PortalHomePage() {
     pending: attendanceClockInMutation.isPending || attendanceClockOutMutation.isPending,
   });
   const todoAggregateItems = buildTodoAggregateItems(payload);
+  const gettingStartedItems = useMemo<GettingStartedChecklistItem[]>(() => ([
+    {
+      key: "profile",
+      title: "完善个人资料",
+      description: "补充紧急联系人和银行账户",
+      href: "/settings/profile",
+      completed: (me?.profileCompleteness.score ?? 0) >= 50,
+    },
+    {
+      key: "notification-preferences",
+      title: "设置通知偏好",
+      description: "选择是否接收外部渠道推送",
+      href: "/settings/profile",
+      completed: true,
+    },
+    {
+      key: "leave-flow",
+      title: "了解请假流程",
+      description: "查看假期类型和余额",
+      href: "/leave-requests",
+      completed: false,
+    },
+    {
+      key: "notifications",
+      title: "查看通知中心",
+      description: "了解审批和业务消息",
+      href: "/notifications",
+      completed: false,
+    },
+  ]), [me?.profileCompleteness.score]);
+  const gettingStartedCompletedCount = gettingStartedItems.filter((item) => item.completed).length;
+
+  function handleCloseWelcome() {
+    clearWelcomeDialogFlag();
+    setShowWelcome(false);
+  }
+
+  function handleDismissGettingStarted() {
+    dismissGettingStartedCard();
+    setShowGettingStarted(false);
+  }
 
   const employeeSummaryItems = ([
     {
@@ -794,6 +922,8 @@ export function PortalHomePage() {
 
   return (
     <PageScaffold>
+      <WelcomeDialog open={showWelcome} onClose={handleCloseWelcome} />
+
       <WorkbenchHero
         eyebrow={isManagerView ? "管理工作台" : "个人工作台"}
         title={`你好，${payload.greeting.name}`}
@@ -829,6 +959,14 @@ export function PortalHomePage() {
         ))}
       </div>
 
+      {showGettingStarted ? (
+        <GettingStartedCard
+          items={gettingStartedItems}
+          completedCount={gettingStartedCompletedCount}
+          onDismiss={handleDismissGettingStarted}
+        />
+      ) : null}
+
       <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr),minmax(0,1fr)]">
         <QuickActionsPanel items={quickActions} />
         <TodoAggregatePanel items={todoAggregateItems} />