From d82cf1995b60507870bae26733c3f533c46152d7 Mon Sep 17 00:00:00 2001
From: Hunlongyu <hunlongyu@gmail.com>
Date: Mon, 2 Dec 2019 10:35:09 +0800
Subject: [PATCH] sider and frame done

---
 src/App.vue                        | 23 ++++++----------
 src/background.js                  | 12 +++++++-
 src/components/zy_header.vue       | 44 ++++++++++++------------------
 src/components/zy_sider.vue        | 23 ++++++++++++----
 src/router.js                      | 24 ++++++++++++----
 src/store.js                       | 18 ++++++++++--
 src/views/Collection.vue           |  8 ++++++
 src/views/List.vue                 | 10 +++++++
 src/views/{Home.vue => Player.vue} |  4 +--
 src/views/Search.vue               |  4 +--
 src/views/Settings.vue             | 16 +++++++++++
 11 files changed, 126 insertions(+), 60 deletions(-)
 create mode 100644 src/views/Collection.vue
 create mode 100644 src/views/List.vue
 rename src/views/{Home.vue => Player.vue} (53%)
 create mode 100644 src/views/Settings.vue

diff --git a/src/App.vue b/src/App.vue
index 7b31b6f..f106085 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,11 +5,7 @@
         <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>
+              <router-view />
             </Content>
         </Layout>
     </Layout>
@@ -18,24 +14,21 @@
 <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'
+    return {}
+  },
+  computed: {
+    theme () {
+      return this.$store.getters.getTheme
     }
   },
   components: {
     ZYSider,
-    ZYHeader,
-    ZYContent
+    ZYHeader
   },
-  methods: {
-    switchTheme (e) {
-      this.theme = e
-    }
-  }
+  methods: {}
 }
 </script>
 
diff --git a/src/background.js b/src/background.js
index 3a59977..ee8d3ac 100644
--- a/src/background.js
+++ b/src/background.js
@@ -1,6 +1,6 @@
 'use strict'
 
-import { app, protocol, BrowserWindow } from 'electron'
+import { app, protocol, ipcMain, BrowserWindow } from 'electron'
 import {
   createProtocol
 } from 'vue-cli-plugin-electron-builder/lib'
@@ -58,6 +58,16 @@ app.on('activate', () => {
   }
 })
 
+ipcMain.on('min', e => win.minimize())
+ipcMain.on('max', e => {
+  if (win.isMaximized()) {
+    win.unmaximize()
+  } else {
+    win.maximize()
+  }
+})
+ipcMain.on('close', e => win.close())
+
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
diff --git a/src/components/zy_header.vue b/src/components/zy_header.vue
index c789695..88ed3e9 100644
--- a/src/components/zy_header.vue
+++ b/src/components/zy_header.vue
@@ -1,18 +1,19 @@
 <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>
+    <Icon type="md-remove" @click="clickFrameEvent('min')" />
+    <Icon type="md-add" @click="clickFrameEvent('max')" />
+    <Icon type="md-close" @click="clickFrameEvent('close')" />
   </Row>
 </template>
 <script>
+const { ipcRenderer: ipc } = require('electron')
 export default {
-  name: 'zy_header'
+  name: 'zy_header',
+  methods: {
+    clickFrameEvent (e) {
+      ipc.send(e)
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
@@ -21,23 +22,14 @@ export default {
   -webkit-app-region: drag;
   -webkit-user-select: none;
   display: flex;
-  justify-content: space-between;
-  .left,.right{
-    display: flex;
-    align-items: center;
-    height: 50px;
-    width: 50%;
-    i{
-      font-size: 20px;
-      width:50px;
-      height:50px;
-      line-height:50px;
-      cursor: pointer;
-      -webkit-app-region: no-drag;
-    }
-  }
-  .right{
-    justify-content: flex-end;
+  justify-content: flex-end;
+  i{
+    font-size: 20px;
+    width:50px;
+    height:50px;
+    line-height:50px;
+    cursor: pointer;
+    -webkit-app-region: no-drag;
   }
 }
 </style>
diff --git a/src/components/zy_sider.vue b/src/components/zy_sider.vue
index c82b0a3..96e745c 100644
--- a/src/components/zy_sider.vue
+++ b/src/components/zy_sider.vue
@@ -1,19 +1,30 @@
 <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" />
+      <Icon :class="iconActive === 'list' ? 'active': ''" type="md-list" @click="iconClickEvent('list')"/>
+      <Icon :class="iconActive === 'search' ? 'active': ''" type="md-search" @click="iconClickEvent('search')"/>
+      <Icon :class="iconActive === 'play' ? 'active': ''" type="md-play" @click="iconClickEvent('play')"/>
+      <Icon :class="iconActive === 'collection' ? 'active': ''" type="md-star" @click="iconClickEvent('collection')"/>
     </div>
     <div class="bottom">
-      <Icon type="md-settings" />
+      <Icon :class="iconActive === 'settings' ? 'active': ''" type="md-settings" @click="iconClickEvent('settings')"/>
     </div>
   </Row>
 </template>
 <script>
 export default {
-  name: 'zy-sider'
+  name: 'zy-sider',
+  computed: {
+    iconActive () {
+      return this.$store.getters.getIconActive
+    }
+  },
+  methods: {
+    iconClickEvent (e) {
+      this.$router.push({ name: e })
+      this.$store.commit('SET_ICON_ACTIVE', e)
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
diff --git a/src/router.js b/src/router.js
index 6dc9d85..4749f30 100644
--- a/src/router.js
+++ b/src/router.js
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Router from 'vue-router'
-import Home from './views/Home.vue'
+import List from './views/List.vue'
 
 Vue.use(Router)
 
@@ -10,16 +10,28 @@ export default new Router({
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: Home
+      name: 'list',
+      component: List
     },
     {
       path: '/search',
       name: 'search',
-      // route level code-splitting
-      // this generates a separate chunk (about.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
       component: () => import(/* webpackChunkName: "about" */ './views/Search.vue')
+    },
+    {
+      path: '/settings',
+      name: 'settings',
+      component: () => import(/* webpackChunkName: "about" */ './views/Settings.vue')
+    },
+    {
+      path: '/play',
+      name: 'play',
+      component: () => import(/* webpackChunkName: "about" */ './views/Player.vue')
+    },
+    {
+      path: '/collection',
+      name: 'collection',
+      component: () => import(/* webpackChunkName: "about" */ './views/Collection.vue')
     }
   ]
 })
diff --git a/src/store.js b/src/store.js
index 3c7424e..7977246 100644
--- a/src/store.js
+++ b/src/store.js
@@ -5,10 +5,24 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
-
+    theme: 'light',
+    iconActive: 'list'
+  },
+  getters: {
+    getTheme: state => {
+      return state.theme
+    },
+    getIconActive: state => {
+      return state.iconActive
+    }
   },
   mutations: {
-
+    SET_THEME: (state, payload) => {
+      state.theme = payload
+    },
+    SET_ICON_ACTIVE: (state, payload) => {
+      state.iconActive = payload
+    }
   },
   actions: {
 
diff --git a/src/views/Collection.vue b/src/views/Collection.vue
new file mode 100644
index 0000000..f24d050
--- /dev/null
+++ b/src/views/Collection.vue
@@ -0,0 +1,8 @@
+<template>
+  <Row class="collection">collection</Row>
+</template>
+<script>
+export default {
+  name: 'collection'
+}
+</script>
diff --git a/src/views/List.vue b/src/views/List.vue
new file mode 100644
index 0000000..2c4511b
--- /dev/null
+++ b/src/views/List.vue
@@ -0,0 +1,10 @@
+<template>
+  <Row>
+    <div class="list">list</div>
+  </Row>
+</template>
+<script>
+export default {
+  name: 'list'
+}
+</script>
diff --git a/src/views/Home.vue b/src/views/Player.vue
similarity index 53%
rename from src/views/Home.vue
rename to src/views/Player.vue
index 32f26ba..f16dea7 100644
--- a/src/views/Home.vue
+++ b/src/views/Player.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="home">home</div>
+  <Row class="player">player</Row>
 </template>
 <script>
 export default {
-  name: 'home'
+  name: 'player'
 }
 </script>
diff --git a/src/views/Search.vue b/src/views/Search.vue
index 9dd3fc4..da12b77 100644
--- a/src/views/Search.vue
+++ b/src/views/Search.vue
@@ -2,12 +2,12 @@
   <div class="search">search</div>
 </template>
 <script>
-import video from '@/util/util.video'
+// import video from '@/util/util.video'
 export default {
   name: 'search',
   methods: {},
   created () {
-    video.init()
+    // video.init()
   }
 }
 </script>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
new file mode 100644
index 0000000..b6e6a95
--- /dev/null
+++ b/src/views/Settings.vue
@@ -0,0 +1,16 @@
+<template>
+  <Row>
+    <Button type="primary" @click="switchTheme('light')">light</Button>
+    <Button type="primary" @click="switchTheme('dark')">Dark</Button>
+  </Row>
+</template>
+<script>
+export default {
+  name: 'settings',
+  methods: {
+    switchTheme (e) {
+      this.$store.commit('SET_THEME', e)
+    }
+  }
+}
+</script>