From 543c85ff43299b5b9bfe062c97136afac77648cc Mon Sep 17 00:00:00 2001 From: GouJ Date: Fri, 4 Sep 2026 10:40:19 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E5=90=88=E5=B9=B6=E5=9B=BE=E5=BA=93?= =?UTF-8?q?=E9=95=9C=E5=A4=B4=E5=AE=9A=E4=BD=8D=E4=B8=8E=E7=AD=9B=E9=80=89?= =?UTF-8?q?=E5=B7=A5=E5=85=B7=E6=A0=8F=E5=B9=B6=E7=BB=9F=E4=B8=80=E5=AF=B9?= =?UTF-8?q?=E9=BD=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/admin.css | 22 ++++++- src/components/ui/flatTheme.test.ts | 15 +++++ .../subject-images/SubjectImagesPage.vue | 63 +++++++++---------- .../subject-images/asset-impact.test.ts | 11 ++++ src/features/workflows/pages.test.ts | 3 + 5 files changed, 81 insertions(+), 33 deletions(-) diff --git a/src/admin.css b/src/admin.css index 0cabdb5..79154a9 100644 --- a/src/admin.css +++ b/src/admin.css @@ -862,6 +862,21 @@ body { .form-image-filter-region { container-type: inline-size; margin-block: 16px; + padding: 14px 16px; + background: var(--app-subtle); +} +/* 镜头选择和图库筛选共用一行，以控件中心对齐；窄屏保留完整筛选组，不挤压复选框。 */ +.form-image-toolbar { + display: grid; + grid-template-columns: minmax(0, 1fr); + align-items: center; + gap: 12px 16px; +} +.form-image-toolbar.has-impact-picker { + grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); +} +.form-image-toolbar > * { + min-width: 0; } .form-image-filters { display: grid; @@ -888,6 +903,11 @@ body { font-size: 12px; white-space: nowrap; } +@container (max-width: 1200px) { + .form-image-toolbar.has-impact-picker { + grid-template-columns: minmax(0, 1fr); + } +} @container (max-width: 900px) { .form-image-filters { grid-template-columns: minmax(0, 1fr) 152px; @@ -1466,8 +1486,8 @@ body { background: var(--app-subtle); } .asset-impact-select { - flex: 0 1 340px; min-width: 0; + width: 100%; } .form-image-card-focused { box-shadow: inset 3px 0 0 var(--app-accent-text); diff --git a/src/components/ui/flatTheme.test.ts b/src/components/ui/flatTheme.test.ts index 95caafe..0ef00c0 100644 --- a/src/components/ui/flatTheme.test.ts +++ b/src/components/ui/flatTheme.test.ts @@ -141,6 +141,21 @@ describe('全站平面主题', () => { expect(tools).not.toContain(':focusable="false"') }) + it('图库顶部统一镜头选择和筛选的背景与垂直对齐，窄屏整组换行', () => { + // DOM 环境不计算几何；保护容器宽度断点和居中契约，真实坐标仍需浏览器验收。 + const css = readFileSync('src/admin.css', 'utf8') + expect(css).toMatch( + /\.form-image-filter-region\s*\{[^}]*padding:\s*14px 16px;[^}]*background:\s*var\(--app-subtle\);/ + ) + expect(css).toMatch(/\.form-image-toolbar\s*\{[^}]*align-items:\s*center;[^}]*gap:\s*12px 16px;/) + expect(css).toMatch( + /\.form-image-toolbar\.has-impact-picker\s*\{[^}]*grid-template-columns:\s*minmax\(220px, 340px\) minmax\(0, 1fr\);/ + ) + expect(css).toMatch( + /@container \(max-width: 1200px\)\s*\{\s*\.form-image-toolbar\.has-impact-picker\s*\{[^}]*grid-template-columns:\s*minmax\(0, 1fr\);/ + ) + }) + it('单图标按钮以当前控件高度为边长，尺寸与内容按钮互不影响', () => { // happy-dom 不计算几何尺寸，此项约束共用样式和调用方，实际布局仍需浏览器验收。 const css = readFileSync('src/admin.css', 'utf8') diff --git a/src/features/subject-images/SubjectImagesPage.vue b/src/features/subject-images/SubjectImagesPage.vue index 3dfa352..70a3d8e 100644 --- a/src/features/subject-images/SubjectImagesPage.vue +++ b/src/features/subject-images/SubjectImagesPage.vue @@ -379,13 +379,10 @@ async function showStaleForms() { >镜头影响检查失败，暂时无法确认有无过期首帧：{{ impact.query.error.value }} 重试检查 -
-
+
+
+
+ + +
+ 仅看缺少主图 + 仅看身份过期 +
+ {{ filtered.length }} 个形态 +
+
+
+
+
返回第 {{ sourceShot?.episodeNo }} 集 · 镜头 {{ sourceShot?.shotNo }} → @@ -470,32 +495,6 @@ async function showStaleForms() { }} 清除定位 -
-
- - -
- 仅看缺少主图 - 仅看身份过期 -
- {{ filtered.length }} 个形态 -
-
{{ query.error.value }} 当前展示上次读取的数据。 diff --git a/src/features/subject-images/asset-impact.test.ts b/src/features/subject-images/asset-impact.test.ts index 2d53115..d051134 100644 --- a/src/features/subject-images/asset-impact.test.ts +++ b/src/features/subject-images/asset-impact.test.ts @@ -229,11 +229,22 @@ describe('过期首帧到具体素材定位', () => { expect(wrapper!.findAll('.form-image-card')).toHaveLength(3) expect(wrapper!.text()).not.toContain('个形态主图与当前已锁定身份母版不一致') expect(fetcher.mock.calls.some(([url]) => String(url).endsWith('/references'))).toBe(false) + // 镜头选择和图库筛选共享上方工具栏；未选择镜头时不留下空的关联说明面板。 + const toolbar = wrapper!.get('.form-image-toolbar') + const picker = toolbar.get('.asset-impact-select').element + expect(toolbar.classes()).toContain('has-impact-picker') + expect(picker.nextElementSibling).toBe(toolbar.get('.form-image-filters').element) + expect(toolbar.find('input[aria-label="搜索形态图片"]').exists()).toBe(true) + expect(toolbar.findAll('.filter-toggles [role="checkbox"]')).toHaveLength(2) + expect(wrapper!.find('.asset-impact-context').exists()).toBe(false) const select = wrapper! .findAllComponents(NSelect) .find(item => item.attributes('aria-label') === '选择关联镜头')! select.vm.$emit('update:value', 'shot-target') await flushPromises() + expect(wrapper!.get('.asset-impact-context').element.previousElementSibling).toBe( + wrapper!.get('.form-image-filter-region').element + ) expect(wrapper!.text()).toContain('待处理首帧关联此素材') expect(fetcher.mock.calls.filter(([url]) => String(url).endsWith('/references'))).toHaveLength(1) }) diff --git a/src/features/workflows/pages.test.ts b/src/features/workflows/pages.test.ts index 7806141..a1ca29e 100644 --- a/src/features/workflows/pages.test.ts +++ b/src/features/workflows/pages.test.ts @@ -817,6 +817,9 @@ describe('工作台页面交互', () => { vi.stubGlobal('fetch', fetcher) await mountSubjectImages() const filters = wrapper!.get('.form-image-filters') + expect(wrapper!.get('.form-image-toolbar').classes()).not.toContain('has-impact-picker') + expect(filters.element.parentElement).toBe(wrapper!.get('.form-image-toolbar').element) + expect(wrapper!.findAll('.form-image-filters')).toHaveLength(1) expect(filters.get('.filter-result-count').text()).toBe('2 个形态') expect(filters.find('input[aria-label="搜索形态图片"]').exists()).toBe(true) expect(filters.findAll('.filter-toggles [role="checkbox"]')).toHaveLength(2)