feat: R27-2 R27-5 优化企微入口与 Portal 体验

client/src/components/navigation/NavLinks.tsx

@@ -1,6 +1,6 @@
 import { NavLink } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
-import { fetchSystemNavigation } from "../../api/workspace";
+import { fetchSystemNavigation, type NavigationItem } from "../../api/workspace";
 import { useAuth } from "../../auth/AuthContext";
 import { hasAnyPermission } from "../../auth/permissions";
 import { cn } from "../../lib/utils";
@@ -22,7 +22,6 @@ export const NAV_ITEMS: NavItem[] = [
   { to: "/todos", label: "待办", icon: "check_circle" },
   { to: "/announcements", label: "公告", icon: "campaign" },
   { to: "/projects", label: "项目", icon: "workspaces", anyOf: ["project.view_own", "project.view_all", "project.manage"] },
-  { to: "/contracts-registry", label: "合同台账", icon: "description", anyOf: ["project.view_own", "project.view_all", "project.manage", "system.settings"] },
   { 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"] },
@@ -30,6 +29,7 @@ export const NAV_ITEMS: NavItem[] = [
   { 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: "/contracts-registry", label: "合同台账", icon: "description", anyOf: ["project.view_own", "project.view_all", "project.manage", "system.settings"] },
   { 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"] },
@@ -43,17 +43,47 @@ export const NAV_ITEMS: NavItem[] = [
   { 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": "待我处理",
   "/assets": "资产台账",
 };
 
-function renderSection(
-  title: string,
-  items: Array<{ key?: string; href: string; label: string; icon: string }>,
-  onNavigate?: () => void,
-) {
+type ResolvedNavItem = {
+  key?: string;
+  href: string;
+  label: string;
+  icon: string;
+};
+
+function renderNavItem(item: ResolvedNavItem, onNavigate?: () => void) {
+  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}
+      onClick={() => onNavigate?.()}
+      className={({ isActive }) =>
+        cn(
+          "flex items-center gap-3 rounded-lg px-3 py-2 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",
+        )
+      }
+    >
+      <span className="material-symbols-outlined text-[20px]">{item.icon}</span>
+      <span>{item.label}</span>
+    </NavLink>
+  );
+}
+
+function renderSection(title: string, items: ResolvedNavItem[], onNavigate?: () => void) {
   if (!items.length) {
     return null;
   }
@@ -61,30 +91,29 @@ function renderSection(
   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) => (
-        <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}
-          onClick={() => onNavigate?.()}
-          className={({ isActive }) =>
-            cn(
-              "flex items-center gap-3 px-3 py-2 my-1 rounded-lg 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",
-            )
-          }
-        >
-          <span className="material-symbols-outlined text-[20px]">{item.icon}</span>
-          <span>{item.label}</span>
-        </NavLink>
-      ))}
+      {items.map((item) => renderNavItem(item, onNavigate))}
     </div>
   );
 }
 
+function renderBackupSection(items: ResolvedNavItem[], onNavigate?: () => void) {
+  if (!items.length) {
+    return null;
+  }
+
+  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>
+        <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>
+    </details>
+  );
+}
+
 function buildFallbackItems(permissions: string[]) {
   const mapItems = (paths: string[]) =>
     NAV_ITEMS.filter((item) => paths.includes(item.to))
@@ -92,23 +121,55 @@ function buildFallbackItems(permissions: string[]) {
       .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", "/projects"]),
-    admin: mapItems(["/system/workspace", "/people", "/contracts-registry", "/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"]),
+    main: mapItems(MAIN_NAV_ORDER),
+    admin: mapItems(ADMIN_NAV_ORDER),
+    backup: mapItems(BACKUP_NAV_ORDER),
   };
 }
 
+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);
+    }
+  }
+
+  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 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 };
+}
+
 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);
+  const sections = navigationQuery.data?.sections
+    ? normalizeSections(navigationQuery.data.sections)
+    : buildFallbackItems(permissions);
 
   return (
-    <nav className="space-y-3">
+    <nav className="space-y-4">
       {renderSection("主导航", sections.main, onNavigate)}
-      {renderSection("管理", sections.admin, onNavigate)}
-      {renderSection("备用", sections.backup, onNavigate)}
+      {renderSection("管理入口", sections.admin, onNavigate)}
+      {renderBackupSection(sections.backup, onNavigate)}
     </nav>
   );
 }

client/src/components/navigation/Sidebar.tsx

@@ -2,10 +2,15 @@ import { NavLinks } from "./NavLinks";
 
 export function Sidebar() {
   return (
-    <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>
+    <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>
+        </div>
       </div>
 
       <div className="min-h-0 flex-1 overflow-y-auto p-3">

client/src/components/navigation/Topbar.tsx

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import { useQuery } from "@tanstack/react-query";
 import { fetchNotifications } from "../../api/notifications";
 import { useAuth } from "../../auth/AuthContext";
+import { isWecomWebView } from "../../lib/runtimeContext";
 import { GlobalSearchDialog } from "../GlobalSearchDialog";
 import { Button } from "../ui/button";
 import { Dialog, DialogClose, DialogContent, DialogTrigger } from "../ui/dialog";
@@ -53,9 +54,9 @@ function BellIcon() {
 
 export function Topbar() {
   const { me, logout } = useAuth();
-  const roleCodes = me?.roleCodes ?? [];
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
   const [searchOpen, setSearchOpen] = useState(false);
+  const wecomEntry = isWecomWebView();
 
   const unreadQuery = useQuery({
     enabled: Boolean(me),
@@ -69,9 +70,9 @@ export function Topbar() {
 
   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">
+      <header className="sticky top-0 z-10 border-b border-zinc-200 bg-white px-4 py-3 sm:px-8">
         <div className="flex items-center justify-between gap-4">
-          <div className="flex items-center gap-2">
+          <div className="flex min-w-0 items-center gap-2">
             <Dialog open={mobileNavOpen} onOpenChange={setMobileNavOpen}>
               <DialogTrigger asChild>
                 <Button className="lg:hidden" size="icon" variant="secondary" aria-label="打开菜单" type="button">
@@ -79,13 +80,11 @@ export function Topbar() {
                 </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">
+              <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">
-                        <span className="text-secondary capitalize">{me?.roleCodes?.[0] || "User"}</span>
-                      </p>
+                      <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>
                     <DialogClose asChild>
@@ -102,9 +101,16 @@ export function Topbar() {
               </DialogContent>
             </Dialog>
 
-            <div>
+            <div className="min-w-0">
               <p className="text-sm text-zinc-500">欢迎回来</p>
-              <p className="text-base font-semibold text-zinc-900">{me?.name ?? "-"}</p>
+              <div className="flex flex-wrap items-center gap-2">
+                <p className="truncate text-base font-semibold text-zinc-900">{me?.name ?? "-"}</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>
+                ) : null}
+              </div>
             </div>
           </div>
 
@@ -151,11 +157,6 @@ export function Topbar() {
               </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">