feat: 收口组件样式并调整移动端侧栏

src/features/storyboard/StoryboardPage.vue

@@ -418,3 +418,73 @@ watch(
         ></WorkspacePage
     >
 </template>
+
+<style>
+/* 本组件专属布局与 Naive 内部结构覆盖。 */
+@reference "../../styles/styles.css";
+.storyboard-controls {
+    @apply grid grid-cols-[minmax(180px,_1fr)_100px_145px_auto] gap-[18px] items-end;
+}
+.generation-row {
+    @apply flex items-center justify-between gap-5 pt-5 mt-5;
+}
+.generation-row > div:last-child {
+    @apply shrink-0;
+}
+.storyboard-workspace {
+    @apply grid grid-cols-[220px_minmax(0,_1fr)] overflow-hidden;
+}
+.shot-list {
+    @apply max-h-[1000px] overflow-hidden bg-(--app-surface) pt-0 px-2 pb-5;
+}
+@media (max-width: 1200px) {
+    .generation-row {
+        @apply items-start flex-col gap-3;
+    }
+    .storyboard-controls {
+        @apply grid-cols-[minmax(0,_1fr)_minmax(0,_1fr)];
+    }
+}
+@media (max-width: 760px) {
+    .storyboard-controls {
+        @apply grid-cols-[minmax(0,_1fr)] gap-3;
+    }
+    .storyboard-workspace {
+        @apply grid-cols-[minmax(0,_1fr)];
+    }
+    .shot-list {
+        @apply max-h-[240px];
+        border-right: 0;
+    }
+}
+.storyboard-workspace-page .storyboard-workspace {
+    @apply flex-1 h-auto min-h-0 overflow-hidden;
+}
+.storyboard-coverage {
+    @apply shrink-0;
+}
+.storyboard-workspace {
+    @apply grid-cols-[clamp(240px,_22%,_280px)_minmax(0,_1fr)];
+}
+.storyboard-workspace {
+    @apply h-[clamp(360px,65dvh,850px)] min-h-0;
+}
+.storyboard-workspace > article,
+.storyboard-workspace .shot-list {
+    @apply overflow-hidden min-h-0 h-full max-h-none;
+}
+.shot-list-content {
+    @apply gap-3 pt-0 px-0 pb-3;
+}
+.shot-list {
+    @apply p-0;
+}
+@media (max-width: 760px) {
+    .storyboard-workspace {
+        @apply grid-cols-[minmax(0,_1fr)] grid-rows-[184px_minmax(0,_1fr)];
+    }
+    .storyboard-controls {
+        @apply grid-cols-[minmax(0,_1fr)_minmax(0,_1fr)];
+    }
+}
+</style>