add live

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="success" title="功能添加" content="直播记录" time="2023-12-3" />
             <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" />

src/views/IndexView.vue

@@ -13,6 +13,11 @@ const functions = [
     desc: '能够记录并查询上舰和SC记录',
     icon: VehicleShip24Filled,
   },
+  {
+    name: '直播场次记录',
+    desc: '记录每场直播的数据以及弹幕等内容',
+    icon: VehicleShip24Filled,
+  },
   {
     name: '日程表',
     desc: '提供多种样式的日程表',

src/views/ManageLayout.vue

@@ -22,7 +22,7 @@ import {
 } from 'naive-ui'
 import { h, onMounted, ref } from 'vue'
 import { BrowsersOutline, Chatbox, Moon, MusicalNote, Sunny, AnalyticsSharp } from '@vicons/ionicons5'
-import { CalendarClock24Filled, Chat24Filled, Info24Filled, Lottery24Filled, PeopleQueue24Filled, VehicleShip24Filled, VideoAdd20Filled } from '@vicons/fluent'
+import { CalendarClock24Filled, Chat24Filled, Info24Filled, Live24Filled, Lottery24Filled, PeopleQueue24Filled, VehicleShip24Filled, VideoAdd20Filled } from '@vicons/fluent'
 import { isLoadingAccount, useAccount } from '@/api/account'
 import RegisterAndLogin from '@/components/RegisterAndLogin.vue'
 import { RouterLink, useRoute } from 'vue-router'
@@ -86,6 +86,21 @@ const menuOptions = [
     disabled: accountInfo.value?.isEmailVerified == false,
     icon: renderIcon(VehicleShip24Filled),
   },
+  {
+    label: () =>
+      h(
+        RouterLink,
+        {
+          to: {
+            name: 'manage-live',
+          },
+        },
+        { default: () => '直播记录' }
+      ),
+    key: 'manage-live',
+    disabled: accountInfo.value?.isEmailVerified == false,
+    icon: renderIcon(Live24Filled),
+  },
   {
     label: () =>
       h(

src/views/manage/LiveDetailManage.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { useAccount } from '@/api/account'
+import { DanmakuModel, ResponseLiveInfoModel } from '@/api/api-models'
+import { QueryGetAPI } from '@/api/query'
+import DanmakuContainer from '@/components/DanmakuContainer.vue'
+import { LIVE_API_URL } from '@/data/constants'
+import { NButton, useMessage } from 'naive-ui'
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+interface ResponseLiveDetail {
+  live: ResponseLiveInfoModel
+  danmakus: DanmakuModel[]
+}
+
+const accountInfo = useAccount()
+const message = useMessage()
+const route = useRoute()
+const router = useRouter()
+
+const liveInfo = ref<ResponseLiveDetail | undefined>(await get())
+
+async function get() {
+  try {
+    const data = await QueryGetAPI<ResponseLiveDetail>(LIVE_API_URL + 'get', {
+      id: route.params.id,
+      useEmoji: true
+    })
+    if (data.code == 200) {
+      return data.data
+    } else {
+      message.error('无法获取数据: ' + data.message)
+      return undefined
+    }
+  } catch (err) {
+    console.error(err)
+    message.error('无法获取数据')
+  }
+  return undefined
+}
+</script>
+
+<template>
+  <NButton @click="router.go(-1)" text>
+    {{ '< 返回' }}
+  </NButton>
+  <DanmakuContainer
+    v-if="liveInfo"
+    ref="danmakuContainerRef"
+    :current-live="liveInfo.live"
+    :current-danmakus="liveInfo.danmakus"
+    :height="750"
+    show-rank
+    show-liver
+    show-live-info
+    show-tools
+    show-name
+    to="userDanmakus"
+    :item-range="100"
+    :item-height="25"
+  />
+</template>

src/views/manage/LiveManager.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { useAccount } from '@/api/account'
+import { ResponseLiveInfoModel } from '@/api/api-models'
+import { QueryGetAPI } from '@/api/query'
+import LiveInfoContainer from '@/components/LiveInfoContainer.vue'
+import { LIVE_API_URL } from '@/data/constants'
+import { List } from 'linqts'
+import { NButton, NDivider, NList, NListItem, NAlert, NPagination, NPopover, NSpace, NStatistic, NTag, NTime, NTooltip, useMessage } from 'naive-ui'
+import { ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const accountInfo = useAccount()
+const message = useMessage()
+const route = useRoute()
+const router = useRouter()
+
+const lives = ref<ResponseLiveInfoModel[]>(await getAll())
+const page = ref(1)
+const pageSize = ref(10)
+const defaultDanmakusCount = ref(0)
+
+async function getAll() {
+  try {
+    const data = await QueryGetAPI<ResponseLiveInfoModel[]>(LIVE_API_URL + 'get-all')
+    if (data.code == 200) {
+      return data.data
+    } else {
+      message.error('无法获取数据: ' + data.message)
+      return []
+    }
+  } catch (err) {
+    console.error(err)
+    message.error('无法获取数据')
+  }
+  return []
+}
+
+function OnClickCover(live: ResponseLiveInfoModel) {
+  router.push({
+    name: 'manage-liveDetail',
+    params: { id: live.liveId },
+  })
+}
+</script>
+
+<template>
+  <NSpace vertical>
+    <NAlert type="warning"> 测试功能, 尚不稳定 </NAlert>
+    <NAlert type="info">
+      当前本站正在测试直接从服务端记录并储存数据, 不过并不清楚B站的风控策略, 此功能不一定会长期有效
+      <br />
+      在我们被限制连接之前无需部署 VtsuruEventFetcher 即可使用相关功能 (如记录上舰和SC以及直播记录) 😊
+    </NAlert>
+  </NSpace>
+  <br />
+  <NAlert v-if="accountInfo?.isBiliVerified != true" type="info"> 尚未进行Bilibili认证 </NAlert>
+  <template v-else>
+    <NSpace vertical justify="center" align="center">
+      <NPagination v-model:page="page" show-quick-jumper show-size-picker :page-sizes="[10, 20, 30, 40]" :item-count="lives.length" />
+    </NSpace>
+    <NDivider />
+    <NList bordered hoverable clickable>
+      <NListItem @click="OnClickCover(live)" v-for="live in lives" v-bind:key="live.liveId">
+        <LiveInfoContainer :live="live" />
+      </NListItem>
+    </NList>
+  </template>
+</template>

src/views/open_live/MusicRequest.vue

@@ -335,6 +335,7 @@ async function updateSongStatus(song: SongRequestInfo, status: SongRequestStatus
 }
 
 function onGetDanmaku(danmaku: DanmakuInfo) {
+  console.log(danmaku)
   if (checkMessage(danmaku.msg)) {
     addSong({
       msg: danmaku.msg,