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

src/features/create-drama/CreateDramaPage.vue

@@ -249,3 +249,49 @@ function exportScript() {
             </div></div
     ></WorkspacePage>
 </template>
+
+<style>
+/* 本组件专属布局与 Naive 内部结构覆盖。 */
+@reference "../../styles/styles.css";
+.stage-strip {
+    @apply flex flex-wrap items-center gap-3.5;
+}
+.stage-item {
+    @apply flex items-center gap-[7px] text-muted text-[11px];
+}
+.stage-item.done {
+    @apply text-ink;
+}
+.stage-arrow {
+    @apply ml-3 text-muted;
+}
+.json-view {
+    @apply whitespace-pre-wrap wrap-anywhere p-4 bg-(--app-subtle) rounded-none font-mono text-[11px] leading-[1.9];
+}
+@media (max-width: 760px) {
+    .stage-strip {
+        @apply gap-[9px];
+    }
+    .stage-arrow {
+        @apply ml-[3px];
+    }
+}
+.script-section {
+    @apply flex-1 flex flex-col min-h-0;
+}
+.script-section > :first-child {
+    @apply shrink-0;
+}
+.script-section .content-with-history {
+    @apply flex-1 h-auto min-h-0;
+}
+.script-workspace-page .workspace-split > :not(.script-section) {
+    @apply shrink-0;
+}
+.script-section .n-tabs-tab__label {
+    @apply inline-flex items-center gap-2;
+}
+.script-section .content-with-history.history-hidden {
+    @apply grid-cols-[minmax(0,_1fr)] grid-rows-[minmax(0,_1fr)];
+}
+</style>