feat(short-drama-agent-front): 调整工作台布局与图库瀑布流

tests/components/ui/flatTheme.test.ts

@@ -166,16 +166,17 @@ describe('全站平面主题', () => {
         )
     })
 
-    it('瀑布流自适应列宽，卡片保持完整并按封面尺寸预留高度', () => {
+    it('瀑布流按行填充自适应列宽，卡片与图片均保留实际高度', () => {
         const css = readAllStyles()
         expect(css).toMatch(
-            /\.gallery-workspace-page \.form-image-masonry\s*\{[^}]*display:\s*block;[^}]*columns:\s*260px;[^}]*column-gap:\s*20px;/
+            /\.gallery-workspace-page \.form-image-masonry\s*\{[^}]*display:\s*grid;[^}]*grid-template-columns:\s*repeat\(auto-fill, minmax\(min\(260px, 100%\), 1fr\)\);[^}]*grid-auto-flow:\s*row dense;[^}]*grid-auto-rows:\s*1px;/
         )
         expect(css).toMatch(
-            /\.form-image-masonry > \.form-image-card\s*\{[^}]*break-inside:\s*avoid;[^}]*margin-bottom:\s*20px;/
+            /\.form-image-masonry > \.form-image-card\s*\{[^}]*grid-column-start:\s*var\(--form-image-column,\s*auto\);[^}]*grid-row-start:\s*var\(--form-image-row-start,\s*auto\);[^}]*grid-row-end:\s*span var\(--form-image-row-span,\s*1\);/
         )
+        expect(css).toMatch(/\.form-image-masonry \.asset-image\s*\{[^}]*aspect-ratio:\s*auto;/)
         expect(css).toMatch(
-            /\.form-image-masonry \.asset-image\s*\{[^}]*aspect-ratio:\s*var\(--form-image-aspect,\s*4\s*\/\s*3\);/
+            /\.form-image-masonry \.asset-image \.n-image,\s*\.form-image-masonry \.asset-image \.n-image img\s*\{[^}]*height:\s*auto;/
         )
     })
 

tests/features/subject-images/asset-impact.test.ts

@@ -149,7 +149,7 @@ describe('过期首帧到具体素材定位', () => {
         expect(scroll.scrollTop).toBe(240)
         expect(
             wrapper!.get<HTMLElement>('.form-image-card').element.style.getPropertyValue('--form-image-aspect')
-        ).toBe('2048 / 2048')
+        ).toBe('')
         await wrapper!.get('input[aria-label="搜索形态图片"]').setValue('雨夜')
         await wrapper!.get('[aria-label="网格布局"]').trigger('click')
         expect(wrapper!.find('.form-image-masonry').exists()).toBe(false)

tests/features/subject-images/layout.test.ts

@@ -1,31 +1,11 @@
 import { describe, expect, it } from 'vitest'
-import { formCoverAspectRatio } from '@/features/subject-images/layout'
-import { formFixture, imageFixture } from '@/features/subject-images/testing/fixtures'
+import { masonryRowSpan } from '@/features/subject-images/layout'
 
-describe('图库瀑布流图片比例', () => {
-    it.each([
-        [800, 1200],
-        [1600, 900],
-        [1024, 1024]
-    ])('保留正式图片尺寸 %s × %s', (width, height) => {
-        const form = formFixture()
-        form.images = [imageFixture({ width, height })]
-        expect(formCoverAspectRatio(form)).toBe(`${width} / ${height}`)
-    })
-
-    it.each([null, 0, -1, NaN, Infinity])('尺寸 %s 无效时使用稳定占位比例', width => {
-        const form = formFixture()
-        form.images = [imageFixture({ width })]
-        expect(formCoverAspectRatio(form)).toBe('4 / 3')
-        form.images = [imageFixture({ height: width })]
-        expect(formCoverAspectRatio(form)).toBe('4 / 3')
-    })
-
-    it('无图片时保留占位，候选封面也使用自己的尺寸', () => {
-        const form = formFixture()
-        form.images = []
-        expect(formCoverAspectRatio(form)).toBe('4 / 3')
-        form.images = [imageFixture({ isPrimary: false, width: 800, height: 1200 })]
-        expect(formCoverAspectRatio(form)).toBe('800 / 1200')
+describe('图库瀑布流卡片布局', () => {
+    it('按卡片实际高度计算网格跨度', () => {
+        expect(masonryRowSpan(420, 1, 20)).toBe(21)
+        expect(masonryRowSpan(421, 1, 20)).toBe(21)
+        expect(masonryRowSpan(422, 1, 20)).toBe(22)
+        expect(masonryRowSpan(0, 1, 20)).toBe(1)
     })
 })