feat: 试听编辑器增强波形交互

新增滚轮缩放、时间轴、悬停竖线三个 wavesurfer 插件，支持 Ctrl+点击设起点 / Shift+点击设终点，弹窗加宽并禁用 ESC 关闭

Author: Applesaber

ChuChartManager/Front/src/components/AudioPreviewEditor.tsx

@@ -1,8 +1,12 @@
 import { computed, defineComponent, ref, watch } from 'vue'
 import { Button, Modal, NumberInput, addToast } from '@munet/ui'
 import { useI18n } from 'vue-i18n'
+import { useMagicKeys } from '@vueuse/core'
 import WaveSurfer from 'wavesurfer.js'
 import RegionsPlugin, { type Region } from 'wavesurfer.js/dist/plugins/regions.esm.js'
+import ZoomPlugin from 'wavesurfer.js/dist/plugins/zoom.esm.js'
+import HoverPlugin from 'wavesurfer.js/dist/plugins/hover.esm.js'
+import TimelinePlugin from 'wavesurfer.js/dist/plugins/timeline.esm.js'
 import { getAudioPreview, setAudioPreview, getAudioUrl } from '@/api'
 import { globalCapture } from '@/utils/globalCapture'
 
@@ -26,6 +30,7 @@ export default defineComponent({
     let ws: WaveSurfer | undefined
     let region: Region | undefined
     let updatingFromInput = false
+    const { ctrl, shift } = useMagicKeys()
 
     const playIcon = computed(() => isPlaying.value ? 'i-mdi-pause' : 'i-mdi-play')
 
@@ -83,7 +88,12 @@ export default defineComponent({
         waveColor: 'rgb(107,203,152)',
         progressColor: 'rgb(33,194,118)',
         url: getAudioUrl(props.id, props.assetDir),
-        plugins: [regions],
+        plugins: [
+          regions,
+          ZoomPlugin.create({ scale: 0.05 }),
+          HoverPlugin.create({ lineColor: 'rgba(89,89,89,0.8)' }),
+          TimelinePlugin.create(),
+        ],
       })
 
       ws.on('decode', dur => {
@@ -101,6 +111,26 @@ export default defineComponent({
         dataLoad.value = false
       })
 
+      ws.on('click', progress => {
+        if (!region || !ws) return
+        const time = ws.getDuration() * progress
+        if (ctrl.value) {
+          if (time >= region.end) {
+            addToast({ message: t('music.previewStartGtEnd'), type: 'error' })
+            return
+          }
+          region.setOptions({ start: time })
+          syncFromRegion()
+        } else if (shift.value) {
+          if (time <= region.start) {
+            addToast({ message: t('music.previewEndLtStart'), type: 'error' })
+            return
+          }
+          region.setOptions({ end: time, start: region.start })
+          syncFromRegion()
+        }
+      })
+
       regions.on('region-out', () => {
         if (isPlaySection.value) region?.play()
       })
@@ -134,7 +164,7 @@ export default defineComponent({
     return () => (
       <>
         <Button class="ws-nowrap shrink-0" onClick={() => show.value = true}>{t('music.editPreview')}</Button>
-        <Modal width="min(90vw,55em)" title={t('music.editPreview')} v-model:show={show.value}>
+        <Modal width="min(60vw,80em)" title={t('music.editPreview')} v-model:show={show.value} esc={false}>
           {{
             default: () => (
               <div class="relative flex flex-col gap-3">

ChuChartManager/Front/src/locales/en.yaml

@@ -207,7 +207,7 @@ music:
   clickToReplaceJacket: Click to replace jacket
   replaceAudio: Replace Audio
   editPreview: Edit Preview
-  previewHint: Drag the region to adjust the preview range, or set it precisely below
+  previewHint: Drag the region to adjust; Ctrl+click sets start / Shift+click sets end; set precisely below; scroll to zoom
   previewStart: Start (s)
   previewEnd: End (s)
   previewPlayRegion: Play Region

ChuChartManager/Front/src/locales/ja.yaml

@@ -207,7 +207,7 @@ music:
   clickToReplaceJacket: クリックでジャケットを置換
   replaceAudio: 音声を置換
   editPreview: 試聴を編集
-  previewHint: 選択範囲をドラッグして試聴区間を調整、または下の入力欄で精密に設定
+  previewHint: 範囲をドラッグして調整、Ctrl+クリックで開始 / Shift+クリックで終了、下の入力欄で精密設定、ホイールでズーム
   previewStart: 開始（秒）
   previewEnd: 終了（秒）
   previewPlayRegion: 選択範囲を試聴

ChuChartManager/Front/src/locales/zh.yaml

@@ -207,7 +207,7 @@ music:
   clickToReplaceJacket: 点击替换封面
   replaceAudio: 替换音频
   editPreview: 编辑试听
-  previewHint: 拖动选区调整试听区间，或用下方输入框精确设置
+  previewHint: 拖动选区调整试听区间，Ctrl+点击设起点 / Shift+点击设终点，或用下方输入框精确设置；滚轮缩放波形
   previewStart: 起点（秒）
   previewEnd: 终点（秒）
   previewPlayRegion: 试听选区