diff --git a/src/features/subject-images/SubjectImagesPage.vue b/src/features/subject-images/SubjectImagesPage.vue index 529ce35..74d6032 100644 --- a/src/features/subject-images/SubjectImagesPage.vue +++ b/src/features/subject-images/SubjectImagesPage.vue @@ -145,7 +145,7 @@ watch( ) const search = ref('') /** 切换排版复用同一份卡片和查询结果,不重新读取图库或清空筛选。 */ -const layout = ref('grid') +const layout = ref('masonry') const module = ref('all') /** 形态图片状态筛选;单选下拉避免移动端复选项占据两行。 */ type ImageStatusFilter = 'all' | 'missing' diff --git a/tests/features/subject-images/asset-impact.test.ts b/tests/features/subject-images/asset-impact.test.ts index 736b3c8..8c8c7d4 100644 --- a/tests/features/subject-images/asset-impact.test.ts +++ b/tests/features/subject-images/asset-impact.test.ts @@ -140,29 +140,31 @@ describe('过期首帧到具体素材定位', () => { const grid = wrapper!.get('.form-image-grid').element const cards = wrapper!.findAll('.form-image-card').map(card => card.element) scroll.scrollTop = 240 - expect(wrapper!.get('[aria-label="网格布局"]').attributes('aria-pressed')).toBe('true') - expect(wrapper!.get('[aria-label="网格布局"]').classes()).toContain('layout-option-active') - expect(wrapper!.get('[aria-label="瀑布流布局"]').classes()).not.toContain('layout-option-active') + expect(wrapper!.get('.form-image-masonry').element).toBe(grid) + expect(wrapper!.get('[aria-label="瀑布流布局"]').attributes('aria-pressed')).toBe('true') + expect(wrapper!.get('[aria-label="瀑布流布局"]').classes()).toContain('layout-option-active') + expect(wrapper!.get('[aria-label="网格布局"]').attributes('aria-pressed')).toBe('false') + expect(wrapper!.get('[aria-label="网格布局"]').classes()).not.toContain('layout-option-active') expect( wrapper! .get('.gallery-layout-switch') .findAll('button') .map(button => button.attributes('aria-label')) ).toEqual(['网格布局', '瀑布流布局', '刷新图库', '批量生图']) - await wrapper!.get('[aria-label="瀑布流布局"]').trigger('click') - expect(wrapper!.get('.form-image-masonry').element).toBe(grid) - expect(wrapper!.get('[aria-label="瀑布流布局"]').attributes('aria-pressed')).toBe('true') - expect(wrapper!.get('[aria-label="瀑布流布局"]').classes()).toContain('layout-option-active') - expect(wrapper!.get('[aria-label="网格布局"]').attributes('aria-pressed')).toBe('false') - expect(wrapper!.get('[aria-label="网格布局"]').classes()).not.toContain('layout-option-active') + await wrapper!.get('[aria-label="网格布局"]').trigger('click') + expect(wrapper!.find('.form-image-masonry').exists()).toBe(false) + expect(wrapper!.get('[aria-label="网格布局"]').attributes('aria-pressed')).toBe('true') + expect(wrapper!.get('[aria-label="网格布局"]').classes()).toContain('layout-option-active') + expect(wrapper!.get('[aria-label="瀑布流布局"]').attributes('aria-pressed')).toBe('false') + expect(wrapper!.get('[aria-label="瀑布流布局"]').classes()).not.toContain('layout-option-active') expect(wrapper!.findAll('.form-image-card').map(card => card.element)).toEqual(cards) expect(scroll.scrollTop).toBe(240) expect( wrapper!.get('.form-image-card').element.style.getPropertyValue('--form-image-aspect') ).toBe('') await wrapper!.get('input[aria-label="搜索形态图片"]').setValue('雨夜') - await wrapper!.get('[aria-label="网格布局"]').trigger('click') - expect(wrapper!.find('.form-image-masonry').exists()).toBe(false) + await wrapper!.get('[aria-label="瀑布流布局"]').trigger('click') + expect(wrapper!.get('.form-image-masonry').element).toBe(grid) expect(wrapper!.get('.form-image-grid').element).toBe(grid) expect(wrapper!.findAll('.form-image-card')).toHaveLength(1) expect(wrapper!.get('.form-image-card').text()).toContain('雨夜形态') diff --git a/tests/features/workflows/pages.test.ts b/tests/features/workflows/pages.test.ts index ea595e3..03fee5c 100644 --- a/tests/features/workflows/pages.test.ts +++ b/tests/features/workflows/pages.test.ts @@ -1,5 +1,5 @@ import { computed, ref } from 'vue' -import { NDataTable, NImage, NRadioGroup, NScrollbar } from 'naive-ui' +import { NImage, NRadioGroup, NScrollbar } from 'naive-ui' import { createMemoryHistory, createRouter } from 'vue-router' import { flushPromises, mount, type VueWrapper } from '@vue/test-utils' import { afterEach, describe, expect, it, vi } from 'vitest' @@ -894,7 +894,7 @@ describe('工作台页面交互', () => { expect(wrapper!.findAll('.form-image-card')).toHaveLength(1) }) - it('形态卡片铺满并打开原生图片预览,历史管理仍从独立按钮进入', async () => { + it('瀑布流形态卡片完整展示并打开原生图片预览,历史管理仍从独立按钮进入', async () => { const form = formFixture() const fetcher = vi .fn() @@ -905,7 +905,7 @@ describe('工作台页面交互', () => { await mountSubjectImages() await drawerPanel().get('[aria-label="关闭操作面板"]').trigger('click') const card = wrapper!.get('.form-image-card') - expect(card.getComponent(NImage).props()).toMatchObject({ objectFit: 'cover', previewDisabled: false }) + expect(card.getComponent(NImage).props()).toMatchObject({ objectFit: 'contain', previewDisabled: false }) await card.get('img').trigger('click') await flushPromises() expect(document.querySelector('.n-image-preview')?.getAttribute('src')).toContain( @@ -1444,51 +1444,6 @@ describe('工作台页面交互', () => { expect(wrapper.findAll('tbody tr')).toHaveLength(1) }) - it('项目列表滚动追加,搜索覆盖未展示项目且清除后回到首批', async () => { - const projects = Array.from({ length: 45 }, (_, index) => ({ - ...fixture, - id: 'project-' + index, - title: '剧本' + index - })) - const fetcher = vi.fn().mockImplementation(async () => - new Response(JSON.stringify({ data: projects })) - ) - vi.stubGlobal('fetch', fetcher) - const router = createRouter({ - history: createMemoryHistory(), - routes: [{ path: '/', component: ProjectsPage }] - }) - await router.push('/') - wrapper = mount(ProjectsPage, { attachTo: document.body, global: { plugins: [router] } }) - await flushPromises() - const table = wrapper.getComponent(NDataTable) - expect(table.props('data')).toHaveLength(20) - expect(wrapper.find('.n-pagination').exists()).toBe(false) - expect(wrapper.text()).not.toContain('个项目') - expect(wrapper.text()).not.toContain('更新于') - // 远离底部不追加;抵达底部后逐批追加,末批不重复。 - const scroll = async (scrollTop: number) => { - table.vm.$emit('scroll', { target: { scrollHeight: 1000, clientHeight: 200, scrollTop } }) - await flushPromises() - } - await scroll(100) - expect(table.props('data')).toHaveLength(20) - await scroll(800) - expect(table.props('data')).toHaveLength(40) - await scroll(800) - expect(table.props('data')).toHaveLength(45) - await scroll(800) - expect(table.props('data')).toHaveLength(45) - await wrapper.get('input[aria-label="搜索项目"]').setValue('剧本44') - await flushPromises() - expect(table.props('data')).toHaveLength(1) - expect(wrapper.text()).toContain('剧本44') - await wrapper.get('input[aria-label="搜索项目"]').setValue('') - await flushPromises() - expect(table.props('data')).toHaveLength(20) - expect(fetcher).toHaveBeenCalledTimes(1) - }) - it('新建弹窗提交真实参数并返回 202 的项目 ID', async () => { const fetcher = vi .fn()