Feat: rewrite find-music recommend page

package.json

@@ -58,6 +58,7 @@
   "packageManager": "[email protected]",
   "dependencies": {
     "@electron/remote": "^2.1.0",
+    "@phosphor-icons/vue": "^2.1.6",
     "@vueuse/core": "4.9.1",
     "ant-design-vue": "2.0.1",
     "axios": "^0.21.1",
@@ -70,6 +71,7 @@
     "lodash-es": "4.17.15",
     "md5": "^2.3.0",
     "music-metadata": "^7.5.2",
+    "pinia": "^2.1.7",
     "react-is": "^16.13.1",
     "typescript": "^5.2.2",
     "uuid": "^8.3.2",
@@ -78,6 +80,7 @@
     "vue": "^3.3.7",
     "vue-i18n": "^9.1.7",
     "vue-router": "^4.2.5",
+    "vue-skeletor": "^1.0.6",
     "vuex": "^4.1.0",
     "vuex-persistedstate": "^4.1.0"
   },

src/app/index.ts

@@ -1,6 +1,7 @@
 import { createApp } from 'vue'
 import App from './app'
 import store from '../store'
+import pinia from '@/pinia'
 import router from '../router'
 import { Components } from './plugin/v-easy-components'
 import GlobalComponent from '@/components-global/index'
@@ -12,12 +13,20 @@ import '@/iconfont/index'
 import './index.css'
 import { setupMainEvent } from '@/electron/web/event'
 
+import PhosphorIcons from '@phosphor-icons/vue'
+
+import 'vue-skeletor/dist/vue-skeletor.css'
+import { Skeletor } from 'vue-skeletor'
+
 const app = createApp(App)
   .use(store)
+  .use(pinia)
   .use(router)
   // @ts-expect-error
   .use(Components.default)
   .use(GlobalComponent)
+  .use(PhosphorIcons)
+  .component(Skeletor.name, Skeletor)
 
 errorHandle(app)
 

src/components-business/secondary-bar/index.less

@@ -2,7 +2,7 @@
 @base-color: #383838;
 
 .@{prefix}-bar {
-  padding: 10px 0;
+  padding: 8px 0;
   ul {
     margin: 0;
   }

src/components-business/secondary-list/index.tsx

@@ -15,7 +15,7 @@
 import dayjs from 'dayjs'
 import './index.less'
 
-const renderClass = (name: string) => `secondary-list-${name}`
+const renderClass = (name: string) => `secondary-list-${name} overflow-hidden`
 
 export const SecondaryList = defineComponent({
   name: 'SecondaryList',
@@ -33,7 +33,7 @@
       default: noop
     },
     onPlayDbl: {
       type: Function as PropType<(item: any) => void>,
       default: noop
     },
     onUpdate: {
@@ -69,10 +69,13 @@
           head: () => (
             <>
               {/* <Image src={props.source.src} name={renderClass('coverimg')} /> */}
-              <DailyCard
-                src={props.source.src}
-                name={renderClass('coverimg')}
-              />
+              <div class={renderClass('coverimg')}>
+                <DailyCard
+                  src={props.source.src}
+                  // name={}
+                />
+              </div>
+
               <div class={renderClass('des')}>
                 <h1>
                   <div>{typeMap[props.source.type]}</div>

src/components-business/song-list/card.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <div
+      class="group relative cursor-pointer transition-all duration-[300ms] hover:shadow-lg overflow-hidden rounded"
+    >
+      <div class="w-0 h-0 pt-[100%] pr-[100%] bg-black" />
+      <div class="absolute w-full h-full top-0 left-0">
+        <Image
+          v-if="songUrl"
+          class="block w-full h-full transition-all duration-[300ms] ease-linear group-hover:scale-110"
+          :src="songUrl"
+        />
+        <div
+          class="w-full h-full flex items-center justify-center bg-primary"
+          v-else
+        >
+          <icon icon="rili" :size="78" />
+          <div
+            class="absolute w-full h-full flex justify-center items-center text-2xl text-white"
+          >
+            <span class="mt-4">
+              {{ dailyNum }}
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="absolute w-full h-full bg-masked-light top-0 left-0 flex justify-center items-center transition-all duration-300 opacity-0 group-hover:opacity-100"
+      >
+        <ph-play-circle
+          :size="48"
+          weight="duotone"
+          class="transition-all duration-300 text-white hover:text-primary"
+        />
+      </div>
+
+      <div
+        v-if="!!song.playCount"
+        class="absolute top-1 right-1 text-white bg-masked flex items-center text-[12px] p-0.5 rounded"
+      >
+        <ph-headphones :size="14" weight="duotone" class="mr-1" />
+        {{ formatCount(song.playCount) }}
+      </div>
+    </div>
+    <div class="h-11 mt-1" v-if="!notitle">
+      <span
+        class="hover:text-primary transition-all duration-300 cursor-pointer"
+      >
+        {{ song.name }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps } from 'vue'
+import dayjs from 'dayjs'
+import { formatCount } from '@/utils'
+
+import { Image } from '@/components/image'
+
+const props = defineProps<{
+  notitle?: boolean
+  song: {
+    name: string
+    picUrl: string
+    coverImgUrl: string
+    playCount: number
+  }
+}>()
+
+const { song } = props
+
+const dailyNum = dayjs().date()
+
+const songUrl = song.picUrl || song.coverImgUrl
+</script>
+
+<style></style>

src/components-business/song-list/daily.tsx

@@ -21,7 +21,11 @@ export const DailyCard = defineComponent({
     return () => (
       <>
         {props.src ? (
-          <Image name={props.name || 'daily-img'} src={props.src} />
+          <Image
+            class=" transition-all duration-[300ms] ease-linear hover:scale-110"
+            name={props.name || 'daily-img'}
+            src={props.src}
+          />
         ) : (
           <div class={`${prefix}-img ${props.name}`}>
             <div class={`${prefix}-img-date`}>

src/components-business/song-list/index.less

@@ -13,7 +13,7 @@
   &-container {
     position: relative;
     // min-height: 220px;
-    cursor: pointer;
+    // cursor: pointer;
     user-select: none;
     .song-pic {
       position: relative;
@@ -30,9 +30,10 @@
       }
       &-count {
         position: absolute;
-        top: 2px;
-        right: 6px;
+        top: 4px;
+        right: 4px;
         color: white;
+        background: rgba(0, 0, 0, 0.3);
       }
     }
     .song-title {

src/components-business/song-list/index.tsx

@@ -1,10 +1,11 @@
 import { defineComponent, toRefs, PropType } from 'vue'
 import { Song } from '@/interface/index'
 import { formatCount } from '@/utils/index'
-import { Skeleton } from 'ant-design-vue'
 import { DailyCard } from '@/components-business/song-list/daily'
 import './index.less'
 
+import Card from './card.vue'
+
 const prefix = 'song'
 
 export const SongList = defineComponent({
@@ -19,7 +20,7 @@
       default: false
     },
     onClick: {
       type: Function as PropType<(song: Song) => void>,
       required: true
     }
   },
@@ -32,34 +33,26 @@
 
     return () => (
       <div class={`${prefix}-list`}>
-        <Skeleton
-          active
-          paragraph={{
-            rows: 3,
-            width: '100%'
-          }}
-          loading={loading.value}
-        >
+        {loading.value ? (
+          <div class="grid grid-cols-4 gap-4">
+            {Array(8)
+              .fill(0)
+              .map((_, i) => (
+                <skeletor class="!h-[180px] !rounded " key={i}></skeletor>
+              ))}
+          </div>
+        ) : (
           <ul>
-            {songData.value.map(song => (
+            {songData?.value?.map(song => (
               <li
                 class={`${prefix}-list-container`}
                 onClick={() => clickHandle(song)}
               >
-                <div class={`${prefix}-pic`}>
-                  <DailyCard src={song.picUrl || song.coverImgUrl} />
-                  <div
-                    v-show={song.playCount !== 0}
-                    class={`${prefix}-pic-count`}
-                  >
-                    {formatCount(song.playCount)}
-                  </div>
-                </div>
-                <div class={`${prefix}-title`}>{song.name}</div>
+                <Card song={song}></Card>
               </li>
             ))}
           </ul>
-        </Skeleton>
+        )}
       </div>
     )
   }

src/components/swiper/index.less

@@ -53,7 +53,7 @@
   justify-content: center;
   width: 100%;
   height: 100%;
-  margin: 20px 0;
+  // margin: 20px 0 0;
   &-container {
     position: relative;
     display: flex;
@@ -89,13 +89,13 @@
     }
     &-left {
       left: 0;
-      background-image: linear-gradient(to right, #000000bf, transparent);
+      // background-image: linear-gradient(to right, #000000bf, transparent);
       border-top-left-radius: @radius;
       border-bottom-left-radius: @radius;
     }
     &-right {
       right: 0;
-      background-image: linear-gradient(to left, #000000bf, transparent);
+      // background-image: linear-gradient(to left, #000000bf, transparent);
       border-top-right-radius: @radius;
       border-bottom-right-radius: @radius;
     }
@@ -108,7 +108,7 @@
 
     li {
       position: absolute;
-      width: 45%;
+      width: 65%;
       height: 100%;
       opacity: 0;
       will-change: left, right, transform;
@@ -173,3 +173,22 @@
     }
   }
 }
+
+.swiper-normal-item {
+  &::after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    border-radius: 8px;
+    top: 0;
+  }
+  // opacity: 0.6 !important;
+}
+
+.swiper-normal-item.swiper-current {
+  &::after {
+    opacity: 0;
+  }
+}

src/components/swiper/index.tsx

@@ -111,7 +111,7 @@ export const Swiper = defineComponent({
 
     return () => (
       <div
-        class={`${prefix}`}
+        class={`${prefix} relative`}
         onMouseenter={handleMouseEnter}
         onMouseleave={handleMouseLeave}
       >
@@ -122,7 +122,9 @@ export const Swiper = defineComponent({
           {banners.value.map((item, index: number) => (
             <li class={renderClass(index)} onClick={() => handleClick(item)}>
               <Image src={item.imageUrl} />
-              <i class={`${prefix}-container-title`}>{item.typeTitle}</i>
+              <i class={`${prefix}-container-title  rounded !font-normal`}>
+                {item.typeTitle}
+              </i>
             </li>
           ))}
           <div class={`${prefix}-container-right`} onClick={nextAction}>