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 }}