update style

This commit is contained in:
2023-11-30 13:05:44 +08:00
parent 1c0f21044e
commit cfbfaf7938
6 changed files with 80 additions and 23 deletions

View File

@@ -33,6 +33,7 @@ import { NButton, NCard, NDivider, NLayoutContent, NSpace, NText, NTimeline, NTi
</NSpace> </NSpace>
<NDivider title-placement="left"> 更新日志 </NDivider> <NDivider title-placement="left"> 更新日志 </NDivider>
<NTimeline> <NTimeline>
<NTimelineItem type="info" title="功能更新" content="歌单添加 '简单' 模板" time="2023-11-30" />
<NTimelineItem type="success" title="功能添加" content="排队" time="2023-11-25" /> <NTimelineItem type="success" title="功能添加" content="排队" time="2023-11-25" />
<NTimelineItem type="success" title="功能添加" content="点歌" time="2023-11-20" /> <NTimelineItem type="success" title="功能添加" content="点歌" time="2023-11-20" />
<NTimelineItem type="success" title="上架幻星平台" content="如题" time="2023-11-4" /> <NTimelineItem type="success" title="上架幻星平台" content="如题" time="2023-11-4" />

View File

@@ -10,17 +10,17 @@ const { width } = useWindowSize()
const functions = [ const functions = [
{ {
name: '直播事件记录', name: '直播事件记录',
desc: '能够记录并查询上舰和SC记录 (需要另外部署脚本', desc: '能够记录并查询上舰和SC记录',
icon: VehicleShip24Filled, icon: VehicleShip24Filled,
}, },
{ {
name: '日程表', name: '日程表',
desc: '提供多种样式的日程表 (样式还没做完', desc: '提供多种样式的日程表',
icon: Calendar, icon: Calendar,
}, },
{ {
name: '歌单', name: '歌单',
desc: '可以放自己的歌单或者能唱的歌, 支持多种样式 (样式也还没做完', desc: '可以放自己的歌单或者能唱的歌, 支持多种样式',
icon: MusicalNote, icon: MusicalNote,
}, },
{ {

View File

@@ -2,7 +2,7 @@
import { SaveAccountSettings, SaveEnableFunctions, useAccount } from '@/api/account' import { SaveAccountSettings, SaveEnableFunctions, useAccount } from '@/api/account'
import { NButton, NCard, NCheckbox, NCheckboxGroup, NDivider, NForm, NModal, NSelect, NSpace, NSpin, NSwitch, NTabPane, NTabs, SelectOption, useMessage } from 'naive-ui' import { NButton, NCard, NCheckbox, NCheckboxGroup, NDivider, NForm, NModal, NSelect, NSpace, NSpin, NSwitch, NTabPane, NTabs, SelectOption, useMessage } from 'naive-ui'
import { Ref, computed, h, onMounted, ref, defineAsyncComponent, onActivated } from 'vue' import { Ref, computed, h, onMounted, ref, defineAsyncComponent, onActivated } from 'vue'
import { FunctionTypes, ScheduleWeekInfo, SongFrom, SongLanguage, SongsInfo } from '@/api/api-models' import { FunctionTypes, ScheduleWeekInfo, SongFrom, SongLanguage, SongRequestOption, SongsInfo } from '@/api/api-models'
import { QueryPostAPI } from '@/api/query' import { QueryPostAPI } from '@/api/query'
import { ACCOUNT_API_URL, FETCH_API, IndexTemplateMap, ScheduleTemplateMap, SongListTemplateMap } from '@/data/constants' import { ACCOUNT_API_URL, FETCH_API, IndexTemplateMap, ScheduleTemplateMap, SongListTemplateMap } from '@/data/constants'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
@@ -100,6 +100,8 @@ const templates = {
key: 'song1', key: 'song1',
name: '歌曲1', name: '歌曲1',
author: ['作者1'], author: ['作者1'],
tags: ['标签1', '标签2'],
description: '这是一段描述',
url: 'https://example.com/song1.mp3', url: 'https://example.com/song1.mp3',
from: SongFrom.Custom, from: SongFrom.Custom,
language: [SongLanguage.Chinese], language: [SongLanguage.Chinese],
@@ -110,20 +112,29 @@ const templates = {
id: 2, id: 2,
key: 'song2', key: 'song2',
name: '歌曲2', name: '歌曲2',
author: ['作者2'], author: ['作者1'],
tags: ['标签1', '标签2'],
url: 'https://example.com/song2.mp3', url: 'https://example.com/song2.mp3',
from: SongFrom.Custom, from: SongFrom.Custom,
language: [SongLanguage.Chinese], language: [SongLanguage.Chinese],
createTime: Date.now(), createTime: Date.now(),
updateTime: Date.now(), updateTime: Date.now(),
description: '这还是一段描述',
options: {
scMinPrice: 30,
fanMedalMinLevel: 5,
needJianzhang: true,
} as SongRequestOption
}, },
{ {
id: 3, id: 3,
key: 'song3', key: 'song3',
name: '歌曲3', name: '歌曲3',
tags: ['标签3', '很长很长很长很长很长很长很长很长很长很长的标签'],
author: ['作者3'], author: ['作者3'],
url: 'https://example.com/song3.mp3', url: 'https://example.com/song3.mp3',
from: SongFrom.Custom, from: SongFrom.Custom,
description: '这是一段很长很长很长很长很长很长很长很长很长很长的描述',
language: [SongLanguage.Chinese], language: [SongLanguage.Chinese],
createTime: Date.now(), createTime: Date.now(),
updateTime: Date.now(), updateTime: Date.now(),
@@ -144,6 +155,7 @@ const templates = {
key: 'song5', key: 'song5',
name: '歌曲5', name: '歌曲5',
author: ['作者5'], author: ['作者5'],
tags: ['标签1', '标签5', '标签6', '标签7', '标签8', '标签9', '标签10'],
url: 'https://example.com/song5.mp3', url: 'https://example.com/song5.mp3',
from: SongFrom.Custom, from: SongFrom.Custom,
language: [SongLanguage.Chinese], language: [SongLanguage.Chinese],

View File

@@ -379,6 +379,7 @@ onMounted(async () => {
> >
刷新 刷新
</NButton> </NButton>
<NButton @click="$router.push({ name: 'manage-index', query: { tab: 'template', template: 'songlist' } })"> 修改模板 </NButton>
</NSpace> </NSpace>
<NDivider style="margin: 16px 0 16px 0" /> <NDivider style="margin: 16px 0 16px 0" />
<NModal v-model:show="showModal" style="max-width: 1000px" preset="card"> <NModal v-model:show="showModal" style="max-width: 1000px" preset="card">

View File

@@ -49,6 +49,9 @@ const accountInfo = useAccount()
<p> <p>
详见 详见
<NButton text tag="a" href="/" target="_blank" type="primary"> VTsuru.live </NButton> <NButton text tag="a" href="/" target="_blank" type="primary"> VTsuru.live </NButton>
<NDivider vertical />
<NButton text tag="a" href="/about" target="_blank" type="info"> 关于本站 </NButton>
</p> </p>
</NSpace> </NSpace>
</template> </template>

View File

@@ -7,7 +7,7 @@ import SongRequestOBS from '@/views/obs/SongRequestOBS.vue'
import { CloudAdd20Filled, Play24Filled } from '@vicons/fluent' import { CloudAdd20Filled, Play24Filled } from '@vicons/fluent'
import { useDebounceFn, useElementSize, useInfiniteScroll, useWindowSize } from '@vueuse/core' import { useDebounceFn, useElementSize, useInfiniteScroll, useWindowSize } from '@vueuse/core'
import { debounce, throttle } from 'lodash' import { debounce, throttle } from 'lodash'
import { NGridItem, NGrid, NCard, NSpace, NDivider, NButton, NCollapseTransition, NInput, NText, NEllipsis, NSelect, NEmpty, NIcon, NTag, NScrollbar, NTooltip } from 'naive-ui' import { NGridItem, NGrid, NCard, NSpace, NDivider, NButton, NCollapseTransition, NInput, NText, NEllipsis, NSelect, NEmpty, NIcon, NTag, NScrollbar, NTooltip, NPopover } from 'naive-ui'
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
const props = defineProps<{ const props = defineProps<{
@@ -127,7 +127,7 @@ function loadMore() {
</NEllipsis> </NEllipsis>
</NSpace> </NSpace>
</template> </template>
<NText depth="3"> <NSpace vertical>
<NSpace v-if="(item.author?.length ?? 0) > 0" :size="0"> <NSpace v-if="(item.author?.length ?? 0) > 0" :size="0">
<div v-for="(author, index) in item.author" v-bind:key="author"> <div v-for="(author, index) in item.author" v-bind:key="author">
<NButton size="small" text @click="selectedAuthor == author ? (selectedAuthor = undefined) : (selectedAuthor = author)"> <NButton size="small" text @click="selectedAuthor == author ? (selectedAuthor = undefined) : (selectedAuthor = author)">
@@ -138,8 +138,9 @@ function loadMore() {
</NButton> </NButton>
</div> </div>
</NSpace> </NSpace>
</NText> </NSpace>
<template #footer> <template #footer>
<NSpace vertical>
<NEllipsis> <NEllipsis>
{{ item.description }} {{ item.description }}
</NEllipsis> </NEllipsis>
@@ -152,9 +153,10 @@ function loadMore() {
<NTag v-if="item.options?.needJianzhang" size="small" :color="{ color: GetGuardColor(3) }"> 舰长 </NTag> <NTag v-if="item.options?.needJianzhang" size="small" :color="{ color: GetGuardColor(3) }"> 舰长 </NTag>
</NSpace> </NSpace>
</template> </template>
</NSpace>
</template> </template>
<template #action> <template #action>
<NSpace> <NSpace align="center" :wrap="false">
<NTooltip v-if="item.url"> <NTooltip v-if="item.url">
<template #trigger> <template #trigger>
<NButton size="small" @click="selectedSong = item" type="success" :loading="isLrcLoading == item.key"> <NButton size="small" @click="selectedSong = item" type="success" :loading="isLrcLoading == item.key">
@@ -176,7 +178,7 @@ function loadMore() {
isLoading = '' isLoading = ''
} }
" "
:type="!songRequestSettings.allowFromWeb || item.options ? 'warning' : 'info'" :type="songRequestSettings?.allowFromWeb == false || item.options ? 'warning' : 'info'"
:loading="isLoading == item.key" :loading="isLoading == item.key"
> >
<template #icon> <template #icon>
@@ -184,8 +186,46 @@ function loadMore() {
</template> </template>
</NButton> </NButton>
</template> </template>
{{ !songRequestSettings.allowFromWeb || item.options ? '点歌 | 用户或此歌曲不允许从网页点歌, 点击后将复制点歌内容到剪切板' : !accountInfo ? '点歌 | 你需要登录后才能点歌' : '点歌' }} {{
songRequestSettings?.allowFromWeb == false || item.options
? '点歌 | 用户或此歌曲不允许从网页点歌, 点击后将复制点歌内容到剪切板'
: !accountInfo
? '点歌 | 你需要登录后才能点歌'
: '点歌'
}}
</NTooltip> </NTooltip>
<NPopover v-if="(item.tags?.length ?? 0) > 3" trigger="hover">
<template #trigger>
<NButton size="small" secondary :type="item.tags?.includes(selectedTag) ? 'primary' : 'default'"> 标签 </NButton>
</template>
<NSpace :wrap="false">
<NButton
v-for="tag in item.tags"
size="tiny"
:key="tag"
@click="() => (selectedTag == tag ? (selectedTag = '') : (selectedTag = tag))"
:type="selectedTag == tag ? 'primary' : 'default'"
>
<NEllipsis style="max-width: 50px">
{{ tag }}
</NEllipsis>
</NButton>
</NSpace>
</NPopover>
<NSpace v-else :wrap="false">
<NButton
v-for="tag in item.tags"
size="tiny"
:key="tag"
@click="() => (selectedTag == tag ? (selectedTag = '') : (selectedTag = tag))"
:type="selectedTag == tag ? 'primary' : 'default'"
>
<NEllipsis style="max-width: 50px">
{{ tag }}
</NEllipsis>
</NButton>
</NSpace>
</NSpace> </NSpace>
</template> </template>
</NCard> </NCard>