safe-os-ui/src/Layout.tsx

import { useMemo } from "react";
import { NavLink, Outlet, useLocation } from "react-router-dom";

const PAGE_TITLES: Record<string, string> = {
  "/": "总览控制台",
  "/planning": "战略规划 (Planning)",
  "/devops": "开发运维 (DevOps)",
  "/quality": "质量门控 (Quality Gate Dashboard)",
  "/quality/dashboard": "质量门控 (Quality Gate Dashboard)",
  "/quality/pr-list": "合并请求审查 (PR List)",
  "/quality/settings": "质量设置",
};

export default function Layout() {
  const { pathname } = useLocation();

  const pageTitle = useMemo(() => {
    return PAGE_TITLES[pathname] || "SAFe OS";
  }, [pathname]);

  return (
    <div className="bg-gray-50 flex h-screen w-screen overflow-hidden text-gray-800 font-sans">
      {/* 侧边栏导航 */}
      <aside className="w-64 bg-white shadow-md flex flex-col z-10 shrink-0">
        <div className="h-16 flex items-center px-6 border-b border-gray-100">
          <i className="fa-solid fa-layer-group text-[#2563EB] text-2xl mr-3"></i>
          <span className="text-xl font-bold text-gray-800">SAFe OS</span>
        </div>
        
        <div className="p-4 flex-1">
          <div className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-4">主导模块</div>
          <nav className="space-y-2">
            <NavLink
              to="/"
              className={({ isActive }) =>
                `flex items-center px-4 py-3 rounded-lg font-medium transition-colors ${
                  isActive && pathname === '/'
                    ? "bg-blue-50 text-[#2563EB]"
                    : "text-gray-600 hover:bg-gray-50 hover:text-[#2563EB]"
                }`
              }
            >
              <i className="fa-solid fa-house w-6"></i> 总览控制台
            </NavLink>
            <NavLink
              to="/planning"
              className={({ isActive }) =>
                `flex items-center px-4 py-3 rounded-lg font-medium transition-colors ${
                  isActive
                    ? "bg-blue-50 text-[#0EA5E9]"
                    : "text-gray-600 hover:bg-gray-50 hover:text-[#0EA5E9]"
                }`
              }
            >
              <i className="fa-solid fa-chess-knight w-6"></i> 战略规划 (Planning)
            </NavLink>
            <NavLink
              to="/devops"
              className={({ isActive }) =>
                `flex items-center px-4 py-3 rounded-lg font-medium transition-colors ${
                  isActive
                    ? "bg-green-50 text-[#10B981]"
                    : "text-gray-600 hover:bg-gray-50 hover:text-[#10B981]"
                }`
              }
            >
              <i className="fa-solid fa-code-branch w-6"></i> 开发运维 (DevOps)
            </NavLink>
            <NavLink
              to="/quality/dashboard"
              className={({ isActive }) =>
                `flex items-center px-4 py-3 rounded-lg font-medium transition-colors ${
                  pathname.startsWith('/quality')
                    ? "bg-purple-50 text-[#8B5CF6]"
                    : "text-gray-600 hover:bg-gray-50 hover:text-[#8B5CF6]"
                }`
              }
            >
              <i className="fa-solid fa-shield-halved w-6"></i> 质量门控 (Quality Gate)
            </NavLink>
          </nav>

          <div className="text-xs font-semibold text-gray-400 uppercase tracking-wider mt-8 mb-4">设置与支持</div>
          <nav className="space-y-2">
            <a href="#" className="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors">
              <i className="fa-solid fa-gear w-6"></i> 平台设置
            </a>
          </nav>
        </div>

        <div className="p-4 border-t border-gray-100 flex items-center">
          <img src="https://ui-avatars.com/api/?name=Admin&background=F3F4F6&color=374151" alt="User" className="w-10 h-10 rounded-full mr-3" />
          <div>
            <p className="text-sm font-semibold">项目管理员</p>
            <p className="text-xs text-gray-500">在线</p>
          </div>
        </div>
      </aside>

      {/* 主内容区 */}
      <main className="flex-1 flex flex-col h-screen overflow-y-auto relative min-w-0">
        {/* 顶部导航 */}
        <header className="h-16 bg-white shadow-sm flex items-center justify-between px-8 z-0 shrink-0">
          <h1 className="text-xl font-semibold text-gray-800">{pageTitle}</h1>
          {pathname === '/' && (
            <div className="flex items-center space-x-4">
              <div className="relative">
                <i className="fa-solid fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                <input type="text" placeholder="全局搜索需求、代码或 PR..." className="pl-10 pr-4 py-2 border border-gray-200 rounded-full text-sm focus:outline-none focus:border-[#2563EB] focus:ring-1 focus:ring-[#2563EB] w-64 transition-all" />
              </div>
              <button className="relative p-2 text-gray-500 hover:text-[#2563EB] transition-colors">
                <i className="fa-regular fa-bell text-xl"></i>
                <span className="absolute top-1 right-1 w-2.5 h-2.5 bg-red-500 rounded-full border-2 border-white"></span>
              </button>
            </div>
          )}
        </header>

        {/* 内容画布 */}
        <div className="flex-1 w-full bg-gray-50 overflow-y-auto">
          <Outlet />
        </div>
      </main>
    </div>
  );
}