mirror of
https://github.com/Megghy/vtsuru.live.git
synced 2025-12-07 02:46:55 +08:00
1011
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { GetSelfAccount } from '@/api/account'
|
||||
import { AccountInfo } from '@/api/api-models'
|
||||
import { QueryGetAPI, QueryPostAPI } from '@/api/query'
|
||||
import { ACCOUNT_API_URL, TURNSTILE_KEY } from '@/data/constants'
|
||||
import { GetNotifactions } from '@/data/notifactions'
|
||||
@@ -128,7 +129,10 @@ function onLoginButtonClick(e: MouseEvent) {
|
||||
|
||||
formRef.value?.validate().then(async () => {
|
||||
isLoading.value = true
|
||||
await QueryPostAPI<string>(
|
||||
await QueryPostAPI<{
|
||||
account: AccountInfo
|
||||
token: string
|
||||
}>(
|
||||
ACCOUNT_API_URL + 'login',
|
||||
{
|
||||
nameOrEmail: loginModel.value.account,
|
||||
@@ -138,13 +142,11 @@ function onLoginButtonClick(e: MouseEvent) {
|
||||
)
|
||||
.then(async (data) => {
|
||||
if (data.code == 200) {
|
||||
cookie.value = data.data
|
||||
localStorage.setItem('JWT_Token', data.data.token)
|
||||
message.success(`成功登陆为 ${data?.data.account.name}`)
|
||||
setTimeout(() => {
|
||||
GetSelfAccount().then((data) => {
|
||||
message.success(`成功登陆为 ${data?.name}`)
|
||||
GetNotifactions();
|
||||
})
|
||||
}, 1)
|
||||
location.reload()
|
||||
}, 1000)
|
||||
} else {
|
||||
message.error(data.message)
|
||||
}
|
||||
@@ -161,57 +163,51 @@ function onLoginButtonClick(e: MouseEvent) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NSpin :show="isLoading">
|
||||
<NCard embedded>
|
||||
<template #header-extra>
|
||||
<slot name="header-extra"> </slot>
|
||||
</template>
|
||||
<template v-if="cookie">
|
||||
<NAlert type="warning"> 你已经登录 </NAlert>
|
||||
</template>
|
||||
<template v-else>
|
||||
<NTabs default-value="login" size="large" animated pane-wrapper-style="margin: 0 -4px" pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;">
|
||||
<NTabPane name="login" tab="登陆">
|
||||
<NForm ref="formRef" :rules="loginRules" :model="loginModel">
|
||||
<NFormItem path="account" label="用户名或邮箱">
|
||||
<NInput v-model:value="loginModel.account" />
|
||||
</NFormItem>
|
||||
<NFormItem path="password" label="密码">
|
||||
<NInput v-model:value="loginModel.password" type="password" @input="onPasswordInput" @keydown.enter.prevent />
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
<NSpace vertical justify="center" align="center">
|
||||
<NSpin :show="!token">
|
||||
<NButton type="primary" size="large" @click="onLoginButtonClick"> 登陆 </NButton>
|
||||
</NSpin>
|
||||
</NSpace>
|
||||
</NTabPane>
|
||||
<NTabPane name="register" tab="注册">
|
||||
<NForm ref="formRef" :rules="registerRules" :model="registerModel">
|
||||
<NFormItem path="username" label="用户名">
|
||||
<NInput v-model:value="registerModel.username" />
|
||||
</NFormItem>
|
||||
<NFormItem path="email" label="邮箱">
|
||||
<NInput v-model:value="registerModel.email" />
|
||||
</NFormItem>
|
||||
<NFormItem path="password" label="密码">
|
||||
<NInput v-model:value="registerModel.password" type="password" @input="onPasswordInput" @keydown.enter.prevent />
|
||||
</NFormItem>
|
||||
<NFormItem ref="rPasswordFormItemRef" first path="reenteredPassword" label="重复密码">
|
||||
<NInput v-model:value="registerModel.reenteredPassword" :disabled="!registerModel.password" type="password" @keydown.enter.prevent />
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
<NSpace vertical justify="center" align="center">
|
||||
<NSpin :show="!token">
|
||||
<NButton type="primary" size="large" @click="onregisterButtonClick"> 注册 </NButton>
|
||||
</NSpin>
|
||||
</NSpace>
|
||||
</NTabPane>
|
||||
</NTabs>
|
||||
<NCard embedded>
|
||||
<template #header-extra>
|
||||
<slot name="header-extra"> </slot>
|
||||
</template>
|
||||
<template v-if="cookie">
|
||||
<NAlert type="warning"> 你已经登录 </NAlert>
|
||||
</template>
|
||||
<template v-else>
|
||||
<NTabs default-value="login" size="large" animated pane-wrapper-style="margin: 0 -4px" pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;">
|
||||
<NTabPane name="login" tab="登陆">
|
||||
<NForm ref="formRef" :rules="loginRules" :model="loginModel">
|
||||
<NFormItem path="account" label="用户名或邮箱">
|
||||
<NInput v-model:value="loginModel.account" />
|
||||
</NFormItem>
|
||||
<NFormItem path="password" label="密码">
|
||||
<NInput v-model:value="loginModel.password" type="password" @input="onPasswordInput" @keydown.enter.prevent />
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
<NSpace vertical justify="center" align="center">
|
||||
<NButton :loading="!token || isLoading" type="primary" size="large" @click="onLoginButtonClick"> 登陆 </NButton>
|
||||
</NSpace>
|
||||
</NTabPane>
|
||||
<NTabPane name="register" tab="注册">
|
||||
<NForm ref="formRef" :rules="registerRules" :model="registerModel">
|
||||
<NFormItem path="username" label="用户名">
|
||||
<NInput v-model:value="registerModel.username" />
|
||||
</NFormItem>
|
||||
<NFormItem path="email" label="邮箱">
|
||||
<NInput v-model:value="registerModel.email" />
|
||||
</NFormItem>
|
||||
<NFormItem path="password" label="密码">
|
||||
<NInput v-model:value="registerModel.password" type="password" @input="onPasswordInput" @keydown.enter.prevent />
|
||||
</NFormItem>
|
||||
<NFormItem ref="rPasswordFormItemRef" first path="reenteredPassword" label="重复密码">
|
||||
<NInput v-model:value="registerModel.reenteredPassword" :disabled="!registerModel.password" type="password" @keydown.enter.prevent />
|
||||
</NFormItem>
|
||||
</NForm>
|
||||
<NSpace vertical justify="center" align="center">
|
||||
<NButton :loading="!token || isLoading" type="primary" size="large" @click="onregisterButtonClick"> 注册 </NButton>
|
||||
</NSpace>
|
||||
</NTabPane>
|
||||
</NTabs>
|
||||
|
||||
<NDivider />
|
||||
<VueTurnstile ref="turnstile" :site-key="TURNSTILE_KEY" v-model="token" theme="auto" style="text-align: center" />
|
||||
</template>
|
||||
</NCard>
|
||||
</NSpin>
|
||||
<NDivider />
|
||||
<VueTurnstile ref="turnstile" :site-key="TURNSTILE_KEY" v-model="token" theme="auto" style="text-align: center" />
|
||||
</template>
|
||||
</NCard>
|
||||
</template>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import { SongAuthorInfo, SongFrom, SongLanguage, SongsInfo } from '@/api/api-models'
|
||||
import { QueryPostAPI } from '@/api/query'
|
||||
import { SONG_API_URL } from '@/data/constants'
|
||||
import { List } from 'linqts'
|
||||
import {
|
||||
DataTableColumns,
|
||||
FormInst,
|
||||
@@ -25,7 +26,9 @@ import {
|
||||
NText,
|
||||
useMessage,
|
||||
} from 'naive-ui'
|
||||
import { onMounted, h, ref, watch } from 'vue'
|
||||
import { FilterOptionValue } from 'naive-ui/es/data-table/src/interface'
|
||||
import { nextTick } from 'process'
|
||||
import { onMounted, h, ref, watch, computed } from 'vue'
|
||||
import APlayer from 'vue3-aplayer'
|
||||
|
||||
const props = defineProps<{
|
||||
@@ -104,118 +107,135 @@ const songSelectOption = [
|
||||
},
|
||||
]
|
||||
const tagsSelectOption = ref<{ label: string; value: string }[]>([])
|
||||
const tags = ref<string[]>([])
|
||||
const tagsOptions = computed(() => {
|
||||
return tags.value.map((t) => ({
|
||||
label: t,
|
||||
value: t,
|
||||
}))
|
||||
})
|
||||
|
||||
const createColumns = (): DataTableColumns<SongsInfo> => [
|
||||
{
|
||||
title: '名称',
|
||||
key: 'name',
|
||||
resizable: true,
|
||||
minWidth: 100,
|
||||
width: 300,
|
||||
sorter: 'default',
|
||||
render(data) {
|
||||
return h(NSpace, { size: 5 }, () => [h(NText, () => data.name), h(NText, { depth: '3' }, () => data.translateName)])
|
||||
function createColumns(): DataTableColumns<SongsInfo> {
|
||||
return [
|
||||
{
|
||||
title: '名称',
|
||||
key: 'name',
|
||||
resizable: true,
|
||||
minWidth: 100,
|
||||
width: 300,
|
||||
sorter: 'default',
|
||||
render(data) {
|
||||
return h(NSpace, { size: 5 }, () => [h(NText, () => data.name), h(NText, { depth: '3' }, () => data.translateName)])
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '作者',
|
||||
key: 'artist',
|
||||
width: 200,
|
||||
resizable: true,
|
||||
render(data) {
|
||||
return h(NSpace, { size: 5 }, () => data.author.map((a) => h(NTag, { bordered: false, size: 'small', type: 'info' }, () => a)))
|
||||
{
|
||||
title: '作者',
|
||||
key: 'artist',
|
||||
width: 200,
|
||||
resizable: true,
|
||||
render(data) {
|
||||
return h(NSpace, { size: 5 }, () => data.author.map((a) => h(NTag, { bordered: false, size: 'small', type: 'info' }, () => a)))
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '语言',
|
||||
key: 'language',
|
||||
width: 150,
|
||||
resizable: true,
|
||||
render(data) {
|
||||
return (data.language?.length ?? 0) > 0
|
||||
? h(NSpace, { size: 5 }, () => data.language?.map((a) => h(NTag, { bordered: false, size: 'small' }, () => songSelectOption.find((s) => s.value == a)?.label)))
|
||||
: null
|
||||
{
|
||||
title: '语言',
|
||||
key: 'language',
|
||||
width: 150,
|
||||
resizable: true,
|
||||
render(data) {
|
||||
return (data.language?.length ?? 0) > 0
|
||||
? h(NSpace, { size: 5 }, () => data.language?.map((a) => h(NTag, { bordered: false, size: 'small' }, () => songSelectOption.find((s) => s.value == a)?.label)))
|
||||
: null
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
key: 'description',
|
||||
resizable: true,
|
||||
render(data) {
|
||||
return h(NEllipsis, () => data.description)
|
||||
{
|
||||
title: '描述',
|
||||
key: 'description',
|
||||
resizable: true,
|
||||
render(data) {
|
||||
return h(NEllipsis, () => data.description)
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '标签',
|
||||
key: 'tags',
|
||||
resizable: true,
|
||||
render(data) {
|
||||
return (data.tags?.length ?? 0) > 0 ? h(NSpace, { size: 5 }, () => data.tags?.map((a) => h(NTag, { bordered: false, size: 'small' }, () => a))) : null
|
||||
{
|
||||
title: '标签',
|
||||
key: 'tags',
|
||||
resizable: true,
|
||||
filter(value, row) {
|
||||
return (row.tags?.findIndex((t) => t == value.toString()) ?? -1) > -1
|
||||
},
|
||||
filterOptions: tagsOptions.value,
|
||||
render(data) {
|
||||
return (data.tags?.length ?? 0) > 0 ? h(NSpace, { size: 5 }, () => data.tags?.map((a) => h(NTag, { bordered: false, size: 'small' }, () => a))) : null
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'manage',
|
||||
disabled: () => !props.canEdit,
|
||||
width: 200,
|
||||
render(data) {
|
||||
return h(NSpace, {
|
||||
justify: 'space-around'
|
||||
}, () => [
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
title: '操作',
|
||||
key: 'manage',
|
||||
disabled: () => !props.canEdit,
|
||||
width: 200,
|
||||
render(data) {
|
||||
return h(
|
||||
NSpace,
|
||||
{
|
||||
size: 'small',
|
||||
onClick: () => {
|
||||
updateSongModel.value = JSON.parse(JSON.stringify(data))
|
||||
showModal.value = true
|
||||
},
|
||||
justify: 'space-around',
|
||||
},
|
||||
{
|
||||
default: () => '修改',
|
||||
}
|
||||
),
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
type: 'primary',
|
||||
size: 'small',
|
||||
onClick: () => {
|
||||
aplayerMusic.value = {
|
||||
title: data.name,
|
||||
artist: data.author.join('/') ?? '',
|
||||
src: data.url,
|
||||
pic: '',
|
||||
() => [
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
size: 'small',
|
||||
onClick: () => {
|
||||
updateSongModel.value = JSON.parse(JSON.stringify(data))
|
||||
showModal.value = true
|
||||
},
|
||||
},
|
||||
{
|
||||
default: () => '修改',
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
default: () => '播放',
|
||||
}
|
||||
),
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
type: 'error',
|
||||
size: 'small',
|
||||
onClick: () => {
|
||||
aplayerMusic.value = {
|
||||
title: data.name,
|
||||
artist: data.author.join('/') ?? '',
|
||||
src: data.url,
|
||||
pic: '',
|
||||
),
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
type: 'primary',
|
||||
size: 'small',
|
||||
onClick: () => {
|
||||
aplayerMusic.value = {
|
||||
title: data.name,
|
||||
artist: data.author.join('/') ?? '',
|
||||
src: data.url,
|
||||
pic: '',
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
default: () => '播放',
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
default: () => '删除',
|
||||
}
|
||||
),
|
||||
GetPlayButton(data),
|
||||
])
|
||||
),
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
type: 'error',
|
||||
size: 'small',
|
||||
onClick: () => {
|
||||
aplayerMusic.value = {
|
||||
title: data.name,
|
||||
artist: data.author.join('/') ?? '',
|
||||
src: data.url,
|
||||
pic: '',
|
||||
}
|
||||
},
|
||||
},
|
||||
{
|
||||
default: () => '删除',
|
||||
}
|
||||
),
|
||||
GetPlayButton(data),
|
||||
]
|
||||
)
|
||||
},
|
||||
},
|
||||
},
|
||||
]
|
||||
]
|
||||
}
|
||||
function GetPlayButton(song: SongsInfo) {
|
||||
switch (song.from) {
|
||||
case SongFrom.FiveSing: {
|
||||
@@ -273,7 +293,13 @@ async function updateSong() {
|
||||
|
||||
onMounted(() => {
|
||||
songsInternal.value = props.songs
|
||||
columns.value = createColumns()
|
||||
tags.value = new List(songsInternal.value)
|
||||
.SelectMany((s) => new List(s?.tags))
|
||||
.Distinct()
|
||||
.ToArray()
|
||||
setTimeout(() => {
|
||||
columns.value = createColumns()
|
||||
}, 1)
|
||||
})
|
||||
</script>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user