マルチトラック：インポートに対応

src/components/Dialog/ImportSongProjectDialog.vue

@@ -6,7 +6,7 @@
           <QToolbarTitle class="text-display">インポート</QToolbarTitle>
         </QToolbar>
       </QHeader>
-      <QPageContainer class="q-px-lg">
+      <QPageContainer class="q-px-lg page">
         <details class="q-pt-md">
           <summary>対応しているプロジェクトファイル</summary>
           <ul>
@@ -25,18 +25,33 @@
           :accept="acceptExtensions"
           :errorMessage="projectFileErrorMessage"
           :error="!!projectFileErrorMessage"
-          placeholder="外部プロジェクトファイルを選択してください"
+          placeholder="ファイルを選択してください"
           @input="handleFileChange"
         />
-        <QSelect
-          v-if="project"
-          v-model="selectedTrack"
-          :options="trackOptions"
-          :disable="projectFileErrorMessage != undefined"
-          emitValue
-          mapOptions
-          label="インポートするトラック"
-        />
+
+        <QList
+          v-if="trackOptions.length > 0"
+          bordered
+          class="rounded-borders q-mb-md"
+        >
+          <QItem
+            v-for="track in trackOptions"
+            :key="track.value"
+            v-ripple
+            :disable="track.disable"
+            clickable
+            :class="{
+              'active-menu':
+                selectedTrackIndexes &&
+                selectedTrackIndexes.includes(track.value),
+            }"
+            @click="toggleTrackSelection(track.value)"
+          >
+            <QItemSection>
+              {{ track.label }}
+            </QItemSection>
+          </QItem>
+        </QList>
       </QPageContainer>
       <QFooter>
         <QToolbar>
@@ -58,7 +73,9 @@
             textColor="toolbar-button-display"
             class="text-no-wrap text-bold q-mr-sm"
             :disabled="
-              selectedTrack == null || projectFileErrorMessage != undefined
+              selectedTrackIndexes == null ||
+              selectedTrackIndexes.length === 0 ||
+              projectFileErrorMessage != undefined
             "
             @click="handleImportTrack"
           />
@@ -212,13 +229,27 @@ const trackOptions = computed(() => {
   }));
 });
 // 選択中のトラック
-const selectedTrack = ref<number | null>(null);
+const selectedTrackIndexes = ref<number[] | null>(null);
+
+// トラック選択切り替え
+const toggleTrackSelection = (index: number) => {
+  if (selectedTrackIndexes.value == null) {
+    selectedTrackIndexes.value = [index];
+  } else {
+    const selectedIndex = selectedTrackIndexes.value.indexOf(index);
+    if (selectedIndex === -1) {
+      selectedTrackIndexes.value.push(index);
+    } else {
+      selectedTrackIndexes.value.splice(selectedIndex, 1);
+    }
+  }
+};
 
 // データ初期化
 const initializeValues = () => {
   projectFile.value = null;
   project.value = null;
-  selectedTrack.value = null;
+  selectedTrackIndexes.value = null;
 };
 
 // ファイル変更時
@@ -236,7 +267,7 @@ const handleFileChange = async (event: Event) => {
 
   // 既存のデータおよび選択中のトラックをクリア
   project.value = null;
-  selectedTrack.value = null;
+  selectedTrackIndexes.value = null;
   error.value = null;
 
   const file = input.files[0];
@@ -259,12 +290,14 @@ const handleFileChange = async (event: Event) => {
         }),
       };
     }
-    selectedTrack.value = getProjectTracks(project.value).findIndex(
+    const firstSelectableTrack = getProjectTracks(project.value).findIndex(
       (track) => !track.disable,
     );
-    if (selectedTrack.value === -1) {
-      selectedTrack.value = 0;
+    if (firstSelectableTrack === -1) {
+      error.value = "emptyProject";
+      return;
     }
+    selectedTrackIndexes.value = [firstSelectableTrack];
   } catch (e) {
     log.error(e);
     error.value = "unknown";
@@ -281,19 +314,19 @@ const handleFileChange = async (event: Event) => {
 // トラックインポート実行時
 const handleImportTrack = () => {
   // ファイルまたは選択中のトラックが未設定の場合はエラー
-  if (project.value == null || selectedTrack.value == null) {
+  if (project.value == null || selectedTrackIndexes.value == null) {
     throw new Error("project or selected track is not set");
   }
   // トラックをインポート
   if (project.value.type === "vvproj") {
     store.dispatch("IMPORT_VOICEVOX_PROJECT", {
       project: project.value.project,
-      trackIndex: selectedTrack.value,
+      trackIndexes: selectedTrackIndexes.value,
     });
   } else {
     store.dispatch("IMPORT_UTAFORMATIX_PROJECT", {
       project: project.value.project,
-      trackIndex: selectedTrack.value,
+      trackIndexes: selectedTrackIndexes.value,
     });
   }
   onDialogOK();
@@ -304,3 +337,10 @@ const handleCancel = () => {
   onDialogCancel();
 };
 </script>
+
+<style scoped lang="scss">
+.page {
+  display: flex;
+  flex-direction: column;
+}
+</style>