From b9db84c261696dd6e8da478eed1d303738f5d64f Mon Sep 17 00:00:00 2001
From: GouJ <hefangjay@qq.com>
Date: Tue, 22 Sep 2026 16:55:55 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E9=A3=8E=E6=A0=BC?=
 =?UTF-8?q?=E5=8F=82=E8=80=83=E5=9B=BE=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/visual-style/components/StyleImages.vue | 10 +++++++++-
 tests/components/ui/flatTheme.test.ts                |  8 ++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/features/visual-style/components/StyleImages.vue b/src/features/visual-style/components/StyleImages.vue
index 3fb6f02..ba6345e 100644
--- a/src/features/visual-style/components/StyleImages.vue
+++ b/src/features/visual-style/components/StyleImages.vue
@@ -118,7 +118,7 @@ const rules = { imageUrl: imageUrlRule, sortOrder: fieldRule(Number.isSafeIntege
                 </div>
             </fieldset>
         </AppForm>
-        <div v-if="images.length" class="mt-5 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+        <div v-if="images.length" class="style-image-list mt-5">
             <article v-for="image in images" :key="image.id" class="surface-inset min-w-0 p-3">
                 <AssetImage
                     :src="image.imageUrl"
@@ -216,6 +216,14 @@ const rules = { imageUrl: imageUrlRule, sortOrder: fieldRule(Number.isSafeIntege
     gap: 12px;
     min-width: 0;
 }
+.style-image-submit {
+    margin-top: 29px;
+}
+.style-image-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 260px));
+    gap: 16px;
+}
 .style-asset-picker {
     @apply grid grid-cols-[repeat(auto-fill,_minmax(min(180px,_100%),_1fr))] gap-3;
 }
diff --git a/tests/components/ui/flatTheme.test.ts b/tests/components/ui/flatTheme.test.ts
index 26e999f..2a71873 100644
--- a/tests/components/ui/flatTheme.test.ts
+++ b/tests/components/ui/flatTheme.test.ts
@@ -258,6 +258,14 @@ describe('全站平面主题', () => {
         expect(readFileSync('src/components/ui/DirectoryItem.vue', 'utf8')).not.toContain('icon-button')
     })
 
+    it('风格参考图操作按钮与输入行对齐，缩略图在宽屏下保持紧凑', () => {
+        const css = readAllStyles()
+        expect(css).toMatch(/\.style-image-submit\s*\{[^}]*margin-top:\s*29px;/)
+        expect(css).toMatch(
+            /\.style-image-list\s*\{[^}]*display:\s*grid;[^}]*grid-template-columns:\s*repeat\(auto-fill, minmax\(min\(220px, 100%\), 260px\)\);[^}]*gap:\s*16px;/
+        )
+    })
+
     it('业务面板、列表分组和标签以背景区分，保留键盘焦点与选中指示', () => {
         // happy-dom 不计算布局；此项保护 CSS 契约，不能替代浏览器视觉验收。
         const css = readAllStyles()