From 69dbd312596b58813dcee3b472a7d57a85323294 Mon Sep 17 00:00:00 2001
From: Megghy <megghy@qq.com>
Date: Sat, 25 Nov 2023 19:09:34 +0800
Subject: [PATCH] add queue

---
 src/api/api-models.ts                   |   83 +-
 src/data/constants.ts                   |    1 +
 src/router/index.ts                     |   26 +
 src/views/AboutView.vue                 |    3 +
 src/views/IndexView.vue                 |    5 +
 src/views/ManageLayout.vue              |   18 +-
 src/views/OpenLiveLayout.vue            |   16 +-
 src/views/manage/SettingsManageView.vue |    2 +
 src/views/obs/QueueOBS.vue              |  368 ++++++++
 src/views/open_live/MusicRequest.vue    |    4 +-
 src/views/open_live/OpenLiveIndex.vue   |    6 +
 src/views/open_live/OpenQueue.vue       | 1085 +++++++++++++++++++++++
 12 files changed, 1604 insertions(+), 13 deletions(-)
 create mode 100644 src/views/obs/QueueOBS.vue
 create mode 100644 src/views/open_live/OpenQueue.vue

diff --git a/src/api/api-models.ts b/src/api/api-models.ts
index 4bbb19e..1313e67 100644
--- a/src/api/api-models.ts
+++ b/src/api/api-models.ts
@@ -62,6 +62,7 @@ export interface UserSetting {
   sendEmail: Setting_SendEmail
   questionBox: Setting_QuestionBox
   songRequest: Setting_SongRequest
+  queue: Setting_Queue
   enableFunctions: FunctionTypes[]
 
   indexTemplate: string | null
@@ -89,11 +90,55 @@ export interface Setting_SongRequest {
   tiduCooldownSecond: number
   jianzhangCooldownSecond: number
 }
+export interface Setting_Queue {
+  keyword: string
+  matchType: KeywordMatchType
+  sortType?: QueueSortType
+  queueMaxSize: number
+
+  allowAllDanmaku: boolean
+  allowFromWeb: boolean
+  needJianzhang: boolean
+  needTidu: boolean
+  needZongdu: boolean
+  fanMedalMinLevel?: number
+
+  allowGift: boolean
+  giftNames?: string[]
+  minGiftPrice?: number
+  giftFilterType: QueueGiftFilterType
+  allowIncreasePaymentBySendGift: boolean
+  allowIncreaseByAnyPayment: boolean
+
+  enableCooldown: boolean
+  cooldownSecond: number
+  zongduCooldownSecond: number
+  tiduCooldownSecond: number
+  jianzhangCooldownSecond: number
+}
+
+export enum KeywordMatchType {
+  Full,
+  Contains,
+  Regex,
+}
+
+export enum QueueSortType {
+  GuardFirst,
+  PaymentFist,
+  TimeFirst,
+}
+
+export enum QueueGiftFilterType {
+  Or,
+  And,
+}
 export enum FunctionTypes {
   SongList,
   QuestionBox,
   Schedule,
   SongRequest,
+  Queue,
 }
 export interface SongAuthorInfo {
   name: string
@@ -120,12 +165,12 @@ export interface SongsInfo {
   //paidSong: boolean
   options?: SongRequestOption
 }
-export interface SongRequestOption{
-  needJianzhang: boolean;
-  needTidu: boolean;
-  needZongdu: boolean;
-  scMinPrice?: number;
-  fanMedalMinLevel?: number;
+export interface SongRequestOption {
+  needJianzhang: boolean
+  needTidu: boolean
+  needZongdu: boolean
+  scMinPrice?: number
+  fanMedalMinLevel?: number
 }
 export enum SongLanguage {
   Chinese, // 中文
@@ -295,12 +340,12 @@ export interface SongRequestInfo {
   status: SongRequestStatus
   from: SongRequestFrom
   scPrice?: number
-  user?: SongRequestUserInfo
+  user?: DanmakuUserInfo
   createAt: number
   finishAt?: number
   isInLocal?: boolean
 }
-export interface SongRequestUserInfo {
+export interface DanmakuUserInfo {
   name: string
   uid: number
   guard_level: number
@@ -315,6 +360,12 @@ export enum SongRequestFrom {
   SC,
   Web,
 }
+export enum QueueFrom {
+  Manual,
+  Danmaku,
+  Gift,
+  Web,
+}
 
 export enum SongRequestStatus {
   Waiting,
@@ -322,6 +373,12 @@ export enum SongRequestStatus {
   Finish,
   Cancel,
 }
+export enum QueueStatus {
+  Waiting,
+  Progressing,
+  Finish,
+  Cancel,
+}
 export interface EventModel {
   type: EventDataTypes
   name: string
@@ -342,3 +399,13 @@ export enum EventDataTypes {
   Gift,
   Message,
 }
+export interface ResponseQueueModel {
+  id: number
+  status: QueueStatus
+  from: QueueFrom
+  giftPrice?: number
+  user?: DanmakuUserInfo
+  createAt: number
+  finishAt?: number | null
+  isInLocal?: boolean
+}
diff --git a/src/data/constants.ts b/src/data/constants.ts
index 1a5027f..cd1da22 100644
--- a/src/data/constants.ts
+++ b/src/data/constants.ts
@@ -24,6 +24,7 @@ export const SCHEDULE_API_URL = `${BASE_API}schedule/`
 export const VIDEO_COLLECT_API_URL = `${BASE_API}video-collect/`
 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 ScheduleTemplateMap = {
diff --git a/src/router/index.ts b/src/router/index.ts
index 315fafa..f81f61d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -200,6 +200,16 @@ const routes: Array<RouteRecordRaw> = [
           danmaku: true,
         },
       },
+      {
+        path: 'queue',
+        name: 'manage-liveQueue',
+        component: () => import('@/views/open_live/OpenQueue.vue'),
+        meta: {
+          title: '弹幕排队',
+          keepAlive: true,
+          danmaku: true,
+        },
+      },
     ],
   },
   {
@@ -230,6 +240,14 @@ const routes: Array<RouteRecordRaw> = [
           title: '点歌',
         },
       },
+      {
+        path: 'queue',
+        name: 'open-live-queue',
+        component: () => import('@/views/open_live/OpenQueue.vue'),
+        meta: {
+          title: '排队',
+        },
+      },
     ],
   },
   {
@@ -252,6 +270,14 @@ const routes: Array<RouteRecordRaw> = [
           title: '弹幕点歌',
         },
       },
+      {
+        path: 'queue',
+        name: 'obs-queue',
+        component: () => import('@/views/obs/QueueOBS.vue'),
+        meta: {
+          title: '弹幕排队',
+        },
+      },
     ],
   },
   {
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
index 00b4a42..2e9f3f3 100644
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -33,6 +33,9 @@ import { NButton, NCard, NDivider, NLayoutContent, NSpace, NText, NTimeline, NTi
           </NSpace>
           <NDivider title-placement="left"> 更新日志 </NDivider>
           <NTimeline>
+            <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" />
             <NTimelineItem type="success" title="功能添加" content="视频征集" time="2023-10-30" />
             <NTimelineItem type="info" title="功能更新" content="日程表添加 '粉粉' 模板" time="2023-10-27" />
             <NTimelineItem type="info" title="功能更新" content="提问箱新增公开选项" time="2023-10-26" />
diff --git a/src/views/IndexView.vue b/src/views/IndexView.vue
index 1ba4946..d62bc7e 100644
--- a/src/views/IndexView.vue
+++ b/src/views/IndexView.vue
@@ -43,6 +43,11 @@ const functions = [
     desc: '可以让弹幕进行点歌!',
     icon: ListCircle,
   },
+  {
+    name: '弹幕排队',
+    desc: '通过发送弹幕和礼物加入队列, 允许设置多种条件',
+    icon: ListCircle,
+  },
   {
     name: '视频征集',
     desc: '创建用来收集视频链接的页面, 可以从动态爬取, 也可以提前对视频进行筛选',
diff --git a/src/views/ManageLayout.vue b/src/views/ManageLayout.vue
index 50fad1b..e62364f 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, VehicleShip24Filled, VideoAdd20Filled } from '@vicons/fluent'
+import { CalendarClock24Filled, Chat24Filled, Info24Filled, 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'
@@ -229,7 +229,7 @@ const menuOptions = [
                 name: 'manage-liveLottery',
               },
             },
-            { default: () => '直播抽奖' }
+            { default: () => '抽奖' }
           ),
         key: 'manage-liveLottery',
         icon: renderIcon(Lottery24Filled),
@@ -249,6 +249,20 @@ const menuOptions = [
         key: 'manage-songRequest',
         icon: renderIcon(MusicalNote),
         //disabled: accountInfo.value?.isEmailVerified == false,
+      },{
+        label: () =>
+          h(
+            RouterLink,
+            {
+              to: {
+                name: 'manage-liveQueue',
+              },
+            },
+            { default: () => '排队' }
+          ),
+        key: 'manage-liveQueue',
+        icon: renderIcon(PeopleQueue24Filled),
+        //disabled: accountInfo.value?.isEmailVerified == false,
       },
     ],
   },
diff --git a/src/views/OpenLiveLayout.vue b/src/views/OpenLiveLayout.vue
index c3d41e2..2f2dc6b 100644
--- a/src/views/OpenLiveLayout.vue
+++ b/src/views/OpenLiveLayout.vue
@@ -2,7 +2,7 @@
 import { isDarkMode } from '@/Utils'
 import { OpenLiveInfo, ThemeType } from '@/api/api-models'
 import DanmakuClient, { AuthInfo } from '@/data/DanmakuClient'
-import { Lottery24Filled } from '@vicons/fluent'
+import { Lottery24Filled, PeopleQueue24Filled } from '@vicons/fluent'
 import { Moon, MusicalNote, Sunny } from '@vicons/ionicons5'
 import { useElementSize, useStorage } from '@vueuse/core'
 import {
@@ -74,6 +74,20 @@ const menuOptions = [
       ),
     key: 'open-live-song-request',
     icon: renderIcon(MusicalNote),
+  },{
+    label: () =>
+      h(
+        RouterLink,
+        {
+          to: {
+            name: 'open-live-queue',
+            query: route.query,
+          },
+        },
+        { default: () => '排队' }
+      ),
+    key: 'open-live-queue',
+    icon: renderIcon(PeopleQueue24Filled),
   },
 ]
 
diff --git a/src/views/manage/SettingsManageView.vue b/src/views/manage/SettingsManageView.vue
index 707fe4f..1d37f0c 100644
--- a/src/views/manage/SettingsManageView.vue
+++ b/src/views/manage/SettingsManageView.vue
@@ -284,6 +284,8 @@ onMounted(async () => {
             <NCheckbox :value="FunctionTypes.SongList"> 歌单 </NCheckbox>
             <NCheckbox :value="FunctionTypes.QuestionBox"> 提问箱(棉花糖 </NCheckbox>
             <NCheckbox :value="FunctionTypes.Schedule"> 日程 </NCheckbox>
+            <NCheckbox :value="FunctionTypes.SongRequest"> 点歌 </NCheckbox>
+            <NCheckbox :value="FunctionTypes.Queue"> 排队 </NCheckbox>
           </NCheckboxGroup>
           <NDivider> 通知 </NDivider>
           <NSpace>
diff --git a/src/views/obs/QueueOBS.vue b/src/views/obs/QueueOBS.vue
new file mode 100644
index 0000000..24ba28e
--- /dev/null
+++ b/src/views/obs/QueueOBS.vue
@@ -0,0 +1,368 @@
+<script setup lang="ts">
+import { QueueFrom, QueueSortType, ResponseQueueModel, Setting_Queue, Setting_SongRequest, SongRequestFrom, SongRequestInfo, QueueStatus } from '@/api/api-models'
+import { QueryGetAPI } from '@/api/query'
+import { AVATAR_URL, QUEUE_API_URL, SONG_REQUEST_API_URL } from '@/data/constants'
+import { useElementSize } from '@vueuse/core'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { Vue3Marquee } from 'vue3-marquee'
+import { NCard, NDivider, NEmpty, NSpace, NText, useMessage } from 'naive-ui'
+import { List } from 'linqts'
+
+const props = defineProps<{
+  id?: number
+}>()
+
+const message = useMessage()
+const route = useRoute()
+const currentId = computed(() => {
+  return props.id ?? route.query.id
+})
+
+const listContainerRef = ref()
+const footerRef = ref()
+const footerListRef = ref()
+const { height, width } = useElementSize(listContainerRef)
+const footerSize = useElementSize(footerRef)
+const footerListSize = useElementSize(footerListRef)
+const itemHeight = 40
+
+const key = ref(Date.now())
+
+const queue = ref<ResponseQueueModel[]>([])
+const settings = ref<Setting_Queue>({} as Setting_Queue)
+const progressing = computed(() => {
+  return queue.value.find((s) => s.status == QueueStatus.Progressing)
+})
+const activeItems = computed(() => {
+  let list = new List(queue.value).Where((q) => q?.status == QueueStatus.Waiting).OrderByDescending((q) => q.from == QueueFrom.Manual)
+  switch (settings.value.sortType) {
+    case QueueSortType.TimeFirst: {
+      list = list.OrderByDescending((q) => q.createAt)
+      break
+    }
+    case QueueSortType.GuardFirst: {
+      list = list.OrderBy((q) => q.user?.guard_level).ThenByDescending((q) => q.createAt)
+      break
+    }
+    case QueueSortType.PaymentFist: {
+      list = list.OrderByDescending((q) => q.giftPrice ?? 0).ThenByDescending((q) => q.createAt)
+    }
+  }
+  return list.ToArray()
+})
+
+async function get() {
+  try {
+    const data = await QueryGetAPI<{ queue: ResponseQueueModel[]; setting: Setting_Queue }>(QUEUE_API_URL + 'get-active-and-settings', {
+      id: currentId.value,
+    })
+    if (data.code == 200) {
+      return data.data
+    }
+  } catch (err) {
+    console.error(err)
+  }
+  return {} as { queue: ResponseQueueModel[]; setting: Setting_Queue }
+}
+const isMoreThanContainer = computed(() => {
+  return queue.value.length * itemHeight > height.value
+})
+const allowGuardTypes = computed(() => {
+  const types = []
+  if (settings.value.needTidu) {
+    types.push('提督')
+  }
+  if (settings.value.needZongdu) {
+    types.push('总督')
+  }
+  if (settings.value.needJianzhang) {
+    types.push('舰长')
+  }
+  return types
+})
+async function update() {
+  const r = await get()
+  if (r) {
+    queue.value = r.queue.sort((a, b) => {
+      return b.createAt - a.createAt
+    })
+    settings.value = r.setting
+  }
+}
+
+let timer: any
+onMounted(() => {
+  update()
+  timer = setInterval(update, 2000)
+})
+onUnmounted(() => {
+  clearInterval(timer)
+})
+</script>
+
+<template>
+  <div class="queue-background" v-bind="$attrs">
+    <p class="queue-header">排队</p>
+    <NDivider class="queue-divider">
+      <p class="queue-header-count">已有 {{ activeItems.length ?? 0 }} 人</p>
+    </NDivider>
+    <div class="queue-singing-container" :singing="queue.findIndex((s) => s.status == QueueStatus.Progressing) > -1" :from="(progressing?.from as number)" :status="(progressing?.status as number)">
+      <div class="queue-singing-prefix"></div>
+      <template v-if="progressing">
+        <img class="queue-singing-avatar" :src="AVATAR_URL + progressing?.user?.uid" referrerpolicy="no-referrer" />
+        <p class="queue-singing-name">{{ progressing?.user?.name }}</p>
+      </template>
+      <div v-else class="queue-singing-empty">空闲中</div>
+      <div class="queue-singing-suffix"></div>
+    </div>
+    <div class="queue-content" ref="listContainerRef">
+      <template v-if="activeItems.length > 0">
+        <Vue3Marquee class="queue-list" :key="key" vertical :pause="!isMoreThanContainer" :duration="20" :style="`height: ${height}px;width: ${width}px;`">
+          <span class="queue-list-item" :from="(item.from as number)" :status="(item.status as number)" :payment="item.giftPrice ?? 0" v-for="item in activeItems" :key="item.id" :style="`height: ${itemHeight}px`">
+            <div class="queue-list-item-level" :has-level="(item.user?.fans_medal_level ?? 0) > 0">
+              {{ item.user?.fans_medal_level }}
+            </div>
+            <div class="queue-list-item-user-name">
+              {{ item.user?.name }}
+            </div>
+            <p class="queue-list-item-payment">{{ item.from == QueueFrom.Manual ? '主播添加' : item.giftPrice == undefined ? '无' : '¥ ' + item.giftPrice }}</p>
+          </span>
+        </Vue3Marquee>
+      </template>
+      <div v-else style="position: relative; top: 20%">
+        <NEmpty class="queue-empty" description="暂无人排队" />
+      </div>
+    </div>
+    <div class="queue-footer" ref="footerRef">
+      <Vue3Marquee :key="key" ref="footerListRef" class="queue-footer-marquee" :pause="footerSize.width < footerListSize.width" :duration="20">
+        <span class="queue-tag" type="prefix">
+          <div class="queue-tag-key">关键词</div>
+          <div class="queue-tag-value">
+            {{ settings.keyword }}
+          </div>
+        </span>
+        <span class="queue-tag" type="prefix">
+          <div class="queue-tag-key">允许</div>
+          <div class="queue-tag-value">
+            {{ settings.allowAllDanmaku ? '所有弹幕' : allowGuardTypes.length > 0 ? allowGuardTypes.join(',') : '无' }}
+          </div>
+        </span>
+        <span class="queue-tag" type="gift">
+          <div class="queue-tag-key">通过礼物</div>
+          <div class="queue-tag-value">
+            {{ settings.allowGift ? '允许' : '不允许' }}
+          </div>
+        </span>
+        <span class="queue-tag" type="gift-price">
+          <div class="queue-tag-key">最低价格</div>
+          <div class="queue-tag-value">
+            {{ settings.minGiftPrice ? '> ¥' + settings.minGiftPrice : '任意' }}
+          </div>
+        </span>
+        <span class="queue-tag" type="gift-type">
+          <div class="queue-tag-key">礼物名</div>
+          <div class="queue-tag-value">
+            {{ settings.giftNames ? settings.giftNames.join(', ') : '无' }}
+          </div>
+        </span>
+        <span class="queue-tag" type="fan-madel">
+          <div class="queue-tag-key">粉丝牌</div>
+          <div class="queue-tag-value">
+            {{ settings.fanMedalMinLevel != undefined && !settings.allowAllDanmaku ? (settings.fanMedalMinLevel > 0 ? '> ' + settings.fanMedalMinLevel : '佩戴') : '无需' }}
+          </div>
+        </span></Vue3Marquee
+      >
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.queue-background {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  min-height: 100px;
+  min-width: 100px;
+  background-color: #0f0f0f48;
+  border-radius: 10px;
+  color: white;
+}
+.queue-header {
+  margin: 0;
+  color: #fff;
+  text-align: center;
+  font-size: 20px;
+  font-weight: bold;
+  text-shadow: 0 0 10px #ca7b7b6e, 0 0 20px #ffffff8e, 0 0 30px #61606086, 0 0 40px rgba(64, 156, 179, 0.555);
+}
+.queue-header-count {
+  color: #ffffffbd;
+  text-align: center;
+  font-size: 14px;
+}
+.queue-divider {
+  margin: 0 auto;
+  margin-top: -15px;
+  margin-bottom: -15px;
+  width: 90%;
+}
+.queue-singing-container {
+  height: 35px;
+  margin: 0 10px 0 10px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.queue-singing-empty {
+  font-weight: bold;
+  font-style: italic;
+  color: #ffffffbe;
+}
+.queue-singing-prefix {
+  border: 2px solid rgb(231, 231, 231);
+  height: 30px;
+  width: 10px;
+  border-radius: 10px;
+}
+.queue-singing-container[singing='true'] .queue-singing-prefix {
+  background-color: #75c37f;
+  animation: animated-border 3s linear infinite;
+}
+.queue-singing-container[singing='false'] .queue-singing-prefix {
+  background-color: #c37575;
+}
+.queue-singing-avatar {
+  height: 30px;
+  border-radius: 50%;
+  /* 添加无限旋转动画 */
+  animation: rotate 20s linear infinite;
+}
+/* 网页点歌 */
+.queue-singing-container[from='3'] .queue-singing-avatar {
+  display: none;
+}
+.queue-singing-name {
+  font-size: large;
+  font-weight: bold;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 80%;
+}
+@keyframes rotate {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+.n-divider__line {
+  background-color: #ffffffd5;
+}
+.queue-content {
+  background-color: #0f0f0f4f;
+  margin: 10px;
+  padding: 10px;
+  height: 100%;
+  border-radius: 10px;
+  overflow-x: hidden;
+}
+.marquee {
+  justify-items: left;
+}
+.queue-list-item {
+  display: flex;
+  width: 100%;
+  align-self: flex-start;
+  position: relative;
+  align-items: center;
+  justify-content: left;
+  gap: 10px;
+}
+.queue-list-item-user-name {
+  font-size: 18px;
+  font-weight: bold;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 80%;
+}
+
+/* 手动添加 */
+.queue-list-item[from='0'] .queue-list-item-payment {
+  font-style: italic;
+  font-weight: bold;
+  color: #d2d8d6;
+  font-size: 12px;
+}
+.queue-list-item[from='0'] .queue-list-item-avatar {
+  display: none;
+}
+
+/* 弹幕点歌 */
+.queue-list-item[payment='0']  .queue-list-item-payment{
+  display: none;
+}
+
+.queue-list-item-payment {
+  font-style: italic;
+  font-size: 12px;
+  color: rgba(233, 165, 165, 0.993);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  margin-left: auto;
+}
+.queue-list-item-level {
+  text-align: center;
+  height: 18px;
+  padding: 2px;
+  min-width: 15px;
+  border-radius: 5px;
+  background-color: #0f0f0f48;
+  color: rgba(204, 204, 204, 0.993);
+  font-size: 12px;
+}
+.queue-list-item-level[has-level='false'] {
+  display: none;
+}
+.queue-footer {
+  margin: 0 5px 5px 5px;
+  height: 60px;
+  border-radius: 5px;
+  background-color: #0f0f0f4f;
+  display: flex;
+  align-items: center;
+}
+.queue-tag {
+  display: flex;
+  margin: 5px 0 5px 5px;
+  height: 40px;
+  border-radius: 3px;
+  background-color: #0f0f0f4f;
+  padding: 4px;
+  padding-right: 6px;
+  display: flex;
+  flex-direction: column;
+  justify-content: left;
+}
+.queue-tag-key {
+  font-style: italic;
+  color: rgb(211, 211, 211);
+  font-size: 12px;
+}
+.queue-tag-value {
+  font-size: 14px;
+}
+@keyframes animated-border {
+  0% {
+    box-shadow: 0 0 0px #589580;
+  }
+
+  100% {
+    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0);
+  }
+}
+</style>
diff --git a/src/views/open_live/MusicRequest.vue b/src/views/open_live/MusicRequest.vue
index 66a156a..d4137c4 100644
--- a/src/views/open_live/MusicRequest.vue
+++ b/src/views/open_live/MusicRequest.vue
@@ -10,7 +10,7 @@ import {
   SongRequestFrom,
   SongRequestInfo,
   SongRequestStatus,
-  SongRequestUserInfo,
+  DanmakuUserInfo,
   SongsInfo,
 } from '@/api/api-models'
 import { QueryGetAPI, QueryPostAPI, QueryPostAPIWithParams } from '@/api/query'
@@ -241,7 +241,7 @@ async function addSong(danmaku: EventModel) {
         fans_medal_name: danmaku.fans_medal_name,
         fans_medal_wearing_status: danmaku.fans_medal_wearing_status,
         guard_level: danmaku.guard_level,
-      } as SongRequestUserInfo,
+      } as DanmakuUserInfo,
       createAt: Date.now(),
       isInLocal: true,
       id: songs.value.length == 0 ? 1 : new List(songs.value).Max((s) => s.id) + 1,
diff --git a/src/views/open_live/OpenLiveIndex.vue b/src/views/open_live/OpenLiveIndex.vue
index cb4655f..98d584a 100644
--- a/src/views/open_live/OpenLiveIndex.vue
+++ b/src/views/open_live/OpenLiveIndex.vue
@@ -27,6 +27,12 @@ const accountInfo = useAccount()
         <NButton @click="$router.push({ name: 'open-live-song-request', query: $route.query })" type="primary"> 前往使用 </NButton>
       </template>
     </NCard>
+    <NCard hoverable embedded size="small" title="弹幕排队" style="width: 300px">
+      通过发送弹幕或者礼物进行排队, 允许设置多种条件
+      <template #footer>
+        <NButton @click="$router.push({ name: 'open-live-queue', query: $route.query })" type="primary"> 前往使用 </NButton>
+      </template>
+    </NCard>
   </NSpace>
   <br />
   <NAlert v-if="accountInfo?.eventFetcherOnline != true" type="warning" title="可用性警告" style="max-width: 600px; margin: 0 auto">
diff --git a/src/views/open_live/OpenQueue.vue b/src/views/open_live/OpenQueue.vue
new file mode 100644
index 0000000..58d93c9
--- /dev/null
+++ b/src/views/open_live/OpenQueue.vue
@@ -0,0 +1,1085 @@
+<script setup lang="ts">
+import { SaveEnableFunctions, useAccount } from '@/api/account'
+import {
+  EventDataTypes,
+  EventModel,
+  FunctionTypes,
+  KeywordMatchType,
+  QueueGiftFilterType,
+  QueueSortType,
+  Setting_Queue,
+  Setting_SongRequest,
+  SongFrom,
+  QueueFrom,
+  SongRequestInfo,
+  QueueStatus,
+  DanmakuUserInfo,
+  SongsInfo,
+  ResponseQueueModel,
+} from '@/api/api-models'
+import { QueryGetAPI, QueryPostAPI, QueryPostAPIWithParams } from '@/api/query'
+import DanmakuClient, { AuthInfo, DanmakuInfo, GiftInfo, RoomAuthInfo, SCInfo } from '@/data/DanmakuClient'
+import { OPEN_LIVE_API_URL, SONG_API_URL, QUEUE_API_URL } from '@/data/constants'
+import {
+  Check24Filled,
+  Checkmark12Regular,
+  ClipboardTextLtr24Filled,
+  Delete24Filled,
+  Dismiss12Filled,
+  Dismiss16Filled,
+  Info24Filled,
+  Mic24Filled,
+  PeopleQueue24Filled,
+  Play24Filled,
+} from '@vicons/fluent'
+import { ReloadCircleSharp } from '@vicons/ionicons5'
+import { useStorage } from '@vueuse/core'
+import { format, isSameDay } from 'date-fns'
+import { List } from 'linqts'
+import {
+  DataTableColumns,
+  NAlert,
+  NButton,
+  NCard,
+  NCheckbox,
+  NCollapse,
+  NCollapseItem,
+  NDataTable,
+  NDivider,
+  NEllipsis,
+  NEmpty,
+  NIcon,
+  NInput,
+  NInputGroup,
+  NInputGroupLabel,
+  NInputNumber,
+  NLi,
+  NList,
+  NListItem,
+  NModal,
+  NPopconfirm,
+  NRadio,
+  NRadioButton,
+  NRadioGroup,
+  NSelect,
+  NSpace,
+  NSpin,
+  NSwitch,
+  NTabPane,
+  NTabs,
+  NTag,
+  NText,
+  NTime,
+  NTooltip,
+  NUl,
+  useMessage,
+  useNotification,
+} from 'naive-ui'
+import { computed, h, onActivated, onDeactivated, onMounted, onUnmounted, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import SongRequestOBS from '../obs/SongRequestOBS.vue'
+import QueueOBS from '../obs/QueueOBS.vue'
+
+const defaultSettings = {
+  keyword: '排队',
+  queueMaxSize: 10,
+  allowAllDanmaku: true,
+  allowFromWeb: true,
+  needWearFanMedal: false,
+  needJianzhang: false,
+  needTidu: false,
+  needZongdu: false,
+  allowGift: true,
+  giftNames: ['小花花'],
+  minGiftPrice: 0.1,
+  allowIncreaseByAnyPayment: true,
+  allowIncreasePaymentBySendGift: true,
+  fanMedalMinLevel: 0,
+  enableCooldown: false,
+  cooldownSecond: 86400,
+  zongduCooldownSecond: 10800,
+  tiduCooldownSecond: 21600,
+  jianzhangCooldownSecond: 43200,
+  matchType: KeywordMatchType.Contains,
+  sortType: QueueSortType.TimeFirst,
+  giftFilterType: QueueGiftFilterType.Or,
+} as Setting_Queue
+const STATUS_MAP = {
+  [QueueStatus.Waiting]: '等待中',
+  [QueueStatus.Progressing]: '处理中',
+  [QueueStatus.Finish]: '已完成',
+  [QueueStatus.Cancel]: '已取消',
+}
+
+const route = useRoute()
+const accountInfo = useAccount()
+const message = useMessage()
+const notice = useNotification()
+
+const isWarnMessageAutoClose = useStorage('Queue.Settings.WarnMessageAutoClose', false)
+const volumn = useStorage('Settings.Volumn', 0.5)
+
+const isLoading = ref(false)
+const showOBSModal = ref(false)
+
+const filterName = ref('')
+const filterNameContains = ref(false)
+
+const settings = computed({
+  get: () => {
+    if (accountInfo.value) {
+      return accountInfo.value.settings.queue
+    }
+    return defaultSettings
+  },
+  set: (value) => {
+    if (accountInfo.value) {
+      accountInfo.value.settings.queue = value
+    }
+  },
+})
+
+const props = defineProps<{
+  client: DanmakuClient
+  roomInfo: RoomAuthInfo
+  code: string | undefined
+  isOpenLive?: boolean
+}>()
+
+const localQueues = useStorage('Local.Queue', [] as ResponseQueueModel[])
+const originQueue = ref<ResponseQueueModel[]>(await getAll())
+const queue = computed(() => {
+  let list = new List(accountInfo ? originQueue.value : localQueues.value)
+    .Where(
+      (q) =>
+        !filterName.value || (filterNameContains.value ? q?.user?.name.toLowerCase().includes(filterName.value.toLowerCase()) == true : q?.user?.name.toLowerCase() == filterName.value.toLowerCase())
+    )
+    .Where((q) => (q?.status ?? QueueStatus.Cancel) < QueueStatus.Finish)
+    .OrderByDescending((q) => q.from == QueueFrom.Manual)
+  switch (settings.value.sortType) {
+    case QueueSortType.TimeFirst: {
+      list = list.OrderByDescending((q) => q.createAt)
+      break
+    }
+    case QueueSortType.GuardFirst: {
+      list = list.OrderBy((q) => q.user?.guard_level).ThenByDescending((q) => q.createAt)
+      break
+    }
+    case QueueSortType.PaymentFist: {
+      list = list.OrderByDescending((q) => q.giftPrice ?? 0).ThenByDescending((q) => q.createAt)
+    }
+  }
+  return list.ToArray()
+})
+const historySongs = computed(() => {
+  return (accountInfo ? originQueue.value : localQueues.value)
+    .sort((a, b) => a.status - b.status)
+    .filter((song) => {
+      return song.status == QueueStatus.Finish || song.status == QueueStatus.Cancel
+    })
+})
+
+const newQueueName = ref('')
+
+const defaultKeyword = useStorage('Settings.Queue.DefaultKeyword', '排队')
+const configCanEdit = computed(() => {
+  return accountInfo.value != null && accountInfo.value != undefined
+})
+
+const table = ref()
+
+async function getAll() {
+  if (accountInfo.value) {
+    try {
+      const data = await QueryGetAPI<ResponseQueueModel[]>(QUEUE_API_URL + 'get-all', {
+        id: accountInfo.value.id,
+      })
+      if (data.code == 200) {
+        console.log('[OPEN-LIVE-Queue] 已获取所有数据')
+        return data.data
+      } else {
+        message.error('无法获取数据: ' + data.message)
+        return []
+      }
+    } catch (err) {
+      console.error(err)
+      message.error('无法获取数据')
+    }
+    return []
+  } else {
+    return localQueues.value
+  }
+}
+async function add(danmaku: EventModel) {
+  if (!checkMessage(danmaku)) {
+    return
+  }
+  console.log(`[OPEN-LIVE-QUEUE] 收到 [${danmaku.name}] 的排队请求`)
+  if (accountInfo.value) {
+    await QueryPostAPI<ResponseQueueModel>(QUEUE_API_URL + 'try-add', danmaku)
+      .then((data) => {
+        if (data.code == 200) {
+          if (data.message != 'EventFetcher') {
+            //如果存在则替换, 否则插入最后
+            const index = originQueue.value.findIndex((q) => q.id == data.data.id)
+            if (index > -1) {
+              message.info(
+                `${data.data.user?.name} 通过发送礼物再次付费: ¥ ${((data.data?.giftPrice ?? 0) - (originQueue.value[index]?.giftPrice ?? 0)).toFixed(1)}, 当前总计付费: ¥ ${data.data.giftPrice}`
+              )
+              originQueue.value.splice(index, 1, data.data)
+            } else {
+              originQueue.value.push(data.data)
+              message.success(`[${danmaku.name}] 添加至队列`)
+            }
+          }
+        } else {
+          //message.error(`[${danmaku.name}] 添加曲目失败: ${data.message}`)
+          const time = Date.now()
+          notice.warning({
+            title: danmaku.name + ' 排队失败',
+            description: data.message,
+            duration: isWarnMessageAutoClose.value ? 3000 : 0,
+            meta: () => h(NTime, { type: 'relative', time: time, key: updateKey.value }),
+          })
+          console.log(`[OPEN-LIVE-QUEUE] [${danmaku.name}] 排队失败: ${data.message}`)
+        }
+      })
+      .catch((err) => {
+        console.error(err)
+      })
+  } else {
+    const songData = {
+      status: QueueStatus.Waiting,
+      from: danmaku.type == EventDataTypes.Message ? QueueFrom.Danmaku : QueueFrom.Gift,
+      giftPrice: danmaku.type == EventDataTypes.SC ? danmaku.price : undefined,
+      user: {
+        name: danmaku.name,
+        uid: danmaku.uid,
+        fans_medal_level: danmaku.fans_medal_level,
+        fans_medal_name: danmaku.fans_medal_name,
+        fans_medal_wearing_status: danmaku.fans_medal_wearing_status,
+        guard_level: danmaku.guard_level,
+      } as DanmakuUserInfo,
+      createAt: Date.now(),
+      isInLocal: true,
+      id: queue.value.length == 0 ? 1 : new List(queue.value).Max((s) => s.id) + 1,
+    } as ResponseQueueModel
+    localQueues.value.unshift(songData)
+    message.success(`[${danmaku.name}] 添加至本地队列`)
+  }
+}
+async function addManual() {
+  if (!newQueueName.value) {
+    message.error('请输入用户名')
+    return
+  }
+  if (accountInfo.value) {
+    await QueryPostAPIWithParams<ResponseQueueModel>(QUEUE_API_URL + 'add', {
+      name: newQueueName.value,
+    })
+      .then((data) => {
+        if (data.code == 200) {
+          message.success(`已手动添加用户至队列: ${data.data.user?.name}`)
+          originQueue.value.unshift(data.data)
+          newQueueName.value = ''
+          console.log(`[OPEN-LIVE-QUEUE] 已手动添加用户至队列: ${data.data.user?.name}`)
+        } else {
+          message.error(`手动添加失败: ${data.message}`)
+        }
+      })
+      .catch((err) => {
+        console.error(err)
+      })
+  } else {
+    const songData = {
+      status: QueueStatus.Waiting,
+      from: QueueFrom.Manual,
+      scPrice: undefined,
+      user: { name: newQueueName.value } as DanmakuUserInfo,
+      createAt: Date.now(),
+      isInLocal: true,
+      id: queue.value.length == 0 ? 1 : new List(queue.value).Max((s) => s.id) + 1,
+    } as ResponseQueueModel
+    localQueues.value.unshift(songData)
+    message.success(`已手动添加用户至队列: ${newQueueName.value}`)
+    newQueueName.value = ''
+  }
+}
+async function updateStatus(queueData: ResponseQueueModel, status: QueueStatus) {
+  if (!configCanEdit.value) {
+    queueData.status = status
+    return
+  }
+  isLoading.value = true
+  await QueryGetAPI(QUEUE_API_URL + 'set-status', {
+    id: queueData.id,
+    status: status,
+  })
+    .then((data) => {
+      if (data.code == 200) {
+        console.log(`[OPEN-LIVE-QUEUE] 更新队列状态: ${queueData.user?.name} -> ${STATUS_MAP[status]}`)
+        queueData.status = status
+        if (status > QueueStatus.Progressing) {
+          queueData.finishAt = Date.now()
+        }
+        message.success(`已更新队列状态为: ${STATUS_MAP[status]}`)
+      } else {
+        console.log(`[OPEN-LIVE-QUEUE] 更新队列状态失败: ${data.message}`)
+        message.error(`更新队列状态失败: ${data.message}`)
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+      message.error(`更新队列状态失败`)
+    })
+    .finally(() => {
+      isLoading.value = false
+    })
+}
+
+function onGetDanmaku(danmaku: DanmakuInfo) {
+  add({
+    msg: danmaku.msg,
+    type: EventDataTypes.Message,
+    time: danmaku.timestamp,
+    uid: danmaku.uid,
+    name: danmaku.uname,
+    avatar: danmaku.uface,
+    fans_medal_level: danmaku.fans_medal_level,
+    fans_medal_name: danmaku.fans_medal_name,
+    fans_medal_wearing_status: danmaku.fans_medal_wearing_status,
+    guard_level: danmaku.guard_level,
+    num: 1,
+    price: 0,
+  } as EventModel)
+}
+function onGetGift(danmaku: GiftInfo) {
+  add({
+    msg: danmaku.gift_name,
+    type: EventDataTypes.Gift,
+    time: danmaku.timestamp,
+    uid: danmaku.uid,
+    name: danmaku.uname,
+    fans_medal_level: danmaku.fans_medal_level,
+    fans_medal_name: danmaku.fans_medal_name,
+    fans_medal_wearing_status: danmaku.fans_medal_wearing_status,
+    guard_level: danmaku.guard_level,
+    avatar: danmaku.uface,
+    num: 1,
+    price: (danmaku.gift_num * danmaku.price) / 1000,
+  } as EventModel)
+}
+function checkMessage(eventData: EventModel) {
+  if (!configCanEdit.value && queue.value.find((q) => q.user?.uid == eventData.uid)) {
+    return false
+  }
+  if (settings.value.keyword && eventData.type === EventDataTypes.Message && !checkMatch(eventData.msg)) {
+    return false //非排队弹幕
+  } else if (eventData.type === EventDataTypes.Gift) {
+    if (!settings.value.allowGift) {
+      return false // { success: false, message: '不允许通过礼物排队' }
+    }
+    const nameNotMatch = (settings.value.giftNames?.length ?? 0) > 0 && settings.value.giftNames?.some((n) => eventData.msg.toLowerCase() === n.toLowerCase()) != true
+    const priceNotMatch = settings.value.minGiftPrice && eventData.price < settings.value.minGiftPrice
+    if (settings.value.giftFilterType === QueueGiftFilterType.Or && (!nameNotMatch || !priceNotMatch)) {
+      return true // { success: true, message: '' }
+    } else if (nameNotMatch) {
+      return false // { success: false, message: `不是有效的排队礼物. 需要: [${settings.value.giftNames?.join(' 或 ')}], 当前: ${eventData.msg}` }
+    } else if (priceNotMatch) {
+      return false // { success: false, message: `不是有效的排队礼物. 需要: 最低 ${settings.value.minGiftPrice} 元, 当前: ${eventData.price}` }
+    }
+  }
+  return true // { success: true, message: '' }
+
+  function checkMatch(word: string) {
+    switch (settings.value.matchType) {
+      case KeywordMatchType.Full:
+        return settings.value.keyword.trim() === word.trim()
+      case KeywordMatchType.Contains:
+        return word.trim().toLowerCase().includes(settings.value.keyword.trim().toLowerCase())
+      case KeywordMatchType.Regex:
+        return new RegExp(settings.value.keyword).test(word)
+      default:
+        return false
+    }
+  }
+}
+async function onUpdateFunctionEnable() {
+  if (accountInfo.value) {
+    const oldValue = JSON.parse(JSON.stringify(accountInfo.value.settings.enableFunctions))
+    if (accountInfo.value?.settings.enableFunctions.includes(FunctionTypes.Queue)) {
+      accountInfo.value.settings.enableFunctions = accountInfo.value.settings.enableFunctions.filter((f) => f != FunctionTypes.Queue)
+    } else {
+      accountInfo.value.settings.enableFunctions.push(FunctionTypes.Queue)
+    }
+    if (!accountInfo.value.settings.queue.keyword) {
+      accountInfo.value.settings.queue.keyword = defaultKeyword.value
+    }
+    await SaveEnableFunctions(accountInfo.value?.settings.enableFunctions)
+      .then((data) => {
+        if (data.code == 200) {
+          message.success(`已${accountInfo.value?.settings.enableFunctions.includes(FunctionTypes.SongRequest) ? '启用' : '禁用'}队列功能`)
+        } else {
+          if (accountInfo.value) {
+            accountInfo.value.settings.enableFunctions = oldValue
+          }
+          message.error(`队列功能${accountInfo.value?.settings.enableFunctions.includes(FunctionTypes.SongRequest) ? '启用' : '禁用'}失败: ${data.message}`)
+        }
+      })
+      .catch((err) => {
+        console.error(err)
+        message.error(`队列功能${accountInfo.value?.settings.enableFunctions.includes(FunctionTypes.SongRequest) ? '启用' : '禁用'}失败: ${err}`)
+      })
+  }
+}
+async function updateSettings() {
+  if (accountInfo.value) {
+    isLoading.value = true
+    await QueryPostAPI(QUEUE_API_URL + 'update-setting', settings.value)
+      .then((data) => {
+        if (data.code == 200) {
+          message.success('已保存')
+        } else {
+          message.error('保存失败: ' + data.message)
+        }
+      })
+      .catch((err) => {
+        console.error(err)
+        message.error('保存失败')
+      })
+      .finally(() => {
+        isLoading.value = false
+      })
+  } else {
+    message.success('完成')
+  }
+}
+async function deleteQueue(values: ResponseQueueModel[]) {
+  await QueryPostAPI(
+    QUEUE_API_URL + 'del',
+    values.map((s) => s.id)
+  )
+    .then((data) => {
+      if (data.code == 200) {
+        message.success('删除成功')
+        originQueue.value = originQueue.value.filter((s) => !values.includes(s))
+      } else {
+        message.error('删除失败: ' + data.message)
+        console.error('删除失败: ' + data.message)
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+      message.error('删除失败')
+    })
+}
+async function deactiveAllSongs() {
+  await QueryGetAPI(QUEUE_API_URL + 'deactive')
+    .then((data) => {
+      if (data.code == 200) {
+        message.success('已全部取消')
+        queue.value.forEach((s) => {
+          if (s.status <= QueueStatus.Progressing) {
+            s.status = QueueStatus.Cancel
+          }
+        })
+      } else {
+        message.error('取消失败: ' + data.message)
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+      message.error('取消失败')
+    })
+}
+const statusFilterOptions = computed(() => {
+  return Object.values(QueueStatus)
+    .filter((t) => /^\d+$/.test(t.toString()))
+    .map((t) => {
+      return {
+        label: STATUS_MAP[t as QueueStatus],
+        value: t,
+      }
+    })
+})
+const columns = [
+  {
+    title: '用户名',
+    key: 'user.name',
+    render: (data) => {
+      return h(
+        NTooltip,
+        { trigger: 'hover' },
+        {
+          trigger: () => data.user?.name,
+          default: () => (data.from == QueueFrom.Manual ? '就是主播自己' : data.user?.uid),
+        }
+      )
+    },
+  },
+  {
+    title: '来自',
+    key: 'from',
+    render(data) {
+      let fromType: 'info' | 'success' | 'default' | 'error'
+      switch (data.from) {
+        case QueueFrom.Danmaku: {
+          fromType = 'info'
+          break
+        }
+        case QueueFrom.Gift: {
+          fromType = 'error'
+          break
+        }
+        case QueueFrom.Web: {
+          fromType = 'success'
+          break
+        }
+        case QueueFrom.Manual: {
+          fromType = 'default'
+          break
+        }
+      }
+      return h(NTag, { size: 'small', type: fromType }, () => {
+        switch (data.from) {
+          case QueueFrom.Danmaku: {
+            return '弹幕' + (data.giftPrice ? ' | ' + data.giftPrice : '')
+          }
+          case QueueFrom.Gift: {
+            return '礼物 | ' + data.giftPrice
+          }
+          case QueueFrom.Manual: {
+            return '手动添加'
+          }
+          case QueueFrom.Web: {
+            return '网页添加'
+          }
+        }
+      })
+    },
+  },
+  {
+    title: '状态',
+    key: 'status',
+    filter(value, row) {
+      return ~row.status == value
+    },
+    filterOptions: statusFilterOptions.value,
+    render(data) {
+      let statusType: 'info' | 'success' | 'warning' | 'error'
+      switch (data.status) {
+        case QueueStatus.Progressing: {
+          statusType = 'success'
+          break
+        }
+        case QueueStatus.Waiting: {
+          statusType = 'warning'
+          break
+        }
+        case QueueStatus.Finish: {
+          statusType = 'info'
+          break
+        }
+        case QueueStatus.Cancel: {
+          statusType = 'error'
+          break
+        }
+      }
+      return h(NTag, { type: statusType, size: 'small', style: data.status == QueueStatus.Progressing ? 'animation: animated-border 2.5s infinite;' : '' }, () => STATUS_MAP[data.status])
+    },
+  },
+  {
+    title: '时间',
+    key: 'time',
+    sorter: (a, b) => a.createAt - b.createAt,
+    render: (data) => {
+      return h(NTime, { time: data.createAt })
+    },
+  },
+  {
+    title: '操作',
+    key: 'manage',
+    width: 100,
+    render(data) {
+      return h(
+        NSpace,
+        {
+          justify: 'center',
+          size: 10,
+        },
+        () => [
+          data.status == QueueStatus.Finish || data.status == QueueStatus.Cancel
+            ? h(NTooltip, null, {
+                trigger: () =>
+                  h(
+                    NButton,
+                    {
+                      size: 'small',
+                      type: 'info',
+                      circle: true,
+                      loading: isLoading.value,
+                      onClick: () => {
+                        updateStatus(data, QueueStatus.Waiting)
+                      },
+                    },
+                    {
+                      icon: () => h(NIcon, { component: ReloadCircleSharp }),
+                    }
+                  ),
+                default: () => '重新放回等待列表',
+              })
+            : undefined,
+          h(
+            NPopconfirm,
+            { onPositiveClick: () => deleteQueue([data]) },
+            {
+              trigger: () =>
+                h(NTooltip, null, {
+                  trigger: () =>
+                    h(
+                      NButton,
+                      {
+                        size: 'small',
+                        type: 'error',
+                        circle: true,
+                        loading: isLoading.value,
+                      },
+                      {
+                        icon: () => h(NIcon, { component: Delete24Filled }),
+                      }
+                    ),
+                  default: () => '删除记录',
+                }),
+              default: () => '确定删除?',
+            }
+          ),
+        ]
+      )
+    },
+  },
+] as DataTableColumns<ResponseQueueModel>
+function GetGuardColor(level: number | null | undefined): string {
+  if (level) {
+    switch (level) {
+      case 1: {
+        return 'rgb(122, 4, 35)'
+      }
+      case 2: {
+        return 'rgb(157, 155, 255)'
+      }
+      case 3: {
+        return 'rgb(104, 136, 241)'
+      }
+    }
+  }
+  return ''
+}
+async function updateActive() {
+  if (!accountInfo.value) return
+  try {
+    const data = await QueryGetAPI<ResponseQueueModel[]>(QUEUE_API_URL + 'get-active', {
+      id: accountInfo.value?.id,
+    })
+    if (data.code == 200) {
+      data.data.forEach((item) => {
+        const queueData = originQueue.value.find((s) => s.id == item.id)
+        if (queueData) {
+          if (queueData.status != item.status) queueData.status = item.status
+          if (queueData.giftPrice != item.giftPrice) {
+            queueData.giftPrice = item.giftPrice
+            message.info(`${queueData.user?.name} 通过发送礼物再次付费: ¥ ${(item?.giftPrice ?? 0) - (queueData?.giftPrice ?? 0)}, 当前总计付费: ¥ ${item.giftPrice}`)
+          }
+        } else {
+          originQueue.value.unshift(item)
+          if (item.from == QueueFrom.Web) {
+            message.success(`[${item.user?.name}] 直接从网页加入队列: ${item.user?.name}`)
+          }
+        }
+      })
+    } else {
+      message.error('无法获取队列: ' + data.message)
+      return []
+    }
+  } catch (err) {
+    console.error(err)
+  }
+}
+let timer: any
+let updateActiveTimer: any
+const updateKey = ref(0)
+onMounted(() => {
+  if (accountInfo.value) {
+    settings.value = accountInfo.value.settings.queue
+  }
+  init()
+})
+onActivated(() => {
+  init()
+})
+function init() {
+  dispose()
+  props.client.on('danmaku', onGetDanmaku)
+  props.client.on('gift', onGetGift)
+  timer = setInterval(() => {
+    updateKey.value++
+  }, 1000)
+  updateActiveTimer = setInterval(() => {
+    updateActive()
+  }, 2000)
+}
+function dispose() {
+  props.client.off('danmaku', onGetDanmaku)
+  props.client.off('gift', onGetGift)
+  clearInterval(timer)
+  clearInterval(updateActiveTimer)
+}
+onDeactivated(() => {
+  dispose()
+})
+onUnmounted(() => {
+  dispose()
+})
+</script>
+
+<template>
+  <NAlert type="info" v-if="accountInfo">
+    启用队列功能
+    <NSwitch :value="accountInfo?.settings.enableFunctions.includes(FunctionTypes.Queue)" @update:value="onUpdateFunctionEnable" />
+
+    <br />
+    <NText depth="3">
+      如果没有部署
+      <NButton text type="primary" tag="a" href="https://www.yuque.com/megghy/dez70g/vfvcyv3024xvaa1p" target="_blank"> VtsuruEventFetcher </NButton>
+      则其需要保持此页面开启才能点歌, 也不要同时开多个页面, 会导致点歌重复 !(部署了则不影响)
+    </NText>
+  </NAlert>
+  <NAlert type="warning" v-else title="你尚未注册并登录 VTsuru.live, 大部分规则设置将不可用 (因为我懒得在前段重写一遍逻辑">
+    <NButton @click="$router.push({ name: 'manage-index' })" type="primary"> 前往登录或注册 </NButton>
+  </NAlert>
+  <br />
+  <NCard size="small">
+    <NSpace align="center">
+      <NTooltip>
+        <template #trigger>
+          <NButton @click="showOBSModal = true" type="primary" :disabled="!accountInfo"> OBS 组件 </NButton>
+        </template>
+        {{ configCanEdit ? '' : '登陆后才可以使用此功能' }}
+      </NTooltip>
+    </NSpace>
+  </NCard>
+  <br />
+  <NCard>
+    <NTabs v-if="!accountInfo || accountInfo.settings.enableFunctions.includes(FunctionTypes.Queue)" animated display-directive="show:lazy">
+      <NTabPane name="list" tab="列表">
+        <NCard size="small">
+          <NSpace align="center">
+            <NTag type="success" :bordered="false">
+              <template #icon>
+                <NIcon :component="PeopleQueue24Filled" />
+              </template>
+              队列 | {{ queue.filter((s) => s.status == QueueStatus.Waiting).length }}
+            </NTag>
+            <NTag type="success" :bordered="false">
+              <template #icon>
+                <NIcon :component="Checkmark12Regular" />
+              </template>
+              今日已处理 | {{ queue.filter((s) => s.status == QueueStatus.Finish && isSameDay(s.finishAt ?? 0, Date.now())).length }} 位
+            </NTag>
+            <NInputGroup>
+              <NInput placeholder="手动添加" v-model:value="newQueueName" />
+              <NButton type="primary" @click="addManual"> 添加 </NButton>
+            </NInputGroup>
+            <NPopconfirm @positive-click="deactiveAllSongs">
+              <template #trigger>
+                <NButton type="error"> 全部取消 </NButton>
+              </template>
+              确定全部取消吗?
+            </NPopconfirm>
+            <NRadioGroup v-model:value="settings.sortType" :disabled="!configCanEdit" @update:value="updateSettings" type="button">
+              <NRadioButton :value="QueueSortType.TimeFirst"> 加入时间优先 </NRadioButton>
+              <NRadioButton :value="QueueSortType.PaymentFist"> 付费价格优先 </NRadioButton>
+              <NRadioButton :value="QueueSortType.GuardFirst"> 舰长优先 (按等级) </NRadioButton>
+            </NRadioGroup>
+          </NSpace>
+        </NCard>
+        <NDivider> 共 {{ queue.length }} 人 </NDivider>
+        <NList v-if="queue.length > 0" :show-divider="false" hoverable>
+          <NListItem v-for="(queueData, index) in queue" :key="queueData.id" style="padding: 5px">
+            <NCard embedded size="small" content-style="padding: 5px;" :style="`${queueData.status == QueueStatus.Progressing ? 'animation: animated-border 2.5s infinite;' : ''};height: 100%;`">
+              <NSpace justify="space-between" align="center" style="height: 100%; margin: 0 5px 0 5px">
+                <NSpace align="center">
+                  <div :style="`border-radius: 4px; background-color: ${queueData.status == QueueStatus.Progressing ? '#75c37f' : '#577fb8'}; width: 20px; height: 20px;text-align: center;`">
+                    {{ index + 1 }}
+                  </div>
+                  <NText strong style="font-size: 18px">
+                    <NTooltip>
+                      <template #trigger>
+                        {{ queueData.user?.name }}
+                      </template>
+                      {{ queueData.user?.uid }}
+                    </NTooltip>
+                  </NText>
+                  <template v-if="queueData.from == QueueFrom.Manual">
+                    <NTag size="small" :bordered="false"> 手动添加 </NTag>
+                  </template>
+                  <NSpace v-if="(queueData.from == QueueFrom.Danmaku || queueData.from == QueueFrom.Gift) && queueData.user?.fans_medal_wearing_status">
+                    <NTag size="tiny" round>
+                      <NTag size="tiny" round :bordered="false">
+                        <NText depth="3">
+                          {{ queueData.user?.fans_medal_level }}
+                        </NText>
+                      </NTag>
+                      <span style="color: #577fb8">
+                        {{ queueData.user?.fans_medal_name }}
+                      </span>
+                    </NTag>
+                  </NSpace>
+                  <NTag v-if="(queueData.user?.guard_level ?? 0) > 0" size="small" :bordered="false" :color="{ textColor: 'white', color: GetGuardColor(queueData.user?.guard_level) }">
+                    {{ queueData.user?.guard_level == 1 ? '总督' : queueData.user?.guard_level == 2 ? '提督' : '舰长' }}
+                  </NTag>
+                  <NTag v-if="(queueData.giftPrice ?? 0) > 0" size="small" :bordered="false" type="error"> 付费 | {{ queueData.giftPrice }} </NTag>
+                  <NTooltip>
+                    <template #trigger>
+                      <NText style="font-size: small">
+                        <NTime :time="queueData.createAt" type="relative" :key="updateKey" />
+                      </NText>
+                    </template>
+                    <NTime :time="queueData.createAt" />
+                  </NTooltip>
+                </NSpace>
+                <NSpace justify="end" align="center">
+                  <NTooltip>
+                    <template #trigger>
+                      <NButton
+                        circle
+                        type="primary"
+                        style="height: 30px; width: 30px"
+                        :disabled="queue.findIndex((s) => s.id != queueData.id && s.status == QueueStatus.Progressing) > -1"
+                        @click="updateStatus(queueData, queueData.status == QueueStatus.Progressing ? QueueStatus.Waiting : QueueStatus.Progressing)"
+                        :style="`animation: ${queueData.status == QueueStatus.Waiting ? '' : 'loading 5s linear infinite'}`"
+                        :secondary="queueData.status == QueueStatus.Progressing"
+                        :loading="isLoading"
+                      >
+                        <template #icon>
+                          <NIcon :component="ClipboardTextLtr24Filled" />
+                        </template>
+                      </NButton>
+                    </template>
+                    {{
+                      queue.findIndex((s) => s.id != queueData.id && s.status == QueueStatus.Progressing) > -1
+                        ? '还有其他正在正在处理中的用户'
+                        : queueData.status == QueueStatus.Waiting && queueData.id
+                        ? '开始处理'
+                        : '取消'
+                    }}
+                  </NTooltip>
+                  <NTooltip>
+                    <template #trigger>
+                      <NButton circle type="success" style="height: 30px; width: 30px" :loading="isLoading" @click="updateStatus(queueData, QueueStatus.Finish)">
+                        <template #icon>
+                          <NIcon :component="Checkmark12Regular" />
+                        </template>
+                      </NButton>
+                    </template>
+                    已完成
+                  </NTooltip>
+                  <NTooltip>
+                    <template #trigger>
+                      <NButton circle type="error" style="height: 30px; width: 30px" :loading="isLoading" @click="updateStatus(queueData, QueueStatus.Cancel)">
+                        <template #icon>
+                          <NIcon :component="Dismiss16Filled" />
+                        </template>
+                      </NButton>
+                    </template>
+                    移出队列
+                  </NTooltip>
+                </NSpace>
+              </NSpace>
+            </NCard>
+          </NListItem>
+        </NList>
+        <NEmpty v-else description="暂无用户" />
+      </NTabPane>
+      <NTabPane name="history" tab="历史">
+        <NCard size="small">
+          <NSpace>
+            <NInputGroup style="width: 300px">
+              <NInputGroupLabel> 筛选用户 </NInputGroupLabel>
+              <NInput v-model:value="filterName" clearable>
+                <template #suffix>
+                  <NCheckbox v-model:checked="filterNameContains"> 包含 </NCheckbox>
+                </template>
+              </NInput>
+            </NInputGroup>
+          </NSpace>
+        </NCard>
+        <NDataTable
+          size="small"
+          ref="table"
+          :columns="columns"
+          :data="originQueue"
+          :pagination="{
+            itemCount: originQueue.length,
+            pageSizes: [20, 50, 100],
+            showSizePicker: true,
+            prefix({ itemCount }) {
+              return `共 ${itemCount} 条记录`
+            },
+          }"
+        />
+      </NTabPane>
+      <NTabPane name="setting" tab="设置">
+        <NSpin :show="isLoading">
+          <NDivider> 规则 </NDivider>
+          <NSpace vertical>
+            <NSpace align="center">
+              <NInputGroup style="width: 350px">
+                <NInputGroupLabel> 加入队列关键词 </NInputGroupLabel>
+                <template v-if="configCanEdit">
+                  <NInput v-model:value="settings.keyword" />
+                  <NButton @click="updateSettings" type="primary">确定</NButton>
+                </template>
+                <NInput v-else v-model:value="defaultKeyword" />
+              </NInputGroup>
+              <NRadioGroup v-model:value="settings.matchType" :disabled="!configCanEdit" @update:value="updateSettings" type="button">
+                <NRadioButton :value="KeywordMatchType.Full"> 完全一致 </NRadioButton>
+                <NRadioButton :value="KeywordMatchType.Contains"> 包含 </NRadioButton>
+                <NRadioButton :value="KeywordMatchType.Regex"> 正则 </NRadioButton>
+              </NRadioGroup>
+            </NSpace>
+            <NInputGroup style="width: 250px">
+              <NInputGroupLabel> 最大队列长度 </NInputGroupLabel>
+              <NInputNumber v-model:value="settings.queueMaxSize" :disabled="!configCanEdit" min="0" max="1000" />
+              <NButton @click="updateSettings" type="info" :disabled="!configCanEdit">确定</NButton>
+            </NInputGroup>
+            <NSpace align="center">
+              <NCheckbox v-model:checked="settings.allowAllDanmaku" @update:checked="updateSettings" :disabled="!configCanEdit"> 允许所有用户加入 </NCheckbox>
+              <template v-if="!settings.allowAllDanmaku">
+                <NInputGroup style="width: 270px">
+                  <NInputGroupLabel> 最低粉丝牌等级 </NInputGroupLabel>
+                  <NInputNumber v-model:value="settings.fanMedalMinLevel" :disabled="!configCanEdit" min="0" />
+                  <NButton @click="updateSettings" type="info" :disabled="!configCanEdit">确定</NButton>
+                </NInputGroup>
+                <NCheckbox v-if="!settings.allowAllDanmaku" v-model:checked="settings.needJianzhang" @update:checked="updateSettings" :disabled="!configCanEdit"> 只允许舰长 </NCheckbox>
+                <NCheckbox v-if="!settings.allowAllDanmaku" v-model:checked="settings.needTidu" @update:checked="updateSettings" :disabled="!configCanEdit"> 只允许提督 </NCheckbox>
+                <NCheckbox v-if="!settings.allowAllDanmaku" v-model:checked="settings.needZongdu" @update:checked="updateSettings" :disabled="!configCanEdit"> 只允许总督 </NCheckbox>
+              </template>
+            </NSpace>
+            <NSpace align="center">
+              <NCheckbox v-model:checked="settings.allowGift" @update:checked="updateSettings" :disabled="!configCanEdit"> 允许通过发送礼物加入队列 </NCheckbox>
+              <template v-if="settings.allowGift">
+                <NInputGroup v-if="settings.allowGift" style="width: 250px">
+                  <NInputGroupLabel> 最低价格 </NInputGroupLabel>
+                  <NInputNumber v-model:value="settings.minGiftPrice" :disabled="!configCanEdit" />
+                  <NButton @click="updateSettings" type="info" :disabled="!configCanEdit">确定</NButton>
+                </NInputGroup>
+                <NSpace align="center">
+                  礼物名
+                  <NSelect
+                    style="width: 250px"
+                    v-model:value="settings.giftNames"
+                    :disabled="!configCanEdit"
+                    filterable
+                    multiple
+                    tag
+                    placeholder="礼物名称，按回车确认"
+                    :show-arrow="false"
+                    :show="false"
+                    @update:value="updateSettings"
+                  />
+                </NSpace>
+                <span>
+                  <NRadioGroup v-model:value="settings.giftFilterType" :disabled="!configCanEdit">
+                    <NRadioButton :value="QueueGiftFilterType.And"> 需同时满足礼物名和价格 </NRadioButton>
+                    <NRadioButton :value="QueueGiftFilterType.Or"> 礼物名/价格 二选一 </NRadioButton>
+                  </NRadioGroup>
+                </span>
+                <NCheckbox v-model:checked="settings.allowIncreasePaymentBySendGift" @update:checked="updateSettings" :disabled="!configCanEdit"> 在队列中时继续发送礼物会叠加 </NCheckbox>
+                <NCheckbox v-model:checked="settings.allowIncreasePaymentBySendGift" @update:checked="updateSettings" :disabled="!configCanEdit"> 在队列中时允许发送任意礼物来增加付费量 </NCheckbox>
+              </template>
+            </NSpace>
+            <NDivider> 冷却 (单位: 秒) </NDivider>
+            <NCheckbox v-model:checked="settings.enableCooldown" @update:checked="updateSettings" :disabled="!configCanEdit"> 启用排队冷却 </NCheckbox>
+            <NSpace v-if="settings.enableCooldown">
+              <NInputGroup style="width: 250px">
+                <NInputGroupLabel> 普通弹幕 </NInputGroupLabel>
+                <NInputNumber v-model:value="settings.cooldownSecond" :disabled="!configCanEdit" />
+                <NButton @click="updateSettings" type="info" :disabled="!configCanEdit">确定</NButton>
+              </NInputGroup>
+              <NInputGroup style="width: 220px">
+                <NInputGroupLabel> 舰长 </NInputGroupLabel>
+                <NInputNumber v-model:value="settings.jianzhangCooldownSecond" :disabled="!configCanEdit" />
+                <NButton @click="updateSettings" type="info" :disabled="!configCanEdit">确定</NButton>
+              </NInputGroup>
+              <NInputGroup style="width: 220px">
+                <NInputGroupLabel> 提督 </NInputGroupLabel>
+                <NInputNumber v-model:value="settings.tiduCooldownSecond" :disabled="!configCanEdit" />
+                <NButton @click="updateSettings" type="info" :disabled="!configCanEdit">确定</NButton>
+              </NInputGroup>
+              <NInputGroup style="width: 220px">
+                <NInputGroupLabel> 总督 </NInputGroupLabel>
+                <NInputNumber v-model:value="settings.zongduCooldownSecond" :disabled="!configCanEdit" />
+                <NButton @click="updateSettings" type="info" :disabled="!configCanEdit">确定</NButton>
+              </NInputGroup>
+            </NSpace>
+            <NDivider> 其他 </NDivider>
+            <NCheckbox v-model:checked="isWarnMessageAutoClose"> 自动关闭加入队列失败时的提示消息 </NCheckbox>
+          </NSpace>
+        </NSpin>
+      </NTabPane>
+    </NTabs>
+  </NCard>
+  <NModal v-model:show="showOBSModal" title="OBS组件" preset="card" style="width: 800px">
+    <NAlert title="这是什么?  " type="info"> 将等待队列以及结果显示在OBS中 </NAlert>
+    <NDivider> 浏览 </NDivider>
+    <div style="height: 500px; width: 280px; position: relative; margin: 0 auto">
+      <QueueOBS :id="accountInfo?.id" />
+    </div>
+    <br />
+    <NInput :value="'https://vtsuru.live/obs/queue?id=' + accountInfo?.id" />
+    <NDivider />
+    <NCollapse>
+      <NCollapseItem title="使用说明">
+        <NUl>
+          <NLi>在 OBS 来源中添加源, 选择 浏览器</NLi>
+          <NLi>在 URL 栏填入上方链接</NLi>
+          <NLi>根据自己的需要调整宽度和高度 (这里是宽 280px 高 500px)</NLi>
+          <NLi>完事</NLi>
+        </NUl>
+      </NCollapseItem>
+    </NCollapse>
+  </NModal>
+</template>
+
+<style>
+@keyframes loading {
+  /*以百分比来规定改变发生的时间 也可以通过"from"和"to",等价于0% 和 100%*/
+  0% {
+    /*rotate(2D旋转) scale(放大或者缩小) translate(移动) skew(翻转)*/
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes animated-border {
+  0% {
+    box-shadow: 0 0 0px #589580;
+  }
+
+  100% {
+    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0);
+  }
+}
+@keyframes animated-border-round {
+  0% {
+    box-shadow: 0 0 0px #589580;
+    border-radius: 50%;
+  }
+
+  100% {
+    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0);
+    border-radius: 50%;
+  }
+}
+</style>