From 37217cd6fbd59cd14fd900b6adaabc867a3f51d0 Mon Sep 17 00:00:00 2001
From: shenmo <jifengshenmo@outlook.com>
Date: Fri, 17 Jul 2026 21:12:50 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E5=8F=91=E5=B8=83v5.2.1=E7=89=88?=
 =?UTF-8?q?=E6=9C=AC=E5=B9=B6=E4=BC=98=E5=8C=96=E5=B8=83=E5=B1=80=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 调整AppGrid和主容器的高度样式，替换calc(100vh - 140px)为100%适配布局
2. 为下载队列添加滚轮隐藏/显示动画和交互逻辑
3. 优化主内容区域的flex布局结构，修复滚动和容器收缩问题
---
 package-lock.json                |  4 ++--
 src/App.vue                      | 29 ++++++++++++++-------------
 src/components/AppGrid.vue       |  9 +++------
 src/components/DownloadQueue.vue | 34 ++++++++++++++++++++++++++++++--
 4 files changed, 52 insertions(+), 24 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2ddfd728..f3e37001 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "spark-store",
-  "version": "5.2.0",
+  "version": "5.2.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "spark-store",
-      "version": "5.2.0",
+      "version": "5.2.1",
       "license": "GPL-3.0",
       "dependencies": {
         "@tailwindcss/vite": "^4.1.18",
diff --git a/src/App.vue b/src/App.vue
index f8da1eea..83240255 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -45,9 +45,9 @@
         />
       </aside>
 
-      <main class="h-full min-h-0 flex-1">
+      <main class="flex h-full min-h-0 flex-1 flex-col">
         <div
-          class="sticky top-10 z-30 border-b border-slate-200/70 bg-slate-50 px-4 py-4 lg:px-10 dark:border-slate-800/70 dark:bg-slate-950"
+          class="sticky top-10 z-30 shrink-0 border-b border-slate-200/70 bg-slate-50 px-4 py-4 lg:px-10 dark:border-slate-800/70 dark:bg-slate-950"
         >
           <AppHeader
             :search-query="searchQuery"
@@ -67,12 +67,13 @@
             activeTab !== 'home' &&
             Object.keys(displayCategories).length > 0
           "
+          class="shrink-0"
           :categories="displayCategories"
           :selected-category="selectedCategory"
           :category-counts="categoryCounts"
           @select-category="selectSubCategory"
         />
-        <div class="px-4 py-6 lg:px-10">
+        <div class="flex min-h-0 flex-1 flex-col px-4 py-6 lg:px-10">
           <FavoriteFolderManager
             v-if="currentView === 'favorites'"
             :folders="favoriteFolders"
@@ -87,9 +88,7 @@
             @open-detail="openDetail"
           />
           <template v-else-if="activeTab === 'home'">
-            <div
-              class="max-h-[calc(100vh-8rem)] overflow-y-auto pr-2 scrollbar-nowidth"
-            >
+            <div class="h-full overflow-y-auto pr-2 scrollbar-nowidth">
               <HomeView
                 :links="homeLinks"
                 :loading="homeLoading"
@@ -99,14 +98,16 @@
             </div>
           </template>
           <template v-else>
-            <AppGrid
-              :apps="filteredApps"
-              :loading="effectiveLoading"
-              :scroll-key="activeTab + '-' + selectedCategory"
-              :store-filter="storeFilter"
-              :show-origin="storeFilter === 'both' && !isHomeListTab"
-              @open-detail="handleAppCardOpenDetail"
-            />
+            <div class="min-h-0 flex-1">
+              <AppGrid
+                :apps="filteredApps"
+                :loading="effectiveLoading"
+                :scroll-key="activeTab + '-' + selectedCategory"
+                :store-filter="storeFilter"
+                :show-origin="storeFilter === 'both' && !isHomeListTab"
+                @open-detail="handleAppCardOpenDetail"
+              />
+            </div>
           </template>
         </div>
       </main>
diff --git a/src/components/AppGrid.vue b/src/components/AppGrid.vue
index e995e0c5..be14e4aa 100644
--- a/src/components/AppGrid.vue
+++ b/src/components/AppGrid.vue
@@ -18,10 +18,7 @@
   </div>
 
   <!-- 应用数量较少时，使用普通网格（带滚动） -->
-  <div
-    v-else-if="!loading && apps.length <= 50"
-    class="non-virtual-scroller"
-  >
+  <div v-else-if="!loading && apps.length <= 50" class="non-virtual-scroller">
     <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
       <AppCard
         v-for="(app, index) in apps"
@@ -176,14 +173,14 @@ const gridRows = computed(() => {
 
 <style scoped>
 .scroller {
-  height: calc(100vh - 140px); /* 调整高度 */
+  height: 100%;
   overflow-y: auto;
   padding: 0; /* 移除内边距 */
   margin: -24px -16px; /* 抵消父容器的 px-4 py-6 */
 }
 
 .non-virtual-scroller {
-  height: calc(100vh - 140px);
+  height: 100%;
   overflow-y: auto;
 }
 
diff --git a/src/components/DownloadQueue.vue b/src/components/DownloadQueue.vue
index 512f0118..4e26685a 100644
--- a/src/components/DownloadQueue.vue
+++ b/src/components/DownloadQueue.vue
@@ -1,6 +1,12 @@
 <template>
   <div
-    class="fixed inset-x-4 bottom-4 z-40 rounded-3xl border border-slate-200/70 bg-white shadow-2xl dark:border-slate-800/70 dark:bg-slate-900 sm:left-auto sm:right-6 sm:w-96"
+    ref="queueRef"
+    class="fixed inset-x-4 bottom-4 z-40 rounded-3xl border border-slate-200/70 bg-white shadow-2xl transition-all duration-200 dark:border-slate-800/70 dark:bg-slate-900 sm:left-auto sm:right-6 sm:w-96"
+    :class="
+      isHidden
+        ? 'pointer-events-none translate-y-[calc(100%+1rem)] opacity-0'
+        : 'translate-y-0 opacity-100'
+    "
   >
     <div
       class="flex items-center justify-between px-5 py-4"
@@ -130,7 +136,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { computed, onMounted, onUnmounted, ref } from "vue";
 import type { DownloadItem } from "../global/typedefinition";
 
 const props = defineProps<{
@@ -147,6 +153,30 @@ const emit = defineEmits<{
 }>();
 
 const isExpanded = ref(false);
+const isHidden = ref(false);
+const queueRef = ref<HTMLElement | null>(null);
+
+const onWheel = (event: WheelEvent) => {
+  if (queueRef.value?.contains(event.target as Node) || event.deltaY === 0) {
+    return;
+  }
+
+  if (event.deltaY > 0) {
+    isExpanded.value = false;
+    isHidden.value = true;
+    return;
+  }
+
+  isHidden.value = false;
+};
+
+onMounted(() => {
+  document.addEventListener("wheel", onWheel, { passive: true, capture: true });
+});
+
+onUnmounted(() => {
+  document.removeEventListener("wheel", onWheel, { capture: true });
+});
 
 const completedDownloads = computed(() => {
   return props.downloads.filter((d) => d.status === "completed").length;