update ui
This commit is contained in:
@@ -19,80 +19,87 @@ export default function Layout() {
|
||||
}, [pathname]);
|
||||
|
||||
return (
|
||||
<div className="bg-gray-50 flex h-screen w-screen overflow-hidden text-gray-800 font-sans">
|
||||
<div className="bg-[#f7f7f9] flex h-screen w-screen overflow-hidden text-txt 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>
|
||||
<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-xs font-semibold text-gray-400 uppercase tracking-wider mb-4">主导模块</div>
|
||||
<nav className="space-y-2">
|
||||
<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 px-4 py-3 rounded-lg font-medium transition-colors ${
|
||||
`flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-semibold transition-all duration-150 ${
|
||||
isActive && pathname === '/'
|
||||
? "bg-blue-50 text-[#2563EB]"
|
||||
: "text-gray-600 hover:bg-gray-50 hover:text-[#2563EB]"
|
||||
? "bg-magenta/10 text-magenta"
|
||||
: "text-txt hover:bg-surface-muted hover:text-magenta"
|
||||
}`
|
||||
}
|
||||
>
|
||||
<i className="fa-solid fa-house w-6"></i> 总览控制台
|
||||
<i className="fa-solid fa-house w-4 text-center shrink-0"></i>
|
||||
<span>总览控制台</span>
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/planning"
|
||||
className={({ isActive }) =>
|
||||
`flex items-center px-4 py-3 rounded-lg font-medium transition-colors ${
|
||||
`flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-semibold transition-all duration-150 ${
|
||||
isActive
|
||||
? "bg-blue-50 text-[#0EA5E9]"
|
||||
: "text-gray-600 hover:bg-gray-50 hover:text-[#0EA5E9]"
|
||||
? "bg-[#0EA5E9]/10 text-[#0EA5E9]"
|
||||
: "text-txt hover:bg-surface-muted hover:text-[#0EA5E9]"
|
||||
}`
|
||||
}
|
||||
>
|
||||
<i className="fa-solid fa-chess-knight w-6"></i> 战略规划 (Planning)
|
||||
<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 px-4 py-3 rounded-lg font-medium transition-colors ${
|
||||
`flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-semibold transition-all duration-150 ${
|
||||
isActive
|
||||
? "bg-green-50 text-[#10B981]"
|
||||
: "text-gray-600 hover:bg-gray-50 hover:text-[#10B981]"
|
||||
? "bg-[#10B981]/10 text-[#10B981]"
|
||||
: "text-txt hover:bg-surface-muted hover:text-[#10B981]"
|
||||
}`
|
||||
}
|
||||
>
|
||||
<i className="fa-solid fa-code-branch w-6"></i> 开发运维 (DevOps)
|
||||
<i className="fa-solid fa-code-branch w-4 text-center shrink-0"></i>
|
||||
<span>开发运维</span>
|
||||
</NavLink>
|
||||
<NavLink
|
||||
to="/quality/dashboard"
|
||||
className={({ isActive }) =>
|
||||
`flex items-center px-4 py-3 rounded-lg font-medium transition-colors ${
|
||||
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-purple-50 text-[#8B5CF6]"
|
||||
: "text-gray-600 hover:bg-gray-50 hover:text-[#8B5CF6]"
|
||||
? "bg-[#8B5CF6]/10 text-[#8B5CF6]"
|
||||
: "text-txt hover:bg-surface-muted hover:text-[#8B5CF6]"
|
||||
}`
|
||||
}
|
||||
>
|
||||
<i className="fa-solid fa-shield-halved w-6"></i> 质量门控 (Quality Gate)
|
||||
<i className="fa-solid fa-shield-halved w-4 text-center shrink-0"></i>
|
||||
<span>质量门控</span>
|
||||
</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> 平台设置
|
||||
<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-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 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">项目管理员</p>
|
||||
<p className="text-xs text-gray-500">在线</p>
|
||||
<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>
|
||||
@@ -100,24 +107,24 @@ export default function Layout() {
|
||||
{/* 主内容区 */}
|
||||
<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>
|
||||
<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 space-x-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<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" />
|
||||
<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-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 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-gray-50 overflow-y-auto">
|
||||
<div className="flex-1 w-full bg-[#f7f7f9] overflow-y-auto">
|
||||
<Outlet />
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user