fix(ui): refactor layout with fixed header and prevent layout shift

- Convert layout to flexbox with fixed header and scrollable content area
- Use overflow-y-scroll to always show scrollbar track
- Prevents content width changes when switching between apps
- Ensures consistent 12px spacing between header and content
This commit is contained in:
Jason
2025-09-14 23:22:57 +08:00
parent 711ad843ce
commit daba6b094b

View File

@@ -206,9 +206,9 @@ function App() {
}; };
return ( return (
<div className="min-h-screen flex flex-col bg-gray-50 dark:bg-gray-950"> <div className="h-screen flex flex-col bg-gray-50 dark:bg-gray-950">
{/* Linear 风格的顶部导航 */} {/* 顶部导航区域 - 固定高度 */}
<header className="bg-white border-b border-gray-200 dark:bg-gray-900 dark:border-gray-800 px-6 py-4"> <header className="flex-shrink-0 bg-white border-b border-gray-200 dark:bg-gray-900 dark:border-gray-800 px-6 py-4">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<h1 className="text-xl font-semibold text-blue-500 dark:text-blue-400"> <h1 className="text-xl font-semibold text-blue-500 dark:text-blue-400">
@@ -247,13 +247,14 @@ function App() {
</div> </div>
</header> </header>
{/* 主内容区域 */} {/* 主内容区域 - 独立滚动 */}
<main className="flex-1 p-6"> <main className="flex-1 overflow-y-scroll">
<div className="pt-3 px-6 pb-6">
<div className="max-w-4xl mx-auto"> <div className="max-w-4xl mx-auto">
{/* 通知组件 */} {/* 通知组件 - 相对于视窗定位 */}
{notification && ( {notification && (
<div <div
className={`fixed top-6 left-1/2 transform -translate-x-1/2 z-50 px-4 py-3 rounded-lg shadow-lg transition-all duration-300 ${ className={`fixed top-20 left-1/2 transform -translate-x-1/2 z-50 px-4 py-3 rounded-lg shadow-lg transition-all duration-300 ${
notification.type === "error" notification.type === "error"
? "bg-red-500 text-white" ? "bg-red-500 text-white"
: "bg-green-500 text-white" : "bg-green-500 text-white"
@@ -271,6 +272,7 @@ function App() {
onEdit={setEditingProviderId} onEdit={setEditingProviderId}
/> />
</div> </div>
</div>
</main> </main>
{isAddModalOpen && ( {isAddModalOpen && (