feat: 设置预览判断支持输入数字

Author: clansty

AquaMai

@@ -16,7 +16,7 @@
     "@iconify/json": "^2.2.443",
     "@microsoft/fetch-event-source": "^2.0.1",
     "@modyfi/vite-plugin-yaml": "^1.1.1",
-    "@munet/ui": "^1.0.12",
+    "@munet/ui": "^1.0.13",
     "@sentry/vite-plugin": "^5.1.0",
     "@sentry/vue": "^10.40.0",
     "@types/color": "^4.2.0",

MaiChartManager/Front/package.json

@@ -127,6 +127,8 @@ music:
     previewChartWarning: Chart preview does not represent actual gameplay, please test in-game
     audioPreviewCtrlShiftClick: Ctrl / Shift + Click to set start / end time directly at click position
     audioPreviewSelectRegion: Selection
+    audioPreviewStart: Start Time (s)
+    audioPreviewEnd: End Time (s)
     includeB35: Include in B35
     includeB15: Include in B15
     versionHint: >-

MaiChartManager/Front/pnpm-lock.yaml

@@ -121,6 +121,8 @@ music:
     previewChartWarning: 譜面預覽不代表上機效果，請以實際為準
     audioPreviewCtrlShiftClick: Ctrl / Shift + 點擊可直接將點擊位置設為開始 / 結束時間
     audioPreviewSelectRegion: 選區
+    audioPreviewStart: 起點時間（秒）
+    audioPreviewEnd: 終點時間（秒）
     includeB35: 計入 B35
     includeB15: 計入 B15
     versionHint: >-

MaiChartManager/Front/src/locales/en.yaml

@@ -121,6 +121,8 @@ music:
     previewChartWarning: 谱面预览不代表上机效果，请以实际为准
     audioPreviewCtrlShiftClick: Ctrl / Shift + 点击可直接将点击位置设为开始 / 结束时间
     audioPreviewSelectRegion: 选区
+    audioPreviewStart: 起点时间（秒）
+    audioPreviewEnd: 终点时间（秒）
     includeB35: 计入 B35
     includeB15: 计入 B15
     versionHint: >-

MaiChartManager/Front/src/locales/zh-TW.yaml

@@ -0,0 +1,24 @@
+/**
+ * fetchEventSource 的自定义 onopen 处理器
+ * 当响应不是 SSE 格式时（如 ASP.NET 返回 ProblemDetails JSON），
+ * 读取响应体获取实际的错误信息，而非仅报 content-type 不匹配
+ */
+export async function handleSseOpen(response: Response) {
+  if (response.ok && response.headers.get('content-type')?.includes('text/event-stream')) return;
+
+  let errorMessage: string | undefined;
+  try {
+    const text = await response.text();
+    if (text) {
+      try {
+        const json = JSON.parse(text);
+        errorMessage = json.detail || json.title || json.message;
+      } catch {
+        errorMessage = text;
+      }
+    }
+  } catch {
+  }
+
+  throw new Error(errorMessage || `HTTP ${response.status}: ${response.statusText}`);
+}

MaiChartManager/Front/src/locales/zh.yaml

@@ -11,6 +11,7 @@ import ImportStepDisplay from "./ImportStepDisplay";
 import { useStorage } from "@vueuse/core";
 import { captureException } from "@sentry/vue";
 import { fetchEventSource } from "@microsoft/fetch-event-source";
+import { handleSseOpen } from "@/utils/sseOpen";
 import { defaultSavedOptions, defaultTempOptions, dummyMeta, IMPORT_STEP, ImportChartMessageEx, ImportMeta, STEP } from "./types";
 import getNextUnusedMusicId from "@/utils/getNextUnusedMusicId";
 import { useI18n } from 'vue-i18n';
@@ -102,6 +103,7 @@ export default defineComponent({
         signal: controller.signal,
         method: 'PUT',
         body,
+        onopen: handleSseOpen,
         onerror(e) {
           reject(e);
           controller.abort();

MaiChartManager/Front/src/utils/sseOpen.ts

@@ -1,5 +1,5 @@
-import { computed, defineComponent, onMounted, ref } from "vue";
-import { Button, addToast } from "@munet/ui";
+import { computed, defineComponent, onMounted, ref, watch } from "vue";
+import { Button, NumberInput, addToast } from "@munet/ui";
 import WaveSurfer from "wavesurfer.js";
 import { globalCapture, selectedADir, selectMusicId } from "@/store/refs";
 import ZoomPlugin from 'wavesurfer.js/dist/plugins/zoom'
@@ -15,7 +15,7 @@ export default defineComponent({
   props: {
     closeModel: {type: Function, required: true}
   },
-  setup(props, {emit}) {
+  setup(props, {emit, expose}) {
     const waveSurferContainer = ref()
     const region = ref<Region>()
     const ws = ref<WaveSurfer>()
@@ -24,6 +24,42 @@ export default defineComponent({
     const load = ref(false)
     const dataLoad = ref(true)
     const {ctrl, shift} = useMagicKeys()
+    const startTime = ref(0)
+    const endTime = ref(0)
+    const duration = ref(0)
+    // 标记是否正在由输入框触发 region 更新，防止循环
+    const updatingFromInput = ref(false)
+
+    const syncTimesFromRegion = () => {
+      if (region.value && !updatingFromInput.value) {
+        startTime.value = region.value.start
+        endTime.value = region.value.end
+      }
+    }
+
+    const onStartTimeChange = () => {
+      if (!region.value) return
+      if (startTime.value >= endTime.value) {
+        addToast({message: t('music.edit.audioPreviewStartGtEnd'), type: 'warning'})
+        startTime.value = region.value.start
+        return
+      }
+      updatingFromInput.value = true
+      region.value.setOptions({start: startTime.value})
+      updatingFromInput.value = false
+    }
+
+    const onEndTimeChange = () => {
+      if (!region.value) return
+      if (endTime.value <= startTime.value) {
+        addToast({message: t('music.edit.audioPreviewEndLtStart'), type: 'warning'})
+        endTime.value = region.value.end
+        return
+      }
+      updatingFromInput.value = true
+      region.value.setOptions({end: endTime.value, start: region.value.start})
+      updatingFromInput.value = false
+    }
 
 
     onMounted(async () => {
@@ -57,15 +93,20 @@ export default defineComponent({
         ],
       })
 
-      ws.value.on('decode', (duration) => {
+      ws.value.on('decode', (dur) => {
+        duration.value = dur
         // Regions
         region.value = regions.addRegion({
           start: savedRegion!.startTime! >= 0 ? savedRegion.startTime! : 0,
-          end: savedRegion!.endTime! >= 0 ? savedRegion.endTime! : duration,
+          end: savedRegion!.endTime! >= 0 ? savedRegion.endTime! : dur,
           drag: true,
           resize: true,
           id: 'selection',
         })
+        syncTimesFromRegion()
+
+        region.value.on('update', syncTimesFromRegion)
+        region.value.on('update-end', syncTimesFromRegion)
       })
 
       ws.value.on('click', (e) => {
@@ -76,12 +117,14 @@ export default defineComponent({
             return
           }
           region.value!.setOptions({start: time})
+          syncTimesFromRegion()
         } else if (shift.value) {
           if (time <= region.value!.start) {
             addToast({message: t('music.edit.audioPreviewEndLtStart'), type: 'warning'})
             return
           }
           region.value!.setOptions({end: time, start: region.value!.start})
+          syncTimesFromRegion()
         }
       })
 
@@ -110,6 +153,10 @@ export default defineComponent({
 
     const playIcon = computed(() => isPlaying.value ? 'i-mdi-pause' : 'i-mdi-play')
 
+    expose({
+      save, load
+    })
+
     return () => <div class="relative">
       {dataLoad.value && <div class="absolute inset-0 flex items-center justify-center bg-black/10 z-10"><div class="i-mdi-loading animate-spin text-2xl"/></div>}
       <div class="flex flex-col gap-3">
@@ -133,13 +180,15 @@ export default defineComponent({
             {t('music.edit.audioPreviewSelectRegion')}
           </Button>
         </div>
-        <div class="flex gap-2 justify-end">
-          <Button variant="secondary" danger onClick={props.closeModel as any} disabled={load.value}>
-            {t('common.dismiss')}
-          </Button>
-          <Button variant="secondary" onClick={save} ing={load.value}>
-            {t('common.save')}
-          </Button>
+        <div class="flex gap-4 items-center">
+          <div class="flex flex-col gap-1 w-0 grow">
+            <div class="ml-1 text-sm">{t('music.edit.audioPreviewStart')}</div>
+            <NumberInput v-model:value={startTime.value} min={0} max={duration.value} step={0.001} decimal={3} onChange={onStartTimeChange}/>
+          </div>
+          <div class="flex flex-col gap-1 w-0 grow">
+            <div class="ml-1 text-sm">{t('music.edit.audioPreviewEnd')}</div>
+            <NumberInput v-model:value={endTime.value} min={0} max={duration.value} step={0.001} decimal={3} onChange={onEndTimeChange}/>
+          </div>
         </div>
       </div>
     </div>;

MaiChartManager/Front/src/views/Charts/ImportCreateChartButton/ImportChartButton/index.tsx

@@ -20,6 +20,8 @@ export default defineComponent({
       show.value = true
     }
 
+    const editorRef = ref<{save: () => Promise<void>, load: boolean}>()
+
     return () => <Button variant="secondary" onClick={handleClick} disabled={props.disabled}>
       {t('music.edit.editPreview')}
 
@@ -29,8 +31,15 @@ export default defineComponent({
         v-model:show={show.value}
         esc={false}
       >{{
-        default: () =>
-          <AudioPreviewEditor closeModel={() => show.value = false}/>,
+        default: () => <AudioPreviewEditor ref={editorRef} closeModel={() => show.value = false} />,
+        actions: () => <>
+          <Button variant="secondary" danger onClick={() => show.value = false} disabled={editorRef.value?.load}>
+            {t('common.dismiss')}
+          </Button>
+          <Button variant="secondary" onClick={editorRef.value?.save} ing={editorRef.value?.load}>
+            {t('common.save')}
+          </Button>
+        </>
       }}</Modal>
     </Button>;
   }