mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-24 16:27:23 +08:00
refactor(ui): 优化骨架屏加载效果,修复用户页左侧黑色背景
- 关键布局组件(AppMenu/TitleBar/SearchBar)改为同步导入,消除加载闪烁 - 新增全局 skeleton-shimmer 流光动画替代 animate-pulse 闪烁效果 - 用户页 loading 骨架屏避免使用 .left scoped 样式导致的深色背景 - 全部 n-skeleton 组件替换为原生 div + shimmer,统一圆角风格 - 菜单容器添加背景色防止加载穿透
This commit is contained in:
@@ -69,6 +69,10 @@ import { usePlayerStore } from '@/store/modules/player';
|
||||
import { useSettingsStore } from '@/store/modules/settings';
|
||||
import { isElectron } from '@/utils';
|
||||
|
||||
// 关键布局组件同步导入(始终可见,避免加载闪烁)
|
||||
import AppMenu from './components/AppMenu.vue';
|
||||
import SearchBar from './components/SearchBar.vue';
|
||||
import TitleBar from './components/TitleBar.vue';
|
||||
// 移动端专用布局
|
||||
import MobileLayout from './MobileLayout.vue';
|
||||
|
||||
@@ -87,11 +91,9 @@ const keepAliveInclude = computed(() => {
|
||||
.filter(Boolean);
|
||||
});
|
||||
|
||||
const AppMenu = defineAsyncComponent(() => import('./components/AppMenu.vue'));
|
||||
// 非关键组件保持异步加载
|
||||
const PlayBar = defineAsyncComponent(() => import('@/components/player/PlayBar.vue'));
|
||||
const MobilePlayBar = defineAsyncComponent(() => import('@/components/player/MobilePlayBar.vue'));
|
||||
const SearchBar = defineAsyncComponent(() => import('./components/SearchBar.vue'));
|
||||
const TitleBar = defineAsyncComponent(() => import('./components/TitleBar.vue'));
|
||||
const PlayingListDrawer = defineAsyncComponent(
|
||||
() => import('@/components/player/PlayingListDrawer.vue')
|
||||
);
|
||||
@@ -151,7 +153,7 @@ provide('openPlaylistDrawer', openPlaylistDrawer);
|
||||
}
|
||||
|
||||
.menu {
|
||||
@apply h-full;
|
||||
@apply h-full bg-light dark:bg-black;
|
||||
}
|
||||
|
||||
.main {
|
||||
|
||||
@@ -37,9 +37,8 @@ import otherRouter from '@/router/other';
|
||||
import { useMenuStore } from '@/store/modules/menu';
|
||||
import { usePlayerStore } from '@/store/modules/player';
|
||||
|
||||
import AppMenu from './components/AppMenu.vue';
|
||||
import MobileHeader from './components/MobileHeader.vue';
|
||||
|
||||
const AppMenu = defineAsyncComponent(() => import('./components/AppMenu.vue'));
|
||||
const MobilePlayBar = defineAsyncComponent(() => import('@/components/player/MobilePlayBar.vue'));
|
||||
const PlayingListDrawer = defineAsyncComponent(
|
||||
() => import('@/components/player/PlayingListDrawer.vue')
|
||||
|
||||
Reference in New Issue
Block a user