style: 优化风格参考图布局

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

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()