1160 行
40 KiB
TypeScript
1160 行
40 KiB
TypeScript
import { type ReactNode, useEffect, useState } from "react";
|
||
import { Link } from "react-router-dom";
|
||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||
import { toast } from "sonner";
|
||
import {
|
||
clockInAttendance,
|
||
clockOutAttendance,
|
||
fetchMyTodayAttendance,
|
||
type AttendanceTodayResponse,
|
||
} from "../api/attendance";
|
||
import { mapApiErrorMessage } from "../api/errorMessages";
|
||
import {
|
||
fetchPortalHome,
|
||
type PortalHomePayload,
|
||
type PortalRecentActivity,
|
||
type PortalTeamStatusItem,
|
||
} from "../api/portal";
|
||
import { isApiError } from "../api/types";
|
||
import { useAuth } from "../auth/AuthContext";
|
||
import { hasAnyPermission, isManagerRole } from "../auth/permissions";
|
||
import { EmployeeAvatar } from "../components/common/EmployeeAvatar";
|
||
import { ErrorBoundary } from "../components/common/ErrorBoundary";
|
||
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 { 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";
|
||
|
||
type SummaryItem = {
|
||
key: string;
|
||
href: string;
|
||
label: string;
|
||
value: string;
|
||
note?: string;
|
||
tone?: "normal" | "warning";
|
||
};
|
||
|
||
type TodoAggregateItem = {
|
||
title: string;
|
||
sourceLabel: string;
|
||
severity: "normal" | "warning" | "high";
|
||
href: string;
|
||
icon: string;
|
||
};
|
||
|
||
type QuickActionConfig = {
|
||
key: string;
|
||
icon: string;
|
||
label: string;
|
||
description: string;
|
||
to?: string;
|
||
onClick?: () => void;
|
||
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 = {
|
||
high: 3,
|
||
warning: 2,
|
||
normal: 1,
|
||
} as const;
|
||
|
||
function isSummaryItem(item: SummaryItem | null): item is SummaryItem {
|
||
return Boolean(item);
|
||
}
|
||
|
||
function severityTone(severity?: "normal" | "warning" | "high") {
|
||
if (severity === "high") return "danger" as const;
|
||
if (severity === "warning") return "warning" as const;
|
||
return "neutral" as const;
|
||
}
|
||
|
||
function pickCards(cards: PortalHomePayload["cards"], keys: string[]) {
|
||
const map = new Map(cards.map((card) => [card.key, card]));
|
||
return keys.map((key) => map.get(key)).filter((card): card is PortalHomePayload["cards"][number] => Boolean(card));
|
||
}
|
||
|
||
function compactCards(cards: PortalHomePayload["cards"], excludedKeys: string[]) {
|
||
return cards.filter((card) => !excludedKeys.includes(card.key));
|
||
}
|
||
|
||
function formatWeeklyStatus(payload: PortalHomePayload["weeklyReport"]) {
|
||
if (!payload) return "未启用";
|
||
return payload.status === "submitted" ? "已提交" : "待填写";
|
||
}
|
||
|
||
function resolveErrorMessage(error: unknown) {
|
||
if (isApiError(error)) {
|
||
return `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
|
||
}
|
||
if (error instanceof Error) {
|
||
return error.message;
|
||
}
|
||
return "请求失败，请稍后重试。";
|
||
}
|
||
|
||
function isAttendanceFeatureDisabled(error: unknown) {
|
||
return isApiError(error) && error.code === "VALID_001" && error.details?.featureFlag === "attendance_v1_disabled";
|
||
}
|
||
|
||
function formatRelativeTime(value: string | null) {
|
||
if (!value) {
|
||
return "-";
|
||
}
|
||
|
||
const timestamp = new Date(value).getTime();
|
||
if (Number.isNaN(timestamp)) {
|
||
return "-";
|
||
}
|
||
|
||
const diffMs = Date.now() - timestamp;
|
||
if (diffMs < 60 * 1000) {
|
||
return "刚刚";
|
||
}
|
||
|
||
const diffMinutes = Math.floor(diffMs / (60 * 1000));
|
||
if (diffMinutes < 60) {
|
||
return `${diffMinutes} 分钟前`;
|
||
}
|
||
|
||
const diffHours = Math.floor(diffMinutes / 60);
|
||
if (diffHours < 24) {
|
||
return `${diffHours} 小时前`;
|
||
}
|
||
|
||
const diffDays = Math.floor(diffHours / 24);
|
||
return `${diffDays} 天前`;
|
||
}
|
||
|
||
function formatShortTime(value: string | null) {
|
||
if (!value) {
|
||
return "--:--";
|
||
}
|
||
try {
|
||
return new Date(value).toLocaleTimeString("zh-CN", {
|
||
hour: "2-digit",
|
||
minute: "2-digit",
|
||
hour12: false,
|
||
});
|
||
} catch {
|
||
return value;
|
||
}
|
||
}
|
||
|
||
function formatWorkMinutes(value: number | null | undefined) {
|
||
if (value == null) {
|
||
return "-";
|
||
}
|
||
const hours = Math.floor(value / 60);
|
||
const minutes = value % 60;
|
||
return `${hours}h ${String(minutes).padStart(2, "0")}m`;
|
||
}
|
||
|
||
function buildTodoAggregateItems(payload: PortalHomePayload) {
|
||
const cards = Array.isArray(payload.cards) ? payload.cards : [];
|
||
const items: TodoAggregateItem[] = [];
|
||
if (payload.pendingTasks.count > 0) {
|
||
items.push({
|
||
title: `审批待办 ${payload.pendingTasks.count} 条`,
|
||
sourceLabel: "审批",
|
||
severity: "warning",
|
||
href: payload.pendingTasks.href,
|
||
icon: "fact_check",
|
||
});
|
||
}
|
||
if ((payload.todoSummary?.openCount ?? 0) > 0) {
|
||
items.push({
|
||
title: `TODO 待办 ${payload.todoSummary?.openCount ?? 0} 条`,
|
||
sourceLabel: "TODO",
|
||
severity: (payload.todoSummary?.highPriorityCount ?? 0) > 0 ? "high" : "normal",
|
||
href: payload.todoSummary?.href ?? "/todos",
|
||
icon: "check_circle",
|
||
});
|
||
}
|
||
for (const card of cards) {
|
||
if (!card.severity || (card.severity !== "warning" && card.severity !== "high")) {
|
||
continue;
|
||
}
|
||
items.push({
|
||
title: `${card.title}：${card.value}`,
|
||
sourceLabel: "工作台",
|
||
severity: card.severity,
|
||
href: card.href,
|
||
icon: card.severity === "high" ? "priority_high" : "warning",
|
||
});
|
||
}
|
||
|
||
const deduped = new Map<string, TodoAggregateItem>();
|
||
for (const item of items) {
|
||
deduped.set(`${item.title}|${item.href}|${item.sourceLabel}`, item);
|
||
}
|
||
|
||
return Array.from(deduped.values())
|
||
.sort((left, right) => {
|
||
const severityCompare = TODO_SEVERITY_RANK[right.severity] - TODO_SEVERITY_RANK[left.severity];
|
||
if (severityCompare !== 0) {
|
||
return severityCompare;
|
||
}
|
||
return left.title.localeCompare(right.title, "zh-CN");
|
||
})
|
||
.slice(0, 10);
|
||
}
|
||
|
||
function resolveTeamStatusBadge(item: PortalTeamStatusItem) {
|
||
if (item.onLeave) {
|
||
return {
|
||
label: item.leaveType ? `请假 · ${item.leaveType}` : "请假",
|
||
className: "badge-warning",
|
||
};
|
||
}
|
||
if (item.presenceStatus === "office") {
|
||
return { label: "在岗", className: "badge-success" };
|
||
}
|
||
if (item.presenceStatus === "out") {
|
||
return {
|
||
label: "外出",
|
||
className: "inline-flex items-center rounded-full bg-sky-50 px-2.5 py-0.5 text-xs font-semibold text-sky-700 ring-1 ring-inset ring-sky-600/10",
|
||
};
|
||
}
|
||
if (item.presenceStatus === "travel") {
|
||
return {
|
||
label: "差旅",
|
||
className: "inline-flex items-center rounded-full bg-sky-50 px-2.5 py-0.5 text-xs font-semibold text-sky-700 ring-1 ring-inset ring-sky-600/10",
|
||
};
|
||
}
|
||
if (item.presenceStatus === "remote") {
|
||
return { label: "居家", className: "badge-neutral" };
|
||
}
|
||
if (!item.attendanceClockIn) {
|
||
return { label: "未打卡", className: "badge-neutral" };
|
||
}
|
||
return {
|
||
label: "已打卡",
|
||
className: "inline-flex items-center rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-semibold text-slate-700 ring-1 ring-inset ring-slate-600/10",
|
||
};
|
||
}
|
||
|
||
function formatTeamStatusAttendance(item: PortalTeamStatusItem) {
|
||
if (item.onLeave) {
|
||
return item.leaveType ? `${item.leaveType} 已审批` : "今日请假";
|
||
}
|
||
if (item.attendanceClockIn && item.attendanceClockOut) {
|
||
return `${formatShortTime(item.attendanceClockIn)} - ${formatShortTime(item.attendanceClockOut)}`;
|
||
}
|
||
if (item.attendanceClockIn) {
|
||
return `${formatShortTime(item.attendanceClockIn)} 已打卡`;
|
||
}
|
||
if (item.presenceStatus === "travel") {
|
||
return "今日差旅";
|
||
}
|
||
if (item.presenceStatus === "out") {
|
||
return "当前外出";
|
||
}
|
||
if (item.presenceStatus === "remote") {
|
||
return "今日居家办公";
|
||
}
|
||
return "暂无打卡记录";
|
||
}
|
||
|
||
function resolveClockAction(
|
||
attendanceToday: AttendanceTodayResponse | null,
|
||
state: {
|
||
isLoading: boolean;
|
||
isError: boolean;
|
||
featureDisabled: boolean;
|
||
pending: boolean;
|
||
},
|
||
) {
|
||
if (state.pending) {
|
||
return {
|
||
label: "处理中...",
|
||
description: "正在提交考勤动作",
|
||
disabled: true,
|
||
action: null,
|
||
} as const;
|
||
}
|
||
if (state.isLoading) {
|
||
return {
|
||
label: "打卡读取中",
|
||
description: "正在读取今日考勤状态",
|
||
disabled: true,
|
||
action: null,
|
||
} as const;
|
||
}
|
||
if (state.isError && !state.featureDisabled) {
|
||
return {
|
||
label: "打卡不可用",
|
||
description: "当前无法读取今日考勤状态",
|
||
disabled: true,
|
||
action: null,
|
||
} as const;
|
||
}
|
||
if (!attendanceToday) {
|
||
return {
|
||
label: "今日考勤",
|
||
description: "暂无可用考勤数据",
|
||
disabled: true,
|
||
action: null,
|
||
} as const;
|
||
}
|
||
if (!attendanceToday.needClockIn) {
|
||
return {
|
||
label: "今日无需打卡",
|
||
description: "系统已自动排除缺卡统计",
|
||
disabled: true,
|
||
action: null,
|
||
} as const;
|
||
}
|
||
if (!attendanceToday.item?.clockInAt) {
|
||
return {
|
||
label: "上班打卡",
|
||
description: "记录今日到岗时间",
|
||
disabled: false,
|
||
action: "clock-in",
|
||
} as const;
|
||
}
|
||
if (!attendanceToday.item.clockOutAt) {
|
||
return {
|
||
label: "下班打卡",
|
||
description: `已上班 ${formatShortTime(attendanceToday.item.clockInAt)}`,
|
||
disabled: false,
|
||
action: "clock-out",
|
||
} as const;
|
||
}
|
||
return {
|
||
label: "今日已完成",
|
||
description: `工时 ${formatWorkMinutes(attendanceToday.item.workMinutes)}`,
|
||
disabled: true,
|
||
action: null,
|
||
} as const;
|
||
}
|
||
|
||
function SummaryPanel({ title, items }: { title: string; items: SummaryItem[] }) {
|
||
if (!items.length) {
|
||
return <EmptyStateCard title={title} description="暂无摘要。" />;
|
||
}
|
||
|
||
return (
|
||
<SectionPanel title={title}>
|
||
<div className="space-y-3">
|
||
{items.map((item) => (
|
||
<Link
|
||
key={item.key}
|
||
to={item.href}
|
||
className={item.tone === "warning" ? "portal-list-card portal-list-card--warning" : "portal-list-card"}
|
||
>
|
||
<div className="flex items-center justify-between gap-3">
|
||
<div className="font-medium text-zinc-900">{item.label}</div>
|
||
<div className="text-sm font-semibold text-zinc-900">{item.value}</div>
|
||
</div>
|
||
{item.note ? <div className="mt-2 text-sm leading-6 text-zinc-500">{item.note}</div> : null}
|
||
</Link>
|
||
))}
|
||
</div>
|
||
</SectionPanel>
|
||
);
|
||
}
|
||
|
||
function AnnouncementsList({ announcements }: { announcements: PortalHomePayload["announcements"] }) {
|
||
const safeAnnouncements = Array.isArray(announcements) ? announcements : [];
|
||
|
||
return (
|
||
<div className="space-y-3">
|
||
{safeAnnouncements.length ? safeAnnouncements.slice(0, 4).map((item) => (
|
||
<div key={item.id} className="portal-list-card portal-list-card--compact">
|
||
<div className="font-medium text-zinc-900">{item.title}</div>
|
||
<div className="mt-2 text-sm leading-6 text-zinc-600">{item.summary}</div>
|
||
{item.href ? (
|
||
<a className="mt-3 inline-flex text-sm font-medium text-primary hover:underline" href={item.href} rel="noreferrer" target="_blank">
|
||
查看详情
|
||
</a>
|
||
) : null}
|
||
</div>
|
||
)) : <EmptyStateCard title="暂无公告" description="没有公告。" />}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function RecentVisitsPanel() {
|
||
const recentVisits = readRecentVisits();
|
||
|
||
return (
|
||
<SectionPanel title="继续工作">
|
||
<div className="space-y-3">
|
||
{recentVisits.length ? recentVisits.map((item) => (
|
||
<Link key={item.path} to={item.path} className="portal-list-card">
|
||
<div className="font-medium text-zinc-900">{item.title}</div>
|
||
<div className="mt-1 text-xs text-zinc-500">{item.path}</div>
|
||
</Link>
|
||
)) : <EmptyStateCard title="暂无最近访问" description="最近页面会显示在这里。" />}
|
||
</div>
|
||
</SectionPanel>
|
||
);
|
||
}
|
||
|
||
function QuickLinksPanel({ items }: { items: PortalHomePayload["quickLinks"] }) {
|
||
const safeItems = Array.isArray(items) ? items : [];
|
||
|
||
return (
|
||
<SectionPanel title="常用入口">
|
||
<div className="grid gap-3 sm:grid-cols-2">
|
||
{safeItems.length ? safeItems.map((item) => (
|
||
<Link key={item.key} to={item.href} className="portal-list-card text-sm font-medium text-slate-700">
|
||
{item.title}
|
||
</Link>
|
||
)) : <EmptyStateCard title="暂无常用入口" description="尚未配置。" />}
|
||
</div>
|
||
</SectionPanel>
|
||
);
|
||
}
|
||
|
||
function SecondaryCardsPanel({ title, description, cards }: { title: string; description: string; cards: PortalHomePayload["cards"] }) {
|
||
if (!cards.length) {
|
||
return <EmptyStateCard title={title} description="暂无统计项。" />;
|
||
}
|
||
|
||
return (
|
||
<SectionPanel title={title} description={description}>
|
||
<div className="grid gap-3 sm:grid-cols-2">
|
||
{cards.map((card) => (
|
||
<MetricCard
|
||
key={card.key}
|
||
title={card.title}
|
||
value={card.value}
|
||
href={card.href}
|
||
note="查看"
|
||
tone={severityTone(card.severity)}
|
||
/>
|
||
))}
|
||
</div>
|
||
</SectionPanel>
|
||
);
|
||
}
|
||
|
||
function AdoptionSummaryPanel({ adoptionSummary }: { adoptionSummary: NonNullable<PortalHomePayload["adoptionSummary"]> | null }) {
|
||
if (!adoptionSummary) {
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<details className="card-std portal-secondary-drawer">
|
||
<summary className="flex cursor-pointer list-none items-center justify-between gap-3 text-left">
|
||
<div>
|
||
<div className="text-base font-semibold text-zinc-900">试点观测摘要</div>
|
||
<div className="mt-1 text-sm text-zinc-500">管理员按需查看。</div>
|
||
</div>
|
||
<span className="text-xs uppercase tracking-[0.18em] text-zinc-400">展开 / 收起</span>
|
||
</summary>
|
||
<div className="mt-5 grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
|
||
<div className="portal-status-card text-sm">
|
||
<div className="text-zinc-500">近 7 天登录覆盖率</div>
|
||
<div className="mt-2 text-2xl font-semibold text-zinc-900">{adoptionSummary.login7dRate}%</div>
|
||
</div>
|
||
<div className="portal-status-card text-sm">
|
||
<div className="text-zinc-500">周报提交率</div>
|
||
<div className="mt-2 text-2xl font-semibold text-zinc-900">{adoptionSummary.weeklySubmissionRate}%</div>
|
||
</div>
|
||
<div className="portal-status-card text-sm">
|
||
<div className="text-zinc-500">团队状态覆盖率</div>
|
||
<div className="mt-2 text-2xl font-semibold text-zinc-900">{adoptionSummary.presenceCoverageRate}%</div>
|
||
</div>
|
||
<div className="portal-status-card text-sm">
|
||
<div className="text-zinc-500">当前公告数</div>
|
||
<div className="mt-2 text-2xl font-semibold text-zinc-900">{adoptionSummary.announcementCount}</div>
|
||
</div>
|
||
</div>
|
||
<div className="mt-4 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4 text-sm text-slate-600">
|
||
<div className="font-medium text-zinc-900">本周观测提示</div>
|
||
<ul className="mt-2 list-disc space-y-1 pl-5">
|
||
{adoptionSummary.hints.map((hint) => (
|
||
<li key={hint}>{hint}</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
</details>
|
||
);
|
||
}
|
||
|
||
function SecondaryWorkspacePanel({
|
||
title,
|
||
description,
|
||
children,
|
||
}: {
|
||
title: string;
|
||
description: string;
|
||
children: ReactNode;
|
||
}) {
|
||
return (
|
||
<details className="card-std portal-secondary-drawer">
|
||
<summary className="portal-secondary-summary">
|
||
<div>
|
||
<div className="text-base font-semibold text-zinc-900">{title}</div>
|
||
<div className="mt-1 text-sm text-zinc-500">{description}</div>
|
||
</div>
|
||
<span className="portal-secondary-summary__toggle">展开 / 收起</span>
|
||
</summary>
|
||
<div className="portal-secondary-drawer__body">
|
||
{children}
|
||
</div>
|
||
</details>
|
||
);
|
||
}
|
||
|
||
function PortalSectionFallback({
|
||
title,
|
||
description,
|
||
}: {
|
||
title: string;
|
||
description: string;
|
||
}) {
|
||
return (
|
||
<SectionPanel title={title} description={description}>
|
||
<EmptyStateCard title={`${title}暂时不可用`} description="该区域渲染失败，请刷新页面后重试。" />
|
||
</SectionPanel>
|
||
);
|
||
}
|
||
|
||
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-2xl border border-slate-200 bg-slate-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-slate-200">
|
||
<div
|
||
className="h-full rounded-full bg-primary transition-all"
|
||
style={{ width: `${progressPercent}%` }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</SectionPanel>
|
||
);
|
||
}
|
||
|
||
function QuickActionTile({
|
||
icon,
|
||
label,
|
||
description,
|
||
to,
|
||
onClick,
|
||
disabled = false,
|
||
compact = false,
|
||
}: QuickActionConfig & { compact?: boolean }) {
|
||
const baseClassName = disabled
|
||
? `portal-action-tile portal-action-tile--disabled${compact ? " portal-action-tile--compact" : ""}`
|
||
: `portal-action-tile${compact ? " portal-action-tile--compact" : ""}`;
|
||
|
||
const content = (
|
||
<>
|
||
<div className="flex items-center gap-3">
|
||
<div className={disabled
|
||
? "portal-action-icon portal-action-icon--muted"
|
||
: "portal-action-icon"}
|
||
>
|
||
<span className="material-symbols-outlined text-[20px]">{icon}</span>
|
||
</div>
|
||
<div className="min-w-0">
|
||
<div className={disabled ? "truncate font-medium text-zinc-500" : "truncate font-medium text-zinc-900"}>{label}</div>
|
||
<div className="mt-1 text-xs leading-5 text-zinc-500">{description}</div>
|
||
</div>
|
||
</div>
|
||
</>
|
||
);
|
||
|
||
if (to && !disabled) {
|
||
return <Link to={to} className={baseClassName}>{content}</Link>;
|
||
}
|
||
if (onClick) {
|
||
return (
|
||
<button type="button" className={baseClassName} disabled={disabled} onClick={onClick}>
|
||
{content}
|
||
</button>
|
||
);
|
||
}
|
||
return <div className={baseClassName}>{content}</div>;
|
||
}
|
||
|
||
function QuickActionsPanel({
|
||
items,
|
||
layout = "grid",
|
||
}: {
|
||
items: QuickActionConfig[];
|
||
layout?: "grid" | "rail";
|
||
}) {
|
||
return (
|
||
<SectionPanel
|
||
title="快捷操作栏"
|
||
description="高频动作"
|
||
className={layout === "rail" ? "portal-panel-fill" : undefined}
|
||
>
|
||
<div className={layout === "rail" ? "portal-action-stack" : "grid gap-3 sm:grid-cols-2 xl:grid-cols-4"}>
|
||
{items.length ? items.map((item) => (
|
||
<QuickActionTile
|
||
key={item.key}
|
||
icon={item.icon}
|
||
label={item.label}
|
||
description={item.description}
|
||
to={item.to}
|
||
onClick={item.onClick}
|
||
disabled={item.disabled}
|
||
compact={layout === "rail"}
|
||
/>
|
||
)) : <EmptyStateCard title="暂无快捷动作" description="当前账号没有可直接执行的首页动作。" />}
|
||
</div>
|
||
</SectionPanel>
|
||
);
|
||
}
|
||
|
||
function TodoAggregatePanel({ items }: { items: TodoAggregateItem[] }) {
|
||
const visibleItems = items.slice(0, 5);
|
||
const hiddenCount = Math.max(items.length - visibleItems.length, 0);
|
||
|
||
return (
|
||
<SectionPanel
|
||
title="今日待办聚合"
|
||
description="今天要处理的事"
|
||
className="portal-panel-fill"
|
||
>
|
||
<div className="space-y-3">
|
||
{visibleItems.length ? visibleItems.map((item) => (
|
||
<Link key={`${item.title}-${item.href}-${item.sourceLabel}`} to={item.href} className="portal-list-card">
|
||
<div className="flex items-start gap-3">
|
||
<div className={item.severity === "high"
|
||
? "mt-0.5 flex size-9 items-center justify-center rounded-2xl bg-red-50 text-red-600"
|
||
: item.severity === "warning"
|
||
? "mt-0.5 flex size-9 items-center justify-center rounded-2xl bg-amber-50 text-amber-600"
|
||
: "mt-0.5 flex size-9 items-center justify-center rounded-2xl bg-zinc-100 text-zinc-600"}
|
||
>
|
||
<span className="material-symbols-outlined text-[18px]">{item.icon}</span>
|
||
</div>
|
||
<div className="min-w-0 flex-1">
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<div className="font-medium text-zinc-900">{item.title}</div>
|
||
<span className="badge-neutral">{item.sourceLabel}</span>
|
||
{item.severity === "high" ? <span className="badge-error">高优先</span> : null}
|
||
{item.severity === "warning" ? <span className="badge-warning">关注</span> : null}
|
||
</div>
|
||
<div className="mt-2 text-sm text-primary">进入处理</div>
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
)) : <EmptyStateCard title="暂无待办" description="没有需要立刻处理的事。" />}
|
||
</div>
|
||
{hiddenCount > 0 ? (
|
||
<div className="portal-panel-footer">
|
||
<span>还有 {hiddenCount} 项已收起。</span>
|
||
<Link to="/todos" className="font-medium text-primary hover:underline">查看全部待办</Link>
|
||
</div>
|
||
) : null}
|
||
</SectionPanel>
|
||
);
|
||
}
|
||
|
||
function TeamStatusBoardPanel({ items }: { items: PortalTeamStatusItem[] }) {
|
||
const safeItems = Array.isArray(items) ? items : [];
|
||
const visibleItems = safeItems.slice(0, 5);
|
||
const hiddenCount = Math.max(safeItems.length - visibleItems.length, 0);
|
||
|
||
return (
|
||
<SectionPanel
|
||
title="团队全员状态"
|
||
description="今日状态"
|
||
actions={<Link to="/team" className="text-sm font-medium text-primary hover:underline">查看团队页</Link>}
|
||
className="portal-panel-fill"
|
||
>
|
||
<div className="portal-team-list">
|
||
{visibleItems.length ? visibleItems.map((item) => {
|
||
const badge = resolveTeamStatusBadge(item);
|
||
return (
|
||
<div key={item.employeeId} className="portal-team-row">
|
||
<EmployeeAvatar name={item.name} src={item.avatarUrl} size="sm" />
|
||
<div className="min-w-0 flex-1">
|
||
<div className="truncate font-medium text-zinc-900">{item.name}</div>
|
||
<div className="mt-1 truncate text-xs text-zinc-500">{formatTeamStatusAttendance(item)}</div>
|
||
</div>
|
||
<span className={badge.className}>{badge.label}</span>
|
||
</div>
|
||
);
|
||
}) : <EmptyStateCard title="暂无团队状态" description="没有成员状态。" />}
|
||
</div>
|
||
{hiddenCount > 0 ? (
|
||
<div className="portal-panel-footer">
|
||
<span>已收起 {hiddenCount} 位成员。</span>
|
||
<Link to="/team" className="font-medium text-primary hover:underline">查看全部</Link>
|
||
</div>
|
||
) : null}
|
||
</SectionPanel>
|
||
);
|
||
}
|
||
|
||
function RecentActivitiesList({ items }: { items: PortalRecentActivity[] }) {
|
||
const safeItems = Array.isArray(items) ? items : [];
|
||
|
||
return (
|
||
<div className="space-y-3">
|
||
{safeItems.length ? safeItems.slice(0, 5).map((item) => (
|
||
<Link key={item.id} to={item.href} className="portal-list-card portal-list-card--compact">
|
||
<div className="flex items-start gap-3">
|
||
<EmployeeAvatar name={item.actorName} size="sm" />
|
||
<div className="min-w-0 flex-1">
|
||
<div className="text-sm font-medium leading-6 text-zinc-900">{item.summary}</div>
|
||
<div className="mt-1 text-xs text-zinc-500">{formatRelativeTime(item.createdAt)}</div>
|
||
</div>
|
||
</div>
|
||
</Link>
|
||
)) : <EmptyStateCard title="暂无近期动态" description="当前没有可展示的最近业务动作。" />}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function ActivityAnnouncementsPanel({
|
||
activities,
|
||
announcements,
|
||
}: {
|
||
activities: PortalRecentActivity[];
|
||
announcements: PortalHomePayload["announcements"];
|
||
}) {
|
||
return (
|
||
<SectionPanel
|
||
title="近期动态流"
|
||
description="动态和公告"
|
||
actions={<Link to="/announcements" className="text-sm font-medium text-primary hover:underline">公告页</Link>}
|
||
className="portal-panel-fill"
|
||
>
|
||
<Tabs defaultValue="activity" className="portal-insight-tabs">
|
||
<TabsList className="portal-insight-tabs__list">
|
||
<TabsTrigger value="activity">动态</TabsTrigger>
|
||
<TabsTrigger value="announcements">公告</TabsTrigger>
|
||
</TabsList>
|
||
<TabsContent value="activity" className="portal-insight-tabs__content">
|
||
<RecentActivitiesList items={activities} />
|
||
</TabsContent>
|
||
<TabsContent value="announcements" className="portal-insight-tabs__content">
|
||
<AnnouncementsList announcements={announcements} />
|
||
</TabsContent>
|
||
</Tabs>
|
||
</SectionPanel>
|
||
);
|
||
}
|
||
|
||
export function PortalHomePage() {
|
||
const queryClient = useQueryClient();
|
||
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"],
|
||
queryFn: () => fetchMyTodayAttendance(),
|
||
retry: (failureCount, error) => !isAttendanceFeatureDisabled(error) && failureCount < 2,
|
||
});
|
||
const canSetupWorkspace = hasAnyPermission(permissions, ["system.settings"]);
|
||
const isManagerView = isManagerRole(permissions);
|
||
|
||
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;
|
||
|
||
const attendanceClockInMutation = useMutation({
|
||
mutationFn: () => clockInAttendance(),
|
||
onSuccess: async (response) => {
|
||
await Promise.all([
|
||
queryClient.invalidateQueries({ queryKey: ["portal-home"] }),
|
||
queryClient.invalidateQueries({ queryKey: ["portal-home", "attendance", "today"] }),
|
||
queryClient.invalidateQueries({ queryKey: ["attendance", "me", "today"] }),
|
||
queryClient.invalidateQueries({ queryKey: ["attendance", "me", "month"] }),
|
||
]);
|
||
toast.success(
|
||
response.item.isLate
|
||
? `上班打卡成功，已迟到 ${response.item.lateMinutes} 分钟`
|
||
: "上班打卡成功",
|
||
);
|
||
},
|
||
onError: (error) => {
|
||
toast.error(resolveErrorMessage(error));
|
||
},
|
||
});
|
||
|
||
const attendanceClockOutMutation = useMutation({
|
||
mutationFn: () => clockOutAttendance(),
|
||
onSuccess: async () => {
|
||
await Promise.all([
|
||
queryClient.invalidateQueries({ queryKey: ["portal-home"] }),
|
||
queryClient.invalidateQueries({ queryKey: ["portal-home", "attendance", "today"] }),
|
||
queryClient.invalidateQueries({ queryKey: ["attendance", "me", "today"] }),
|
||
queryClient.invalidateQueries({ queryKey: ["attendance", "me", "month"] }),
|
||
]);
|
||
toast.success("下班打卡成功");
|
||
},
|
||
onError: (error) => {
|
||
toast.error(resolveErrorMessage(error));
|
||
},
|
||
});
|
||
|
||
if (portalQuery.isLoading) {
|
||
return <div className="card-std p-6 text-sm text-zinc-500">加载 Portal 中...</div>;
|
||
}
|
||
|
||
if (portalQuery.isError || !portalQuery.data) {
|
||
const message = isApiError(portalQuery.error)
|
||
? `${portalQuery.error.code}: ${mapApiErrorMessage(portalQuery.error.code, portalQuery.error.details, portalQuery.error.message)}`
|
||
: "Portal 加载失败";
|
||
return <div className="card-std p-6 text-sm text-red-600">{message}</div>;
|
||
}
|
||
|
||
const payload = portalQuery.data;
|
||
const cards = Array.isArray(payload.cards) ? payload.cards : [];
|
||
const applicationItems = Array.isArray(payload.myApplications) ? payload.myApplications : [];
|
||
const announcementItems = Array.isArray(payload.announcements) ? payload.announcements : [];
|
||
const quickLinkItems = Array.isArray(payload.quickLinks) ? payload.quickLinks : [];
|
||
const recentActivities = Array.isArray(payload.recentActivities) ? payload.recentActivities : [];
|
||
const teamStatusBoard = Array.isArray(payload.teamStatusBoard) ? payload.teamStatusBoard : [];
|
||
const portalSchema = isManagerView ? managerPortalSchema : employeePortalSchema;
|
||
const primaryCards = pickCards(cards, portalSchema.heroCards);
|
||
const primaryCardKeySet = primaryCards.map((card) => card.key);
|
||
const secondaryCards = compactCards(cards, primaryCardKeySet);
|
||
const attendanceFeatureDisabled = isAttendanceFeatureDisabled(attendanceTodayQuery.error);
|
||
const attendanceToday = attendanceTodayQuery.data ?? null;
|
||
const clockAction = resolveClockAction(attendanceToday, {
|
||
isLoading: attendanceTodayQuery.isLoading,
|
||
isError: attendanceTodayQuery.isError,
|
||
featureDisabled: attendanceFeatureDisabled,
|
||
pending: attendanceClockInMutation.isPending || attendanceClockOutMutation.isPending,
|
||
});
|
||
const todoAggregateItems = buildTodoAggregateItems({ ...payload, cards });
|
||
|
||
function handleCloseWelcome() {
|
||
clearWelcomeDialogFlag();
|
||
setShowWelcome(false);
|
||
}
|
||
|
||
function handleDismissGettingStarted() {
|
||
dismissGettingStartedCard();
|
||
setShowGettingStarted(false);
|
||
}
|
||
|
||
const employeeSummaryItems = ([
|
||
{
|
||
key: "expense",
|
||
href: "/reimbursements",
|
||
label: "我的报销",
|
||
value: `${applicationItems.find((item) => item.domain === "reimbursement")?.count ?? 0} 条`,
|
||
},
|
||
{
|
||
key: "leave",
|
||
href: "/leave-requests",
|
||
label: "我的请假",
|
||
value: `${applicationItems.find((item) => item.domain === "leave")?.count ?? 0} 条`,
|
||
},
|
||
{
|
||
key: "assets",
|
||
href: "/assets",
|
||
label: "我的资产",
|
||
value: String(secondaryCards.find((card) => card.key === "my_assets")?.value ?? 0),
|
||
},
|
||
payload.todayPresence
|
||
? {
|
||
key: "today-status-note",
|
||
href: payload.todayPresence.href,
|
||
label: "今日状态",
|
||
value: payload.todayPresence.label,
|
||
note: payload.todayPresence.note ?? "可在团队页更新。",
|
||
tone: payload.todayPresence.status === "leave" ? "warning" as const : "normal" as const,
|
||
}
|
||
: null,
|
||
] as Array<SummaryItem | null>).filter(isSummaryItem);
|
||
|
||
const managerSummaryItems = ([
|
||
{
|
||
key: "team-summary",
|
||
href: payload.teamPresence?.href ?? "/team",
|
||
label: "今日团队状态",
|
||
value: payload.teamPresence ? `在岗 ${payload.teamPresence.office}/${payload.teamPresence.total}` : "待启用",
|
||
note: payload.teamPresence ? `请假 ${payload.teamPresence.leave}，未更新 ${payload.teamPresence.unspecified}` : "团队状态待启用。",
|
||
tone: payload.teamPresence && (payload.teamPresence.leave > 0 || payload.teamPresence.unspecified > 0) ? "warning" as const : "normal" as const,
|
||
},
|
||
payload.weeklySummary
|
||
? {
|
||
key: "weekly-summary",
|
||
href: payload.weeklySummary.href,
|
||
label: "未提交周报",
|
||
value: `${payload.weeklySummary.missingCount} 人`,
|
||
note: `需协助 ${payload.weeklySummary.needsHelpCount} 人`,
|
||
tone: payload.weeklySummary.missingCount > 0 ? "warning" as const : "normal" as const,
|
||
}
|
||
: null,
|
||
] as Array<SummaryItem | null>).filter(isSummaryItem);
|
||
|
||
const quickActions: QuickActionConfig[] = [];
|
||
if (hasAnyPermission(permissions, LEAVE_PORTAL_PERMISSIONS)) {
|
||
quickActions.push({
|
||
key: "leave",
|
||
icon: "event_available",
|
||
label: "提交请假",
|
||
description: "直接进入请假申请页",
|
||
to: "/leave-requests?action=create",
|
||
});
|
||
}
|
||
if (hasAnyPermission(permissions, EXPENSE_PORTAL_PERMISSIONS)) {
|
||
quickActions.push({
|
||
key: "expense",
|
||
icon: "request_quote",
|
||
label: "提交报销",
|
||
description: "进入报销工作台创建单据",
|
||
to: "/reimbursements",
|
||
});
|
||
}
|
||
if (!attendanceFeatureDisabled) {
|
||
quickActions.push({
|
||
key: "attendance",
|
||
icon: clockAction.action === "clock-out" ? "logout" : "schedule",
|
||
label: clockAction.label,
|
||
description: clockAction.description,
|
||
disabled: clockAction.disabled,
|
||
onClick: clockAction.action === "clock-in"
|
||
? () => attendanceClockInMutation.mutate()
|
||
: clockAction.action === "clock-out"
|
||
? () => attendanceClockOutMutation.mutate()
|
||
: undefined,
|
||
});
|
||
}
|
||
if (payload.weeklyReport || payload.weeklySummary) {
|
||
quickActions.push({
|
||
key: "weekly",
|
||
icon: "article",
|
||
label: "提交周报",
|
||
description: "进入周报页继续填写或查看团队缺口",
|
||
to: "/weekly-reports",
|
||
});
|
||
}
|
||
|
||
return (
|
||
<PageScaffold>
|
||
<ErrorBoundary fallback={null}>
|
||
<WelcomeDialog open={showWelcome} onClose={handleCloseWelcome} />
|
||
</ErrorBoundary>
|
||
|
||
<WorkbenchHero
|
||
eyebrow={isManagerView ? "管理工作台" : "个人工作台"}
|
||
title={`你好，${payload.greeting.name}`}
|
||
className="workbench-hero--compact"
|
||
subtitle={isManagerView ? "审批、团队、周报。" : "待办、打卡、申请。"}
|
||
actions={
|
||
!payload.workspace.persisted && canSetupWorkspace ? (
|
||
<Button asChild variant="secondary" type="button">
|
||
<Link to="/system/workspace">完成工作区设置</Link>
|
||
</Button>
|
||
) : null
|
||
}
|
||
/>
|
||
|
||
<div className="portal-metric-strip">
|
||
{primaryCards.map((card) => (
|
||
<MetricCard
|
||
key={card.key}
|
||
ariaLabel={`portal-card-${card.key}`}
|
||
href={card.href}
|
||
note={card.key === "my_weekly_report"
|
||
? formatWeeklyStatus(payload.weeklyReport)
|
||
: card.key === "today_presence"
|
||
? payload.todayPresence?.note ?? "更新今日状态"
|
||
: card.key === "team_presence"
|
||
? payload.teamPresence ? `请假 ${payload.teamPresence.leave}，未更新 ${payload.teamPresence.unspecified}` : "团队状态板待启用"
|
||
: undefined}
|
||
title={card.title}
|
||
tone={severityTone(card.severity)}
|
||
value={card.value}
|
||
/>
|
||
))}
|
||
</div>
|
||
|
||
{showGettingStarted ? (
|
||
<ErrorBoundary
|
||
fallback={(
|
||
<PortalSectionFallback
|
||
title="快速上手"
|
||
description="完成基础资料。"
|
||
/>
|
||
)}
|
||
>
|
||
<GettingStartedCard
|
||
items={gettingStartedItems}
|
||
completedCount={gettingStartedCompletedCount}
|
||
onDismiss={handleDismissGettingStarted}
|
||
/>
|
||
</ErrorBoundary>
|
||
) : null}
|
||
|
||
<div className="portal-home-grid">
|
||
<TodoAggregatePanel items={todoAggregateItems} />
|
||
<QuickActionsPanel items={quickActions} layout="rail" />
|
||
</div>
|
||
|
||
<div className="portal-home-grid portal-home-grid--collaboration">
|
||
<ErrorBoundary
|
||
fallback={(
|
||
<PortalSectionFallback
|
||
title="团队全员状态"
|
||
description="今日团队状态。"
|
||
/>
|
||
)}
|
||
>
|
||
<TeamStatusBoardPanel items={teamStatusBoard} />
|
||
</ErrorBoundary>
|
||
<ErrorBoundary
|
||
fallback={(
|
||
<PortalSectionFallback
|
||
title="近期动态流"
|
||
description="最近业务动作。"
|
||
/>
|
||
)}
|
||
>
|
||
<ActivityAnnouncementsPanel activities={recentActivities} announcements={announcementItems} />
|
||
</ErrorBoundary>
|
||
</div>
|
||
|
||
{isManagerView ? (
|
||
<>
|
||
<SecondaryWorkspacePanel
|
||
title="今日管理重点 / 常用入口"
|
||
description="按需展开。"
|
||
>
|
||
<div className="grid gap-6 xl:grid-cols-[minmax(0,1fr),360px]">
|
||
<SummaryPanel title="今日管理重点" items={managerSummaryItems} />
|
||
<QuickLinksPanel items={quickLinkItems} />
|
||
</div>
|
||
|
||
<SecondaryCardsPanel
|
||
title="项目跟进与组织协同"
|
||
description="项目、组织和风险。"
|
||
cards={secondaryCards}
|
||
/>
|
||
</SecondaryWorkspacePanel>
|
||
|
||
<AdoptionSummaryPanel adoptionSummary={payload.adoptionSummary} />
|
||
</>
|
||
) : (
|
||
<SecondaryWorkspacePanel
|
||
title="我的申请与资产 / 继续工作"
|
||
description="按需展开。"
|
||
>
|
||
<div className="grid gap-6 xl:grid-cols-[minmax(0,1fr),minmax(0,1fr)]">
|
||
<SummaryPanel title="我的申请与资产" items={employeeSummaryItems} />
|
||
<RecentVisitsPanel />
|
||
</div>
|
||
|
||
<div className="grid gap-6 xl:grid-cols-[minmax(0,1fr),minmax(0,1fr)]">
|
||
<QuickLinksPanel items={quickLinkItems} />
|
||
<SecondaryCardsPanel
|
||
title="项目跟进与个人协同"
|
||
description="项目和参考指标。"
|
||
cards={secondaryCards}
|
||
/>
|
||
</div>
|
||
</SecondaryWorkspacePanel>
|
||
)}
|
||
</PageScaffold>
|
||
);
|
||
}
|