From f7d3a2128a9b6237fee7880e848467b260022d32 Mon Sep 17 00:00:00 2001
From: Megghy <megghy@qq.com>
Date: Sun, 3 Dec 2023 15:14:02 +0800
Subject: [PATCH] add live

---
 package.json                          |   2 +
 src/api/api-models.ts                 |  27 ++
 src/components/DanmakuContainer.vue   | 549 ++++++++++++++++++++++++++
 src/components/DanmakuItem.vue        | 169 ++++++++
 src/components/LiveInfoContainer.vue  | 202 ++++++++++
 src/components/SimpleVirtualList.vue  |  84 ++++
 src/data/DanmakuExport.ts             | 117 ++++++
 src/data/constants.ts                 |   1 +
 src/router/index.ts                   |  18 +
 src/views/AboutView.vue               |   1 +
 src/views/IndexView.vue               |   5 +
 src/views/ManageLayout.vue            |  17 +-
 src/views/manage/LiveDetailManage.vue |  62 +++
 src/views/manage/LiveManager.vue      |  68 ++++
 src/views/open_live/MusicRequest.vue  |   1 +
 yarn.lock                             |  12 +
 16 files changed, 1334 insertions(+), 1 deletion(-)
 create mode 100644 src/components/DanmakuContainer.vue
 create mode 100644 src/components/DanmakuItem.vue
 create mode 100644 src/components/LiveInfoContainer.vue
 create mode 100644 src/components/SimpleVirtualList.vue
 create mode 100644 src/data/DanmakuExport.ts
 create mode 100644 src/views/manage/LiveDetailManage.vue
 create mode 100644 src/views/manage/LiveManager.vue

diff --git a/package.json b/package.json
index fba9dea..41936dc 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "core-js": "^3.8.3",
     "date-fns": "^2.30.0",
     "echarts": "^5.4.3",
+    "fast-xml-parser": "^4.3.2",
     "file-saver": "^2.0.5",
     "grapheme-splitter": "^1.0.4",
     "html2canvas": "^1.4.1",
@@ -35,6 +36,7 @@
     "vue-turnstile": "^1.0.0",
     "vue3-aplayer": "^1.7.3",
     "vue3-marquee": "^4.1.0",
+    "vueuc": "^0.4.51",
     "vuex": "^4.0.0",
     "worker-timers": "^7.0.78"
   },
diff --git a/src/api/api-models.ts b/src/api/api-models.ts
index 598897d..44f612b 100644
--- a/src/api/api-models.ts
+++ b/src/api/api-models.ts
@@ -410,3 +410,30 @@ export interface ResponseQueueModel {
   finishAt?: number | null
   isInLocal?: boolean
 }
+export interface ResponseLiveInfoModel {
+  liveId: string
+  isFinish: boolean
+  parentArea: string
+  area: string
+  coverUrl: string
+  danmakusCount: number
+  startAt: number
+  stopAt: number | null
+  title: string
+  totalIncome: number
+  totalIncomeWithGuard: number
+  likeCount: number
+  paymentCount: number
+  interactionCount: number
+}
+export interface DanmakuModel {
+  id: string
+  uId: number
+  uName: string
+  type: EventDataTypes // Assuming EventDataTypes is an enum or type available in your TypeScript codebase
+  time: number
+  msg: string | null
+  price: number | null
+  isEmoji: boolean
+  num: number
+}
diff --git a/src/components/DanmakuContainer.vue b/src/components/DanmakuContainer.vue
new file mode 100644
index 0000000..252cef5
--- /dev/null
+++ b/src/components/DanmakuContainer.vue
@@ -0,0 +1,549 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<script setup lang="ts">
+import { onMounted, h, computed, nextTick, watch, ref } from 'vue'
+import {
+  NSkeleton,
+  NCard,
+  NDivider,
+  NCheckbox,
+  NCheckboxGroup,
+  NModal,
+  NButton,
+  NPopover,
+  NIcon,
+  NInput,
+  NSpace,
+  NSwitch,
+  NInputNumber,
+  NCollapseTransition,
+  NTag,
+  NSpin,
+  NRadioGroup,
+  NList,
+  NListItem,
+  NAvatar,
+  NTooltip,
+  NRadioButton,
+  NCollapse,
+  NCollapseItem,
+} from 'naive-ui'
+import router from '@/router'
+import { Search24Filled, Money20Regular, Wrench24Filled, Money24Regular, Info12Filled, Home24Filled } from '@vicons/fluent'
+import { saveAs } from 'file-saver'
+import { useLocalStorage, useWindowSize, useDebounceFn } from '@vueuse/core'
+import { ResponseLiveInfoModel, DanmakuModel, EventDataTypes } from '@/api/api-models'
+import { List } from 'linqts'
+import { useAccount } from '@/api/account'
+import LiveInfoContainer from './LiveInfoContainer.vue'
+import { GetString } from '@/data/DanmakuExport'
+import SimpleVirtualList from './SimpleVirtualList.vue'
+import DanmakuItem from '@/components/DanmakuItem.vue'
+
+enum RankType {
+  Danmaku,
+  Paid,
+}
+interface RankInfo {
+  uId: number
+  uName: string
+  Paid: number
+  Danmakus: number
+  Index: number
+}
+
+const accountInfo = useAccount()
+
+const debouncedFn = useDebounceFn(() => {
+  UpdateDanmakus()
+}, 750)
+let isLoading = ref(false)
+let showModal = ref(false)
+let showExportModal = ref(false)
+let userDanmakus = ref<DanmakuModel[] | undefined>()
+let hideAvatar = useLocalStorage('Setting.HideAvatar', false)
+const { width } = useWindowSize()
+
+interface Props {
+  currentLive: ResponseLiveInfoModel
+  currentDanmakus: DanmakuModel[]
+  defaultFilterSelected?: EventDataTypes[]
+  height?: number
+  itemHeight?: number
+  showLiver?: boolean
+  showLiveInfo?: boolean
+  showName?: boolean
+  //to?: ClickNameTo;
+  isInModal?: boolean
+  showRank?: boolean
+  showBorder?: boolean
+  showTools?: boolean
+  showStatistic?: boolean
+  animeNum?: boolean
+  bordered?: boolean
+  toolsVisiable?: boolean
+  itemRange?: number
+  to: 'userDanmakus' | 'space'
+}
+
+const {
+  currentDanmakus,
+  currentLive,
+  defaultFilterSelected = [EventDataTypes.Gift, EventDataTypes.Guard, EventDataTypes.Message, EventDataTypes.SC],
+  height = 1000,
+  itemHeight = 30,
+  showLiveInfo = true,
+  showLiver = false,
+  //to = ClickNameTo.UserHistory,
+  isInModal = false,
+  showName = true,
+  showBorder = true,
+  showTools = true,
+  showStatistic = true,
+  animeNum = true,
+  showRank = false,
+  bordered = true,
+  toolsVisiable = true,
+  itemRange = 30,
+  to = 'space',
+} = defineProps<Props>()
+const emit = defineEmits<{
+  (e: 'onClickName', uId: number): boolean
+}>()
+defineExpose({
+  InsertDanmakus,
+})
+let danmakus = ref<DanmakuModel[]>([])
+watch(
+  () => showTools,
+  (newV, oldV) => {
+    innerShowTools.value = newV
+  }
+)
+const danmakuRef = computed(() => {
+  //不知道为啥不能直接watch
+  return currentDanmakus
+})
+watch(danmakuRef, (newValue) => {
+  danmakus.value = GetFilteredDanmakus(newValue)
+})
+
+let keyword = ref('')
+let enableRegex = ref(false)
+let deselect = ref(false)
+let price = ref<number | undefined>()
+let filterSelected = ref(defaultFilterSelected)
+let innerShowTools = ref(showTools)
+let modalShowTools = ref(false)
+let orderDecreasing = ref(false)
+let orderByPrice = ref(false)
+let processing = ref(false)
+let isRanking = ref(false)
+let rankInfo = ref<RankInfo[]>([])
+let currentRankInfo = ref<RankInfo[]>([])
+let rankType = ref(RankType.Danmaku)
+let hideEmoji = ref(false)
+
+let exportType = ref<'json' | 'xml' | 'csv'>('json')
+let onlyExportFilteredDanmakus = ref(false)
+let isExporting = ref(false)
+
+function OnNameClick(uId: number) {
+  if (isInModal) {
+    emit('onClickName', uId)
+    return
+  }
+  switch (to) {
+    case 'userDanmakus': {
+      userDanmakus.value = currentDanmakus.filter((d) => d.uId == uId)
+      showModal.value = true
+      break
+    }
+    case 'space': {
+      showModal.value = false
+      nextTick(() => {
+        window.open('https://space.bilibili.com/' + uId, '_blank')
+      })
+      break
+    }
+  }
+}
+function ToUserSpace(uId: number) {
+  showModal.value = false
+  nextTick(() => {
+    router.push({
+      name: 'user',
+      params: {
+        uid: uId,
+      },
+    })
+  })
+}
+function ChangePrice(p: number) {
+  if (p == price.value) price.value = undefined
+  else {
+    price.value = p
+  }
+  UpdateDanmakus()
+}
+function UpdateDanmakus() {
+  processing.value = true
+  nextTick(() => {
+    setTimeout(() => {
+      canInsert = false
+      danmakus.value = GetFilteredDanmakus()
+      setTimeout(() => {
+        canInsert = true
+      }, 1000) //立马就能的话会莫名key重复
+      processing.value = false
+    }, 50)
+  })
+}
+function OnRank(isRank: boolean) {
+  if (isRank) OnRankDirect(rankType.value, rankInfo.value.length == 0 && danmakus.value.length > 0)
+}
+function OnRankDirect(type: RankType, refresh: boolean, orderByDescending = true) {
+  if (refresh) {
+    var rank = {} as {
+      [uId: number]: RankInfo
+    }
+    currentDanmakus.forEach((danmaku) => {
+      if (danmaku.uId in rank) {
+        if (danmaku.type == EventDataTypes.Message) rank[danmaku.uId].Danmakus++
+        rank[danmaku.uId].Paid += danmaku.price ?? 0
+      } else {
+        rank[danmaku.uId] = {
+          uId: danmaku.uId,
+          uName: danmaku.uName,
+          Paid: danmaku.price ?? 0,
+          Danmakus: danmaku.type == EventDataTypes.Message ? 1 : 0,
+          Index: 0,
+        }
+      }
+    })
+    rankInfo.value = new List(Object.entries(rank)).Select(([uId, user]) => user).ToArray()
+  }
+  var ienum = {} as List<RankInfo>
+  switch (rankType.value) {
+    case RankType.Danmaku: {
+      ienum = new List(rankInfo.value).OrderByDescending((user) => user.Danmakus)
+      break
+    }
+    case RankType.Paid: {
+      ienum = new List(rankInfo.value).Where((user) => (user?.Paid ?? 0) > 0).OrderByDescending((user) => user.Paid)
+      break
+    }
+  }
+  if (!orderByDescending) ienum = ienum.Reverse()
+  currentRankInfo.value = ienum.Take(100).ToArray()
+  var index = 1
+  currentRankInfo.value.forEach((info) => {
+    info.Index = index
+    index++
+  })
+}
+function GetRankIndexColor(index: number) {
+  switch (index) {
+    case 1:
+      return `background:#fbda41;color:rgb(133,133,133);font-size:16px;`
+    case 2:
+      return `background:#c4d7d6;color:rgb(133,133,133);font-size:16px;`
+    case 3:
+      return `background:#f0d695;color:rgb(133,133,133);font-size:16px;`
+    default:
+      return 'background:#afafaf;'
+  }
+}
+function Export() {
+  isExporting.value = true
+  saveAs(
+    new Blob([GetString(accountInfo.value, currentLive, onlyExportFilteredDanmakus.value ? danmakus.value : currentDanmakus, exportType.value)], { type: 'text/plain;charset=utf-8' }),
+    `${Date.now()}_${currentLive.startAt}_${currentLive.title.replace('_', '-')}_${accountInfo.value?.name}.${exportType.value}`
+  )
+  isExporting.value = false
+}
+let canInsert = false
+function InsertDanmakus(targetDanmakus: DanmakuModel[]) {
+  if (processing.value || !canInsert) {
+    return
+  }
+  var data = GetFilteredDanmakus(targetDanmakus)
+  if (orderDecreasing.value) {
+    danmakus.value.unshift(...data)
+    currentDanmakus.unshift(...data)
+  } else {
+    danmakus.value.push(...data)
+    currentDanmakus.push(...data)
+  }
+}
+function GetFilteredDanmakus(targetDanmakus?: DanmakuModel[]) {
+  if (!targetDanmakus) targetDanmakus = currentDanmakus
+  var tempDanmakus = targetDanmakus.filter((d) => filterSelected.value.includes(d.type))
+  if (hideEmoji.value) {
+    tempDanmakus = tempDanmakus.filter((d) => d.type != EventDataTypes.Message || !d.isEmoji)
+  }
+  if (orderByPrice.value) {
+    tempDanmakus = tempDanmakus.filter((d) => d.type != EventDataTypes.Message).sort((a, b) => (a.price ?? 0) - (b.price ?? 0))
+  } else {
+    tempDanmakus = tempDanmakus.sort((a, b) => a.time - b.time)
+  }
+
+  if (keyword.value && keyword.value != '') {
+    tempDanmakus = tempDanmakus.filter((d) => (deselect.value ? !CheckKeyword(d) : CheckKeyword(d)))
+  }
+  function CheckKeyword(d: DanmakuModel) {
+    if (d.uId.toString() == keyword.value || d.uName == keyword.value) {
+      return true
+    }
+    return enableRegex.value ? (d.msg?.match(keyword.value) ? true : false) : d.msg?.toLowerCase().includes(keyword.value.toLowerCase()) == true
+  }
+  if (price.value && price.value > 0) {
+    tempDanmakus = tempDanmakus.filter((d) => (d.price ?? 0) >= (price.value ?? 0))
+  }
+  if (orderDecreasing.value) tempDanmakus = tempDanmakus.reverse()
+  var index = 0
+  tempDanmakus.forEach((d) => {
+    d.id = `${d.uId}_${d.time}_${index}`
+    index++
+  })
+  return tempDanmakus
+}
+function RoundNumber(num: number) {
+  if (Number.isInteger(num)) {
+    return num
+  } else {
+    return num.toFixed(1)
+  }
+}
+
+onMounted(() => {
+  danmakus.value = currentDanmakus
+})
+</script>
+
+<template>
+  <NSkeleton v-if="isLoading"> </NSkeleton>
+  <NSpin v-else :show="processing">
+    <NModal v-model:show="showModal" @after-leave="userDanmakus = undefined" preset="card" :style="'width: 600px;max-width: 90vw;max-height: 90vh;'" content-style="overflow-y: auto">
+      <template #header>
+        {{ userDanmakus?.[0].uName }}
+        <NPopover>
+          <template #trigger>
+            <NButton text @click="ToUserSpace(userDanmakus?.[0].uId ?? 0)">
+              <template #icon>
+                <NIcon :component="Search24Filled" />
+              </template>
+            </NButton>
+          </template>
+          查询发言记录
+        </NPopover>
+      </template>
+      <template #header-extra>
+        <NSwitch v-model:value="modalShowTools" size="small">
+          <template #checked> 显示 </template>
+          <template #unchecked> 隐藏 </template>
+          <template #icon>
+            <NIcon :component="Wrench24Filled" />
+          </template>
+        </NSwitch>
+      </template>
+      <DanmakuContainer :show-live-info="false" :current-danmakus="userDanmakus ?? []" :current-live="currentLive" :height="500" :show-border="false" :show-tools="modalShowTools" to="space" />
+    </NModal>
+    <NModal v-model:show="showExportModal" preset="card" style="width: 500px; max-width: 90vw; height: auto">
+      <template #header> 导出 </template>
+      <NSpin :show="isExporting">
+        <NSpace vertical align="center">
+          <NRadioGroup v-model:value="exportType" style="margin: 0 auto">
+            <NRadioButton value="json"> Json </NRadioButton>
+            <NRadioButton value="xml"> XML </NRadioButton>
+            <NRadioButton value="csv">
+              CSV
+              <NTooltip>
+                <template #trigger>
+                  <NIcon>
+                    <Info12Filled />
+                  </NIcon>
+                </template>
+                只包含弹幕, 可在 Excel 中打开
+              </NTooltip>
+            </NRadioButton>
+          </NRadioGroup>
+          <NButton type="primary" size="large" @click="Export"> 导出 </NButton>
+          <span></span>
+          <NCollapse>
+            <NCollapseItem title="关于" name="1">
+              <div>
+                文件名格式: {<NTooltip><template #trigger>生成时间</template>Unix</NTooltip>}_{<NTooltip><template #trigger>开始时间</template>Unix: {{ currentLive.startAt }} </NTooltip>}_{<NTooltip
+                  ><template #trigger>直播间标题</template>' _ ' 将被转义为 ' - '</NTooltip
+                >}_{<NTooltip><template #trigger>用户名</template>{{ accountInfo?.name }}</NTooltip
+                >}.{{ exportType }}
+                <br />
+                弹幕Type对应:
+                <br />● 0 : 上舰 <br />● 1: sc <br />● 2: 礼物 <br />● 3: 弹幕
+              </div>
+            </NCollapseItem>
+          </NCollapse>
+          <span style="color: gray"> </span>
+        </NSpace>
+      </NSpin>
+    </NModal>
+    <NCard style="height: 100%" embedded :bordered="bordered" content-style="padding: 12px">
+      <template #header>
+        <slot name="header"> </slot>
+      </template>
+      <template #header-extra>
+        <slot name="header-extra"> </slot>
+      </template>
+      <template v-if="showLiveInfo">
+        <LiveInfoContainer :live="currentLive" :show-liver="showLiver" show-area :show-statistic="showStatistic" />
+        <NDivider title-placement="left" style="font-size: 12px" v-if="toolsVisiable">
+          <NSwitch v-if="showRank" v-model:value="isRanking" @update-value="OnRank" size="small">
+            <template #checked> 排行 </template>
+            <template #unchecked> 弹幕 </template>
+          </NSwitch>
+          <NDivider v-if="showRank && !isRanking" vertical />
+          <Transition>
+            <span v-if="!isRanking">
+              <NSwitch v-model:value="innerShowTools" size="small">
+                <template #checked> 工具 </template>
+                <template #unchecked> 工具 </template>
+                <template #icon>
+                  <NIcon :component="Wrench24Filled" />
+                </template>
+              </NSwitch>
+            </span>
+            <span v-else></span>
+          </Transition>
+        </NDivider>
+        <br v-else />
+      </template>
+      <NCollapseTransition :show="innerShowTools && !isRanking">
+        <NSpace vertical style="padding-bottom: 16px">
+          <NSpace align="center">
+            <NButton type="primary" size="small" @click="showExportModal = true" @update:value="UpdateDanmakus"> 导出 </NButton>
+            <NCheckbox v-model:checked="orderDecreasing" @update:checked="UpdateDanmakus"> 降序 </NCheckbox>
+            <NCollapseTransition :show="filterSelected.includes(EventDataTypes.Message)">
+              <NCheckbox v-model:checked="hideEmoji" @update:checked="UpdateDanmakus"> 隐藏表情 </NCheckbox>
+            </NCollapseTransition>
+            <NCheckbox v-model:checked="hideAvatar"> 隐藏头像 </NCheckbox>
+            <NCheckbox v-model:checked="orderByPrice" @update:checked="UpdateDanmakus"> 按价格排序 </NCheckbox>
+          </NSpace>
+          <NSpace align="center">
+            <NInput v-model:value="keyword" size="small" style="max-width: 200px" placeholder="内容筛选" clearable @update:value="debouncedFn">
+              <template #prefix>
+                <NIcon :component="Search24Filled" />
+              </template>
+            </NInput>
+            <NCheckbox v-model:checked="enableRegex" @update:checked="UpdateDanmakus"> 正则 </NCheckbox>
+            <NCheckbox v-model:checked="deselect" @update:checked="UpdateDanmakus"> 反选 </NCheckbox>
+          </NSpace>
+          <NSpace align="center">
+            <NInputNumber v-model:value="price" placeholder="最低价格" size="small" style="max-width: 200px" clearable :min="0" @update:value="debouncedFn">
+              <template #prefix>
+                <NIcon :component="Money20Regular" />
+              </template>
+            </NInputNumber>
+            <NTag size="small" checkable :checked="price == 0.1" @update-checked="ChangePrice(0.1)"> 0.1 </NTag>
+            <NTag size="small" checkable :checked="price == 1" @update-checked="ChangePrice(1)"> 1 </NTag>
+            <NTag size="small" checkable :checked="price == 9.9" @update-checked="ChangePrice(9.9)"> 9.9 </NTag>
+            <NTag size="small" checkable :checked="price == 30" @update-checked="ChangePrice(30)"> 30 </NTag>
+            <NTag size="small" checkable :checked="price == 100" @update-checked="ChangePrice(100)"> 100 </NTag>
+          </NSpace>
+          <NCheckboxGroup v-model:value="filterSelected" @update:value="UpdateDanmakus">
+            <NSpace>
+              <NCheckbox :value="EventDataTypes.Message" label="弹幕" />
+              <NCheckbox :value="EventDataTypes.Gift" label="礼物" />
+              <NCheckbox :value="EventDataTypes.Guard" label="舰长" />
+              <NCheckbox :value="EventDataTypes.SC" label="Superchat" />
+            </NSpace>
+          </NCheckboxGroup>
+        </NSpace>
+        <NDivider style="margin-top: 0px; margin-bottom: 12px" title-placement="left">
+          <NTag style="font-size: 12px" size="small">
+            {{ danmakus.length }}
+            {{ danmakus.length != currentDanmakus.length ? `/ ${currentDanmakus.length}` : '' }}
+            条
+          </NTag>
+          <NDivider vertical />
+          <NTag style="font-size: 12px" size="small" type="error" :bordered="false">
+            💰
+            {{ RoundNumber(danmakus.reduce((a, b) => a + (b.price && b.price > 0 ? b.price : 0), 0)) }}
+          </NTag>
+        </NDivider>
+      </NCollapseTransition>
+      <div :style="isRanking ? 'display:none' : ''">
+        <SimpleVirtualList v-if="danmakus.length > itemRange" :items="danmakus" :default-size="itemHeight" :default-height="height ?? 1000">
+          <template #default="{ item }">
+            <p :style="`min-height: ${itemHeight}px;width:97%;display:flex;align-items:center;`">
+              <DanmakuItem :danmaku="item" :account-info="accountInfo" @on-click-name="OnNameClick" :show-name="showName" :show-avatar="!hideAvatar" :height="itemHeight" />
+            </p>
+          </template>
+        </SimpleVirtualList>
+        <p v-else v-for="item in danmakus" :style="`min-height: ${itemHeight}px;width:97%;display:flex;align-items:center;`" v-bind:key="item.id">
+          <DanmakuItem :danmaku="item" :account-info="accountInfo" @on-click-name="OnNameClick" :show-name="showName" :show-avatar="!hideAvatar" :height="itemHeight" />
+        </p>
+      </div>
+      <div v-if="isRanking">
+        <NRadioGroup
+          v-model:value="rankType"
+          @update:value="
+            (type) => {
+              OnRankDirect(type, false)
+            }
+          "
+          size="small"
+        >
+          <NRadioButton :value="RankType.Danmaku"> 弹幕 </NRadioButton>
+          <NRadioButton :value="RankType.Paid"> 付费 </NRadioButton>
+        </NRadioGroup>
+        <NDivider />
+        <NList :show-divider="false" style="background-color: rgba(255, 255, 255, 0)">
+          <NListItem v-for="user in currentRankInfo" v-bind:key="user.uId">
+            <span style="display: flex; align-items: center">
+              <NAvatar round size="small" :style="GetRankIndexColor(user.Index)">
+                {{ user.Index }}
+              </NAvatar>
+              <NDivider vertical />
+              <NButton text type="info" @click="OnNameClick(user.uId)">
+                <NTooltip v-if="user.uId == accountInfo?.biliId">
+                  <template #trigger>
+                    <NTag size="small" type="warning" style="cursor: pointer">
+                      {{ user.uName }}
+                    </NTag>
+                  </template>
+                  主播
+                </NTooltip>
+                <template v-else>
+                  {{ user.uName }}
+                </template>
+              </NButton>
+              <NDivider vertical />
+              <span v-if="rankType == RankType.Danmaku"> {{ user.Danmakus }} 条 </span>
+              <span v-else-if="rankType == RankType.Paid">
+                <NTag size="small" type="error" :bordered="false">
+                  <NIcon :component="Money24Regular" />
+                  {{ RoundNumber(user.Paid) }}
+                </NTag>
+              </span>
+            </span>
+          </NListItem>
+        </NList>
+      </div>
+    </NCard>
+  </NSpin>
+</template>
+
+<style>
+.vListItem {
+  min-height: 30px;
+}
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/components/DanmakuItem.vue b/src/components/DanmakuItem.vue
new file mode 100644
index 0000000..cdb238b
--- /dev/null
+++ b/src/components/DanmakuItem.vue
@@ -0,0 +1,169 @@
+<script setup lang="ts">
+import { NButton, NDivider, NTooltip, NTag, NIcon, NCard } from 'naive-ui'
+import { format } from 'date-fns'
+import { Money24Regular, VehicleShip24Filled } from '@vicons/fluent'
+import { AccountInfo, DanmakuModel, EventDataTypes } from '@/api/api-models'
+
+function GetSCColor(price: number): string {
+  if (price === 0) return `#2a60b2`
+  if (price > 0 && price < 30) return `#2a60b2`
+  if (price >= 30 && price < 50) return `#2a60b2`
+  if (price >= 50 && price < 100) return `#427d9e`
+  if (price >= 100 && price < 500) return `#c99801`
+  if (price >= 500 && price < 1000) return `#e09443`
+  if (price >= 1000 && price < 2000) return `#e54d4d`
+  if (price >= 2000) return `#ab1a32`
+  return ''
+}
+function GetGuardColor(price: number | null | undefined): string {
+  if (price) {
+    if (price < 138) return ''
+    if (price >= 138 && price < 1598) return 'rgb(104, 136, 241)'
+    if (price >= 1598 && price < 15998) return 'rgb(157, 155, 255)'
+    if (price >= 15998) return 'rgb(122, 4, 35)'
+  }
+  return ''
+}
+
+const {
+  danmaku,
+  accountInfo,
+  height = 30,
+  showName = true,
+  showAvatar = true,
+} = defineProps<{
+  danmaku: DanmakuModel
+  accountInfo: AccountInfo | undefined
+  showName?: boolean
+  showAvatar?: boolean
+  height?: number
+}>()
+defineEmits<{
+  (e: 'onClickName', uId: number): void
+}>()
+</script>
+
+<template>
+  <NCard
+    v-if="danmaku.type == EventDataTypes.SC"
+    :style="`margin-top: 5px;margin-bottom: 5px;max-width:500px;background-color: ${GetSCColor(danmaku.price ?? 0)};`"
+    content-style="border-radius: 3px;padding:5px;min-height:45px;display:flex;align-items:center;"
+    :header-style="`padding:5px;background: rgba(255, 255, 255, 15%);font-size: 14px;`"
+    size="small"
+    hoverable
+  >
+    <template #header>
+      <div>
+        <span style="display: flex; align-items: center; gap: 8px 8px">
+          <NTooltip v-if="danmaku.uId > 0 && showAvatar">
+            <template #trigger>
+              <img :src="`https://workers.vrp.moe/api/bilibili/avatar/${danmaku.uId}?size=25`" alt="头像" referrerpolicy="no-referrer" style="border-radius: 50%" loading="lazy" />
+            </template>
+            <img :src="`https://workers.vrp.moe/api/bilibili/avatar/${danmaku.uId}?size=1024`" alt="头像" referrerpolicy="no-referrer" loading="lazy" />
+          </NTooltip>
+          <NTooltip>
+            <template #trigger>
+              <span style="color: white">
+                {{ format(danmaku.time, 'HH:mm:ss') }}
+              </span>
+            </template>
+            {{ format(danmaku.time, 'yyyy-MM-dd HH:mm:ss') }}
+          </NTooltip>
+          <NButton v-if="showName" text type="primary" @click="$emit('onClickName', danmaku.uId)">
+            <NTag v-if="danmaku.uId == accountInfo?.biliId" size="small" type="warning">
+              {{ danmaku.uName }}
+            </NTag>
+            <template v-else>
+              <span style="color: white; font-weight: bold; text-shadow: rgb(124 59 59) 2px 2px 1px">
+                {{ danmaku.uName }}
+              </span>
+            </template>
+          </NButton>
+          <NTag
+            size="small"
+            :style="`display:flex;margin-left: auto;background-color: ${GetSCColor(danmaku.price ?? 0)};color: #e1e1e1;min-width: 35px;justify-content:center;text-shadow: rgb(124 59 59) 2px 2px 1px;`"
+            :bordered="false"
+          >
+            {{ danmaku.price }}
+          </NTag>
+        </span>
+      </div>
+    </template>
+    <span style="color: white">
+      {{ danmaku.msg }}
+    </span>
+  </NCard>
+  <template v-else>
+    <span class="danmaku-item" style="display: flex; align-items: center; white-space: nowrap; margin-left: 5px; color: gray">
+      <NTooltip v-if="danmaku.uId > 0 && showAvatar">
+        <template #trigger>
+          <img :src="`https://workers.vrp.moe/api/bilibili/avatar/${danmaku.uId}?size=22`" alt="头像" referrerpolicy="no-referrer" style="border-radius: 50%; margin-right: 5px" />
+        </template>
+        <img :src="`https://workers.vrp.moe/api/bilibili/avatar/${danmaku.uId}?size=1024`" alt="头像" referrerpolicy="no-referrer" />
+      </NTooltip>
+      <NTooltip>
+        <template #trigger>
+          {{ format(danmaku.time, 'HH:mm:ss') }}
+        </template>
+        {{ format(danmaku.time, 'yyyy-MM-dd HH:mm:ss') }}
+      </NTooltip>
+    </span>
+    <span>
+      <template v-if="showName && danmaku.uId != -1">
+        <NButton class="danmaku-item" text type="info" @click="$emit('onClickName', danmaku.uId)">
+          <NTooltip v-if="danmaku.uId == accountInfo?.biliId">
+            <template #trigger>
+              <NTag size="small" type="warning" style="cursor: pointer">
+                {{ danmaku.uName && danmaku.uName != '' ? danmaku.uName : '主播' }}
+              </NTag>
+            </template>
+            主播
+          </NTooltip>
+          <template v-else>
+            <span :style="danmaku.uName != '' && !showAvatar ? 'min-width: 60px' : ''">
+              {{ danmaku.uName }}
+              <span style="color: gray">
+                {{ ': ' }}
+              </span>
+            </span>
+          </template>
+        </NButton>
+      </template>
+      <span v-if="danmaku.type == EventDataTypes.Message">
+        <template v-if="danmaku.isEmoji">
+          <NTooltip>
+            <template #trigger>
+              <img :src="'https://' + danmaku.msg + `@22h`" referrerpolicy="no-referrer" :style="`max-height: ${height}px;display:inline-flex;`" />
+            </template>
+            <img :src="'https://' + danmaku.msg ?? ''" referrerpolicy="no-referrer" />
+          </NTooltip>
+        </template>
+        <template v-else>
+          {{ danmaku.msg }}
+        </template>
+      </span>
+      <span v-else-if="danmaku.type == EventDataTypes.Gift" :style="'color:' + ((danmaku.price ?? 0) > 0 ? '#DD2F2F' : '#E9A8A8')">
+        <NTag size="tiny" v-if="(danmaku.price ?? 0) > 0" type="error" :bordered="false"> <NIcon :component="Money24Regular" /> {{ danmaku.price }} </NTag>
+        {{ danmaku.price ?? 0 > 0 ? '' : '免费' }}礼物
+        <NDivider vertical />
+        {{ danmaku.msg }}
+        <NTag size="tiny" :bordered="false" v-if="danmaku.num">
+          <span style="color: gray"> {{ danmaku.num }} 个 </span>
+        </NTag>
+      </span>
+      <span v-else-if="danmaku.type == EventDataTypes.Guard" style="color: #9d78c1">
+        上舰
+        <NTag size="small" :style="`color:${GetGuardColor(danmaku.price ?? 0)}`"> <NIcon :component="VehicleShip24Filled" /> {{ danmaku.price }} </NTag>
+        <NDivider vertical />
+        {{ danmaku.msg }}
+      </span>
+      <span v-else> {{ danmaku.msg }} default </span>
+    </span>
+  </template>
+</template>
+
+<style>
+.danmaku-item {
+  margin-right: 5px;
+}
+</style>
diff --git a/src/components/LiveInfoContainer.vue b/src/components/LiveInfoContainer.vue
new file mode 100644
index 0000000..1717194
--- /dev/null
+++ b/src/components/LiveInfoContainer.vue
@@ -0,0 +1,202 @@
+<script setup lang="ts">
+import { EventDataTypes, ResponseLiveInfoModel } from '@/api/api-models'
+import { Info24Filled } from '@vicons/fluent'
+import { List } from 'linqts'
+import { NPopover, NSpace, NStatistic, NTime, NDivider, NNumberAnimation, NTag, NButton, NTooltip, NIcon } from 'naive-ui'
+import { ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+
+const { live } = defineProps<{
+  live: ResponseLiveInfoModel
+}>()
+
+let defaultDanmakusCount = ref(0)
+function OnClickCover() {
+  router.push({
+    name: 'manage-liveDetail',
+    params: { id: live.liveId },
+  })
+}
+
+watch(
+  () => live,
+  (newValue) => {
+    defaultDanmakusCount.value = newValue.danmakusCount
+  }
+)
+</script>
+
+<template>
+  <div style="display: flex; flex-wrap: wrap">
+    <NSpace style="flex-flow: nowrap">
+      <span style="display: flex; align-items: center; height: 100%">
+        <img
+          referrerpolicy="no-referrer"
+          :style="!live.isFinish ? 'animation: animated-border 2.5s infinite;cursor: pointer' : 'cursor: pointer'"
+          class="liveCover"
+          :src="live.coverUrl + '@200w'"
+          lazy
+          preview-disabled
+          @click="OnClickCover()"
+        />
+      </span>
+      <NSpace vertical justify="center" style="gap: 2px">
+        <NButton text @click="OnClickCover()">
+          <span style="font-size: 18px; white-space: break-spaces">
+            {{ live.title }}
+          </span>
+        </NButton>
+        <span>
+          <span v-if="!live.isFinish">
+            <NTag size="tiny" :bordered="false" type="success" style="justify-items: center; box-shadow: 0 0 3px #589580"> 直播中 </NTag>
+          </span>
+          <span v-else style="color: gray">
+            {{ (((live.stopAt ?? 0) - (live.startAt ?? 0)) / (3600 * 1000)).toFixed(1) }}
+            时
+          </span>
+          <NDivider vertical />
+          <NPopover trigger="hover">
+            <template #trigger>
+              <div style="color: grey; font-size: small; display: inline">
+                <NTime style="font-size: small" :time="live.startAt" />
+              </div>
+            </template>
+            <span v-if="live.isFinish">
+              结束于:
+              <NTime :time="live.stopAt ?? 0" />
+            </span>
+            <span v-else>
+              已直播:
+              {{ ((Date.now() - (live.stopAt ?? 0)) / (3600 * 1000)).toFixed(1) }}
+              时
+            </span>
+          </NPopover>
+        </span>
+      </NSpace>
+    </NSpace>
+    <div class="liveListItem">
+      <NStatistic label="分区">
+        <NTooltip>
+          <template #trigger>
+            <span style="font-size: 16px; font-weight: 500">
+              {{ live.area }}
+            </span>
+          </template>
+          {{ live.parentArea }}
+        </NTooltip>
+      </NStatistic>
+      <NStatistic label="弹幕">
+        <span style="font-size: 18px; font-weight: 500">
+          <NNumberAnimation :from="defaultDanmakusCount" :to="live.danmakusCount" show-separator />
+        </span>
+      </NStatistic>
+      <NStatistic label="互动" tabular-nums>
+        <span style="font-size: 18px; font-weight: 500">
+          <NNumberAnimation :from="0" :to="live.interactionCount" show-separator />
+        </span>
+      </NStatistic>
+      <transition>
+        <NStatistic tabular-nums>
+          <template #label>
+            收益
+            <NTooltip>
+              <template #trigger>
+                <NIcon :component="Info24Filled" />
+              </template>
+              因为官方并没有提供上舰的价格, 所以记录中的舰长价格一律按照打折价格计算
+              <br />
+              即舰长 138, 提督 1598, 总督 15998
+              <br />
+              把鼠标放在下面的价格上就可以查看排除舰长后的收益
+            </NTooltip>
+          </template>
+          <NTooltip>
+            <template #trigger>
+              <span style="font-size: 18px; font-weight: 500; color: #a35353">
+                <NNumberAnimation :from="0" :to="live.totalIncomeWithGuard" show-separator />
+              </span>
+            </template>
+            <NNumberAnimation :from="0" :to="live.totalIncome" show-separator />
+          </NTooltip>
+        </NStatistic>
+      </transition>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.n-statistic {
+  text-align: right;
+  min-width: 62px;
+}
+
+@media (max-width: 750px) {
+  .liveCover {
+    width: 90px;
+    height: fit-content;
+    border-radius: 4px;
+  }
+
+  .liveList {
+    display: flex;
+    flex-flow: row wrap;
+    gap: 8px 10px;
+  }
+
+  .liveListItem {
+    padding-top: 10px;
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .dateEChartStyle {
+    height: 500px;
+  }
+}
+
+@media (min-width: 750px) {
+  .liveCover {
+    border-radius: 4px;
+    width: 120px;
+  }
+
+  .liveList {
+    display: flex;
+  }
+
+  .liveListItem {
+    display: flex;
+    gap: 1rem;
+    flex-grow: 1;
+    justify-content: end;
+  }
+
+  .dateEChartStyle {
+    height: 150px;
+  }
+}
+
+@keyframes animated-border {
+  0% {
+    box-shadow: 0 0 0px #589580;
+  }
+
+  100% {
+    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0);
+  }
+}
+
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>
diff --git a/src/components/SimpleVirtualList.vue b/src/components/SimpleVirtualList.vue
new file mode 100644
index 0000000..6c156ae
--- /dev/null
+++ b/src/components/SimpleVirtualList.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { VVirtualList } from 'vueuc'
+import type { VirtualListInst } from 'vueuc'
+import { NScrollbar } from 'naive-ui/es/_internal'
+import type { ScrollbarInst } from 'naive-ui/es/_internal'
+import { computed, onMounted, ref, type PropType } from 'vue'
+import type { ItemData } from 'vueuc/lib/virtual-list/src/type'
+
+const scrollerInstRef = ref<ScrollbarInst | null>(null)
+const vlInstRef = ref<VirtualListInst | null>(null)
+
+function scrollContainer(): HTMLElement | null {
+  const { value } = vlInstRef
+  if (!value) return null
+  const { listElRef } = value
+  return listElRef
+}
+function scrollContent(): HTMLElement | null {
+  const { value } = vlInstRef
+  if (!value) return null
+  const { itemsElRef } = value
+  return itemsElRef
+}
+function syncVLScroller(): void {
+  scrollerInstRef.value?.sync()
+}
+function ScrollTo(to: { position: 'top' | 'bottom'; behavior?: ScrollBehavior; debounce?: boolean }) {
+  scrollerInstRef.value?.scrollTo(to)
+}
+
+const props = defineProps({
+  items: {
+    type: Array as PropType<ItemData[]>,
+    default: () => [],
+  },
+  defaultSize: {
+    type: Number,
+    required: true,
+  },
+  defaultHeight: {
+    type: [Number, String],
+    required: true,
+  },
+  scrollToEndDefault: {
+    type: Boolean,
+  },
+})
+
+onMounted(() => {
+  if (props.scrollToEndDefault) {
+    scrollerInstRef.value?.scrollTo({
+      position: 'bottom',
+      behavior: 'smooth',
+    })
+  }
+})
+
+const parentHeight = computed(() => {
+  return scrollerInstRef.value?.$el.parentElement?.clientHeight ?? 0
+})
+const height = computed(() => {
+  if (typeof props.defaultHeight == 'number') return (props.defaultHeight < 0 ? parentHeight : props.defaultHeight) + 'px'
+  else {
+    if (props.defaultHeight.endsWith('%')) {
+      return parentHeight.value * (Number(props.defaultHeight.replace('%', '')) / 100) + 'px'
+    } else if (props.defaultHeight.endsWith('vh') || props.defaultHeight.endsWith('vw')) {
+      return props.defaultHeight
+    } else {
+      console.log(`[SimpleVirtualList] Invalid height value: ${props.defaultHeight}`)
+      return 0 + 'px'
+    }
+  }
+})
+</script>
+
+<template>
+  <NScrollbar ref="scrollerInstRef" :style="'height:' + height" :container="scrollContainer" :content="scrollContent" trigger="none">
+    <VVirtualList ref="vlInstRef" :items="items" :item-size="defaultSize" item-resizable key-field="id" :show-scrollbar="false" @scroll="syncVLScroller">
+      <template #default="{ item }">
+        <slot :item="item"> </slot>
+      </template>
+    </VVirtualList>
+  </NScrollbar>
+</template>
diff --git a/src/data/DanmakuExport.ts b/src/data/DanmakuExport.ts
new file mode 100644
index 0000000..8aff3f8
--- /dev/null
+++ b/src/data/DanmakuExport.ts
@@ -0,0 +1,117 @@
+import { AccountInfo, DanmakuModel, EventDataTypes, ResponseLiveInfoModel } from '@/api/api-models'
+import { XMLBuilder } from 'fast-xml-parser'
+import { List } from 'linqts'
+
+const builder = new XMLBuilder({
+  attributeNamePrefix: '@',
+  ignoreAttributes: false,
+  processEntities: false,
+  format: true,
+})
+
+export function GetString(account: AccountInfo | undefined, live: ResponseLiveInfoModel, danmakus: DanmakuModel[], type: 'json' | 'xml' | 'csv') {
+  const tempDanmakus = new List(danmakus)
+    .Select((d) => {
+      return {
+        uId: d.uId,
+        uName: d.uName,
+        sendDate: d.time,
+        type: d.type,
+        message: d.msg,
+        price: d.price,
+      }
+    })
+    .ToArray()
+  const obj = {
+    live: live,
+    danmakus: tempDanmakus,
+  }
+  switch (type) {
+    case 'json': {
+      return JSON.stringify(obj)
+    }
+    case 'xml': {
+      const xmlJsonObj = {
+        i: {
+          chatserver: 'chat.bilibili.com',
+          chatid: '0',
+          mission: '0',
+          maxlimit: '0',
+          state: '0',
+          real_name: '0',
+          source: 'e-r',
+          metadata: {
+            user_name: account?.name,
+            room_id: account?.biliRoomId,
+            room_title: live.title,
+            area: live.area,
+            parent_area: live.parentArea,
+            live_start_time: new Date(live.startAt),
+            record_start_time: new Date(live.stopAt ?? 0),
+            recorder: 'https://vtsuru.live/',
+          },
+          d: [] as any[],
+          gift: [] as any[],
+          sc: [] as any[],
+        },
+      }
+      danmakus.forEach((danmaku) => {
+        if (danmaku.type == EventDataTypes.Message) {
+          xmlJsonObj.i.d.push({
+            '@p': `${GetTime(danmaku)},1,25,16777215,${danmaku.time},0,-1`,
+            '@uid': danmaku.uId,
+            '@user': danmaku.uName,
+            '#text': danmaku.msg,
+          })
+        } else if (danmaku.type == EventDataTypes.Gift) {
+          xmlJsonObj.i.gift.push({
+            '@ts': GetTime(danmaku),
+            '@uid': danmaku.uId,
+            '@user': danmaku.uName,
+            '@giftname': danmaku.msg,
+            '@giftcount': danmaku.num,
+            '@cointype': (danmaku.price ?? 0) > 0 ? '金瓜子' : '银瓜子',
+            '@price': (danmaku.price ?? 0) * 1000,
+          })
+        } else if (danmaku.type == EventDataTypes.Guard) {
+          xmlJsonObj.i.gift.push({
+            '@ts': GetTime(danmaku),
+            '@uid': danmaku.uId,
+            '@user': danmaku.uName,
+            '@giftname': danmaku.msg,
+            '@giftcount': danmaku.num,
+            '@cointype': '舰长',
+            '@price': danmaku.price,
+          })
+        } else if (danmaku.type == EventDataTypes.SC) {
+          xmlJsonObj.i.sc.push({
+            '@ts': GetTime(danmaku),
+            '@uid': danmaku.uId,
+            '@user': danmaku.uName,
+            '@price': danmaku.price,
+            '#text': danmaku.msg,
+          })
+        }
+      })
+      function GetTime(danmaku: DanmakuModel) {
+        return ((danmaku.time - live.startAt) / 1000).toFixed(3)
+      }
+      return builder.build(xmlJsonObj)
+    }
+    case 'csv': {
+      return objectsToCSV(tempDanmakus)
+    }
+  }
+}
+function objectsToCSV(arr: any[]) {
+  const array = [Object.keys(arr[0])].concat(arr)
+  return array
+    .map((row) => {
+      return Object.values(row)
+        .map((value) => {
+          return typeof value === 'string' ? JSON.stringify(value) : value
+        })
+        .toString()
+    })
+    .join('\n')
+}
diff --git a/src/data/constants.ts b/src/data/constants.ts
index 18f5b52..f15e002 100644
--- a/src/data/constants.ts
+++ b/src/data/constants.ts
@@ -26,6 +26,7 @@ export const OPEN_LIVE_API_URL = `${BASE_API}open-live/`
 export const SONG_REQUEST_API_URL = `${BASE_API}song-request/`
 export const QUEUE_API_URL = `${BASE_API}queue/`
 export const EVENT_API_URL = `${BASE_API}event/`
+export const LIVE_API_URL = `${BASE_API}live/`
 
 export const ScheduleTemplateMap = {
   '': { name: '默认', compoent: defineAsyncComponent(() => import('@/views/view/scheduleTemplate/DefaultScheduleTemplate.vue')) },
diff --git a/src/router/index.ts b/src/router/index.ts
index f81f61d..46216a9 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -210,6 +210,24 @@ const routes: Array<RouteRecordRaw> = [
           danmaku: true,
         },
       },
+      {
+        path: 'live',
+        name: 'manage-live',
+        component: () => import('@/views/manage/LiveManager.vue'),
+        meta: {
+          title: '直播记录',
+          keepAlive: true,
+        },
+      },
+      {
+        path: 'live/:id',
+        name: 'manage-liveDetail',
+        component: () => import('@/views/manage/LiveDetailManage.vue'),
+        meta: {
+          title: '直播详情',
+          keepAlive: true,
+        },
+      },
     ],
   },
   {
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index 5ee2fba..15871cc 100644
--- a/src/views/AboutView.vue
+++ b/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" />
diff --git a/src/views/IndexView.vue b/src/views/IndexView.vue
index 4da9972..0c596f8 100644
--- a/src/views/IndexView.vue
+++ b/src/views/IndexView.vue
@@ -13,6 +13,11 @@ const functions = [
     desc: '能够记录并查询上舰和SC记录',
     icon: VehicleShip24Filled,
   },
+  {
+    name: '直播场次记录',
+    desc: '记录每场直播的数据以及弹幕等内容',
+    icon: VehicleShip24Filled,
+  },
   {
     name: '日程表',
     desc: '提供多种样式的日程表',
diff --git a/src/views/ManageLayout.vue b/src/views/ManageLayout.vue
index 6cc67d0..5715281 100644
--- a/src/views/ManageLayout.vue
+++ b/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(
diff --git a/src/views/manage/LiveDetailManage.vue b/src/views/manage/LiveDetailManage.vue
new file mode 100644
index 0000000..48bf9c8
--- /dev/null
+++ b/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>
diff --git a/src/views/manage/LiveManager.vue b/src/views/manage/LiveManager.vue
new file mode 100644
index 0000000..0c4c05c
--- /dev/null
+++ b/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>
diff --git a/src/views/open_live/MusicRequest.vue b/src/views/open_live/MusicRequest.vue
index eda5f08..2fd09f6 100644
--- a/src/views/open_live/MusicRequest.vue
+++ b/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,
diff --git a/yarn.lock b/yarn.lock
index 40c58bc..f25aa10 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1698,6 +1698,13 @@ fast-unique-numbers@^8.0.11:
     "@babel/runtime" "^7.23.4"
     tslib "^2.6.2"
 
+fast-xml-parser@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/fast-xml-parser/-/fast-xml-parser-4.3.2.tgz#761e641260706d6e13251c4ef8e3f5694d4b0d79"
+  integrity sha512-rmrXUXwbJedoXkStenj1kkljNF7ugn5ZjR9FJcwmCfcCbtOMDghPajbc+Tck6vE6F5XsDmx+Pr2le9fw8+pXBg==
+  dependencies:
+    strnum "^1.0.5"
+
 fastq@^1.6.0:
   version "1.15.0"
   resolved "https://registry.yarnpkg.com/fastq/-/fastq-1.15.0.tgz#d04d07c6a2a68fe4599fea8d2e103a937fae6b3a"
@@ -3017,6 +3024,11 @@ strip-json-comments@^3.1.1:
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
+strnum@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/strnum/-/strnum-1.0.5.tgz#5c4e829fe15ad4ff0d20c3db5ac97b73c9b072db"
+  integrity sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA==
+
 stylus@^0.55.0:
   version "0.55.0"
   resolved "https://registry.yarnpkg.com/stylus/-/stylus-0.55.0.tgz#bd404a36dd93fa87744a9dd2d2b1b8450345e5fc"