feat: complete the leaderboard interface

.stylelintrc.js

@@ -6,6 +6,7 @@ module.exports = {
     'stylelint-config-recess-order'
   ],
   rules: {
-    'prettier/prettier': true
+    'prettier/prettier': true,
+    'font-family-no-missing-generic-family-keyword': null
   }
 }

.vscode/settings.json

@@ -11,7 +11,6 @@
   "eslint.validate": ["javascript", "typescript", "typescriptreact", "vue"],
   "prettier.disableLanguages": ["json", "md"],
   "typescript.tsdk": "node_modules\\typescript\\lib",
-  "stylelint.enable": true,
   "[less]": {
     "editor.formatOnSave": true
   }

packages/api/app.js

@@ -3,8 +3,6 @@ const path = require('path')
 const express = require('express')
 const bodyParser = require('body-parser')
 const request = require('./util/request')
-const packageJSON = require('./package.json')
-const exec = require('child_process').exec
 const cache = require('./util/apicache').middleware
 const { cookieToJson } = require('./util/index')
 const fileUpload = require('express-fileupload')

src/components/secondary-bar/index.less

@@ -14,7 +14,7 @@
       color: darken(@base-color, 10%);
     }
     &-active {
-      font-size: 18px;
+      font-size: 22px;
       font-weight: bold;
       &:hover {
         color: @base-color;

src/components/song-list/index.less

@@ -41,7 +41,6 @@
         justify-content: center;
         height: 100%;
         background-color: #1e53a3;
-        background-size: cover;
         border-radius: 4px;
         &--date {
           .center-contanier();

src/components/song-list/index.tsx

@@ -6,24 +6,23 @@ import './index.less'
 
 const prefix = 'song'
 
-export type Handle = 'click' | 'mouseenter'
-
 export const SongList = defineComponent({
   name: 'SongList',
   props: {
     songData: {
       type: Object as PropType<Song[]>,
       required: true
     },
-    handle: {
-      type: Function as PropType<(type: Handle, payload: Song) => void>,
+    onClick: {
+      type: Function as PropType<() => void>,
       required: true
     }
   },
-  setup(props) {
-    const { songData, handle } = toRefs(props)
+  emits: ['click'],
+  setup(props, { emit }) {
+    const { songData } = toRefs(props)
     const clickHandle = (song: Song) => {
-      handle.value('click', song)
+      emit('click', song)
     }
     return () => (
       <div class={`${prefix}-list`}>
@@ -35,12 +34,12 @@ export const SongList = defineComponent({
             >
               <div class={`${prefix}-pic`}>
                 <div
-                  class={`${prefix}-pic-img`}
+                  class={`${prefix}-pic-img bg-img`}
                   style={{
                     backgroundImage: `url(${song.picUrl || song.coverImgUrl})`
                   }}
                 >
-                  {song.picUrl === '' && (
+                  {song.coverImgUrl === '' && (
                     <div class={`${prefix}-pic-img--date`}>
                       <icon icon="rili" size={78}></icon>
                       <div>{dayjs().date()}</div>

src/components/swiper/index.less

@@ -102,9 +102,6 @@
       will-change: left, right, transform;
       div {
         height: 100%;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: cover;
         border-radius: 8px;
       }
     }

src/components/swiper/index.tsx

@@ -110,7 +110,10 @@ export const Swiper = defineComponent({
           </div>
           {banners.value.map((item, index: number) => (
             <li class={renderClass(index)}>
-              <div style={{ backgroundImage: `url(${item.imageUrl})` }}></div>
+              <div
+                class="bg-img"
+                style={{ backgroundImage: `url(${item.imageUrl})` }}
+              ></div>
             </li>
           ))}
           <div class={`${prefix}-container-right`} onClick={nextAction}>

src/iconfont/index.ts

@@ -1,5 +1,25 @@
 import $script from 'scriptjs'
 import { noop } from '@/utils/index'
 
+const ICONFONT_URL = 'font_2132275_l43m9hqmon'
+
 // repair electron packaging '//' protocol problem
-$script('https://at.alicdn.com/t/font_2132275_l43m9hqmon.js', noop)
+$script(`https://at.alicdn.com/t/${ICONFONT_URL}.js`, noop)
+
+void (function() {
+  if (document) {
+    const iconfont = document.createElement('style')
+    document.getElementsByTagName('head')[0].appendChild(iconfont)
+    const iconfontSheet = document.styleSheets[document.styleSheets.length - 1]
+    iconfontSheet.insertRule(`
+      @font-face {
+        font-family: 'iconfont';
+        src: url('https://at.alicdn.com/t/${ICONFONT_URL}.eot');
+        src: url('https://at.alicdn.com/t/${ICONFONT_URL}.eot?#iefix') format('embedded-opentype'),
+        url('https://at.alicdn.com/t/${ICONFONT_URL}.woff2') format('woff2'),
+        url('https://at.alicdn.com/t/${ICONFONT_URL}.woff') format('woff'),
+        url('https://at.alicdn.com/t/${ICONFONT_URL}.ttf') format('truetype'),
+        url('https://at.alicdn.com/t/${ICONFONT_URL}.svg#iconfont') format('svg');
+      }`)
+  }
+})()

src/modules/index.ts

@@ -1,10 +1,14 @@
+import {
+  Recommend,
+  RecommendNameSpaced,
+  SongList,
+  SongListNameSpaced,
+  TopList,
+  TopListNameSpaced,
+  Artists,
+  ArtistsNameSpaced
+} from '@/pages/news/children/module'
 import Layout, { NAMESPACED as LayoutNameSpaced } from '@/layout/module'
-import Recommend, {
-  NAMESPACED as RecommendNameSpaced
-} from '@/pages/news/children/recommend/module'
-import SongList, {
-  NAMESPACED as SongListNameSpaced
-} from '@/pages/news/children/song-list/module'
 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'
@@ -15,6 +19,8 @@ export {
   LayoutNameSpaced,
   RecommendNameSpaced,
   SongListNameSpaced,
+  TopListNameSpaced,
+  ArtistsNameSpaced,
   HeaderNameSpaced,
   FooterNameSpaced,
   AuthNameSpaced,
@@ -25,6 +31,8 @@ const modules = {
   [LayoutNameSpaced]: Layout,
   [RecommendNameSpaced]: Recommend,
   [SongListNameSpaced]: SongList,
+  [TopListNameSpaced]: TopList,
+  [ArtistsNameSpaced]: Artists,
   [HeaderNameSpaced]: Header,
   [FooterNameSpaced]: Footer,
   [MainNameSpaced]: Main,

src/pages/footer/component/music-controller/index.tsx

@@ -12,11 +12,6 @@ import {
   findMusicIndex,
   PlayMode
 } from '../../module'
-import {
-  NAMESPACED as LayoutNamespace,
-  State as LayoutState,
-  Size
-} from '@/layout/module'
 import './index.less'
 import { Platform } from '@/config/build'
 import { importIpc } from '@/electron/event/ipc-browser'
@@ -42,9 +37,6 @@ export const MusicControl = defineComponent({
       State,
       Getter
     >(NAMESPACED)
-    const LayoutModule = uesModuleStore<LayoutState>(LayoutNamespace)
-
-    const { screenSize } = toRefs(LayoutModule.useState())
 
     const {
       musicStack,
@@ -250,7 +242,7 @@ export const MusicControl = defineComponent({
             <ve-button type="text">
               <icon
                 icon="lyrics"
-                color="#333"
+                color={visibleFlash.value ? 'var(--base-color)' : '#333'}
                 size={16}
                 aria-title="词"
                 onClick={handleVisibleFlash}

src/pages/news/children/artists/module.ts

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

src/pages/news/children/artists/sage.ts

@@ -0,0 +1,10 @@
+import { MutationTree, ActionTree } from 'vuex'
+import { RootState } from '@/store/index'
+import { ArtistsState } from './state'
+
+export const enum ArtistsMutations {}
+
+export const enum ArtistsActions {}
+
+export const actions: ActionTree<ArtistsState, RootState> = {}
+export const mutations: MutationTree<ArtistsState> = {}

src/pages/news/children/artists/state.ts

@@ -0,0 +1,7 @@
+import { GlobalBase } from '@/interface/index'
+
+export interface ArtistsState {
+  [key: string]: string
+}
+
+export const state: ArtistsState = {}

src/pages/news/children/artists/view/index.less

@@ -0,0 +1,3 @@
+.artists {
+  display: block;
+}

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

@@ -0,0 +1,9 @@
+import { defineComponent } from 'vue'
+import './index.less'
+
+export const Artists = defineComponent({
+  name: 'Artists',
+  setup() {
+    return () => <div class="artists"></div>
+  }
+})

src/pages/news/children/module.ts

@@ -0,0 +1,17 @@
+import Recommend, {
+  NAMESPACED as RecommendNameSpaced
+} from './recommend/module'
+import SongList, { NAMESPACED as SongListNameSpaced } from './song-list/module'
+import TopList, { NAMESPACED as TopListNameSpaced } from './top-list/module'
+import Artists, { NAMESPACED as ArtistsNameSpaced } from './artists/module'
+
+export {
+  Recommend,
+  RecommendNameSpaced,
+  SongList,
+  SongListNameSpaced,
+  TopList,
+  TopListNameSpaced,
+  Artists,
+  ArtistsNameSpaced
+}

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

@@ -52,10 +52,7 @@ export const Recommend = defineComponent({
         </div>
         <div class="recommend-song">
           <h2>推荐歌单</h2>
-          <SongList
-            songData={songList.value}
-            handle={toPlaylistDetails}
-          ></SongList>
+          <SongList songData={songList.value} onClick={toPlaylistDetails} />
         </div>
       </div>
     )

src/pages/news/children/song-list/view/index.tsx

@@ -119,7 +119,7 @@ export const SongList = defineComponent({
         </div>
         <ListComponent
           songData={songList.value}
-          handle={toPlaylistDetails}
+          onClick={toPlaylistDetails}
         ></ListComponent>
       </div>
     )

src/pages/news/children/top-list/api/index.ts

@@ -0,0 +1,12 @@
+import { get } from '@/utils/http'
+import { Top } from '../state'
+
+export const getTopList = async <
+  T extends {
+    list: Top[]
+    artistToplist: Top
+  }
+>(): Promise<T> => {
+  const data = await get<T>('/api/toplist/detail')
+  return data
+}

src/pages/news/children/top-list/module.ts

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

src/pages/news/children/top-list/sage.ts

@@ -0,0 +1,25 @@
+import { MutationTree, ActionTree } from 'vuex'
+import { RootState } from '@/store/index'
+import { TopListState } from './state'
+import { getTopList } from './api/index'
+
+export const enum TopListMutations {
+  SET_TOP_LIST = 'SET_TOP_LIST'
+}
+
+export const enum TopListActions {
+  SET_ACTION_TOP_LIST = 'SET_ACTION_TOP_LIST'
+}
+
+export const actions: ActionTree<TopListState, RootState> = {
+  async [TopListActions.SET_ACTION_TOP_LIST]({ commit }) {
+    const data = await getTopList()
+    commit(TopListMutations.SET_TOP_LIST, data)
+  }
+}
+export const mutations: MutationTree<TopListState> = {
+  [TopListMutations.SET_TOP_LIST](state, data) {
+    state.top = data.list
+    state.artistTop = data.artistToplist
+  }
+}

src/pages/news/children/top-list/state.ts

@@ -0,0 +1,20 @@
+import { Song } from '@/interface/index'
+
+export interface Top extends Song {
+  tracks: {
+    first: string
+    second: string
+  }[]
+  coverImgUrl: string
+  description: string
+}
+
+export interface TopListState {
+  top: Top[]
+  artistTop: Partial<Top>
+}
+
+export const state: TopListState = {
+  top: [],
+  artistTop: {}
+}