✨ Frame 完善

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app">
+  <div id="app" class="theme-light">
     <Frame />
   </div>
 </template>
@@ -11,12 +11,15 @@ export default {
 </script>
 
 <style lang="scss">
+@import './assets/scss/theme.scss';
 html, body, #app{
   height: 100%;
   border-radius: 10px;
   overflow: hidden;
 }
 #app{
-  background-color: #fff;
+  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -webkit-tap-highlight-color: transparent;
 }
 </style>

src/assets/scss/style.scss

@@ -0,0 +1,9 @@
+.zy-scrollbar{
+  &::-webkit-scrollbar{
+    width: 4px;
+    height: 1px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 2px;
+  }
+}

src/assets/scss/theme.scss

@@ -0,0 +1,19 @@
+:root{
+  // Light
+  --l-c-0: #823aa0;
+  --l-c-1: #823aa011;
+  --l-c-3: #823aa033;
+  --l-c-5: #823aa055;
+  --l-c-9: #823aa099;
+  --l-f-1: #808695;
+  --l-f-2: #332f5c;
+  --l-bgc-1: #ffffffff;
+  --l-bgc-2: #f2f6f9;
+  --l-bsc: 0 1px 3px #8e8da233, 0 1px 2px #8e8da244;
+  --l-bsc-hover: 0 14px 28px #8e8da255, 0 10px 10px #8e8da244;
+  --l-bsc-2: 0 -4px 23px 0 #8e8da233;
+  --l-bsc-scroll: inset 0 0 5px #823aa000;
+}
+
+@import './theme/Light.scss';
+@import './style.scss';

src/assets/scss/theme/Light.scss

@@ -0,0 +1,60 @@
+.theme-light{
+  background-color: var(--l-bgc-1);
+  .zy-scrollbar{
+    &::-webkit-scrollbar-thumb {
+      box-shadow: var(--l-bsc-scroll);
+      background: var(--l-c-5);
+    }
+    &::-webkit-scrollbar-track {
+      box-shadow: var(--l-bsc-scroll);
+      background: var(--l-bgc-1);
+    }
+  }
+  .zy-frame{
+    .middle{
+      .btn:hover{
+        .icon{
+          stroke: var(--l-f-1);
+        }
+      }
+      .search{
+        .active{
+          stroke: var(--l-f-1);
+        }
+        .search-input{
+          color: var(--l-f-1);
+          border: none;
+          border-bottom: 1px solid var(--l-c-0);
+        }
+        .search-box{
+          color: var(--l-f-1);
+          background-color: var(--l-bgc-1);
+          box-shadow: var(--l-bsc);
+          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+          &:hover{
+            box-shadow: var(--l-bsc-hover);
+          }
+          li:hover{
+            background-color: var(--l-bgc-2);
+          }
+        }
+      }
+    }
+    .right{
+      .btn:hover{
+        background-color: var(--l-bgc-2);
+        .icon{
+          stroke: var(--l-f-1);
+        }
+      }
+      .close:hover{
+        .icon{
+          stroke: red;
+        }
+      }
+    }
+    .icon{
+      stroke: var(--l-c-0);
+    }
+  }
+}

src/background.js

@@ -24,7 +24,8 @@ function createWindow () {
     transparent: true,
     webPreferences: {
       webSecurity: false,
-      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
+      enableRemoteModule: true,
+      nodeIntegration: true
     }
   })
 

src/components/Frame.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="frame">
+  <div class="zy-frame">
     <div class="left"></div>
     <div class="middle">
-      <span class="btn lock" @click="lockBtnClick()">
-        <IconLock v-show="lock" class="icon" />
-        <IconLockOpen v-show="!lock" class="icon" />
+      <span class="btn lock" @click="frameClickEvent('top')">
+        <IconLock v-show="isTop" class="icon" />
+        <IconLockOpen v-show="!isTop" class="icon" />
       </span>
       <span class="btn bell">
         <IconBell class="icon" />
@@ -14,32 +14,36 @@
           <IconSearch :class="[search ? 'active ' : ''] + 'icon'" />
         </span>
         <transition name="slide">
-          <input v-if="search" v-model.trim="searchTxt" ref="searchInput" autocomplete="off" class="search-input" type="text">
+          <input
+            v-if="search"
+            v-model.trim="searchTxt"
+            ref="searchInput"
+            autocomplete="off"
+            class="search-input"
+            @keyup.enter="searchEvent()"
+            type="text">
         </transition>
         <transition name="rotate">
           <IconClose v-if="searchTxt.length > 0" class="icon icon-search-close" @click="clearSearchTxt()" />
         </transition>
-        <transition name="fade">
-          <div class="search-box">
+        <transition name="slideUp">
+          <div v-if="search" class="search-box zy-scrollbar">
             <ul>
-              <li>lala</li>
-              <li>蝙蝠侠</li>
-              <li>蜘蛛侠</li>
-              <li>钢铁侠钢铁侠钢铁侠钢铁侠</li>
-              <li class="clear"><IconBin class="icon icon-bin" />清空搜索记录</li>
+              <li v-for="(i, j) in searchHistoryList" :key="j" @click="searchHistoryClick(i)">{{i}}</li>
+              <li class="clear" v-if="searchHistoryList.length >= 1" @click="clearSearchHistory()"><IconBin class="icon icon-bin" />清空搜索记录</li>
             </ul>
           </div>
         </transition>
       </div>
     </div>
     <div class="right">
-      <span class="btn min">
+      <span class="btn min" @click="frameClickEvent('min')">
         <IconMin class="icon" />
       </span>
-      <span class="btn max">
+      <span class="btn max" @click="frameClickEvent('max')">
         <IconMax class="icon" />
       </span>
-      <span class="btn close">
+      <span class="btn close" @click="frameClickEvent('close')">
         <IconClose class="icon" />
       </span>
     </div>
@@ -54,6 +58,8 @@ import IconLock from '../assets/img/ikonate/lock.svg'
 import IconLockOpen from '../assets/img/ikonate/lock-open.svg'
 import IconBell from '../assets/img/ikonate/bell.svg'
 import IconBin from '../assets/img/ikonate/bin.svg'
+const remote = require('electron').remote
+const win = remote.getCurrentWindow()
 export default {
   name: 'frame',
   components: {
@@ -68,14 +74,36 @@ export default {
   },
   data () {
     return {
-      lock: false,
+      isTop: win.isAlwaysOnTop(),
       search: false,
-      searchTxt: ''
+      searchTxt: '',
+      searchHistoryList: [
+        '钢铁侠钢铁侠钢铁侠钢铁侠',
+        '钢铁侠钢铁侠钢铁侠钢铁侠',
+        '钢铁侠钢铁侠钢铁侠钢铁侠',
+        '钢铁侠钢铁侠钢铁侠钢铁侠',
+        '钢铁侠钢铁侠钢铁侠钢铁侠',
+        '钢铁侠钢铁侠钢铁侠钢铁侠',
+        '钢铁侠钢铁侠钢铁侠钢铁侠',
+        '钢铁侠钢铁侠钢铁侠钢铁侠'
+      ]
     }
   },
   methods: {
-    lockBtnClick () {
-      this.lock = !this.lock
+    frameClickEvent (e) {
+      if (e === 'top') {
+        this.isTop = !this.isTop
+        win.setAlwaysOnTop(this.isTop)
+      }
+      if (e === 'min') {
+        win.minimize()
+      }
+      if (e === 'max') {
+        win.isMaximized() ? win.unmaximize() : win.maximize()
+      }
+      if (e === 'close') {
+        win.destroy()
+      }
     },
     searchBtnClick () {
       this.search = !this.search
@@ -89,12 +117,15 @@ export default {
     clearSearchTxt () {
       this.searchTxt = ''
       this.search = false
-    }
+    },
+    searchEvent () {},
+    searchHistoryClick (e) {},
+    clearSearchHistory () {}
   }
 }
 </script>
 <style lang="scss" scoped>
-.frame{
+.zy-frame{
   width: 100%;
   height: 50px;
   display: flex;
@@ -121,12 +152,10 @@ export default {
       cursor: pointer;
       -webkit-app-region: no-drag;
       &:hover{
-        // background-color: #f2f6f9;
         .icon{
           width: 20px;
           height: auto;
           stroke-width: 3px;
-          stroke: #808695;
         }
       }
     }
@@ -237,21 +266,17 @@ export default {
         }
         .active{
           stroke-width: 3px;
-          stroke: #808695;
         }
       }
       .search-input{
         position: absolute;
         left: 40px;
-        -webkit-app-region: no-drag;
         height: 30px;
-        border: none;
         outline: none;
         width: 180px;
         padding-left: 4px;
         padding-right: 20px;
-        color: #808695;
-        border-bottom: 1px solid #823aa0;
+        -webkit-app-region: no-drag;
       }
       .icon-search-close{
         position: absolute;
@@ -262,15 +287,19 @@ export default {
       .search-box{
         position: absolute;
         left: 40px;
-        top: 50px;
+        top: 40px;
         width: 180px;
-        height: 140px;
-        overflow: auto;
-        border: 1px solid #e661eb;
+        height: auto;
+        max-height: 172px;
+        overflow-y: hidden;
+        &:hover{
+          overflow-y: auto;
+        }
         ul{
           list-style: none;
           margin: 0;
           padding: 0;
+          width: 180px;
           li{
             cursor: pointer;
             font-size: 14px;
@@ -278,9 +307,6 @@ export default {
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
-            &:hover{
-              background-color: #f2f6f9;
-            }
           }
           .clear{
             display: flex;
@@ -306,6 +332,13 @@ export default {
         transform: rotate(-180deg);
         opacity: 0;
       }
+      .slideUp-enter-active, .slideUp-leave-active{
+        transition: all 0.5s ease-in-out;
+      }
+      .slideUp-enter, .slideUp-leave-to{
+        transform: translateY(50%);
+        opacity: 0;
+      }
     }
   }
   .right{
@@ -323,17 +356,8 @@ export default {
       cursor: pointer;
       -webkit-app-region: no-drag;
       &:hover{
-        background-color: #f2f6f9;
         .icon{
           stroke-width: 3px;
-          stroke: #808695;
-        }
-      }
-      &.close{
-        &:hover{
-          .icon{
-            stroke: red;
-          }
         }
       }
     }
@@ -341,7 +365,6 @@ export default {
   .icon{
     width: 20px;
     height: auto;
-    stroke: #823aa0;
   }
 }
 </style>

vue.config.js

@@ -1,4 +1,9 @@
 module.exports = {
+  pluginOptions: {
+    electronBuilder: {
+      nodeIntegration: true
+    }
+  },
   chainWebpack: (config) => {
     const svgRule = config.module.rule('svg')
     svgRule.uses.clear()