feat: 收紧移动端剧本列表与创作页顶栏

src/features/create-drama/CreateDramaPage.vue

@@ -72,14 +72,17 @@ function exportScript() {
     <WorkspacePage split class="script-workspace-page"
         ><template #header
             ><div class="stage-strip">
-                <div
-                    v-for="(stage, index) in stages"
-                    :key="stage.label"
-                    class="stage-item"
-                    :class="{ done: stage.done }"
-                >
-                    <Check v-if="stage.done" :size="15" /><Circle v-else :size="13" /><span>{{ stage.label }}</span
-                    ><ArrowRight v-if="index < stages.length - 1" :size="13" class="stage-arrow" />
+                <!-- 以下是创作阶段进度 -->
+                <div class="stage-strip-track">
+                    <div
+                        v-for="(stage, index) in stages"
+                        :key="stage.label"
+                        class="stage-item"
+                        :class="{ done: stage.done }"
+                    >
+                        <Check v-if="stage.done" :size="15" /><Circle v-else :size="13" /><span>{{ stage.label }}</span
+                        ><ArrowRight v-if="index < stages.length - 1" :size="13" class="stage-arrow" />
+                    </div>
                 </div></div
         ></template>
         <div v-if="!complete" class="mt-5 flex flex-wrap items-center justify-between gap-4">
@@ -254,10 +257,13 @@ function exportScript() {
 /* 本组件专属布局与 Naive 内部结构覆盖。 */
 @reference "../../styles/styles.css";
 .stage-strip {
-    @apply flex flex-wrap items-center gap-3.5;
+    @apply flex items-center gap-3;
+}
+.stage-strip-track {
+    @apply flex min-w-0 flex-1 flex-wrap items-center gap-3.5;
 }
 .stage-item {
-    @apply flex items-center gap-[7px] text-muted text-[11px];
+    @apply flex shrink-0 items-center gap-[7px] text-muted text-[11px];
 }
 .stage-item.done {
     @apply text-ink;
@@ -268,13 +274,40 @@ function exportScript() {
 .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) {
+@media (max-width: 800px) {
+    .script-workspace-page .workspace-heading {
+        @apply py-2.5 px-3;
+    }
     .stage-strip {
-        @apply gap-[9px];
+        @apply gap-2;
+    }
+    .stage-strip-track {
+        @apply min-w-0 flex-1 flex-nowrap overflow-x-auto overflow-y-hidden overscroll-x-contain;
+        scrollbar-width: none;
+        mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
+    }
+    .stage-strip-track::-webkit-scrollbar {
+        display: none;
     }
     .stage-arrow {
         @apply ml-[3px];
     }
+    .script-section .tabs-toolbar {
+        container-type: normal;
+    }
+    .script-section .workspace-tabs > .n-tabs-nav {
+        @apply flex-nowrap;
+    }
+    .script-section .workspace-tabs .n-tabs-nav-scroll-wrapper {
+        @apply min-w-0 flex-1;
+        flex-basis: auto;
+    }
+    .script-section .workspace-tabs .n-tabs-nav__suffix {
+        @apply w-auto pl-2;
+    }
+    .script-section .tabs-toolbar-actions {
+        @apply min-h-0 flex-nowrap;
+    }
 }
 .script-section {
     @apply flex-1 flex flex-col min-h-0;