add video-collect display, improve index layout

src/api/account.ts

@@ -63,6 +63,38 @@ export async function SaveAccountSettings() {
 export async function SaveEnableFunctions(functions: FunctionTypes[]) {
   return await QueryPostAPI(ACCOUNT_API_URL + 'update-enable-functions', functions)
 }
+export async function UpdateFunctionEnable(func: FunctionTypes) {
+  if (ACCOUNT.value) {
+    const oldValue = JSON.parse(JSON.stringify(ACCOUNT.value.settings.enableFunctions))
+    if (ACCOUNT.value?.settings.enableFunctions.includes(func)) {
+      ACCOUNT.value.settings.enableFunctions = ACCOUNT.value.settings.enableFunctions.filter(
+        (f) => f != func,
+      )
+    } else {
+      ACCOUNT.value.settings.enableFunctions.push(func)
+    }
+    await SaveEnableFunctions(ACCOUNT.value?.settings.enableFunctions)
+      .then((data) => {
+        if (data.code == 200) {
+          message.success(
+            `已${ACCOUNT.value?.settings.enableFunctions.includes(func) ? '启用' : '禁用'}`,
+          )
+        } else {
+          if (ACCOUNT.value) {
+            ACCOUNT.value.settings.enableFunctions = oldValue
+          }
+          message.error(
+            `${ACCOUNT.value?.settings.enableFunctions.includes(func) ? '启用' : '禁用'}失败: ${data.message}`,
+          )
+        }
+      })
+      .catch((err) => {
+        message.error(
+          `${ACCOUNT.value?.settings.enableFunctions.includes(func) ? '启用' : '禁用'}失败: ${err}`,
+        )
+      })
+  }
+}
 export function useAccount() {
   return ACCOUNT
 }

src/api/api-models.ts

@@ -234,6 +234,7 @@ export enum FunctionTypes {
   SongRequest,
   Queue,
   Point,
+  VideoCollect
 }
 export interface SongAuthorInfo {
   name: string

src/components/VideoCollectInfoCard.vue

@@ -19,19 +19,25 @@ import {
 const props = defineProps<{
   item: VideoCollectTable
   canClick?: boolean
+  from: 'user' | 'owner'
+  bordered?: boolean
 }>()
 const renderCountdown: CountdownProps['render'] = (info: { hours: number; minutes: number; seconds: number }) => {
   return `${String(info.hours).padStart(2, '0')}时 ${String(info.minutes).padStart(2, '0')}分 ${String(info.seconds).padStart(2, '0')}秒`
 }
 function onClick() {
   if (props.canClick == true) {
-    router.push({ name: 'manage-videoCollect-Detail', params: { id: props.item.id } })
+    if (props.from == 'user') {
+      window.open('https://vtsuru.live/video-collect/' + props.item.shortId, '_blank')
+    } else {
+      router.push({ name: 'manage-videoCollect-Detail', params: { id: props.item.id } })
+    }
   }
 }
 </script>
 
 <template>
-  <NCard size="small" style="width: 100%; max-width: 70vw; cursor: pointer" @click="onClick" embedded hoverable>
+  <NCard size="small" style="width: 100%; max-width: 70vw; cursor: pointer" @click="onClick" embedded hoverable :bordered="bordered">
     <template #header>
       <NSpace :size="5">
         <NTag v-if="item.isFinish" size="small"> 已结束 </NTag>

src/router/user.ts

@@ -55,4 +55,13 @@ export default [
       keepAlive: true,
     },
   },
+  {
+    path: 'video-collect',
+    name: 'user-video-collect',
+    component: () => import('@/views/view/VideoCollectView.vue'),
+    meta: {
+      title: '视频征集',
+      keepAlive: true,
+    },
+  },
 ]

src/views/IndexView.vue

@@ -120,8 +120,21 @@ const iconColor = 'white'
           </NGradientText>
           <NText style="font-size: 1.5em; font-weight: 500; color: white"> 一个给主播提供便利功能的网站 😊 </NText>
           <span></span>
-          <NSpace justify="center">
-            <NButton type="primary" size="large" @click="$router.push({ name: 'manage-index' })"> 开始使用 </NButton>
+          <NSpace justify="center" align="center">
+            <NSpace align="center">
+              <NSpace vertical justify="end">
+                <NText style="font-size: medium" italic> 我是主播 </NText>
+                <NButton type="primary" size="small" @click="$router.push({ name: 'manage-index' })">
+                  开始使用
+                </NButton>
+              </NSpace>
+              <NSpace vertical>
+                <NText style="font-size: medium" italic> 我是观众 </NText>
+                <NButton type="primary" size="small" secondary @click="$router.push({ name: 'bili-user' })" bordered>
+                  用户主页
+                </NButton>
+              </NSpace>
+            </NSpace>
             <NButton size="large" @click="$router.push('/user/Megghy')"> 展示 </NButton>
             <NButton
               size="large"

src/views/VideoCollectPublic.vue

@@ -92,7 +92,7 @@ onUnmounted(() => {
             <NText depth="3" style="font-size: 14px">{{ table.owner?.name }}</NText>
           </NButton>
         </template>
-        <VideoCollectInfoCard :item="table" />
+        <VideoCollectInfoCard :item="table" :canClick="false" from="user" />
         <NDivider />
         <NAlert v-if="table.isFinish" type="error" title="该征集表已截止" />
         <NSpace v-else vertical>

src/views/ViewerLayout.vue

@@ -7,7 +7,7 @@ import { useUser } from '@/api/user'
 import RegisterAndLogin from '@/components/RegisterAndLogin.vue'
 import { FETCH_API } from '@/data/constants'
 import { useAuthStore } from '@/store/useAuthStore'
-import { BookCoins20Filled, CalendarClock24Filled } from '@vicons/fluent'
+import { BookCoins20Filled, CalendarClock24Filled, VideoAdd20Filled } from '@vicons/fluent'
 import { Chatbox, Home, Moon, MusicalNote, Sunny } from '@vicons/ionicons5'
 import { useElementSize, useStorage } from '@vueuse/core'
 import {
@@ -145,6 +145,21 @@ onMounted(async () => {
       key: 'user-questionBox',
       icon: renderIcon(Chatbox),
     },
+    {
+      label: () =>
+        h(
+          RouterLink,
+          {
+            to: {
+              name: 'user-video-collect',
+            },
+          },
+          { default: () => '视频征集' },
+        ),
+      show: (userInfo.value?.extra?.enableFunctions.indexOf(FunctionTypes.VideoCollect) ?? -1) > -1,
+      key: 'user-video-collect',
+      icon: renderIcon(VideoAdd20Filled),
+    },
     {
       label: () =>
         h(

src/views/manage/VideoCollectDetailView.vue

@@ -387,7 +387,7 @@ onActivated(async () => {
       </NPopconfirm>
     </template>
   </NSpace>
-  <VideoCollectInfoCard :item="videoDetail.table" style="width: 100%; max-width: 90vw">
+  <VideoCollectInfoCard :item="videoDetail.table" style="width: 100%; max-width: 90vw" from="owner">
     <template v-if="width > 1000" #header-extra>
       <NSpace>
         <NButton type="success" size="small" @click="shareModalVisiable = true"> 分享 </NButton>

src/views/manage/VideoCollectManageView.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-import { useAccount } from '@/api/account'
-import { VideoCollectTable } from '@/api/api-models'
+import { UpdateFunctionEnable, useAccount } from '@/api/account'
+import { FunctionTypes, VideoCollectTable } from '@/api/api-models'
 import { QueryGetAPI, QueryPostAPI } from '@/api/query'
 import VideoCollectInfoCard from '@/components/VideoCollectInfoCard.vue'
 import { VIDEO_COLLECT_API_URL } from '@/data/constants'
 import {
   FormRules,
+  NAlert,
   NButton,
   NDatePicker,
   NDivider,
@@ -19,6 +20,7 @@ import {
   NModal,
   NSpace,
   NSpin,
+  NSwitch,
   NText,
   useMessage,
 } from 'naive-ui'
@@ -125,6 +127,14 @@ function createTable() {
 </script>
 
 <template>
+  <NAlert type="info" v-if="accountInfo.id">
+    在个人主页展示进行中的征集表
+    <NSwitch
+      :value="accountInfo.settings.enableFunctions.includes(FunctionTypes.VideoCollect)"
+      @update:value="UpdateFunctionEnable(FunctionTypes.VideoCollect)"
+    />
+  </NAlert>
+  <NDivider />
   <NSpace>
     <NButton @click="createModalVisible = true" type="primary"> 新建征集表 </NButton>
   </NSpace>
@@ -132,9 +142,9 @@ function createTable() {
   <NSpin :show="isLoading">
     <NSpace justify="center">
       <NEmpty v-if="videoTables.length == 0" />
-      <NList v-else>
-        <NListItem v-for="item in videoTables" :key="item.id">
-          <VideoCollectInfoCard :item="item" canClick style="width: 500px; max-width: 70vw" />
+      <NList v-else bordered>
+        <NListItem v-for="item in videoTables" :key="item.id" style="padding: 0">
+          <VideoCollectInfoCard :item="item" canClick style="width: 500px; max-width: 70vw" from="owner" />
         </NListItem>
       </NList>
     </NSpace>

src/views/open_live/LiveRequest.vue

@@ -180,7 +180,7 @@ const filterSongNameContains = ref(false)
 const filterName = ref('')
 const filterNameContains = ref(false)
 
-const defaultPrefix = useStorage('Settings.SongRequest.DefaultPrefix', '点歌')
+const defaultPrefix = useStorage('Settings.SongRequest.DefaultPrefix', '点播')
 const configCanEdit = computed(() => {
   return accountInfo.value != null && accountInfo.value != undefined
 })

src/views/view/VideoCollectView.vue

@@ -1,15 +1,53 @@
 <script lang="ts" setup>
-import { UserInfo } from '@/api/api-models'
+import { UserInfo, VideoCollectTable } from '@/api/api-models'
+import { QueryGetAPI } from '@/api/query'
+import VideoCollectInfoCard from '@/components/VideoCollectInfoCard.vue'
+import { VIDEO_COLLECT_API_URL } from '@/data/constants'
+import { NEmpty, NFlex, NList, NListItem, NSpin, useMessage } from 'naive-ui'
+import { ref } from 'vue'
 
 const props = defineProps<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   biliInfo: any | undefined
-  userInfo: UserInfo | undefined
+  userInfo: UserInfo
   template?: string | undefined
 }>()
 
+const isLoading = ref(true)
+const message = useMessage()
+
+const videoTables = ref<VideoCollectTable[]>(await get())
+async function get() {
+  try {
+    isLoading.value = true
+    const data = await QueryGetAPI<VideoCollectTable[]>(VIDEO_COLLECT_API_URL + 'get-active', {
+      id: props.userInfo.id,
+    })
+    if (data.code == 200) {
+      //videoTables.value = data.data
+      return data.data
+    } else {
+      message.error('获取失败: ' + data.message)
+      return []
+    }
+  } catch (err) {
+    message.error('获取失败')
+    return []
+  } finally {
+    isLoading.value = false
+  }
+}
 </script>
 
 <template>
-  1
+  <NSpin :show="isLoading">
+    <NFlex justify="center">
+      <NEmpty v-if="videoTables.length == 0" description="没有正在进行的征集表" />
+      <NList v-else>
+        <NListItem v-for="item in videoTables" :key="item.id">
+          <VideoCollectInfoCard :item="item" canClick style="width: 500px; max-width: 70vw" from="user" />
+        </NListItem>
+      </NList>
+    </NFlex>
+  </NSpin>
 </template>