重构CheckBox组件

publish/changeLog.md

@@ -0,0 +1,3 @@
+### 优化
+
+- 重构checkbox组件

src/renderer/assets/styles/index.less

@@ -12,6 +12,10 @@
   .mixin-ellipsis-1;
 }
 
+.center {
+  text-align: center;
+}
+
 .break {
   word-break: break-all;
 }

src/renderer/components/material/Checkbox.vue

@@ -1,18 +1,26 @@
 <template lang="pug">
 div(:class="$style.checkbox")
-  input(:type="need ? 'radio' : 'checkbox'" :id="id" :value="target" :name="name" @change="change" v-model="val")
+  input(:type="need ? 'radio' : 'checkbox'" :id="id" :value="value" :name="name" @change="change" v-model="bool")
   label(:for="id" :class="$style.content")
-    div
+    div(v-if="indeterminate")
+      svg(v-show="indeterminate" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' width="100%" viewBox='0 32 448 448' space='preserve')
+        use(xlink:href='#icon-check-indeterminate')
+      svg(v-show="!indeterminate" version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' width="100%" viewBox='0 0 448 512' space='preserve')
+        use(xlink:href='#icon-check-true')
+    div(v-else)
       svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' width="100%" viewBox='0 32 448 448' space='preserve')
-        use(xlink:href='#icon-check')
+        use(xlink:href='#icon-check-true')
-    span
+    span(v-if="label != null") {{label}}
-      slot
 </template>
 
 <script>
 export default {
+  model: {
+    prop: 'checked',
+    event: 'input',
+  },
   props: {
-    target: {},
+    checked: {},
     value: {},
     id: {
       type: String,
@@ -25,41 +33,69 @@ export default {
       type: Boolean,
       default: false,
     },
+    label: {},
+    indeterminate: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
-      val: false,
+      bool: false,
     }
   },
   watch: {
-    value(n) {
+    checked(n) {
-      if (this.target && n !== this.target) {
+      this.setValue(n)
-        this.val = this.need
-          ? n === this.target
-            ? this.target
-            : false
-          : n === this.target
-      } else if (n !== this.val) {
-        this.val = n
-      }
     },
   },
   mounted() {
-    if (this.target) {
+    this.setValue(this.checked)
-      this.val = this.need
-        ? this.value === this.target
-          ? this.target
-          : false
-        : this.value === this.target
-    } else {
-      this.val = this.value
-    }
   },
   methods: {
     change() {
-      let val = this.target == null ? this.val : this.val ? this.target : null
+      let checked
-      this.$emit('input', val)
+      if (Array.isArray(this.checked)) {
-      this.$emit('change', val)
+        checked = [...this.checked]
+        const index = checked.indexOf(this.value)
+        if (index < 0) {
+          checked.push(this.value)
+        } else {
+          checked.splice(index, 1)
+        }
+      } else if (typeof this.checked == 'string') {
+        checked = this.bool ? this.value : ''
+      } else if (typeof this.checked == 'boolean') {
+        let bool = this.bool
+        if (this.indeterminate) {
+          bool = true
+          this.$nextTick(() => {
+            this.bool = true
+          })
+        }
+        checked = bool
+      }
+      this.$emit('input', checked)
+      this.$emit('change', checked)
+    },
+    setValue(value) {
+      let bool
+      if (Array.isArray(value)) {
+        bool = value.includes(this.value)
+      } else {
+        switch (typeof value) {
+          case 'string':
+            bool = value === this.value
+            break
+          case 'boolean':
+            bool = value
+            break
+          default:
+            return
+        }
+      }
+
+      this.bool = this.need ? bool && this.value : bool
     },
   },
 }

src/renderer/utils/music/kw/leaderboard.js

@@ -140,7 +140,7 @@ export default {
           size: null,
         }
       }
-      types.reverse()
+      // types.reverse()
       return {
         singer: item.artist,
         name: item.name,

src/renderer/utils/request.js

@@ -4,7 +4,7 @@ import { debugRequest } from './env'
 // import fs from 'fs'
 
 const fatchData = (url, method, options, callback) => {
-  console.log('---start---', url)
+  // console.log('---start---', url)
   return request(url, {
     method,
     headers: options.headers,
@@ -14,11 +14,16 @@ const fatchData = (url, method, options, callback) => {
     json: options.format === undefined || options.format === 'json',
   }, (err, resp, body) => {
     if (err) return callback(err, null)
-    console.log('---end---', url)
+    // console.log('---end---', url)
     callback(null, resp, body)
   })
 }
 
+/**
+ * promise 形式的请求方法
+ * @param {*} url
+ * @param {*} options
+ */
 export const httpFatch = (url, options = { method: 'get' }) => {
   let requestObj
   let cancelFn

src/renderer/views/Search.vue

@@ -6,7 +6,9 @@
         table
           thead
             tr
-              th.nobreak(style="width: 30%;") 歌曲名
+              th.nobreak.center(style="width: 37px;")
+                material-checkbox(id="search_select_all" v-model="isSelectAll" @change="handleSelectAllData" :indeterminate="isIndeterminate")
+              th.nobreak(style="width: 25%;") 歌曲名
               th.nobreak(style="width: 20%;") 歌手
               th.nobreak(style="width: 25%;") 专辑
               th.nobreak(style="width: 15%;") 操作
@@ -15,7 +17,9 @@
         table
           tbody
             tr(v-for='(item, index) in list' :key='item.songmid' @click="handleDoubleClick(index)")
-              td.break(style="width: 30%;")
+              td.nobreak.center(style="width: 37px;" @click.stop)
+                material-checkbox(:id="index.toString()" v-model="selectdData" :value="item")
+              td.break(style="width: 25%;")
                 | {{item.name}}
                 span.badge.badge-info(v-if="item._types['320k']") 高品质
                 span.badge.badge-success(v-if="item._types.ape || item._types.flac") 无损
@@ -26,7 +30,8 @@
               td(style="width: 10%;") {{item.interval}}
         div(:class="$style.pagination")
           material-pagination(:count="listInfo.total" :limit="limit" :page="page" @btn-click="handleTogglePage")
-    div(v-else :class="$style.noItem")
+    div(v-else :class="$style.noitem")
+      p 搜我所想~~😉
     material-download-modal(:show="showDownload" :musicInfo="musicInfo" @select="handleAddDownload" @close="showDownload = false")
 </template>
 
@@ -44,6 +49,10 @@ export default {
       clickIndex: -1,
       showDownload: false,
       musicInfo: null,
+      selectdData: [],
+      isSelectAll: false,
+      isIndeterminate: false,
+      isShowEditBtn: false,
     }
   },
   beforeRouteUpdate(to, from, next) {
@@ -71,6 +80,22 @@ export default {
       this.handleSearch(this.text, this.page)
     }
   },
+  watch: {
+    selectdData(n) {
+      const len = n.length
+      if (len) {
+        this.isSelectAll = true
+        this.isIndeterminate = len !== this.list.length
+        this.isShowEditBtn = true
+      } else {
+        this.isSelectAll = false
+        this.isShowEditBtn = false
+      }
+    },
+    list() {
+      this.resetSelect()
+    },
+  },
   computed: {
     ...mapGetters(['userInfo']),
     ...mapGetters('search', ['list', 'limit', 'listInfo']),
@@ -118,7 +143,6 @@ export default {
           break
       }
     },
-    openDownloadModal() {},
     testPlay(index) {
       let targetSong = this.list[index]
       this.defaultListAdd(targetSong)
@@ -140,6 +164,13 @@ export default {
       this.createDownload({ musicInfo: this.musicInfo, type })
       this.showDownload = false
     },
+    handleSelectAllData(isSelect) {
+      this.selectdData = isSelect ? [...this.list] : []
+    },
+    resetSelect() {
+      this.isSelectAll = false
+      this.selectdData = []
+    },
   },
 }
 </script>
@@ -183,7 +214,17 @@ export default {
   // left: 50%;
   // transform: translateX(-50%);
 }
-// .noItem {
+.noitem {
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
 
-// }
+  p {
+    font-size: 24px;
+    color: #ccc;
+  }
+}
 </style>

src/renderer/views/Setting.vue

@@ -13,18 +13,18 @@ div.scroll(:class="$style.setting")
     dd(title='弹出层的动画效果')
       h3 弹出层随机动画
       div
-        material-checkbox(id="setting_animate" v-model="current_setting.randomAnimate") 是否启用
+        material-checkbox(id="setting_animate" v-model="current_setting.randomAnimate" label="是否启用")
 
     dt 播放设置
     dd(title="都不选时播放完当前歌曲就停止播放")
       h3 歌曲切换方式
       div
-        material-checkbox(:id="`setting_player_togglePlay_${item.value}`" :class="$style.gap" :target="item.value" :key="item.value"
+        material-checkbox(:id="`setting_player_togglePlay_${item.value}`" :class="$style.gap" :value="item.value" :key="item.value"
-            v-model="current_setting.player.togglePlayMethod" v-for="item in togglePlayMethods") {{item.name}}
+            v-model="current_setting.player.togglePlayMethod" v-for="item in togglePlayMethods" :label="item.name")
     dd(title='启用时将优先播放320K品质的歌曲')
       h3 优先播放高品质音乐
       div
-        material-checkbox(id="setting_player_highQuality" v-model="current_setting.player.highQuality") 是否启用
+        material-checkbox(id="setting_player_highQuality" v-model="current_setting.player.highQuality" label="是否启用")
     dt 下载设置
     dd(title='下载歌曲保存的路径')
       h3 下载路径
@@ -37,13 +37,13 @@ div.scroll(:class="$style.setting")
     dd(title='下载歌曲时的命名方式')
       h3 文件命名方式
       div
-        material-checkbox(:id="`setting_download_musicName_${item.value}`" :class="$style.gap" name="setting_download_musicName" :target="item.value" :key="item.value" need
+        material-checkbox(:id="`setting_download_musicName_${item.value}`" :class="$style.gap" name="setting_download_musicName" :value="item.value" :key="item.value" need
-            v-model="current_setting.download.fileName" v-for="item in musicNames") {{item.name}}
+            v-model="current_setting.download.fileName" v-for="item in musicNames" :label="item.name")
     dt 列表设置
     dd(title='播放列表是否显示专辑栏')
       h3 专辑栏
       div
-        material-checkbox(id="setting_list_showalbum" v-model="current_setting.list.isShowAlbumName") 是否显示专辑栏
+        material-checkbox(id="setting_list_showalbum" v-model="current_setting.list.isShowAlbumName" label="是否显示专辑栏")
     dt 备份与恢复
     dd
       h3 部分数据