R32-1 R32-4 R33-2: 收口工作台交互与报销链路

client/src/components/GlobalSearchDialog.tsx

@@ -8,6 +8,15 @@ import { Button } from "./ui/button";
 import { Input } from "./ui/input";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog";
 
+type SearchGroupKey = "people" | "documents" | "projectAnnouncement" | "other";
+
+const SEARCH_GROUPS: Array<{ key: SearchGroupKey; label: string }> = [
+  { key: "people", label: "人员" },
+  { key: "documents", label: "业务单据" },
+  { key: "projectAnnouncement", label: "项目与公告" },
+  { key: "other", label: "其他" },
+];
+
 function entityLabel(entityType: string) {
   if (entityType === "employee") return "人员";
   if (entityType === "announcement") return "公告";
@@ -24,6 +33,29 @@ function entityLabel(entityType: string) {
   return entityType;
 }
 
+function resolveSearchGroup(entityType: string): SearchGroupKey {
+  if (entityType === "employee") {
+    return "people";
+  }
+
+  if ([
+    "reimbursement",
+    "leave",
+    "purchase_request",
+    "travel_request",
+    "weekly_report",
+    "todo",
+  ].includes(entityType)) {
+    return "documents";
+  }
+
+  if (["project", "announcement"].includes(entityType)) {
+    return "projectAnnouncement";
+  }
+
+  return "other";
+}
+
 export function GlobalSearchDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
   const navigate = useNavigate();
   const [keyword, setKeyword] = useState("");
@@ -31,19 +63,33 @@ export function GlobalSearchDialog({ open, onOpenChange }: { open: boolean; onOp
   const searchQuery = useQuery({
     enabled: open && trimmed.length >= 2,
     queryKey: ["global-search", trimmed],
-    queryFn: () => searchGlobal(trimmed, 10),
+    queryFn: () => searchGlobal(trimmed, 20),
   });
 
+  const groupedItems = useMemo(() => {
+    const items = searchQuery.data?.items ?? [];
+    return SEARCH_GROUPS.map((group) => {
+      const matches = items.filter((item) => resolveSearchGroup(item.entityType) === group.key);
+      return {
+        ...group,
+        total: matches.length,
+        items: matches.slice(0, 3),
+      };
+    }).filter((group) => group.total > 0);
+  }, [searchQuery.data?.items]);
+
   const message = useMemo(() => {
     if (!trimmed) return "输入姓名、公告、项目、合同、资产、请假、报销、周报或待办关键字开始搜索。";
     if (trimmed.length < 2) return "至少输入 2 个字符。";
+    if (searchQuery.isLoading) return "搜索中...";
     if (searchQuery.isError) {
       return isApiError(searchQuery.error)
         ? `${searchQuery.error.code}: ${mapApiErrorMessage(searchQuery.error.code, searchQuery.error.details, searchQuery.error.message)}`
         : "搜索失败，请稍后重试";
     }
+    if (!groupedItems.length) return "未找到匹配结果。";
     return null;
-  }, [trimmed, searchQuery.error, searchQuery.isError]);
+  }, [groupedItems.length, searchQuery.error, searchQuery.isError, searchQuery.isLoading, trimmed]);
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
@@ -61,24 +107,39 @@ export function GlobalSearchDialog({ open, onOpenChange }: { open: boolean; onOp
 
           {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="space-y-4">
+            {groupedItems.map((group) => (
+              <section key={group.key} className="space-y-2">
                 <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>
+                  <h3 className="text-sm font-semibold text-zinc-900">{group.label}</h3>
+                  <span className="text-xs text-zinc-400">{group.total} 条</span>
                 </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">{entityLabel(item.entityType)} · {item.status ?? "-"}</div>
-              </button>
+
+                <div className="space-y-2">
+                  {group.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">{entityLabel(item.entityType)} · {item.status ?? "-"}</div>
+                    </button>
+                  ))}
+                </div>
+
+                {group.total > group.items.length ? (
+                  <div className="text-xs text-zinc-400">查看更多结果</div>
+                ) : null}
+              </section>
             ))}
           </div>
 

client/src/components/navigation/Topbar.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import { fetchNotifications } from "../../api/notifications";
@@ -58,6 +58,36 @@ export function Topbar() {
   const unreadCount = unreadQuery.data?.unreadCount ?? 0;
   const unreadBadge = unreadCount > 99 ? "99+" : String(unreadCount);
 
+  useEffect(() => {
+    const handleKeydown = (event: KeyboardEvent) => {
+      if (!(event.metaKey || event.ctrlKey) || event.altKey || event.shiftKey) {
+        return;
+      }
+
+      if (event.key.toLowerCase() !== "k") {
+        return;
+      }
+
+      if (!window.matchMedia("(min-width: 768px)").matches) {
+        return;
+      }
+
+      const target = event.target;
+      if (target instanceof HTMLElement) {
+        const tagName = target.tagName.toLowerCase();
+        if (target.isContentEditable || tagName === "input" || tagName === "textarea" || tagName === "select") {
+          return;
+        }
+      }
+
+      event.preventDefault();
+      setSearchOpen(true);
+    };
+
+    window.addEventListener("keydown", handleKeydown);
+    return () => window.removeEventListener("keydown", handleKeydown);
+  }, []);
+
   return (
     <>
       <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">