refactor: 简化工作台上手入口和个人设置(portal-onboarding-profile-simplification)
这个提交包含在:
@@ -25,8 +25,6 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs"
|
||||
import { employeePortalSchema, managerPortalSchema } from "../features/portal/schema";
|
||||
import {
|
||||
clearWelcomeDialogFlag,
|
||||
dismissGettingStartedCard,
|
||||
shouldShowGettingStartedCard,
|
||||
shouldShowWelcomeDialog,
|
||||
} from "../lib/onboardingGuide";
|
||||
import { readRecentVisits } from "../lib/recentVisits";
|
||||
@@ -77,14 +75,6 @@ type PortalFocusLink = {
|
||||
to: string;
|
||||
};
|
||||
|
||||
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 PROCUREMENT_PORTAL_PERMISSIONS = ["procurement.view_own", "procurement.view_all", "procurement.create", "procurement.submit"];
|
||||
@@ -581,70 +571,6 @@ function PortalSectionFallback({
|
||||
);
|
||||
}
|
||||
|
||||
function GettingStartedCard({
|
||||
items,
|
||||
completedCount,
|
||||
onDismiss,
|
||||
}: {
|
||||
items: GettingStartedChecklistItem[];
|
||||
completedCount: number;
|
||||
onDismiss: () => void;
|
||||
}) {
|
||||
const progressPercent = items.length ? Math.round((completedCount / items.length) * 100) : 0;
|
||||
|
||||
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="portal-list-card flex items-center gap-3"
|
||||
>
|
||||
<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-lg border border-slate-200 bg-slate-50 px-3.5 py-3">
|
||||
<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-slate-200">
|
||||
<div
|
||||
className="h-full rounded-full bg-primary transition-all"
|
||||
style={{ width: `${progressPercent}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SectionPanel>
|
||||
);
|
||||
}
|
||||
|
||||
function QuickActionTile({
|
||||
icon,
|
||||
label,
|
||||
@@ -882,7 +808,6 @@ function ActivityAnnouncementsPanel({
|
||||
export function PortalHomePage() {
|
||||
const { me, permissions } = useAuth();
|
||||
const [showWelcome, setShowWelcome] = useState(false);
|
||||
const [showGettingStarted, setShowGettingStarted] = useState(false);
|
||||
const portalQuery = useQuery({ queryKey: ["portal-home"], queryFn: () => fetchPortalHome() });
|
||||
const workflowSummaryQuery = useQuery({
|
||||
enabled: hasAnyPermission(permissions, APPROVAL_PORTAL_PERMISSIONS),
|
||||
@@ -898,41 +823,8 @@ export function PortalHomePage() {
|
||||
|
||||
useEffect(() => {
|
||||
setShowWelcome(shouldShowWelcomeDialog());
|
||||
setShowGettingStarted(shouldShowGettingStartedCard());
|
||||
}, []);
|
||||
|
||||
const gettingStartedItems: 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,
|
||||
},
|
||||
];
|
||||
const gettingStartedCompletedCount = gettingStartedItems.filter((item) => item.completed).length;
|
||||
|
||||
if (portalQuery.isLoading) {
|
||||
return <div className="card-std p-5 text-sm text-zinc-500">加载工作台中...</div>;
|
||||
}
|
||||
@@ -976,11 +868,6 @@ export function PortalHomePage() {
|
||||
setShowWelcome(false);
|
||||
}
|
||||
|
||||
function handleDismissGettingStarted() {
|
||||
dismissGettingStartedCard();
|
||||
setShowGettingStarted(false);
|
||||
}
|
||||
|
||||
const employeeSummaryItems = ([
|
||||
{
|
||||
key: "expense",
|
||||
@@ -1208,23 +1095,6 @@ export function PortalHomePage() {
|
||||
hiddenFocusCount={Math.max(todoAggregateItems.length - 1, 0)}
|
||||
/>
|
||||
|
||||
{showGettingStarted ? (
|
||||
<ErrorBoundary
|
||||
fallback={(
|
||||
<PortalSectionFallback
|
||||
title="快速上手"
|
||||
description="基础设置"
|
||||
/>
|
||||
)}
|
||||
>
|
||||
<GettingStartedCard
|
||||
items={gettingStartedItems}
|
||||
completedCount={gettingStartedCompletedCount}
|
||||
onDismiss={handleDismissGettingStarted}
|
||||
/>
|
||||
</ErrorBoundary>
|
||||
) : null}
|
||||
|
||||
<SecondaryWorkspacePanel
|
||||
title="团队与通知"
|
||||
description="团队状态、动态和公告"
|
||||
|
||||
在新工单中引用
屏蔽一个用户