chore(web): 合并剧集管理布局修复

src/styles/business/style.css

@@ -511,6 +511,8 @@ body {
 .episode-context {
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  gap: 24px;
   padding: 20px 0;
   border-bottom: 1px solid #f0eff4;
 }
@@ -520,32 +522,65 @@ body {
   font-size: 22px;
   border-radius: var(--app-radius-md);
 }
-.episode-context-copy {
+.episode-context-info {
-  margin-left: 12px;
   display: flex;
+  min-width: 0;
   flex-direction: column;
   gap: 4px;
 }
-.episode-context-copy > span {
+
-  font-size: 9px;
+.episode-context-label {
-  color: #a7a5b3;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+  line-height: 1.4;
 }
-.episode-context-copy b {
+
-  font-size: 13px;
+.episode-context-title {
+  overflow: hidden;
+  color: var(--el-text-color-primary);
+  font-size: 16px;
+  font-weight: 650;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.episode-context-copy small {
+
-  font-size: 9px;
+.episode-context-count {
-  color: #aaa8b6;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+  line-height: 1.4;
 }
+
+.episode-switcher {
+  display: flex;
+  flex: 0 0 clamp(320px, 32vw, 360px);
+  width: clamp(320px, 32vw, 360px);
+  min-width: 0;
+  flex-direction: column;
+  gap: 6px;
+}
+
 .drama-select {
-  margin-left: auto;
+  width: 100%;
-  width: 215px;
 }
 .drama-select .el-input__wrapper {
   box-shadow: 0 0 0 1px #efedf3 inset !important;
 }
 .drama-select .el-input__inner {
-  font-size: 10px;
+  font-size: 13px;
+}
+
+@media (max-width: 768px) {
+  .episode-context {
+    align-items: stretch;
+    gap: 14px;
+    flex-direction: column;
+  }
+
+  .episode-switcher {
+    flex-basis: auto;
+    width: 100%;
+  }
 }
 .episode-toolbar {
   display: flex;

src/views/contentManagement/EpisodeManagementView.vue

@@ -236,16 +236,31 @@ onMounted(async () => {
     ></div
   >
   <section class="panel episode-panel">
-    <div class="episode-context"
+    <div class="episode-context">
-      ><div class="episode-context-copy"
+      <div class="episode-context-info">
-        ><span>选择短剧</span><b>{{ selectedDrama?.title || '暂无短剧' }}</b></div
+        <span class="episode-context-label">当前短剧</span>
-      ><el-select v-model="selectedDramaId" class="drama-select" @change="onDramaChange"
+        <b class="episode-context-title">{{ selectedDrama?.title || '暂无短剧' }}</b>
-        ><el-option
+        <small class="episode-context-count"
-          v-for="item in dramas"
+          >共 {{ selectedDrama?.episodes ?? episodes.length }} 集</small
-          :key="item.id"
+        >
-          :label="`${item.title}（${item.episodes} 集）`"
+      </div>
-          :value="item.id" /></el-select
+      <div class="episode-switcher">
-    ></div>
+        <span class="episode-context-label">切换短剧</span>
+        <el-select
+          v-model="selectedDramaId"
+          class="drama-select"
+          placeholder="请选择短剧"
+          @change="onDramaChange"
+        >
+          <el-option
+            v-for="item in dramas"
+            :key="item.id"
+            :label="`${item.title}（${item.episodes} 集）`"
+            :value="item.id"
+          />
+        </el-select>
+      </div>
+    </div>
     <div class="episode-toolbar"
       ><div
         ><h2>剧集列表（{{ episodes.length }}）</h2><p>按列表顺序播放</p></div