GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-07-03 13:31:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化快速访问组件

Browse Source
This commit is contained in:
jxxghp
2025-07-02 20:28:58 +08:00
parent ac6362e698
commit 61dc2568e8
2 changed files with 367 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
src/layouts/components/DefaultLayout.vue
View File

@@ -13,12 +13,14 @@ import { getNavMenus } from '@/router/i18n-menu'
import { NavMenu } from '@/@layouts/types'
import { useDisplay } from 'vuetify'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'
import { filterMenusByPermission } from '@/utils/permission'
import { onUnreadMessage } from '@/utils/badge'
const display = useDisplay()
const appMode = inject('pwaMode')
const { t } = useI18n()
const route = useRoute()
// 用户 Store
const userStore = useUserStore()
@@ -53,17 +55,80 @@ const systemMenus = ref<NavMenu[]>([])
// 插件快速访问相关状态
const showPluginQuickAccess = ref(false)
// 下拉手势配置常量 (iOS风格)
const PULL_CONFIG = {
START_THRESHOLD: 20, // 开始下拉的最小距离
SHOW_INDICATOR: 60, // 显示指示器的距离
TRIGGER_THRESHOLD: 100, // 触发快速访问的距离
MAX_PULL_DISTANCE: 200, // 最大下拉距离
PULL_RESISTANCE: 0.75, // 下拉阻力系数
CONTENT_FOLLOW_RATIO: 0.4, // 页面内容跟随比例
TOLERANCE: 80, // 手指抖动容忍度
}
// 下拉检测相关状态
const isPulling = ref(false)
const startY = ref(0)
const pullDistance = ref(0)
const initialScrollTop = ref(0)
// 检查是否有弹窗打开的函数
const hasOpenDialog = () => {
try {
// 检查 Vuetify 的各种弹窗组件
const vuetifyOverlays = document.querySelectorAll('.v-overlay--active:not(.v-overlay--scroll-blocked)')
const dialogs = document.querySelectorAll('.v-dialog--active')
const menus = document.querySelectorAll('.v-menu--active')
const bottomSheets = document.querySelectorAll('.v-bottom-sheet--active')
const snackbars = document.querySelectorAll('.v-snackbar--active')
// 检查自定义弹窗元素
const customDialogs = document.querySelectorAll('[role="dialog"]:not([style*="display: none"])')
const modalElements = document.querySelectorAll('.modal:not(.d-none):not([style*="display: none"])')
// 检查具有弹窗特征的元素
const dialogElements = document.querySelectorAll('[aria-modal="true"]:not([style*="display: none"])')
// 计算有效的弹窗数量
let totalDialogs =
vuetifyOverlays.length +
dialogs.length +
menus.length +
bottomSheets.length +
snackbars.length +
customDialogs.length +
modalElements.length +
dialogElements.length
// 如果 QuickAccess 面板打开，不算作阻止下拉的弹窗
if (showPluginQuickAccess.value) {
totalDialogs = Math.max(0, totalDialogs - 1)
}
return totalDialogs > 0
} catch (error) {
console.warn('检测弹窗状态时出错:', error)
// 出错时保守处理，认为有弹窗打开
return true
}
}
// 检查是否可以使用下拉手势
const canUsePullGesture = computed(() => {
// 检查是否在dashboard页面
const isDashboard = route.name === 'dashboard' || route.path === '/dashboard'
// 检查是否是管理员
const isAdmin = superUser.value
return isDashboard && isAdmin
})
// 计算页面内容的transform
const contentTransform = computed(() => {
if (!isPulling.value || pullDistance.value <= 0) return 'translateY(0)'
// 页面内容的移动距离是下拉距离的35%，与新的下拉距离相匹配
const moveDistance = pullDistance.value * 0.35
// 页面内容跟随下拉距离，使用配置的跟随比例
const moveDistance = pullDistance.value * PULL_CONFIG.CONTENT_FOLLOW_RATIO
return `translateY(${moveDistance}px)`
})
@@ -75,20 +140,29 @@ const contentTransition = computed(() => {
// 计算下拉指示器的显示状态
const showPullIndicator = computed(() => {
return isPulling.value && pullDistance.value > 30
return canUsePullGesture.value && isPulling.value && pullDistance.value >= PULL_CONFIG.SHOW_INDICATOR
})
// 计算下拉指示器的旋转角度
const indicatorRotation = computed(() => {
if (!isPulling.value) return 0
const progress = Math.min(pullDistance.value / 120, 1)
// 从显示指示器开始计算旋转，到触发阈值时旋转180度
const progress = Math.min(
(pullDistance.value - PULL_CONFIG.SHOW_INDICATOR) / (PULL_CONFIG.TRIGGER_THRESHOLD - PULL_CONFIG.SHOW_INDICATOR),
1,
)
return progress * 180 // 0到180度的旋转
})
// 计算下拉指示器的透明度
const indicatorOpacity = computed(() => {
if (!isPulling.value) return 0
return Math.min(pullDistance.value / 80, 1)
// 从显示指示器开始计算透明度
const progress = Math.min(
(pullDistance.value - PULL_CONFIG.SHOW_INDICATOR) / (PULL_CONFIG.TRIGGER_THRESHOLD - PULL_CONFIG.SHOW_INDICATOR),
1,
)
return 0.7 + progress * 0.3 // 0.7到1.0的透明度
})
// 根据分类获取菜单列表
@@ -120,6 +194,12 @@ function handleUnreadMessage(count: number) {
function handleTouchStart(event: TouchEvent) {
if (!appMode || !display.mdAndDown.value) return
// 检查是否满足下拉手势的条件
if (!canUsePullGesture.value) return
// 实时检查是否有弹窗打开
if (hasOpenDialog()) return
// 如果插件快速访问面板已显示，不处理下拉手势
if (showPluginQuickAccess.value) return
@@ -138,6 +218,17 @@ function handleTouchStart(event: TouchEvent) {
function handleTouchMove(event: TouchEvent) {
if (!appMode || !display.mdAndDown.value) return
// 检查是否满足下拉手势的条件
if (!canUsePullGesture.value) return
// 实时检查是否有弹窗打开
if (hasOpenDialog()) {
// 如果检测到弹窗打开，立即停止下拉
isPulling.value = false
pullDistance.value = 0
return
}
// 如果插件快速访问面板已显示，不处理下拉手势
if (showPluginQuickAccess.value) return
@@ -147,27 +238,27 @@ function handleTouchMove(event: TouchEvent) {
// 如果已经开始下拉，继续保持下拉状态，避免中途中断
if (isPulling.value) {
// 继续下拉，但要确保是向下移动
if (deltaY > -5) {
// 允许轻微的向上偏移（-5px），避免手指抖动导致中断
pullDistance.value = Math.max(0, Math.min(deltaY * 0.7, 250))
if (deltaY > -PULL_CONFIG.TOLERANCE) {
// 允许轻微的向上偏移，避免手指抖动导致中断
pullDistance.value = Math.max(0, Math.min(deltaY * PULL_CONFIG.PULL_RESISTANCE, PULL_CONFIG.MAX_PULL_DISTANCE))
// 阻止默认滚动行为
event.preventDefault()
} else {
// 如果向上移动超过阈值，停止下拉
// 如果向上移动超过容忍度，停止下拉
isPulling.value = false
pullDistance.value = 0
}
} else {
// 还没开始下拉，检查是否应该开始
if (deltaY > 5) {
if (deltaY > PULL_CONFIG.START_THRESHOLD) {
// 检查当前的滚动位置
const currentScrollTop = window.scrollY || document.documentElement.scrollTop || 0
// 必须同时满足：1. 向下拖拽超过5px 2. 当前在页面顶部 3. 从顶部开始拖拽
// 必须同时满足：1. 向下拖拽超过阈值 2. 当前在页面顶部 3. 从顶部开始拖拽
if (currentScrollTop <= 100 && initialScrollTop.value <= 100) {
// 向下拖拽且在页面顶部附近，开始下拉
isPulling.value = true
pullDistance.value = Math.min(deltaY * 0.7, 250)
pullDistance.value = Math.min(deltaY * PULL_CONFIG.PULL_RESISTANCE, PULL_CONFIG.MAX_PULL_DISTANCE)
// 阻止默认滚动
event.preventDefault()
}
@@ -179,12 +270,23 @@ function handleTouchMove(event: TouchEvent) {
function handleTouchEnd() {
if (!appMode || !display.mdAndDown.value) return
// 检查是否满足下拉手势的条件
if (!canUsePullGesture.value) return
// 实时检查是否有弹窗打开
if (hasOpenDialog()) {
// 如果检测到弹窗打开，立即停止下拉并重置状态
isPulling.value = false
pullDistance.value = 0
startY.value = 0
return
}
// 如果插件快速访问面板已显示，不处理下拉手势
if (showPluginQuickAccess.value) return
if (isPulling.value && pullDistance.value > 120) {
// 增加触发阈值到120px
// 触发插件快速访问
if (isPulling.value && pullDistance.value >= PULL_CONFIG.TRIGGER_THRESHOLD) {
// 达到触发阈值，触发插件快速访问
showPluginQuickAccess.value = true
}
@@ -279,16 +381,22 @@ onMounted(() => {
class="pull-indicator"
:style="{
opacity: indicatorOpacity,
transform: `translate(-50%, ${Math.min(pullDistance * 0.3, 30)}px)`,
transform: `translate(-50%, ${Math.min((pullDistance - PULL_CONFIG.SHOW_INDICATOR) * 0.5, 40)}px)`,
}"
>
<div
class="indicator-icon"
:style="{
transform: `scale(${Math.min(1 + pullDistance / 400, 1.15)}) rotate(${indicatorRotation}deg)`,
transform: `scale(${
1 + Math.min((pullDistance - PULL_CONFIG.SHOW_INDICATOR) / PULL_CONFIG.MAX_PULL_DISTANCE, 0.5) * 0.3
}) rotate(${indicatorRotation}deg)`,
}"
>
<VIcon icon="mdi-gesture-swipe-down" size="24" :color="pullDistance > 120 ? 'success' : 'primary'" />
<VIcon
icon="mdi-gesture-swipe-down"
size="24"
:color="pullDistance >= PULL_CONFIG.TRIGGER_THRESHOLD ? 'success' : 'primary'"
/>
</div>
</div>
<VerticalNavLayout>

379
src/layouts/components/QuickAccess.vue
View File

@@ -6,6 +6,7 @@ import { useI18n } from 'vue-i18n'
import { useRecentPlugins } from '@/composables/useRecentPlugins'
import PluginDataDialog from '@/components/dialog/PluginDataDialog.vue'
import { VCard } from 'vuetify/components'
import { getDominantColor } from '@/@core/utils/image'
// 国际化
const { t } = useI18n()
@@ -41,11 +42,27 @@ const recentPlugins = ref<Plugin[]>([])
const loading = ref(false)
// 各插件的图标加载状态
const pluginIconLoading = ref<Record<string, boolean>>({})
const pluginIconLoadError = ref<Record<string, boolean>>({})
// 各插件的背景颜色
const pluginBackgroundColors = ref<Record<string, string>>({})
// 上滑关闭配置常量
const SWIPE_CONFIG = {
START_THRESHOLD: 10, // 开始检测上滑的最小距离
CLOSE_THRESHOLD: 100, // 触发关闭的距离
MAX_DRAG_DISTANCE: 1000, // 最大拖拽距离
VELOCITY_THRESHOLD: 0.8, // 快速滑动速度阈值 (px/ms)
}
// 上滑关闭相关状态
const isDraggingToClose = ref(false)
const dragOffset = ref(0)
const startY = ref(0)
const lastY = ref(0)
const lastTime = ref(0)
const velocity = ref(0)
const startedFromBottomArea = ref(false)
// 插件弹窗相关状态
const showPluginDataDialog = ref(false)
@@ -58,7 +75,41 @@ const isVisible = computed(() => {
// 处理插件图标加载错误
function handleIconError(plugin: Plugin) {
pluginIconLoading.value[plugin.id] = false
pluginIconLoadError.value[plugin.id] = true
}
// 处理插件图标加载完成
async function handleIconLoaded(src: string | undefined, plugin: Plugin) {
if (!src) return
try {
// 创建一个临时的img元素来获取图片数据
const img = new Image()
img.crossOrigin = 'anonymous'
img.onload = async () => {
try {
// 从图片中提取背景色
const backgroundColor = await getDominantColor(img)
pluginBackgroundColors.value[plugin.id] = backgroundColor
} catch (error) {
// 如果提取失败，使用默认颜色
pluginBackgroundColors.value[plugin.id] = '#28A9E1'
}
}
img.onerror = () => {
// 如果加载失败，使用默认颜色
pluginBackgroundColors.value[plugin.id] = '#28A9E1'
}
img.src = src
} catch (error) {
// 如果提取失败，使用默认颜色
pluginBackgroundColors.value[plugin.id] = '#28A9E1'
}
}
// 获取插件背景颜色
function getPluginBackgroundColor(plugin: Plugin): string {
return pluginBackgroundColors.value[plugin.id] || '#28A9E1'
}
// 计算整个组件的transform（包含拖动偏移）
@@ -70,31 +121,23 @@ const componentTransform = computed(() => {
baseTransform = 'translateY(-100%)'
}
// 如果正在拖动关闭，添加拖动偏移
// 如果正在拖动关闭，添加拖动偏移（向上拖拽为负值，让面板向上移动）
if (isDraggingToClose.value) {
return `${baseTransform} translateY(${dragOffset.value}px)`
return `${baseTransform} translateY(-${dragOffset.value}px)`
}
return baseTransform
})
// 计算组件透明度（包含拖动透明度变化）
// 计算组件透明度
const componentOpacity = computed(() => {
let baseOpacity = props.visible ? 1 : 0
// 如果正在拖动关闭，根据拖动距离调整透明度
if (isDraggingToClose.value) {
const dragProgress = Math.min(dragOffset.value / 200, 1)
return baseOpacity * (1 - dragProgress * 0.3)
}
return baseOpacity
return props.visible ? 1 : 0
})
// 计算插件图标路径
function getPluginIcon(plugin: Plugin): string {
if (!plugin.plugin_icon) return noImage
if (!pluginIconLoading.value[plugin.id]) return noImage
if (pluginIconLoadError.value[plugin.id]) return noImage
// 如果是网络图片则使用代理后返回
if (plugin?.plugin_icon?.startsWith('http'))
@@ -117,7 +160,7 @@ async function fetchPluginsWithPage() {
// 只保留有详情页面且已启用的插件
pluginsWithPage.value = allPlugins
.filter(plugin => plugin.has_page && plugin.state)
.filter(plugin => plugin.has_page)
.sort((a, b) => {
// 按插件名称排序
return (a.plugin_name || '').localeCompare(b.plugin_name || '')
@@ -179,6 +222,100 @@ onMounted(() => {
}
})
// 处理触摸开始
function handleTouchStart(event: TouchEvent) {
if (!props.visible) return
const touch = event.touches[0]
if (!touch) return
// 检查是否从 bottom-drag-area 开始触摸
const target = event.target as HTMLElement
startedFromBottomArea.value = !!target.closest('.bottom-drag-area')
startY.value = touch.clientY
lastY.value = touch.clientY
lastTime.value = Date.now()
velocity.value = 0
// 重置拖拽状态
isDraggingToClose.value = false
dragOffset.value = 0
}
// 处理触摸移动
function handleTouchMove(event: TouchEvent) {
if (!props.visible) return
const touch = event.touches[0]
if (!touch) return
// 只有从 bottom-drag-area 开始的触摸才处理上滑关闭
if (!startedFromBottomArea.value) return
const currentY = touch.clientY
const currentTime = Date.now()
const deltaY = startY.value - currentY // 向上为正值
const timeDelta = currentTime - lastTime.value
// 计算速度
if (timeDelta > 0) {
const moveDistance = lastY.value - currentY
velocity.value = moveDistance / timeDelta
}
// 如果已经开始拖拽，继续拖拽
if (isDraggingToClose.value) {
if (deltaY >= 0) {
// 向上拖拽，更新偏移量
dragOffset.value = Math.min(deltaY, SWIPE_CONFIG.MAX_DRAG_DISTANCE)
event.preventDefault()
} else {
// 向下拖拽，停止拖拽
isDraggingToClose.value = false
dragOffset.value = 0
}
} else {
// 还没开始拖拽，检查是否应该开始
if (deltaY > SWIPE_CONFIG.START_THRESHOLD) {
isDraggingToClose.value = true
dragOffset.value = Math.min(deltaY, SWIPE_CONFIG.MAX_DRAG_DISTANCE)
event.preventDefault()
}
}
lastY.value = currentY
lastTime.value = currentTime
}
// 处理触摸结束
function handleTouchEnd() {
if (!props.visible) return
// 只有从 bottom-drag-area 开始的触摸才处理上滑关闭
if (!startedFromBottomArea.value) return
if (isDraggingToClose.value) {
// 判断是否应该关闭：距离超过阈值或者快速上滑
const shouldClose =
dragOffset.value >= SWIPE_CONFIG.CLOSE_THRESHOLD || velocity.value >= SWIPE_CONFIG.VELOCITY_THRESHOLD
if (shouldClose) {
emit('close')
}
// 重置拖拽状态
isDraggingToClose.value = false
dragOffset.value = 0
}
// 重置所有状态
startY.value = 0
lastY.value = 0
velocity.value = 0
startedFromBottomArea.value = false
}
// 点击底部空白区域关闭
function handleBackdropClick(event: MouseEvent) {
const target = event.target as HTMLElement
@@ -205,16 +342,17 @@ function handleBackdropClick(event: MouseEvent) {
transition: isDraggingToClose ? 'none' : 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
}"
@click="handleBackdropClick"
@touchstart="handleTouchStart"
@touchmove="handleTouchMove"
@touchend="handleTouchEnd"
>
<!-- 顶部指示器 -->
<div class="top-indicator">
<div class="indicator-bar"></div>
</div>
<div class="top-indicator"></div>
<!-- 标题栏 -->
<div class="header">
<div class="header-title">{{ t('plugin.quickAccess') }}</div>
<VBtn icon variant="text" size="small" @click="handleClose" class="close-btn">
<VBtn icon variant="text" @click="handleClose" class="close-btn">
<VIcon icon="mdi-close" />
</VBtn>
</div>
@@ -237,24 +375,30 @@ function handleBackdropClick(event: MouseEvent) {
class="plugin-item"
@click="handlePluginClick(plugin)"
>
<div class="plugin-icon">
<VAvatar size="48" class="plugin-avatar">
<VImg :src="getPluginIcon(plugin)" :alt="plugin.plugin_name" cover @error="handleIconError(plugin)">
<template #error>
<VIcon icon="mdi-puzzle" size="24" />
</template>
</VImg>
</VAvatar>
<!-- 运行状态指示 -->
<div class="status-dot" :class="{ 'active': plugin.state }"></div>
</div>
<VBadge dot :color="plugin.state ? 'success' : 'secondary'" location="top end">
<div
class="plugin-icon"
:style="{
background: `${getPluginBackgroundColor(plugin)}`,
}"
>
<VImg
:src="getPluginIcon(plugin)"
:alt="plugin.plugin_name"
cover
@error="handleIconError(plugin)"
@load="src => handleIconLoaded(src, plugin)"
class="rounded-lg"
/>
</div>
</VBadge>
<div class="plugin-name">{{ plugin.plugin_name }}</div>
</div>
</div>
<!-- 没有最近访问时显示"无" -->
<div v-else class="no-recent-plugins">
<div class="no-recent-text">{{ t('plugin.noRecentPlugins') }}</div>
<VIcon icon="mdi-puzzle-outline" size="24" color="grey" />
</div>
<!-- 所有插件 -->
@@ -269,17 +413,29 @@ function handleBackdropClick(event: MouseEvent) {
class="plugin-item"
@click="handlePluginClick(plugin)"
>
<div class="plugin-icon">
<VAvatar size="48" class="plugin-avatar">
<VImg :src="getPluginIcon(plugin)" :alt="plugin.plugin_name" cover>
<template #error>
<VIcon icon="mdi-puzzle" size="24" />
</template>
</VImg>
</VAvatar>
<!-- 运行状态指示 -->
<div class="status-dot" :class="{ 'active': plugin.state }"></div>
</div>
<VBadge
dot
:color="plugin.state ? 'success' : 'secondary'"
location="top end"
:offset-x="-1"
:offset-y="-1"
>
<div
class="plugin-icon"
:style="{
background: `${getPluginBackgroundColor(plugin)}`,
}"
>
<VImg
:src="getPluginIcon(plugin)"
:alt="plugin.plugin_name"
cover
@load="src => handleIconLoaded(src, plugin)"
@error="handleIconError(plugin)"
class="rounded-lg"
/>
</div>
</VBadge>
<div class="plugin-name">{{ plugin.plugin_name }}</div>
</div>
</div>
@@ -294,9 +450,22 @@ function handleBackdropClick(event: MouseEvent) {
<!-- 底部拖动区域 -->
<div class="bottom-drag-area" @click="handleBackdropClick">
<!-- 底部提示 -->
<div class="footer-hint">
<div class="hint-text">{{ t('plugin.tapToOpen') }}</div>
<!-- 底部指示器 -->
<div class="bottom-indicator">
<div
class="indicator-bar bottom"
:class="{ 'dragging': isDraggingToClose }"
:style="{
transform: isDraggingToClose
? `scaleX(${Math.min(dragOffset / SWIPE_CONFIG.CLOSE_THRESHOLD, 1.5)})`
: 'scaleX(1)',
background: isDraggingToClose
? dragOffset >= SWIPE_CONFIG.CLOSE_THRESHOLD
? 'rgba(var(--v-theme-success), 0.8)'
: 'rgba(var(--v-theme-primary), 0.8)'
: 'rgba(var(--v-theme-on-surface), 0.12)',
}"
></div>
</div>
</div>
</VCard>
@@ -342,12 +511,22 @@ function handleBackdropClick(event: MouseEvent) {
justify-content: center;
padding-block: 12px 8px;
padding-inline: 0;
}
.indicator-bar {
// 底部相关样式
.bottom-indicator {
display: flex;
justify-content: center;
padding-block: 8px 12px;
padding-inline: 0;
.indicator-bar.bottom {
border-radius: 2px;
background: rgba(var(--v-theme-on-surface), 0.12);
block-size: 4px;
inline-size: 36px;
inline-size: 30vw;
transform-origin: center;
transition: all 0.2s ease;
}
}
@@ -389,21 +568,6 @@ function handleBackdropClick(event: MouseEvent) {
touch-action: pan-y;
}
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
grid-column: 1 / -1;
padding-block: 40px;
padding-inline: 0;
.loading-text {
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
font-size: 14px;
}
}
.section-header {
display: flex;
align-items: center;
@@ -427,19 +591,13 @@ function handleBackdropClick(event: MouseEvent) {
display: flex;
align-items: center;
justify-content: center;
padding-block: 16px;
padding-inline: 0;
.no-recent-text {
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
font-size: 14px;
}
}
.recent-plugins-row {
display: grid;
gap: 16px;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
padding-block: 0 8px;
padding-inline: 0;
}
@@ -447,7 +605,7 @@ function handleBackdropClick(event: MouseEvent) {
.all-plugins-grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
}
.plugin-item {
@@ -455,12 +613,11 @@ function handleBackdropClick(event: MouseEvent) {
flex-direction: column;
align-items: center;
justify-content: center;
padding: 8px;
border-radius: 12px;
block-size: 100px;
block-size: 120px;
cursor: pointer;
gap: 6px;
padding-block: 8px;
padding-inline: 8px;
gap: 8px;
transition: all 0.2s ease;
&:hover {
@@ -477,34 +634,18 @@ function handleBackdropClick(event: MouseEvent) {
.plugin-icon {
position: relative;
display: flex;
flex-shrink: 0; /* 防止图标被压缩 */
overflow: hidden;
flex-shrink: 0;
align-items: center;
justify-content: center;
padding: 4px;
border-radius: 16px;
block-size: 64px;
inline-size: 64px;
transition: all 0.2s ease;
.plugin-avatar {
box-shadow: 0 1px 3px rgba(0, 0, 0, 10%);
transition: box-shadow 0.2s ease;
.plugin-item:hover & {
box-shadow: 0 2px 6px rgba(0, 0, 0, 15%);
}
}
.status-dot {
position: absolute;
z-index: 1;
border: 2px solid rgba(var(--v-theme-surface), 1);
border-radius: 50%;
background: rgba(var(--v-theme-on-surface), 0.3);
block-size: 12px;
inline-size: 12px;
inset-block-start: -2px;
inset-inline-end: -2px;
transition: background-color 0.2s ease;
&.active {
background: #4caf50;
}
.plugin-item:hover & {
transform: scale(1.02);
}
}
@@ -547,40 +688,6 @@ function handleBackdropClick(event: MouseEvent) {
padding-inline: 20px;
}
.drag-handle {
display: flex;
justify-content: center;
inline-size: 100%;
padding-block: 12px;
padding-inline: 0;
}
.drag-bar {
border-radius: 3px;
background: rgba(var(--v-theme-on-surface), 0.3);
block-size: 5px;
inline-size: 36px;
transition: all 0.2s ease;
}
.bottom-drag-area:active .drag-bar {
background: rgba(var(--v-theme-on-surface), 0.5);
transform: scaleY(1.2);
}
.footer-hint {
border-block-start: 1px solid rgba(var(--v-theme-on-surface), 0.08);
inline-size: 100%;
padding-block: 16px;
padding-inline: 0;
.hint-text {
color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
font-size: 14px;
text-align: center;
}
}
@media (hover: none) and (pointer: coarse) {
.plugin-item:hover {
background: transparent;
@@ -595,9 +702,5 @@ function handleBackdropClick(event: MouseEvent) {
// 深色模式适配
html[data-theme='dark'] .plugin-quick-access {
background: rgba(var(--v-theme-surface), 0.9);
.plugin-icon .plugin-avatar {
border-color: rgba(var(--v-theme-on-surface), 0.2);
}
}
</style>