update style

src/views/AboutView.vue

@@ -33,6 +33,7 @@ import { NButton, NCard, NDivider, NLayoutContent, NSpace, NText, NTimeline, NTi
           </NSpace>
           <NDivider title-placement="left"> 更新日志 </NDivider>
           <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-20" />
             <NTimelineItem type="success" title="上架幻星平台" content="如题" time="2023-11-4" />

src/views/IndexView.vue

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

src/views/manage/SettingsManageView.vue

@@ -2,7 +2,7 @@
 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 { 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 { ACCOUNT_API_URL, FETCH_API, IndexTemplateMap, ScheduleTemplateMap, SongListTemplateMap } from '@/data/constants'
 import { useRoute } from 'vue-router'
@@ -100,6 +100,8 @@ const templates = {
         key: 'song1',
         name: '歌曲1',
         author: ['作者1'],
+        tags: ['标签1', '标签2'],
+        description: '这是一段描述',
         url: 'https://example.com/song1.mp3',
         from: SongFrom.Custom,
         language: [SongLanguage.Chinese],
@@ -110,20 +112,29 @@ const templates = {
         id: 2,
         key: 'song2',
         name: '歌曲2',
-        author: ['作者2'],
+        author: ['作者1'],
+        tags: ['标签1', '标签2'],
         url: 'https://example.com/song2.mp3',
         from: SongFrom.Custom,
         language: [SongLanguage.Chinese],
         createTime: Date.now(),
         updateTime: Date.now(),
+        description: '这还是一段描述',
+        options: {
+          scMinPrice: 30,
+          fanMedalMinLevel: 5,
+          needJianzhang: true,
+        } as SongRequestOption
       },
       {
         id: 3,
         key: 'song3',
         name: '歌曲3',
+        tags: ['标签3', '很长很长很长很长很长很长很长很长很长很长的标签'],
         author: ['作者3'],
         url: 'https://example.com/song3.mp3',
         from: SongFrom.Custom,
+        description: '这是一段很长很长很长很长很长很长很长很长很长很长的描述',
         language: [SongLanguage.Chinese],
         createTime: Date.now(),
         updateTime: Date.now(),
@@ -144,6 +155,7 @@ const templates = {
         key: 'song5',
         name: '歌曲5',
         author: ['作者5'],
+        tags: ['标签1', '标签5', '标签6', '标签7', '标签8', '标签9', '标签10'],
         url: 'https://example.com/song5.mp3',
         from: SongFrom.Custom,
         language: [SongLanguage.Chinese],

src/views/manage/SongListManageView.vue

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

src/views/open_live/OpenLiveIndex.vue

@@ -49,6 +49,9 @@ const accountInfo = useAccount()
     <p>
       详见
       <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>
   </NSpace>
 </template>

src/views/view/songListTemplate/SimpleSongListTemplate.vue

@@ -7,7 +7,7 @@ import SongRequestOBS from '@/views/obs/SongRequestOBS.vue'
 import { CloudAdd20Filled, Play24Filled } from '@vicons/fluent'
 import { useDebounceFn, useElementSize, useInfiniteScroll, useWindowSize } from '@vueuse/core'
 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'
 
 const props = defineProps<{
@@ -127,7 +127,7 @@ function loadMore() {
                 </NEllipsis>
               </NSpace>
             </template>
-            <NText depth="3">
+            <NSpace vertical>
               <NSpace v-if="(item.author?.length ?? 0) > 0" :size="0">
                 <div v-for="(author, index) in item.author" v-bind:key="author">
                   <NButton size="small" text @click="selectedAuthor == author ? (selectedAuthor = undefined) : (selectedAuthor = author)">
@@ -138,23 +138,25 @@ function loadMore() {
                   </NButton>
                 </div>
               </NSpace>
-            </NText>
+            </NSpace>
             <template #footer>
-              <NEllipsis>
-                {{ item.description }}
-              </NEllipsis>
-              <template v-if="item.options">
-                <NSpace>
-                  <NTag v-if="item.options?.scMinPrice" size="small" type="error" :bordered="false"> SC | {{ item.options?.scMinPrice }}</NTag>
-                  <NTag v-if="item.options?.fanMedalMinLevel" size="small" type="info" :bordered="false"> 粉丝牌 | {{ item.options?.fanMedalMinLevel }}</NTag>
-                  <NTag v-if="item.options?.needZongdu" size="small" :color="{ color: GetGuardColor(1) }"> 总督 </NTag>
-                  <NTag v-if="item.options?.needTidu" size="small" :color="{ color: GetGuardColor(2) }"> 提督 </NTag>
-                  <NTag v-if="item.options?.needJianzhang" size="small" :color="{ color: GetGuardColor(3) }"> 舰长 </NTag>
-                </NSpace>
-              </template>
+              <NSpace vertical>
+                <NEllipsis>
+                  {{ item.description }}
+                </NEllipsis>
+                <template v-if="item.options">
+                  <NSpace>
+                    <NTag v-if="item.options?.scMinPrice" size="small" type="error" :bordered="false"> SC | {{ item.options?.scMinPrice }}</NTag>
+                    <NTag v-if="item.options?.fanMedalMinLevel" size="small" type="info" :bordered="false"> 粉丝牌 | {{ item.options?.fanMedalMinLevel }}</NTag>
+                    <NTag v-if="item.options?.needZongdu" size="small" :color="{ color: GetGuardColor(1) }"> 总督 </NTag>
+                    <NTag v-if="item.options?.needTidu" size="small" :color="{ color: GetGuardColor(2) }"> 提督 </NTag>
+                    <NTag v-if="item.options?.needJianzhang" size="small" :color="{ color: GetGuardColor(3) }"> 舰长 </NTag>
+                  </NSpace>
+                </template>
+              </NSpace>
             </template>
             <template #action>
-              <NSpace>
+              <NSpace align="center" :wrap="false">
                 <NTooltip v-if="item.url">
                   <template #trigger>
                     <NButton size="small" @click="selectedSong = item" type="success" :loading="isLrcLoading == item.key">
@@ -176,7 +178,7 @@ function loadMore() {
                           isLoading = ''
                         }
                       "
-                      :type="!songRequestSettings.allowFromWeb || item.options ? 'warning' : 'info'"
+                      :type="songRequestSettings?.allowFromWeb == false || item.options ? 'warning' : 'info'"
                       :loading="isLoading == item.key"
                     >
                       <template #icon>
@@ -184,8 +186,46 @@ function loadMore() {
                       </template>
                     </NButton>
                   </template>
-                  {{ !songRequestSettings.allowFromWeb || item.options ? '点歌 | 用户或此歌曲不允许从网页点歌, 点击后将复制点歌内容到剪切板' : !accountInfo ? '点歌 | 你需要登录后才能点歌' : '点歌' }}
+                  {{
+                    songRequestSettings?.allowFromWeb == false || item.options
+                      ? '点歌 | 用户或此歌曲不允许从网页点歌, 点击后将复制点歌内容到剪切板'
+                      : !accountInfo
+                      ? '点歌 | 你需要登录后才能点歌'
+                      : '点歌'
+                  }}
                 </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>
             </template>
           </NCard>