fix song adding

src/components/SongList.vue

@@ -85,6 +85,7 @@ const batchUpdate_Option = ref<SongRequestOption>()
 
 const playingSong = ref<SongsInfo>()
 const isLrcLoading = ref<string>()
+const isLoading = ref(false)
 
 const formRef = ref<FormInst | null>(null)
 const updateSongRules: FormRules = {
@@ -104,27 +105,31 @@ const updateSongRules: FormRules = {
 const songSelectOption = [
   {
     label: '中文',
-    value: SongLanguage.Chinese,
+    value: '中文',
   },
   {
     label: '日语',
-    value: SongLanguage.Japanese,
+    value: '日语',
   },
   {
     label: '英语',
-    value: SongLanguage.English,
+    value: '英语',
+  },
+  {
+    label: '韩语',
+    value: '韩语',
   },
   {
     label: '法语',
-    value: SongLanguage.French,
+    value: '法语',
   },
   {
     label: '西语',
-    value: SongLanguage.Spanish,
+    value: '西语',
   },
   {
     label: '其他',
-    value: SongLanguage.Other,
+    value: '其他',
   },
 ]
 const languageSelectOption = computed(() => {
@@ -462,6 +467,11 @@ function renderCell(value: string | number) {
 }
 
 async function updateSong() {
+  if (props.songs.some((s) => s.name == updateSongModel.value.name)) {
+    message.error('已存在相同名称的歌曲')
+    return
+  }
+  isLoading.value = true
   await QueryPostAPI<SongsInfo>(SONG_API_URL + 'update', {
     key: updateSongModel.value.key,
     song: updateSongModel.value,
@@ -473,6 +483,8 @@ async function updateSong() {
     } else {
       message.error('未能更新歌曲信息: ' + data.message)
     }
+  }).finally(() => {
+    isLoading.value = false
   })
 }
 async function delSong(song: SongsInfo) {
@@ -489,6 +501,7 @@ async function delSong(song: SongsInfo) {
 }
 async function delBatchSong() {
   const ids = selectedColumn.value.map((s) => s.toString())
+  isLoading.value = true
   await QueryPostAPI<SongsInfo>(SONG_API_URL + 'del-batch', ids).then((data) => {
     if (data.code == 200) {
       songsInternal.value = songsInternal.value.filter((s) => !ids.includes(s.key))
@@ -498,6 +511,8 @@ async function delBatchSong() {
     } else {
       message.error('未能删除歌曲: ' + data.message)
     }
+  }).finally(() => {
+    isLoading.value = false
   })
 }
 function GetSCColor(price: number): string {
@@ -532,6 +547,7 @@ function batchUpdateAuthor() {
     message.error('请先选择歌曲')
     return
   }
+  isLoading.value = true
   QueryPostAPI<SongsInfo[]>(SONG_API_URL + 'update-batch-author', {
     ids: selectedColumn.value.map((s) => s.toString()),
     data: batchUpdate_Author.value,
@@ -551,6 +567,8 @@ function batchUpdateAuthor() {
     })
     .catch((err) => {
       message.error('未能更新歌曲: ' + err)
+    }).finally(() => {
+      isLoading.value = false
     })
 }
 function batchUpdateTag() {
@@ -558,6 +576,7 @@ function batchUpdateTag() {
     message.error('请先选择歌曲')
     return
   }
+  isLoading.value = true
   QueryPostAPI<SongsInfo[]>(SONG_API_URL + 'update-batch-tag', {
     ids: selectedColumn.value.map((s) => s.toString()),
     data: batchUpdate_Tag.value,
@@ -577,6 +596,8 @@ function batchUpdateTag() {
     })
     .catch((err) => {
       message.error('未能更新歌曲: ' + err)
+    }).finally(() => {
+      isLoading.value = false
     })
 }
 function batchUpdateLanguage() {
@@ -584,6 +605,7 @@ function batchUpdateLanguage() {
     message.error('请先选择歌曲')
     return
   }
+  isLoading.value = true
   QueryPostAPI<SongsInfo[]>(SONG_API_URL + 'update-batch-language', {
     ids: selectedColumn.value.map((s) => s.toString()),
     data: batchUpdate_Language.value,
@@ -603,6 +625,8 @@ function batchUpdateLanguage() {
     })
     .catch((err) => {
       message.error('未能更新歌曲: ' + err)
+    }).finally(() => {
+      isLoading.value = false
     })
 }
 function batchUpdateOption() {
@@ -610,6 +634,7 @@ function batchUpdateOption() {
     message.error('请先选择歌曲')
     return
   }
+  isLoading.value = true
   QueryPostAPI<SongsInfo[]>(SONG_API_URL + 'update-batch-option', {
     ids: selectedColumn.value.map((s) => s.toString()),
     data: batchUpdate_Option.value ? batchUpdate_Option.value : null,
@@ -629,6 +654,8 @@ function batchUpdateOption() {
     })
     .catch((err) => {
       message.error('未能更新歌曲: ' + err)
+    }).finally(() => {
+      isLoading.value = false
     })
 }
 
@@ -644,21 +671,10 @@ onMounted(() => {
   <NCard embedded size="small">
     <NSpace>
       <NInput placeholder="搜索歌曲" v-model:value="searchMusicKeyword" size="small" style="width: 150px" />
-      <NSelect
+      <NSelect placeholder="选择歌手" v-model:value="authorColumn.filterOptionValue" :options="authorsOptions" clearable
-        placeholder="选择歌手"
+        filterable size="small" style="width: 150px" />
-        v-model:value="authorColumn.filterOptionValue"
+      <NButton v-if="authorColumn.filterOptionValue" type="error" @click="authorColumn.filterOptionValue = null"
-        :options="authorsOptions"
+        size="small">
-        clearable
-        filterable
-        size="small"
-        style="width: 150px"
-      />
-      <NButton
-        v-if="authorColumn.filterOptionValue"
-        type="error"
-        @click="authorColumn.filterOptionValue = null"
-        size="small"
-      >
         清除歌手选择
       </NButton>
     </NSpace>
@@ -674,19 +690,14 @@ onMounted(() => {
     批量编辑
   </NButton>
   <NDivider style="margin: 5px 0 5px 0" />
-  <NDataTable
+  <NDataTable v-model:checked-row-keys="selectedColumn" size="small" :columns="columns" :data="songsComputed"
-    v-model:checked-row-keys="selectedColumn"
-    size="small"
-    :columns="columns"
-    :data="songsComputed"
     :pagination="{
       itemCount: songsInternal.length,
       defaultPageSize: 25,
       pageSizes: [25, 50, 200],
       size: 'small',
       showSizePicker: true,
-    }"
+    }" />
-  />
   <NModal v-model:show="showModal" style="max-width: 600px" preset="card">
     <template #header> 修改信息 </template>
     <NForm ref="formRef" :rules="updateSongRules" :model="updateSongModel" :render-cell="renderCell">
@@ -694,47 +705,20 @@ onMounted(() => {
         <NInput v-model:value="updateSongModel.name" autosize style="min-width: 200px" placeholder="就是歌曲名称" />
       </NFormItem>
       <NFormItem path="author" label="作者">
-        <NSelect
+        <NSelect v-model:value="updateSongModel.author" filterable multiple tag placeholder="输入，按回车确认"
-          v-model:value="updateSongModel.author"
+          :options="authorsOptions" />
-          filterable
-          multiple
-          tag
-          placeholder="输入，按回车确认"
-          :options="authorsOptions"
-        />
       </NFormItem>
       <NFormItem path="description" label="备注">
-        <NInput
+        <NInput v-model:value="updateSongModel.description" placeholder="可选" :maxlength="250" show-count autosize
-          v-model:value="updateSongModel.description"
+          style="min-width: 300px" clearable />
-          placeholder="可选"
-          :maxlength="250"
-          show-count
-          autosize
-          style="min-width: 300px"
-          clearable
-        />
       </NFormItem>
       <NFormItem path="language" label="语言">
-        <NSelect
+        <NSelect v-model:value="updateSongModel.language" filterable multiple clearable tag placeholder="可选，输入后按回车新增"
-          v-model:value="updateSongModel.language"
+          :options="languageSelectOption" />
-          filterable
-          multiple
-          clearable
-          tag
-          placeholder="可选，输入后按回车新增"
-          :options="languageSelectOption"
-        />
       </NFormItem>
       <NFormItem path="tags" label="标签">
-        <NSelect
+        <NSelect v-model:value="updateSongModel.tags" filterable multiple clearable tag placeholder="可选，按回车确认"
-          v-model:value="updateSongModel.tags"
+          :options="tagsSelectOption" />
-          filterable
-          multiple
-          clearable
-          tag
-          placeholder="可选，按回车确认"
-          :options="tagsSelectOption"
-        />
       </NFormItem>
       <NFormItem path="options">
         <template #label>
@@ -747,10 +731,7 @@ onMounted(() => {
           </NTooltip>
         </template>
         <NSpace vertical>
-          <NCheckbox
+          <NCheckbox :checked="updateSongModel.options != undefined" @update:checked="(checked: boolean) => {
-            :checked="updateSongModel.options != undefined"
-            @update:checked="
-              (checked: boolean) => {
               updateSongModel.options = checked
                 ? ({
                   needJianzhang: false,
@@ -759,8 +740,7 @@ onMounted(() => {
                 } as SongRequestOption)
                 : undefined
             }
-            "
+            ">
-          >
             是否启用
           </NCheckbox>
           <template v-if="updateSongModel.options != undefined">
@@ -770,14 +750,10 @@ onMounted(() => {
               <NCheckbox v-model:checked="updateSongModel.options.needZongdu"> 需要总督 </NCheckbox>
             </NSpace>
             <NSpace align="center">
-              <NCheckbox
+              <NCheckbox :checked="updateSongModel.options.scMinPrice != undefined" @update:checked="(checked: boolean) => {
-                :checked="updateSongModel.options.scMinPrice != undefined"
-                @update:checked="
-                  (checked: boolean) => {
                   if (updateSongModel.options) updateSongModel.options.scMinPrice = checked ? 30 : undefined
                 }
-                "
+                ">
-              >
                 需要SC
               </NCheckbox>
               <NInputGroup v-if="updateSongModel.options?.scMinPrice" style="width: 200px">
@@ -786,14 +762,10 @@ onMounted(() => {
               </NInputGroup>
             </NSpace>
             <NSpace align="center">
-              <NCheckbox
+              <NCheckbox :checked="updateSongModel.options.fanMedalMinLevel != undefined" @update:checked="(checked: boolean) => {
-                :checked="updateSongModel.options.fanMedalMinLevel != undefined"
-                @update:checked="
-                  (checked: boolean) => {
                   if (updateSongModel.options) updateSongModel.options.fanMedalMinLevel = checked ? 5 : undefined
                 }
-                "
+                ">
-              >
                 需要粉丝牌
                 <NTooltip>
                   <template #trigger>
@@ -811,22 +783,15 @@ onMounted(() => {
         </NSpace>
       </NFormItem>
       <NFormItem path="url" label="链接">
-        <NInput
+        <NInput v-model:value="updateSongModel.url" placeholder="可选, 后缀为mp3、wav、ogg时将会尝试播放, 否则会在新页面打开"
-          v-model:value="updateSongModel.url"
+          :disabled="updateSongModel.from != SongFrom.Custom" />
-          placeholder="可选, 后缀为mp3、wav、ogg时将会尝试播放, 否则会在新页面打开"
-          :disabled="updateSongModel.from != SongFrom.Custom"
-        />
       </NFormItem>
     </NForm>
     <NDivider style="margin: 10px" />
-    <NButton @click="updateSong" type="success"> 更新 </NButton>
+    <NButton @click="updateSong" type="success" :loading="isLoading"> 更新 </NButton>
   </NModal>
-  <NModal
+  <NModal v-model:show="showBatchModal" preset="card" :title="`批量编辑 | 已选择: ${selectedColumn.length}`"
-    v-model:show="showBatchModal"
+    style="max-width: 600px">
-    preset="card"
-    :title="`批量编辑 | 已选择: ${selectedColumn.length}`"
-    style="max-width: 600px"
-  >
     <NTabs>
       <NTabPane name="delete" tab="删除">
         <NPopconfirm @positive-click="delBatchSong">
@@ -837,49 +802,26 @@ onMounted(() => {
         </NPopconfirm>
       </NTabPane>
       <NTabPane name="author" tab="作者">
-        <NSelect
+        <NSelect v-model:value="batchUpdate_Author" filterable multiple tag placeholder="输入后按回车新增"
-          v-model:value="batchUpdate_Author"
+          :options="authorsOptions" />
-          filterable
-          multiple
-          tag
-          placeholder="输入后按回车新增"
-          :options="authorsOptions"
-        />
         <NDivider />
-        <NButton @click="batchUpdateAuthor" type="success"> 更新 </NButton>
+        <NButton @click="batchUpdateAuthor" type="success" :loading="isLoading"> 更新 </NButton>
       </NTabPane>
       <NTabPane name="tag" tab="标签">
-        <NSelect
+        <NSelect v-model:value="batchUpdate_Tag" filterable multiple clearable tag placeholder="可选，按回车确认"
-          v-model:value="batchUpdate_Tag"
+          :options="tagsSelectOption" />
-          filterable
-          multiple
-          clearable
-          tag
-          placeholder="可选，按回车确认"
-          :options="tagsSelectOption"
-        />
         <NDivider />
-        <NButton @click="batchUpdateTag" type="success"> 更新 </NButton>
+        <NButton @click="batchUpdateTag" type="success" :loading="isLoading"> 更新 </NButton>
       </NTabPane>
       <NTabPane name="language" tab="语言">
-        <NSelect
+        <NSelect v-model:value="batchUpdate_Language" filterable multiple clearable tag placeholder="可选，输入后按回车新增"
-          v-model:value="batchUpdate_Language"
+          :options="languageSelectOption" />
-          filterable
-          multiple
-          clearable
-          tag
-          placeholder="可选，输入后按回车新增"
-          :options="languageSelectOption"
-        />
         <NDivider />
-        <NButton @click="batchUpdateLanguage" type="success"> 更新 </NButton>
+        <NButton @click="batchUpdateLanguage" type="success" :loading="isLoading"> 更新 </NButton>
       </NTabPane>
       <NTabPane name="option" tab="点歌选项">
         <NSpace vertical>
-          <NCheckbox
+          <NCheckbox :checked="batchUpdate_Option != undefined" @update:checked="(checked: boolean) => {
-            :checked="batchUpdate_Option != undefined"
-            @update:checked="
-              (checked: boolean) => {
               batchUpdate_Option = checked
                 ? ({
                   needJianzhang: false,
@@ -888,8 +830,7 @@ onMounted(() => {
                 } as SongRequestOption)
                 : undefined
             }
-            "
+            ">
-          >
             是否启用
           </NCheckbox>
           <template v-if="batchUpdate_Option != undefined">
@@ -899,14 +840,10 @@ onMounted(() => {
               <NCheckbox v-model:checked="batchUpdate_Option.needZongdu"> 需要总督 </NCheckbox>
             </NSpace>
             <NSpace align="center">
-              <NCheckbox
+              <NCheckbox :checked="batchUpdate_Option.scMinPrice != undefined" @update:checked="(checked: boolean) => {
-                :checked="batchUpdate_Option.scMinPrice != undefined"
-                @update:checked="
-                  (checked: boolean) => {
                   if (batchUpdate_Option) batchUpdate_Option.scMinPrice = checked ? 30 : undefined
                 }
-                "
+                ">
-              >
                 需要SC
               </NCheckbox>
               <NInputGroup v-if="batchUpdate_Option?.scMinPrice" style="width: 200px">
@@ -915,14 +852,10 @@ onMounted(() => {
               </NInputGroup>
             </NSpace>
             <NSpace align="center">
-              <NCheckbox
+              <NCheckbox :checked="batchUpdate_Option.fanMedalMinLevel != undefined" @update:checked="(checked: boolean) => {
-                :checked="batchUpdate_Option.fanMedalMinLevel != undefined"
-                @update:checked="
-                  (checked: boolean) => {
                   if (batchUpdate_Option) batchUpdate_Option.fanMedalMinLevel = checked ? 5 : undefined
                 }
-                "
+                ">
-              >
                 需要粉丝牌
                 <NTooltip>
                   <template #trigger>
@@ -939,7 +872,7 @@ onMounted(() => {
           </template>
         </NSpace>
         <NDivider />
-        <NButton @click="batchUpdateOption" type="success"> 更新 </NButton>
+        <NButton @click="batchUpdateOption" type="success" :loading="isLoading"> 更新 </NButton>
       </NTabPane>
     </NTabs>
   </NModal>
@@ -949,6 +882,7 @@ onMounted(() => {
 .netease path:nth-child(2) {
   fill: #c20c0c;
 }
+
 .fivesing:first-child {
   fill: #00bbb3;
 }

src/views/manage/SongListManageView.vue

@@ -177,6 +177,10 @@ const uploadSongsOptions = computed(() => {
 const selecteduploadSongs = ref<string[]>([])
 
 async function addCustomSong() {
+  if (songs.value.findIndex((s) => s.name == addSongModel.value.name) > -1) {
+    message.error('已存在相同名称的歌曲')
+    return
+  }
   isModalLoading.value = true
   formRef.value
     ?.validate()
@@ -614,6 +618,7 @@ onMounted(async () => {
                   autosize
                   style="min-width: 200px"
                   placeholder="就是歌曲名称"
+                  :status="songs.findIndex((s) => s.name == addSongModel.name) > -1 ? 'error' : 'success'"
                 />
               </NFormItem>
               <NFormItem path="author" label="作者">