From 550a3cc02fcf9189b50f3ac6993276259f481623 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A2=E5=AE=87=E5=AE=81?= <DN8250@jsyyds.com>
Date: Tue, 22 Sep 2026 15:20:09 +0700
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/global.ts                          | 22 ++++++++++++++++---
 src/views/lldhome/index.vue                   |  7 ++++--
 src/views/shortVideo/index.vue                | 12 +++-------
 .../shortVideo/short-drama/HotDramaList.vue   | 16 +++++++++++++-
 4 files changed, 42 insertions(+), 15 deletions(-)

diff --git a/src/stores/global.ts b/src/stores/global.ts
index c214ff3..f3e78a5 100644
--- a/src/stores/global.ts
+++ b/src/stores/global.ts
@@ -1,6 +1,20 @@
 import { defineStore } from 'pinia';
 import HomeApi from '@/service/home';
 
+/** 主页固定注入的「热门短剧」tab(从短剧频道挪过来)，不走后端模块 */
+export const HOT_DRAMA_TAB_ID = '-120';
+
+/** 「热门短剧」固定排第二个：没有就插入，本地排序/抽屉拖动挪走了就统一挪回来 */
+const pinHotDrama = (list: Types.Home.HomeTabItem[]) => {
+  const result = list.filter((item) => item.id !== HOT_DRAMA_TAB_ID);
+  const hotDrama = list.find((item) => item.id === HOT_DRAMA_TAB_ID) || {
+    id: HOT_DRAMA_TAB_ID,
+    moduleName: '热门短剧',
+  };
+  result.splice(Math.min(1, result.length), 0, hotDrama as Types.Home.HomeTabItem);
+  return result;
+};
+
 export const useGlobalStore = defineStore({
   id: 'global',
   state: () => {
@@ -327,10 +341,12 @@ export const useGlobalStore = defineStore({
                 sortedArr.push(item);
               }
             });
-            this.homePageList = sortedArr;
+            this.homePageList = pinHotDrama(sortedArr);
           } else {
-            this.homePageList = homePage;
+            this.homePageList = pinHotDrama(homePage);
           }
+          // 默认选中「热门短剧」
+          this.activeIndex = this.homePageList.findIndex((item) => item.id === HOT_DRAMA_TAB_ID);
         }
         if (deepWeb) {
           const ids = (localStorage.getItem('darkNetPageIds') || '').split(',');
@@ -431,7 +447,7 @@ export const useGlobalStore = defineStore({
 
       switch (elType) {
         case 'home':
-          this.homePageList = arr;
+          this.homePageList = pinHotDrama(arr);
           break;
         case 'darkNet':
           this.darkNetPageList = arr;
diff --git a/src/views/lldhome/index.vue b/src/views/lldhome/index.vue
index fea74a6..3f40624 100644
--- a/src/views/lldhome/index.vue
+++ b/src/views/lldhome/index.vue
@@ -23,6 +23,8 @@
               <i v-if="showTabUpdateDot(item, index)" class="home-tab-red-dot" />
             </span>
           </template>
+          <!-- 热门短剧：从短剧频道挪过来的固定 tab -->
+          <HotDramaList v-if="item.id === HOT_DRAMA_TAB_ID" embedded />
           <!-- 模块普通海角系样式 : 1 -->
           <HomeItem
             :moduleId="item.id"
@@ -30,7 +32,7 @@
             :showType="item.showType"
             :type="item.type"
             :haiJiaoStyle="item.haiJiaoStyle"
-            v-if="[1].includes(item.showType)"
+            v-else-if="[1].includes(item.showType)"
             :pureVersion="item.pureVersion"
           />
           <!-- 最新 -->
@@ -65,11 +67,12 @@ export default {
 </script>
 <script lang="ts" setup>
 import { reactive, computed, onActivated, onDeactivated, nextTick, watch, onUnmounted, ref } from 'vue';
-import { useGlobalStore } from '@/stores/global';
+import { useGlobalStore, HOT_DRAMA_TAB_ID } from '@/stores/global';
 import { useRoute } from 'vue-router';
 import { setShowBackTopBtn } from '@/utils/homeCombinedFunc';
 import HomeItem from './components/HomeItem.vue';
 import Newest from './components/Newest.vue';
+import HotDramaList from '@/views/shortVideo/short-drama/HotDramaList.vue';
 import PaymentGuidePopup from '@/components/PaymentGuidePopup/index.vue';
 import { shouldShowHomeTabUpdateDot, markHomeTabViewed } from '@/utils/contentUpdateMarkers';
 import { usePaymentGuide } from '@/hooks/usePaymentGuide';
diff --git a/src/views/shortVideo/index.vue b/src/views/shortVideo/index.vue
index 026f109..54c0a56 100644
--- a/src/views/shortVideo/index.vue
+++ b/src/views/shortVideo/index.vue
@@ -21,7 +21,6 @@
     <!-- 抖音 = 原推荐流，逻辑保持不变 -->
     <RecommendItem :isActive="state.tabActive == 3" v-if="state.tabActive == 3" />
     <AiDramaFeed :isActive="state.tabActive == 4" v-else-if="state.tabActive == 4" />
-    <HotDramaList :isActive="state.tabActive == 5" v-else-if="state.tabActive == 5" />
     <!-- 评论弹窗：抖音 objType=video；短剧 objType=drama -->
     <CommentBox
       ref="commentRef"
@@ -42,7 +41,6 @@ export default {
 import { ref, reactive, nextTick, provide, computed } from 'vue';
 import RecommendItem from './recommendItem.vue';
 import AiDramaFeed from './short-drama/AiDramaFeed.vue';
-import HotDramaList from './short-drama/HotDramaList.vue';
 import liveItem from '@/views/lldlive/tabPage.vue';
 import { useRoute } from 'vue-router';
 import { useAppStore } from '@/stores/app';
@@ -53,8 +51,8 @@ const route = useRoute();
 
 const resolveTabActive = () => {
   const type = route.query.type ? Number(route.query.type) : 4;
-  // 原「最新」tab(value=2) 已下线，兜底到 AI短剧
-  if (type === 2) return 4;
+  // 原「最新」tab(value=2) 已下线、「热门短剧」(value=5) 已挪到主页，兜底到 AI短剧
+  if (type === 2 || type === 5) return 4;
   return type;
 };
 
@@ -77,10 +75,6 @@ const state = reactive({
       label: 'AI短剧',
       value: 4,
     },
-    {
-      label: '热门短剧',
-      value: 5,
-    },
   ],
   isCommentPopup: false,
   commentObjType: 'video',
@@ -151,7 +145,7 @@ provide('openCommentPopup', openCommentPopup);
       }
       .van-tab {
         font-size: 14px;
-        padding: 0 12px;
+        padding: 0 20px;
         flex: none;
       }
       .van-tab--active {
diff --git a/src/views/shortVideo/short-drama/HotDramaList.vue b/src/views/shortVideo/short-drama/HotDramaList.vue
index 2853667..1260378 100644
--- a/src/views/shortVideo/short-drama/HotDramaList.vue
+++ b/src/views/shortVideo/short-drama/HotDramaList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="hot-drama-list">
+  <div class="hot-drama-list" :class="{ embedded }">
     <div class="list-header">
       <div class="sort-bar">
         <template v-for="(item, index) in sortOptions" :key="item.value">
@@ -38,6 +38,8 @@ import { useHotDramaList } from './hooks/useHotDramaList';
 
 defineProps<{
   isActive?: boolean;
+  /** 嵌在主页 tab 里：跟随主页子页高度与背景，不再给短剧频道顶部菜单让位 */
+  embedded?: boolean;
 }>();
 
 const router = useRouter();
@@ -129,5 +131,17 @@ onMounted(() => {
     flex-wrap: wrap;
     gap: 12px 7px;
   }
+
+  &.embedded {
+    position: relative;
+    inset: auto;
+    height: calc(100vh - 44px * 2 - 55px);
+    padding-top: 0;
+    background: transparent;
+
+    .list-header {
+      background: transparent;
+    }
+  }
 }
 </style>