feat: 优化生产面板并增加图片网格加载

tests/components/ui/AssetImage.test.ts

@@ -1,5 +1,5 @@
 import { flushPromises, mount, type VueWrapper } from '@vue/test-utils'
-import { afterEach, describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
 import { NImage } from 'naive-ui'
 import AssetImage from '@/components/ui/AssetImage.vue'
 
@@ -8,6 +8,8 @@ afterEach(() => {
     wrapper?.unmount()
     wrapper = undefined
     document.body.innerHTML = ''
+    vi.useRealTimers()
+    vi.unstubAllGlobals()
 })
 
 describe('资源图片展示与原图预览', () => {
@@ -31,6 +33,21 @@ describe('资源图片展示与原图预览', () => {
         expect(wrapper.get<HTMLImageElement>('img').element.style.objectFit).toBe('contain')
     })
 
+    it('图片加载完成后按网格逐块显现，并在动画结束后移除覆盖层', async () => {
+        vi.useFakeTimers()
+        vi.stubGlobal('requestAnimationFrame', (callback: FrameRequestCallback) => {
+            callback(0)
+            return 1
+        })
+        wrapper = mount(AssetImage, { props: { src: '/storage/reveal.png', alt: '加载动效图片' } })
+        expect(wrapper.findAll('.reveal-image-cell')).toHaveLength(16)
+        await wrapper.get('img').trigger('load')
+        expect(wrapper.get('.reveal-image').classes()).toContain('is-loaded')
+        vi.advanceTimersByTime(760)
+        await wrapper.vm.$nextTick()
+        expect(wrapper.find('.reveal-image-grid').exists()).toBe(false)
+    })
+
     it('cover 仅裁切卡片，点击使用 Naive 原生预览展示同一完整资源，遮罩可关闭', async () => {
         wrapper = mount(AssetImage, {
             attachTo: document.body,