lkddi/AlgerMusicPlayer
1
0
Fork 0
mirror of https://github.com/algerkong/AlgerMusicPlayer.git synced 2026-07-10 11:57:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): 优化骨架屏加载效果，修复用户页左侧黑色背景

Browse Source 
- 关键布局组件(AppMenu/TitleBar/SearchBar)改为同步导入，消除加载闪烁
- 新增全局 skeleton-shimmer 流光动画替代 animate-pulse 闪烁效果
- 用户页 loading 骨架屏避免使用 .left scoped 样式导致的深色背景
- 全部 n-skeleton 组件替换为原生 div + shimmer，统一圆角风格
- 菜单容器添加背景色防止加载穿透
This commit is contained in:
alger
2026-03-11 23:02:04 +08:00
parent b5bac30258
commit 72fabc6d12
22 changed files with 133 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/views/user/detail.vue
+13 -11
View File
@@ -6,30 +6,32 @@
<div v-if="loading">
<!-- Hero Skeleton -->
<div class="relative h-[300px] overflow-hidden rounded-tl-2xl">
<div class="absolute inset-0 bg-neutral-200 dark:bg-neutral-800" />
<div class="absolute inset-0 skeleton-shimmer" />
<div class="relative z-10 page-padding-x pt-8 pb-6">
<div class="flex flex-col items-center gap-6 md:flex-row md:items-end md:gap-10">
<n-skeleton class="h-28 w-28 rounded-full md:h-40 md:w-40" />
<div
class="h-28 w-28 md:h-40 md:w-40 skeleton-shimmer rounded-full flex-shrink-0"
/>
<div class="flex-1 space-y-4 text-center md:text-left">
<n-skeleton class="h-8 w-40" />
<div class="h-8 w-40 skeleton-shimmer rounded-xl" />
<div class="flex justify-center gap-6 md:justify-start">
<n-skeleton class="h-12 w-16" />
<n-skeleton class="h-12 w-16" />
<n-skeleton class="h-12 w-16" />
<div class="h-12 w-16 skeleton-shimmer rounded-xl" />
<div class="h-12 w-16 skeleton-shimmer rounded-xl" />
<div class="h-12 w-16 skeleton-shimmer rounded-xl" />
</div>
<n-skeleton class="h-4 w-2/3" />
<div class="h-4 w-2/3 skeleton-shimmer rounded-lg" />
</div>
</div>
</div>
</div>
<!-- Content Skeleton -->
<div class="mt-8 page-padding-x">
<n-skeleton class="h-10 w-48 mb-6" />
<div class="h-10 w-48 mb-6 skeleton-shimmer rounded-xl" />
<div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
<div v-for="i in 10" :key="i" class="space-y-2">
<n-skeleton class="aspect-square w-full rounded-2xl" />
<n-skeleton text class="w-3/4" />
<n-skeleton text class="w-1/2" />
<div class="aspect-square w-full skeleton-shimmer rounded-2xl" />
<div class="h-4 w-3/4 skeleton-shimmer rounded-lg" />
<div class="h-3 w-1/2 skeleton-shimmer rounded-lg" />
</div>
</div>
</div>
src/renderer/views/user/followers.vue
+4 -4
View File
@@ -5,14 +5,14 @@
<!-- Loading State -->
<div v-if="followerListLoading && followerList.length === 0">
<div class="page-padding-x pt-8">
<n-skeleton class="h-8 w-48 mb-6" />
<div class="h-8 w-48 mb-6 skeleton-shimmer rounded-xl" />
<div
class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6"
>
<div v-for="i in 12" :key="i" class="flex flex-col items-center space-y-3">
<n-skeleton class="h-20 w-20 rounded-full" />
<n-skeleton text class="w-16" />
<n-skeleton text class="w-24" />
<div class="h-20 w-20 skeleton-shimmer rounded-full" />
<div class="h-4 w-16 skeleton-shimmer rounded-lg" />
<div class="h-3 w-24 skeleton-shimmer rounded-lg" />
</div>
</div>
</div>
src/renderer/views/user/follows.vue
+4 -4
View File
@@ -5,14 +5,14 @@
<!-- Loading State -->
<div v-if="followListLoading && followList.length === 0">
<div class="page-padding-x pt-8">
<n-skeleton class="h-8 w-48 mb-6" />
<div class="h-8 w-48 mb-6 skeleton-shimmer rounded-xl" />
<div
class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6"
>
<div v-for="i in 12" :key="i" class="flex flex-col items-center space-y-3">
<n-skeleton class="h-20 w-20 rounded-full" />
<n-skeleton text class="w-16" />
<n-skeleton text class="w-24" />
<div class="h-20 w-20 skeleton-shimmer rounded-full" />
<div class="h-4 w-16 skeleton-shimmer rounded-lg" />
<div class="h-3 w-24 skeleton-shimmer rounded-lg" />
</div>
</div>
</div>
src/renderer/views/user/index.vue
+18 -16
View File
@@ -1,30 +1,32 @@
<template>
<div class="user-page">
<template v-if="infoLoading">
<div class="left bg-gray-200 p-4 dark:bg-gray-800">
<div
class="left-skeleton flex-1 max-w-[600px] rounded-2xl overflow-hidden p-4 bg-light-200 dark:bg-dark-100"
>
<div class="flex flex-col gap-6">
<div class="flex justify-between">
<n-skeleton text class="h-8 w-32" />
<n-skeleton text class="h-6 w-20" />
<div class="h-8 w-32 skeleton-shimmer rounded-lg" />
<div class="h-6 w-20 skeleton-shimmer rounded-lg" />
</div>
<div class="flex items-center gap-4">
<n-skeleton class="h-[50px] w-[50px] rounded-full" />
<div class="h-[50px] w-[50px] skeleton-shimmer rounded-full" />
<div class="flex w-2/5 justify-around">
<div v-for="i in 3" :key="i" class="flex flex-col items-center gap-1">
<n-skeleton text class="h-5 w-8" />
<n-skeleton text class="h-4 w-12" />
<div class="h-5 w-8 skeleton-shimmer rounded-lg" />
<div class="h-4 w-12 skeleton-shimmer rounded-lg" />
</div>
</div>
</div>
<n-skeleton text class="h-4 w-3/4" />
<div class="h-4 w-3/4 skeleton-shimmer rounded-lg" />
<div class="mt-4 rounded-xl bg-light p-4 dark:bg-black">
<n-skeleton class="mb-4 h-8 w-full rounded-xl" />
<div class="mb-4 h-8 w-full skeleton-shimmer rounded-xl" />
<div class="space-y-4">
<div v-for="i in 5" :key="i" class="flex gap-3">
<n-skeleton class="h-[50px] w-[50px] rounded-xl" />
<div class="h-[50px] w-[50px] skeleton-shimmer rounded-xl flex-shrink-0" />
<div class="flex flex-1 flex-col justify-center gap-2">
<n-skeleton text class="h-4 w-1/2" />
<n-skeleton text class="h-3 w-1/3" />
<div class="h-4 w-1/2 skeleton-shimmer rounded-lg" />
<div class="h-3 w-1/3 skeleton-shimmer rounded-lg" />
</div>
</div>
</div>
@@ -32,7 +34,7 @@
</div>
</div>
<div v-if="!isMobile" class="right">
<div class="title"><n-skeleton text class="h-8 w-32" /></div>
<div class="title"><div class="h-8 w-32 skeleton-shimmer rounded-lg" /></div>
<div class="rounded-2xl bg-light p-4 dark:bg-black">
<div class="space-y-2">
<div
@@ -40,11 +42,11 @@
:key="i"
class="flex items-center gap-4 rounded-2xl bg-light-100 p-2 dark:bg-dark-100"
>
<n-skeleton class="h-10 w-10 rounded-full" />
<n-skeleton class="h-10 w-10 rounded-xl" />
<div class="h-10 w-10 skeleton-shimmer rounded-full flex-shrink-0" />
<div class="h-10 w-10 skeleton-shimmer rounded-xl flex-shrink-0" />
<div class="flex flex-1 flex-col gap-2">
<n-skeleton text class="h-4 w-1/3" />
<n-skeleton text class="h-3 w-1/4" />
<div class="h-4 w-1/3 skeleton-shimmer rounded-lg" />
<div class="h-3 w-1/4 skeleton-shimmer rounded-lg" />
</div>
</div>
</div>