更新样式和布局

src/composables/useRecentPlugins.ts

@@ -1,7 +1,7 @@
 import type { Plugin } from '@/api/types'
 
 const RECENT_PLUGINS_KEY = 'moviepilot_recent_plugins'
-const MAX_RECENT_PLUGINS = 5
+const MAX_RECENT_PLUGINS = 3
 
 interface RecentPlugin {
   id: string
@@ -21,7 +21,7 @@ function pluginToRecentPlugin(plugin: Plugin): RecentPlugin {
     plugin_icon: plugin.plugin_icon,
     has_page: plugin.has_page || false,
     state: plugin.state || false,
-    plugin_id: plugin.plugin_id || '',
+    plugin_id: plugin.id || '',
     access_time: Date.now(),
   }
 }

src/layouts/components/DefaultLayout.vue

@@ -120,6 +120,9 @@ function handleUnreadMessage(count: number) {
 function handleTouchStart(event: TouchEvent) {
   if (!appMode || !display.mdAndDown.value) return
 
+  // 如果插件快速访问面板已显示，不处理下拉手势
+  if (showPluginQuickAccess.value) return
+
   const touch = event.touches[0]
   startY.value = touch.clientY
 
@@ -135,6 +138,9 @@ function handleTouchStart(event: TouchEvent) {
 function handleTouchMove(event: TouchEvent) {
   if (!appMode || !display.mdAndDown.value) return
 
+  // 如果插件快速访问面板已显示，不处理下拉手势
+  if (showPluginQuickAccess.value) return
+
   const touch = event.touches[0]
   const deltaY = touch.clientY - startY.value
 
@@ -173,6 +179,9 @@ function handleTouchMove(event: TouchEvent) {
 function handleTouchEnd() {
   if (!appMode || !display.mdAndDown.value) return
 
+  // 如果插件快速访问面板已显示，不处理下拉手势
+  if (showPluginQuickAccess.value) return
+
   if (isPulling.value && pullDistance.value > 120) {
     // 增加触发阈值到120px
     // 触发插件快速访问
@@ -199,31 +208,31 @@ function handlePluginClick() {
   showPluginQuickAccess.value = false
 }
 
-// 阻止滚动的函数
+// 保存页面滚动位置
-function preventScroll(e: TouchEvent) {
+let scrollPosition = 0
-  e.preventDefault()
-}
 
 // 监听插件快速访问的显示状态，控制背景滚动
 watch(showPluginQuickAccess, visible => {
   if (visible) {
-    // 显示时锁定背景滚动 - 使用更强的锁定方式
+    // 保存当前滚动位置
+    scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
+
+    // 显示时锁定背景滚动
     document.body.style.overflow = 'hidden'
     document.body.style.position = 'fixed'
+    document.body.style.top = `-${scrollPosition}px`
     document.body.style.width = '100%'
-    document.body.style.height = '100%'
     document.documentElement.style.overflow = 'hidden'
-    // 禁用触摸滚动
-    document.addEventListener('touchmove', preventScroll, { passive: false })
   } else {
     // 隐藏时恢复滚动
     document.body.style.overflow = ''
     document.body.style.position = ''
+    document.body.style.top = ''
     document.body.style.width = ''
-    document.body.style.height = ''
     document.documentElement.style.overflow = ''
-    // 恢复触摸滚动
+
-    document.removeEventListener('touchmove', preventScroll)
+    // 恢复滚动位置
+    window.scrollTo(0, scrollPosition)
   }
 })
 
@@ -251,10 +260,9 @@ onMounted(() => {
     // 恢复body滚动样式
     document.body.style.overflow = ''
     document.body.style.position = ''
+    document.body.style.top = ''
     document.body.style.width = ''
-    document.body.style.height = ''
     document.documentElement.style.overflow = ''
-    document.removeEventListener('touchmove', preventScroll)
     if (appMode && display.mdAndDown.value) {
       document.removeEventListener('touchstart', handleTouchStart)
       document.removeEventListener('touchmove', handleTouchMove)

src/layouts/components/QuickAccess.vue

@@ -5,6 +5,7 @@ import noImage from '@images/logos/plugin.png'
 import { useI18n } from 'vue-i18n'
 import { useRecentPlugins } from '@/composables/useRecentPlugins'
 import PluginDataDialog from '@/components/dialog/PluginDataDialog.vue'
+import { VCard } from 'vuetify/components'
 
 // 国际化
 const { t } = useI18n()
@@ -52,7 +53,7 @@ const currentPlugin = ref<Plugin | null>(null)
 
 // 计算显示状态
 const isVisible = computed(() => {
-  return props.visible // 只基于visible属性显示，不考虑pullDistance
+  return props.visible
 })
 
 // 处理插件图标加载错误
@@ -66,7 +67,7 @@ const componentTransform = computed(() => {
   if (props.visible) {
     baseTransform = 'translateY(0)'
   } else {
-    baseTransform = 'translateY(-100%)' // 完全隐藏在顶部
+    baseTransform = 'translateY(-100%)'
   }
 
   // 如果正在拖动关闭，添加拖动偏移
@@ -79,7 +80,7 @@ const componentTransform = computed(() => {
 
 // 计算组件透明度（包含拖动透明度变化）
 const componentOpacity = computed(() => {
-  let baseOpacity = props.visible ? 1 : 0 // 只基于visible属性决定透明度
+  let baseOpacity = props.visible ? 1 : 0
 
   // 如果正在拖动关闭，根据拖动距离调整透明度
   if (isDraggingToClose.value) {
@@ -194,7 +195,8 @@ function handleBackdropClick(event: MouseEvent) {
 </script>
 
 <template>
-  <div
+  <VCard
+    :ripple="false"
     class="plugin-quick-access"
     :class="{ 'visible': isVisible }"
     :style="{
@@ -297,7 +299,7 @@ function handleBackdropClick(event: MouseEvent) {
         <div class="hint-text">{{ t('plugin.tapToOpen') }}</div>
       </div>
     </div>
-  </div>
+  </VCard>
 
   <!-- 插件数据弹窗 -->
   <PluginDataDialog
@@ -313,9 +315,9 @@ function handleBackdropClick(event: MouseEvent) {
   position: fixed;
   z-index: 9999;
   display: flex;
-  overflow: hidden; /* 防止整个容器溢出 */
+  overflow: hidden;
   flex-direction: column;
-  backdrop-filter: blur(20px);
+  backdrop-filter: blur(32px);
   background: rgba(var(--v-theme-surface), 0.95);
   block-size: 100vh;
   block-size: 100dvh;
@@ -354,7 +356,7 @@ function handleBackdropClick(event: MouseEvent) {
   align-items: center;
   justify-content: space-between;
   border-block-end: 1px solid rgba(var(--v-theme-on-surface), 0.08);
-  padding-block: 0 20px;
+  padding-block: 0 16px;
   padding-inline: 20px;
 
   .header-title {
@@ -375,34 +377,16 @@ function handleBackdropClick(event: MouseEvent) {
 
 .plugin-grid {
   display: flex;
+  overflow: hidden auto;
   flex: 1;
   flex-direction: column;
   gap: 16px;
   min-block-size: 0;
   -webkit-overflow-scrolling: touch;
-  overflow-y: auto;
+  overscroll-behavior: contain;
   padding-block: 24px;
   padding-inline: 20px;
-  scroll-behavior: smooth;
+  touch-action: pan-y;
-  scrollbar-color: rgba(var(--v-theme-on-surface), 0.2) transparent;
-  scrollbar-width: thin;
-
-  &::-webkit-scrollbar {
-    inline-size: 6px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border-radius: 3px;
-    background: rgba(var(--v-theme-on-surface), 0.2);
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: rgba(var(--v-theme-on-surface), 0.3);
-  }
 }
 
 .loading-container {
@@ -455,39 +439,14 @@ function handleBackdropClick(event: MouseEvent) {
 .recent-plugins-row {
   display: grid;
   gap: 16px;
-  grid-auto-rows: 100px;
   grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
-  max-block-size: 220px;
-  -webkit-overflow-scrolling: touch;
-  overflow-y: auto;
   padding-block: 0 8px;
   padding-inline: 0;
-  scroll-behavior: smooth;
-  scrollbar-color: rgba(var(--v-theme-on-surface), 0.2) transparent;
-  scrollbar-width: thin;
-
-  &::-webkit-scrollbar {
-    inline-size: 4px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    border-radius: 2px;
-    background: rgba(var(--v-theme-on-surface), 0.2);
-  }
-
-  &::-webkit-scrollbar-thumb:hover {
-    background: rgba(var(--v-theme-on-surface), 0.3);
-  }
 }
 
 .all-plugins-grid {
   display: grid;
   gap: 20px;
-  grid-auto-rows: 100px;
   grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
 }
 
@@ -584,8 +543,6 @@ function handleBackdropClick(event: MouseEvent) {
   flex-direction: column;
   align-items: center;
   cursor: pointer;
-
-  /* 增加触摸区域 */
   padding-block: 8px 0;
   padding-inline: 20px;
 }