完善音频输出功能

src/renderer/components/core/Icons.vue

@@ -69,5 +69,8 @@ svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/19
     g#icon-down
       // 0 0 451.847 451.847
       path(fill='currentColor' d='M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z')
+    g#icon-refresh
+      // 0 0 512 512
+      path(fill='currentColor' d='M440.65 12.57l4 82.77A247.16 247.16 0 0 0 255.83 8C134.73 8 33.91 94.92 12.29 209.82A12 12 0 0 0 24.09 224h49.05a12 12 0 0 0 11.67-9.26 175.91 175.91 0 0 1 317-56.94l-101.46-4.86a12 12 0 0 0-12.57 12v47.41a12 12 0 0 0 12 12H500a12 12 0 0 0 12-12V12a12 12 0 0 0-12-12h-47.37a12 12 0 0 0-11.98 12.57zM255.83 432a175.61 175.61 0 0 1-146-77.8l101.8 4.87a12 12 0 0 0 12.57-12v-47.4a12 12 0 0 0-12-12H12a12 12 0 0 0-12 12V500a12 12 0 0 0 12 12h47.35a12 12 0 0 0 12-12.6l-4.15-82.57A247.17 247.17 0 0 0 255.83 504c121.11 0 221.93-86.92 243.55-201.82a12 12 0 0 0-11.8-14.18h-49.05a12 12 0 0 0-11.67 9.26A175.86 175.86 0 0 1 255.83 432z')
 </template>
 

src/renderer/components/core/Player.vue

@@ -583,7 +583,7 @@ export default {
       const devices = await navigator.mediaDevices.enumerateDevices()
       let device = devices.find(device => device.deviceId === mediaDeviceId)
       if (!device) return this.setMediaDeviceId('default')
-      console.log(device)
+      // console.log(device)
       this.audio.setSinkId(device.deviceId).catch((err) => {
         console.log(err)
         this.setMediaDeviceId('default')

src/renderer/components/material/Btn.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  button(:class="[$style.btn, min ? $style.min : '']" :disabled="disabled" @click="$emit('click', $event)")
+  button(:class="[$style.btn, min ? $style.min : null]" :disabled="disabled" @click="$emit('click', $event)")
     slot
 </template>
 

src/renderer/components/material/Selection.vue

@@ -1,7 +1,11 @@
 <template lang="pug">
   div(:class="[$style.select, show ? $style.active : '']")
-    div(:class="$style.label" ref="dom_btn" @click="handleShow") {{label}}
-    ul.scroll(:class="$style.list")
+    div(:class="$style.label" ref="dom_btn" @click="handleShow")
+      span {{label}}
+      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')
+    ul.scroll(:class="$style.list" :style="listStyles" ref="dom_list")
       li(v-for="item in list" :class="(itemKey ? item[itemKey] : item) == value ? $style.active : null" @click="handleClick(item)" :title="itemName ? item[itemName] : item") {{itemName ? item[itemName] : item}}
 </template>
 
@@ -28,6 +32,9 @@ export default {
   data() {
     return {
       show: false,
+      listStyles: {
+        transform: 'scaleY(0) translateY(0)',
+      },
     }
   },
   mounted() {
@@ -48,19 +55,31 @@ export default {
   methods: {
     handleHide(e) {
       // if (e && e.target.parentNode != this.$refs.dom_list && this.show) return this.show = false
-      if (e && e.target == this.$refs.dom_btn) return
+      if (e && (e.target == this.$refs.dom_btn || this.$refs.dom_btn.contains(e.target))) return
+      this.listStyles.transform = 'scaleY(0) translateY(0)'
       setTimeout(() => {
         this.show = false
       }, 50)
     },
     handleClick(item) {
-      console.log(this.value)
+      // console.log(this.value)
       if (item === this.value) return
       this.$emit('input', this.itemKey ? item[this.itemKey] : item)
       this.$emit('change', item)
     },
     handleShow() {
-      this.show = !this.show
+      this.show = true
+      this.listStyles.transform = `scaleY(1) translateY(${this.handleGetOffset()}px)`
+    },
+    handleGetOffset() {
+      const listHeight = this.$refs.dom_list.clientHeight
+      const dom_select = this.$refs.dom_list.offsetParent
+      const dom_container = dom_select.offsetParent
+      const containerHeight = dom_container.clientHeight
+      if (containerHeight < listHeight) return 0
+      const offsetHeight = (dom_container.scrollTop + containerHeight) - (dom_select.offsetTop + listHeight)
+      if (offsetHeight > 0) return 0
+      return offsetHeight - 5
     },
   },
 }
@@ -73,6 +92,7 @@ export default {
 @selection-height: 28px;
 
 .select {
+  display: inline-block;
   font-size: 12px;
   position: relative;
   width: 300px;
@@ -82,9 +102,13 @@ export default {
       background-color: @color-btn-background;
     }
     .list {
-      transform: scaleY(1);
       opacity: 1;
     }
+    .icon {
+      svg{
+        transform: rotate(180deg);
+      }
+    }
   }
 }
 
@@ -98,7 +122,22 @@ export default {
   color: @color-btn;
   border-radius: @form-radius;
   cursor: pointer;
-  .mixin-ellipsis-1;
+  display: flex;
+
+  span {
+    flex: auto;
+    .mixin-ellipsis-1;
+  }
+  .icon {
+    flex: none;
+    margin-left: 7px;
+    line-height: 0;
+    svg {
+      width: 1em;
+      transition: transform .2s ease;
+      transform: rotate(0);
+    }
+  }
 
   &:hover {
     background-color: @color-theme_2-hover;
@@ -115,7 +154,7 @@ export default {
   width: 100%;
   background-color: @color-theme_2-background_2;
   opacity: 0;
-  transform: scaleY(0);
+  transform: scaleY(0) translateY(0);
   transform-origin: 0 @selection-height / 2 0;
   transition: .25s ease;
   transition-property: transform, opacity;