feat(P25-2/P25-3/P26-2/P28-1/P24-2/P29-3): 落地内部OA够用版前端入口与运营页面

关联 Issue: P25-2, P25-3, P25-4, P26-2, P26-4, P28-1, P28-2, P28-3, P28-4, P24-2, P29-3
2026-03-21 18:03:48 +08:00
@@ -0,0 +1,78 @@
+import { useMemo, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useQuery } from "@tanstack/react-query";
+import { searchGlobal } from "../api/search";
+import { isApiError } from "../api/types";
+import { mapApiErrorMessage } from "../api/errorMessages";
+import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog";
+
+export function GlobalSearchDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
+  const navigate = useNavigate();
+  const [keyword, setKeyword] = useState("");
+  const trimmed = keyword.trim();
+  const searchQuery = useQuery({
+    enabled: open && trimmed.length >= 2,
+    queryKey: ["global-search", trimmed],
+    queryFn: () => searchGlobal(trimmed, 10),
+  });
+
+  const message = useMemo(() => {
+    if (!trimmed) return "输入编号、标题或关键字开始搜索。";
+    if (trimmed.length < 2) return "至少输入 2 个字符。";
+    if (searchQuery.isError) {
+      return isApiError(searchQuery.error)
+        ? `${searchQuery.error.code}: ${mapApiErrorMessage(searchQuery.error.code, searchQuery.error.details, searchQuery.error.message)}`
+        : "搜索失败，请稍后重试";
+    }
+    return null;
+  }, [trimmed, searchQuery.error, searchQuery.isError]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>全局搜索</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <Input
+            autoFocus
+            placeholder="搜索报销、请假、采购、差旅、资产"
+            value={keyword}
+            onChange={(event) => setKeyword(event.target.value)}
+          />
+
+          {message ? <div className="text-sm text-zinc-500">{message}</div> : null}
+
+          <div className="space-y-2">
+            {(searchQuery.data?.items ?? []).map((item) => (
+              <button
+                key={`${item.entityType}-${item.entityId}`}
+                type="button"
+                className="w-full rounded-lg border border-zinc-200 px-3 py-3 text-left hover:bg-zinc-50"
+                onClick={() => {
+                  onOpenChange(false);
+                  navigate(item.href);
+                }}
+              >
+                <div className="flex items-center justify-between gap-3">
+                  <div className="font-medium text-zinc-900">{item.title}</div>
+                  <div className="text-xs uppercase text-zinc-500">{item.matchedBy}</div>
+                </div>
+                {item.subtitle ? <div className="mt-1 text-sm text-zinc-600">{item.subtitle}</div> : null}
+                <div className="mt-1 text-xs text-zinc-500">{item.entityType} · {item.status ?? "-"}</div>
+              </button>
+            ))}
+          </div>
+
+          <div className="flex justify-end">
+            <Button variant="secondary" type="button" onClick={() => onOpenChange(false)}>
+              关闭
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
@@ -0,0 +1,34 @@
+import type { RiskFlag } from "../../api/feeControl";
+
+export function RiskFlagsCard({ items, title = "风险项" }: { items: RiskFlag[]; title?: string }) {
+  if (!items.length) {
+    return null;
+  }
+
+  return (
+    <div className="card-std space-y-3 p-6" data-testid="risk-flags-card">
+      <h3 className="text-base font-semibold text-zinc-900">{title}</h3>
+      <div className="space-y-3">
+        {items.map((item) => (
+          <div
+            key={item.id}
+            className={
+              item.level === "high"
+                ? "rounded-lg border border-red-200 bg-red-50 p-3"
+                : item.level === "medium"
+                  ? "rounded-lg border border-amber-200 bg-amber-50 p-3"
+                  : "rounded-lg border border-zinc-200 bg-zinc-50 p-3"
+            }
+          >
+            <div className="flex items-center justify-between gap-3">
+              <div className="font-medium text-zinc-900">{item.title}</div>
+              <span className="text-xs uppercase text-zinc-500">{item.level}</span>
+            </div>
+            {item.detail ? <div className="mt-1 text-sm text-zinc-600">{item.detail}</div> : null}
+            <div className="mt-2 text-xs text-zinc-500">来源：{item.source} · 状态：{item.status}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
@@ -11,6 +11,7 @@ export type NavItem = {
 };

 export const NAV_ITEMS: NavItem[] = [
+  { to: "/portal", label: "Portal", icon: "home_app_logo" },
  { to: "/dashboard", label: "仪表盘", icon: "dashboard" },
  {
    to: "/reimbursements",
@@ -42,6 +43,18 @@ export const NAV_ITEMS: NavItem[] = [
    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: "资产台账",
@@ -132,6 +145,24 @@ export const NAV_ITEMS: NavItem[] = [
    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: "功能开关",
@@ -3,13 +3,9 @@ import { Link } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import { fetchNotifications } from "../../api/notifications";
 import { useAuth } from "../../auth/AuthContext";
+import { GlobalSearchDialog } from "../GlobalSearchDialog";
 import { Button } from "../ui/button";
-import {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogTrigger,
-} from "../ui/dialog";
+import { Dialog, DialogClose, DialogContent, DialogTrigger } from "../ui/dialog";
 import {
  DropdownMenu,
  DropdownMenuContent,
@@ -29,12 +25,7 @@ function MenuIcon() {
      width="20"
      xmlns="http://www.w3.org/2000/svg"
    >
-      <path
-        d="M4 6h16M4 12h16M4 18h16"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeWidth="2"
-      />
+      <path d="M4 6h16M4 12h16M4 18h16" stroke="currentColor" strokeLinecap="round" strokeWidth="2" />
    </svg>
  );
 }
@@ -64,6 +55,7 @@ export function Topbar() {
  const { me, logout } = useAuth();
  const roleCodes = me?.roleCodes ?? [];
  const [mobileNavOpen, setMobileNavOpen] = useState(false);
+  const [searchOpen, setSearchOpen] = useState(false);

  const unreadQuery = useQuery({
    enabled: Boolean(me),
@@ -76,100 +68,122 @@ export function Topbar() {
  const unreadBadge = unreadCount > 99 ? "99+" : String(unreadCount);

  return (
-    <header className="sticky top-0 z-10 h-16 flex flex-col justify-center border-b border-zinc-200 bg-white px-4 sm:px-8">
-      <div className="flex items-center justify-between gap-4">
-        <div className="flex items-center gap-2">
-          <Dialog open={mobileNavOpen} onOpenChange={setMobileNavOpen}>
-            <DialogTrigger asChild>
-              <Button
-                className="lg:hidden"
-                size="icon"
-                variant="secondary"
-                aria-label="打开菜单"
-                type="button"
-              >
-                <MenuIcon />
-              </Button>
-            </DialogTrigger>
+    <>
+      <header className="sticky top-0 z-10 h-16 flex flex-col justify-center border-b border-zinc-200 bg-white px-4 sm:px-8">
+        <div className="flex items-center justify-between gap-4">
+          <div className="flex items-center gap-2">
+            <Dialog open={mobileNavOpen} onOpenChange={setMobileNavOpen}>
+              <DialogTrigger asChild>
+                <Button className="lg:hidden" size="icon" variant="secondary" aria-label="打开菜单" type="button">
+                  <MenuIcon />
+                </Button>
+              </DialogTrigger>

-            <DialogContent className="left-0 top-0 h-full w-72 max-w-[80vw] tranzinc-x-0 tranzinc-y-0 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">
-                      <span className="text-secondary capitalize">{me?.roleCodes?.[0] || 'User'}</span>
-                    </p>
-                    <p className="mt-1 text-sm font-bold text-zinc-900">海音达工作台</p>
+              <DialogContent className="left-0 top-0 h-full w-72 max-w-[80vw] tranzinc-x-0 tranzinc-y-0 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">
+                        <span className="text-secondary capitalize">{me?.roleCodes?.[0] || "User"}</span>
+                      </p>
+                      <p className="mt-1 text-sm font-bold text-zinc-900">海音达工作台</p>
+                    </div>
+                    <DialogClose asChild>
+                      <Button size="icon" variant="ghost" aria-label="关闭菜单" type="button">
+                        ✕
+                      </Button>
+                    </DialogClose>
+                  </div>
+
+                  <div className="flex-1 overflow-auto p-4">
+                    <NavLinks onNavigate={() => setMobileNavOpen(false)} />
                  </div>
-                  <DialogClose asChild>
-                    <Button size="icon" variant="ghost" aria-label="关闭菜单" type="button">
-                      ✕
-                    </Button>
-                  </DialogClose>
                </div>
+              </DialogContent>
+            </Dialog>

-                <div className="flex-1 overflow-auto p-4">
-                  <NavLinks onNavigate={() => setMobileNavOpen(false)} />
-                </div>
-              </div>
-            </DialogContent>
-          </Dialog>
-
-          <div>
-            <p className="text-sm text-zinc-500">欢迎回来</p>
-            <p className="text-base font-semibold text-zinc-900">{me?.name ?? "-"}</p>
-          </div>
-        </div>
-
-        <div className="flex items-center gap-3">
-          <Button
-            asChild
-            size="icon"
-            variant="secondary"
-            aria-label="通知"
-            type="button"
-            data-testid="notifications-bell"
-          >
-            <Link className="relative" to="/notifications">
-              <BellIcon />
-              {unreadCount > 0 ? (
-                <span className="absolute -right-2 -top-2 min-w-5 rounded-full bg-red-500 px-1.5 py-0.5 text-[10px] font-semibold leading-none text-white">
-                  {unreadBadge}
-                </span>
-              ) : null}
-            </Link>
-          </Button>
-
-          <div className="hidden text-right sm:block">
-            <p className="text-xs uppercase tracking-wide text-zinc-500">角色</p>
-            <p className="text-sm font-medium text-zinc-900">{roleCodes.join(" / ") || "-"}</p>
+            <div>
+              <p className="text-sm text-zinc-500">欢迎回来</p>
+              <p className="text-base font-semibold text-zinc-900">{me?.name ?? "-"}</p>
+            </div>
          </div>

-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="secondary" type="button">
-                {me?.name ?? "账号"}
-              </Button>
-            </DropdownMenuTrigger>
+          <div className="flex items-center gap-3">
+            <Button
+              size="sm"
+              variant="secondary"
+              type="button"
+              onClick={() => setSearchOpen(true)}
+              data-testid="global-search-trigger"
+              className="hidden md:inline-flex"
+            >
+              <span className="material-symbols-outlined mr-1 text-[18px]">search</span>
+              搜索
+            </Button>

-            <DropdownMenuContent align="end">
-              <DropdownMenuItem asChild className="cursor-pointer">
-                <Link to="/settings/profile">个人设置</Link>
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem
-                className="cursor-pointer text-red-600 focus:text-red-600"
-                onSelect={(event) => {
-                  event.preventDefault();
-                  void logout();
-                }}
-              >
-                退出登录
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+            <Button
+              size="icon"
+              variant="secondary"
+              type="button"
+              onClick={() => setSearchOpen(true)}
+              data-testid="global-search-trigger-mobile"
+              className="md:hidden"
+              aria-label="打开搜索"
+            >
+              <span className="material-symbols-outlined text-[18px]">search</span>
+            </Button>
+
+            <Button
+              asChild
+              size="icon"
+              variant="secondary"
+              aria-label="通知"
+              type="button"
+              data-testid="notifications-bell"
+            >
+              <Link className="relative" to="/notifications">
+                <BellIcon />
+                {unreadCount > 0 ? (
+                  <span className="absolute -right-2 -top-2 min-w-5 rounded-full bg-red-500 px-1.5 py-0.5 text-[10px] font-semibold leading-none text-white">
+                    {unreadBadge}
+                  </span>
+                ) : null}
+              </Link>
+            </Button>
+
+            <div className="hidden text-right sm:block">
+              <p className="text-xs uppercase tracking-wide text-zinc-500">角色</p>
+              <p className="text-sm font-medium text-zinc-900">{roleCodes.join(" / ") || "-"}</p>
+            </div>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="secondary" type="button">
+                  {me?.name ?? "账号"}
+                </Button>
+              </DropdownMenuTrigger>
+
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem asChild className="cursor-pointer">
+                  <Link to="/settings/profile">个人设置</Link>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  className="cursor-pointer text-red-600 focus:text-red-600"
+                  onSelect={(event) => {
+                    event.preventDefault();
+                    void logout();
+                  }}
+                >
+                  退出登录
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
        </div>
-      </div>
-    </header>
+      </header>
+
+      <GlobalSearchDialog open={searchOpen} onOpenChange={setSearchOpen} />
+    </>
  );
 }
@@ -2,6 +2,8 @@ import { useEffect, useMemo, useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import { mapApiErrorMessage } from '../../api/errorMessages';
+import { useAuth } from '../../auth/AuthContext';
+import { hasPermission } from '../../auth/permissions';
 import { fetchCostCenters, fetchLegalEntities } from '../../api/masterData';
 import {
  confirmTravelReconciliationItem,
@@ -58,6 +60,9 @@ type TravelReconciliationTabProps = {

 export function TravelReconciliationTab({ selectedBatchId, onSelectBatch }: TravelReconciliationTabProps) {
  const queryClient = useQueryClient();
+  const { permissions } = useAuth();
+  const canCreateBatch =
+    hasPermission(permissions, 'travel.payment.manage') || hasPermission(permissions, 'integration.manage');
  const [status, setStatus] = useState<TravelReconciliationBatchStatus | ''>('');
  const [legalEntityFilter, setLegalEntityFilter] = useState('');
  const [costCenterFilter, setCostCenterFilter] = useState('');
@@ -257,7 +262,7 @@ export function TravelReconciliationTab({ selectedBatchId, onSelectBatch }: Trav
  return (
    <div className="grid gap-6 xl:grid-cols-[360px_minmax(0,1fr)]">
      <section className="space-y-6">
-        {detail?.permissions.canManagePayments ? (
+        {canCreateBatch ? (
          <div className="card-std space-y-4 p-5">
            <div>
              <h3 className="text-base font-semibold text-zinc-900">新建对账批次</h3>