fix: 导入确认框

Author: clansty

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

@@ -1,5 +1,5 @@
 import { computed, defineComponent, effect, PropType, watch } from "vue";
-import { Button, Modal, NumberInput } from "@munet/ui";
+import { Button, Modal, NumberInput, Section } from "@munet/ui";
 import { ImportChartMessage, MessageLevel, ShiftMethod } from "@/client/apiGen";
 import { ImportChartMessageEx, ImportMeta, SavedOptions, TempOptions } from "./types";
 import noJacket from '@/assets/noJacket.webp';
@@ -62,12 +62,9 @@ export default defineComponent({
               <div class="ml-1 text-sm">{t('music.edit.version')}</div>
               <VersionInput v-model:value={props.savedOptions.version}/>
             </div>
-            <details>
-                <summary class="cursor-pointer">{t('chart.import.option.advancedOptions')}</summary>
-                <div class="flex flex-col gap-2 mt-2">
-                    <ShiftModeSelector tempOptions={props.tempOptions}></ShiftModeSelector>
-                </div>
-            </details>
+            <Section title={t('chart.import.option.advancedOptions')}>
+                <ShiftModeSelector tempOptions={props.tempOptions}></ShiftModeSelector>
+            </Section>
         </>}
       </div>,
         actions: () => <>
@@ -91,7 +88,7 @@ const MusicIdInput = defineComponent({
     });
     const img = computed(() => props.meta.bg ? URL.createObjectURL(props.meta.bg) : noJacket);
 
-    return () => <div class="flex gap-3 items-center">
+    return () => <div class="flex gap-3 items-center px of-hidden">
       <img src={img.value} class="h-16 w-16 object-fill shrink-0"/>
       <div class="w-0 grow">{props.meta.name}</div>
       <MusicIdConflictNotifier id={props.meta.id}/>

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

@@ -1,4 +1,4 @@
-import { defineComponent, PropType } from "vue";
+import { computed, defineComponent, PropType } from "vue";
 import { Popover, Radio } from "@munet/ui";
 import { ShiftMethod } from "@/client/apiGen";
 import { TempOptions } from "./types";
@@ -11,29 +11,34 @@ export default defineComponent({
   setup(props) {
     const {t} = useI18n();
 
+    const value = computed({
+      get: () => props.tempOptions.shift,
+      set: (v: ShiftMethod) => { if (!props.tempOptions.shiftLocked) props.tempOptions.shift = v }
+    })
+
     return () => <div>
       <div class="ml-1 text-sm">{t('chart.import.option.shiftMode')}</div>
       <div class="flex flex-col gap-2 w-full">
         <div class="flex gap-2 h-34px items-center">
           <Popover trigger="hover">
             {{
-              trigger: () => <Radio value={ShiftMethod.Bar} checked={props.tempOptions.shift === ShiftMethod.Bar} onUpdate:checked={() => { if (!props.tempOptions.shiftLocked) props.tempOptions.shift = ShiftMethod.Bar }}>{t('chart.import.option.shiftByBar')}</Radio>,
+              trigger: () => <Radio k={ShiftMethod.Bar} v-model:value={value.value}>{t('chart.import.option.shiftByBar')}</Radio>,
               default: () => <div>
                 {props.tempOptions.shiftLocked ? t('chart.import.option.shiftModeLocked') : t('chart.import.option.shiftByBarDesc')}
               </div>
             }}
           </Popover>
           <Popover trigger="hover">
             {{
-              trigger: () => <Radio value={ShiftMethod.Legacy} checked={props.tempOptions.shift === ShiftMethod.Legacy} onUpdate:checked={() => { if (!props.tempOptions.shiftLocked) props.tempOptions.shift = ShiftMethod.Legacy }}>{t('chart.import.option.shiftLegacy')}</Radio>,
+              trigger: () => <Radio k={ShiftMethod.Legacy} v-model:value={value.value}>{t('chart.import.option.shiftLegacy')}</Radio>,
               default: () => <div>
                 {props.tempOptions.shiftLocked ? t('chart.import.option.shiftModeLocked') : t('chart.import.option.shiftLegacyDesc')}
               </div>
             }}
           </Popover>
           <Popover trigger="hover">
             {{
-              trigger: () => <Radio value={ShiftMethod.NoShift} checked={props.tempOptions.shift === ShiftMethod.NoShift} onUpdate:checked={() => { if (!props.tempOptions.shiftLocked) props.tempOptions.shift = ShiftMethod.NoShift }}>{t('chart.import.option.shiftNoMove')}</Radio>,
+              trigger: () => <Radio k={ShiftMethod.NoShift} v-model:value={value.value}>{t('chart.import.option.shiftNoMove')}</Radio>,
               default: () => <div>
                 {props.tempOptions.shiftLocked ? t('chart.import.option.shiftModeLocked') : t('chart.import.option.shiftNoMoveDesc')}
               </div>