feat: support playlist display and playback

package.json

@@ -77,7 +77,7 @@
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^5.0.2",
     "@vue/test-utils": "^2.0.0-0",
-    "ant-design-vue": "2.0.0-beta.10",
+    "ant-design-vue": "2.0.0-rc.2",
     "axios": "^0.20.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-import": "^1.13.1",

src/components/more-then/index.less

@@ -0,0 +1,5 @@
+@prefix: ~'more-then';
+
+.@{prefix} {
+  display: block;
+}

src/components/more-then/index.tsx

@@ -0,0 +1,65 @@
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  onUpdated,
+  PropType,
+  ref,
+  toRefs,
+  watch
+} from 'vue'
+import './index.less'
+
+const prefix = 'more-then'
+
+// Use the rendered node to calculate the height, and then determine whether to shrink
+export const MoreThen = defineComponent({
+  name: 'MoreThen',
+  props: {
+    equal: {
+      type: Number as PropType<number>,
+      required: true
+    },
+    rely: {
+      type: [String] as PropType<string>,
+      required: true
+    }
+  },
+  setup(props, context) {
+    const { equal, rely } = toRefs(props)
+    const contenier = ref<HTMLElement | null>(null)
+    const visible = ref(true)
+    const more = ref(false)
+
+    const calcHeight = () => {
+      if (contenier.value && contenier.value.offsetHeight > equal.value) {
+        visible.value = false
+        more.value = true
+      }
+    }
+
+    watch(rely, rely => {
+      if (rely) {
+        nextTick().then(calcHeight)
+      }
+    })
+
+    return () => (
+      <div class={`${prefix}`}>
+        {visible.value && (
+          <div ref={contenier}>
+            {context.slots.default && context.slots.default()}
+          </div>
+        )}
+        {more.value && (
+          <ve-button
+            type="text"
+            onClick={() => (visible.value = !visible.value)}
+          >
+            {visible.value ? '隐藏' : '显示更多'}
+          </ve-button>
+        )}
+      </div>
+    )
+  }
+})

src/components/song-list/index.less

@@ -24,6 +24,7 @@
     flex-direction: column;
     min-height: 220px;
     cursor: pointer;
+    user-select: none;
     .song-pic {
       position: relative;
       flex: 1;

src/components/song-list/index.tsx

@@ -1,25 +1,38 @@
 import { defineComponent, toRefs, PropType } from 'vue'
 import { FindMusicInteface } from '@/interface/index'
+import { formatCount } from '@/utils/index'
 import dayjs from 'dayjs'
 import './index.less'
 
 const prefix = 'song'
 
+export type Handle = 'click' | 'mouseenter'
+
 export const SongList = defineComponent({
   name: 'SongList',
   props: {
     songData: {
       type: Object as PropType<FindMusicInteface.Song[]>,
       required: true
+    },
+    handle: {
+      type: Function as PropType<(type: Handle, payload?: unknown) => void>,
+      required: true
     }
   },
   setup(props) {
-    const { songData } = toRefs(props)
+    const { songData, handle } = toRefs(props)
+    const clickHandle = (song: FindMusicInteface.Song) => {
+      handle.value('click', song)
+    }
     return () => (
       <div class={`${prefix}-list`}>
         <ul>
           {songData.value.map(song => (
-            <li class={`${prefix}-list-container`}>
+            <li
+              class={`${prefix}-list-container`}
+              onClick={() => clickHandle(song)}
+            >
               <div class={`${prefix}-pic`}>
                 <div
                   class={`${prefix}-pic-img`}
@@ -36,7 +49,7 @@ export const SongList = defineComponent({
                   v-show={song.playCount !== 0}
                   class={`${prefix}-pic-count`}
                 >
-                  {song.playCount}
+                  {formatCount(song.playCount)}
                 </div>
               </div>
               <div class={`${prefix}-title`}>{song.name}</div>

src/components/table/index.less

@@ -0,0 +1,5 @@
+@prefix: ~'table';
+
+.@{prefix} {
+  display: block;
+}

src/components/table/index.tsx

@@ -0,0 +1,64 @@
+import { defineComponent, PropType, toRefs, ref } from 'vue'
+import { SongInteface } from '@/interface/index'
+import { Table as ATable } from 'ant-design-vue'
+import { noop } from '@/utils/index'
+import './index.less'
+
+const prefix = 'table'
+
+export const Table = defineComponent({
+  name: 'Table',
+  props: {
+    list: {
+      type: Array as PropType<SongInteface.Tracks[]>,
+      required: true
+    },
+    columns: {
+      type: Array as PropType<{}[]>,
+      required: true
+    },
+    onDblClick: {
+      type: Function as PropType<(item: SongInteface.Tracks) => void>,
+      default: noop
+    }
+  },
+  setup(props) {
+    const { list, columns, onDblClick } = toRefs(props)
+
+    return () => (
+      <div class={`${prefix}`}>
+        <div class={`${prefix}-header`}></div>
+        <div class={`${prefix}-body`}>
+          <ATable
+            rowKey="id"
+            pagination={false}
+            columns={columns.value}
+            dataSource={list.value}
+            customRow={record => {
+              // There is a problem with the ant design vue document, please refer to the link below
+              // https://v3.vuejs.org/guide/migration/render-function-api.html#_3-x-syntax-3
+              // https://github.com/vueComponent/ant-design-vue/blob/28aeea6f0b142ed68950a3738f7cf2c1581a7a5b/components/table/Table.tsx#L465
+              return {
+                onClick: (e: Event) => {
+                  e.preventDefault()
+                },
+                onDblclick: (e: Event) => {
+                  e.preventDefault()
+                  if (onDblClick) {
+                    onDblClick.value(record)
+                  }
+                }
+              }
+            }}
+          />
+        </div>
+        {/* <div class={`${prefix}-pagination`}>
+          <Pagination
+            v-model={[current.value, 'current']}
+            total={list.value.length}
+          />
+        </div> */}
+      </div>
+    )
+  }
+})

src/iconfont/index.ts

@@ -2,4 +2,4 @@ import $script from 'scriptjs'
 import { noop } from '@/utils/index'
 
 // repair electron packaging '//' protocol problem
-$script('//at.alicdn.com/t/font_2132275_4xqehsvj03i.js', noop)
+$script('//at.alicdn.com/t/font_2132275_edwe4same0b.js', noop)

src/interface/index.ts

@@ -3,4 +3,5 @@ export * from './app'
 export * from './service/albums'
 export * from './service/artists'
 export * from './service/songs'
-export { FindMusicInteface } from '../pages/index'
+export * from './service/avatar'
+export { FindMusicInteface, SongInteface } from '../pages/index'

src/interface/service/avatar.ts

@@ -0,0 +1,8 @@
+export interface Avatar {
+  avatarUrl: string
+  city: number
+  birthday: number
+  userId: number
+  nickname: string
+  backgroundUrl: string
+}

src/modules/index.ts

@@ -6,13 +6,15 @@ import Header, { NAMESPACED as HeaderNameSpaced } from '@/pages/header/module'
 import Footer, { NAMESPACED as FooterNameSpaced } from '@/pages/footer/module'
 import Main, { NAMESPACED as MainNameSpaced } from '@/pages/main/module'
 import Auth, { NAMESPACED as AuthNameSpaced } from '@/pages/auth/module'
+import Song, { NAMESPACED as SongNameSpaced } from '@/pages/song/module'
 
 export {
   LayoutNameSpaced,
   RecommendNameSpaced,
   HeaderNameSpaced,
   FooterNameSpaced,
-  AuthNameSpaced
+  AuthNameSpaced,
+  SongNameSpaced
 }
 
 const modules = {
@@ -21,7 +23,8 @@ const modules = {
   [HeaderNameSpaced]: Header,
   [FooterNameSpaced]: Footer,
   [MainNameSpaced]: Main,
-  [AuthNameSpaced]: Auth
+  [AuthNameSpaced]: Auth,
+  [SongNameSpaced]: Song
 }
 
 export default modules

src/pages/footer/view/index.tsx

@@ -86,8 +86,8 @@ export const Footer = defineComponent({
           {/* {<PlayLyrice visible={visibleLyrice.value}></PlayLyrice>} */}
         </div>
         <div class="footer-right">
-          <MusicControl></MusicControl>
-          <VolumeAndHistory></VolumeAndHistory>
+          <MusicControl />
+          <VolumeAndHistory />
         </div>
         <div class="footer-reduction">
           <ve-button

src/pages/header/component/setting.tsx

@@ -2,6 +2,9 @@ import { defineComponent, ref } from 'vue'
 import { importIpc } from '@/electron/event/ipc-browser'
 import { MiddlewareView } from '@/electron/event/action-types'
 import './setting.less'
+import { Platform } from '@/config/build'
+
+const { VUE_APP_PLATFORM } = process.env
 
 export const Setting = defineComponent({
   name: 'Setting',
@@ -18,12 +21,14 @@ export const Setting = defineComponent({
       this.visibleColor = false
       document.documentElement.style.setProperty('--base-color', value)
       document.documentElement.style.setProperty('--primary-theme-text', value)
-      importIpc().then(event => {
-        event.sendAsyncIpcRendererEvent(
-          MiddlewareView.UPDATE_THEME_COLOR,
-          value
-        )
-      })
+      if (VUE_APP_PLATFORM === Platform.ELECTRON) {
+        importIpc().then(event => {
+          event.sendAsyncIpcRendererEvent(
+            MiddlewareView.UPDATE_THEME_COLOR,
+            value
+          )
+        })
+      }
     }
     const { color } = this
     const ColorPicker = {

src/pages/index.ts

@@ -1,3 +1,4 @@
 // eslint-disable-next-line prettier/prettier
 export * as FindMusicInteface from './news/index'
 export * as FooterInteface from './footer/index'
+export * as SongInteface from './song/index'

src/pages/news/children/recommend/view/index.tsx

@@ -8,13 +8,15 @@ import {
 import { Swiper } from '@/components/swiper/index'
 import { State, NAMESPACED } from '../module'
 import { Actions } from '../sage'
-import { SongList } from '@/components/song-list/index'
-import { uesModuleStore } from '@/hooks/index'
+import { SongList, Handle } from '@/components/song-list/index'
+import { FindMusicInteface } from '@/interface/index'
+import { uesModuleStore, useRouter } from '@/hooks/index'
 import './index.less'
 
 export const Recommend = defineComponent({
   name: 'Recommend',
   setup() {
+    const router = useRouter()
     const { useState, useActions } = uesModuleStore<State>(NAMESPACED)
     const { banners, songList, runningSwiper } = toRefs(useState())
 
@@ -25,6 +27,14 @@ export const Recommend = defineComponent({
       useActions(Actions.SET_ACTION_SONG_LIST)
     }
 
+    const toPlaylist = (type: Handle, payload?: unknown) => {
+      if (type === 'click') {
+        router.push({
+          path: '/song-list/' + (payload as FindMusicInteface.Song).id
+        })
+      }
+    }
+
     onActivated(() => {
       runningSwiper.value = true
     })
@@ -48,7 +58,7 @@ export const Recommend = defineComponent({
         </div>
         <div class="recommend-song">
           <h2>推荐歌单</h2>
-          <SongList songData={songList.value}></SongList>
+          <SongList songData={songList.value} handle={toPlaylist}></SongList>
         </div>
       </div>
     )

src/pages/song/api/index.ts

@@ -0,0 +1,13 @@
+import { get } from '@/utils/http'
+import {} from '@/interface/index'
+import { State } from '../state'
+
+export const getPlayList = async (id: number): Promise<State['playlist'][]> => {
+  const data = await get<{ playlist: State['playlist'][] }>(
+    '/api/playlist/detail',
+    {
+      id
+    }
+  )
+  return data.playlist
+}

src/pages/song/index.ts

@@ -0,0 +1,2 @@
+export * from './sage'
+export * from './state'

src/pages/song/module.ts

@@ -0,0 +1,14 @@
+import { actions, mutations } from './sage'
+import { state } from './state'
+
+export * from './state'
+export * from './sage'
+
+export const NAMESPACED = 'Song'
+
+export default {
+  namespaced: true,
+  state,
+  actions,
+  mutations
+}