fix title area

src/components/Sidebar.vue

@@ -57,7 +57,7 @@
   width: 240px;
   background-color: var(--sidebar-bg);
   border-right: 1px solid var(--border-color);
-  padding: 40px 20px;
+  padding: 40px 20px 5px 20px;
   display: flex;
   flex-direction: column;
 }

src/views/Essentials.vue

@@ -1,5 +1,7 @@
 <template>
   <main class="content">
+    <!-- 固定标头区域 -->
+    <div class="sticky-header">
       <header class="content-header">
         <div class="header-left">
           <h1>装机必备</h1>
@@ -44,7 +46,10 @@
           <button @click="store.invertSelection('essential')" class="text-btn" :disabled="store.isBusy">反选</button>
         </div>
       </div>
+    </div>
     
+    <!-- 可滚动内容区域 -->
+    <div class="scroll-content">
       <div v-if="store.loading && store.mergedEssentials.length === 0" class="loading-state">
         <div class="spinner"></div>
         <p>正在读取必备软件列表...</p>
@@ -63,7 +68,7 @@
           @toggle-select="store.toggleSelection($event, 'essential')"
           @toggle-post-install="store.togglePostInstallPref"
         />
-
+      </div>
     </div>
   </main>
 </template>
@@ -99,8 +104,23 @@ onMounted(() => {
 <style scoped>
 .content {
   flex: 1;
-  padding: 40px 60px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden; /* 关键：禁止最外层滚动 */
+}
+
+.sticky-header {
+  padding: 40px 60px 10px 60px;
+  background-color: #F5F5F7; /* 与 App.vue 背景色保持一致 */
+  z-index: 10;
+  flex-shrink: 0;
+}
+
+.scroll-content {
+  flex: 1;
   overflow-y: auto;
+  padding: 10px 60px 40px 60px;
 }
 
 .content-header {
@@ -138,16 +158,16 @@ onMounted(() => {
   align-items: center;
 }
 
-/* 批量选择工具栏 */
 .selection-toolbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px 20px;
-  background-color: rgba(0, 0, 0, 0.02);
+  background-color: white; /* 这里的工具栏背景设为白色更清晰 */
   border-radius: 12px;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
   border: 1px solid rgba(0, 0, 0, 0.03);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
 }
 
 .selection-count {

src/views/Updates.vue

@@ -1,5 +1,7 @@
 <template>
   <main class="content">
+    <!-- 固定标头区域 -->
+    <div class="sticky-header">
       <header class="content-header">
         <div class="header-left">
           <h1>软件更新</h1>
@@ -43,7 +45,10 @@
           <button @click="store.invertSelection('update')" class="text-btn" :disabled="store.isBusy">反选</button>
         </div>
       </div>
+    </div>
     
+    <!-- 可滚动内容区域 -->
+    <div class="scroll-content">
       <div v-if="store.loading && store.updates.length === 0" class="loading-state">
         <div class="spinner"></div>
         <p>正在使用 Winget 扫描可用的更新...</p>
@@ -67,7 +72,7 @@
           @toggle-select="store.toggleSelection($event, 'update')"
           @toggle-post-install="store.togglePostInstallPref"
         />
-
+      </div>
     </div>
   </main>
 </template>
@@ -100,8 +105,23 @@ onMounted(() => {
 <style scoped>
 .content {
   flex: 1;
-  padding: 40px 60px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden; /* 关键：禁止最外层滚动 */
+}
+
+.sticky-header {
+  padding: 40px 60px 10px 60px;
+  background-color: #F5F5F7;
+  z-index: 10;
+  flex-shrink: 0;
+}
+
+.scroll-content {
+  flex: 1;
   overflow-y: auto;
+  padding: 10px 60px 40px 60px;
 }
 
 .content-header {
@@ -123,16 +143,16 @@ onMounted(() => {
   align-items: center;
 }
 
-/* 批量选择工具栏 */
 .selection-toolbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px 20px;
-  background-color: rgba(0, 0, 0, 0.02);
+  background-color: white;
   border-radius: 12px;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
   border: 1px solid rgba(0, 0, 0, 0.03);
+  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
 }
 
 .selection-count {