From ba7eafee365aac5f69ec113225adf4ccd369d1ad Mon Sep 17 00:00:00 2001
From: GouJ <hefangjay@qq.com>
Date: Mon, 14 Sep 2026 11:52:54 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E7=AB=AF=E9=A3=8E=E6=A0=BC=E5=8F=82=E8=80=83=E5=9B=BE=E7=99=BB?=
 =?UTF-8?q?=E8=AE=B0=E8=A1=A8=E5=8D=95=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../visual-style/components/StyleImages.vue   | 50 +++++++++++++++++--
 1 file changed, 45 insertions(+), 5 deletions(-)

diff --git a/src/features/visual-style/components/StyleImages.vue b/src/features/visual-style/components/StyleImages.vue
index 407d950..015a8eb 100644
--- a/src/features/visual-style/components/StyleImages.vue
+++ b/src/features/visual-style/components/StyleImages.vue
@@ -35,7 +35,7 @@ const rules = { imageUrl: imageUrlRule, sortOrder: fieldRule(Number.isSafeIntege
 </script>
 
 <template>
-    <section class="panel mt-5 p-5 sm:p-6" aria-label="风格参考图">
+    <section class="panel style-images-panel mt-5 p-5 sm:p-6" aria-label="风格参考图">
         <h3 class="font-medium">
             风格参考图 <span class="ml-2 text-xs text-muted">{{ images.length }} 张</span>
         </h3>
@@ -44,8 +44,8 @@ const rules = { imageUrl: imageUrlRule, sortOrder: fieldRule(Number.isSafeIntege
             图片地址。后端尚无文件上传接口；这些图片目前仅管理记录，现有身份／形态生图不会自动将风格图片传给模型。
         </p>
         <AppForm :model="form" :rules="rules" :disabled="disabled" class="mt-4" @submit="add">
-            <fieldset :disabled="disabled" class="form-controls flex flex-wrap gap-3">
-                <NFormItem class="min-w-48 flex-1" path="imageUrl" label="图片地址"
+            <fieldset :disabled="disabled" class="form-controls style-image-controls">
+                <NFormItem class="style-image-url" path="imageUrl" label="图片地址"
                     ><NInput
                         placeholder="https://… 或 /storage/…"
                         :input-props="{ 'aria-label': '风格图片地址' }"
@@ -65,7 +65,7 @@ const rules = { imageUrl: imageUrlRule, sortOrder: fieldRule(Number.isSafeIntege
                         class="select-control"
                     ></NSelect
                 ></NFormItem>
-                <NFormItem class="w-24" path="sortOrder" label="排序"
+                <NFormItem path="sortOrder" label="排序"
                     ><NInputNumber
                         :input-props="{ 'aria-label': '风格图片排序' }"
                         :value="typeof form.sortOrder === 'number' ? form.sortOrder : null"
@@ -74,7 +74,7 @@ const rules = { imageUrl: imageUrlRule, sortOrder: fieldRule(Number.isSafeIntege
                     ></NInputNumber
                 ></NFormItem>
                 <NCheckbox v-model:checked="form.enabled" class="control-row-checkbox text-xs">启用</NCheckbox>
-                <NButton :disabled="disabled" attr-type="submit">登记参考图</NButton>
+                <NButton class="style-image-submit" :disabled="disabled" attr-type="submit">登记参考图</NButton>
             </fieldset>
         </AppForm>
         <div v-if="images.length" class="mt-5 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
@@ -127,3 +127,43 @@ const rules = { imageUrl: imageUrlRule, sortOrder: fieldRule(Number.isSafeIntege
         <p v-else class="mt-5 text-sm text-muted">尚无风格参考图。先保存视觉风格，再登记图片。</p>
     </section>
 </template>
+
+<style>
+/* 按面板实际宽度布局，侧栏或移动端压缩内容时也能保持地址输入可用。 */
+.style-images-panel {
+    container-type: inline-size;
+}
+.style-image-controls {
+    display: grid;
+    grid-template-columns: minmax(180px, 1fr) 130px 96px auto auto;
+    gap: 12px;
+    min-width: 0;
+}
+.style-image-controls .select-control {
+    min-width: 0;
+    width: 100%;
+}
+@container (max-width: 640px) {
+    .style-image-controls {
+        grid-template-columns: minmax(0, 1fr) 96px auto;
+    }
+    .style-image-url,
+    .style-image-submit {
+        grid-column: 1 / -1;
+    }
+    .style-images-panel .app-form .style-image-controls > .style-image-submit {
+        margin-top: 0;
+        width: 100%;
+        min-height: 36px;
+    }
+}
+@container (max-width: 300px) {
+    .style-image-controls {
+        grid-template-columns: minmax(0, 1fr) 96px;
+    }
+    .style-images-panel .app-form .style-image-controls > .n-checkbox {
+        grid-column: 1 / -1;
+        margin-top: 0;
+    }
+}
+</style>