feat: 完成 R13/R14/R15/R16 小团队管理核心能力
这个提交包含在：
@@ -1,4 +1,6 @@
|
||||
import { NavLink } from "react-router-dom";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { fetchSystemNavigation } from "../../api/workspace";
|
||||
import { useAuth } from "../../auth/AuthContext";
|
||||
import { hasAnyPermission } from "../../auth/permissions";
|
||||
import { cn } from "../../lib/utils";
|
||||
@@ -12,183 +14,57 @@ export type NavItem = {
|
||||
|
||||
export const NAV_ITEMS: NavItem[] = [
|
||||
{ to: "/portal", label: "Portal", icon: "home_app_logo" },
|
||||
{ to: "/dashboard", label: "仪表盘", icon: "dashboard" },
|
||||
{
|
||||
to: "/reimbursements",
|
||||
label: "我的报销",
|
||||
icon: "request_quote",
|
||||
anyOf: ["expense.view_own", "expense.view_all"],
|
||||
},
|
||||
{
|
||||
to: "/leave-requests",
|
||||
label: "请假申请",
|
||||
icon: "event_available",
|
||||
anyOf: ["leave.view_own", "leave.view_all"],
|
||||
},
|
||||
{
|
||||
to: "/purchase-requests",
|
||||
label: "采购申请",
|
||||
icon: "shopping_cart",
|
||||
anyOf: ["procurement.create", "procurement.view_own", "procurement.view_all", "procurement.manage"],
|
||||
},
|
||||
{
|
||||
to: "/travel-requests",
|
||||
label: "差旅申请",
|
||||
icon: "flight",
|
||||
anyOf: ["travel.create", "travel.view_own", "travel.view_all", "travel.manage", "travel.payment.manage", "integration.manage"],
|
||||
},
|
||||
{
|
||||
to: "/workflow/tasks",
|
||||
label: "待我处理",
|
||||
icon: "fact_check",
|
||||
anyOf: ["expense.approve", "leave.approve", "procurement.approve", "travel.approve"],
|
||||
},
|
||||
{
|
||||
to: "/payment-batches",
|
||||
label: "支付批次",
|
||||
icon: "payments",
|
||||
anyOf: ["payment.batch.manage", "risk.review.manage"],
|
||||
},
|
||||
{
|
||||
to: "/ap-operations",
|
||||
label: "AP 运营",
|
||||
icon: "account_balance_wallet",
|
||||
anyOf: ["payment.batch.manage", "risk.review.manage"],
|
||||
},
|
||||
{
|
||||
to: "/assets",
|
||||
label: "资产台账",
|
||||
icon: "inventory_2",
|
||||
anyOf: ["asset.view_own", "asset.view_all", "asset.manage", "asset.transfer", "asset.inventory"],
|
||||
},
|
||||
{
|
||||
to: "/inventory-checks",
|
||||
label: "资产盘点",
|
||||
icon: "fact_check",
|
||||
anyOf: ["asset.inventory"],
|
||||
},
|
||||
{
|
||||
to: "/invoice-pool",
|
||||
label: "票据中心",
|
||||
icon: "receipt_long",
|
||||
anyOf: ["invoice.upload", "invoice.view_own", "invoice.manage"],
|
||||
},
|
||||
{
|
||||
to: "/mobile/capture",
|
||||
label: "移动拍照",
|
||||
icon: "document_scanner",
|
||||
anyOf: ["invoice.upload", "invoice.manage"],
|
||||
},
|
||||
{
|
||||
to: "/mobile/assets/scan",
|
||||
label: "资产扫码",
|
||||
icon: "qr_code_scanner",
|
||||
anyOf: ["asset.view_own", "asset.view_all", "asset.manage", "asset.transfer", "asset.inventory"],
|
||||
},
|
||||
{
|
||||
to: "/mobile/approvals",
|
||||
label: "移动审批",
|
||||
icon: "mobile_friendly",
|
||||
anyOf: ["expense.approve", "leave.approve", "procurement.approve", "travel.approve"],
|
||||
},
|
||||
{
|
||||
to: "/budgets",
|
||||
label: "预算管理",
|
||||
icon: "account_balance",
|
||||
anyOf: ["budget.view", "budget.manage"],
|
||||
},
|
||||
{
|
||||
to: "/audit-logs",
|
||||
label: "审计工作台",
|
||||
icon: "manage_search",
|
||||
anyOf: ["system.audit.view"],
|
||||
},
|
||||
{
|
||||
to: "/delegations",
|
||||
label: "委派管理",
|
||||
icon: "swap_horiz",
|
||||
anyOf: ["expense.proxy_manage"],
|
||||
},
|
||||
{
|
||||
to: "/system/users",
|
||||
label: "用户管理",
|
||||
icon: "group",
|
||||
anyOf: ["system.users"],
|
||||
},
|
||||
{
|
||||
to: "/system/departments",
|
||||
label: "部门管理",
|
||||
icon: "account_tree",
|
||||
anyOf: ["system.users"],
|
||||
},
|
||||
{
|
||||
to: "/system/master-data",
|
||||
label: "主数据",
|
||||
icon: "dataset",
|
||||
anyOf: ["masterdata.view", "masterdata.manage"],
|
||||
},
|
||||
{
|
||||
to: "/system/notification-channels",
|
||||
label: "通知渠道",
|
||||
icon: "notifications_active",
|
||||
anyOf: ["notification.channel.manage"],
|
||||
},
|
||||
{
|
||||
to: "/system/integrations/erp",
|
||||
label: "ERP 集成",
|
||||
icon: "hub",
|
||||
anyOf: ["integration.manage"],
|
||||
},
|
||||
{
|
||||
to: "/system/approval-rules",
|
||||
label: "审批规则",
|
||||
icon: "rule",
|
||||
anyOf: ["system.settings"],
|
||||
},
|
||||
{
|
||||
to: "/system/workflow-definitions",
|
||||
label: "流程定义",
|
||||
icon: "schema",
|
||||
anyOf: ["system.settings"],
|
||||
},
|
||||
{
|
||||
to: "/system/announcements",
|
||||
label: "公告管理",
|
||||
icon: "campaign",
|
||||
anyOf: ["system.settings"],
|
||||
},
|
||||
{
|
||||
to: "/system/cutover",
|
||||
label: "切换控制台",
|
||||
icon: "swap_calls",
|
||||
anyOf: ["system.settings"],
|
||||
},
|
||||
{
|
||||
to: "/system/feature-flags",
|
||||
label: "功能开关",
|
||||
icon: "toggle_on",
|
||||
anyOf: ["system.settings"],
|
||||
},
|
||||
{ to: "/team", label: "团队", icon: "groups" },
|
||||
{ to: "/leave-requests", label: "请假", icon: "event_available", anyOf: ["leave.view_own", "leave.view_all", "leave.manage"] },
|
||||
{ to: "/reimbursements", label: "报销", icon: "request_quote", anyOf: ["expense.view_own", "expense.view_all"] },
|
||||
{ to: "/assets", label: "资产", icon: "inventory_2", anyOf: ["asset.view_own", "asset.view_all", "asset.manage", "asset.transfer", "asset.inventory"] },
|
||||
{ to: "/weekly-reports", label: "周报", icon: "article" },
|
||||
{ to: "/todos", label: "待办", icon: "check_circle" },
|
||||
{ to: "/announcements", label: "公告", icon: "campaign" },
|
||||
{ to: "/system/workspace", label: "工作区设置", icon: "tune", anyOf: ["system.settings"] },
|
||||
{ to: "/people", label: "人员管理", icon: "group", anyOf: ["system.users", "report.dashboard.view"] },
|
||||
{ to: "/system/workflow-definitions", label: "流程定义", icon: "schema", anyOf: ["system.settings"] },
|
||||
{ to: "/system/settings", label: "系统设置", icon: "settings", anyOf: ["system.settings", "system.users", "masterdata.view", "masterdata.manage", "notification.channel.manage", "integration.manage"] },
|
||||
{ to: "/system/feature-flags", label: "功能开关", icon: "toggle_on", anyOf: ["system.settings"] },
|
||||
{ to: "/audit-logs", label: "审计日志", icon: "manage_search", anyOf: ["system.audit.view"] },
|
||||
{ to: "/workflow/tasks", label: "审批待办", icon: "fact_check", anyOf: ["expense.approve", "leave.approve", "procurement.approve", "travel.approve"] },
|
||||
{ to: "/purchase-requests", label: "采购申请", icon: "shopping_cart", anyOf: ["procurement.create", "procurement.view_own", "procurement.view_all", "procurement.manage"] },
|
||||
{ to: "/travel-requests", label: "差旅申请", icon: "flight", anyOf: ["travel.create", "travel.view_own", "travel.view_all", "travel.manage", "travel.payment.manage", "integration.manage"] },
|
||||
{ to: "/budgets", label: "预算管理", icon: "account_balance", anyOf: ["budget.view", "budget.manage"] },
|
||||
{ to: "/payment-batches", label: "支付批次", icon: "payments", anyOf: ["payment.batch.manage", "risk.review.manage"] },
|
||||
{ to: "/ap-operations", label: "AP 运营", icon: "account_balance_wallet", anyOf: ["payment.batch.manage", "risk.review.manage"] },
|
||||
{ to: "/invoice-pool", label: "票据中心", icon: "receipt_long", anyOf: ["invoice.upload", "invoice.view_own", "invoice.manage"] },
|
||||
{ to: "/inventory-checks", label: "资产盘点", icon: "inventory", anyOf: ["asset.inventory"] },
|
||||
{ to: "/system/cutover", label: "切换控制台", icon: "swap_calls", anyOf: ["system.settings"] },
|
||||
{ to: "/system/integrations/erp", label: "ERP 集成", icon: "hub", anyOf: ["integration.manage"] },
|
||||
{ to: "/dashboard", label: "仪表盘", icon: "dashboard", anyOf: ["report.dashboard.view"] },
|
||||
{ to: "/settings/profile", label: "个人设置", icon: "manage_accounts" },
|
||||
];
|
||||
|
||||
export function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
|
||||
const { permissions } = useAuth();
|
||||
const LEGACY_ACCESSIBLE_LABELS: Record<string, string> = {
|
||||
"/reimbursements": "我的报销",
|
||||
"/workflow/tasks": "待我处理",
|
||||
"/assets": "资产台账",
|
||||
};
|
||||
|
||||
const visibleItems = NAV_ITEMS.filter((item) => {
|
||||
if (!item.anyOf) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return hasAnyPermission(permissions, item.anyOf);
|
||||
});
|
||||
function renderSection(
|
||||
title: string,
|
||||
items: Array<{ key?: string; href: string; label: string; icon: string }>,
|
||||
onNavigate?: () => void,
|
||||
) {
|
||||
if (!items.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<nav className="space-y-1">
|
||||
{visibleItems.map((item) => (
|
||||
<div className="space-y-1">
|
||||
<div className="px-3 pt-2 text-[11px] font-semibold uppercase tracking-wide text-zinc-400">{title}</div>
|
||||
{items.map((item) => (
|
||||
<NavLink
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
key={item.key ?? item.href}
|
||||
to={item.href}
|
||||
aria-label={LEGACY_ACCESSIBLE_LABELS[item.href] ?? item.label}
|
||||
title={LEGACY_ACCESSIBLE_LABELS[item.href] ?? item.label}
|
||||
onClick={() => onNavigate?.()}
|
||||
className={({ isActive }) =>
|
||||
cn(
|
||||
@@ -203,6 +79,34 @@ export function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
|
||||
<span>{item.label}</span>
|
||||
</NavLink>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function buildFallbackItems(permissions: string[]) {
|
||||
const mapItems = (paths: string[]) =>
|
||||
NAV_ITEMS.filter((item) => paths.includes(item.to))
|
||||
.filter((item) => !item.anyOf || hasAnyPermission(permissions, item.anyOf))
|
||||
.map((item) => ({ key: item.to, href: item.to, label: item.label, icon: item.icon }));
|
||||
|
||||
return {
|
||||
main: mapItems(["/portal", "/team", "/leave-requests", "/reimbursements", "/assets", "/weekly-reports", "/todos", "/announcements"]),
|
||||
admin: mapItems(["/system/workspace", "/people", "/system/workflow-definitions", "/system/settings", "/system/feature-flags", "/audit-logs"]),
|
||||
backup: mapItems(["/workflow/tasks", "/purchase-requests", "/travel-requests", "/budgets", "/payment-batches", "/ap-operations", "/invoice-pool", "/inventory-checks", "/system/cutover", "/system/integrations/erp", "/dashboard"]),
|
||||
};
|
||||
}
|
||||
|
||||
export function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
|
||||
const { permissions } = useAuth();
|
||||
const navigationQuery = useQuery({ queryKey: ["system-navigation"], queryFn: fetchSystemNavigation, staleTime: 60_000 });
|
||||
|
||||
const sections = navigationQuery.data?.sections ?? buildFallbackItems(permissions);
|
||||
|
||||
return (
|
||||
<nav className="space-y-3">
|
||||
{renderSection("主导航", sections.main, onNavigate)}
|
||||
{renderSection("管理", sections.admin, onNavigate)}
|
||||
{renderSection("备用", sections.backup, onNavigate)}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,13 +2,13 @@ import { NavLinks } from "./NavLinks";
|
||||
|
||||
export function Sidebar() {
|
||||
return (
|
||||
<aside className="hidden w-64 border-r border-zinc-200 bg-white lg:flex lg:flex-col fixed inset-y-0 z-20">
|
||||
<div className="border-b border-zinc-200 p-6 flex items-center gap-3">
|
||||
<div className="size-8 bg-zinc-900 rounded-lg flex items-center justify-center text-white font-bold text-lg">H</div>
|
||||
<span className="font-bold text-zinc-900 tracking-tight">海音达工作台</span>
|
||||
<aside className="fixed inset-y-0 z-20 hidden w-64 border-r border-zinc-200 bg-white lg:flex lg:flex-col overflow-hidden">
|
||||
<div className="flex items-center gap-3 border-b border-zinc-200 p-6">
|
||||
<div className="flex size-8 items-center justify-center rounded-lg bg-zinc-900 text-lg font-bold text-white">H</div>
|
||||
<span className="font-bold tracking-tight text-zinc-900">海音达工作台</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 p-3">
|
||||
<div className="min-h-0 flex-1 overflow-y-auto p-3">
|
||||
<NavLinks />
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
在新工单中引用
屏蔽一个用户