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

src/features/create-drama/CreateDramaPage.vue

@@ -72,6 +72,8 @@ function exportScript() {
     <WorkspacePage split class="script-workspace-page"
         ><template #header
             ><div class="stage-strip">
+                <!-- 以下是创作阶段进度 -->
+                <div class="stage-strip-track">
                     <div
                         v-for="(stage, index) in stages"
                         :key="stage.label"
@@ -80,6 +82,7 @@ function exportScript() {
                     >
                         <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;

src/features/projects/ProjectsPage.vue

@@ -67,6 +67,8 @@ function clearFilters() {
 <template>
     <WorkspacePage split>
         <template #header>
+            <div class="project-index-chrome">
+                <!-- 以下是标题与新建 -->
                 <div class="page-heading project-index-heading">
                     <div>
                         <h1>我的剧本</h1>
@@ -74,14 +76,20 @@ function clearFilters() {
                     </div>
                     <CreateProjectDialog @created="openProject" />
                 </div>
-        </template>
+                <!-- 以下是状态筛选、搜索与刷新 -->
                 <div class="project-index-toolbar">
-            <NRadioGroup v-model:value="filter" size="medium" class="project-status-filters" aria-label="项目状态筛选"
+                    <div class="project-status-filter-scroller">
+                        <NRadioGroup
+                            v-model:value="filter"
+                            size="medium"
+                            class="project-status-filters"
+                            aria-label="项目状态筛选"
                             ><NRadioButton v-for="item in filters" :key="item.value" :value="item.value">{{
                                 item.label
                             }}</NRadioButton></NRadioGroup
                         >
-            <div class="flex items-center gap-2">
+                    </div>
+                    <div class="project-index-search-row">
                         <NInput
                             v-model:value="search"
                             clearable
@@ -100,6 +108,8 @@ function clearFilters() {
                         ></NButton>
                     </div>
                 </div>
+            </div>
+        </template>
         <NAlert v-if="query.error.value" type="error" :show-icon="false"
             >{{ query.error.value }}<NButton text class="ml-3" @click="query.refresh">重新连接</NButton></NAlert
         >
@@ -171,6 +181,9 @@ function clearFilters() {
 .project-data-table .n-data-table-base-table {
     @apply flex-1 min-h-0;
 }
+.project-index-chrome {
+    @apply flex flex-col gap-3;
+}
 .project-index-heading {
     @apply m-0;
 }
@@ -180,6 +193,9 @@ function clearFilters() {
 .project-index-toolbar {
     @apply flex items-center justify-between flex-wrap gap-3 mb-1;
 }
+.project-index-search-row {
+    @apply flex min-w-0 items-center gap-2;
+}
 .project-search {
     @apply w-[240px];
 }
@@ -202,12 +218,42 @@ function clearFilters() {
 .project-name-cell small {
     @apply text-muted mt-1 text-[11px];
 }
-@media (max-width: 760px) {
-    .project-search {
+@media (max-width: 800px) {
+    .workspace-heading:has(.project-index-heading) {
+        @apply py-2.5 px-3;
+    }
+    .project-index-chrome {
+        @apply gap-2;
+    }
+    .project-index-heading {
+        @apply flex-row items-center gap-3;
+    }
+    .project-index-heading h1 {
+        @apply mt-0 text-lg;
+    }
+    .project-index-heading .page-description {
+        @apply hidden;
+    }
+    .project-index-heading .n-button {
+        @apply h-9 px-3 shrink-0;
+    }
+    .project-index-toolbar {
+        @apply flex-col items-stretch gap-2 mb-0;
+    }
+    .project-status-filter-scroller {
+        @apply w-full m-0;
+    }
+    .project-status-filters.n-radio-group {
+        @apply flex w-full flex-nowrap m-0 p-0;
+    }
+    .project-status-filters .n-radio-button {
+        @apply flex-1 min-w-0 px-2;
+    }
+    .project-index-search-row {
         @apply w-full;
     }
-    .project-index-toolbar .n-radio-group {
-        @apply w-full;
+    .project-search {
+        @apply w-auto min-w-0 flex-1;
     }
 }
 </style>

src/testing/styles.ts

@@ -31,6 +31,7 @@ const STATIC: Record<string, string> = {
     'inline-flex': 'display: inline-flex;',
     'flex-col': 'flex-direction: column;',
     'flex-wrap': 'flex-wrap: wrap;',
+    'flex-nowrap': 'flex-wrap: nowrap;',
     'items-center': 'align-items: center;',
     'items-end': 'align-items: end;',
     'items-start': 'align-items: flex-start;',

tests/components/ui/flatTheme.test.ts

@@ -208,6 +208,10 @@ describe('全站平面主题', () => {
             /\.project-status-filters \.n-radio-button\s*\{[^}]*min-width:\s*76px;[^}]*padding-inline:\s*18px/
         )
         expect(css).toMatch(/\.project-status-filters\.n-radio-group\s*\{[^}]*flex-wrap:\s*wrap;[^}]*height:\s*auto;/)
+        expect(css).toContain('@media (max-width: 800px)')
+        expect(css).toMatch(/\.project-status-filters\.n-radio-group\s*\{[^}]*width:\s*100%;[^}]*flex-wrap:\s*nowrap/)
+        expect(css).toMatch(/\.project-status-filters \.n-radio-button\s*\{[^}]*flex:\s*1;[^}]*min-width:\s*0/)
+        expect(css).toMatch(/\.project-index-heading \.page-description\s*\{[^}]*display:\s*none/)
         for (const file of [
             'src/App.vue',
             'src/components/ui/ThemeToggle.vue',