224 行
8.7 KiB
TypeScript
224 行
8.7 KiB
TypeScript
import { useMemo } from "react";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { fetchSystemNavigation, fetchWorkspaceSettings, updateWorkspaceSettings } from "../api/workspace";
|
|
import { isApiError } from "../api/types";
|
|
import { mapApiErrorMessage } from "../api/errorMessages";
|
|
import { ListWorkspace, PrimaryTable, WorkspaceHeader } from "../components/patterns/ListWorkspace";
|
|
import { Button } from "../components/ui/button";
|
|
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
|
|
import { toast } from "sonner";
|
|
|
|
const MODULE_LABELS: Record<string, string> = {
|
|
portal: "工作台",
|
|
team: "团队",
|
|
leaveRequests: "请假",
|
|
attendance: "考勤",
|
|
reimbursements: "报销",
|
|
assets: "资产",
|
|
weeklyReports: "周报",
|
|
todos: "待办",
|
|
announcements: "公告",
|
|
projects: "项目",
|
|
workspace: "工作区设置",
|
|
people: "人员管理",
|
|
organization: "组织架构",
|
|
contractsRegistry: "合同台账",
|
|
workflowDefinitions: "流程定义",
|
|
systemSettings: "系统设置",
|
|
featureFlags: "功能开关",
|
|
auditLogs: "审计日志",
|
|
approvalRules: "审批规则",
|
|
userManagement: "用户管理",
|
|
departments: "部门管理",
|
|
masterData: "主数据",
|
|
notificationChannels: "通知渠道",
|
|
workflowTasks: "审批待办",
|
|
dashboard: "仪表盘",
|
|
purchaseRequests: "采购申请",
|
|
travelRequests: "差旅申请",
|
|
budgets: "预算管理",
|
|
paymentBatches: "付款批次",
|
|
apOperations: "AP 运营",
|
|
invoicePool: "票据中心",
|
|
inventoryChecks: "资产盘点",
|
|
cutover: "切换控制台",
|
|
erpIntegrations: "ERP 集成",
|
|
profile: "个人设置",
|
|
};
|
|
|
|
const VISIBILITY_OPTIONS = [
|
|
{ value: "main", label: "主导航" },
|
|
{ value: "admin", label: "管理区" },
|
|
{ value: "hidden", label: "隐藏" },
|
|
] as const;
|
|
|
|
function visibilityModeLabel(mode: string) {
|
|
return VISIBILITY_OPTIONS.find((item) => item.value === mode)?.label ?? mode;
|
|
}
|
|
|
|
export function WorkspaceSetupPage() {
|
|
const queryClient = useQueryClient();
|
|
const workspaceQuery = useQuery({ queryKey: ["workspace-settings"], queryFn: fetchWorkspaceSettings });
|
|
const navigationQuery = useQuery({ queryKey: ["system-navigation"], queryFn: fetchSystemNavigation });
|
|
|
|
const mutation = useMutation({
|
|
mutationFn: updateWorkspaceSettings,
|
|
onSuccess: async () => {
|
|
await Promise.all([
|
|
queryClient.invalidateQueries({ queryKey: ["workspace-settings"] }),
|
|
queryClient.invalidateQueries({ queryKey: ["system-navigation"] }),
|
|
queryClient.invalidateQueries({ queryKey: ["portal-home"] }),
|
|
]);
|
|
toast.success("工作区设置已保存");
|
|
},
|
|
onError: (error) => {
|
|
const message = isApiError(error)
|
|
? `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`
|
|
: error instanceof Error
|
|
? error.message
|
|
: "保存失败";
|
|
toast.error(message);
|
|
},
|
|
});
|
|
|
|
const workspace = workspaceQuery.data;
|
|
const rolePresets = navigationQuery.data?.recommendedRolePresets ?? [];
|
|
const moduleEntries = useMemo(() => Object.entries(workspace?.moduleVisibility ?? {}), [workspace?.moduleVisibility]);
|
|
const workspaceStats = useMemo(() => {
|
|
const entries = Object.entries(workspace?.moduleVisibility ?? {});
|
|
return {
|
|
total: entries.length,
|
|
main: entries.filter(([, mode]) => mode === "main").length,
|
|
admin: entries.filter(([, mode]) => mode === "admin").length,
|
|
hidden: entries.filter(([, mode]) => mode === "hidden").length,
|
|
rolePresets: rolePresets.length,
|
|
};
|
|
}, [rolePresets.length, workspace?.moduleVisibility]);
|
|
|
|
if (workspaceQuery.isLoading || !workspace) {
|
|
return (
|
|
<ListWorkspace>
|
|
<WorkspaceHeader
|
|
eyebrow="管理"
|
|
title="工作区设置"
|
|
subtitle="按 10 人以下小团队模式收敛主导航与默认入口。"
|
|
/>
|
|
<div className="admin-command-panel text-sm text-zinc-500">加载工作区设置中...</div>
|
|
</ListWorkspace>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ListWorkspace>
|
|
<WorkspaceHeader
|
|
eyebrow="管理"
|
|
title="工作区设置"
|
|
subtitle="按小团队运营模式收敛主导航、管理入口和备用模块。"
|
|
/>
|
|
|
|
<div className="finance-status-strip" data-testid="workspace-settings-summary">
|
|
<div className="finance-metric-card">
|
|
<div className="finance-metric-card__label">模块总数</div>
|
|
<div className="finance-metric-card__value">{workspaceStats.total}</div>
|
|
</div>
|
|
<div className="finance-metric-card">
|
|
<div className="finance-metric-card__label">主导航</div>
|
|
<div className="finance-metric-card__value">{workspaceStats.main}</div>
|
|
</div>
|
|
<div className="finance-metric-card">
|
|
<div className="finance-metric-card__label">管理区</div>
|
|
<div className="finance-metric-card__value">{workspaceStats.admin}</div>
|
|
</div>
|
|
<div className="finance-metric-card">
|
|
<div className="finance-metric-card__label">隐藏</div>
|
|
<div className="finance-metric-card__value">{workspaceStats.hidden}</div>
|
|
</div>
|
|
<div className="finance-metric-card">
|
|
<div className="finance-metric-card__label">初始化</div>
|
|
<div className="finance-metric-card__value text-base">{workspace.persisted ? "已完成" : "待初始化"}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section className="admin-command-panel space-y-4" data-testid="workspace-profile-panel">
|
|
<div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
|
|
<div>
|
|
<h2 className="text-base font-semibold text-zinc-900">工作区基线</h2>
|
|
<p className="mt-1 text-sm leading-6 text-zinc-600">
|
|
{workspace.profile} · 单公司 · 账号密码 · 站内通知 · 桌面优先。
|
|
</p>
|
|
</div>
|
|
<div className="rounded-lg border border-slate-200 bg-white px-3 py-2 text-xs text-slate-500">
|
|
{workspaceStats.rolePresets} 个角色预设
|
|
</div>
|
|
</div>
|
|
|
|
{rolePresets.length ? (
|
|
<div className="admin-tile-grid">
|
|
{rolePresets.map((item) => (
|
|
<div key={item.key} className="admin-tile-card">
|
|
<div className="font-medium text-zinc-900">{item.label}</div>
|
|
<div className="mt-1 text-zinc-600">{item.description}</div>
|
|
<div className="mt-1 text-xs text-zinc-500">角色：{item.roleCodes.join(" / ")}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="rounded-lg border border-dashed border-slate-300 px-4 py-5 text-sm text-slate-500">
|
|
当前没有推荐角色预设。
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
<section className="admin-command-panel space-y-4">
|
|
<div>
|
|
<h3 className="text-base font-semibold text-zinc-900">模块显隐</h3>
|
|
<p className="mt-1 text-sm leading-6 text-zinc-600">
|
|
主导航只保留高频入口；备用模块保留代码与数据，低频功能默认收进管理区或隐藏。
|
|
</p>
|
|
</div>
|
|
|
|
<PrimaryTable>
|
|
<Table data-testid="workspace-modules-table">
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>模块</TableHead>
|
|
<TableHead>当前显隐</TableHead>
|
|
<TableHead>操作</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{moduleEntries.map(([key, mode]) => (
|
|
<TableRow key={key}>
|
|
<TableCell>{MODULE_LABELS[key] ?? key}</TableCell>
|
|
<TableCell>{visibilityModeLabel(mode)}</TableCell>
|
|
<TableCell>
|
|
<div className="flex flex-wrap gap-2">
|
|
{VISIBILITY_OPTIONS.map((option) => (
|
|
<Button
|
|
key={option.value}
|
|
size="sm"
|
|
variant={mode === option.value ? "default" : "secondary"}
|
|
type="button"
|
|
disabled={mutation.isPending}
|
|
onClick={() => {
|
|
const nextVisibility = { ...(workspace.moduleVisibility ?? {}), [key]: option.value };
|
|
mutation.mutate({ moduleVisibility: nextVisibility });
|
|
}}
|
|
>
|
|
{option.label}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</PrimaryTable>
|
|
</section>
|
|
</ListWorkspace>
|
|
);
|
|
}
|
|
|
|
export default WorkspaceSetupPage;
|