七十二家房客-观看平台v162

src/components/qishier/QishierShowcase.vue

@@ -3,7 +3,7 @@
     <div class="section-head d-flex justify-content-between align-items-center mb-3">
       <div>
         <h4 class="section-title mb-1">推荐展示</h4>
-        <div class="section-subtitle">基于当前节目数据生成展示内容</div>
+        <!--<div class="section-subtitle">基于当前节目数据生成展示内容</div>-->
       </div>
       <button
           class="btn btn-sm btn-outline-secondary d-none d-lg-inline-flex"

src/views/QishierPlayer.vue

@@ -1,71 +1,98 @@
 <template>
   <div class="container-fluid qishier-page py-3">
     <div class="row g-3">
+      <!-- 顶部标题区 -->
       <div class="col-12">
         <div class="top-card card border-0 shadow-sm">
-          <div class="card-body d-flex flex-wrap justify-content-between align-items-center gap-3">
+          <div class="card-body d-flex flex-wrap justify-content-between align-items-start gap-3">
+            <div class="page-main-info">
+              <!--<div class="page-tag mb-2">在线播放</div>-->
 
-            <div>
+              <template v-if="currentEpisode">
-              <h2 class="mb-2 page-title">{{ columnInfo.name || '七十二家房客播放器' }}</h2>
+                <div class="episode-badges mb-2">
-              <div class="page-subtitle">
+                  <span class="info-badge playing">当前播放</span><span class="mx-2">｜</span>
-                共 {{ allEpisodeList.length }} 条 ｜ 最后更新：{{ updatedAtText }}
+                  <span class="info-badge year">发布时间：{{ formatDate(currentEpisode.releasedAt) }}</span>
-              </div>
+                  <span class="info-badge year">时长：{{ formatDuration(currentEpisode.timeLength) }}</span>
-
-            </div>
-
-            <div class="d-flex flex-wrap gap-2">
-              <div class="card-body d-flex flex-wrap gap-2 align-items-center">
-                <button class="btn btn-outline-dark btn-sm" @click="playPrevEpisode" :disabled="!hasPrevEpisode">
-                  上一集
-                </button>
-
-                <button class="btn btn-outline-dark btn-sm" @click="playNextEpisode" :disabled="!hasNextEpisode">
-                  下一集
-                </button>
-
-                <div class="form-check form-switch ms-2">
-                  <input id="autoNext" v-model="autoNext" class="form-check-input" type="checkbox" />
-                  <label class="form-check-label" for="autoNext">自动下一集</label>
                 </div>
 
-                <select v-model="playMode" class="form-select form-select-sm mode-select">
+                <h2 class="mb-2 page-title">{{ currentEpisode.title }}</h2>
-                  <option value="asc">顺序播放</option>
-                  <option value="desc">倒序播放</option>
-                </select>
-              </div>
-              <button class="btn btn-dark btn-sm px-3" @click="handleRefresh">刷新数据</button>
-              <button class="btn btn-outline-dark btn-sm px-3" @click="openGitRepo">git仓库：v1.6</button>
-              <button class="btn btn-warning btn-sm px-3" @click="openSource">数据来源：荔枝网</button>
 
+
+              </template>
+
+              <template v-else>
+                <h2 class="mb-2 page-title">{{ columnInfo.name || '七十二家房客播放器' }}</h2>
+                <div class="episode-meta mb-2">正在加载节目数据...</div>
+              </template>
+
+              <div class="page-subtitle">
+                共 {{ allEpisodeList.length }} 条
+                <span class="mx-2">｜</span>
+                最后更新：{{ updatedAtText }}
+              </div>
+            </div>
+
+            <div class="header-actions d-flex flex-wrap gap-2">
+              <button class="btn btn-dark btn-sm px-3" @click="handleRefresh">
+                刷新数据
+              </button>
+
+              <button class="btn btn-outline-dark btn-sm px-3" @click="openSource">
+                数据来源
+              </button>
+
+              <button class="btn btn-outline-primary btn-sm px-3" @click="openGitRepo">
+                Git仓库：v162
+              </button>
             </div>
           </div>
         </div>
       </div>
 
-      <!--<div class="col-12">-->
+      <!-- 控制区 -->
-      <!--  <div class="toolbar-card card border-0 shadow-sm">-->
+      <div class="col-12">
-      <!--    <div class="card-body d-flex flex-wrap gap-2 align-items-center">-->
+        <div class="control-card card border-0 shadow-sm">
-      <!--      <button class="btn btn-outline-dark btn-sm" @click="playPrevEpisode" :disabled="!hasPrevEpisode">-->
+          <div class="card-body d-flex flex-wrap justify-content-between align-items-center gap-3">
-      <!--        上一集-->
+            <div class="d-flex flex-wrap gap-2 align-items-center">
-      <!--      </button>-->
+              <button class="btn btn-outline-dark btn-sm" @click="playPrevEpisode" :disabled="!hasPrevEpisode">
+                上一集
+              </button>
 
-      <!--      <button class="btn btn-outline-dark btn-sm" @click="playNextEpisode" :disabled="!hasNextEpisode">-->
+              <button class="btn btn-outline-dark btn-sm" @click="playNextEpisode" :disabled="!hasNextEpisode">
-      <!--        下一集-->
+                下一集
-      <!--      </button>-->
+              </button>
 
-      <!--      <div class="form-check form-switch ms-2">-->
+              <div class="form-check form-switch ms-1">
-      <!--        <input id="autoNext" v-model="autoNext" class="form-check-input" type="checkbox" />-->
+                <input id="autoNext" v-model="autoNext" class="form-check-input" type="checkbox" />
-      <!--        <label class="form-check-label" for="autoNext">自动下一集</label>-->
+                <label class="form-check-label small" for="autoNext">自动下一集</label>
-      <!--      </div>-->
+              </div>
+            </div>
 
-      <!--      <select v-model="playMode" class="form-select form-select-sm mode-select">-->
+            <div class="d-flex flex-wrap gap-2 align-items-center">
-      <!--        <option value="asc">顺序播放</option>-->
+              <select v-model="playMode" class="form-select form-select-sm mode-select">
-      <!--        <option value="desc">倒序播放</option>-->
+                <option value="asc">顺序播放</option>
-      <!--      </select>-->
+                <option value="desc">倒序播放</option>
-      <!--    </div>-->
+              </select>
-      <!--  </div>-->
-      <!--</div>-->
 
+              <select v-model="selectedYear" class="form-select form-select-sm filter-select">
+                <option value="all">全部年份</option>
+                <option v-for="year in years" :key="year" :value="String(year)">
+                  {{ year }}年
+                </option>
+              </select>
+
+              <select v-model="selectedMonth" class="form-select form-select-sm filter-select">
+                <option value="all">全部月份</option>
+                <option v-for="month in months" :key="month" :value="String(month)">
+                  {{ month }}月
+                </option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 左侧播放器 -->
       <div class="col-xl-8 col-lg-7">
         <div class="content-card card border-0 shadow-sm">
           <div class="card-body">
@@ -76,15 +103,21 @@
                 @ended-next="handleEndedNext"
             />
 
-            <div v-if="currentEpisode" class="episode-info mt-3">
+            <!--<div v-if="currentEpisode" class="episode-info-card mt-3">-->
-              <div class="episode-badge mb-2">当前播放</div>
+            <!--  <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">-->
-              <h4 class="mb-2 episode-title">{{ currentEpisode.title }}</h4>
+            <!--    <div class="flex-grow-1">-->
-              <div class="episode-meta">
+            <!--      <div class="episode-badges mb-2">-->
-                发布时间：{{ formatDate(currentEpisode.releasedAt) }}
+            <!--        <span class="info-badge playing">当前播放</span>-->
-                <span class="mx-2">｜</span>
+            <!--        <span class="info-badge year">{{ selectedYear === 'all' ? '全部年份' : `${selectedYear}年` }}</span>-->
-                时长：{{ formatDuration(currentEpisode.timeLength) }}
+            <!--        <span class="info-badge month">{{ selectedMonth === 'all' ? '全部月份' : `${selectedMonth}月` }}</span>-->
-              </div>
+            <!--      </div>-->
-            </div>
+
+            <!--      <div class="episode-meta">-->
+            <!--        你可以使用上方筛选快速定位剧集，播放器会自动记录上次观看位置。-->
+            <!--      </div>-->
+            <!--    </div>-->
+            <!--  </div>-->
+            <!--</div>-->
 
             <div v-if="errorMsg" class="alert alert-danger mt-3 mb-0">
               {{ errorMsg }}
@@ -95,12 +128,11 @@
                 :episodes="showcaseEpisodes"
                 @select="playEpisode"
             />
-
-            <!--<QishierProjectLinks />-->
           </div>
         </div>
       </div>
 
+      <!-- 右侧列表 -->
       <div class="col-xl-4 col-lg-5">
         <QishierEpisodeList
             :episodes="displayEpisodeList"
@@ -116,13 +148,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, reactive, ref, watch } from 'vue'
 import { getAllQishierList, refreshQishierCache, type EpisodeData } from '@/api/qishier'
 import { getCurrentEpisodeId, saveCurrentEpisodeId } from '@/utils/playHistory'
 import QishierVideoPlayer from '@/components/qishier/QishierVideoPlayer.vue'
 import QishierEpisodeList from '@/components/qishier/QishierEpisodeList.vue'
 import QishierShowcase from '@/components/qishier/QishierShowcase.vue'
-import QishierProjectLinks from '@/components/qishier/QishierProjectLinks.vue'
 
 const columnInfo = reactive({
   name: '',
@@ -151,16 +182,12 @@ const displayEpisodeList = computed(() => {
 
   if (selectedYear.value !== 'all') {
     const year = Number(selectedYear.value)
-    list = list.filter(
+    list = list.filter(item => new Date(item.releasedAt).getFullYear() === year)
-        item => new Date(item.releasedAt).getFullYear() === year
-    )
   }
 
   if (selectedMonth.value !== 'all') {
     const month = Number(selectedMonth.value)
-    list = list.filter(
+    list = list.filter(item => new Date(item.releasedAt).getMonth() + 1 === month)
-        item => new Date(item.releasedAt).getMonth() + 1 === month
-    )
   }
 
   if (playMode.value === 'desc') {
@@ -189,6 +216,10 @@ function openSource() {
   window.open('https://www1.gdtv.cn/', '_blank')
 }
 
+function openGitRepo() {
+  window.open('https://git.a-hxin.cn/ahxin/72QishierPlayer.git', '_blank')
+}
+
 function handlePlayerError(message: string) {
   errorMsg.value = message
 }
@@ -201,8 +232,28 @@ function getEpisodeYear(item: EpisodeData) {
   return String(new Date(item.releasedAt).getFullYear())
 }
 
-function openGitRepo() {
+function getEpisodeMonth(item: EpisodeData) {
-  window.open('https://git.a-hxin.cn/ahxin/72QishierPlayer.git', '_blank')
+  return String(new Date(item.releasedAt).getMonth() + 1)
+}
+
+function rebuildMonthsByYear() {
+  let source = [...allEpisodeList.value]
+
+  if (selectedYear.value !== 'all') {
+    const year = Number(selectedYear.value)
+    source = source.filter(item => new Date(item.releasedAt).getFullYear() === year)
+  }
+
+  months.value = [
+    ...new Set(source.map(item => new Date(item.releasedAt).getMonth() + 1))
+  ].sort((a, b) => a - b)
+
+  if (selectedMonth.value !== 'all') {
+    const currentMonth = Number(selectedMonth.value)
+    if (!months.value.includes(currentMonth)) {
+      selectedMonth.value = 'all'
+    }
+  }
 }
 
 async function fetchAllEpisodes() {
@@ -221,19 +272,15 @@ async function fetchAllEpisodes() {
       return
     }
 
-    months.value = [
+    rebuildMonthsByYear()
-      ...new Set(
-          allEpisodeList.value.map(item =>
-              new Date(item.releasedAt).getMonth() + 1
-          )
-      )
-    ].sort((a, b) => a - b)
 
     const savedEpisodeId = getCurrentEpisodeId()
     const savedEpisode = allEpisodeList.value.find(item => item.id === savedEpisodeId)
 
     if (savedEpisode) {
       selectedYear.value = getEpisodeYear(savedEpisode)
+      rebuildMonthsByYear()
+      selectedMonth.value = getEpisodeMonth(savedEpisode)
       currentEpisode.value = savedEpisode
       return
     }
@@ -241,6 +288,8 @@ async function fetchAllEpisodes() {
     const firstEpisode = allEpisodeList.value[0]
     if (firstEpisode) {
       selectedYear.value = getEpisodeYear(firstEpisode)
+      rebuildMonthsByYear()
+      selectedMonth.value = getEpisodeMonth(firstEpisode)
       currentEpisode.value = firstEpisode
     }
   } catch (error: any) {
@@ -262,6 +311,8 @@ async function handleRefresh() {
 async function playEpisode(item: EpisodeData) {
   currentEpisode.value = item
   selectedYear.value = getEpisodeYear(item)
+  rebuildMonthsByYear()
+  selectedMonth.value = getEpisodeMonth(item)
   errorMsg.value = ''
   saveCurrentEpisodeId(item.id)
 }
@@ -304,6 +355,10 @@ function formatDuration(seconds: number): string {
   return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`
 }
 
+watch(selectedYear, () => {
+  rebuildMonthsByYear()
+})
+
 onMounted(() => {
   void fetchAllEpisodes()
 })
@@ -319,16 +374,31 @@ onMounted(() => {
 }
 
 .top-card,
-.toolbar-card,
+.control-card,
 .content-card {
-  border-radius: 18px;
+  border-radius: 20px;
   background: rgba(255, 255, 255, 0.92);
   backdrop-filter: blur(8px);
 }
 
+.page-main-info {
+  min-width: 0;
+}
+
+.page-tag {
+  display: inline-block;
+  padding: 5px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #8a5a00;
+  background: rgba(255, 193, 7, 0.18);
+}
+
 .page-title {
-  font-weight: 700;
+  font-weight: 800;
   color: #212529;
+  letter-spacing: -0.02em;
 }
 
 .page-subtitle {
@@ -336,31 +406,77 @@ onMounted(() => {
   font-size: 14px;
 }
 
+.header-actions {
+  flex-shrink: 0;
+}
+
 .mode-select {
-  width: 140px;
+  width: 132px;
 }
 
-.episode-info {
+.filter-select {
-  padding: 2px 2px 6px;
+  width: 120px;
 }
 
-.episode-badge {
+.episode-info-card {
-  display: inline-block;
+  padding: 16px 18px;
-  padding: 4px 10px;
+  border-radius: 18px;
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fb 100%);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.episode-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.info-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 5px 10px;
   border-radius: 999px;
-  background: rgba(255, 193, 7, 0.18);
-  color: #9a6a00;
   font-size: 12px;
   font-weight: 600;
 }
 
+.info-badge.playing {
+  background: rgba(255, 193, 7, 0.18);
+  color: #9a6a00;
+}
+
+.info-badge.year {
+  background: rgba(13, 110, 253, 0.1);
+  color: #0d6efd;
+}
+
 .episode-title {
   color: #212529;
-  font-weight: 700;
+  font-weight: 800;
+  line-height: 1.45;
 }
 
 .episode-meta {
   color: #6c757d;
   font-size: 14px;
 }
+
+.episode-actions {
+  flex-shrink: 0;
+}
+
+@media (max-width: 991px) {
+  .header-actions {
+    width: 100%;
+  }
+
+  .episode-info-card {
+    padding: 14px;
+  }
+
+  .episode-actions {
+    width: 100%;
+  }
+}
 </style>
+近期最新的集数 这个新出的集数颜色那里 改成不是黄色 我想要好看点的颜色 还有 页面太空白了 别整那么空了，看着难受 clearfix