打包优化

package.json

@@ -13,12 +13,12 @@
     "core-js": "3.21.1",
     "dayjs": "1.11.0",
     "gl-matrix": "3.4.3",
-    "lodash-es": "^4.17.21",
     "mitt": "3.0.0",
     "mobile-select": "1.1.2",
     "mockjs": "^1.1.0",
     "pinia": "^2.1.7",
     "pinyin": "2.11.1",
+    "vite-plugin-compression": "^0.5.1",
     "vue": "3.4.21",
     "vue-masonry": "0.16.0",
     "vue-router": "4.3.0",
@@ -36,6 +36,7 @@
     "unplugin-vue-define-options": "^1.4.1",
     "unplugin-vue-macros": "^2.7.10",
     "vite": "4.5.2",
-    "vite-plugin-cdn-import": "0.3.5"
+    "vite-plugin-cdn-import": "0.3.5",
+    "vite-plugin-imagemin": "^0.6.1"
   }
 }

src/assets/data/resource.js

@@ -580,7 +580,7 @@ export default {
     {
       name: '龙卷风',
       "mp3": "http://im5.tongbu.com/rings/singerring/zt_uunGo_1/5605.mp3",
-      cover: new URL('../../assets/img/music-cover/1.png', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/1.jpg', import.meta.url).href,
       author: '周杰伦',
       duration: 99,
       use_count: 37441000,
@@ -590,7 +590,7 @@ export default {
     {
       name: '爱在西元前',
       mp3: 'http://m3.8js.net:99/1916/501204165042405.mp3',
-      cover: new URL('../../assets/img/music-cover/2.png', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/2.jpg', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -600,7 +600,7 @@ export default {
     {
       name: '蜗牛',
       mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/3684.mp3',
-      cover: new URL('../../assets/img/music-cover/3.png', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/3.jpg', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -610,7 +610,7 @@ export default {
     {
       name: '半岛铁盒',
       mp3: 'http://m3.8js.net:99/2016n/46/94745.mp3',
-      cover: new URL('../../assets/img/music-cover/4.png', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/4.jpg', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -620,7 +620,7 @@ export default {
     {
       name: '轨迹',
       mp3: 'http://m3.8js.net:99/1832/411204324135934.mp3',
-      cover: new URL('../../assets/img/music-cover/5.png', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/5.jpg', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -630,7 +630,7 @@ export default {
     {
       name: '七里香',
       mp3: 'http://m3.8js.net:99/2016n/14/53717.mp3',
-      cover: new URL('../../assets/img/music-cover/6.png', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/6.jpg', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -640,7 +640,7 @@ export default {
     {
       name: '发如雪',
       mp3: 'http://m3.8js.net:99/2014/211204142150965.mp3',
-      cover: new URL('../../assets/img/music-cover/7.png', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -650,7 +650,7 @@ export default {
     {
       name: '霍元甲',
       mp3: 'http://m3.8js.net:99/1921/261204212643140.mp3',
-      cover: new URL('../../assets/img/music-cover/8.png', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/8.jpg', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -660,7 +660,7 @@ export default {
     {
       name: '千里之外(周杰伦/费玉清)',
       mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/121.mp3',
-      cover: new URL('../../assets/img/music-cover/9.png', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/9.jpg', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -670,7 +670,7 @@ export default {
     {
       name: '菊花台',
       mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/2022.mp3',
-      cover: new URL('../../assets/img/music-cover/10.png', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/10.jpg', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -680,7 +680,7 @@ export default {
     {
       name: '不能说的秘密',
       mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/165.mp3',
-      cover: new URL('../../assets/img/music-cover/11.png', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/11.jpg', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,
@@ -690,7 +690,7 @@ export default {
     {
       name: '牛仔很忙',
       mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/219.mp3',
-      cover: new URL('../../assets/img/music-cover/12.png', import.meta.url).href,
+      cover: new URL('../../assets/img/music-cover/12.jpg', import.meta.url).href,
       author: '周杰伦',
       duration: 60,
       use_count: 37441000,

src/components/Posters.vue

@@ -24,7 +24,7 @@
 import {_checkImgUrl, _formatNumber} from "@/utils";
 import {useBaseStore} from "@/store/pinia";
 import {useRouter} from "vue-router";
-import {cloneDeep} from "lodash-es";
+import {cloneDeep} from '@/utils'
 
 const store = useBaseStore()
 const nav = useRouter()

src/components/UserPanel.vue

@@ -176,13 +176,11 @@
 </template>
 
 <script setup>
-import {computed, onMounted, reactive, ref, watch} from "vue";
+import {computed, reactive, ref, watch} from "vue";
 import Utils, {$no, _checkImgUrl, _getUserDouyinId} from "@/utils";
 import {useNav} from "@/utils/hooks/useNav";
 import {useStore} from "vuex";
-import resource from "@/assets/data/resource";
 import Posters from '@/components/Posters'
-import {merge} from 'lodash-es'
 import {DefaultUser} from "@/utils/const_var";
 import Loading from "@/components/Loading.vue";
 import {FILE_URL} from "@/config";
@@ -244,7 +242,7 @@ watch(() => props.active,
                 a.author = props.currentItem.author
                 return a
               })
-              emit('update:currentItem', merge(props.currentItem, {aweme_list: l}))
+              emit('update:currentItem', Object.assign(props.currentItem, {aweme_list: l}))
             }, 300)
           })
         })
@@ -255,7 +253,7 @@ watch(() => props.currentItem.author.uid,
     async (newVal) => {
       if (props.currentItem.author.uid !== state.uid) {
         state.uid = props.currentItem.author.uid
-        emit('update:currentItem', merge(props.currentItem, {aweme_list: []}))
+        emit('update:currentItem', Object.assign(props.currentItem, {aweme_list: []}))
       }
     })
 

src/components/slide/SlideAlbum.vue

@@ -96,7 +96,7 @@ import {SlideAlbumOperationStatus, SlideItemPlayStatus, SlideType} from "../../u
 import ItemToolbar from "./ItemToolbar";
 import ItemDesc from "./ItemDesc";
 import GM from "../../utils";
-import {cloneDeep} from "lodash-es";
+import {cloneDeep} from '@/utils'
 import bus, {EVENT_KEY} from "../../utils/bus";
 
 let out = new Float32Array([

src/components/slide/SlideVerticalInfinite.vue

@@ -1,5 +1,5 @@
 <script setup lang="jsx">
-import {computed, createApp, h, onMounted, reactive, ref, render, watch} from "vue";
+import {computed, createApp, onMounted, reactive, ref, render, watch} from "vue";
 import GM from '../../utils'
 import {getSlideDistance, slideInit, slideReset, slideTouchEnd, slideTouchMove, slideTouchStart} from "./common";
 import {SlideType} from "@/utils/const_var";
@@ -7,7 +7,6 @@ import SlideItem from '@/components/slide/SlideItem.vue'
 import bus, {EVENT_KEY} from "../../utils/bus";
 import {useStore} from 'vuex'
 import Loading from "@/components/Loading.vue";
-import {cloneDeep} from "lodash-es";
 
 const props = defineProps({
   index: {

src/components/slide/common.js

@@ -1,14 +1,13 @@
 import bus from "@/utils/bus";
 import Utils from '@/utils'
+import GM from '@/utils'
 import {SlideType} from "@/utils/const_var";
-import GM from "@/utils";
-import {sum} from "lodash-es";
 import {nextTick} from "vue";
 
 export function slideInit(el, state, type) {
   state.wrapper.width = GM.$getCss(el, 'width')
   state.wrapper.height = GM.$getCss(el, 'height')
-  nextTick(()=>{
+  nextTick(() => {
     state.wrapper.childrenLength = el.children.length
   })
 
@@ -42,8 +41,8 @@ export function canSlide(state, judgeValue, type = SlideType.HORIZONTAL) {
 }
 
 /**
-* @param slideOtherDirectionCb 滑动其他方向时的回调，目前用于图集进于放大模式后，上下滑动推出放大模式
-* */
+ * @param slideOtherDirectionCb 滑动其他方向时的回调，目前用于图集进于放大模式后，上下滑动推出放大模式
+ * */
 export function slideTouchMove(e, el, state, judgeValue, canNextCb, nextCb, type = SlideType.HORIZONTAL, notNextCb, slideOtherDirectionCb = null) {
   state.move.x = e.touches[0].pageX - state.start.x
   state.move.y = e.touches[0].pageY - state.start.y
@@ -133,7 +132,11 @@ export function getSlideDistance(state, type = SlideType.HORIZONTAL, el) {
       Array.from(el.children).map(v => {
         widths.push(v.getBoundingClientRect().width)
       })
-      return -sum(widths.splice(0, state.localIndex))
+      widths = widths.slice(0, state.localIndex)
+      if (widths.length) {
+        return -widths.reduce((a, b) => a + b)
+      }
+      return 0
     }
     return -state.localIndex * state.wrapper.width
   } else {

src/mock/index.js

@@ -1,11 +1,10 @@
 import resource from "../assets/data/resource.js";
 import posts6 from "@/assets/data/posts6.json";
-import {cloneDeep, uniqueId} from "lodash-es";
+import {cloneDeep} from '@/utils'
 import {BASE_URL} from "@/config";
 import {useBaseStore} from "@/store/pinia";
 import axiosInstance from "@/utils/request";
 import MockAdapter from "axios-mock-adapter";
-import {friends} from "@/api/user";
 
 const mock = new MockAdapter(axiosInstance);
 
@@ -25,15 +24,15 @@ let allRecommendVideos = posts6.map(v => {
 // console.log('allRecommendVideos', allRecommendVideos)
 let t = [{
   type: 'imgs', src: `https://imgapi.cn/bing.php`, author: {
-    unique_id: uniqueId('list_')
+    unique_id: 1
   }
 }, {
   type: 'user', src: `https://imgapi.cn/bing.php`, author: {
-    unique_id: uniqueId('list_')
+    unique_id: 2
   }
 }, {
   type: 'img', src: `https://imgapi.cn/bing.php`, author: {
-    unique_id: uniqueId('list_')
+    unique_id: 3
   }
 },]
 // allRecommendVideos.unshift(...t)

src/pages/home/Attention.vue

@@ -1,372 +0,0 @@
-<template>
-  <div id="Shop">
-    <div class="wrapper">
-      <div class="search">
-        <div class="search-input">
-          <Icon icon="tabler:search"/>
-          <div class="placeholder">50元话费充值</div>
-          <Icon color="gray" icon="lucide:camera"/>
-          <div class="search-notice">搜索</div>
-        </div>
-        <div class="more">
-          <Icon icon="ep:shopping-cart"/>
-        </div>
-      </div>
-    </div>
-    <Scroll class="Scroll"
-            fixedHeight="100"
-            @fixed="e=>state.fixed = e"
-            @pulldown="loadData">
-      <div class="wrapper">
-        <div class="card">
-          <div class="options">
-            <div class="option" @click="$no">
-              <Icon icon="lets-icons:order-light"/>
-              <div>我的订单</div>
-            </div>
-            <div class="option" @click="$no">
-              <Icon icon="material-symbols-light:charging-station-outline"/>
-              <div>手机充值</div>
-            </div>
-            <div class="option" @click="$no">
-              <Icon icon="lucide:message-square-quote"/>
-              <div>购物消息</div>
-            </div>
-            <div class="option" @click="$no">
-              <Icon icon="fluent:location-16-regular"/>
-              <div>小时达</div>
-            </div>
-            <div class="option" @click="$no">
-              <Icon icon="ri:refund-2-fill"/>
-              <div>退款/售后</div>
-            </div>
-            <div class="option" @click="$no">
-              <Icon icon="icon-park-outline:clothes-turtleneck"/>
-              <div>潮流服饰</div>
-            </div>
-          </div>
-        </div>
-        <div class="card" style="margin-bottom: 5rem;">
-          <div class="baiyibutie">
-            <div class="item">
-              <img src="@/assets/img/icon/shop/baiyibutie.png" alt="">
-              <span>38节补贴</span>
-            </div>
-            <div class="item">
-              <img src="@/assets/img/icon/shop/1.webp" alt="">
-              <span class="price">
-              <span class="m">￥</span>
-              <span>470</span>
-            </span>
-            </div>
-            <div class="item">
-              <img src="@/assets/img/icon/shop/2.webp" alt="">
-              <span class="price">
-              <span class="m">￥</span>
-              <span>699</span>
-            </span>
-            </div>
-            <div class="item">
-              <img src="@/assets/img/icon/shop/3.png" alt="">
-              <span class="price">
-              <span class="m">￥</span>
-              <span>8.8</span>
-            </span>
-            </div>
-            <div class="item">
-              <img src="@/assets/img/icon/shop/4.jpg" alt="">
-              <span class="price">
-              <span class="m">￥</span>
-              <span>2.99</span>
-            </span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div v-masonry class="goods-list"
-           :class="{fixed:state.fixed}"
-           transition-duration="0s"
-           item-selector=".goods">
-        <div v-masonry-tile class="goods"
-             @click="nav('/shop/detail')"
-             v-for="(item, index) in  state.list">
-          <div class="item">
-            <img class="poster" :src="Utils.$imgPreview(item.cover)"/>
-            <div class="bottom">
-              <div class="desc">
-                {{ item.name }}
-              </div>
-              <div class="discounts" v-if="item.discount">{{ item.discount }}</div>
-              <div class="info">
-                <div class="price">
-                  ￥
-                  <div class="big">{{ item.price }}</div>
-                </div>
-                <div class="num">已售{{ item.sold }}件</div>
-              </div>
-              <div class="low" v-if="item.isLowPrice">
-                近30天低价
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </Scroll>
-    <Footer v-bind:init-tab="2"
-            :is-white="true"
-            style="position: fixed;left: 0;"/>
-
-  </div>
-</template>
-
-<script setup lang="jsx">
-
-import {onMounted, reactive} from "vue";
-import {useNav} from "@/utils/hooks/useNav";
-import Utils, {$no} from "@/utils";
-import Scroll from "@/components/Scroll.vue";
-import goods from "@/assets/data/goods";
-
-const nav = useNav()
-const state = reactive({
-  list: goods.list,
-  listEl: null,
-  fixed: false
-})
-
-function loadData() {
-  console.log('loadData')
-  for (let i = 1; i < 12; i++) {
-    let temp = {
-      src: new URL(`../../../assets/img/poster/${i}.jpg`, import.meta.url).href,
-      author: new URL(`../../../assets/img/avatar.png`, import.meta.url).href,
-    }
-    // state.list.push(temp)
-  }
-}
-
-onMounted(() => {
-  for (let i = 1; i < 12; i++) {
-    let temp = {
-      src: new URL(`../../../assets/img/poster/${i}.jpg`, import.meta.url).href,
-      author: new URL(`../../../assets/img/avatar.png`, import.meta.url).href,
-    }
-    // state.list.push(temp)
-  }
-})
-</script>
-
-<style scoped lang="less">
-
-
-@fColor: #f1f1f1;
-
-#Shop {
-  font-size: 14rem;
-  position: relative;
-  background: @fColor;
-  background: #f1f1f1;
-  padding: 10rem 5rem;
-  color: black;
-
-  .wrapper {
-    padding: 0 5rem;
-  }
-
-  .search {
-    position: relative;
-    z-index: 2;
-    display: flex;
-    align-items: center;
-    height: 36rem;
-    box-sizing: border-box;
-    margin-bottom: 10rem;
-
-    svg {
-      font-size: 22rem;
-    }
-
-    .search-input {
-      border: 1rem solid rgb(140, 48, 74);
-      border-radius: 8rem;
-      height: 100%;
-      padding: 0 10rem;
-      padding-right: 3rem;
-      flex: 1;
-      gap: 10rem;
-      display: flex;
-      align-items: center;
-
-      .placeholder {
-        flex: 1;
-      }
-
-      img {
-        margin-right: 10rem;
-      }
-
-      .search-notice {
-        background: rgb(242, 62, 92);
-        padding: 0 10rem;
-        height: 85%;
-        border-radius: 6rem;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: white;
-      }
-    }
-
-    .more {
-      margin-left: 10rem;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: space-between;
-      font-size: 12rem;
-    }
-  }
-
-  .card {
-    background: white;
-    padding: 10rem 15rem;
-    margin-bottom: 10rem;
-    border-radius: 8rem;
-  }
-
-  .options {
-    display: flex;
-    overflow-x: auto;
-    box-sizing: border-box;
-
-    .option {
-      width: 17vw;
-      flex-shrink: 0;
-      font-size: 13rem;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-
-      svg {
-        font-size: 30rem;
-        margin-bottom: 3rem;
-      }
-    }
-  }
-
-  .baiyibutie {
-    display: flex;
-
-    .item {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      width: 25%;
-      font-size: 12rem;
-      color: gray;
-
-      img {
-        width: 80%;
-      }
-
-      .price {
-        color: red;
-        font-size: 16rem;
-        font-weight: bold;
-
-        .m {
-          font-size: 10rem;
-        }
-      }
-    }
-  }
-
-  .Scroll {
-    position: relative;
-    z-index: 2;
-    height: calc(var(--vh, 1vh) * 100 - var(--footer-height) * 2) !important;
-  }
-
-  .fixed {
-    background: @fColor;
-  }
-
-  @p: 5rem;
-
-  .goods-list {
-    padding-bottom: 20rem;
-  }
-
-  .goods {
-    width: 50%;
-    box-sizing: border-box;
-    padding: 5rem;
-
-    .item {
-      border-radius: 8rem;
-      overflow: hidden;
-      background: white;
-
-      img {
-        width: 100%;
-      }
-
-      .bottom {
-        padding: 10rem;
-
-        .desc {
-          color: black;
-          font-size: 16rem;
-          margin-bottom: 8rem;
-          @lh: 18rem;
-          line-height: @lh;
-          height: @lh * 2;
-          overflow: hidden;
-        }
-
-        .discounts {
-          display: inline-block;
-          @c: rgb(199, 89, 106);
-          border: 1rem solid @c;
-          padding: 0 4rem;
-          color: @c;
-          font-size: 12rem;
-          margin-bottom: 4rem;
-        }
-
-        .info {
-          display: flex;
-          align-items: flex-end;
-
-          .price {
-            color: rgb(248, 38, 74);
-            display: flex;
-            align-items: flex-end;
-            font-size: 14rem;
-            margin-right: 5rem;
-
-            .big {
-              font-size: 22rem;
-              font-weight: bold;
-              transform: translateY(2rem);
-            }
-          }
-
-          .num {
-            color: darkgray;
-            font-size: 12rem;
-          }
-        }
-
-        .low {
-          margin-top: 2rem;
-          color: rgb(230, 153, 92);
-        }
-      }
-    }
-  }
-}
-</style>

src/pages/home/Music.vue

@@ -135,7 +135,7 @@ export default {
       music: {
         name: '发如雪',
         mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3',
-        cover: new URL('../../assets/img/music-cover/7.png', import.meta.url).href,
+        cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url).href,
         author: '周杰伦',
         duration: 60,
         use_count: 37441000,

src/pages/home/MusicRankList.vue

@@ -60,7 +60,7 @@
               </div>
               <div class="bottom" v-if="item.is_collect">
                 <div class="left">
-                  <img src="../../assets/img/music-cover/2.png" alt="" class="avatar">
+                  <img src="../../assets/img/music-cover/2.jpg" alt="" class="avatar">
                   <div class="desc">
                     <div class="name">{{ item.author }}</div>
                     <div class="follow_count">粉丝：83.4w</div>
@@ -108,7 +108,7 @@
               </div>
               <div class="bottom" v-if="item.is_collect">
                 <div class="left">
-                  <img src="../../assets/img/music-cover/2.png" alt="" class="avatar">
+                  <img src="../../assets/img/music-cover/2.jpg" alt="" class="avatar">
                   <div class="desc">
                     <div class="name">{{ item.author }}</div>
                     <div class="follow_count">粉丝：83.4w</div>
@@ -156,7 +156,7 @@
               </div>
               <div class="bottom" v-if="item.is_collect">
                 <div class="left">
-                  <img src="../../assets/img/music-cover/2.png" alt="" class="avatar">
+                  <img src="../../assets/img/music-cover/2.jpg" alt="" class="avatar">
                   <div class="desc">
                     <div class="name">{{ item.author }}</div>
                     <div class="follow_count">粉丝：83.4w</div>
@@ -183,7 +183,7 @@ export default {
         {
           name: '龙卷风',
           "mp3": "http://im5.tongbu.com/rings/singerring/zt_uunGo_1/5605.mp3",
-          cover: new URL('../../assets/img/music-cover/1.png', import.meta.url).href,
+          cover: new URL('../../assets/img/music-cover/1.jpg', import.meta.url).href,
           author: '周杰伦',
           duration: 99,
           use_count: 37441000,
@@ -193,7 +193,7 @@ export default {
         {
           name: '爱在西元前',
           mp3: 'https://m3.8js.net:99/1916/501204165042405.mp3',
-          cover: new URL('../../assets/img/music-cover/2.png', import.meta.url).href,
+          cover: new URL('../../assets/img/music-cover/2.jpg', import.meta.url).href,
           author: '周杰伦',
           duration: 60,
           use_count: 37441000,
@@ -203,7 +203,7 @@ export default {
         {
           name: '蜗牛',
           mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/3684.mp3',
-          cover: new URL('../../assets/img/music-cover/3.png', import.meta.url).href,
+          cover: new URL('../../assets/img/music-cover/3.jpg', import.meta.url).href,
           author: '周杰伦',
           duration: 60,
           use_count: 37441000,
@@ -213,7 +213,7 @@ export default {
         {
           name: '半岛铁盒',
           mp3: 'https://m3.8js.net:99/2016n/46/94745.mp3',
-          cover: new URL('../../assets/img/music-cover/4.png', import.meta.url).href,
+          cover: new URL('../../assets/img/music-cover/4.jpg', import.meta.url).href,
           author: '周杰伦',
           duration: 60,
           use_count: 37441000,
@@ -223,7 +223,7 @@ export default {
         {
           name: '轨迹',
           mp3: 'https://m3.8js.net:99/1832/411204324135934.mp3',
-          cover: new URL('../../assets/img/music-cover/5.png', import.meta.url).href,
+          cover: new URL('../../assets/img/music-cover/5.jpg', import.meta.url).href,
           author: '周杰伦',
           duration: 60,
           use_count: 37441000,
@@ -233,7 +233,7 @@ export default {
         {
           name: '七里香',
           mp3: 'https://m3.8js.net:99/2016n/14/53717.mp3',
-          cover: new URL('../../assets/img/music-cover/6.png', import.meta.url).href,
+          cover: new URL('../../assets/img/music-cover/6.jpg', import.meta.url).href,
           author: '周杰伦',
           duration: 60,
           use_count: 37441000,
@@ -243,7 +243,7 @@ export default {
         {
           name: '发如雪',
           mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3',
-          cover: new URL('../../assets/img/music-cover/7.png', import.meta.url).href,
+          cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url).href,
           author: '周杰伦',
           duration: 60,
           use_count: 37441000,
@@ -253,7 +253,7 @@ export default {
         {
           name: '霍元甲',
           mp3: 'https://m3.8js.net:99/1921/261204212643140.mp3',
-          cover: new URL('../../assets/img/music-cover/8.png', import.meta.url).href,
+          cover: new URL('../../assets/img/music-cover/8.jpg', import.meta.url).href,
           author: '周杰伦',
           duration: 60,
           use_count: 37441000,
@@ -263,7 +263,7 @@ export default {
         {
           name: '千里之外(周杰伦/费玉清)',
           mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/121.mp3',
-          cover: new URL('../../assets/img/music-cover/9.png', import.meta.url).href,
+          cover: new URL('../../assets/img/music-cover/9.jpg', import.meta.url).href,
           author: '周杰伦',
           duration: 60,
           use_count: 37441000,
@@ -273,7 +273,7 @@ export default {
         {
           name: '菊花台',
           mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/2022.mp3',
-          cover: new URL('../../assets/img/music-cover/10.png', import.meta.url).href,
+          cover: new URL('../../assets/img/music-cover/10.jpg', import.meta.url).href,
           author: '周杰伦',
           duration: 60,
           use_count: 37441000,
@@ -283,7 +283,7 @@ export default {
         {
           name: '不能说的秘密',
           mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/165.mp3',
-          cover: new URL('../../assets/img/music-cover/11.png', import.meta.url).href,
+          cover: new URL('../../assets/img/music-cover/11.jpg', import.meta.url).href,
           author: '周杰伦',
           duration: 60,
           use_count: 37441000,
@@ -293,7 +293,7 @@ export default {
         {
           name: '牛仔很忙',
           mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/219.mp3',
-          cover: new URL('../../assets/img/music-cover/12.png', import.meta.url).href,
+          cover: new URL('../../assets/img/music-cover/12.jpg', import.meta.url).href,
           author: '周杰伦',
           duration: 60,
           use_count: 37441000,

src/pages/home/SearchPage.vue

@@ -24,8 +24,8 @@
       <div class="guess">
         <div class="title">
           <div class="left">猜你想搜</div>
-          <div class="right">
-            <img class="scan" src="../../assets/img/icon/home/refresh-gray.png" @click.stop="refresh">
+          <div class="right" @click.stop="refresh">
+            <img class="scan" src="../../assets/img/icon/home/refresh-gray.png">
             <span>换一换</span>
           </div>
         </div>
@@ -196,9 +196,9 @@
 </template>
 <script>
 import Search from "../../components/Search";
-import {sampleSize} from 'lodash-es'
 import Dom from "../../utils/dom";
 import {nextTick} from "vue";
+import {sampleSize} from "@/utils";
 
 export default {
   name: "SearchPage",
@@ -305,7 +305,7 @@ export default {
         {
           name: '龙卷风',
           "mp3": "http://im5.tongbu.com/rings/singerring/zt_uunGo_1/5605.mp3",
-          cover: new URL('../../assets/img/music-cover/1.png', import.meta.url).href,
+          cover: new URL('../../assets/img/music-cover/1.jpg', import.meta.url).href,
           author: '周杰伦',
           duration: 99,
           use_count: 37441000,
@@ -315,7 +315,7 @@ export default {
         {
           name: '爱在西元前',
           mp3: 'https://m3.8js.net:99/1916/501204165042405.mp3',
-          cover: new URL('../../assets/img/music-cover/2.png', import.meta.url).href,
+          cover: new URL('../../assets/img/music-cover/2.jpg', import.meta.url).href,
           author: '周杰伦',
           duration: 60,
           use_count: 37441000,
@@ -325,7 +325,7 @@ export default {
         {
           name: '蜗牛',
           mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/3684.mp3',
-          cover: new URL('../../assets/img/music-cover/3.png', import.meta.url).href,
+          cover: new URL('../../assets/img/music-cover/3.jpg', import.meta.url).href,
           author: '周杰伦',
           duration: 60,
           use_count: 37441000,
@@ -335,7 +335,7 @@ export default {
         {
           name: '半岛铁盒',
           mp3: 'https://m3.8js.net:99/2016n/46/94745.mp3',
-          cover: new URL('../../assets/img/music-cover/4.png', import.meta.url).href,
+          cover: new URL('../../assets/img/music-cover/4.jpg', import.meta.url).href,
           author: '周杰伦',
           duration: 60,
           use_count: 37441000,
@@ -345,7 +345,7 @@ export default {
         {
           name: '轨迹',
           mp3: 'https://m3.8js.net:99/1832/411204324135934.mp3',
-          cover: new URL('../../assets/img/music-cover/5.png', import.meta.url).href,
+          cover: new URL('../../assets/img/music-cover/5.jpg', import.meta.url).href,
           author: '周杰伦',
           duration: 60,
           use_count: 37441000,
@@ -355,7 +355,7 @@ export default {
         {
           name: '七里香',
           mp3: 'https://m3.8js.net:99/2016n/14/53717.mp3',
-          cover: new URL('../../assets/img/music-cover/6.png', import.meta.url).href,
+          cover: new URL('../../assets/img/music-cover/6.jpg', import.meta.url).href,
           author: '周杰伦',
           duration: 60,
           use_count: 37441000,
@@ -365,7 +365,7 @@ export default {
         {
           name: '发如雪',
           mp3: 'https://m3.8js.net:99/2014/211204142150965.mp3',
-          cover: new URL('../../assets/img/music-cover/7.png', import.meta.url).href,
+          cover: new URL('../../assets/img/music-cover/7.jpg', import.meta.url).href,
           author: '周杰伦',
           duration: 60,
           use_count: 37441000,
@@ -375,7 +375,7 @@ export default {
         {
           name: '霍元甲',
           mp3: 'https://m3.8js.net:99/1921/261204212643140.mp3',
-          cover: new URL('../../assets/img/music-cover/8.png', import.meta.url).href,
+          cover: new URL('../../assets/img/music-cover/8.jpg', import.meta.url).href,
           author: '周杰伦',
           duration: 60,
           use_count: 37441000,
@@ -385,7 +385,7 @@ export default {
         {
           name: '千里之外(周杰伦/费玉清)',
           mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/121.mp3',
-          cover: new URL('../../assets/img/music-cover/9.png', import.meta.url).href,
+          cover: new URL('../../assets/img/music-cover/9.jpg', import.meta.url).href,
           author: '周杰伦',
           duration: 60,
           use_count: 37441000,
@@ -395,7 +395,7 @@ export default {
         {
           name: '菊花台',
           mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/2022.mp3',
-          cover: new URL('../../assets/img/music-cover/10.png', import.meta.url).href,
+          cover: new URL('../../assets/img/music-cover/10.jpg', import.meta.url).href,
           author: '周杰伦',
           duration: 60,
           use_count: 37441000,
@@ -405,7 +405,7 @@ export default {
         {
           name: '不能说的秘密',
           mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/165.mp3',
-          cover: new URL('../../assets/img/music-cover/11.png', import.meta.url).href,
+          cover: new URL('../../assets/img/music-cover/11.jpg', import.meta.url).href,
           author: '周杰伦',
           duration: 60,
           use_count: 37441000,
@@ -415,7 +415,7 @@ export default {
         {
           name: '牛仔很忙',
           mp3: 'http://im5.tongbu.com/rings/singerring/zt_uunGo_1/219.mp3',
-          cover: new URL('../../assets/img/music-cover/12.png', import.meta.url).href,
+          cover: new URL('../../assets/img/music-cover/12.jpg', import.meta.url).href,
           author: '周杰伦',
           duration: 60,
           use_count: 37441000,

src/pages/home/slide/LongVideo.vue

@@ -1,7 +1,6 @@
 <script setup>
 
 import {computed, onMounted, onUnmounted, reactive, ref, watch} from "vue";
-import {uniqueId} from "lodash-es";
 import {useStore} from "vuex";
 import {_checkImgUrl, _duration, _formatNumber} from "@/utils";
 import {recommendedVideo} from "@/api/videos";
@@ -23,7 +22,6 @@ const listRef = ref(null)
 const state = reactive({
   index: 0,
   list: [],
-  uniqueId: uniqueId('uniqueId_'),
   totalSize: 0,
   pageSize: 10,
   pageNo: 0,