70 行
3.2 KiB
TypeScript
70 行
3.2 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import { useAuth } from "../auth/AuthContext";
|
|
import { ListWorkspace, WorkspaceHeader } from "../components/patterns/ListWorkspace";
|
|
import { getVisibleManagementItems, MANAGEMENT_GROUPS } from "../features/navigation/managementRoutes";
|
|
|
|
export function SystemSettingsPage() {
|
|
const { permissions } = useAuth();
|
|
const visibleItems = getVisibleManagementItems(permissions);
|
|
const visibleGroups = MANAGEMENT_GROUPS.map((group) => ({
|
|
group,
|
|
items: visibleItems.filter((item) => item.group === group),
|
|
})).filter((entry) => entry.items.length > 0);
|
|
|
|
return (
|
|
<ListWorkspace>
|
|
<WorkspaceHeader
|
|
title="管理"
|
|
subtitle="人员、组织、角色、审批规则、主数据、通知渠道、功能开关和审计统一在这里处理。"
|
|
/>
|
|
<div className="finance-status-strip" data-testid="system-settings-summary">
|
|
<div className="finance-metric-card">
|
|
<div className="finance-metric-card__label">可用入口</div>
|
|
<div className="finance-metric-card__value">{visibleItems.length}</div>
|
|
</div>
|
|
<div className="finance-metric-card">
|
|
<div className="finance-metric-card__label">人员与组织</div>
|
|
<div className="finance-metric-card__value">{visibleItems.filter((item) => item.group === "人员与组织").length}</div>
|
|
</div>
|
|
<div className="finance-metric-card">
|
|
<div className="finance-metric-card__label">流程与规则</div>
|
|
<div className="finance-metric-card__value">{visibleItems.filter((item) => item.group === "流程与规则").length}</div>
|
|
</div>
|
|
<div className="finance-metric-card">
|
|
<div className="finance-metric-card__label">系统与审计</div>
|
|
<div className="finance-metric-card__value">{visibleItems.filter((item) => item.group === "系统与审计").length}</div>
|
|
</div>
|
|
<div className="finance-metric-card">
|
|
<div className="finance-metric-card__label">模式</div>
|
|
<div className="finance-metric-card__value text-base">小团队</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-5">
|
|
{visibleGroups.map(({ group, items }) => (
|
|
<section key={group} className="admin-command-panel space-y-3">
|
|
<h2 className="text-base font-semibold text-zinc-900">{group}</h2>
|
|
<div className="admin-tile-grid">
|
|
{items.map((item) => (
|
|
<Link key={item.key} to={item.path} className="admin-tile-card">
|
|
<div className="flex items-start gap-3">
|
|
<span className="admin-tile-card__icon">
|
|
<span className="material-symbols-outlined text-[20px]">{item.icon}</span>
|
|
</span>
|
|
<span className="min-w-0">
|
|
<span className="block text-base font-semibold text-zinc-900">{item.title}</span>
|
|
<span className="mt-1 block text-sm leading-5 text-zinc-600">{item.description}</span>
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
))}
|
|
</div>
|
|
</ListWorkspace>
|
|
);
|
|
}
|
|
|
|
export default SystemSettingsPage;
|