fix player bug and update UI

2026-04-13 18:47:29 +08:00 · 2026-04-08 19:28:58 +08:00
parent ee4d997066
commit 49312e60b8
10 changed files with 166 additions and 107 deletions
--- a/client/src/components/index/FilmList.vue
+++ b/client/src/components/index/FilmList.vue
@@ -116,6 +116,7 @@ watchEffect(() => {

 </script>

+<!--公共样式-->
 <style scoped>
 :deep(.el-empty) {
  --el-empty-fill-color-1: rgba(155, 73, 231, 0.72);
@@ -136,14 +137,11 @@ watchEffect(() => {
 .card {
  width: 100%;
  aspect-ratio: 3/4.1;
-  /*  padding: 1.9rem;*/
  padding: 0;
  background: #f5f5f5;
  position: relative;
  display: flex;
  align-items: flex-end;
-  box-shadow: 0 7px 20px rgba(43, 8, 37, 0.2);
-  /*  transition: all 0.3s ease-out;*/
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 0.1s;
  overflow: hidden;
 }
@@ -221,6 +219,7 @@ watchEffect(() => {
 /*Hover*/
 .card:active, .card:hover {
  transform: translateY(-2%);
+  box-shadow: 0 6px 18px rgba(255,255,255, 0.35);
 }

 .card:hover .card-img {
@@ -256,6 +255,7 @@ watchEffect(() => {
 }
 </style>

+<!--双端适配-->
 <style scoped>
 /*wrap*/
@media (max-width: 768px) {
--- a/client/src/components/index/Header.vue
+++ b/client/src/components/index/Header.vue
@@ -25,7 +25,7 @@
          <b style="font-size: 22px;" class="iconfont icon-history"/>
        </a>
        <Transition name="fade-slide" duration="300">
-          <div v-if="data.historyFlag" class="dropdown-container">
+          <div v-if="data.historyFlag"  class="dropdown-container" >
            <div class="history-h">
              <b class="iconfont icon-record history-h-icon"/>
              <span class="history-h-title">历史观看记录</span>
@@ -223,18 +223,19 @@ onMounted(() => {

  /*搜索栏*/
  .search_group {
-    width: 80%;
-    margin: 10px auto;
+    width: 60%;
+    margin: 10px 0;
    display: flex;
+    justify-content: start;
  }

  .search {
-    flex: 10;
-    background-color: #2e2e2e !important;
-    border: none !important;
+    width: 80%;
+    background-color: transparent;
+    border: 1px solid #ffffff1a;
    height: 40px;
    border-radius: 6px 0 0 6px;
-    padding-left: 20px;
+    padding-left: 12px;
    color: #c9c4c4;
    font-size: 15px;
    font-weight: bold;
@@ -242,6 +243,7 @@ onMounted(() => {
  }

  .search::placeholder {
+    flex: 1;
    font-size: 15px;
    color: #999999;
  }
@@ -253,13 +255,16 @@ onMounted(() => {
  .search_group button {
    flex: 1;
    margin: 0;
-    background-color: #2e2e2e;
-    color: rgb(171, 44, 68);
-    border: none !important;
+    background-color: transparent;
+    border:  1px solid #ffffff1a;
+    border-left: none;
+    color: #D96868;
    height: 40px;
    border-radius: 0 6px 6px 0;
    font-size: 20px;
-    /*margin-bottom: 2px*/
+  }
+  .search_group button:hover {
+    background: rgb(0 0 0 / 0.15);
  }

  .nav_right {
@@ -345,13 +350,12 @@ onMounted(() => {
    display: inline-block;
    position: absolute;
    left: 22px;
-    border: 2px solid orangered;
-    background: rgba(220, 59, 182, 0.97);
+    border: 2px solid #D96868;
+    background: #FF88BA;
    border-radius: 50%;
    top: 15px;
  }

-
  .history-c-item .history-c-item-t {
    width: 100%;
    text-align: left !important;
@@ -382,7 +386,8 @@ onMounted(() => {
  .history-h-icon {
    flex: 1;
    font-size: 24px;
-    color: orangered;
+    color: #D96868;
+    margin-top: 8px;
  }

  .history-h-icon::before {
@@ -391,8 +396,9 @@ onMounted(() => {

  .history-h-title {
    flex: 3;
-    text-align: left;
+    text-align: center;
    font-size: 18px;
+    line-height: 60px;
  }

  .history-del {
@@ -422,7 +428,7 @@ onMounted(() => {
    z-index: 1000;
    border-radius: 8px;
    overflow: hidden;
-    background: rgba(0, 0, 0, 0.85);
+    background: rgba(0, 0, 0, 0.65);
    transform: translate3d(-50%, 0, 0);

  }
--- a/client/src/utils/cookie.ts
+++ b/client/src/utils/cookie.ts
@@ -1,6 +1,7 @@

 const COOKIE_KEY_MAP = {
-    'FILM_HISTORY':'filmHistory'
+    'FILM_HISTORY':'filmHistory',
+    'FILM_Favorites': `filmFavorites`,
 }

 const cookieUtil =
--- a/client/src/views/index/FilmDetails.vue
+++ b/client/src/views/index/FilmDetails.vue
@@ -26,7 +26,7 @@
    </div>
    <!-- pc端title-->
    <div class="title hidden-sm-and-down ">
-      <a class="picture" href="" :style="{backgroundImage: `url('${data.detail.picture}')`}"></a>
+      <a class="picture" href="" :style="{backgroundImage: `url('${data.detail.picture}')`}"><span class="full-c" /></a>
      <h2>{{ data.detail.name }}</h2>
      <ul class="tags">
        <li class="t_c">
@@ -34,7 +34,7 @@
            <el-icon>
              <Promotion/>
            </el-icon>
-            {{ data.detail.cName }}
+            {{ data.detail.cName.replace(/\s/g, '') ? data.detail.cName : '暂无分类' }}
          </a>
        </li>
        <li v-if="data.detail.classTag">
@@ -43,16 +43,15 @@
        <li>{{ data.detail.year }}</li>
        <li>{{ data.detail.area }}</li>
      </ul>
-      <p><span>导演:</span> {{ data.detail.director }}</p>
-      <p><span>主演:</span> {{ data.detail.actor }}</p>
+      <p><span>导演:</span> {{ data.detail.director.replace(/\s/g, '') ? data.detail.director : '未知' }}</p>
+      <p><span>主演:</span> {{ data.detail.actor.replace(/\s/g, '') ? data.detail.actor : '未知' }}</p>
      <p><span>上映:</span> {{ data.detail.releaseDate }}</p>
      <p v-if="data.detail.remarks"><span>连载:</span>{{ data.detail.remarks }}</p>
      <p><span>评分:</span><b id="score">{{ data.detail.dbScore }}</b></p>
      <div class="cus_wap">
        <p style="min-width: 40px"><span>剧情:</span></p>
        <p ref="textContent" class="text_content">
-          <el-button v-if="`${data.detail.content}`.length > 140" class="multi_text"
-                     style="color:#a574b7;"
+          <el-button v-if="`${data.detail.content}`.length > 140" class="multi_text" style="color:#a574b7;"
                     @click="showContent(multiBtn.state)" link>{{ multiBtn.text }}
          </el-button>
          <span class="cus_info" v-html="data.detail.content"></span>
@@ -66,6 +65,12 @@
          </el-icon>
          立即播放
        </el-button>
+        <el-button color="#9b49e7" class="player" size="large" round plain>
+          <el-icon>
+            <Star/>
+          </el-icon>
+          收藏
+        </el-button>
      </p>
    </div>
    <!--播放列表-->
@@ -99,7 +104,7 @@ import {useRouter} from "vue-router";
 import {onBeforeMount, reactive, ref,} from "vue";
 import {ApiGet} from "../../utils/request";
 import {ElMessage} from 'element-plus'
-import {Promotion, CaretRight} from "@element-plus/icons-vue";
+import {Promotion, CaretRight, Star} from "@element-plus/icons-vue";
 import RelateList from "../../components/index/RelateList.vue";

 // 获取路由对象
@@ -219,21 +224,29 @@ onBeforeMount(() => {
  }

  .picture_mt {
-    max-height: 180px;
-    min-width: 30%;
+    min-width: 35%;
+    aspect-ratio: 3/4;
    margin-right: 12px;
    border-radius: 5px;
    background-size: cover;
  }

+  .picture_mt:active {
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
+  }
+
  .title_mt_right {
    flex: 1;
    text-align: left;
  }

  .title_mt_right h3 {
+    max-width: 90%;
    font-size: 14px;
    margin: 0 0 5px 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
  }

  .title_mt_right p {
@@ -303,15 +316,48 @@ onBeforeMount(() => {

 .picture {
  position: absolute;
-  width: 190px;
-  height: 270px;
+  width: 220px;
+  aspect-ratio: 3/4;
  right: 30px;
  top: 30px;
  border-radius: 8px;
  background-size: cover;
-
 }

+.picture:hover {
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
+}
+
+.picture .full-c {
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.full-c::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -30%;
+  width: 30%;
+  height: 100%;
+  opacity: 0;
+  background: linear-gradient(
+      to right,
+      rgba(255, 255, 255, 0) 0%,
+      rgb(255, 255, 255, 0.5) 50%,
+      rgba(255, 255, 255, 0) 100%
+  );
+  transform: skewX(-25deg);
+}
+
+.full-c:hover::before {
+  left: 130%;
+  transition: all 0.6s ease-in-out;
+  opacity: 1;
+}

 .tags {
  list-style-type: none;
@@ -332,7 +378,7 @@ onBeforeMount(() => {
 }

 .tags > .t_c {
-  background: rgba(155, 73, 231, 0.72);
+  background: linear-gradient(#9b49e7, #9b49e7bf);
  margin-left: 0;
 }

@@ -401,5 +447,9 @@ onBeforeMount(() => {
  margin-right: 10px;
 }

+.el-icon {
+  margin-right: 3px;
+}
+
 </style>

--- a/client/src/views/index/Play.vue
+++ b/client/src/views/index/Play.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="player_area" v-show="data.loading">
-    <div id="player-full" />
-    <div ref="playerContainer" class="player_container" />
+    <div id="player-full"/>
+    <div ref="playerContainer" class="player_container"/>
    <div class="current_play_info">
      <div class="play_info_left">
        <h3 class="current_play_title"><a
@@ -11,10 +11,8 @@
            <el-icon>
              <Promotion/>
            </el-icon>
-            {{ data.detail.cName }}</a>
-          <span>{{
-              data.detail.classTag ? data.detail.classTag.replaceAll(',', '/') : '未知'
-            }}</span>
+            {{ data.detail.cName.replace(/\s/g, '') ? data.detail.cName : '暂无分类' }}</a>
+          <span>{{ data.detail.classTag ? data.detail.classTag.replaceAll(',', '/') : '未知' }}</span>
          <span class="hidden-sm-and-down">{{ data.detail.year }}</span>
          <span class="hidden-sm-and-down">{{ data.detail.area }}</span>
        </div>
@@ -170,9 +168,7 @@ const playNext = () => {
    return
  }
  if (data.autoplay) {
-    setTimeout(() => {
-      playChange({sourceId: data.currentTabId, episodeIndex: data.current.index + 1, target: ''})
-    }, 100)
+    playChange({sourceId: data.currentTabId, episodeIndex: data.current.index + 1, target: ''})
  }
 }

@@ -261,7 +257,7 @@ onBeforeMount(() => {
        fetchOptions: {mode: 'cors'},
        targetLatency: 10, // 直播目标延迟，默认 10 秒
        maxLatency: 20, // 直播允许的最大延迟，默认 20 秒
-        preloadTime: 100 ,// 默认值
+        preloadTime: 100,// 默认值
        disconnectTime: 0, // 直播断流时间，默认 0 秒，（独立使用时等于 maxLatency）
        // preloadTime: 30 // 默认值
      },
@@ -289,15 +285,24 @@ onBeforeMount(() => {
      if (currentTime) {
        mPlayer.currentTime = currentTime
      }
+      // 播放器准备就绪后重置下一集按钮的click为自己的方法
+      mPlayer.getPlugin('playNext').nextHandler = playNext
+    })
+    mPlayer.on(Events.PLAY, () => {
+      let playBtn = mPlayer.root.querySelector('.xgplayer-start')
+      if (playBtn) {
+        playBtn.style.display = 'none'
+      }
    })
    // 播放完成事件
    mPlayer.on(Events.ENDED, () => {
      data.autoplay && playNext()
    })
+    // 播放器url发生变化时触发
    // 下一集按钮点击事件
-    mPlayer.on(Events.PLAYNEXT, () => {
-      playNext()
-    })
+    // mPlayer.on(Events.PLAYNEXT, (url:any) => {
+    //   playNext()
+    // })
  })
 })

@@ -308,20 +313,14 @@ let mPlayer: any = null
 // 监测播放器数据信息变化
 watch(data.options, (newVal) => {
  if (mPlayer) {
-    mPlayer.pause();
+    mPlayer.pause()
    mPlayer.currentTime = 0
-    mPlayer.src = newVal.url
-    // mPlayer.load()
-    mPlayer.play().then(()=>{
-      let playBtn = mPlayer.root.querySelector('.xg-icon-play')
-      if (playBtn) {
-        playBtn.style.display = 'none'
-      }
-    })
+    mPlayer.switchURL(data.options.url)
  }
 })
 // 自定义播放列表插件
 const {POSITIONS} = Plugin
+
 class playListPlugin extends Plugin {
  // 插件的名称，将作为插件实例的唯一key值
  static get pluginName() {
@@ -372,9 +371,9 @@ class playListPlugin extends Plugin {
        // 播放后自动收起列表（可选体验优化）
        this.toggleList()
      }
-      el.addEventListener('wheel', (e:any)=> {
-          e.preventDefault()
-          this.listContainer && (this.listContainer.scrollTop += e.deltaY)
+      el.addEventListener('wheel', (e: any) => {
+        e.preventDefault()
+        this.listContainer && (this.listContainer.scrollTop += e.deltaY)
      });
      this.listContainer && this.listContainer.appendChild(el);
    })
@@ -384,7 +383,6 @@ class playListPlugin extends Plugin {
  afterPlayerInit() {
    // TODO 播放器调用start初始化播放源之后的逻辑
    this.bind('click', (e: any) => {
-      console.log('---------------------------------click')
      e.stopPropagation(); // 阻止冒泡
      this.toggleList();
    })
@@ -410,20 +408,16 @@ class playListPlugin extends Plugin {
    if (this.listContainer) {
      const isHidden = (this.listContainer.style.display == 'none' || this.listContainer.style.display == '')
      this.listContainer.style.display = isHidden ? 'block' : 'none'
-      let mobilePlugin = mPlayer.getPlugin('mobile');
-      if (isHidden) {
-        // console.log(mPlayer.plugins)
-        // console.log(mPlayer.getPlugin('cssfullscreen'))
-        // mPlayer.getPlugin('cssfullscreen').show();
-        // mobilePlugin.disable();
-      } else {
-        // mPlayer.getPlugin('cssfullscreen').hide();
-        // mobilePlugin.enable();
-      }
+      // let mobilePlugin = mPlayer.getPlugin('mobile');
    }
  }

  afterCreate() {
+    // 播放器数据加载完成后重新渲染列表数据
+    this.on([Events.LOADED_DATA], () => {
+      // console.log(`----------------------------------`,data.current.index)
+      this.renderListItems()
+    })
  }

  destroy() {
@@ -442,7 +436,7 @@ class playListPlugin extends Plugin {
 /*播放容器*/
 .player_container {
  width: 100%;
-  padding-top: 56.29%!important;
+  padding-top: 56.29% !important;
  aspect-ratio: 16 / 9;
  margin: 0;
  position: relative;
@@ -450,12 +444,14 @@ class playListPlugin extends Plugin {
  display: flex;
  box-shadow: 3px 3px 12px rgba(255, 255, 255, 0.2);
 }
+
 .player_area .xgplayer-is-fullscreen {
  padding-top: 0 !important;
 }
+
 /*进度条颜色*/

-.xgplayer .xgplayer-progress-played,.xg-mini-progress xg-mini-progress-played {
+.xgplayer .xgplayer-progress-played, .xg-mini-progress xg-mini-progress-played {
  background: linear-gradient(-90deg, #00EAEA80 0%, #E337F780 100%);
 }

@@ -466,38 +462,45 @@ class playListPlugin extends Plugin {
  font-size: 16px;
  line-height: 40px;
 }
+
 .xgplayer-playlist-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
 }
+
 .xgplayer-playnext .xgplayer-icon svg {
  width: 15px;
 }
+
 .xgplayer xg-icon:not(.xgplayer-playnext) svg {
  width: 20px;
 }
-.xgplayer .xgplayer-progress-btn{
+
+.xgplayer .xgplayer-progress-btn {
  width: 10px;
  height: 10px;
  border-radius: 10px;
 }
-.xgplayer .xgplayer-progress-btn:before{
+
+.xgplayer .xgplayer-progress-btn:before {
  width: 8px;
  height: 8px;
  border-radius: 8px;
 }
-.xgplayer .flex-controls .xg-inner-controls{
+
+.xgplayer .flex-controls .xg-inner-controls {
  bottom: 0;
 }

@media only screen and (orientation: landscape) {
-  .xgplayer-mobile.xgplayer-is-fullscreen .xg-top-bar, .xgplayer-mobile.xgplayer-is-fullscreen .xg-pos{
+  .xgplayer-mobile.xgplayer-is-fullscreen .xg-top-bar, .xgplayer-mobile.xgplayer-is-fullscreen .xg-pos {
    left: 3%;
    right: 3%;
  }
-  .xgplayer .xgplayer-playnext svg{
+
+  .xgplayer .xgplayer-playnext svg {
    width: 16px !important;
  }

@@ -591,8 +594,6 @@ class playListPlugin extends Plugin {
 }


-
-
 /*右侧播放源选择区域*/
 /*影片播放列表信息展示*/
 /*影片播放列表信息展示*/
@@ -630,10 +631,11 @@ class playListPlugin extends Plugin {

 /*适应小尺寸*/
@media (max-width: 768px) {
-  :deep(.xgplayer xg-start-inner){
-    border-radius: 50%!important;
-    background: rgba(0, 0, 0, .38)!important;
+  :deep(.xgplayer xg-start-inner) {
+    border-radius: 50% !important;
+    background: rgba(0, 0, 0, .38) !important;
  }
+
  .player_area {
    padding: 5px 10px;
  }
--- a/client/src/views/index/SearchFilm.vue
+++ b/client/src/views/index/SearchFilm.vue
@@ -2,7 +2,7 @@
  <div class="container">
    <div class="search_group">
      <div class="InputContainer">
-        <input  name="text" class="input" placeholder="输入关键字搜索 动漫,剧集,电影" v-model="data.search" @keydown="e=>{e.keyCode==13 && searchMovie()}" />
+        <input  class="input" placeholder="输入关键字搜索 动漫,剧集,电影" v-model="data.search" @keydown="e=>{e.keyCode==13 && searchMovie()}" />
        <div class="border" />
        <button class="micButton" @click="searchMovie">
          <svg viewBox="0 0 512 512" class="searchIcon"><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path>
--- a/film/data/nginx/html/assets/index-C9nyXTK_.js
+++ b/film/data/nginx/html/assets/index-C9nyXTK_.js
--- a/film/data/nginx/html/assets/index-CA_VfSzq.css
+++ b/film/data/nginx/html/assets/index-CA_VfSzq.css
--- a/film/data/nginx/html/assets/index-Kj7xWjhf.css
+++ b/film/data/nginx/html/assets/index-Kj7xWjhf.css
--- a/film/data/nginx/html/index.html
+++ b/film/data/nginx/html/index.html
@@ -11,8 +11,8 @@
    <meta charset="UTF-8"/>
    <title>(╥﹏╥)</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3992367_d9xdu8zk04f.css">
-  <script type="module" crossorigin src="/assets/index-BJUHGEn_.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-Kj7xWjhf.css">
+  <script type="module" crossorigin src="/assets/index-C9nyXTK_.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-CA_VfSzq.css">
 </head>
 <body>
    <div id="app"></div>