mirror of
https://github.com/Megghy/vtsuru.live.git
synced 2025-12-06 18:36:55 +08:00
add batch update songs
This commit is contained in:
@@ -1,5 +1,3 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
export const presets = [
|
||||
'@vue/cli-plugin-babel/preset',
|
||||
],
|
||||
};
|
||||
];
|
||||
|
||||
38
package.json
38
package.json
@@ -9,7 +9,7 @@
|
||||
"lint": "vite lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@types/node": "^20.2.5",
|
||||
"@types/node": "^20.10.5",
|
||||
"@vicons/fluent": "^0.12.0",
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
"@vueuse/core": "^10.1.2",
|
||||
@@ -27,15 +27,15 @@
|
||||
"mitt": "^3.0.1",
|
||||
"qrcode.vue": "^3.4.1",
|
||||
"queue-typescript": "^1.0.1",
|
||||
"universal-cookie": "^4.0.4",
|
||||
"vite": "^4.3.9",
|
||||
"vite-svg-loader": "^4.0.0",
|
||||
"vue": "^3.2.13",
|
||||
"vue-echarts": "^6.6.1",
|
||||
"universal-cookie": "^6.1.1",
|
||||
"vite": "^5.0.10",
|
||||
"vite-svg-loader": "^5.1.0",
|
||||
"vue": "^3.3.12",
|
||||
"vue-echarts": "^6.6.5",
|
||||
"vue-meta": "^3.0.0-alpha.10",
|
||||
"vue-request": "^2.0.3",
|
||||
"vue-router": "4",
|
||||
"vue-turnstile": "^1.0.0",
|
||||
"vue-turnstile": "^1.0.6",
|
||||
"vue3-aplayer": "^1.7.3",
|
||||
"vue3-marquee": "^4.1.0",
|
||||
"vueuc": "^0.4.51",
|
||||
@@ -44,22 +44,24 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/eslint-parser": "^7.21.3",
|
||||
"@typescript-eslint/eslint-plugin": "^5.4.0",
|
||||
"@typescript-eslint/parser": "^5.4.0",
|
||||
"@typescript-eslint/eslint-plugin": "^6.14.0",
|
||||
"@typescript-eslint/parser": "^6.14.0",
|
||||
"@vicons/ionicons5": "^0.12.0",
|
||||
"@vue/eslint-config-airbnb": "^6.0.0",
|
||||
"@vue/eslint-config-typescript": "^9.1.0",
|
||||
"@vitejs/plugin-vue-jsx": "^3.1.0",
|
||||
"@vue/cli-plugin-babel": "^5.0.8",
|
||||
"@vue/eslint-config-airbnb": "^7.0.1",
|
||||
"@vue/eslint-config-typescript": "^12.0.0",
|
||||
"eslint": "^8.39.0",
|
||||
"eslint-config-prettier": "^8.8.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-import": "^2.25.3",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"eslint-plugin-prettier": "^5.0.1",
|
||||
"eslint-plugin-vue": "^9.11.0",
|
||||
"eslint-plugin-vuejs-accessibility": "^1.1.0",
|
||||
"lint-staged": "^11.1.2",
|
||||
"eslint-plugin-vuejs-accessibility": "^2.2.0",
|
||||
"lint-staged": "^15.2.0",
|
||||
"naive-ui": "^2.34.3",
|
||||
"prettier": "^2.8.8",
|
||||
"stylus": "^0.55.0",
|
||||
"typescript": "~4.5.5",
|
||||
"prettier": "^3.1.1",
|
||||
"stylus": "^0.62.0",
|
||||
"typescript": "~5.3.3",
|
||||
"vite-plugin-mkcert": "^1.16.0"
|
||||
}
|
||||
}
|
||||
|
||||
17
src/components/DynamicForm.vue
Normal file
17
src/components/DynamicForm.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import { FormRules, NForm } from 'naive-ui';
|
||||
|
||||
defineProps<{
|
||||
rules: FormRules
|
||||
}>()
|
||||
|
||||
function getItems() {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NForm>
|
||||
|
||||
</NForm>
|
||||
</template>
|
||||
@@ -7,6 +7,7 @@ import { List } from 'linqts'
|
||||
import {
|
||||
DataTableBaseColumn,
|
||||
DataTableColumns,
|
||||
DataTableRowKey,
|
||||
FormInst,
|
||||
FormRules,
|
||||
NAvatar,
|
||||
@@ -30,6 +31,8 @@ import {
|
||||
NPopconfirm,
|
||||
NSelect,
|
||||
NSpace,
|
||||
NTabPane,
|
||||
NTabs,
|
||||
NTag,
|
||||
NText,
|
||||
NTooltip,
|
||||
@@ -55,7 +58,7 @@ watch(
|
||||
setTimeout(() => {
|
||||
columns.value = createColumns()
|
||||
}, 1)
|
||||
}
|
||||
},
|
||||
)
|
||||
const volume = useLocalStorage('Settings.AplayerVolume', 0.8)
|
||||
const songsInternal = ref(props.songs)
|
||||
@@ -69,10 +72,16 @@ const songsComputed = computed(() => {
|
||||
const message = useMessage()
|
||||
|
||||
const showModal = ref(false)
|
||||
const showBatchModal = ref(false)
|
||||
const updateSongModel = ref<SongsInfo>({} as SongsInfo)
|
||||
const searchMusicKeyword = ref()
|
||||
const debouncedInput = refDebounced(searchMusicKeyword, 500)
|
||||
|
||||
const batchUpdate_Author = ref<string[]>([])
|
||||
const batchUpdate_Tag = ref<string[]>([])
|
||||
const batchUpdate_Language = ref<SongLanguage[]>([])
|
||||
const batchUpdate_Option = ref<SongRequestOption>()
|
||||
|
||||
const playingSong = ref<SongsInfo>()
|
||||
const isLrcLoading = ref<string>()
|
||||
|
||||
@@ -139,6 +148,7 @@ const authorsOptions = computed(() => {
|
||||
})
|
||||
|
||||
const columns = ref<DataTableColumns<SongsInfo>>()
|
||||
const selectedColumn = ref<DataTableRowKey[]>([])
|
||||
const authorColumn = ref<DataTableBaseColumn<SongsInfo>>({
|
||||
title: '作者',
|
||||
key: 'artist',
|
||||
@@ -163,6 +173,10 @@ const onAuthorClick = (author: string) => {
|
||||
function createColumns(): DataTableColumns<SongsInfo> {
|
||||
authorColumn.value.filterOptions = authorsOptions.value
|
||||
return [
|
||||
{
|
||||
type: 'selection',
|
||||
disabled: () => !props.isSelf,
|
||||
},
|
||||
{
|
||||
key: 'name',
|
||||
resizable: true,
|
||||
@@ -258,7 +272,7 @@ function createColumns(): DataTableColumns<SongsInfo> {
|
||||
},
|
||||
{
|
||||
icon: () => h(NIcon, { component: Play24Filled }),
|
||||
}
|
||||
},
|
||||
),
|
||||
default: () => '试听',
|
||||
})
|
||||
@@ -280,7 +294,7 @@ function createColumns(): DataTableColumns<SongsInfo> {
|
||||
},
|
||||
{
|
||||
icon: () => h(NIcon, { component: NotepadEdit20Filled }),
|
||||
}
|
||||
},
|
||||
),
|
||||
default: () => '修改',
|
||||
}),
|
||||
@@ -302,17 +316,17 @@ function createColumns(): DataTableColumns<SongsInfo> {
|
||||
},
|
||||
{
|
||||
icon: () => h(NIcon, { component: Delete24Filled }),
|
||||
}
|
||||
},
|
||||
),
|
||||
default: () => '确认删除该歌曲?',
|
||||
}
|
||||
},
|
||||
),
|
||||
default: () => '删除',
|
||||
}),
|
||||
]
|
||||
: null,
|
||||
props.extraButtom?.(data),
|
||||
]
|
||||
],
|
||||
)
|
||||
},
|
||||
},
|
||||
@@ -337,8 +351,8 @@ function GetPlayButton(song: SongsInfo) {
|
||||
},
|
||||
{
|
||||
icon: () => h(FiveSingIcon, { class: 'svg-icon fivesing' }),
|
||||
}
|
||||
)
|
||||
},
|
||||
),
|
||||
),
|
||||
default: () => '在5sing打开',
|
||||
})
|
||||
@@ -358,7 +372,7 @@ function GetPlayButton(song: SongsInfo) {
|
||||
},
|
||||
{
|
||||
icon: () => h(NeteaseIcon, { class: 'svg-icon netease' }),
|
||||
}
|
||||
},
|
||||
),
|
||||
default: () => '在网易云打开',
|
||||
})
|
||||
@@ -378,7 +392,7 @@ function GetPlayButton(song: SongsInfo) {
|
||||
},
|
||||
{
|
||||
icon: () => h(NIcon, { component: SquareArrowForward24Filled }),
|
||||
}
|
||||
},
|
||||
),
|
||||
default: () => '打开链接',
|
||||
})
|
||||
@@ -445,6 +459,110 @@ function GetGuardColor(level: number | null | undefined): string {
|
||||
}
|
||||
return ''
|
||||
}
|
||||
function batchUpdateAuthor() {
|
||||
if (selectedColumn.value.length == 0) {
|
||||
message.error('请先选择歌曲')
|
||||
return
|
||||
}
|
||||
QueryPostAPI<SongsInfo[]>(SONG_API_URL + 'update-batch-author', {
|
||||
ids: selectedColumn.value.map((s) => s.toString()),
|
||||
data: batchUpdate_Author.value,
|
||||
})
|
||||
.then((data) => {
|
||||
if (data.code == 200) {
|
||||
message.success('已更新歌曲')
|
||||
for (const song of songsInternal.value) {
|
||||
if (selectedColumn.value.includes(song.key)) {
|
||||
const index = songsInternal.value.findIndex((s) => s.key == song.key)
|
||||
songsInternal.value[index].author = batchUpdate_Author.value
|
||||
}
|
||||
}
|
||||
} else {
|
||||
message.error('未能更新歌曲: ' + data.message)
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
message.error('未能更新歌曲: ' + err)
|
||||
})
|
||||
}
|
||||
function batchUpdateTag() {
|
||||
if (selectedColumn.value.length == 0) {
|
||||
message.error('请先选择歌曲')
|
||||
return
|
||||
}
|
||||
QueryPostAPI<SongsInfo[]>(SONG_API_URL + 'update-batch-tag', {
|
||||
ids: selectedColumn.value.map((s) => s.toString()),
|
||||
data: batchUpdate_Tag.value,
|
||||
})
|
||||
.then((data) => {
|
||||
if (data.code == 200) {
|
||||
message.success('已更新歌曲')
|
||||
for (const song of songsInternal.value) {
|
||||
if (selectedColumn.value.includes(song.key)) {
|
||||
const index = songsInternal.value.findIndex((s) => s.key == song.key)
|
||||
songsInternal.value[index].tags = batchUpdate_Tag.value
|
||||
}
|
||||
}
|
||||
} else {
|
||||
message.error('未能更新歌曲: ' + data.message)
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
message.error('未能更新歌曲: ' + err)
|
||||
})
|
||||
}
|
||||
function batchUpdateLanguage() {
|
||||
if (selectedColumn.value.length == 0) {
|
||||
message.error('请先选择歌曲')
|
||||
return
|
||||
}
|
||||
QueryPostAPI<SongsInfo[]>(SONG_API_URL + 'update-batch-language', {
|
||||
ids: selectedColumn.value.map((s) => s.toString()),
|
||||
data: batchUpdate_Language.value,
|
||||
})
|
||||
.then((data) => {
|
||||
if (data.code == 200) {
|
||||
message.success('已更新歌曲')
|
||||
for (const song of songsInternal.value) {
|
||||
if (selectedColumn.value.includes(song.key)) {
|
||||
const index = songsInternal.value.findIndex((s) => s.key == song.key)
|
||||
songsInternal.value[index].language = batchUpdate_Language.value
|
||||
}
|
||||
}
|
||||
} else {
|
||||
message.error('未能更新歌曲: ' + data.message)
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
message.error('未能更新歌曲: ' + err)
|
||||
})
|
||||
}
|
||||
function batchUpdateOption() {
|
||||
if (selectedColumn.value.length == 0) {
|
||||
message.error('请先选择歌曲')
|
||||
return
|
||||
}
|
||||
QueryPostAPI<SongsInfo[]>(SONG_API_URL + 'update-batch-option', {
|
||||
ids: selectedColumn.value.map((s) => s.toString()),
|
||||
data: batchUpdate_Option.value ? batchUpdate_Option.value : null,
|
||||
})
|
||||
.then((data) => {
|
||||
if (data.code == 200) {
|
||||
message.success('已更新歌曲')
|
||||
for (const song of songsInternal.value) {
|
||||
if (selectedColumn.value.includes(song.key)) {
|
||||
const index = songsInternal.value.findIndex((s) => s.key == song.key)
|
||||
songsInternal.value[index].options = batchUpdate_Option.value
|
||||
}
|
||||
}
|
||||
} else {
|
||||
message.error('未能更新歌曲: ' + data.message)
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
message.error('未能更新歌曲: ' + err)
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
songsInternal.value = props.songs
|
||||
@@ -469,7 +587,10 @@ onMounted(() => {
|
||||
<NDivider style="margin: 15px 0 15px 0" />
|
||||
</div>
|
||||
</Transition>
|
||||
<NButton :disabled="selectedColumn.length <= 1 && isSelf" type="info" @click="showBatchModal = true" size="small"> 批量编辑 </NButton>
|
||||
<NDivider style="margin: 5px 0 5px 0" />
|
||||
<NDataTable
|
||||
v-model:checked-row-keys="selectedColumn"
|
||||
size="small"
|
||||
:columns="columns"
|
||||
:data="songsComputed"
|
||||
@@ -506,11 +627,17 @@ onMounted(() => {
|
||||
<NSpace vertical>
|
||||
<NCheckbox
|
||||
:checked="updateSongModel.options != undefined"
|
||||
@update:checked="(checked: boolean) => {updateSongModel.options = checked ? {
|
||||
@update:checked="
|
||||
(checked: boolean) => {
|
||||
updateSongModel.options = checked
|
||||
? ({
|
||||
needJianzhang: false,
|
||||
needTidu: false,
|
||||
needZongdu: false
|
||||
} as SongRequestOption : undefined}"
|
||||
needZongdu: false,
|
||||
} as SongRequestOption)
|
||||
: undefined
|
||||
}
|
||||
"
|
||||
>
|
||||
是否启用
|
||||
</NCheckbox>
|
||||
@@ -523,7 +650,11 @@ onMounted(() => {
|
||||
<NSpace align="center">
|
||||
<NCheckbox
|
||||
:checked="updateSongModel.options.scMinPrice != undefined"
|
||||
@update:checked="(checked: boolean) => {if(updateSongModel.options) updateSongModel.options.scMinPrice = checked ? 30 : undefined}"
|
||||
@update:checked="
|
||||
(checked: boolean) => {
|
||||
if (updateSongModel.options) updateSongModel.options.scMinPrice = checked ? 30 : undefined
|
||||
}
|
||||
"
|
||||
>
|
||||
需要SC
|
||||
</NCheckbox>
|
||||
@@ -535,7 +666,11 @@ onMounted(() => {
|
||||
<NSpace align="center">
|
||||
<NCheckbox
|
||||
:checked="updateSongModel.options.fanMedalMinLevel != undefined"
|
||||
@update:checked="(checked: boolean) => {if(updateSongModel.options) updateSongModel.options.fanMedalMinLevel = checked ? 5 : undefined}"
|
||||
@update:checked="
|
||||
(checked: boolean) => {
|
||||
if (updateSongModel.options) updateSongModel.options.fanMedalMinLevel = checked ? 5 : undefined
|
||||
}
|
||||
"
|
||||
>
|
||||
需要粉丝牌
|
||||
<NTooltip>
|
||||
@@ -560,6 +695,92 @@ onMounted(() => {
|
||||
<NDivider style="margin: 10px" />
|
||||
<NButton @click="updateSong" type="success"> 更新 </NButton>
|
||||
</NModal>
|
||||
<NModal v-model:show="showBatchModal" preset="card" :title="`批量编辑 | 已选择: ${selectedColumn.length}`" style="max-width: 600px">
|
||||
<NTabs>
|
||||
<NTabPane name="author" tab="作者">
|
||||
<NSelect v-model:value="batchUpdate_Author" filterable multiple tag placeholder="输入后按回车新增" :options="authorsOptions" />
|
||||
<NDivider />
|
||||
<NButton @click="batchUpdateAuthor" type="success"> 更新 </NButton>
|
||||
</NTabPane>
|
||||
<NTabPane name="tag" tab="标签">
|
||||
<NSelect v-model:value="batchUpdate_Tag" filterable multiple clearable tag placeholder="可选,按回车确认" :options="tagsSelectOption" />
|
||||
<NDivider />
|
||||
<NButton @click="batchUpdateTag" type="success"> 更新 </NButton>
|
||||
</NTabPane>
|
||||
<NTabPane name="language" tab="语言">
|
||||
<NSelect v-model:value="batchUpdate_Language" multiple :options="songSelectOption" placeholder="选择" />
|
||||
<NDivider />
|
||||
<NButton @click="batchUpdateLanguage" type="success"> 更新 </NButton>
|
||||
</NTabPane>
|
||||
<NTabPane name="option" tab="点歌选项">
|
||||
<NSpace vertical>
|
||||
<NCheckbox
|
||||
:checked="batchUpdate_Option != undefined"
|
||||
@update:checked="
|
||||
(checked: boolean) => {
|
||||
batchUpdate_Option = checked
|
||||
? ({
|
||||
needJianzhang: false,
|
||||
needTidu: false,
|
||||
needZongdu: false,
|
||||
} as SongRequestOption)
|
||||
: undefined
|
||||
}
|
||||
"
|
||||
>
|
||||
是否启用
|
||||
</NCheckbox>
|
||||
<template v-if="batchUpdate_Option != undefined">
|
||||
<NSpace>
|
||||
<NCheckbox v-model:checked="batchUpdate_Option.needJianzhang"> 需要舰长 </NCheckbox>
|
||||
<NCheckbox v-model:checked="batchUpdate_Option.needTidu"> 需要提督 </NCheckbox>
|
||||
<NCheckbox v-model:checked="batchUpdate_Option.needZongdu"> 需要总督 </NCheckbox>
|
||||
</NSpace>
|
||||
<NSpace align="center">
|
||||
<NCheckbox
|
||||
: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">
|
||||
<NInputGroupLabel> SC最低价格 </NInputGroupLabel>
|
||||
<NInputNumber v-model:value="batchUpdate_Option.scMinPrice" min="30" />
|
||||
</NInputGroup>
|
||||
</NSpace>
|
||||
<NSpace align="center">
|
||||
<NCheckbox
|
||||
:checked="batchUpdate_Option.fanMedalMinLevel != undefined"
|
||||
@update:checked="
|
||||
(checked: boolean) => {
|
||||
if (batchUpdate_Option) batchUpdate_Option.fanMedalMinLevel = checked ? 5 : undefined
|
||||
}
|
||||
"
|
||||
>
|
||||
需要粉丝牌
|
||||
<NTooltip>
|
||||
<template #trigger>
|
||||
<NIcon :component="Info24Filled" />
|
||||
</template>
|
||||
这个即使不开也会遵循全局点歌设置的粉丝牌等级
|
||||
</NTooltip>
|
||||
</NCheckbox>
|
||||
<NInputGroup v-if="batchUpdate_Option?.fanMedalMinLevel" style="width: 200px">
|
||||
<NInputGroupLabel> 最低等级 </NInputGroupLabel>
|
||||
<NInputNumber v-model:value="batchUpdate_Option.fanMedalMinLevel" min="0" />
|
||||
</NInputGroup>
|
||||
</NSpace>
|
||||
</template>
|
||||
</NSpace>
|
||||
<NDivider />
|
||||
<NButton @click="batchUpdateOption" type="success"> 更新 </NButton>
|
||||
</NTabPane>
|
||||
</NTabs>
|
||||
</NModal>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -4,6 +4,8 @@
|
||||
"module": "esnext",
|
||||
"strict": true,
|
||||
"jsx": "preserve",
|
||||
"jsxFactory": "h",
|
||||
"jsxFragmentFactory": "Fragment",
|
||||
"moduleResolution": "node",
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
|
||||
@@ -3,12 +3,15 @@ import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import path from 'path'
|
||||
import svgLoader from 'vite-svg-loader'
|
||||
import mkcert from 'vite-plugin-mkcert'
|
||||
|
||||
const Timestamp = new Date().getTime()
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue(), svgLoader()],
|
||||
plugins: [vue({
|
||||
script: {
|
||||
propsDestructure: true,
|
||||
defineModel: true
|
||||
}
|
||||
}), svgLoader(), vueJsx()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, 'src'),
|
||||
Reference in New Issue
Block a user