diff --git a/package.json b/package.json
index 55cc77d7..400f44be 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,7 @@
     "ts-loader": "^8.0.6",
     "typescript": "^4.0.3",
     "url-loader": "^4.1.1",
-    "v-easy-components": "2.0.0-beta.9",
+    "v-easy-components": "^2.0.0-beta.10",
     "vue-cli-plugin-electron-builder": "~2.0.0-rc.4"
   },
   "gitHooks": {
diff --git a/src/components/swiper/index.tsx b/src/components/swiper/index.tsx
index 545f059a..8aab6ec0 100644
--- a/src/components/swiper/index.tsx
+++ b/src/components/swiper/index.tsx
@@ -8,7 +8,7 @@ import {
 } from 'vue'
 import { FindMusicInteface } from '@/interface/index'
 import classnames from 'classnames'
-import { useInternal } from '@/utils/hook'
+import { useInternal } from '@/hooks/index'
 import './index.less'
 
 const prefix = 'swiper'
diff --git a/src/utils/hook.ts b/src/hooks/hook.ts
similarity index 72%
rename from src/utils/hook.ts
rename to src/hooks/hook.ts
index be36a58c..9020c465 100644
--- a/src/utils/hook.ts
+++ b/src/hooks/hook.ts
@@ -1,4 +1,5 @@
-import { on, off } from './index'
+import { useStore } from 'vuex'
+import { on, off } from '@/utils/index'
 
 interface InternalHook {
   startInternal: () => void
@@ -27,24 +28,12 @@ export const useInternal = (ms: number, cb: () => void): InternalHook => {
   }
 }
 
-export const dragHook = (container: HTMLElement, target: HTMLElement) => {
-  // const boxClient = {
-  //   w: document.documentElement.offsetWidth,
-  //   h: document.documentElement.offsetHeight
-  // }
-
+export const useDrag = (container: HTMLElement, target: HTMLElement) => {
   const cache = {
     x: 0,
     y: 0
   }
 
-  // const containerClient = {
-  //   grapX: container.offsetLeft,
-  //   grapY: container.offsetTop,
-  //   w: container.offsetWidth,
-  //   h: container.offsetHeight
-  // }
-
   let clickPosition: {
     x: number
     y: number
@@ -81,15 +70,6 @@ export const dragHook = (container: HTMLElement, target: HTMLElement) => {
       requestAnimationFrame(() => {
         container.style.transform = `matrix(1, 0, 0, 1, ${left}, ${top}) translateZ(0)`
       })
-      // if (left >= 0 && left + containerClient.w <= boxClient.w) {
-
-      // }
-      // if (top >= 0 && top + containerClient.h <= boxClient.h) {
-      //   requestAnimationFrame(() => {
-      //     cache.y = top
-      //     container.style.transform = `matrix(1, 0, 0, 1, ${cache.x}, ${cache.y})`
-      //   })
-      // }
     }
   }
 
@@ -112,3 +92,21 @@ export const dragHook = (container: HTMLElement, target: HTMLElement) => {
     stop
   }
 }
+
+export function uesModuleStore<S>(NAMESPACED: string) {
+  const store = useStore()
+  const useActions = (type: string, payload: string) => {
+    return store.dispatch(NAMESPACED + '/' + type, payload)
+  }
+  const useState = (): S => {
+    return store.state[NAMESPACED]
+  }
+  const useMutations = (type: string, payload: string): void => {
+    store.commit(NAMESPACED + '/' + type, payload)
+  }
+  return {
+    useActions: useActions,
+    useMutations: useMutations,
+    useState: useState
+  }
+}
diff --git a/src/hooks/index.tsx b/src/hooks/index.tsx
index 9d45b1ea..a912c511 100644
--- a/src/hooks/index.tsx
+++ b/src/hooks/index.tsx
@@ -1,3 +1,4 @@
+export * from './hook'
 import { inject, provide } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { useStore } from 'vuex'
diff --git a/src/layout/container.tsx b/src/layout/container.tsx
index 8c759af7..3c119242 100644
--- a/src/layout/container.tsx
+++ b/src/layout/container.tsx
@@ -1,11 +1,18 @@
-import { defineComponent, nextTick, ComponentPublicInstance, ref } from 'vue'
+import {
+  defineComponent,
+  nextTick,
+  ComponentPublicInstance,
+  ref,
+  toRefs,
+  onMounted,
+  watch
+} from 'vue'
 import { Header } from '@/pages/header/view/index'
 import { Main } from '@/pages/main/view/index'
 import { Footer } from '@/pages/footer/view/index'
-import { mapState } from './module'
 import { ENV } from '@/interface/app'
-import { State, Size } from './state'
-import { dragHook } from '@/utils/hook'
+import { useDrag, uesModuleStore } from '@/hooks/index'
+import { State, Size, NAMESPACED } from './module'
 import './container.less'
 
 const { VUE_APP_PLATFORM } = window as ENV
@@ -13,49 +20,45 @@ const { VUE_APP_PLATFORM } = window as ENV
 export const Container = defineComponent({
   name: 'Container',
   setup() {
-    return {
-      start: ref(),
-      stop: ref()
-    }
-  },
-  computed: {
-    ...mapState(['screenSize'])
-  },
-  watch: {
-    screenSize(v) {
+    const startDrag = ref()
+    const stopDrag = ref()
+    const container = ref()
+    const target = ref()
+
+    const { useState } = uesModuleStore<State>(NAMESPACED)
+
+    const { screenSize } = toRefs(useState())
+
+    watch(screenSize, v => {
       if (v === Size.MD) {
-        this?.start()
+        startDrag.value()
       } else {
-        this?.stop()
+        stopDrag.value()
       }
-    }
-  },
-  mounted() {
-    if (VUE_APP_PLATFORM === 'browser') {
-      nextTick(() => {
-        const { container, target } = this.$refs
-        const { start, stop } = dragHook(
-          container as HTMLElement,
-          (target as ComponentPublicInstance).$el
+    })
+
+    onMounted(() => {
+      if (VUE_APP_PLATFORM === 'browser') {
+        const { start, stop } = useDrag(
+          container.value as HTMLElement,
+          (target.value as ComponentPublicInstance).$el
         )
-        this.start = start
-        this.stop = stop
-      })
-    }
-  },
-  render(this: State) {
-    const { screenSize } = this
-    return (
+        startDrag.value = start
+        stopDrag.value = stop
+      }
+    })
+
+    return () => (
       <div
-        ref="container"
+        ref={container}
         class={[
           'container',
-          'container-' + screenSize,
+          'container-' + screenSize.value,
           'container-' + VUE_APP_PLATFORM,
-          'container-' + VUE_APP_PLATFORM + '-' + screenSize
+          'container-' + VUE_APP_PLATFORM + '-' + screenSize.value
         ]}
       >
-        <Header ref="target"></Header>
+        <Header ref={target}></Header>
         <Main></Main>
         <Footer></Footer>
       </div>
diff --git a/src/pages/footer/view/index.tsx b/src/pages/footer/view/index.tsx
index 3185c1c4..3b42f638 100644
--- a/src/pages/footer/view/index.tsx
+++ b/src/pages/footer/view/index.tsx
@@ -1,24 +1,23 @@
-import { defineComponent } from 'vue'
-import { mapMutations, LayoutActions, mapState } from '@/layout/module'
+import { defineComponent, toRefs } from 'vue'
+import { NAMESPACED, State, LayoutActions } from '@/layout/module'
+import { uesModuleStore } from '@/hooks/index'
 import './index.less'
 
 export const Footer = defineComponent({
   name: 'Footer',
-  computed: {
-    ...mapState(['rebackSize'])
-  },
-  methods: {
-    ...mapMutations({
-      changeWindowSize: LayoutActions.CHANGE_WINDOW_SIZE
-    })
-  },
-  render() {
-    return (
+  setup() {
+    const { useState, useMutations } = uesModuleStore<State>(NAMESPACED)
+
+    const { rebackSize } = toRefs(useState())
+
+    return () => (
       <footer class="footer">
         <div class="footer-reduction">
           <ve-button
             size="small"
-            onClick={() => this.changeWindowSize(this.rebackSize)}
+            onClick={() =>
+              useMutations(LayoutActions.CHANGE_WINDOW_SIZE, rebackSize.value)
+            }
           >
             <icon icon="fullscreen2" color="#000"></icon>
           </ve-button>
diff --git a/src/pages/header/component/push-shift.tsx b/src/pages/header/component/push-shift.tsx
index e9fe85eb..315df192 100644
--- a/src/pages/header/component/push-shift.tsx
+++ b/src/pages/header/component/push-shift.tsx
@@ -1,83 +1,79 @@
-import { defineComponent, ComponentPublicInstance, nextTick } from 'vue'
-import { mapMutations, Store, MutationMethod } from 'vuex'
+import { defineComponent, nextTick, watch, toRefs } from 'vue'
 import { Mutations } from '@/store/index'
-import { RootState } from '@/store/index'
 import classnames from 'classnames'
+import { useRoute, useStore, useRouter } from '@/hooks/index'
 import './puah-shift.less'
 
-interface Mtehods {
-  routeForward: MutationMethod
-  routeBack: MutationMethod
-  setHistoryRoute: MutationMethod
-  routeCanBeCollect: MutationMethod
-  handleRouteCommand: (payload: string) => void
-}
-
 enum COMMAND {
   FORWARD = 'FORWARD',
   BACK = 'BACK'
 }
 
-type This = ComponentPublicInstance & {
-  $store: Store<RootState>
-} & Mtehods
-
 export const PushShift = defineComponent({
   name: 'Logo',
-  watch: {
-    $route(this: This, route, oldRoute) {
-      const { historyRoute } = this.$store.state
+  setup() {
+    const store = useStore()
+    const setHistoryRoute = (routeObj: { oldRoute: string }) => {
+      store.commit(Mutations.SET_HISTORY_ROUTE, { oldRoute: routeObj.oldRoute })
+    }
+    const routeCanBeCollect = (isCollect: boolean) => {
+      store.commit(Mutations.CAN_BE_COLLECT, isCollect)
+    }
+    const routeForward = (path: string) => {
+      store.commit(Mutations.FORWARD_HISTORY_ROUTE, path)
+    }
+    const routeBack = (path: string) => {
+      store.commit(Mutations.BACK_HISTORY_ROUTE, path)
+    }
+
+    const { path } = toRefs(useRoute())
+
+    watch(path, (route, oldRoute) => {
+      const { historyRoute } = store.state
       if (!historyRoute.canBeCollect) {
-        this.routeCanBeCollect(true)
+        routeCanBeCollect(true)
       } else {
-        const { historyRoute } = this.$store.state
+        const { historyRoute } = store.state
         const backRoute = historyRoute.after[historyRoute.after.length - 1]
         const forwardRoute = historyRoute.before[historyRoute.before.length - 1]
-        if (route.path === backRoute) {
-          this.routeForward(oldRoute.path)
-        } else if (route.path === forwardRoute) {
-          this.routeBack(oldRoute.path)
+        if (route === backRoute) {
+          routeForward(oldRoute)
+        } else if (route === forwardRoute) {
+          routeBack(oldRoute)
         } else {
-          this.setHistoryRoute({
-            oldRoute: oldRoute.path,
-            route: route.path
+          setHistoryRoute({
+            oldRoute: oldRoute
           })
         }
       }
-    }
-  },
-  methods: {
-    ...mapMutations({
-      setHistoryRoute: Mutations.SET_HISTORY_ROUTE,
-      routeBack: Mutations.BACK_HISTORY_ROUTE,
-      routeForward: Mutations.FORWARD_HISTORY_ROUTE,
-      routeCanBeCollect: Mutations.CAN_BE_COLLECT
-    }),
-    handleRouteCommand(this: This, payload: string) {
-      const { historyRoute } = this.$store.state
-      this.routeCanBeCollect(false)
+    })
+
+    const router = useRouter()
+    const handleRouteCommand = (payload: string) => {
+      const { historyRoute } = store.state
+      routeCanBeCollect(false)
       if (payload === COMMAND.FORWARD) {
-        this.routeForward(this.$route.path)
+        routeForward(path.value)
       }
       if (payload === COMMAND.BACK) {
-        this.routeBack(this.$route.path)
+        routeBack(path.value)
       }
       nextTick(() => {
-        this.$router
+        router
           .replace({
             path: historyRoute.needRoute
           })
           .then(() => {
-            this.routeCanBeCollect(true)
+            routeCanBeCollect(true)
           })
       })
     }
-  },
-  render(this: This) {
-    const { historyRoute } = this.$store.state
-    const forward = () => this.handleRouteCommand(COMMAND.FORWARD)
-    const back = () => this.handleRouteCommand(COMMAND.BACK)
-    return (
+
+    const { historyRoute } = store.state
+    const forward = () => handleRouteCommand(COMMAND.FORWARD)
+    const back = () => handleRouteCommand(COMMAND.BACK)
+
+    return () => (
       <div class="push-shift">
         <ve-button
           disabled={!historyRoute.before.length}
diff --git a/src/pages/header/component/search.less b/src/pages/header/component/search.less
index 40ac8ff8..f14fab49 100644
--- a/src/pages/header/component/search.less
+++ b/src/pages/header/component/search.less
@@ -33,6 +33,7 @@
       background-color: #0000000f;
       border: none;
       color: white;
+      font-size: 13px;
       &:focus {
         box-shadow: none;
       }
diff --git a/src/pages/header/component/search.tsx b/src/pages/header/component/search.tsx
index 088e0bb6..1e7ba4b1 100644
--- a/src/pages/header/component/search.tsx
+++ b/src/pages/header/component/search.tsx
@@ -1,7 +1,8 @@
 import { defineComponent, ref, computed, toRefs, VNode } from 'vue'
 import { debounce } from 'lodash'
 import { Actions } from '../sage'
-import { createUesHook } from '../module'
+import { uesModuleStore } from '@/hooks/index'
+import { NAMESPACED, State } from '../module'
 import './search.less'
 
 interface Context {
@@ -30,7 +31,7 @@ export const Search = defineComponent({
     Option
   },
   setup() {
-    const { useActions, useState } = createUesHook()
+    const { useActions, useState } = uesModuleStore<State>(NAMESPACED)
 
     const words = ref('')
     const loading = ref(false)
diff --git a/src/pages/header/module.ts b/src/pages/header/module.ts
index fcdcb844..86faf39c 100644
--- a/src/pages/header/module.ts
+++ b/src/pages/header/module.ts
@@ -1,6 +1,6 @@
 import { createNamespacedHelpers, useStore } from 'vuex'
 import { actions, mutations } from './sage'
-import { state, State } from './state'
+import { state } from './state'
 
 export * from './state'
 export * from './sage'
@@ -11,20 +11,6 @@ export const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
   NAMESPACED
 )
 
-export const createUesHook = () => {
-  const store = useStore()
-  const useActions = (type: string, payload: string) => {
-    return store.dispatch(NAMESPACED + '/' + type, payload)
-  }
-  const useState = (): State => {
-    return store.state[NAMESPACED]
-  }
-  return {
-    useActions: useActions,
-    useState: useState
-  }
-}
-
 export default {
   namespaced: true,
   state,
diff --git a/src/pages/header/view/index.tsx b/src/pages/header/view/index.tsx
index 47d724c2..6a387a2c 100644
--- a/src/pages/header/view/index.tsx
+++ b/src/pages/header/view/index.tsx
@@ -1,12 +1,13 @@
 import { defineComponent, ref } from 'vue'
 import { Action } from '@/electron/event/action-types'
 import { ENV } from '@/interface/app'
-import { mapMutations, LayoutActions } from '@/layout/module'
 import { IpcRenderer } from '@/electron/event/ipc-renderer'
 import { Logo } from '../component/logo'
 import { PushShift } from '../component/push-shift'
 import { Setting } from '../component/setting'
 import { Search } from '../component/search'
+import { uesModuleStore } from '@/hooks/index'
+import { NAMESPACED, State, LayoutActions } from '@/layout/module'
 import './index.less'
 
 const { VUE_APP_PLATFORM } = window as ENV
@@ -30,39 +31,31 @@ export const Header = defineComponent({
   name: 'Header',
   setup() {
     const windowSize = ref('enlarge')
-    return {
-      windowSize
-    }
-  },
-  methods: {
-    ...mapMutations({
-      changeWindowSize: LayoutActions.CHANGE_WINDOW_SIZE
-    }),
-    handleWindowControl(action: Action) {
+
+    const { useMutations } = uesModuleStore<State>(NAMESPACED)
+
+    const handleWindowControl = (action: Action) => {
       if (VUE_APP_PLATFORM === 'browser') {
-        this.changeWindowSize(actionToClass[action])
+        useMutations(LayoutActions.CHANGE_WINDOW_SIZE, actionToClass[action])
       }
       if (VUE_APP_PLATFORM === 'electron') {
         importIpc().then(event => {
           event.sendAsyncIpcRendererEvent(action)
         })
       }
-    },
-    windowsChangeSize() {
-      const { windowSize } = this
-      if (windowSize === 'shrink') {
-        this.windowSize = 'enlarge'
-        this.handleWindowControl(Action.RESTORE_WINDOW)
+    }
+
+    const windowsChangeSize = () => {
+      if (windowSize.value === 'shrink') {
+        windowSize.value = 'enlarge'
+        handleWindowControl(Action.RESTORE_WINDOW)
       } else {
-        this.windowSize = 'shrink'
-        this.handleWindowControl(Action.MAXIMIZE_WINDOW)
+        windowSize.value = 'shrink'
+        handleWindowControl(Action.MAXIMIZE_WINDOW)
       }
-      this.windowSize = windowSize === 'shrink' ? 'enlarge' : 'shrink'
     }
-  },
-  render() {
-    const { windowSize } = this
-    return (
+
+    return () => (
       <header class="header">
         <Logo></Logo>
         <div class="header-right">
@@ -79,22 +72,22 @@ export const Header = defineComponent({
               <ve-button
                 type="text"
                 class="header-window-btn"
-                onClick={() => this.handleWindowControl(Action.MINIMIZE_WINDOW)}
+                onClick={() => handleWindowControl(Action.MINIMIZE_WINDOW)}
               >
                 <icon icon="shrink-taskbar" size={20}></icon>
               </ve-button>
               <ve-button
                 type="text"
                 class="header-window-btn"
-                onClick={this.windowsChangeSize}
+                onClick={windowsChangeSize}
               >
-                <icon icon={windowSize} size={20}></icon>
+                <icon icon={windowSize.value} size={20}></icon>
               </ve-button>
               {VUE_APP_PLATFORM !== 'browser' && (
                 <ve-button
                   type="text"
                   class="header-window-btn"
-                  onClick={() => this.handleWindowControl(Action.CLOSE_WINDOW)}
+                  onClick={() => handleWindowControl(Action.CLOSE_WINDOW)}
                 >
                   <icon icon="cross" size={22}></icon>
                 </ve-button>
diff --git a/yarn.lock b/yarn.lock
index 04e27a17..53de9e7f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16389,10 +16389,10 @@ uuid@^8.0.0:
   resolved "https://registry.npm.taobao.org/uuid/download/uuid-8.3.0.tgz#ab738085ca22dc9a8c92725e459b1d507df5d6ea"
   integrity sha1-q3OAhcoi3JqMknJeRZsdUH311uo=
 
-v-easy-components@2.0.0-beta.9:
-  version "2.0.0-beta.9"
-  resolved "https://registry.npm.taobao.org/v-easy-components/download/v-easy-components-2.0.0-beta.9.tgz#60dd87618cd98843801eb34971632fd452a750cb"
-  integrity sha1-YN2HYYzZiEOAHrNJcWMv1FKnUMs=
+v-easy-components@^2.0.0-beta.10:
+  version "2.0.0-beta.10"
+  resolved "https://registry.npm.taobao.org/v-easy-components/download/v-easy-components-2.0.0-beta.10.tgz#56334a16e6a7d5305a67cb6676466ab3dffda905"
+  integrity sha1-VjNKFuan1TBaZ8tmdkZqs9/9qQU=
   dependencies:
     "@popperjs/core" "^2.4.4"
     core-js "^3.6.5"