添加音效用户预设

src/renderer/components/common/SoundEffectBtn/index.vue

@@ -1,22 +1,27 @@
 <template>
-  <material-popup-btn :class="$style.btnContent">
-    <button :class="$style.btn" :aria-label="$t('player__sound_effect')">
-      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="90%" viewBox="0 0 24 24" space="preserve">
-        <use xlink:href="#icon-tune-variant" />
-      </svg>
-    </button>
-    <template #content>
-      <div :class="$style.content">
+  <button :class="$style.btn" :aria-label="$t('player__sound_effect')" @click="visible = true">
+    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="90%" viewBox="0 0 24 24" space="preserve">
+      <use xlink:href="#icon-tune-variant" />
+    </svg>
+  </button>
+  <material-modal :show="visible" bg-close="bg-close" :teleport="teleport" @close="visible = false">
+    <!-- <main :class="$style.main"> -->
+    <!-- <h2 :class="$style.title">{{ $t('theme_edit_modal__title') }}</h2> -->
+    <div :class="$style.content">
+      <div :class="$style.row">
         <AudioConvolution />
         <AudioPanner />
+      </div>
+      <div :class="$style.row">
         <BiquadFilter />
       </div>
-    </template>
-  </material-popup-btn>
+    </div>
+    <!-- </main> -->
+  </material-modal>
 </template>
 
 <script setup>
-// import { reactive, ref } from '@common/utils/vueTools'
+import { ref } from '@common/utils/vueTools'
 // import useNextTogglePlay from '@renderer/utils/compositions/useNextTogglePlay'
 // import useToggleDesktopLyric from '@renderer/utils/compositions/useToggleDesktopLyric'
 // import { musicInfo, playMusicInfo } from '@renderer/store/player/state'
@@ -27,16 +32,20 @@ import BiquadFilter from './BiquadFilter'
 import AudioPanner from './AudioPanner'
 import AudioConvolution from './AudioConvolution'
 
+defineProps({
+  teleport: {
+    type: String,
+    default: '#root',
+  },
+})
+
+const visible = ref(false)
+
 
 </script>
 
 <style lang="less" module>
 @import '@renderer/assets/styles/layout.less';
-.btnContent {
-  flex: none;
-  height: 100%;
-}
-
 .btn {
   position: relative;
   // color: var(--color-button-font);
@@ -68,12 +77,40 @@ import AudioConvolution from './AudioConvolution'
   }
 }
 
-.content {
+.main {
+  min-width: 300px;
+  // max-height: 100%;
+  // overflow: hidden;
   display: flex;
   flex-flow: column nowrap;
-  padding: 5px 3px;
-  gap: 15px;
-  width: 400px;
+  justify-content: center;
+  min-height: 0;
+}
+// .title {
+//   flex: none;
+//   font-size: 16px;
+//   color: var(--color-font);
+//   line-height: 1.3;
+//   text-align: center;
+//   padding: 10px;
+// }
+.content {
+  display: flex;
+  flex-flow: row nowrap;
+  padding: 0 15px;
+  margin: 15px 0;
+  gap: 30px;
+  position: relative;
+  min-height: 0;
+
+  &:before {
+    .mixin-after;
+    position: absolute;
+    left: 50%;
+    height: 100%;
+    border-left: 1px dashed var(--color-primary-light-100-alpha-700);
+  }
+  // width: 400px;
 
   :global {
     // .player__sound_effect_contnet {
@@ -82,10 +119,16 @@ import AudioConvolution from './AudioConvolution'
     .player__sound_effect_title {
       // margin-bottom: 10px;
       font-size: 14px;
-      padding-bottom: 5px;
+      padding-bottom: 8px;
     }
   }
 }
 
+.row {
+  width: 50%;
+  display: flex;
+  gap: 15px;
+  flex-flow: column nowrap;
+}
 
 </style>