v0.8.2 窗口置顶，窗口透明，启动唯一应用

2026-05-05 15:12:13 +08:00 · 2020-01-31 01:35:55 +08:00
parent be6b4b0d78
commit 6979d14f35
9 changed files with 155 additions and 74 deletions
--- a/README.md
+++ b/README.md
@@ -12,9 +12,11 @@
 <p>

 # ZY Player
-
 资源播放器, 提供影视资源的浏览,搜索,播放,收藏,查看详情等功能.

+### 下载:
+[下载地址](https://github.com/Hunlongyu/ZY-Player/releases)
+
 ### 截图: 
 主界面 ⬇
 ![film.png](https://i.loli.net/2020/01/19/U1EPzoJHhTDnuxA.png)
@@ -31,9 +33,8 @@
 收藏 ⬇
 ![star.png](https://i.loli.net/2020/01/19/Q2fkWUvaXKZJcS4.png)

-### 下载:
-
-[下载地址](https://github.com/Hunlongyu/ZY-Player/releases)
+### 开发计划：
+[第二期开发计划](https://github.com/Hunlongyu/ZY-Player/projects/2)

 ### 未完成:
 1. 更换图标: 求大神设计一个 zy 的logo, 256x256 像素,风格请参考: 
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "zy",
-  "version": "0.8.1",
+  "version": "0.8.2",
  "author": "Hunlongyu",
  "description": "ZY Player 资源播放器",
  "private": true,
--- a/src/App.vue
+++ b/src/App.vue
@@ -10,13 +10,13 @@
    <el-container>
      <el-aside class="Aside" width="70px">
        <el-row class="top">
-          <i :class="Main === 'Film' ? 'el-icon-film active' : 'el-icon-film'" @click="asideMenuClick('Film')"></i>
-          <i :class="Main === 'Search' ? 'el-icon-search active' : 'el-icon-search'" @click="asideMenuClick('Search')"></i>
-          <i :class="Main === 'Player' ? 'el-icon-video-play active' : 'el-icon-video-play'" @click="asideMenuClick('Player')"></i>
-          <i :class="Main === 'Star' ? 'el-icon-star-off active' : 'el-icon-star-off'" @click="asideMenuClick('Star')"></i>
+          <i title="浏览" :class="Main === 'Film' ? 'el-icon-film active' : 'el-icon-film'" @click="asideMenuClick('Film')"></i>
+          <i title="搜索" :class="Main === 'Search' ? 'el-icon-search active' : 'el-icon-search'" @click="asideMenuClick('Search')"></i>
+          <i title="播放" :class="Main === 'Player' ? 'el-icon-video-play active' : 'el-icon-video-play'" @click="asideMenuClick('Player')"></i>
+          <i title="收藏" :class="Main === 'Star' ? 'el-icon-star-off active' : 'el-icon-star-off'" @click="asideMenuClick('Star')"></i>
        </el-row>
        <el-row class="bottom">
-          <i :class="Main === 'Setting' ? 'el-icon-setting active' : 'el-icon-setting'" @click="asideMenuClick('Setting')"></i>
+          <i title="设置" :class="Main === 'Setting' ? 'el-icon-setting active' : 'el-icon-setting'" @click="asideMenuClick('Setting')"></i>
        </el-row>
      </el-aside>
      <el-main class="Main">
@@ -101,6 +101,7 @@ html,body{
 }
 #app{
  height: 100%;
+  user-select: none;
  .Header{
    display: flex;
    justify-content: flex-end;
--- a/src/assets/theme/light.scss
+++ b/src/assets/theme/light.scss
@@ -33,7 +33,7 @@
    }
  }
  .Main{
-    .film, .search, .star, .player{
+    .film, .search, .star, .player, .setting{
      .table-box{
        &::-webkit-scrollbar-track {
          box-shadow: inset 0 0 6px var(--l-bdc);
--- a/src/background.ts
+++ b/src/background.ts
@@ -19,7 +19,7 @@ protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: tru
 function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({
-    width: 1080,
+    width: 1680,
    height: 720,
    frame: false,
    webPreferences: {
@@ -83,25 +83,59 @@ ipcMain.on('close', e => {
  }
 })

+ipcMain.on('opacity', (e, arg) => {
+  if (win) {
+    win.setOpacity(arg)
+  }
+})
+
+ipcMain.on('top', () => {
+  if (win) {
+    if (win.isAlwaysOnTop()) {
+      win.setAlwaysOnTop(false)
+    } else {
+      win.setAlwaysOnTop(true)
+    }
+  }
+})
+
+const gotTheLock = app.requestSingleInstanceLock()
+if (!gotTheLock) {
+  app.quit()
+} else {
+  app.on('second-instance', (event, commandLine, workingDirectory) => {
+    // 当运行第二个实例时,将会聚焦到win这个窗口
+    if (win) {
+      if (win.isMinimized()) win.restore()
+      win.focus()
+    }
+  })
+
+  // 创建 win, 加载应用的其余部分, etc...
+  app.on('ready', () => {
+    createWindow()
+  })
+}
+
 // 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.
-app.on('ready', async () => {
-  if (isDevelopment && !process.env.IS_TEST) {
-    // Install Vue Devtools
-    // Devtools extensions are broken in Electron 6.0.0 and greater
-    // See https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/378 for more info
-    // 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())
-    // }
-  }
-  createWindow()
-})
+// app.on('ready', async () => {
+//   if (isDevelopment && !process.env.IS_TEST) {
+//     // Install Vue Devtools
+//     // Devtools extensions are broken in Electron 6.0.0 and greater
+//     // See https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/378 for more info
+//     // 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())
+//     }
+//   }
+//   createWindow()
+// })

 // Exit cleanly on request from parent process in development mode.
 if (isDevelopment) {
--- a/src/page/player.vue
+++ b/src/page/player.vue
@@ -8,9 +8,10 @@
            <span>{{ num }}</span>
          </span>
          <span>
-            <el-button size="mini" @click="openDetail" icon="el-icon-document" circle></el-button>
-            <el-button size="mini" v-show="!star" @click="starEvent" icon="el-icon-star-off" circle></el-button>
-            <el-button size="mini" v-show="star" @click="starEvent" icon="el-icon-star-on" circle></el-button>
+            <el-button size="mini" @click="topEvent('top')" icon="el-icon-position" title="置顶" circle></el-button>
+            <el-button size="mini" @click="openDetail" icon="el-icon-document" title="查看详情" circle></el-button>
+            <el-button size="mini" v-show="!star" @click="starEvent" icon="el-icon-star-off" title="添加收藏" circle></el-button>
+            <el-button size="mini" v-show="star" @click="starEvent" icon="el-icon-star-on" title="取消收藏" circle></el-button>
          </span>
        </el-row>
      </el-row>
@@ -42,6 +43,7 @@ import 'xgplayer'
 // @ts-ignore
 import Hls from 'xgplayer-hls.js'
 import video from '@/plugins/dexie/video'
+const { ipcRenderer: ipc } = require('electron')
 export default Vue.extend({
  data () {
    return {
@@ -99,6 +101,9 @@ export default Vue.extend({
  },
  methods: {
    ...mapMutations(['SET_DETAIL', 'SET_VIDEO', 'SET_MAIN']),
+    topEvent (e:string) {
+      ipc.send(e)
+    },
    goView (e: string) {
      this.Main = e
    },
--- a/src/page/setting.vue
+++ b/src/page/setting.vue
@@ -1,50 +1,58 @@
 <template>
  <el-row class="setting">
-    <el-row class="item site">
-      <el-row class="title"><i class="el-icon-set-up"></i><span>默认资源</span></el-row>
-      <el-row class="info">
-        <el-select v-model="dbSite" placeholder="请选择" size="small" @change="selectSite">
-          <el-option
-            v-for="(i, j) in sites"
-            :key="i.id"
-            :label="i.name"
-            :value="j">
-          </el-option>
-        </el-select>
+    <el-row class="setting-box table-box">
+      <el-row class="item site">
+        <el-row class="title"><i class="el-icon-set-up"></i><span>默认资源</span></el-row>
+        <el-row class="info">
+          <el-select v-model="dbSite" placeholder="请选择" size="small" @change="selectSite">
+            <el-option
+              v-for="(i, j) in sites"
+              :key="i.id"
+              :label="i.name"
+              :value="j">
+            </el-option>
+          </el-select>
+        </el-row>
      </el-row>
-    </el-row>
-    <el-row class="item theme">
-      <el-row class="title"><i class="el-icon-picture-outline-round"></i><span>主题</span></el-row>
-      <el-row class="card-box">
-        <el-card shadow="hover" class="card">
-          <img src="@/assets/image/light.png" class="image" @click="selectTheme('light')">
-          <span size="mini">Light</span>
-        </el-card>
-        <el-card shadow="hover" class="card">
-          <img src="@/assets/image/dark.png" class="image" @click="selectTheme('dark')">
-          <span size="mini">Dark</span>
-        </el-card>
+      <el-row class="item opacity">
+        <el-row class="title"><i class="el-icon-picture-outline-round"></i><span>透明度</span></el-row>
+        <el-row class="info">
+          <el-slider v-model="opacity" :min="50" :max="100" @input="setOpacity"></el-slider>
+        </el-row>
      </el-row>
-    </el-row>
-    <el-row class="item update about">
-      <el-row class="title"><i class="el-icon-refresh"></i><span>更新</span></el-row>
-      <el-row class="info">
-        <ul>
-          <li>当前版本: {{oldVersion}}</li>
-          <li>最新版本: {{newVersion}}</li>
-        </ul>
+      <el-row class="item theme">
+        <el-row class="title"><i class="el-icon-picture-outline-round"></i><span>主题</span></el-row>
+        <el-row class="card-box">
+          <el-card shadow="hover" class="card">
+            <img src="@/assets/image/light.png" class="image" @click="selectTheme('light')">
+            <span size="mini">Light</span>
+          </el-card>
+          <el-card shadow="hover" class="card">
+            <img src="@/assets/image/dark.png" class="image" @click="selectTheme('dark')">
+            <span size="mini">Dark</span>
+          </el-card>
+        </el-row>
      </el-row>
-      <el-row class="btns">
-        <el-button v-show="download" size="small" @click="linkOpen('https://github.com/Hunlongyu/ZY-Player/releases/latest')">下载更新</el-button>
+      <el-row class="item update">
+        <el-row class="title"><i class="el-icon-refresh"></i><span>更新</span></el-row>
+        <el-row class="info">
+          <ul>
+            <li>当前版本: {{oldVersion}}</li>
+            <li>最新版本: {{newVersion}}</li>
+          </ul>
+        </el-row>
+        <el-row class="btns">
+          <el-button v-show="download" size="small" @click="linkOpen('https://github.com/Hunlongyu/ZY-Player/releases/latest')">下载更新</el-button>
+        </el-row>
      </el-row>
-    </el-row>
-    <el-row class="item about">
-      <el-row class="title"><i class="el-icon-view"></i><span>关于</span></el-row>
-      <el-row class="info">
-        <ul>
-          <li><el-link :underline="false" @click="linkOpen('http://zy.hly120506.top')">官网: ZY Player</el-link></li>
-          <li><el-link :underline="false" @click="linkOpen('https://github.com/Hunlongyu/ZY-Player/issues')">反馈: Issues</el-link></li>
-        </ul>
+      <el-row class="item about">
+        <el-row class="title"><i class="el-icon-view"></i><span>关于</span></el-row>
+        <el-row class="info">
+          <ul>
+            <li><el-link :underline="false" @click="linkOpen('http://zy.hly120506.top')">官网: ZY Player</el-link></li>
+            <li><el-link :underline="false" @click="linkOpen('https://github.com/Hunlongyu/ZY-Player/issues')">反馈: Issues</el-link></li>
+          </ul>
+        </el-row>
      </el-row>
    </el-row>
  </el-row>
@@ -57,12 +65,14 @@ import { shell } from 'electron'
 import site from '@/plugins/dexie/site'
 import theme from '@/plugins/dexie/theme'
 import fly from 'flyio'
+const { ipcRenderer: ipc } = require('electron')
 export default Vue.extend({
  name: 'setting',
  data () {
    return {
      sites: sites,
      dbSite: 0,
+      opacity: 100,
      oldVersion: 'v0.8.1',
      newVersion: '',
      download: false
@@ -135,6 +145,9 @@ export default Vue.extend({
          this.download = false
        }
      })
+    },
+    setOpacity () {
+      ipc.send('opacity', this.opacity / 100)
    }
  },
  created () {
@@ -145,6 +158,17 @@ export default Vue.extend({
 </script>
 <style lang="scss" scoped>
 .setting{
+  height: 100%;
+  position: relative;
+  .setting-box{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    &::-webkit-scrollbar{
+      width: 6px;
+    }
+  }
  .item{
    margin-bottom: 30px;
    .title{
@@ -167,6 +191,21 @@ export default Vue.extend({
      }
    }
  }
+  .update{
+    ul{
+      list-style: none;
+      li{
+        height: 30px;
+        font-size: 14px;
+      }
+    }
+  }
+  .opacity{
+    .info{
+      width: 196px;
+      margin-left: 12px;
+    }
+  }
  .theme{
    .card-box{
      display: flex;
--- a/src/plugins/element.ts
+++ b/src/plugins/element.ts
@@ -3,7 +3,7 @@ import {
  Container, Row, Col, Header, Aside, Main, Drawer,
  Tabs, TabPane, Button, Select, Option, Pagination,
  Table, TableColumn, Input, Card, Link, Loading,
-  Notification, Message
+  Notification, Message, Slider
 } from 'element-ui'

 Vue.use(Container)
@@ -25,6 +25,7 @@ Vue.use(Input)
 Vue.use(Card)
 Vue.use(Link)
 Vue.use(Loading)
+Vue.use(Slider)

 Vue.prototype.$notify = Notification
 Vue.prototype.$message = Message
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -5,7 +5,7 @@ Vue.use(Vuex)

 export default new Vuex.Store({
  state: {
-    Main: 'Search',
+    Main: 'Setting',
    site: 0,
    theme: 'light',
    detail: {