diff --git a/src/layouts/components/DefaultLayout.vue b/src/layouts/components/DefaultLayout.vue index ee42c645..5bfbe149 100644 --- a/src/layouts/components/DefaultLayout.vue +++ b/src/layouts/components/DefaultLayout.vue @@ -391,7 +391,7 @@ onMounted(() => { border-radius: 50%; backdrop-filter: blur(20px); background: rgba(var(--v-theme-surface), 0.3); - box-shadow: 0 2px 6px rgba(0, 0, 0, 10%), 0 1px 4px rgba(0, 0, 0, 6%); + box-shadow: 0 1px 2px rgba(0, 0, 0, 10%), 0 1px 3px rgba(0, 0, 0, 6%); inset-block-start: 80px; inset-inline-start: 50%; pointer-events: none; diff --git a/src/layouts/components/QuickAccess.vue b/src/layouts/components/QuickAccess.vue index fe9046e5..3dca4bb7 100644 --- a/src/layouts/components/QuickAccess.vue +++ b/src/layouts/components/QuickAccess.vue @@ -39,6 +39,9 @@ const recentPlugins = ref([]) // 是否加载中 const loading = ref(false) +// 各插件的图标加载状态 +const pluginIconLoading = ref>({}) + // 上滑关闭相关状态 const isDraggingToClose = ref(false) const dragOffset = ref(0) @@ -52,6 +55,11 @@ const isVisible = computed(() => { return props.visible // 只基于visible属性显示,不考虑pullDistance }) +// 处理插件图标加载错误 +function handleIconError(plugin: Plugin) { + pluginIconLoading.value[plugin.id] = false +} + // 计算整个组件的transform(包含拖动偏移) const componentTransform = computed(() => { let baseTransform = '' @@ -85,6 +93,7 @@ const componentOpacity = computed(() => { // 计算插件图标路径 function getPluginIcon(plugin: Plugin): string { if (!plugin.plugin_icon) return noImage + if (!pluginIconLoading.value[plugin.id]) return noImage // 如果是网络图片则使用代理后返回 if (plugin?.plugin_icon?.startsWith('http')) @@ -155,9 +164,7 @@ watch( () => isVisible.value, visible => { if (visible) { - if (pluginsWithPage.value.length === 0) { - fetchPluginsWithPage() - } + fetchPluginsWithPage() loadRecentPlugins() } }, @@ -230,7 +237,7 @@ function handleBackdropClick(event: MouseEvent) { >
- + @@ -306,6 +313,7 @@ function handleBackdropClick(event: MouseEvent) { position: fixed; z-index: 9999; display: flex; + overflow: hidden; /* 防止整个容器溢出 */ flex-direction: column; backdrop-filter: blur(20px); background: rgba(var(--v-theme-surface), 0.95);