diff --git a/babel.config.js b/babel.config.js
index ba17966..4b27a8c 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,9 @@
 module.exports = {
   presets: [
     '@vue/app'
-  ]
+  ],
+  plugins: [['import', {
+    'libraryName': 'view-design',
+    'libraryDirectory': 'src/components'
+  }]]
 }
diff --git a/package.json b/package.json
index b708c8e..6bf24a3 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "evt",
+  "name": "zy-player",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -15,7 +15,7 @@
   "dependencies": {
     "axios": "^0.19.0",
     "core-js": "^2.6.5",
-    "modern-normalize": "^0.5.0",
+    "view-design": "^4.0.2",
     "vue": "^2.6.10",
     "vue-router": "^3.0.3",
     "vuex": "^3.0.1"
@@ -26,6 +26,7 @@
     "@vue/cli-service": "^3.12.0",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "^10.0.1",
+    "babel-plugin-import": "^1.13.0",
     "electron": "7.1.2",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.0.0",
diff --git a/src/App.vue b/src/App.vue
index 81c45a4..a398c8d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,29 +1,55 @@
 <template>
-  <div id="app">
-    <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/search">search</router-link>
-    </div>
-    <router-view/>
+  <div id="app" :class="theme">
+    <Layout class="box">
+        <Sider class="sider" width="70"><ZYSider /></Sider>
+        <Layout>
+            <Header class="header"><ZYHeader /></Header>
+            <Content class="content">
+              <ZYContent />
+              <Row>
+                <Button type="primary" @click="switchTheme('light')">light</Button>
+                <Button type="primary" @click="switchTheme('dark')">Dark</Button>
+              </Row>
+            </Content>
+        </Layout>
+    </Layout>
   </div>
 </template>
-
-<style lang="scss">
-#app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-#nav {
-  padding: 30px;
-  a {
-    font-weight: bold;
-    color: #2c3e50;
-    &.router-link-exact-active {
-      color: #42b983;
+<script>
+import ZYSider from '@/components/zy_sider.vue'
+import ZYHeader from '@/components/zy_header.vue'
+import ZYContent from '@/components/zy_content.vue'
+export default {
+  name: 'app',
+  data () {
+    return {
+      theme: 'light'
+    }
+  },
+  components: {
+    ZYSider,
+    ZYHeader,
+    ZYContent
+  },
+  methods: {
+    switchTheme (e) {
+      this.theme = e
     }
   }
 }
+</script>
+
+<style lang="scss">
+@import './assets/theme/dark.scss';
+@import './assets/theme/light.scss';
+html, body, #app, .box{
+  height: 100%;
+}
+.box{
+  .header{
+    width: 100%;
+    height: 35px;
+    padding: 0;
+  }
+}
 </style>
diff --git a/src/assets/theme/dark.scss b/src/assets/theme/dark.scss
new file mode 100644
index 0000000..2c08d5f
--- /dev/null
+++ b/src/assets/theme/dark.scss
@@ -0,0 +1,7 @@
+.dark{
+  .sider,.header,.content{
+    background-color: #000;
+    color: #eee;
+    border: 1px solid #ccc;
+  }
+}
\ No newline at end of file
diff --git a/src/assets/theme/light.scss b/src/assets/theme/light.scss
new file mode 100644
index 0000000..194b0bf
--- /dev/null
+++ b/src/assets/theme/light.scss
@@ -0,0 +1,24 @@
+.light{
+  .sider,.header,.content{
+    background-color: #fff;
+    color: #000;
+  }
+  .sider{
+    border-right: 1px solid #dcdee2;
+    .sider-box{
+      color: #808695;
+      i{
+        &:hover{
+          color: #515a6e;
+          background-color: #efefef;
+          border-right: 1px solid #808695;
+        }
+        &.active{
+          color: #515a6e;
+          background-color: #efefef;
+          border-left: 2px solid #515a6e;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/background.js b/src/background.js
index 4440d94..3a59977 100644
--- a/src/background.js
+++ b/src/background.js
@@ -17,8 +17,9 @@ protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: tru
 function createWindow () {
   // Create the browser window.
   win = new BrowserWindow({
-    width: 1024,
+    width: 1400,
     height: 800,
+    frame: false,
     webPreferences: {
       webSecurity: false,
       nodeIntegration: true
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 2f2ff3c..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/components/zy_content.vue b/src/components/zy_content.vue
new file mode 100644
index 0000000..723f8fe
--- /dev/null
+++ b/src/components/zy_content.vue
@@ -0,0 +1,13 @@
+<template>
+  <Row></Row>
+</template>
+<script>
+export default {
+  name: 'zy_content',
+  methods: {
+    switchTheme (e) {
+      this.theme = e
+    }
+  }
+}
+</script>
diff --git a/src/components/zy_header.vue b/src/components/zy_header.vue
new file mode 100644
index 0000000..db8af6e
--- /dev/null
+++ b/src/components/zy_header.vue
@@ -0,0 +1,47 @@
+<template>
+  <Row class="header-box">
+    <div class="left">
+      <Icon type="md-return-left" />
+    </div>
+    <div class="right">
+      <Icon type="md-remove" />
+      <Icon type="md-add" />
+      <Icon type="md-close" />
+    </div>
+  </Row>
+</template>
+<script>
+export default {
+  name: 'zy_header'
+}
+</script>
+<style lang="scss" scoped>
+.header-box{
+  height: 100%;
+  border: 1px solid #000;
+  -webkit-app-region: drag;
+  -webkit-user-select: none;
+  .left,.right{
+    display: inline-block;
+    height: 35px;
+    i{
+      -webkit-app-region: no-drag;
+      font-size: 20px;
+      width:35px;
+      height:35px;
+      line-height:35px;
+      cursor: pointer;
+      background-color: #aaa;
+    }
+  }
+  .left{
+    top: 0;
+    left: 0;
+  }
+  .right{
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}
+</style>
diff --git a/src/components/zy_sider.vue b/src/components/zy_sider.vue
new file mode 100644
index 0000000..c82b0a3
--- /dev/null
+++ b/src/components/zy_sider.vue
@@ -0,0 +1,38 @@
+<template>
+  <Row class="sider-box">
+    <div class="top">
+      <Icon class="active" type="md-list" />
+      <Icon type="md-search" />
+      <Icon type="md-play" />
+      <Icon type="md-star" />
+    </div>
+    <div class="bottom">
+      <Icon type="md-settings" />
+    </div>
+  </Row>
+</template>
+<script>
+export default {
+  name: 'zy-sider'
+}
+</script>
+<style lang="scss" scoped>
+.sider-box{
+  height: 100%;
+  position: relative;
+  -webkit-app-region: drag;
+  -webkit-user-select: none;
+  .bottom{
+    position: absolute;
+    bottom: 0;
+  }
+  i{
+    -webkit-app-region: no-drag;
+    font-size: 32px;
+    width: 70px;
+    height: 70px;
+    line-height: 70px;
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 71a1847..8ecb0c3 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,7 +2,9 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-// import 'modern-normalize'
+import '@/plugin/iview/'
+// import '@/assets/theme/dark.scss'
+// import '@/assets/theme/light.scss'
 
 Vue.config.productionTip = false
 
diff --git a/src/plugin/iview/index.js b/src/plugin/iview/index.js
new file mode 100644
index 0000000..f35b357
--- /dev/null
+++ b/src/plugin/iview/index.js
@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import 'view-design/dist/styles/iview.css'
+import {
+  Layout, Sider, Header, Content, Row, Col,
+  Icon, Button
+} from 'view-design'
+
+Vue.component('Layout', Layout)
+Vue.component('Sider', Sider)
+Vue.component('Header', Header)
+Vue.component('Content', Content)
+Vue.component('Row', Row)
+Vue.component('Col', Col)
+Vue.component('Icon', Icon)
+Vue.component('Button', Button)
diff --git a/yarn.lock b/yarn.lock
index 3690299..0066bf3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1573,6 +1573,11 @@ async-limiter@~1.0.0:
   resolved "https://registry.npm.taobao.org/async-limiter/download/async-limiter-1.0.1.tgz?cache=0&sync_timestamp=1574272018408&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fasync-limiter%2Fdownload%2Fasync-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
   integrity sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=
 
+async-validator@^1.10.0:
+  version "1.12.2"
+  resolved "https://registry.npm.taobao.org/async-validator/download/async-validator-1.12.2.tgz?cache=0&sync_timestamp=1573467150027&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fasync-validator%2Fdownload%2Fasync-validator-1.12.2.tgz#beae671e7174d2938b7b4b69d2fb7e722b7fd72c"
+  integrity sha1-vq5nHnF00pOLe0tp0vt+cit/1yw=
+
 async@^2.0.0, async@^2.6.2:
   version "2.6.3"
   resolved "https://registry.npm.taobao.org/async/download/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
@@ -1659,6 +1664,14 @@ babel-plugin-dynamic-import-node@^2.2.0, babel-plugin-dynamic-import-node@^2.3.0
   dependencies:
     object.assign "^4.1.0"
 
+babel-plugin-import@^1.13.0:
+  version "1.13.0"
+  resolved "https://registry.npm.taobao.org/babel-plugin-import/download/babel-plugin-import-1.13.0.tgz?cache=0&sync_timestamp=1574676418803&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-plugin-import%2Fdownload%2Fbabel-plugin-import-1.13.0.tgz#c532fd533df9db53b47d4d4db3676090fc5c07a5"
+  integrity sha1-xTL9Uz3521O0fU1Ns2dgkPxcB6U=
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@babel/runtime" "^7.0.0"
+
 babel-plugin-module-resolver@3.2.0:
   version "3.2.0"
   resolved "https://registry.npm.taobao.org/babel-plugin-module-resolver/download/babel-plugin-module-resolver-3.2.0.tgz#ddfa5e301e3b9aa12d852a9979f18b37881ff5a7"
@@ -1701,6 +1714,11 @@ base@^0.11.1:
     mixin-deep "^1.2.0"
     pascalcase "^0.1.1"
 
+batch-processor@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npm.taobao.org/batch-processor/download/batch-processor-1.0.0.tgz#75c95c32b748e0850d10c2b168f6bdbe9891ace8"
+  integrity sha1-dclcMrdI4IUNEMKxaPa9vpiRrOg=
+
 batch@0.6.1:
   version "0.6.1"
   resolved "https://registry.npm.taobao.org/batch/download/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
@@ -3090,6 +3108,11 @@ deepmerge@^1.5.2:
   resolved "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
   integrity sha1-EEmdhohEza1P7ghC34x/bwyVp1M=
 
+deepmerge@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.npm.taobao.org/deepmerge/download/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha1-XT/yKgHAD2RUBaL7wX0HeKGAEXA=
+
 deepmerge@~2.0.1:
   version "2.0.1"
   resolved "https://registry.npm.taobao.org/deepmerge/download/deepmerge-2.0.1.tgz#25c1c24f110fb914f80001b925264dd77f3f4312"
@@ -3470,6 +3493,13 @@ electron@7.1.2:
     "@types/node" "^12.0.12"
     extract-zip "^1.0.3"
 
+element-resize-detector@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npm.taobao.org/element-resize-detector/download/element-resize-detector-1.2.0.tgz#63344fd6f4e5ecff6f018d027e17b281fd4fa338"
+  integrity sha1-YzRP1vTl7P9vAY0Cfheygf1Pozg=
+  dependencies:
+    batch-processor "1.0.0"
+
 elliptic@^6.0.0:
   version "6.5.2"
   resolved "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.2.tgz#05c5678d7173c049d8ca433552224a495d0e3762"
@@ -5584,6 +5614,11 @@ javascript-stringify@^2.0.0:
   resolved "https://registry.npm.taobao.org/javascript-stringify/download/javascript-stringify-2.0.1.tgz?cache=0&sync_timestamp=1572948916758&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fjavascript-stringify%2Fdownload%2Fjavascript-stringify-2.0.1.tgz#6ef358035310e35d667c675ed63d3eb7c1aa19e5"
   integrity sha1-bvNYA1MQ411mfGde1j0+t8GqGeU=
 
+js-calendar@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.npm.taobao.org/js-calendar/download/js-calendar-1.2.3.tgz#a583b0644b4e695ba394f344d103dbcc7a7a7d3e"
+  integrity sha1-pYOwZEtOaVujlPNE0QPbzHp6fT4=
+
 js-levenshtein@^1.1.3:
   version "1.1.6"
   resolved "https://registry.npm.taobao.org/js-levenshtein/download/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d"
@@ -5918,6 +5953,11 @@ lodash.merge@^4.6.1:
   resolved "https://registry.npm.taobao.org/lodash.merge/download/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha1-VYqlO0O2YeGSWgr9+japoQhf5Xo=
 
+lodash.throttle@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npm.taobao.org/lodash.throttle/download/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
+  integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
+
 lodash.transform@^4.6.0:
   version "4.6.0"
   resolved "https://registry.npm.taobao.org/lodash.transform/download/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0"
@@ -6296,11 +6336,6 @@ mkdirp@0.5.1, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
   dependencies:
     minimist "0.0.8"
 
-modern-normalize@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.npm.taobao.org/modern-normalize/download/modern-normalize-0.5.0.tgz#7f75bb7319c6ae708d716658dc8d9c9760274887"
-  integrity sha1-f3W7cxnGrnCNcWZY3I2cl2AnSIc=
-
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
@@ -7178,6 +7213,11 @@ pluralize@^7.0.0:
   resolved "https://registry.npm.taobao.org/pluralize/download/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
   integrity sha1-KYuJ34uTsCIdv0Ia0rGx6iP8Z3c=
 
+popper.js@^1.14.6:
+  version "1.16.0"
+  resolved "https://registry.npm.taobao.org/popper.js/download/popper.js-1.16.0.tgz#2e1816bcbbaa518ea6c2e15a466f4cb9c6e2fbb3"
+  integrity sha1-LhgWvLuqUY6mwuFaRm9Mucbi+7M=
+
 portfinder@^1.0.16, portfinder@^1.0.20, portfinder@^1.0.25:
   version "1.0.25"
   resolved "https://registry.npm.taobao.org/portfinder/download/portfinder-1.0.25.tgz#254fd337ffba869f4b9d37edc298059cb4d35eca"
@@ -9233,6 +9273,11 @@ timsort@^0.3.0:
   resolved "https://registry.npm.taobao.org/timsort/download/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tinycolor2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.npm.taobao.org/tinycolor2/download/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
+  integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.npm.taobao.org/tmp/download/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -9625,6 +9670,11 @@ uuid@^3.0.1, uuid@^3.3.2:
   resolved "https://registry.npm.taobao.org/uuid/download/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866"
   integrity sha1-RWjwIW54dg7h2/Ok0s9T4iQRKGY=
 
+v-click-outside-x@^3.7.1:
+  version "3.7.1"
+  resolved "https://registry.npm.taobao.org/v-click-outside-x/download/v-click-outside-x-3.7.1.tgz#aa03eaa0e41e44cb5207dcf86c2d9f0dd64084c1"
+  integrity sha1-qgPqoOQeRMtSB9z4bC2fDdZAhME=
+
 validate-npm-package-license@^3.0.1:
   version "3.0.4"
   resolved "https://registry.npm.taobao.org/validate-npm-package-license/download/validate-npm-package-license-3.0.4.tgz#fc91f6b9c7ba15c857f4cb2c5defeec39d4f410a"
@@ -9652,6 +9702,20 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+view-design@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npm.taobao.org/view-design/download/view-design-4.0.2.tgz#983450fb4fd0a56642dc13ebc7e585c0aae64fc8"
+  integrity sha1-mDRQ+0/QpWZC3BPrx+WFwKrmT8g=
+  dependencies:
+    async-validator "^1.10.0"
+    deepmerge "^2.2.1"
+    element-resize-detector "^1.2.0"
+    js-calendar "^1.2.3"
+    lodash.throttle "^4.1.1"
+    popper.js "^1.14.6"
+    tinycolor2 "^1.4.1"
+    v-click-outside-x "^3.7.1"
+
 vm-browserify@^1.0.1:
   version "1.1.2"
   resolved "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz?cache=0&sync_timestamp=1572870776965&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvm-browserify%2Fdownload%2Fvm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"