diff --git a/package.json b/package.json
index c1daf35..3e3f320 100644
--- a/package.json
+++ b/package.json
@@ -38,7 +38,7 @@
     "@vue/eslint-config-standard": "^5.1.2",
     "babel-eslint": "^10.1.0",
     "babel-plugin-component": "^1.1.1",
-    "electron": "^8.0.0",
+    "electron": "^8.2.1",
     "eslint": "^6.7.2",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
diff --git a/src/App.vue b/src/App.vue
index 255c813..4dd9880 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,6 +5,7 @@
 </template>
 
 <style lang="scss">
+@import './assets/scss/theme.scss';
 html, body, #app{
   height: 100%;
   border-radius: 6px;
diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index e69de29..f76d6fb 100644
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -0,0 +1,14 @@
+// svg
+.zy-svg{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  svg{
+    width: 24px;
+    height: 24px;
+    stroke-width: 1;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    fill: none;
+  }
+}
diff --git a/src/assets/scss/theme.scss b/src/assets/scss/theme.scss
index e69de29..63c1ab5 100644
--- a/src/assets/scss/theme.scss
+++ b/src/assets/scss/theme.scss
@@ -0,0 +1,16 @@
+:root{
+  // light
+  --l-c: #823aa0;
+  --l-fontc: #808695;
+  --l-bgc: #ffffff;
+  --l-bgc-two: #f2f6f9;
+  --l-c-hover: #823aa022;
+  --l-c-active: #823aa099;
+  --l-bdc: #823aa033;
+  --l-bsc: #8e8da2;
+}
+
+@import './theme/light.scss';
+@import './theme/dark.scss';
+
+@import './style.scss';
diff --git a/src/assets/scss/theme/light.scss b/src/assets/scss/theme/light.scss
index e69de29..3ebe7db 100644
--- a/src/assets/scss/theme/light.scss
+++ b/src/assets/scss/theme/light.scss
@@ -0,0 +1,35 @@
+.theme-light{
+  background-color: var(--l-bgc);
+  .home{
+    .body{
+      background-color: var(--l-bgc-two);
+    }
+  }
+  .aside{
+    .zy-svg{
+      svg{
+        stroke: var(--l-c);
+      }
+      &:hover{
+        background-color: var(--l-c-hover);
+      }
+      &.active{
+        svg{
+          stroke: var(--l-c);
+          stroke-width: 2;
+          fill: var(--l-c-hover);
+        }
+      }
+    }
+  }
+  .frame{
+    span{
+      &.min{
+        background-color: #ffbe2a;
+      }
+      &.close{
+        background-color: #ff5f56;
+      }
+    }
+  }
+}
diff --git a/src/background.js b/src/background.js
index 386ab03..c75f1de 100644
--- a/src/background.js
+++ b/src/background.js
@@ -2,8 +2,8 @@
 
 import { app, ipcMain, protocol, BrowserWindow } from 'electron'
 import {
-  createProtocol,
-  installVueDevtools
+  createProtocol
+  // installVueDevtools
 } from 'vue-cli-plugin-electron-builder/lib'
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
@@ -88,12 +88,11 @@ app.on('ready', async () => {
     // Electron will not launch with Devtools extensions installed on Windows 10 with dark mode
     // If you are not using Windows 10 dark mode, you may uncomment these lines
     // In addition, if the linked issue is closed, you can upgrade electron and uncomment these lines
-    try {
-      await installVueDevtools()
-    } catch (e) {
-      console.error('Vue Devtools failed to install:', e.toString())
-    }
-
+    // try {
+    //   await installVueDevtools()
+    // } catch (e) {
+    //   console.error('Vue Devtools failed to install:', e.toString())
+    // }
   }
   createWindow()
 })
diff --git a/src/components/Aside.vue b/src/components/Aside.vue
index f1cdb99..fa789f7 100644
--- a/src/components/Aside.vue
+++ b/src/components/Aside.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="aside">
-    <span :class="[view === 'Film' ? 'active ': ''] + 'film'" @click="changeView('Film')">
+    <span :class="[view === 'Film' ? 'active ': ''] + 'film zy-svg'" @click="changeView('Film')">
       <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="apertureIconTitle">
         <title id="apertureIconTitle">{{$t('view')}}</title>
         <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path>
@@ -14,19 +14,19 @@
         </g>
       </svg>
     </span>
-    <span :class="[view === 'Play' ? 'active ': ''] + 'play'" @click="changeView('Play')">
+    <span :class="[view === 'Play' ? 'active ': ''] + 'play zy-svg'" @click="changeView('Play')">
       <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="playIconTitle">
         <title id="playIconTitle">播放</title>
         <path d="M20 12L5 21V3z"></path>
       </svg>
     </span>
-    <span :class="[view === 'Star' ? 'active ': ''] + 'star'" @click="changeView('Star')">
+    <span :class="[view === 'Star' ? 'active ': ''] + 'star zy-svg'" @click="changeView('Star')">
       <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="favouriteIconTitle">
         <title id="favouriteIconTitle">收藏</title>
         <path d="M12,21 L10.55,19.7051771 C5.4,15.1242507 2,12.1029973 2,8.39509537 C2,5.37384196 4.42,3 7.5,3 C9.24,3 10.91,3.79455041 12,5.05013624 C13.09,3.79455041 14.76,3 16.5,3 C19.58,3 22,5.37384196 22,8.39509537 C22,12.1029973 18.6,15.1242507 13.45,19.7149864 L12,21 Z"></path>
       </svg>
     </span>
-    <span :class="[view === 'Setting' ? 'active ': ''] + 'setting'" @click="changeView('Setting')">
+    <span :class="[view === 'Setting' ? 'active ': ''] + 'setting zy-svg'" @click="changeView('Setting')">
       <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="settingsIconTitle">
         <title id="settingsIconTitle">设置</title>
         <path d="M5.03506429,12.7050339 C5.01187484,12.4731696 5,12.2379716 5,12 C5,11.7620284 5.01187484,11.5268304 5.03506429,11.2949661 L3.20577137,9.23205081 L5.20577137,5.76794919 L7.9069713,6.32070904 C8.28729123,6.0461342 8.69629298,5.80882212 9.12862533,5.61412402 L10,3 L14,3 L14.8713747,5.61412402 C15.303707,5.80882212 15.7127088,6.0461342 16.0930287,6.32070904 L18.7942286,5.76794919 L20.7942286,9.23205081 L18.9649357,11.2949661 C18.9881252,11.5268304 19,11.7620284 19,12 C19,12.2379716 18.9881252,12.4731696 18.9649357,12.7050339 L20.7942286,14.7679492 L18.7942286,18.2320508 L16.0930287,17.679291 C15.7127088,17.9538658 15.303707,18.1911779 14.8713747,18.385876 L14,21 L10,21 L9.12862533,18.385876 C8.69629298,18.1911779 8.28729123,17.9538658 7.9069713,17.679291 L5.20577137,18.2320508 L3.20577137,14.7679492 L5.03506429,12.7050339 Z"></path>
@@ -58,15 +58,6 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-svg{
-  width: 24px;
-  height: 24px;
-  stroke: #823aa099;
-  stroke-width: 1;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  fill: none;
-}
 .aside{
   width: 60px;
   height: 100%;
@@ -76,43 +67,11 @@ svg{
   justify-content: center;
   align-items: center;
   flex-direction: column;
-  border-right: 1px solid #00000010;
   span{
     -webkit-app-region: no-drag;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    writing-mode: tb-rl;
-    color: #823aa055;
     width: 60px;
     height: 60px;
     cursor: pointer;
-    overflow: hidden;
-    &:hover{
-      animation: SHAni 0.8s ease both;
-      @keyframes SHAni {
-        to{
-          background-color: #823aa011;
-        }
-      }
-      svg{
-        animation: SHSAni 0.8s ease both;
-        @keyframes SHSAni {
-          to{
-            stroke: #823aa0ee;
-            stroke-width: 1.5;
-            fill: #823aa022;
-          }
-        }
-      }
-    }
-    &.active{
-      svg{
-        stroke: #823aa0;
-        stroke-width: 2;
-        fill: #823aa033;
-      }
-    }
   }
 }
 </style>
diff --git a/src/components/Detail.vue b/src/components/Detail.vue
index 0feceea..e51848d 100644
--- a/src/components/Detail.vue
+++ b/src/components/Detail.vue
@@ -36,7 +36,7 @@
 <script>
 import { mapMutations } from 'vuex'
 import tools from '../lib/site/tools'
-// const { clipboard } = require('electron')
+const { clipboard } = require('electron')
 export default {
   name: 'detail',
   data () {
@@ -105,23 +105,23 @@ export default {
       this.video = this.detail.v
       this.detail.show = false
       this.view = 'Play'
+    },
+    download (e) {
+      const name = e.split('$')[0]
+      const txt = encodeURI(e.split('$')[1])
+      clipboard.writeText(txt)
+      this.$message.success(`已复制 ${name} 下载链接, 快去下载吧!`)
+    },
+    allDownload () {
+      const urls = [...this.vDetail.mp4_urls]
+      let txt = ''
+      for (const i of urls) {
+        const url = encodeURI(i.split('$')[1])
+        txt += (url + '\n')
+      }
+      clipboard.writeText(txt)
+      this.$message.success('已复制全集下载链接, 快去下载吧!')
     }
-    // download (e) {
-    //   const name = e.split('$')[0]
-    //   const txt = encodeURI(e.split('$')[1])
-    //   clipboard.writeText(txt)
-    //   this.$message.success(`已复制 ${name} 下载链接, 快去下载吧!`)
-    // },
-    // allDownload () {
-    //   const urls = [...this.vDetail.mp4_urls]
-    //   let txt = ''
-    //   for (const i of urls) {
-    //     const url = encodeURI(i.split('$')[1])
-    //     txt += (url + '\n')
-    //   }
-    //   clipboard.writeText(txt)
-    //   this.$message.success('已复制全集下载链接, 快去下载吧!')
-    // }
   },
   created () {
     this.getDetail()
@@ -136,13 +136,12 @@ export default {
   width: 100%;
   height: 680px;
   background-color: #fff;
-  box-shadow:0 -4px 12px 0 #8e8da21f;
-  padding: 10px;
+  box-shadow:0 -4px 12px 0 #0c0c0e1f;
   color: #808695;
   z-index: 999;
   .detail-content{
-    height: 660px;
-    padding: 10px 40px;
+    height: 680px;
+    padding: 0 60px;
     position: relative;
     .detail-header{
       width: 100%;
@@ -155,7 +154,6 @@ export default {
         font-size: 16px;
       }
       .detail-close{
-        margin-right: 5px;
         svg{
           width: 24px;
           height: 24px;
@@ -173,7 +171,7 @@ export default {
       }
     }
     .detail-body{
-      height: 600px;
+      height: 630px;
       overflow-y: auto;
       &::-webkit-scrollbar{
         width: 5px;
@@ -196,7 +194,7 @@ export default {
         justify-content: flex-start;
         align-items: flex-start;
         flex-wrap: wrap;
-        width: 970px;
+        width: 1000px;
         padding: 10px;
         border: 1px solid #823aa022;
         border-radius: 2px;
@@ -289,7 +287,7 @@ export default {
       .desc{
         border: 1px solid #823aa033;
         padding: 10px;
-        width: 970px;
+        width: 1000px;
         margin-bottom: 10px;
         border-radius: 2px;
         font-size: 14px;
@@ -298,7 +296,7 @@ export default {
       .m3u8_urls, .mp4_urls{
         border: 1px solid #823aa033;
         padding: 10px;
-        width: 970px;
+        width: 1000px;
         margin-bottom: 10px;
         border-radius: 2px;
         .title{
diff --git a/src/components/Frame.vue b/src/components/Frame.vue
index e74df75..b72ca15 100644
--- a/src/components/Frame.vue
+++ b/src/components/Frame.vue
@@ -5,13 +5,13 @@
   </div>
 </template>
 <script>
-// const ipc = require('electron').ipcRenderer
+const ipc = require('electron').ipcRenderer
 export default {
   name: 'frame',
   methods: {
-    // frameClickEvent (e) {
-    //   ipc.send(e)
-    // }
+    frameClickEvent (e) {
+      ipc.send(e)
+    }
   }
 }
 </script>
@@ -33,12 +33,6 @@ export default {
     margin-left: 10px;
     cursor: pointer;
     opacity: 0.5;
-    &.min{
-      background-color: #ffbe2a;
-    }
-    &.close{
-      background-color: #ff5f56;
-    }
     &:hover{
       animation: heartbeat 3s ease-in-out infinite both;
     }
diff --git a/src/components/Play.vue b/src/components/Play.vue
index 00f3f72..d79edae 100644
--- a/src/components/Play.vue
+++ b/src/components/Play.vue
@@ -338,8 +338,8 @@ export default {
       })
     },
     topEvent () {
-      ipc.send('top')
-      this.checkTop()
+      // ipc.send('top')
+      // this.checkTop()
     },
     detailEvent () {
       this.detail = {
diff --git a/src/components/Share.vue b/src/components/Share.vue
index 6be4693..270583a 100644
--- a/src/components/Share.vue
+++ b/src/components/Share.vue
@@ -19,9 +19,9 @@
 </template>
 <script>
 import { mapMutations } from 'vuex'
-import tools from '../lib/site/tools'
+// import tools from '../lib/site/tools'
 import QrcodeVue from 'qrcode.vue'
-import html2canvas from 'html2canvas'
+// import html2canvas from 'html2canvas'
 // const { clipboard, nativeImage } = require('electron')
 export default {
   name: 'share',
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 4ef4dd2..5a424e9 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -18,19 +18,17 @@
 </template>
 
 <script>
-// @ is an alias to /src
-
 export default {
   name: 'Home',
-  data () {
-    return {
-      view: 'Film',
-      detail: {
-        show: false
-      },
-      share: {
-        show: false
-      }
+  computed: {
+    view () {
+      return this.$store.getters.getView
+    },
+    detail () {
+      return this.$store.getters.getDetail
+    },
+    share () {
+      return this.$store.getters.getShare
     }
   }
 }
@@ -40,5 +38,17 @@ export default {
   width: 100%;
   height: 100%;
   overflow: hidden;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  .body{
+    flex: 1;
+    height: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: flex-start;
+    flex-direction: column;
+    padding: 0 20px 20px;
+  }
 }
 </style>
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..b382d83
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  pluginOptions: {
+    electronBuilder: {
+      nodeIntegration: true
+    }
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 96523cb..bef0a2c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3607,10 +3607,10 @@ electron-to-chromium@^1.3.390:
   resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.404.tgz#8efc21dc57b284b0bb9473430c1cebb5c4c1e600"
   integrity sha512-G7XYSpNXv/GhFLgjGyBJAs9LjLHBWhsvjf6VI/VbptG9KiABHSItETTgDe1LDjbHA5P/Rn2MMDKOvhewM+w2Cg==
 
-electron@^8.0.0:
+electron@^8.2.1:
   version "8.2.2"
-  resolved "https://registry.npm.taobao.org/electron/download/electron-8.2.2.tgz#6ddb27c1f15fda5f6e891e1ad13c0a0d15b0f133"
-  integrity sha1-bdsnwfFf2l9uiR4a0TwKDRWw8TM=
+  resolved "https://registry.npmjs.org/electron/-/electron-8.2.2.tgz#6ddb27c1f15fda5f6e891e1ad13c0a0d15b0f133"
+  integrity sha512-GH4RCbpuzEn3XpTmsf+wLaJ2KOPSOoBJvQ0s6ftTLs5+IQEgKZvkdYCj8TCBNXFhss31RT3BUqoEQQUyZErK0A==
   dependencies:
     "@electron/get" "^1.0.1"
     "@types/node" "^12.0.12"