🏍 页面切换，侧边栏，控制栏

2026-05-05 20:44:52 +08:00 · 2020-04-15 22:53:39 +08:00
parent 8f10dcfb20
commit 152b654d41
14 changed files with 141 additions and 108 deletions
--- 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",
--- 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;
--- 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;
+  }
+}
--- 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';
--- 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;
+      }
+    }
+  }
+}
--- 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()
 })
--- 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>
--- 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{
--- 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;
    }
--- 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 = {
--- 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',
--- 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>
--- a/vue.config.js
+++ b/vue.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  pluginOptions: {
+    electronBuilder: {
+      nodeIntegration: true
+    }
+  }
+}
--- 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"