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-[#f7f7f9] flex h-screen w-screen overflow-hidden text-txt font-sans">
      {/* 侧边栏导航 */}
      <aside className="w-64 bg-white border-r border-border flex flex-col z-10 shrink-0">
        <div className="h-16 flex items-center px-6 border-b border-border">
          <i className="fa-solid fa-layer-group text-magenta text-xl mr-3"></i>
          <span className="text-lg font-extrabold text-txt">SAFe OS</span>
        </div>

        <div className="p-4 flex-1">
          <div className="text-[10px] font-bold text-txt-muted uppercase tracking-widest mb-3 px-1">主导模块</div>
          <nav className="space-y-1">
            <NavLink
              to="/"
              className={({ isActive }) =>
                `flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-semibold transition-all duration-150 ${
                  isActive && pathname === '/'
                    ? "bg-magenta/10 text-magenta"
                    : "text-txt hover:bg-surface-muted hover:text-magenta"
                }`
              }
            >
              <i className="fa-solid fa-house w-4 text-center shrink-0"></i>
              <span>总览控制台</span>
            </NavLink>
            <NavLink
              to="/planning"
              className={({ isActive }) =>
                `flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-semibold transition-all duration-150 ${
                  isActive
                    ? "bg-[#0EA5E9]/10 text-[#0EA5E9]"
                    : "text-txt hover:bg-surface-muted hover:text-[#0EA5E9]"
                }`
              }
            >
              <i className="fa-solid fa-chess-knight w-4 text-center shrink-0"></i>
              <span>战略规划</span>
            </NavLink>
            <NavLink
              to="/devops"
              className={({ isActive }) =>
                `flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-semibold transition-all duration-150 ${
                  isActive
                    ? "bg-[#10B981]/10 text-[#10B981]"
                    : "text-txt hover:bg-surface-muted hover:text-[#10B981]"
                }`
              }
            >
              <i className="fa-solid fa-code-branch w-4 text-center shrink-0"></i>
              <span>开发运维</span>
            </NavLink>
            <NavLink
              to="/quality/dashboard"
              className={() =>
                `flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-semibold transition-all duration-150 ${
                  pathname.startsWith('/quality')
                    ? "bg-[#8B5CF6]/10 text-[#8B5CF6]"
                    : "text-txt hover:bg-surface-muted hover:text-[#8B5CF6]"
                }`
              }
            >
              <i className="fa-solid fa-shield-halved w-4 text-center shrink-0"></i>
              <span>质量门控</span>
            </NavLink>
          </nav>

          <div className="text-[10px] font-bold text-txt-muted uppercase tracking-widest mt-8 mb-3 px-1">设置与支持</div>
          <nav className="space-y-1">
            <a href="#" className="flex items-center gap-3 px-4 py-2.5 text-txt text-sm font-semibold hover:bg-surface-muted rounded-xl transition-all duration-150">
              <i className="fa-solid fa-gear w-4 text-center shrink-0"></i>
              <span>平台设置</span>
            </a>
          </nav>
        </div>

        <div className="p-4 border-t border-border flex items-center gap-3">
          <div className="w-9 h-9 rounded-full bg-magenta/10 text-magenta flex items-center justify-center text-sm font-bold shrink-0">A</div>
          <div>
            <p className="text-sm font-semibold text-txt">项目管理员</p>
            <p className="text-xs text-txt-muted flex items-center gap-1">
              <span className="w-1.5 h-1.5 bg-green-400 rounded-full inline-block"></span>在线
            </p>
          </div>
        </div>
      </aside>

      {/* 主内容区 */}
      <main className="flex-1 flex flex-col h-screen overflow-y-auto relative min-w-0">
        {/* 顶部导航 */}
        <header className="h-14 bg-white border-b border-border flex items-center justify-between px-8 z-0 shrink-0 shadow-[0_1px_4px_rgba(0,0,0,0.04)]">
          <h1 className="text-base font-bold text-txt">{pageTitle}</h1>
          {pathname === '/' && (
            <div className="flex items-center gap-3">
              <div className="relative">
                <i className="fa-solid fa-search absolute left-3 top-1/2 -translate-y-1/2 text-txt-muted text-xs"></i>
                <input type="text" placeholder="搜索需求、代码或 PR…" className="pl-9 pr-4 py-2 border border-border rounded-xl text-sm focus:outline-none focus:border-magenta focus:ring-2 focus:ring-magenta/10 w-60 transition-all bg-[#f7f7f9]" />
              </div>
              <button className="relative p-2 text-txt-muted hover:text-magenta transition-colors">
                <i className="fa-regular fa-bell text-base"></i>
                <span className="absolute top-1.5 right-1.5 w-2 h-2 bg-red-500 rounded-full border border-white"></span>
              </button>
            </div>
          )}
        </header>

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