fix: 优化移动端风格参考图登记表单布局

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">
+            <fieldset :disabled="disabled" class="form-controls style-image-controls">
-                <NFormItem class="min-w-48 flex-1" path="imageUrl" label="图片地址"
+                <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>