refactor: move some function to hooks

radishes-music · Dec 24, 2023 · a346777 · a346777
1 parent d1a2140
commit a346777
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 51 deletions.
diff --git a/src/hooks/common.ts b/src/hooks/common.ts
@@ -0,0 +1,15 @@
+import { onActivated, onMounted, ref } from 'vue'
+
+export const useOnActivated = (fn: () => void) => {
+  const isMounted = ref(false)
+
+  onMounted(() => {
+    isMounted.value = true
+  })
+
+  onActivated(() => {
+    if (isMounted.value) {
+      fn()
+    }
+  })
+}
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -2,6 +2,8 @@ export * from './hook'
 export * from './http'
 export * from './auth'
 export * from './message'
+export * from './path'
+export * from './common'
 import { useRoute, useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 

diff --git a/src/hooks/path.ts b/src/hooks/path.ts
@@ -0,0 +1,35 @@
+import { useRouter } from '@/hooks/index'
+import { isLogin } from '@/helpers/index'
+import { useAuthView } from '@/hooks/index'
+
+export const useJumpSongList = () => {
+  const router = useRouter()
+  const authView = useAuthView()
+  return (id: number) => {
+    if (String(id) === '-1' && !isLogin()) {
+      return authView(true)
+    }
+    router.push({
+      path: '/list/song/' + id
+    })
+  }
+}
+
+export const useJumpAblumList = () => {
+  const router = useRouter()
+
+  return (id: number) => {
+    router.push({
+      path: '/list/album/' + id
+    })
+  }
+}
+
+export const useJumpArtist = () => {
+  const router = useRouter()
+  return (id: number) => {
+    router.push({
+      path: '/artist/' + id + '/album'
+    })
+  }
+}
diff --git a/src/pages/findmusic/recommend/components/dailysong.vue b/src/pages/findmusic/recommend/components/dailysong.vue
@@ -10,22 +10,20 @@
 </template>
 
 <script setup lang="ts">
-import { onActivated, onMounted, reactive, ref } from 'vue'
-import { Jump } from '@/shared/jump-shared'
+import { onMounted, reactive } from 'vue'
 import { useRecommendStore } from '@/pinia'
 import { SongList } from '@/components-business/song-list'
-
-const isMounted = ref(false)
+import { useJumpSongList, useOnActivated } from '@/hooks'
 
 const state = reactive({
   loading: true
 })
 
 const store = useRecommendStore()
 
-const jump = new Jump()
+const jumpSongList = useJumpSongList()
 
-const songClick = (item: any) => jump.songList(item.id)
+const songClick = (item: any) => jumpSongList(item.id)
 
 const loadData = async (needLoading = true) => {
   if (needLoading) {
@@ -37,15 +35,10 @@ const loadData = async (needLoading = true) => {
   }
 }
 
-onActivated(() => {
-  if (isMounted.value) {
-    loadData(false)
-  }
-})
+useOnActivated(() => loadData(false))
 
-onMounted(async () => {
-  await loadData()
-  isMounted.value = true
+onMounted(() => {
+  loadData()
 })
 </script>
 

diff --git a/src/pages/findmusic/recommend/components/newsong.vue b/src/pages/findmusic/recommend/components/newsong.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="recommend-song">
-    <h2 class="!text-lg mb-6">最新音乐</h2>
-    <ul class="grid grid-cols-2 gap-x-4 gap-2" v-if="!state.loading">
+    <h2 class="!text-lg">最新音乐</h2>
+    <ul class="grid grid-cols-2 gap-x-4 gap-2 pt-[10px]" v-if="!state.loading">
       <li
         v-for="song in store.songs"
         :key="song.id"
@@ -47,6 +47,7 @@ import { onMounted, reactive } from 'vue'
 import { useRecommendStore } from '@/pinia'
 import card from '@/components-business/song-list/card.vue'
 import { playMusic } from '@/shared/music-shared'
+import { useOnActivated } from '@/hooks'
 
 const state = reactive({
   loading: true
@@ -58,6 +59,10 @@ const songClick = (id: number) => {
   playMusic(id)
 }
 
+useOnActivated(() => {
+  store.getRecommendNewSong()
+})
+
 onMounted(async () => {
   state.loading = true
   await store.getRecommendNewSong()

diff --git a/src/pages/findmusic/recommend/components/recommendsong.vue b/src/pages/findmusic/recommend/components/recommendsong.vue
@@ -10,20 +10,20 @@
 </template>
 
 <script setup lang="ts">
-import { onActivated, onMounted, reactive } from 'vue'
-import { Jump } from '@/shared/jump-shared'
+import { onMounted, reactive } from 'vue'
 import { useRecommendStore } from '@/pinia'
 import { SongList } from '@/components-business/song-list'
+import { useJumpSongList, useOnActivated } from '@/hooks'
 
 const state = reactive({
   loading: true
 })
 
 const store = useRecommendStore()
 
-const jump = new Jump()
+const jumpSongList = useJumpSongList()
 
-const songClick = (item: any) => jump.songList(item.id)
+const songClick = (item: any) => jumpSongList(item.id)
 
 const loadData = async (needLoading = true) => {
   if (needLoading) {
@@ -35,9 +35,7 @@ const loadData = async (needLoading = true) => {
   }
 }
 
-onActivated(() => {
-  loadData(false)
-})
+useOnActivated(() => loadData(false))
 
 onMounted(() => {
   loadData()

diff --git a/src/pages/sidebar/view/index.tsx b/src/pages/sidebar/view/index.tsx
@@ -1,4 +1,4 @@
-import { defineComponent, ref } from 'vue'
+import { defineComponent } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
 import classnames from 'classnames'
 import { navRouter } from '@/router/index'
@@ -18,36 +18,34 @@ export const Sidebar = defineComponent({
       <aside class="sidebar">
         <SidebarAuth></SidebarAuth>
         <div class="sidebar-nav-contanier">
-          {nav.map((routerGroup: CustomizeRouteRecordRaw) => (
-            <div
-              class={classnames('sidebar-nav', {
-                'sidebar-nav-active': route.path.includes(routerGroup.path)
-              })}
-            >
-              {routerGroup.meta?.beforeHeader && (
-                <header class="sidebar-nav-header">
-                  {routerGroup.meta.beforeHeader}
-                </header>
-              )}
-              <RouterLink
-                class="sidebar-nav-name flex items-center pl-3 rounded"
-                to={routerGroup.path}
-              >
-                {routerGroup.path === '/music' && (
-                  <ph-vinyl-record size={20} class="mr-2" weight="duotone" />
-                )}
+          {nav.map((routerGroup: CustomizeRouteRecordRaw) => {
+            const Icon = routerGroup?.meta?.icon
 
-                {routerGroup.path === '/download' && (
-                  <ph-download size={20} class="mr-2" weight="duotone" />
+            return (
+              <div
+                class={classnames('sidebar-nav', {
+                  'sidebar-nav-active': route.path.includes(routerGroup.path)
+                })}
+              >
+                {routerGroup.meta?.beforeHeader && (
+                  <header class="sidebar-nav-header">
+                    {routerGroup.meta.beforeHeader}
+                  </header>
                 )}
+                <RouterLink
+                  class="sidebar-nav-name flex items-center pl-3 rounded"
+                  to={routerGroup.path}
+                >
+                  {Icon && (
+                    // @ts-expect-error
+                    <Icon size={20} class="mr-2" weight="duotone"></Icon>
+                  )}
 
-                {routerGroup.path === '/cloud' && (
-                  <ph-soundcloud-logo size={20} class="mr-2" weight="duotone" />
-                )}
-                {routerGroup.meta?.name}
-              </RouterLink>
-            </div>
-          ))}
+                  {routerGroup.meta?.name}
+                </RouterLink>
+              </div>
+            )
+          })}
 
           {playlist.value?.map((item: any, index: number) => (
             <div

diff --git a/src/router/nav.ts b/src/router/nav.ts
@@ -15,6 +15,13 @@ import { CustomizeRouteRecordRaw } from '@/interface'
 
 import Recommend from '@/pages/findmusic/recommend/index.vue'
 
+import {
+  PhVinylRecord,
+  PhDownload,
+  PhSoundcloudLogo,
+  PhFileAudio
+} from '@phosphor-icons/vue'
+
 export const baseNavRouter: CustomizeRouteRecordRaw[] = [
   {
     path: '/userinfo/:uid',
@@ -81,6 +88,7 @@ export const baseNavRouter: CustomizeRouteRecordRaw[] = [
     name: News.name,
     meta: {
       name: '发现音乐',
+      icon: PhVinylRecord,
       browser: true,
       electron: true
     },
@@ -175,6 +183,7 @@ export const baseNavRouter: CustomizeRouteRecordRaw[] = [
     name: Download.name,
     meta: {
       name: '下载管理',
+      icon: PhDownload,
       beforeHeader: '我的音乐',
       browser: true,
       electron: true
@@ -210,6 +219,7 @@ export const baseNavRouter: CustomizeRouteRecordRaw[] = [
     name: LocalMusic.name,
     meta: {
       name: '本地音乐',
+      icon: PhFileAudio,
       browser: false,
       electron: true
     },
@@ -244,6 +254,7 @@ export const baseNavRouter: CustomizeRouteRecordRaw[] = [
     name: Cloud.name,
     meta: {
       name: '我的音乐云盘',
+      icon: PhSoundcloudLogo,
       auth: true,
       browser: true,
       electron: true,

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -325,6 +325,7 @@ export const overNum = (num: number) => {
   return formatCount(num)
 }
 
+// FIXME: cant break
 export const wrapperReFetch = async <T>(
   asyncGet: (...args: any) => Promise<T>
 ): Promise<T> => {