fix: the drag area is restricted to the header

src/components/swiper/index.tsx

@@ -2,6 +2,7 @@ import {
   defineComponent,
   ref,
   watch,
+  watchEffect,
   onUnmounted,
   onMounted,
   toRefs
@@ -20,12 +21,17 @@ export const Swiper = defineComponent({
     banners: {
       type: Object as () => FindMusicInteface.Banners[],
       required: true
+    },
+    running: {
+      type: Boolean as () => boolean
     }
   },
   setup(props) {
     const current = ref(0)
     const spanCurrent = ref(false)
 
+    const { running } = toRefs(props)
+
     const { startInternal, stopInternal } = useInternal(4000, () => {
       current.value =
         current.value >= props.banners.length - 1 ? 0 : current.value + 1
@@ -43,14 +49,18 @@ export const Swiper = defineComponent({
       startInternal()
     }
 
-    onMounted(() => {
-      startInternal()
-    })
-
     onUnmounted(() => {
       stopInternal()
     })
 
+    watchEffect(() => {
+      if (running?.value) {
+        startInternal()
+      } else {
+        stopInternal()
+      }
+    })
+
     watch(current, (modern, history) => {
       spanCurrent.value =
         Math.abs(modern - history) > 1 &&

src/hooks/hook.ts

@@ -6,6 +6,8 @@ interface InternalHook {
   stopInternal: () => void
 }
 
+type Noop = () => void
+
 export const useInternal = (ms: number, cb: () => void): InternalHook => {
   let t: NodeJS.Timeout
   let running = false
@@ -28,7 +30,12 @@ export const useInternal = (ms: number, cb: () => void): InternalHook => {
   }
 }
 
-export const useDrag = (container: HTMLElement, target: HTMLElement) => {
+export const useDrag = (
+  container: HTMLElement,
+  target: HTMLElement,
+  moveCb?: Noop,
+  stopCb?: Noop
+) => {
   const cache = {
     x: 0,
     y: 0
@@ -52,6 +59,7 @@ export const useDrag = (container: HTMLElement, target: HTMLElement) => {
       y: clientY
     }
     target.style.cursor = 'grabbing'
+    moveCb && moveCb()
   }
   const mouseup = () => {
     canMove = false
@@ -73,14 +81,20 @@ export const useDrag = (container: HTMLElement, target: HTMLElement) => {
     }
   }
 
+  const targetMouseUp = () => {
+    stopCb && stopCb()
+  }
+
   const stop = () => {
-    off(container, 'mousedown', mousedown)
+    off(target, 'mousedown', mousedown)
+    off(target, 'mouseup', targetMouseUp)
     off(document.documentElement, 'mouseup', mouseup)
     off(document.documentElement, 'mousemove', mousemove)
   }
 
   const start = () => {
-    on(container, 'mousedown', mousedown)
+    on(target, 'mousedown', mousedown)
+    on(target, 'mouseup', targetMouseUp)
     on(document.documentElement, 'mouseup', mouseup)
     on(document.documentElement, 'mousemove', mousemove)
   }
@@ -95,13 +109,13 @@ export const useDrag = (container: HTMLElement, target: HTMLElement) => {
 
 export function uesModuleStore<S>(NAMESPACED: string) {
   const store = useStore()
-  const useActions = (type: string, payload: string) => {
+  const useActions = (type: string, payload?: unknown) => {
     return store.dispatch(NAMESPACED + '/' + type, payload)
   }
   const useState = (): S => {
     return store.state[NAMESPACED]
   }
-  const useMutations = (type: string, payload: string): void => {
+  const useMutations = (type: string, payload?: unknown): void => {
     store.commit(NAMESPACED + '/' + type, payload)
   }
   return {

src/layout/container.tsx

@@ -13,6 +13,11 @@ import { Footer } from '@/pages/footer/view/index'
 import { ENV } from '@/interface/app'
 import { useDrag, uesModuleStore } from '@/hooks/index'
 import { State, Size, NAMESPACED } from './module'
+import { RecommendNameSpaced } from '@/modules/index'
+import {
+  State as RecommendState,
+  Mutations
+} from '@/pages/find-new-music/children/recommend/module'
 import './container.less'
 
 const { VUE_APP_PLATFORM } = window as ENV
@@ -26,6 +31,7 @@ export const Container = defineComponent({
     const target = ref()
 
     const { useState } = uesModuleStore<State>(NAMESPACED)
+    const RecommendStore = uesModuleStore<RecommendState>(RecommendNameSpaced)
 
     const { screenSize } = toRefs(useState())
 
@@ -41,7 +47,13 @@ export const Container = defineComponent({
       if (VUE_APP_PLATFORM === 'browser') {
         const { start, stop } = useDrag(
           container.value as HTMLElement,
-          (target.value as ComponentPublicInstance).$el
+          (target.value as ComponentPublicInstance).$el,
+          () => {
+            RecommendStore.useMutations(Mutations.SET_SWIPER_RINNING, false)
+          },
+          () => {
+            RecommendStore.useMutations(Mutations.SET_SWIPER_RINNING, true)
+          }
         )
         startDrag.value = start
         stopDrag.value = stop

src/layout/module.ts

@@ -1,4 +1,3 @@
-import { createNamespacedHelpers } from 'vuex'
 import { state } from './state'
 import { actions, mutations } from './sage'
 export { LayoutActions } from './sage'
@@ -7,13 +6,6 @@ export * from './state'
 
 export const NAMESPACED = 'Layout'
 
-export const {
-  mapState,
-  mapActions,
-  mapMutations,
-  mapGetters
-} = createNamespacedHelpers(NAMESPACED)
-
 export default {
   namespaced: true,
   state,

src/modules/index.ts

@@ -4,6 +4,8 @@ import Recommend, {
 } from '@/pages/find-new-music/children/recommend/module'
 import Header, { NAMESPACED as HeaderNameSpaced } from '@/pages/header/module'
 
+export { LayoutNameSpaced, RecommendNameSpaced, HeaderNameSpaced }
+
 const modules = {
   [LayoutNameSpaced]: Layout,
   [RecommendNameSpaced]: Recommend,

src/pages/find-new-music/children/recommend/module.ts

@@ -1,12 +1,10 @@
-import { createNamespacedHelpers } from 'vuex'
 import { state } from './state'
 import { actions, mutations } from './sage'
 
-export const NAMESPACED = 'Recommend'
+export * from './state'
+export * from './sage'
 
-export const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
-  NAMESPACED
-)
+export const NAMESPACED = 'Recommend'
 
 export default {
   namespaced: true,

src/pages/find-new-music/children/recommend/sage.ts

@@ -5,7 +5,8 @@ import { getSongList, getBanner } from './api/index'
 
 export const enum Mutations {
   SET_BANNERS = 'SET_BANNERS',
-  SET_SONG_LIST = 'SET_SONG_LIST'
+  SET_SONG_LIST = 'SET_SONG_LIST',
+  SET_SWIPER_RINNING = 'SET_SWIPER_RINNING'
 }
 
 export const enum Actions {
@@ -30,5 +31,8 @@ export const mutations: MutationTree<State> = {
   },
   [Mutations.SET_SONG_LIST](state, song: Song[]) {
     state.songList = song
+  },
+  [Mutations.SET_SWIPER_RINNING](state, running: boolean) {
+    state.runningSwiper = running
   }
 }

src/pages/find-new-music/children/recommend/state.ts

@@ -18,9 +18,11 @@ export interface Banners {
 export interface State {
   banners: Banners[]
   songList: Song[]
+  runningSwiper: boolean
 }
 
 export const state: State = {
   songList: [],
-  banners: []
+  banners: [],
+  runningSwiper: true
 }

src/pages/find-new-music/children/recommend/view/index.tsx

@@ -1,35 +1,63 @@
-import { defineComponent } from 'vue'
+import {
+  defineComponent,
+  toRefs,
+  onBeforeMount,
+  onActivated,
+  onDeactivated,
+  onMounted,
+  ref
+} from 'vue'
 import { Swiper } from '@/components/swiper/index'
-import { mapState, mapActions } from '../module'
+import { State, NAMESPACED } from '../module'
 import { Actions } from '../sage'
 import { SongList } from '@/components/song-list/index'
+import { uesModuleStore } from '@/hooks/index'
 import './index.less'
 
 export const Recommend = defineComponent({
   name: 'Recommend',
-  computed: {
-    ...mapState(['banners', 'songList'])
-  },
-  beforeMount() {
-    this.setBanner()
-    this.setSongList()
-  },
-  methods: {
-    ...mapActions({
-      setBanner: Actions.SET_ACTION_BANNERS,
-      setSongList: Actions.SET_ACTION_SONG_LIST
+  setup() {
+    const { useState, useActions } = uesModuleStore<State>(NAMESPACED)
+    const { banners, songList, runningSwiper } = toRefs(useState())
+
+    const getBanner = () => {
+      useActions(Actions.SET_ACTION_BANNERS)
+    }
+    const getSongList = () => {
+      useActions(Actions.SET_ACTION_SONG_LIST)
+    }
+
+    onActivated(() => {
+      console.log('onActivated')
+      // getBanner()
+      // getSongList()
     })
-  },
-  render() {
-    const { banners } = this
-    return (
+
+    onDeactivated(() => {
+      console.log('onDeactivated')
+    })
+
+    onBeforeMount(() => {
+      console.log('onBeforeMount')
+      getBanner()
+      getSongList()
+    })
+
+    onMounted(() => {
+      console.log('onMounted')
+    })
+
+    return () => (
       <div class="find-music-recommend">
         <div class="swiper-box">
-          <Swiper banners={banners}></Swiper>
+          <Swiper
+            banners={banners.value}
+            running={runningSwiper.value}
+          ></Swiper>
         </div>
         <div class="recommend-song">
           <h2>推荐歌单</h2>
-          <SongList songData={this.songList}></SongList>
+          <SongList songData={songList.value}></SongList>
         </div>
       </div>
     )

src/pages/find-new-music/view/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, KeepAlive, Component } from 'vue'
 import { RouteRecordRaw } from 'vue-router'
 import { SecondaryBar } from '@/components/secondary-bar/index'
 import { navRouter } from '@/router/index'
@@ -15,9 +15,18 @@ export const FindMusic = defineComponent({
     }
     // eslint-disable-next-line
     const handleChangeRoute = (route: RouteRecordRaw) => {}
+    const Slots = {
+      default: (component: { Component: Component }) => (
+        <KeepAlive>
+          <component is={component.Component}></component>
+        </KeepAlive>
+      )
+    }
     return () => (
       <div class="find-music">
         <SecondaryBar nav={nav}></SecondaryBar>
+        {/* See https://github.com/vuejs/jsx-next/issues/161 */}
+        {/* <router-view v-slots={Slots}></router-view> */}
         <router-view></router-view>
       </div>
     )

src/pages/header/module.ts

@@ -1,4 +1,3 @@
-import { createNamespacedHelpers, useStore } from 'vuex'
 import { actions, mutations } from './sage'
 import { state } from './state'
 
@@ -7,10 +6,6 @@ export * from './sage'
 
 export const NAMESPACED = 'Header'
 
-export const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
-  NAMESPACED
-)
-
 export default {
   namespaced: true,
   state,

src/pages/main/view/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue'
+import { defineComponent, KeepAlive } from 'vue'
 import { Sidebar } from '@/pages/sidebar/view/index'
 import './index.less'