Megghy/vtsuru.live
1
0
Fork 0
mirror of https://github.com/Megghy/vtsuru.live.git synced 2025-12-06 18:36:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix music request

Browse Source
This commit is contained in:
Megghy
2024-01-21 23:43:27 +08:00
parent 8dd85f205d
commit c1d8f75690
10 changed files with 282 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/App.vue
View File

@@ -1,7 +1,8 @@
<template>
<NConfigProvider :theme-overrides="themeOverrides" :theme="theme" style="height: 100vh" :locale="zhCN" :date-locale="dateZhCN">
<NMessageProvider>
<NNotificationProvider>
<NConfigProvider :theme-overrides="themeOverrides" :theme="theme" style="height: 100vh" :locale="zhCN" :date-locale="dateZhCN">
<NDialogProvider>
<NLoadingBarProvider>
<Suspense>
<TempComponent>
@@ -22,9 +23,10 @@
</template>
</Suspense>
</NLoadingBarProvider>
</NConfigProvider>
</NDialogProvider>
</NNotificationProvider>
</NMessageProvider>
</NConfigProvider>
</template>
<script setup lang="ts">
@@ -32,7 +34,21 @@ import { useProviderStore } from '@/store/useProviderStore'
import ManageLayout from '@/views/ManageLayout.vue'
import ViewerLayout from '@/views/ViewerLayout.vue'
import { useStorage } from '@vueuse/core'
import { NConfigProvider, NElement, NLayoutContent, NLoadingBarProvider, NMessageProvider, NNotificationProvider, NSpin, darkTheme, dateZhCN, useLoadingBar, useOsTheme, zhCN } from 'naive-ui'
import {
NConfigProvider,
NDialogProvider,
NElement,
NLayoutContent,
NLoadingBarProvider,
NMessageProvider,
NNotificationProvider,
NSpin,
darkTheme,
dateZhCN,
useLoadingBar,
useOsTheme,
zhCN,
} from 'naive-ui'
import { computed, defineComponent, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ThemeType } from './api/api-models'

25
src/Utils.ts
View File

@@ -1,5 +1,5 @@
import { useStorage } from '@vueuse/core'
import { createDiscreteApi, useOsTheme } from 'naive-ui'
import { UploadFileInfo, createDiscreteApi, useOsTheme } from 'naive-ui'
import { ThemeType } from './api/api-models'
const { message } = createDiscreteApi(['message'])
@@ -80,3 +80,26 @@ export function getBase64(file: File | undefined | null): Promise<string | undef
reader.onerror = (error) => reject(error)
})
}
export async function getImageUploadModel(files: UploadFileInfo[] | undefined | null, maxSize: number = 10 * 1024 * 1024) {
let result = {
existImages: [],
newImagesBase64: [],
} as { existImages: string[]; newImagesBase64: string[] }
if (!files) return result
for (let i = 0; i < files.length; i++) {
const file = files[i]
if ((file.file?.size ?? 0) > maxSize) {
message.error('文件大小不能超过 ' + maxSize / 1024 / 1024 + 'MB')
return result
}
if (!file.file) {
result.existImages.push(file.id) //用id绝对路径当的文件名
} else {
const base64 = await getBase64(file.file)
if (base64) {
result.newImagesBase64.push(base64)
}
}
}
return result
}

11
src/api/api-models.ts
View File

@@ -520,7 +520,9 @@ export enum GoodsTypes {
export interface ResponsePointGoodModel {
id: number
name: string
count: number
description: string
content?: string
count?: number
price: number
tags: TagInfo[]
cover?: string
@@ -528,14 +530,17 @@ export interface ResponsePointGoodModel {
status: GoodsStatus
type: GoodsTypes
}
export interface ImageUploadModel{
existImages: string[]
newImagesBase64: string[]
}
export interface PointGoodsModel {
id?: number
name: string
count: number
price: number
tags: TagInfo[]
coverImageBase64?: string
cover?: ImageUploadModel
status: GoodsStatus
type: GoodsTypes
collectUrl?: string

33
src/components/manage/PointGoodsItem.vue
View File

@@ -1,20 +1,45 @@
<script setup lang="ts">
import { ResponsePointGoodModel } from '@/api/api-models'
import { NCard } from 'naive-ui'
import { ref } from 'vue'
import { NButton, NCard, NDropdown, NEllipsis, NFlex, NIcon, NImage, NPopselect, NText } from 'naive-ui'
import { FILE_BASE_URL, IMGUR_URL } from '@/data/constants'
import { computed, ref } from 'vue'
import { MoreHorizontal16Filled, MoreVertical16Filled } from '@vicons/fluent'
const props = defineProps<{
goods: ResponsePointGoodModel
}>()
const emptyCover = IMGUR_URL + 'None.png'
</script>
<template>
<NCard>
<NCard style="max-width: 300px">
<template #cover>
<img :src="goods.cover" />
<NImage :src="goods.cover ? FILE_BASE_URL + goods.cover : emptyCover" :fallback-src="emptyCover" height="150" object-fit="cover" :preview-disabled="!goods.cover" style="width: 100%" />
</template>
<template #header-extra>
<slot name="header-extra"></slot>
</template>
<template #header>
<NEllipsis>
{{ goods.name }}
</NEllipsis>
</template>
<NFlex vertical>
<NText depth="3">
{{ goods.description }}
</NText>
<NFlex justify="space-between">
<NFlex>
<NText> 库存: </NText>
<NText v-if="goods.count && goods.count > -1">
{{ goods.count }}
</NText>
<NText v-else> 不限 </NText>
</NFlex>
</NFlex>
</NFlex>
<template #footer>
<slot name="footer"></slot>
</template>
</NCard>
</template>

2
src/data/constants.ts
View File

@@ -8,6 +8,8 @@ const failoverAPI = `https://failover-api.vtsuru.suki.club/api/`
export const isBackendUsable = ref(true)
export const AVATAR_URL = 'https://workers.vrp.moe/api/bilibili/avatar/'
export const FILE_BASE_URL = 'https://files.vtsuru.live'
export const IMGUR_URL = FILE_BASE_URL + '/imgur/'
export const apiFail = ref(false)
export const BASE_API = () => (process.env.NODE_ENV === 'development' ? debugAPI : apiFail.value ? failoverAPI : releseAPI)

9
src/router/user.ts
View File

@@ -37,6 +37,15 @@ export default {
title: '日程',
keepAlive: true,
},
children: [
{
path: 'ics',
beforeEnter(to: any) {
// 直接重定向到外部 URL
window.location.href = 'https://vtsuru.live/api/schedule/get-ics?id=' + to.query.id
},
},
],
},
],
}

16
src/store/useMusicRequest.ts
View File

@@ -66,18 +66,21 @@ export const useMusicRequestProvider = defineStore('MusicRequest', () => {
const message = useMessage()
function addWaitingMusic(info: WaitMusicInfo) {
console.log(settings.value.orderMusicFirst + ' ' + isPlayingOrderMusic.value)
if ((settings.value.orderMusicFirst && !isPlayingOrderMusic.value) || aplayerRef.value?.audio.paused == true) {
playMusic(info.music)
isPlayingOrderMusic.value = true
console.log(`正在播放 [${info.from.name}] 点的 ${info.music.name} - ${info.music.author?.join('/')}`)
message.success(`正在播放 [${info.from.name}] 点的 ${info.music.name} - ${info.music.author?.join('/')}`)
} else {
waitingMusics.value.push(info)
message.success(`[${info.from.name}] 点了一首 ${info.music.name} - ${info.music.author?.join('/')}`)
}
}
function onMusicEnd() {
if (!playWaitingMusic()) {
isPlayingOrderMusic.value = false
if (currentOriginMusic) {
if (!playWaitingMusic()) {
if (currentOriginMusic.value) {
currentOriginMusic.value = undefined
}
setTimeout(() => {
@@ -139,6 +142,14 @@ export const useMusicRequestProvider = defineStore('MusicRequest', () => {
message.error('设置音频输出设备失败: ' + err)
}
}
function nextMusic() {
if (waitingMusics.value.length > 0) {
onMusicEnd()
} else {
isPlayingOrderMusic.value = false
aplayerRef.value?.onAudioEnded()
}
}
return {
waitingMusics,
@@ -155,6 +166,7 @@ export const useMusicRequestProvider = defineStore('MusicRequest', () => {
onMusicEnd,
onMusicPlay,
pauseMusic,
nextMusic,
aplayerRef,
}
})

4
src/views/BiliAuthView.vue
View File

@@ -42,6 +42,8 @@ function onStartVerify() {
currentStep.value = 1
timer.value = setInterval(checkStatus, 2500)
startModel.value = data.data
} else {
message.error('无法开启认证流程: ' + data.message)
}
})
}
@@ -154,7 +156,7 @@ onMounted(async () => {
<NText> 你的登陆链接为: </NText>
<NInputGroup>
<NInput :value="`https://vtsuru.live/point?auth=${biliToken}`" type="textarea" :allow-input="() => false" />
<NButton @click="copyCode" type="info" style="height: 100%;"> 复制登陆链接 </NButton>
<NButton @click="copyCode" type="info" style="height: 100%"> 复制登陆链接 </NButton>
</NInputGroup>
<NButton @click="" type="primary"> 前往个人中心 </NButton>
</NFlex>

7
src/views/ManageLayout.vue
View File

@@ -409,6 +409,9 @@ function logout() {
cookie.value = undefined
window.location.reload()
}
function onNextMusic() {
musicRquestStore.nextMusic();
}
onMounted(() => {
if (accountInfo.value?.isEmailVerified == false) {
@@ -532,7 +535,7 @@ onMounted(() => {
/>
<NSpace vertical>
<NTag :bordered="false" type="info" size="small"> 队列: {{ musicRquestStore.waitingMusics.length }} </NTag>
<NButton size="small" type="info" @click="musicRquestStore.waitingMusics.length > 0 ? musicRquestStore.onMusicEnd() : musicRquestStore.aplayerRef?.onAudioEnded()"> 下一首 </NButton>
<NButton size="small" type="info" @click="onNextMusic"> 下一首 </NButton>
</NSpace>
</div>
</NLayoutFooter>
@@ -550,7 +553,7 @@ onMounted(() => {
<RegisterAndLogin style="max-width: 500px; min-width: 350px" />
</template>
<template v-else>
<NSpin :loading="isLoadingAccount" style="overflow: hidden;"> 正在请求账户数据... </NSpin>
<NSpin :loading="isLoadingAccount" style="overflow: hidden"> 正在请求账户数据... </NSpin>
</template>
</NLayoutContent>
</template>

182
src/views/manage/PointManage.vue
View File

@@ -1,10 +1,11 @@
<script setup lang="ts">
import { getBase64 } from '@/Utils'
import { getBase64, getImageUploadModel } from '@/Utils'
import { DisableFunction, EnableFunction, useAccount } from '@/api/account'
import { ResponsePointGoodModel, FunctionTypes, PointGoodsModel, GoodsTypes, GoodsStatus, TagInfo } from '@/api/api-models'
import { QueryGetAPI, QueryPostAPI } from '@/api/query'
import { POINT_API_URL } from '@/data/constants'
import { Info24Filled } from '@vicons/fluent'
import PointGoodsItem from '@/components/manage/PointGoodsItem.vue'
import { FILE_BASE_URL, POINT_API_URL } from '@/data/constants'
import { Info24Filled, MoreVertical16Filled } from '@vicons/fluent'
import { List } from 'linqts'
import {
NAlert,
@@ -32,15 +33,21 @@ import {
FormItemRule,
NScrollbar,
FormValidationError,
NSelect,
NSelect,
NGrid,
NGridItem,
NDropdown,
NImage,
useDialog,
} from 'naive-ui'
import { computed, ref } from 'vue'
const message = useMessage()
const accountInfo = useAccount()
const dialog = useDialog()
const goods = ref<ResponsePointGoodModel[]>(await getGoods())
const addGoodsModel = ref<PointGoodsModel>({
const currentGoodsModel = ref<PointGoodsModel>({
type: GoodsTypes.Virtual,
status: GoodsStatus.Normal,
} as PointGoodsModel)
@@ -48,6 +55,7 @@ const addGoodsModel = ref<PointGoodsModel>({
const showAddGoodsModal = ref(false)
const isAllowedPrivacyPolicy = ref(false)
const isUpdating = ref(false)
const fileList = ref<UploadFileInfo[]>([])
@@ -64,32 +72,55 @@ const rules = {
required: true,
message: '请输入虚拟礼物的具体内容',
validator: (rule: FormItemRule, value: string) => {
return addGoodsModel.value.type != GoodsTypes.Virtual || (value?.length ?? 0) > 0
return currentGoodsModel.value.type != GoodsTypes.Virtual || (value?.length ?? 0) > 0
},
},
privacy: {
required: true,
message: '需要阅读并同意本站隐私政策',
validator: (rule: FormItemRule, value: boolean) => {
return (addGoodsModel.value.type != GoodsTypes.Physical && addGoodsModel.value.collectUrl != undefined) || isAllowedPrivacyPolicy.value
return (currentGoodsModel.value.type != GoodsTypes.Physical && currentGoodsModel.value.collectUrl != undefined) || isAllowedPrivacyPolicy.value
},
},
}
const formRef = ref()
const existTags = computed(() => {
if (goods.value.length == 0) {
return []
}
//获取所有已存在商品的tags并去重
const tempSet = new Set<TagInfo>()
for (let i = 0; i < goods.value.length; i++) {
const goodsTags = goods.value[i].tags
if (!goodsTags || goodsTags.length == 0) {
continue
}
for (let j = 0; j < goods.value[i].tags.length; j++) {
tempSet.add(goods.value[i].tags[j])
}
}
return Array.from(tempSet).map((item) => {
return { label: item.name, value: item.id }
return { label: item.name, value: item.name }
})
})
const dropDownActions = {
update: {
label: '修改',
key: 'update',
action: (item: ResponsePointGoodModel) => onUpdateClick(item),
},
delete: {
label: '删除',
key: 'delete',
action: (item: ResponsePointGoodModel) => onDeleteClick(item),
},
} as { [key: string]: { label: string; key: string; action: (item: ResponsePointGoodModel) => void } }
const dropDownOptions = computed(() => {
return Object.values(dropDownActions)
})
async function getGoods() {
try {
var resp = await QueryGetAPI<ResponsePointGoodModel[]>(POINT_API_URL + 'get-goods', {
@@ -119,18 +150,25 @@ async function setFunctionEnable(enable: boolean) {
}
}
async function updateGoods(e: MouseEvent) {
if (isUpdating.value || !formRef.value) return
e.preventDefault()
if (!formRef.value) return
isUpdating.value = true
await formRef.value
.validate()
.then(async () => {
if (fileList.value.length > 0) {
addGoodsModel.value.coverImageBase64 = await getBase64(fileList.value[0].file)
currentGoodsModel.value.cover = await getImageUploadModel(fileList.value)
}
await QueryPostAPI<ResponsePointGoodModel>(POINT_API_URL + 'update-goods', addGoodsModel.value)
console.log(currentGoodsModel.value.cover)
await QueryPostAPI<ResponsePointGoodModel>(POINT_API_URL + 'update-goods', currentGoodsModel.value)
.then((data) => {
if (data.code == 200) {
message.success('成功')
if (goods.value.find((g) => g.id == data.data.id)) {
goods.value[goods.value.findIndex((g) => g.id == data.data.id)] = data.data
} else {
goods.value.push(data.data)
}
} else {
message.error('失败: ' + data.message)
}
@@ -144,6 +182,11 @@ async function updateGoods(e: MouseEvent) {
console.log(err)
message.error('表单验证失败')
})
.finally(() => {
isUpdating.value = false
showAddGoodsModal.value = false
currentGoodsModel.value = {} as PointGoodsModel
})
}
function OnFileListChange(files: UploadFileInfo[]) {
if (files.length == 1) {
@@ -154,6 +197,50 @@ function OnFileListChange(files: UploadFileInfo[]) {
}
}
}
function onUpdateClick(item: ResponsePointGoodModel) {
currentGoodsModel.value = {
...item,
count: item.count ?? 0,
cover: undefined,
}
fileList.value = [
{
id: item.cover ?? 'cover',
thumbnailUrl: FILE_BASE_URL + item.cover,
name: '封面',
status: 'finished',
},
]
showAddGoodsModal.value = true
}
function onDeleteClick(item: ResponsePointGoodModel) {
const d = dialog.warning({
title: '警告',
content: '你确定要删除这个礼物吗？',
positiveText: '确定',
negativeText: '取消',
onPositiveClick: async () => {
d.loading = true
try {
const data = await QueryGetAPI(POINT_API_URL + 'delete-goods', {
id: item.id,
})
if (data.code == 200) {
message.success('成功')
goods.value = goods.value.filter((g) => g.id != item.id)
} else {
message.error('失败: ' + data.message)
console.error(data.message)
}
} catch (err) {
message.error('失败: ' + err)
console.error(err)
} finally {
d.loading = false
}
},
})
}
</script>
<template>
@@ -172,25 +259,44 @@ function OnFileListChange(files: UploadFileInfo[]) {
<NButton type="primary" @click="showAddGoodsModal = true"> 添加礼物 </NButton>
</NFlex>
<NDivider />
<NGrid :cols="4">
<NGridItem v-for="item in goods" :key="item.id">
<PointGoodsItem :goods="item">
<template #header-extra>
<NDropdown :options="dropDownOptions" trigger="click" @select="(v) => dropDownActions[v].action(item)">
<NButton text style="font-size: 24px">
<template #icon>
<NIcon :component="MoreVertical16Filled" />
</template>
</NButton>
</NDropdown>
</template>
</PointGoodsItem>
</NGridItem>
</NGrid>
</NTabPane>
</NTabs>
<NModal v-model:show="showAddGoodsModal" preset="card" style="width: 600px; max-width: 90%" title="添加礼物">
<NModal v-model:show="showAddGoodsModal" preset="card" style="width: 600px; max-width: 90%" title="添加/修改礼物信息">
<NScrollbar style="max-height: 80vh">
<NForm ref="formRef" :model="addGoodsModel" :rules="rules">
<NForm ref="formRef" :model="currentGoodsModel" :rules="rules" style="width: 95%">
<NFormItem path="name" label="名称" required>
<NInput v-model:value="addGoodsModel.name" placeholder="填写礼物名称" />
<NInput v-model:value="currentGoodsModel.name" placeholder="必填, 礼物名称" />
</NFormItem>
<NFormItem path="price" label="所需积分" required>
<NInputNumber v-model:value="addGoodsModel.price" placeholder="填写需要的积分" min="0" />
<NInputNumber v-model:value="currentGoodsModel.price" placeholder="必填, 兑换所需要的积分" min="0" />
</NFormItem>
<NFormItem path="description" label="描述" type="textarea">
<NInput v-model:value="addGoodsModel.description" placeholder="填写礼物描述" />
<NFormItem path="description" label="描述">
<NInput v-model:value="currentGoodsModel.description" placeholder="可选, 礼物描述" />
</NFormItem>
<NFormItem path="tags" label="标签">
<NSelect v-model:value="addGoodsModel.tags" filterable multiple clearable tag placeholder="可选，按回车确认" :options="existTags" />
<NSelect :value="currentGoodsModel.tags?.map((tag) => tag.name)" filterable multiple clearable tag placeholder="可选，输入后按回车添加" :options="existTags" />
</NFormItem>
<NFormItem path="cover" label="封面" type="textarea">
<NFormItem path="cover" label="封面">
<NFlex v-if="currentGoodsModel.cover">
<NText>当前封面: </NText>
<NImage :src="FILE_BASE_URL + currentGoodsModel.cover" height="50" object-fit="cover" />
</NFlex>
<NUpload
:max="1"
accept=".png,.jpg,.jpeg,.gif,.svg,.webp,.ico,.bmp,.tif,.tiff,.jfif,.jpe,.jp,.psd,."
@@ -199,19 +305,19 @@ function OnFileListChange(files: UploadFileInfo[]) {
v-model:file-list="fileList"
@update:file-list="OnFileListChange"
>
+ 上传图片
+ {{ currentGoodsModel.cover ? '更换' : '上传' }}封面
</NUpload>
</NFormItem>
<NFormItem path="type" label="类型">
<NRadioGroup v-model:value="addGoodsModel.type">
<NRadioGroup v-model:value="currentGoodsModel.type">
<NRadioButton :value="GoodsTypes.Virtual">虚拟礼物</NRadioButton>
<NRadioButton :value="GoodsTypes.Physical">实体礼物</NRadioButton>
</NRadioGroup>
</NFormItem>
<template v-if="addGoodsModel.type == GoodsTypes.Physical">
<template v-if="currentGoodsModel.type == GoodsTypes.Physical">
<NFormItem path="collectUrl" label="收货地址">
<NFlex vertical>
<NRadioGroup :value="addGoodsModel.collectUrl == undefined ? 0 : 1" @update:value="(v) => (addGoodsModel.collectUrl = v == 1 ? '' : undefined)">
<NRadioGroup :value="currentGoodsModel.collectUrl == undefined ? 0 : 1" @update:value="(v) => (currentGoodsModel.collectUrl = v == 1 ? '' : undefined)">
<NRadioButton :value="0">通过本站收集收货地址</NRadioButton>
<NRadioButton :value="1">
使用站外链接收集地址
@@ -225,12 +331,12 @@ function OnFileListChange(files: UploadFileInfo[]) {
</NRadioGroup>
</NFlex>
</NFormItem>
<template v-if="addGoodsModel.collectUrl != undefined">
<template v-if="currentGoodsModel.collectUrl != undefined">
<NFormItem path="url" label="收集链接">
<NInput v-model:value="addGoodsModel.collectUrl" placeholder="用于给用户填写自己收货地址的表格的分享链接" />
<NInput v-model:value="currentGoodsModel.collectUrl" placeholder="用于给用户填写自己收货地址的表格的分享链接" />
</NFormItem>
<NFormItem label="内嵌收集链接">
<NCheckbox v-model:checked="addGoodsModel.embedCollectUrl"> 尝试将收集链接嵌入到网页中 </NCheckbox>
<NCheckbox v-model:checked="currentGoodsModel.embedCollectUrl"> 尝试将收集链接嵌入到网页中 </NCheckbox>
</NFormItem>
</template>
<template v-else>
@@ -240,20 +346,20 @@ function OnFileListChange(files: UploadFileInfo[]) {
</template>
</template>
<template v-else>
<NFormItem path="content" label="礼物内容" required>
<NInput
v-model:value="addGoodsModel.content"
style="min-height: 100px"
type="textarea"
placeholder="虚拟礼物的具体内容, 网盘链接什么之类的"
maxlength="10000"
show-count
autosize
clearable
/>
<NFormItem path="content" required>
<template #label>
礼物内容
<NTooltip>
<template #trigger>
<NIcon :component="Info24Filled" />
</template>
虚拟礼物的具体内容, 网盘链接什么之类的
</NTooltip>
</template>
<NInput v-model:value="currentGoodsModel.content" type="textarea" placeholder="写这里咯" maxlength="10000" show-count clearable />
</NFormItem>
</template>
<NButton @click="updateGoods" type="primary"> 添加 </NButton>
<NButton @click="updateGoods" type="primary" :loading="isUpdating"> 添加 </NButton>
</NForm>
</NScrollbar>
</NModal>