feat: support show artist details

package.json

@@ -15,7 +15,7 @@
     "build:electron": "yarn lint && vue-cli-service electron:build --mode electron.build --win nsis",
     "build:api": "concurrently -r \"yarn dev:api\" \"node script/server-local.js\"",
     "dev": "concurrently -r \"yarn dev:api\" \"yarn generate:theme\" \"vue-cli-service serve --mode browser\"",
-    "dev:api": "lerna exec --scope @radishes/api -- yarn run start",
+    "dev:api": "lerna exec --scope @radishes/api -- yarn run dev",
     "dev:electron": "concurrently -r \"yarn dev:api\" \"yarn generate:theme\" \"vue-cli-service electron:serve --mode electron.dev\"",
     "generate:theme": "node ./script/theme.js",
     "postinstall": "electron-builder install-app-deps",

src/electron/pages/index.ts

@@ -1,7 +1,7 @@
 // electron creates window entry, such as lyrics
 
 import { createApp } from 'vue'
-import App from '@/pages/footer/component/lyrice-float/electron-lyrice'
+import App from '@/pages/footer/components/lyrice-float/electron-lyrice'
 import EasyComponents from '@/app/plugin/v-easy-components'
 import Antd from '@/app/plugin/antd'
 import GlobalComponent from '@/components-global/index'

src/interface/service/artists.ts

@@ -3,4 +3,5 @@ export interface Artists {
   name: string
   alias: unknown[]
   img1v1Url: string
+  picUrl: string
 }

src/layout/secondary/secondary.less

@@ -0,0 +1,11 @@
+.secondary {
+  height: 100%;
+  overflow-y: auto;
+  &-head {
+    display: flex;
+    align-items: flex-start;
+  }
+  &-body {
+    margin-top: 20px;
+  }
+}

src/layout/secondary/secondary.tsx

@@ -0,0 +1,20 @@
+import { defineComponent, PropType } from 'vue'
+import './secondary.less'
+
+export const Secondary = defineComponent({
+  name: 'Secondary',
+  props: {
+    src: {
+      type: String as PropType<string>,
+      default: ''
+    }
+  },
+  setup(props, { slots }) {
+    return () => (
+      <div class="secondary">
+        <div class="secondary-head">{slots.head && slots.head()}</div>
+        <div class="secondary-body">{slots.body && slots.body()}</div>
+      </div>
+    )
+  }
+})

src/modules/index.ts

@@ -14,6 +14,7 @@ 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'
+import Artist, { NAMESPACED as ArtistNameSpaced } from '@/pages/artist/module'
 
 export {
   LayoutNameSpaced,
@@ -24,7 +25,8 @@ export {
   HeaderNameSpaced,
   FooterNameSpaced,
   AuthNameSpaced,
-  SongNameSpaced
+  SongNameSpaced,
+  ArtistNameSpaced
 }
 
 const modules = {
@@ -37,7 +39,8 @@ const modules = {
   [FooterNameSpaced]: Footer,
   [MainNameSpaced]: Main,
   [AuthNameSpaced]: Auth,
-  [SongNameSpaced]: Song
+  [SongNameSpaced]: Song,
+  [ArtistNameSpaced]: Artist
 }
 
 export default modules

src/pages/artist/api/index.ts

@@ -0,0 +1,42 @@
+import { get } from '@/utils/http'
+import { Artists } from '@/interface/index'
+import { Artist, Album, Desc } from '../state'
+
+const artistCache = new Map()
+
+export const getArtist = async (id: string): Promise<Artist> => {
+  if (artistCache.has(id)) {
+    return artistCache.get(id)
+  }
+  const data = await get<{ data: { artist: Artist } }>('/api/artist/detail', {
+    id
+  })
+  artistCache.set(id, data.data.artist)
+  return data.data.artist
+}
+
+export const getArtistAlbums = async (id: string): Promise<Album[]> => {
+  const data = await get<{ hotAlbums: Album[] }>('/api/artist/album', {
+    id
+  })
+  return data.hotAlbums
+}
+
+export const getArtistDesc = async (
+  id: string
+): Promise<{ introduction: Desc[]; briefDesc: string }> => {
+  const data = await get<{ introduction: Desc[]; briefDesc: string }>(
+    '/api/artist/desc',
+    {
+      id
+    }
+  )
+  return data
+}
+
+export const getArtistSimi = async (id: string): Promise<Artists[]> => {
+  const data = await get<{ artists: Artists[] }>('/api/simi/artist', {
+    id
+  })
+  return data.artists
+}

src/pages/artist/children/albume.tsx

@@ -0,0 +1,21 @@
+import { defineComponent, onActivated } from 'vue'
+import { ArtistActions } from '../module'
+import { Grid } from '../components/grid'
+import { parentAP } from '../logic/ap'
+
+export const Albume = defineComponent({
+  name: 'ArtistAlbume',
+  setup() {
+    const { state, route, useActions } = parentAP()
+
+    onActivated(() => {
+      useActions(ArtistActions.SET_ACTION_ARTIST_ALBUM, route.params.id)
+    })
+
+    return () => (
+      <div class="artist-albume">
+        <Grid source={state.album} />
+      </div>
+    )
+  }
+})

src/pages/artist/children/detail.tsx

@@ -0,0 +1,27 @@
+import { defineComponent, onActivated } from 'vue'
+import { parentAP } from '../logic/ap'
+import { ArtistActions } from '../module'
+
+export const Desc = defineComponent({
+  name: 'ArtistDesc',
+  setup() {
+    const { state, route, useActions } = parentAP()
+
+    onActivated(() => {
+      useActions(ArtistActions.SET_ACTION_ARTIST_DESC, route.params.id)
+    })
+
+    return () => (
+      <div class="artist-desc">
+        <h2>{state.artist.name}简介</h2>
+        <div>{state.briefDesc}</div>
+        {state.introduction.map(item => (
+          <>
+            <h2>{item.ti}</h2>
+            <div v-html={item.txt.replace(/(.+)\n/g, '<div>$1</div>')}></div>
+          </>
+        ))}
+      </div>
+    )
+  }
+})

src/pages/artist/children/mv.tsx

@@ -0,0 +1,8 @@
+import { defineComponent } from 'vue'
+
+export const Mv = defineComponent({
+  name: 'ArtistMv',
+  setup() {
+    return () => <div class="artist-mv"></div>
+  }
+})

src/pages/artist/children/similar.tsx

@@ -0,0 +1,28 @@
+import { defineComponent, onActivated } from 'vue'
+import { ArtistActions } from '../module'
+import { Grid } from '../components/grid'
+import { Artists } from '@/interface/index'
+import { parentAP } from '../logic/ap'
+
+export const Similar = defineComponent({
+  name: 'ArtistSimilar',
+  setup() {
+    const { state, route, router, useActions } = parentAP()
+
+    onActivated(() => {
+      useActions(ArtistActions.SET_ACTION_ARTIST_SIMI, route.params.id)
+    })
+
+    const handleClick = (item: Artists) => {
+      router.push({
+        path: '/artist/' + item.id + '/albume'
+      })
+    }
+
+    return () => (
+      <div class="artist-similar">
+        <Grid source={state.simi} onClick={handleClick} />
+      </div>
+    )
+  }
+})

src/pages/artist/components/grid.less

@@ -0,0 +1,15 @@
+.grid-contanier {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  grid-gap: 20px;
+  li {
+    cursor: pointer;
+    div {
+      margin-top: 10px;
+    }
+  }
+  &-picurl {
+    width: 180px;
+    height: 180px;
+  }
+}

src/pages/artist/components/grid.tsx

@@ -0,0 +1,37 @@
+import { defineComponent, PropType } from 'vue'
+import { Image } from '@/components/image/index'
+import './grid.less'
+import { noop } from '@/utils'
+
+export const Grid = defineComponent({
+  name: 'Grid',
+  props: {
+    source: {
+      type: Array as PropType<any[]>,
+      default: () => []
+    },
+    onClick: {
+      type: Function as PropType<(value: any) => void>,
+      default: noop
+    }
+  },
+  emits: ['click'],
+  setup(props, { emit }) {
+    const handleClick = (item: any) => {
+      emit('click', item)
+    }
+    return () => (
+      <ul class="grid-contanier">
+        {props.source.map(item => (
+          <li onClick={() => handleClick(item)}>
+            <Image
+              name="grid-contanier-picurl"
+              src={item.blurPicUrl || item.picUrl}
+            />
+            <div>{item.name}</div>
+          </li>
+        ))}
+      </ul>
+    )
+  }
+})

src/pages/artist/index.ts

@@ -0,0 +1,4 @@
+export { Albume } from './children/albume'
+export { Desc } from './children/detail'
+export { Mv } from './children/mv'
+export { Similar } from './children/similar'

src/pages/artist/logic/ap.ts

@@ -0,0 +1,18 @@
+// ap = 穿甲弹头
+// The functions exported from this file can only be run in setup for reuse of logic codes
+import { useRoute, useRouter } from '@/hooks/index'
+import { uesModuleStore } from '@/hooks/index'
+import { NAMESPACED, ArtistState } from '../module'
+
+export const parentAP = () => {
+  const route = useRoute()
+  const router = useRouter()
+  const { useActions, useState } = uesModuleStore<ArtistState>(NAMESPACED)
+
+  return {
+    state: useState(),
+    route: route,
+    router: router,
+    useActions
+  }
+}

src/pages/artist/module.ts

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

src/pages/artist/sage.ts

@@ -0,0 +1,57 @@
+import { ActionTree, MutationTree } from 'vuex'
+import { RootState } from '@/store/index'
+import { Artist, ArtistState } from './state'
+import {
+  getArtist,
+  getArtistAlbums,
+  getArtistDesc,
+  getArtistSimi
+} from './api/index'
+
+export const enum ArtistMutations {
+  SET_ARTIST_DETAIL = 'SET_ARTIST_DETAIL',
+  SET_ARTIST_ALBUM = 'SET_ARTIST_ALBUM',
+  SET_ARTIST_DESC = 'SET_ARTIST_DESC',
+  SET_ARTIST_SIMI = 'SET_ARTIST_SIMI'
+}
+
+export const enum ArtistActions {
+  SET_ACTION_ARTIST_DETAIL = 'SET_ACTION_ARTIST_DETAIL',
+  SET_ACTION_ARTIST_ALBUM = 'SET_ACTION_ARTIST_ALBUM',
+  SET_ACTION_ARTIST_DESC = 'SET_ACTION_ARTIST_DESC',
+  SET_ACTION_ARTIST_SIMI = 'SET_ACTION_ARTIST_SIMI'
+}
+
+export const actions: ActionTree<ArtistState, RootState> = {
+  async [ArtistActions.SET_ACTION_ARTIST_DETAIL]({ commit }, id: string) {
+    const data = await getArtist(id)
+    commit(ArtistMutations.SET_ARTIST_DETAIL, data)
+  },
+  async [ArtistActions.SET_ACTION_ARTIST_ALBUM]({ commit }, id: string) {
+    const data = await getArtistAlbums(id)
+    commit(ArtistMutations.SET_ARTIST_ALBUM, data)
+  },
+  async [ArtistActions.SET_ACTION_ARTIST_DESC]({ commit }, id: string) {
+    const data = await getArtistDesc(id)
+    commit(ArtistMutations.SET_ARTIST_DESC, data)
+  },
+  async [ArtistActions.SET_ACTION_ARTIST_SIMI]({ commit }, id: string) {
+    const data = await getArtistSimi(id)
+    commit(ArtistMutations.SET_ARTIST_SIMI, data)
+  }
+}
+export const mutations: MutationTree<ArtistState> = {
+  [ArtistMutations.SET_ARTIST_DETAIL](state, artist: Artist) {
+    state.artist = artist
+  },
+  [ArtistMutations.SET_ARTIST_ALBUM](state, album) {
+    state.album = album
+  },
+  [ArtistMutations.SET_ARTIST_DESC](state, { introduction, briefDesc }) {
+    state.introduction = introduction
+    state.briefDesc = briefDesc
+  },
+  [ArtistMutations.SET_ARTIST_SIMI](state, simi) {
+    state.simi = simi
+  }
+}