feat(short-drama-agent-front): 调整工作台布局与图库瀑布流

src/features/visual-style/VisualStylePage.vue

@@ -106,44 +106,39 @@ function removeImage(image: VisualStyleImage) {
 </script>
 
 <template>
-    <WorkspacePage
-        ><template #header
-            ><div class="flex flex-wrap items-end justify-between gap-4">
-                <div>
-                    <h2 class="text-lg font-semibold">项目视觉风格</h2>
-                </div>
-                <RouterLink :to="`/projects/${projectId}/subject-identity`" class="text-button"
-                    >下一步：主体身份 →</RouterLink
-                >
-            </div></template
-        >
-        <div class="visual-style-toolbar">
-            <div class="visual-style-status" role="status">
-                <component :is="statusInfo.icon" :size="18" aria-hidden="true" />
-                <div>
+    <WorkspacePage compact class="visual-style-page"
+        ><template #header>
+            <!-- 以下是标题、锁定状态与生成操作 -->
+            <div class="workspace-toolbar visual-style-toolbar">
+                <h2 class="font-semibold">项目视觉风格</h2>
+                <div class="visual-style-status" role="status">
+                    <component :is="statusInfo.icon" :size="16" aria-hidden="true" />
                     <strong>{{ statusInfo.label }}</strong>
                     <p>{{ statusInfo.hint }}</p>
                 </div>
+                <div class="visual-style-actions toolbar-actions">
+                    <ConfirmAction
+                        :label="style ? 'AI 重新生成风格' : 'AI 生成风格'"
+                        :disabled="disabled || !!style?.isLocked || dirty"
+                        acknowledgement
+                        description="调用文本模型生成整体及分类风格。重新生成会覆盖已保存的文本与硬约束；旧身份、旧图片和已有提示词不会自动更新。"
+                        @confirm="generate"
+                    />
+                    <NButton
+                        :loading="query.loading.value"
+                        @click="query.refresh"
+                        quaternary
+                        class="icon-button"
+                        aria-label="刷新风格"
+                        title="刷新风格"
+                        ><template #icon><RefreshCw :size="16" /></template
+                    ></NButton>
+                    <RouterLink :to="`/projects/${projectId}/subject-identity`" class="text-button"
+                        >下一步：主体身份 →</RouterLink
+                    >
+                </div>
             </div>
-            <div class="visual-style-actions">
-                <ConfirmAction
-                    :label="style ? 'AI 重新生成风格' : 'AI 生成风格'"
-                    :disabled="disabled || !!style?.isLocked || dirty"
-                    acknowledgement
-                    description="调用文本模型生成整体及分类风格。重新生成会覆盖已保存的文本与硬约束；旧身份、旧图片和已有提示词不会自动更新。"
-                    @confirm="generate"
-                />
-                <NButton
-                    :loading="query.loading.value"
-                    @click="query.refresh"
-                    quaternary
-                    class="icon-button"
-                    aria-label="刷新风格"
-                    title="刷新风格"
-                    ><template #icon><RefreshCw :size="16" /></template
-                ></NButton>
-            </div>
-        </div>
+        </template>
         <NAlert v-if="query.error.value" role="alert" type="error" :show-icon="false" class="mb-4"
             >{{ query.error.value }} 请确认后端 dev 已更新并重启；查询失败不等同于尚未创建。
         </NAlert>
@@ -174,22 +169,31 @@ function removeImage(image: VisualStyleImage) {
 <style>
 /* 本组件专属布局与 Naive 内部结构覆盖。 */
 @reference "../../styles/styles.css";
-.visual-style-toolbar {
-    @apply flex items-center justify-between flex-wrap gap-y-4 gap-x-6 my-5 py-3.5 px-4 bg-(--app-subtle);
+.visual-style-page {
+    container: visual-style-header / inline-size;
 }
 .visual-style-status {
-    @apply flex items-center gap-3 min-w-0;
+    @apply flex items-center gap-2 min-w-0 flex-1 flex-nowrap;
 }
 .visual-style-status > svg {
     @apply shrink-0 text-muted;
 }
 .visual-style-status strong {
-    @apply text-sm font-medium;
+    @apply text-xs font-medium whitespace-nowrap;
 }
 .visual-style-status p {
-    @apply mt-1 mx-0 mb-0 text-muted text-xs leading-[1.6];
+    @apply mt-0 mx-0 mb-0 min-w-0 truncate text-muted text-xs leading-[1.6];
 }
 .visual-style-actions {
-    @apply flex items-center flex-wrap gap-2.5 ml-auto;
+    @apply shrink-0;
+}
+/* 窄内容区让说明占满首行剩余空间，操作独占下一行并从左侧排开。 */
+@container visual-style-header (max-width: 760px) {
+    .visual-style-page .workspace-toolbar {
+        @apply gap-x-3 gap-y-2;
+    }
+    .visual-style-actions.toolbar-actions {
+        @apply ml-0 w-full justify-start;
+    }
 }
 </style>