wangsli/hyb-oa
1
0
派生 0
代码 工单 合并请求 工作流 6 软件包 项目 发布 百科 活动

R29-1 R29-6: 重构海音达工作台壳层与高频页面

浏览代码
这个提交包含在：
wangsli
2026-03-23 09:59:35 +08:00
父节点 f9198a781a
当前提交 7e183c0cdc
共修改 33 个文件，包含 2193 行新增和 1564 行删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件
client/src/components/navigation/NavLinks.tsx
+72 -44
查看文件
@@ -3,6 +3,11 @@ import { useQuery } from "@tanstack/react-query";
import { fetchSystemNavigation, type NavigationItem } from "../../api/workspace";
import { useAuth } from "../../auth/AuthContext";
import { hasAnyPermission } from "../../auth/permissions";
import {
ADMIN_NAV_ORDER,
BACKUP_NAV_ORDER,
MAIN_NAV_ORDER,
} from "../../features/navigation/schema";
import { cn } from "../../lib/utils";
export type NavItem = {
@@ -38,15 +43,11 @@ export const NAV_ITEMS: NavItem[] = [
{ 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: "/system/integrations/erp", label: "外部系统桥接", icon: "hub", anyOf: ["integration.manage"] },
{ to: "/dashboard", label: "仪表盘", icon: "dashboard", anyOf: ["report.dashboard.view"] },
{ to: "/settings/profile", label: "个人设置", icon: "manage_accounts" },
];
const MAIN_NAV_ORDER = ["/portal", "/team", "/leave-requests", "/reimbursements", "/assets", "/weekly-reports", "/todos", "/announcements", "/projects"];
const ADMIN_NAV_ORDER = ["/system/workspace", "/people", "/system/workflow-definitions", "/system/settings", "/system/feature-flags", "/audit-logs"];
const BACKUP_NAV_ORDER = ["/workflow/tasks", "/contracts-registry", "/purchase-requests", "/travel-requests", "/budgets", "/payment-batches", "/ap-operations", "/invoice-pool", "/inventory-checks", "/system/cutover", "/system/integrations/erp", "/dashboard", "/settings/profile"];
const LEGACY_ACCESSIBLE_LABELS: Record<string, string> = {
"/reimbursements": "我的报销",
"/workflow/tasks": "待我处理",
@@ -61,38 +62,56 @@ type ResolvedNavItem = {
};
function renderNavItem(item: ResolvedNavItem, onNavigate?: () => void) {
const accessibleLabel = LEGACY_ACCESSIBLE_LABELS[item.href] ?? item.label;
return (
<NavLink
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}
aria-label={accessibleLabel}
title={accessibleLabel}
onClick={() => onNavigate?.()}
className={({ isActive }) =>
cn(
"flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors",
"group flex items-center gap-3 rounded-2xl px-3 py-2.5 text-sm transition-colors",
isActive
? "bg-zinc-100 font-bold text-zinc-900"
: "font-medium text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900",
? "bg-zinc-900 text-white shadow-sm"
: "text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900",
)
}
>
<span className="material-symbols-outlined text-[20px]">{item.icon}</span>
<span>{item.label}</span>
{({ isActive }) => (
<>
<span
className={cn(
"flex size-9 items-center justify-center rounded-xl border text-[20px] transition-colors",
isActive
? "border-white/15 bg-white/10 text-white"
: "border-zinc-200 bg-white text-zinc-500 group-hover:border-zinc-300 group-hover:text-zinc-900",
)}
>
<span className="material-symbols-outlined text-[20px]">{item.icon}</span>
</span>
<span className="min-w-0 flex-1 truncate font-medium">{item.label}</span>
</>
)}
</NavLink>
);
}
function renderSection(title: string, items: ResolvedNavItem[], onNavigate?: () => void) {
function renderSection(title: string, description: string, items: ResolvedNavItem[], onNavigate?: () => void) {
if (!items.length) {
return null;
}
return (
<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) => renderNavItem(item, onNavigate))}
</div>
<section className="space-y-2">
<div className="px-3">
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-zinc-400">{title}</div>
<div className="mt-1 text-xs text-zinc-500">{description}</div>
</div>
<div className="space-y-1.5">{items.map((item) => renderNavItem(item, onNavigate))}</div>
</section>
);
}
@@ -102,14 +121,15 @@ function renderBackupSection(items: ResolvedNavItem[], onNavigate?: () => void)
}
return (
<details className="rounded-xl border border-zinc-200 bg-zinc-50/80 px-2 py-2">
<summary className="flex cursor-pointer list-none items-center justify-between px-2 py-1 text-sm font-semibold text-zinc-700">
<span>备用模块</span>
<details className="rounded-2xl border border-zinc-200 bg-zinc-50/80 px-3 py-3">
<summary className="flex cursor-pointer list-none items-center justify-between gap-3 rounded-xl px-2 py-1.5 text-sm font-semibold text-zinc-700">
<div>
<div>备用模块</div>
<div className="mt-0.5 text-xs font-normal text-zinc-500">默认收起，不干扰主路径</div>
</div>
<span className="text-xs font-medium text-zinc-400">按需展开</span>
</summary>
<div className="mt-2 space-y-1 pb-1">
{items.map((item) => renderNavItem(item, onNavigate))}
</div>
<div className="mt-3 space-y-1.5 pb-1">{items.map((item) => renderNavItem(item, onNavigate))}</div>
</details>
);
}
@@ -130,6 +150,7 @@ function buildFallbackItems(permissions: string[]) {
function normalizeSections(sections: { main: NavigationItem[]; admin: NavigationItem[]; backup: NavigationItem[] }) {
const allItems = [...sections.main, ...sections.admin, ...sections.backup];
const byHref = new Map<string, ResolvedNavItem>();
for (const item of allItems) {
if (!byHref.has(item.href)) {
byHref.set(item.href, item);
@@ -137,38 +158,45 @@ function normalizeSections(sections: { main: NavigationItem[]; admin: Navigation
}
const used = new Set<string>();
const take = (hrefs: string[]) => hrefs
.map((href) => {
const item = byHref.get(href);
if (item) {
used.add(href);
}
return item;
})
.filter((item): item is ResolvedNavItem => Boolean(item));
const take = (hrefs: string[]) =>
hrefs
.map((href) => {
const item = byHref.get(href);
if (item) {
used.add(href);
}
return item;
})
.filter((item): item is ResolvedNavItem => Boolean(item));
const main = take(MAIN_NAV_ORDER);
const admin = take(ADMIN_NAV_ORDER);
const backup = [
...take(BACKUP_NAV_ORDER),
...allItems.filter((item) => !used.has(item.href)).map((item) => ({ key: item.key, href: item.href, label: item.label, icon: item.icon })),
];
return { main, admin, backup };
return {
main: take(MAIN_NAV_ORDER),
admin: take(ADMIN_NAV_ORDER),
backup: [
...take(BACKUP_NAV_ORDER),
...allItems
.filter((item) => !used.has(item.href))
.map((item) => ({ key: item.key, href: item.href, label: item.label, icon: item.icon })),
],
};
}
export function NavLinks({ onNavigate }: { onNavigate?: () => void }) {
const { permissions } = useAuth();
const navigationQuery = useQuery({ queryKey: ["system-navigation"], queryFn: fetchSystemNavigation, staleTime: 60_000 });
const navigationQuery = useQuery({
queryKey: ["system-navigation"],
queryFn: fetchSystemNavigation,
staleTime: 60_000,
});
const sections = navigationQuery.data?.sections
? normalizeSections(navigationQuery.data.sections)
: buildFallbackItems(permissions);
return (
<nav className="space-y-4">
{renderSection("主导航", sections.main, onNavigate)}
{renderSection("管理入口", sections.admin, onNavigate)}
<nav className="space-y-5">
{renderSection("主导航", "优先处理今日工作与高频协同。", sections.main, onNavigate)}
{renderSection("管理入口", "仅管理员与负责人使用。", sections.admin, onNavigate)}
{renderBackupSection(sections.backup, onNavigate)}
</nav>
);
client/src/components/navigation/Sidebar.tsx
+8 -9
查看文件
@@ -1,19 +1,18 @@
import { AppBrand } from "../shell/AppBrand";
import { NavLinks } from "./NavLinks";
export function Sidebar() {
return (
<aside className="fixed inset-y-0 z-20 hidden w-64 overflow-hidden border-r border-zinc-200 bg-white lg:flex lg:flex-col">
<div className="border-b border-zinc-200 p-6">
<div className="flex items-center gap-3">
<div className="flex size-8 items-center justify-center rounded-lg bg-zinc-900 text-lg font-bold text-white">H</div>
<div>
<div className="font-bold tracking-tight text-zinc-900">海音达工作台</div>
<div className="text-xs text-zinc-500">企业微信入口 + OA 主平台</div>
</div>
<aside className="fixed inset-y-0 z-20 hidden w-72 overflow-hidden border-r border-zinc-200 bg-white/95 backdrop-blur lg:flex lg:flex-col">
<div className="border-b border-zinc-200 px-6 py-6">
<AppBrand />
<div className="mt-4 rounded-2xl border border-zinc-200 bg-zinc-50 px-4 py-3 text-sm text-zinc-600">
<div className="font-medium text-zinc-900">统一工作台</div>
<div className="mt-1">先看今天要做什么，再进入具体模块处理。</div>
</div>
</div>
<div className="min-h-0 flex-1 overflow-y-auto p-3">
<div className="min-h-0 flex-1 overflow-y-auto px-4 py-5">
<NavLinks />
</div>
</aside>
client/src/components/navigation/Topbar.tsx
+26 -42
查看文件
@@ -1,10 +1,12 @@
import { useState } from "react";
import { Link } from "react-router-dom";
import { Link, useLocation } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { fetchNotifications } from "../../api/notifications";
import { useAuth } from "../../auth/AuthContext";
import { resolvePageMeta } from "../../features/navigation/schema";
import { isWecomWebView } from "../../lib/runtimeContext";
import { GlobalSearchDialog } from "../GlobalSearchDialog";
import { AppBrand } from "../shell/AppBrand";
import { Button } from "../ui/button";
import { Dialog, DialogClose, DialogContent, DialogTrigger } from "../ui/dialog";
import {
@@ -18,14 +20,7 @@ import { NavLinks } from "./NavLinks";
function MenuIcon() {
return (
<svg
aria-hidden="true"
fill="none"
height="20"
viewBox="0 0 24 24"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<svg aria-hidden="true" fill="none" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg">
<path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" strokeLinecap="round" strokeWidth="2" />
</svg>
);
@@ -33,14 +28,7 @@ function MenuIcon() {
function BellIcon() {
return (
<svg
aria-hidden="true"
fill="none"
height="20"
viewBox="0 0 24 24"
width="20"
xmlns="http://www.w3.org/2000/svg"
>
<svg aria-hidden="true" fill="none" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg">
<path
d="M15 17H9m9-2V11a6 6 0 10-12 0v4l-2 2h16l-2-2z"
stroke="currentColor"
@@ -54,9 +42,11 @@ function BellIcon() {
export function Topbar() {
const { me, logout } = useAuth();
const location = useLocation();
const [mobileNavOpen, setMobileNavOpen] = useState(false);
const [searchOpen, setSearchOpen] = useState(false);
const wecomEntry = isWecomWebView();
const pageMeta = resolvePageMeta(location.pathname);
const unreadQuery = useQuery({
enabled: Boolean(me),
@@ -70,9 +60,9 @@ export function Topbar() {
return (
<>
<header className="sticky top-0 z-10 border-b border-zinc-200 bg-white px-4 py-3 sm:px-8">
<header className="sticky top-0 z-10 border-b border-zinc-200/80 bg-white/90 px-4 py-4 backdrop-blur sm:px-8">
<div className="flex items-center justify-between gap-4">
<div className="flex min-w-0 items-center gap-2">
<div className="flex min-w-0 items-center gap-3">
<Dialog open={mobileNavOpen} onOpenChange={setMobileNavOpen}>
<DialogTrigger asChild>
<Button className="lg:hidden" size="icon" variant="secondary" aria-label="打开菜单" type="button">
@@ -80,13 +70,10 @@ export function Topbar() {
</Button>
</DialogTrigger>
<DialogContent className="left-0 top-0 h-full w-72 max-w-[80vw] rounded-none rounded-r-xl p-0">
<div className="flex h-full flex-col">
<div className="flex items-center justify-between border-b border-zinc-200 px-4 py-4">
<div>
<p className="text-xs font-semibold uppercase tracking-wide text-zinc-500">主业务平台</p>
<p className="mt-1 text-sm font-bold text-zinc-900">海音达工作台</p>
</div>
<DialogContent className="left-0 top-0 h-full w-80 max-w-[84vw] rounded-none rounded-r-3xl border-r border-zinc-200 p-0">
<div className="flex h-full flex-col bg-white">
<div className="flex items-start justify-between border-b border-zinc-200 px-5 py-5">
<AppBrand />
<DialogClose asChild>
<Button size="icon" variant="ghost" aria-label="关闭菜单" type="button">
✕
@@ -94,7 +81,7 @@ export function Topbar() {
</DialogClose>
</div>
<div className="flex-1 overflow-auto p-4">
<div className="flex-1 overflow-auto px-4 py-5">
<NavLinks onNavigate={() => setMobileNavOpen(false)} />
</div>
</div>
@@ -102,19 +89,23 @@ export function Topbar() {
</Dialog>
<div className="min-w-0">
<p className="text-sm text-zinc-500">欢迎回来</p>
<div className="flex flex-wrap items-center gap-2">
<p className="truncate text-base font-semibold text-zinc-900">{me?.name ?? "-"}</p>
<div className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-400">{pageMeta.group}</div>
<div className="mt-1 flex flex-wrap items-center gap-2">
<p className="truncate text-lg font-semibold tracking-tight text-zinc-900">{pageMeta.title}</p>
{wecomEntry ? (
<span className="rounded-full border border-primary-200 bg-primary-50 px-2 py-0.5 text-xs font-medium text-primary" data-testid="topbar-wecom-entry-badge">
<span
className="badge-neutral border-primary-200 bg-primary-50 text-primary"
data-testid="topbar-wecom-entry-badge"
>
当前通过企业微信进入
</span>
) : null}
</div>
<div className="mt-1 text-sm text-zinc-500">{me ? `你好，${me.name}` : "欢迎进入海音达工作台"}</div>
</div>
</div>
<div className="flex items-center gap-3">
<div className="flex items-center gap-2 sm:gap-3">
<Button
size="sm"
variant="secondary"
@@ -139,14 +130,7 @@ export function Topbar() {
<span className="material-symbols-outlined text-[18px]">search</span>
</Button>
<Button
asChild
size="icon"
variant="secondary"
aria-label="通知"
type="button"
data-testid="notifications-bell"
>
<Button asChild size="icon" variant="secondary" aria-label="通知" type="button" data-testid="notifications-bell">
<Link className="relative" to="/notifications">
<BellIcon />
{unreadCount > 0 ? (
@@ -159,12 +143,12 @@ export function Topbar() {
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="secondary" type="button">
<Button data-testid="topbar-profile-trigger" variant="secondary" type="button" className="max-w-[160px] truncate">
{me?.name ?? "账号"}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuContent align="end" className="w-48">
<DropdownMenuItem asChild className="cursor-pointer">
<Link to="/settings/profile">个人设置</Link>
</DropdownMenuItem>