新增窗口大小设置

src/renderer/assets/styles/variables.less

@@ -413,7 +413,7 @@
 
 
 // Width
-@width-app-left: 180px;
+@width-app-left: 20%;
 
 // Height
 @height-toolbar: 50px;

src/renderer/components/core/Aside.vue

@@ -68,8 +68,8 @@ export default {
 }
 .logo {
   box-sizing: border-box;
-  padding: 20px;
-  height: 100px;
+  padding: 12% 13%;
+  // height: 120px;
   color: @color-theme-font;
   flex: none;
 }

src/renderer/components/core/Player.vue

@@ -88,8 +88,6 @@ export default {
         msDownX: 0,
         msDownVolume: 0,
       },
-      handleVolumeMsMoveFn: null,
-      handleVolumeMsUpFn: null,
     }
   },
   computed: {
@@ -125,12 +123,14 @@ export default {
       this.setVolume(volume)
     }, 300)
 
-    document.addEventListener('mousemove', this.handleVolumeMsMoveFn = this.handleVolumeMsMove.bind(this))
-    document.addEventListener('mouseup', this.handleVolumeMsUpFn = this.handleVolumeMsUp.bind(this))
+    document.addEventListener('mousemove', this.handleVolumeMsMove)
+    document.addEventListener('mouseup', this.handleVolumeMsUp)
+    window.addEventListener('resize', this.handleResize)
   },
   beforeDestroy() {
-    document.removeEventListener('mousemove', this.handleVolumeMsMoveFn)
-    document.removeEventListener('mouseup', this.handleVolumeMsUpFn)
+    document.removeEventListener('mousemove', this.handleVolumeMsMove)
+    document.removeEventListener('mouseup', this.handleVolumeMsUp)
+    window.removeEventListener('resize', this.handleResize)
   },
   watch: {
     changePlay(n) {
@@ -489,6 +489,9 @@ export default {
     handleCopy(text) {
       clipboardWriteText(text)
     },
+    handleResize() {
+      this.setProgessWidth()
+    },
   },
 }
 </script>

src/renderer/components/material/TagList.vue

@@ -5,7 +5,7 @@
       div(:class="$style.icon")
         svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 451.847 451.847' space='preserve')
           use(xlink:href='#icon-down')
-    div.scroll(:class="$style.list" @click.stop ref="dom_list")
+    div.scroll(:class="$style.list" :style="{ width: listStyle }" @click.stop ref="dom_list")
       div(:class="$style.tag" @click="handleClick(null)") 默认
       dl(v-for="type in list")
         dt(:class="$style.type") {{type.name}}
@@ -14,6 +14,7 @@
 
 <script>
 import { isChildren } from '../../utils'
+import { mapGetters } from 'vuex'
 export default {
   props: {
     list: {
@@ -26,6 +27,13 @@ export default {
       type: Object,
     },
   },
+  computed: {
+    ...mapGetters(['setting', 'windowSizeList']),
+    listStyle() {
+      let info = this.windowSizeList.find(i => i.id === this.setting.windowSizeId) || this.windowSizeList[0]
+      return info.tabList
+    },
+  },
   data() {
     return {
       show: false,

src/renderer/store/getters.js

@@ -34,4 +34,7 @@ export default {
   route(state) {
     return state.route
   },
+  windowSizeList(state) {
+    return state.windowSizeList
+  },
 }

src/renderer/store/state.js

@@ -2,6 +2,7 @@
 // const isDev = process.env.NODE_ENV === 'development'
 import Store from 'electron-store'
 import { updateSetting } from '../utils'
+import { windowSizeList } from '../../common/config'
 import { version } from '../../../package.json'
 let electronStore = new Store()
 const setting = updateSetting(electronStore.get('setting'))
@@ -65,4 +66,5 @@ export default {
   userInfo: null,
   setting,
   electronStore,
+  windowSizeList,
 }

src/renderer/utils/index.js

@@ -164,7 +164,7 @@ export const isChildren = (parent, children) => {
  * @param {*} setting
  */
 export const updateSetting = setting => {
-  const defaultVersion = '1.0.12'
+  const defaultVersion = '1.0.13'
   const defaultSetting = {
     version: defaultVersion,
     player: {
@@ -216,6 +216,7 @@ export const updateSetting = setting => {
         password: '',
       },
     },
+    windowSizeId: 1,
     themeId: 0,
     sourceId: 'kw',
     apiSource: 'test',
@@ -369,3 +370,10 @@ export const getCacheSize = () => remote.getCurrentWindow().webContents.session.
  * @param {*} win
  */
 export const clearCache = () => remote.getCurrentWindow().webContents.session.clearCache()
+
+/**
+ * 设置窗口大小
+ * @param {*} width
+ * @param {*} height
+ */
+export const setWindowSize = (width, height) => remote.getCurrentWindow().setBounds({ width, height })

src/renderer/views/Setting.vue

@@ -18,9 +18,15 @@ div.scroll(:class="$style.setting")
     dd(title='选择音乐来源')
       h3 音乐来源
       div
-        material-checkbox(v-for="item in apiSources" :id="`setting_api_source_${item.id}`" @change="handleAPISourceChange(item.id)" :class="$style.gapTop"
+        material-checkbox(v-for="item in apiSources" :id="`setting_api_source_${item.id}`" name="setting_api_source" @change="handleAPISourceChange(item.id)" :class="$style.gapTop"
           need v-model="current_setting.apiSource" :disabled="item.disabled" :value="item.id" :label="item.label" :key="item.id")
 
+    dd(title='设置软件窗口尺寸')
+      h3 窗口尺寸
+      div
+        material-checkbox(v-for="(item, index) in windowSizeList" :id="`setting_window_size_${item.id}`" name="setting_window_size" @change="handleWindowSizeChange(index)" :class="$style.gapLeft"
+          need v-model="current_setting.windowSizeId" :value="item.id" :label="item.name" :key="item.id")
+
     dt 播放设置
     dd(title="都不选时播放完当前歌曲就停止播放")
       h3 歌曲切换方式
@@ -176,19 +182,22 @@ import {
   getCacheSize,
   clearCache,
   sizeFormate,
+  setWindowSize,
 } from '../utils'
 import { rendererSend } from '../../common/icp'
 import fs from 'fs'
 
-
 export default {
   name: 'Setting',
   computed: {
-    ...mapGetters(['setting', 'themes', 'version']),
+    ...mapGetters(['setting', 'themes', 'version', 'windowSizeList']),
     ...mapGetters('list', ['defaultList', 'loveList']),
     isLatestVer() {
       return this.version.newVersion && this.version.version === this.version.newVersion.version
     },
+    isShowRebootBtn() {
+      return this.current_setting.windowSizeId != window.currentWindowSizeId
+    },
   },
   data() {
     return {
@@ -225,6 +234,7 @@ export default {
         odc: {
           isAutoClearSearchInput: false,
         },
+        windowSizeId: 1,
         themeId: 0,
         sourceId: 0,
         randomAnimate: true,
@@ -314,6 +324,7 @@ export default {
     ...mapMutations('list', ['setList']),
     init() {
       this.current_setting = JSON.parse(JSON.stringify(this.setting))
+      if (!window.currentWindowSizeId) window.currentWindowSizeId = this.setting.windowSizeId
       this.getCacheSize()
     },
     handleChangeSavePath() {
@@ -502,6 +513,10 @@ export default {
         this.getCacheSize()
       })
     },
+    handleWindowSizeChange(index) {
+      let info = this.windowSizeList[index]
+      setWindowSize(info.width, info.height)
+    },
   },
 }
 </script>
@@ -549,6 +564,19 @@ export default {
 
 }
 
+.btn-content {
+  display: inline-block;
+  transition: @transition-theme;
+  transition-property: opacity, transform;
+  opacity: 1;
+  transform: scale(1);
+
+  &.hide {
+    opacity: 0;
+    transform: scale(0);
+  }
+}
+
 .gap-left {
   + .gap-left {
     margin-left: 20px;