From daba6b094b68ae2c6abdeef3f03f89d5d1eaa61c Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Sun, 14 Sep 2025 23:22:57 +0800
Subject: [PATCH] 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
---
 src/App.tsx | 52 +++++++++++++++++++++++++++-------------------------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index ebc4158..9d33fe2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -206,9 +206,9 @@ function App() {
   };
 
   return (
-    <div className="min-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">
+    <div className="h-screen flex flex-col bg-gray-50 dark:bg-gray-950">
+      {/* 顶部导航区域 - 固定高度 */}
+      <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 gap-2">
             <h1 className="text-xl font-semibold text-blue-500 dark:text-blue-400">
@@ -247,29 +247,31 @@ function App() {
         </div>
       </header>
 
-      {/* 主内容区域 */}
-      <main className="flex-1 p-6">
-        <div className="max-w-4xl mx-auto">
-          {/* 通知组件 */}
-          {notification && (
-            <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 ${
-                notification.type === "error"
-                  ? "bg-red-500 text-white"
-                  : "bg-green-500 text-white"
-              } ${isNotificationVisible ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-2"}`}
-            >
-              {notification.message}
-            </div>
-          )}
+      {/* 主内容区域 - 独立滚动 */}
+      <main className="flex-1 overflow-y-scroll">
+        <div className="pt-3 px-6 pb-6">
+          <div className="max-w-4xl mx-auto">
+            {/* 通知组件 - 相对于视窗定位 */}
+            {notification && (
+              <div
+                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"
+                    ? "bg-red-500 text-white"
+                    : "bg-green-500 text-white"
+                } ${isNotificationVisible ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-2"}`}
+              >
+                {notification.message}
+              </div>
+            )}
 
-          <ProviderList
-            providers={providers}
-            currentProviderId={currentProviderId}
-            onSwitch={handleSwitchProvider}
-            onDelete={handleDeleteProvider}
-            onEdit={setEditingProviderId}
-          />
+            <ProviderList
+              providers={providers}
+              currentProviderId={currentProviderId}
+              onSwitch={handleSwitchProvider}
+              onDelete={handleDeleteProvider}
+              onEdit={setEditingProviderId}
+            />
+          </div>
         </div>
       </main>