feat: ID 冲突提示与拖放导入

谱面页支持拖入文件夹导入、拖入单文件替换封面/音频/谱面；
选中曲目时显示跨 option 目录的 ID 冲突警告

Author: Applesaber

ChuChartManager/Controllers/MusicController.cs

@@ -73,6 +73,20 @@ public ActionResult<List<string>> GetSources()
         return Ok(scanner.AvailableSources);
     }
 
+    [HttpGet]
+    public ActionResult<List<string>> GetIdConflicts([FromQuery] int id, [FromQuery] string assetDir)
+    {
+        var scanner = scannerService.Scanner;
+        if (scanner == null) return Ok(new List<string>());
+
+        var dirs = scanner.MusicBySource
+            .Where(kv => kv.Key != assetDir && kv.Value.Any(m => m.Id == id))
+            .Select(kv => kv.Key)
+            .OrderBy(d => d)
+            .ToList();
+        return Ok(dirs);
+    }
+
     [HttpGet]
     public ActionResult<Dictionary<int, string>> GetGenreMap()
     {

ChuChartManager/Front/src/api/index.ts

@@ -65,6 +65,11 @@ export async function getStartupErrors(): Promise<string[]> {
   return data
 }
 
+export async function getIdConflicts(id: number, assetDir: string): Promise<string[]> {
+  const { data } = await apiClient.get('/api/Music/GetIdConflicts', { params: { id, assetDir } })
+  return data
+}
+
 export async function getSources(): Promise<string[]> {
   const { data } = await apiClient.get('/api/Music/GetSources')
   return data

ChuChartManager/Front/src/components/MusicIdConflictNotifier.tsx

@@ -0,0 +1,33 @@
+import { defineComponent, ref, watch } from 'vue'
+import { Popover } from '@munet/ui'
+import { useI18n } from 'vue-i18n'
+import { getIdConflicts } from '@/api'
+
+export default defineComponent({
+  props: {
+    id: { type: Number, required: true },
+    assetDir: { type: String, required: true },
+  },
+  setup(props) {
+    const { t } = useI18n()
+    const conflicts = ref<string[]>([])
+
+    watch(() => [props.id, props.assetDir], async () => {
+      conflicts.value = await getIdConflicts(props.id, props.assetDir)
+    }, { immediate: true })
+
+    return () => !!conflicts.value.length && (
+      <Popover trigger="hover">
+        {{
+          trigger: () => <div class="text-#f0a020 i-mdi-alert-outline text-1.2em shrink-0" />,
+          default: () => (
+            <div class="flex flex-col gap-1">
+              {t('music.idConflictWarning')}
+              {conflicts.value.map(dir => <div key={dir} class="font-mono">{dir}</div>)}
+            </div>
+          ),
+        }}
+      </Popover>
+    )
+  },
+})

ChuChartManager/Front/src/fs-access.d.ts

@@ -1,6 +1,8 @@
 interface FileSystemFileHandle {
   getFile(): Promise<File>
   createWritable(): Promise<FileSystemWritableFileStream>
+  readonly kind: 'file'
+  readonly name: string
 }
 
 interface FileSystemDirectoryHandle {
@@ -33,3 +35,7 @@ interface Window {
   showOpenFilePicker(options?: ShowOpenFilePickerOptions): Promise<FileSystemFileHandle[]>
   showDirectoryPicker(options?: ShowDirectoryPickerOptions): Promise<FileSystemDirectoryHandle>
 }
+
+interface DataTransferItem {
+  getAsFileSystemHandle(): Promise<FileSystemDirectoryHandle | FileSystemFileHandle | null>
+}

ChuChartManager/Front/src/locales/en.yaml

@@ -125,6 +125,8 @@ music:
   worldsEnd: "WORLD'S END"
   trackCount: "{count} tracks"
   statusLine: "{tracks} tracks | {options} options"
+  idConflictWarning: "This ID also exists in the following option directories and may conflict in game:"
+  dropHint: Drop to import files
   saved: "Saved: {name}"
   copiedTo: "Copied to {dir}"
   copyFailed: "Copy failed: {error}"

ChuChartManager/Front/src/locales/ja.yaml

@@ -125,6 +125,8 @@ music:
   worldsEnd: "WORLD'S END"
   trackCount: "{count} 曲"
   statusLine: "{tracks} 曲 | {options} オプション"
+  idConflictWarning: このIDは以下のoptionディレクトリにも存在し、ゲーム内で競合する可能性があります：
+  dropHint: ドロップしてファイルをインポート
   saved: "保存しました: {name}"
   copiedTo: "{dir} にコピーしました"
   copyFailed: "コピー失敗: {error}"

ChuChartManager/Front/src/locales/zh.yaml

@@ -125,6 +125,8 @@ music:
   worldsEnd: "WORLD'S END"
   trackCount: "{count} 首"
   statusLine: "{tracks} 首曲目 | {options} 个 option"
+  idConflictWarning: 此 ID 在以下 option 目录中也存在，游戏内可能相互覆盖：
+  dropHint: 松开以导入文件
   saved: "已保存: {name}"
   copiedTo: "已复制到 {dir}"
   copyFailed: "复制失败: {error}"

ChuChartManager/Front/src/views/ImportMusicModal.vue

@@ -10,6 +10,7 @@ import BottomOverlay from '@/components/BottomOverlay.vue'
 import FileTypeIcon from '@/components/FileTypeIcon.vue'
 
 const emit = defineEmits<{ imported: [] }>()
+const props = withDefaults(defineProps<{ showButton?: boolean }>(), { showButton: true })
 const { t } = useI18n()
 
 const loading = ref(false)
@@ -107,6 +108,10 @@ async function startImport() {
     return
   }
 
+  await startImportWithHandle(dirHandle)
+}
+
+async function startImportWithHandle(dirHandle: FileSystemDirectoryHandle) {
   step.value = 'checking'
 
   const files: File[] = []
@@ -184,11 +189,11 @@ function close() {
   step.value = 'idle'
 }
 
-defineExpose({ startImport })
+defineExpose({ startImport, startImportWithHandle })
 </script>
 
 <template>
-  <Button @click="startImport">{{ t('music.importMusic') }}</Button>
+  <Button v-if="props.showButton" @click="startImport">{{ t('music.importMusic') }}</Button>
 
   <BottomOverlay :show="step === 'picking'" :title="t('music.importSelectFolder')">
     <div class="flex flex-col gap-3 items-center text-white">

ChuChartManager/Front/src/views/MusicList.vue

@@ -2,7 +2,7 @@
 import { ref, onMounted, computed, watch, nextTick } from 'vue'
 import { Button, Select, TextInput, CheckBox, DropMenu, NumberInput, Modal, theme } from '@munet/ui'
 import type { SelectOption } from '@munet/ui'
-import { useStorage } from '@vueuse/core'
+import { useStorage, useDropZone } from '@vueuse/core'
 import { VList } from 'virtua/vue'
 import { getMusicList, getSources, getGenreMap, getJacketUrl, saveMusic, getExportMp3Url, ensureBackendUrl, importJacket, importChart, getExportChartUrl, getExportOptUrl, getExportCustomUrl, openExplorer, openXml, changeId, deleteMusic, setJacket, setAudio, replaceChart, isWebView, getBaseUrl } from '@/api'
 import type { MusicListItem } from '@/api'
@@ -15,6 +15,7 @@ import ImportMusicModal from '@/views/ImportMusicModal.vue'
 import PlayerBar from '@/components/PlayerBar.vue'
 import BottomOverlay from '@/components/BottomOverlay.vue'
 import FileTypeIcon from '@/components/FileTypeIcon.vue'
+import MusicIdConflictNotifier from '@/components/MusicIdConflictNotifier'
 import { BlobWriter, ZipReader } from '@zip.js/zip.js'
 import getSubDirFile from '@/utils/getSubDirFile'
 import { useI18n } from 'vue-i18n'
@@ -272,6 +273,13 @@ async function exportToFolder(url: string) {
   }
 }
 
+async function applyJacket(file: File) {
+  if (!selectedMusic.value) return
+  await setJacket(selectedMusic.value.id, selectedMusic.value.assetDir, file)
+  selectedMusic.value.hasJacket = true
+  setStatus(t('music.jacketImported'))
+}
+
 async function handleSetJacket() {
   if (!selectedMusic.value) return
   let fileHandle: FileSystemFileHandle
@@ -281,14 +289,22 @@ async function handleSetJacket() {
       types: [{ description: 'Image', accept: { 'image/*': ['.png', '.jpg', '.jpeg', '.bmp'] } }],
     })
   } catch { return }
-  const file = await fileHandle.getFile()
-  await setJacket(selectedMusic.value.id, selectedMusic.value.assetDir, file)
-  selectedMusic.value.hasJacket = true
-  setStatus(t('music.jacketImported'))
+  await applyJacket(await fileHandle.getFile())
 }
 
 const showAudioOverlay = ref(false)
 
+async function applyAudio(file: File) {
+  if (!selectedMusic.value) return
+  setStatus(t('music.audioImporting'))
+  try {
+    await setAudio(selectedMusic.value.id, selectedMusic.value.assetDir, file)
+    setStatus(t('music.audioReplaced'))
+  } catch (e: any) {
+    setStatus(t('music.audioReplaceFailed', { error: e?.response?.data || e?.message }))
+  }
+}
+
 async function handleReplaceAudio() {
   if (!selectedMusic.value) return
   showAudioOverlay.value = true
@@ -303,18 +319,26 @@ async function handleReplaceAudio() {
     return
   }
   showAudioOverlay.value = false
-  const file = await fileHandle.getFile()
-  setStatus(t('music.audioImporting'))
+  await applyAudio(await fileHandle.getFile())
+}
+
+const showChartOverlay = ref(false)
+
+async function applyChart(diffIndex: number, file: File) {
+  if (!selectedMusic.value) return
   try {
-    await setAudio(selectedMusic.value.id, selectedMusic.value.assetDir, file)
-    setStatus(t('music.audioReplaced'))
+    const res = await replaceChart(selectedMusic.value.id, selectedMusic.value.assetDir, diffIndex, file)
+    if (res.imported) {
+      const suffix = res.convertedFrom ? ` (${res.convertedFrom.toUpperCase()} → C2S)` : ''
+      setStatus(t('music.chartImported', { diff: diffNames[diffIndex], suffix }))
+      await loadMusic()
+      selectMusic(selectedMusic.value)
+    }
   } catch (e: any) {
-    setStatus(t('music.audioReplaceFailed', { error: e?.response?.data || e?.message }))
+    setStatus(t('music.chartReplaceFailed', { error: e?.response?.data?.error || e?.message }))
   }
 }
 
-const showChartOverlay = ref(false)
-
 async function handleReplaceChart(diffIndex: number) {
   if (!selectedMusic.value) return
   showChartOverlay.value = true
@@ -329,18 +353,7 @@ async function handleReplaceChart(diffIndex: number) {
     return
   }
   showChartOverlay.value = false
-  const file = await fileHandle.getFile()
-  try {
-    const res = await replaceChart(selectedMusic.value.id, selectedMusic.value.assetDir, diffIndex, file)
-    if (res.imported) {
-      const suffix = res.convertedFrom ? ` (${res.convertedFrom.toUpperCase()} → C2S)` : ''
-      setStatus(t('music.chartImported', { diff: diffNames[diffIndex], suffix }))
-      await loadMusic()
-      selectMusic(selectedMusic.value)
-    }
-  } catch (e: any) {
-    setStatus(t('music.chartReplaceFailed', { error: e?.response?.data?.error || e?.message }))
-  }
+  await applyChart(diffIndex, await fileHandle.getFile())
 }
 
 function handleExportChart(diffIndex: number, format: 'c2s' | 'ugc' | 'sus') {
@@ -429,6 +442,35 @@ async function handleChangeId() {
   }
 }
 
+const rootRef = ref<HTMLDivElement>()
+const importModalRef = ref<InstanceType<typeof ImportMusicModal> | null>(null)
+
+async function onDrop(_files: File[] | null, e: DragEvent) {
+  const items = e.dataTransfer?.items
+  if (!items?.length) return
+  const handles = (await Promise.all(Array.from(items).map(item => item.getAsFileSystemHandle())))
+    .filter(h => h != null)
+  if (!handles.length) return
+
+  if (handles[0].kind === 'directory') {
+    importModalRef.value?.startImportWithHandle(handles[0] as FileSystemDirectoryHandle)
+    return
+  }
+
+  if (handles.length !== 1 || isA000.value || !selectedMusic.value) return
+  const file = await (handles[0] as FileSystemFileHandle).getFile()
+  const name = file.name.toLowerCase()
+  if (/\.(png|jpe?g|bmp)$/.test(name)) await applyJacket(file)
+  else if (/\.(wav|mp3|ogg|awb)$/.test(name)) await applyAudio(file)
+  else if (/\.(c2s|ugc|sus)$/.test(name)) await applyChart(selectedDiff.value, file)
+}
+
+const { isOverDropZone } = useDropZone(rootRef, {
+  onDrop,
+  multiple: true,
+  preventDefaultForUnhandled: true,
+})
+
 const copyExportOptions = computed(() => {
   if (!selectedMusic.value) return []
   const m = selectedMusic.value
@@ -482,7 +524,13 @@ const copyExportOptions = computed(() => {
 </script>
 
 <template>
-  <div class="h-full flex">
+  <div ref="rootRef" class="h-full flex relative">
+    <div
+      v-if="isOverDropZone"
+      class="absolute inset-0 z-100 bg-white/50 backdrop-blur-sm flex items-center justify-center text-xl pointer-events-none"
+    >
+      {{ t('music.dropHint') }}
+    </div>
     <div class="w-40em max-w-[40vw] border-r border-white/10 flex flex-col relative">
       <Transition
         enter-active-class="panel-transition"
@@ -551,15 +599,18 @@ const copyExportOptions = computed(() => {
         <template v-else-if="isA000">
           <span class="text-sm op-50">{{ t('music.a000Hint') }}</span>
         </template>
-        <ImportMusicModal v-if="!isA000" @imported="refresh" />
+        <ImportMusicModal ref="importModalRef" :show-button="!isA000" @imported="refresh" />
       </div>
 
       <div v-if="selectedMusic" class="of-y-auto cst flex-1 min-h-0 p-6">
         <div class="flex gap-6 mb-6">
           <img v-if="selectedMusic.hasJacket" :src="getJacketUrl(selectedMusic.id, selectedMusic.assetDir)" class="w-48 h-48 rounded-lg object-cover shrink-0 cursor-pointer hover:op-80 transition-opacity" :title="t('music.clickToReplaceJacket')" @click="!isA000 && handleSetJacket()" />
           <div v-else class="w-48 h-48 rounded-lg bg-white/10 flex items-center justify-center op-30 text-2xl shrink-0 cursor-pointer hover:op-50 transition-opacity" @click="!isA000 && handleSetJacket()">?</div>
           <div class="flex-1 min-w-0">
-            <h2 class="text-xl font-bold mb-1">{{ selectedMusic.name }}</h2>
+            <h2 class="text-xl font-bold mb-1 flex items-center gap-2">
+              {{ selectedMusic.name }}
+              <MusicIdConflictNotifier :id="selectedMusic.id" :assetDir="selectedMusic.assetDir" />
+            </h2>
             <p class="op-60 mb-2">{{ selectedMusic.artist }}</p>
             <p class="text-sm op-40 mb-1">{{ genreMap[selectedMusic.genreId] || '' }}</p>
             <p class="text-sm op-40 mb-3">{{ releaseTagMap[selectedMusic.releaseTagId] || selectedMusic.releaseTagStr || '' }}</p>