拖放替换谱面

Author: clansty

AquaMai

@@ -93,4 +93,17 @@ public void EditChartEnable(int id, int level, [FromBody] bool value, string ass
             }
         }
     }
+
+    [HttpPost]
+    public void ReplaceChart(int id, int level, IFormFile file, string assetDir)
+    {
+        var music = settings.GetMusic(id, assetDir);
+        if (music == null || file == null) return;
+        var targetChart = music.Charts[level];
+        targetChart.Path = $"{id:000000}_0{level}.ma2";
+        using var stream = System.IO.File.Open(Path.Combine(StaticSettings.StreamingAssets, assetDir, "music", $"music{id:000000}", targetChart.Path), FileMode.Create);
+        file.CopyTo(stream);
+        targetChart.Problems.Clear();
+        stream.Close();
+    }
 }

MaiChartManager/Controllers/Charts/ChartController.cs

@@ -943,6 +943,31 @@ export class Api<SecurityDataType extends unknown> extends HttpClient<SecurityDa
         ...params,
       }),
 
+    /**
+     * No description
+     *
+     * @tags Chart
+     * @name ReplaceChart
+     * @request POST:/MaiChartManagerServlet/ReplaceChartApi/{assetDir}/{id}/{level}
+     */
+    ReplaceChart: (
+      id: number,
+      level: number,
+      assetDir: string,
+      data: {
+        /** @format binary */
+        file?: File;
+      },
+      params: RequestParams = {},
+    ) =>
+      this.request<void, any>({
+        path: `/MaiChartManagerServlet/ReplaceChartApi/${assetDir}/${id}/${level}`,
+        method: "POST",
+        body: data,
+        type: ContentType.FormData,
+        ...params,
+      }),
+
     /**
      * No description
      *

MaiChartManager/Front/src/client/apiGen.ts

@@ -0,0 +1,61 @@
+import { t } from '@/locales';
+import { globalCapture, selectedADir, selectedLevel, selectedMusic, selectMusicId, updateMusicList } from '@/store/refs';
+import { NButton, NFlex, NModal, useMessage } from 'naive-ui';
+import { defineComponent, PropType, ref, computed, watch, shallowRef } from 'vue';
+import JacketBox from '../JacketBox';
+import { DIFFICULTY, LEVEL_COLOR } from '@/consts';
+import api from '@/client/api';
+
+export const replaceChartFileHandle = shallowRef<FileSystemFileHandle | null>(null);
+
+export default defineComponent({
+  // props: {
+  // },
+  setup(props, { emit }) {
+    const message = useMessage();
+
+    const replaceChart = async () => {
+      if (!replaceChartFileHandle.value) return;
+      try {
+        const file = await replaceChartFileHandle.value.getFile();
+        replaceChartFileHandle.value = null;
+        await api.ReplaceChart(selectMusicId.value, selectedLevel.value, selectedADir.value, { file });
+        message.success(t('music.edit.replaceChartSuccess'));
+        await updateMusicList();
+      } catch (error) {
+        globalCapture(error, t('music.edit.replaceChartFailed'));
+        console.error(error);
+      }
+    }
+
+    return () => <NModal
+      preset="card"
+      class="w-[min(90vw,50em)]"
+      title={t('music.edit.replaceChart')}
+      show={replaceChartFileHandle.value !== null}
+      onUpdateShow={() => replaceChartFileHandle.value = null}
+    >{{
+      default: () => <div class="flex flex-col gap-2">
+        {t('music.edit.replaceChartConfirm', { level: DIFFICULTY[selectedLevel.value!] })}
+        <div class="text-4.5 text-center">{replaceChartFileHandle.value?.name}</div>
+        <div class="text-6 text-center">↓</div>
+        <div class="flex justify-center gap-2">
+          <JacketBox info={selectedMusic.value!} class="h-8em w-8em" upload={false} />
+          <div class="flex flex-col gap-1 max-w-24em justify-end">
+            <div class="text-3.5 op-70">#{selectMusicId.value}</div>
+            <div class="text-2xl overflow-hidden text-ellipsis whitespace-nowrap">{selectedMusic.value!.name}</div>
+            <div class="flex">
+              <div class="c-white rounded-full px-2" style={{ backgroundColor: LEVEL_COLOR[selectedLevel.value!] }}>
+                {selectedMusic.value!.charts![selectedLevel.value!]?.level}.{selectedMusic.value!.charts![selectedLevel.value!]?.levelDecimal}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>,
+      footer: () => <NFlex justify="end">
+        <NButton onClick={() => replaceChartFileHandle.value = null}>{t('common.cancel')}</NButton>
+        <NButton onClick={replaceChart} type="primary">{t('common.confirm')}</NButton>
+      </NFlex>
+    }}</NModal>;
+  },
+});

MaiChartManager/Front/src/components/DragDropDispatcher/ReplaceChartModal.tsx

@@ -5,6 +5,7 @@ import { uploadFlow as uploadFlowMovie } from '@/components/MusicEdit/SetMovieBu
 import { uploadFlow as uploadFlowAcbAwb } from '@/components/MusicEdit/AcbAwb';
 import { selectedADir, selectedMusic } from '@/store/refs';
 import { upload as uploadJacket } from '@/components/JacketBox';
+import ReplaceChartModal, { replaceChartFileHandle } from './ReplaceChartModal';
 
 export const mainDivRef = shallowRef<HTMLDivElement>();
 
@@ -43,6 +44,9 @@ export default defineComponent({
         else if (file.kind === 'file' && (firstType.startsWith('image/') || file.name.endsWith('.jpeg') || file.name.endsWith('.jpg') || file.name.endsWith('.png'))) {
           uploadJacket(file);
         }
+        else if (file.kind === 'file' && file.name.endsWith('.ma2')) {
+          replaceChartFileHandle.value = file;
+        }
       }
     }
     const dropType = ref<DropType>(DropType.None);
@@ -92,6 +96,7 @@ export default defineComponent({
           松开鼠标导入谱面
         </div>} */}
       </div>}
+      <ReplaceChartModal />
     </>;
   },
 });

MaiChartManager/Front/src/components/DragDropDispatcher/index.tsx

@@ -64,6 +64,6 @@ export default defineComponent({
         }
       }
 
-    return () => <img src={jacketUrl.value} class={`object-fill rounded-lg ${props.upload && 'cursor-pointer'}`} onClick={() => upload()} />
+    return () => <img src={jacketUrl.value} class={`object-fill rounded-lg ${props.upload && 'cursor-pointer'}`} onClick={props.upload ? () => upload() : undefined} />
   }
 })

MaiChartManager/Front/src/components/JacketBox.tsx

@@ -1,6 +1,6 @@
 import { computed, defineComponent, onMounted, PropType, ref, watch } from "vue";
 import { Chart, GenreXml, MusicXmlWithABJacket } from "@/client/apiGen";
-import { addVersionList, genreList, globalCapture, selectedADir, selectedMusic as info, selectMusicId, updateAddVersionList, updateGenreList, updateMusicList } from "@/store/refs";
+import { addVersionList, genreList, globalCapture, selectedADir, selectedMusic as info, selectMusicId, updateAddVersionList, updateGenreList, updateMusicList, selectedLevel } from "@/store/refs";
 import api from "@/client/api";
 import { NButton, NFlex, NForm, NFormItem, NInput, NInputNumber, NSelect, NSwitch, NTabPane, NTabs, SelectOption, useDialog, useMessage } from "naive-ui";
 import JacketBox from "../JacketBox";
@@ -19,7 +19,6 @@ import { t } from "@/locales";
 
 const Component = defineComponent({
   setup() {
-    const selectedLevel = ref(0);
     const message = useMessage();
 
     const firstEnabledChart = info.value?.charts?.findIndex(chart => chart.enable);

MaiChartManager/Front/src/components/MusicEdit/index.tsx

@@ -122,6 +122,10 @@ music:
       里面。这个值还会控制按上线时间排序时的顺序
     idConflictWarning: 以下目录中存在冲突的 ID
     confirmSetMovie: 确认要使用 {filename} 替换当前的 PV 吗
+    replaceChart: 替换谱面
+    replaceChartConfirm: 确认要替换 {level} 谱面吗？
+    replaceChartFailed: 替换谱面失败
+    replaceChartSuccess: 替换谱面成功
   batch:
     title: 批量操作
     batchAndSearch: 批量操作与搜索

MaiChartManager/Front/src/locales/zh.yaml

@@ -53,6 +53,7 @@ export const modInfo = ref<GameModInfo>();
 
 export const musicList = computed(() => musicListAll.value.filter(m => m.assetDir === selectedADir.value));
 export const selectedMusic = computed(() => musicList.value.find(m => m.id === selectMusicId.value));
+export const selectedLevel = ref(0);
 
 export const aquaMaiConfig = ref<ConfigDto>()
 export const modUpdateInfo = ref<Awaited<ReturnType<typeof aquaMaiVersionConfig.getGetConfig>>['data']>([{