add not connect alert

src/views/open_live/MusicRequest.vue

@@ -1,46 +1,245 @@
 <script setup lang="ts">
-import { useAccount } from '@/api/account'
-import { SongRequestInfo } from '@/api/api-models'
+import { SaveAccountSettings, useAccount } from '@/api/account'
+import { EventDataTypes, EventModel, FunctionTypes, OpenLiveInfo, Setting_SongRequest, SongRequestFrom, SongRequestInfo, SongRequestStatus, SongRequestUserInfo } from '@/api/api-models'
+import { QueryGetAPI, QueryPostAPI, QueryPostAPIWithParams } from '@/api/query'
 import DanmakuClient, { AuthInfo, DanmakuInfo, RoomAuthInfo, SCInfo } from '@/data/DanmakuClient'
-import { NList, NTabPane, NTabs, useMessage } from 'naive-ui'
-import { onMounted, onUnmounted, ref } from 'vue'
+import { OPEN_LIVE_API_URL, SONG_REQUEST_API_URL } from '@/data/constants'
+import { Mic24Filled, PeopleQueue24Filled } from '@vicons/fluent'
+import { useStorage } from '@vueuse/core'
+import { number } from 'echarts'
+import { NAlert, NButton, NCard, NDivider, NIcon, NInput, NInputGroup, NList, NListItem, NSpace, NSwitch, NTabPane, NTabs, NTag, NText, NTooltip, useMessage } from 'naive-ui'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 
+const defaultSettings = {
+  orderPrefix: '点歌',
+  onlyAllowSongList: false,
+  queueMaxSize: 10,
+  allowAllDanmaku: false,
+  allowFromWeb: true,
+  needWearFanMedal: false,
+  needJianzhang: false,
+  needTidu: false,
+  needZongdu: false,
+  allowSC: true,
+  sCIgnoreLimit: true,
+  sCMinPrice: 30,
+  fanMedalMinLevel: 0,
+  allowReorderSong: false,
+  cooldownSecond: 1200,
+  zongduCooldownSecond: 300,
+  tiduCooldownSecond: 600,
+  jianzhangCooldownSecond: 900,
+} as Setting_SongRequest
+
 const route = useRoute()
 const accountInfo = useAccount()
 const message = useMessage()
 
+const settings = computed({
+  get: () => {
+    if (accountInfo.value) {
+      return accountInfo.value.settings.songRequest
+    }
+    return defaultSettings
+  },
+  set: (value) => {
+    if (accountInfo.value) {
+      accountInfo.value.settings.songRequest = value
+    }
+  },
+})
+
 const props = defineProps<{
   client: DanmakuClient
   roomInfo: RoomAuthInfo
   code: string | undefined
+  isOpenLive?: boolean
 }>()
 
-const activeSongs = ref<SongRequestInfo[]>([])
+const localActiveSongs = useStorage('SongRequest.ActiveSongs', [] as SongRequestInfo[])
+const activeSongs = ref<SongRequestInfo[]>(await getActiveSong())
+
+const newSongName = ref('')
+
+const defaultPrefix = useStorage('Settings.SongRequest.DefaultPrefix', '点歌')
+
+async function getActiveSong() {
+  if (accountInfo.value) {
+    try {
+      const data = await QueryGetAPI<SongRequestInfo[]>(SONG_REQUEST_API_URL + 'get-active', {
+        id: accountInfo.value.id,
+      })
+      if (data.code == 200) {
+        console.log('[OPEN-LIVE-Song-Request] 已获取点歌队列')
+        return data.data
+      } else {
+        message.error('无法获取点歌队列: ' + data.message)
+        return []
+      }
+    } catch (err) {
+      console.error(err)
+    }
+    return []
+  } else {
+    return localActiveSongs.value
+  }
+}
+async function addSong(danmaku: EventModel) {
+  console.log(`[OPEN-LIVE-Song-Request] 收到 [${danmaku.name}] 的点歌${danmaku.type == EventDataTypes.SC ? 'SC' : '弹幕'}: ${danmaku.msg}`)
+  if (accountInfo.value) {
+    await QueryPostAPI<SongRequestInfo>(SONG_REQUEST_API_URL + 'try-add', danmaku)
+      .then((data) => {
+        if (data.code == 200) {
+          message.success(`[${danmaku.name}] 添加曲目: ${data.data.songName}`)
+        } else {
+          message.error(`[${danmaku.name}] 添加曲目失败: ${data.message}`)
+          console.log(`[OPEN-LIVE-Song-Request] [${danmaku.name}] 添加曲目失败: ${data.message}`)
+        }
+      })
+      .catch((err) => {
+        console.error(err)
+      })
+  } else {
+    const songData = {
+      songName: danmaku.msg.trim().substring(settings.value.orderPrefix.length),
+      song: undefined,
+      status: SongRequestStatus.Waiting,
+      from: danmaku.type == EventDataTypes.Message ? SongRequestFrom.Danmaku : SongRequestFrom.SC,
+      scPrice: danmaku.type == EventDataTypes.SC ? danmaku.price : 0,
+      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 SongRequestUserInfo,
+      createAt: Date.now(),
+    } as SongRequestInfo
+    localActiveSongs.value.push(songData)
+    message.success(`[${danmaku.name}] 添加曲目: ${songData.songName}`)
+  }
+}
+async function addSongManual() {
+  if (!newSongName.value) {
+    message.error('请输入曲目名')
+    return
+  }
+  if (accountInfo.value) {
+    await QueryPostAPIWithParams<SongRequestInfo>(SONG_REQUEST_API_URL + 'add', {
+      name: newSongName.value,
+    })
+      .then((data) => {
+        if (data.code == 200) {
+          message.success(`已手动添加曲目: ${data.data.songName}`)
+        } else {
+          message.error(`手动添加曲目失败: ${data.message}`)
+        }
+      })
+      .catch((err) => {
+        console.error(err)
+      })
+  } else {
+    const songData = {
+      songName: newSongName.value,
+      song: undefined,
+      status: SongRequestStatus.Waiting,
+      from: SongRequestFrom.Manual,
+      scPrice: undefined,
+      user: undefined,
+      createAt: Date.now(),
+    } as SongRequestInfo
+    localActiveSongs.value.push(songData)
+    message.success(`已手动添加曲目: ${songData.songName}`)
+  }
+}
 
 function onGetDanmaku(danmaku: DanmakuInfo) {
-  console.log(danmaku)
+  if (checkMessage(danmaku.msg)) {
+    addSong({
+      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 onGetSC(danmaku: SCInfo) {
-  console.log(danmaku)
+  if (settings.value.allowSC && checkMessage(danmaku.message)) {
+    addSong({
+      msg: danmaku.message,
+      type: EventDataTypes.SC,
+      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.rmb,
+    } as EventModel)
+  }
+}
+function checkMessage(msg: string) {
+  return msg
+    .trim()
+    .toLowerCase()
+    .startsWith(accountInfo.value ? settings.value.orderPrefix : defaultPrefix.value)
+}
+async function onUpdateFunctionEnable() {
+  if (accountInfo.value) {
+    const oldValue = JSON.parse(JSON.stringify(accountInfo.value.settings.enableFunctions))
+    if (accountInfo.value?.settings.enableFunctions.includes(FunctionTypes.SongRequest)) {
+      accountInfo.value.settings.enableFunctions = accountInfo.value.settings.enableFunctions.filter((f) => f != FunctionTypes.SongRequest)
+    } else {
+      accountInfo.value.settings.enableFunctions.push(FunctionTypes.SongRequest)
+    }
+    accountInfo.value.settings.enableFunctions.push
+    await SaveAccountSettings()
+      .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}`)
+      })
+  }
 }
 
+let timer: any
 onMounted(() => {
+  if (accountInfo.value) {
+    settings.value = accountInfo.value.settings.songRequest
+  }
   props.client.on('danmaku', onGetDanmaku)
   props.client.on('sc', onGetSC)
+  timer = setInterval(() => {})
 })
 onUnmounted(() => {
   props.client.off('danmaku', onGetDanmaku)
   props.client.off('sc', onGetSC)
+  clearInterval(timer)
 })
 </script>
 
 <template>
   开发中...
-  <NTabs animated>
-    <NTabPane name="list" tab="列表">
-      <NList> </NList>
-    </NTabPane>
-    <NTabPane name="history" tab="历史"> </NTabPane>
-  </NTabs>
 </template>

src/views/open_live/OpenLottery.vue

@@ -333,193 +333,200 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <NLayoutContent style="height: 100vh; padding: 20px">
-    <NResult v-if="!code && !accountInfo" status="403" title="403" description="该页面只能从幻星平台访问或者注册用户使用" />
-    <template v-else>
+  <NResult v-if="!code && !accountInfo" status="403" title="403" description="该页面只能从幻星平台访问或者注册用户使用" />
+  <template v-else>
+    <NCard>
+      <template #header>
+        直播抽奖
+        <NDivider vertical />
+        <NButton text type="primary" tag="a" href="https://vtsuru.live" target="_blank"> 前往 VTsuru.live 主站 </NButton>
+      </template>
+      <NAlert v-if="!code && accountInfo && !accountInfo.isBiliVerified" type="error"> 请先绑定B站账号 </NAlert>
+      <NAlert v-else-if="!code && accountInfo && accountInfo.biliAuthCodeStatus != 1" type="error"> 身份码状态异常, 请重新绑定 </NAlert>
       <NCard>
-        <template #header>
-          直播抽奖
-          <NDivider vertical />
-          <NButton text type="primary" tag="a" href="https://vtsuru.live" target="_blank"> 前往 VTsuru.live 主站 </NButton>
+        <NSpace align="center">
+          <NButton type="info" @click="showModal = true" size="small"> 抽奖历史</NButton>
+          <NButton type="success" @click="showOBSModal = true" size="small"> OBS组件</NButton>
+        </NSpace>
+      </NCard>
+      <NCard size="small" embedded title="抽奖选项">
+        <template #header-extra>
+          <NButton size="small" secondary @click="lotteryOption = defaultOption" :disabled="isStartLottery"> 恢复默认 </NButton>
         </template>
-        <NAlert v-if="!code && accountInfo && !accountInfo.isBiliVerified" type="error"> 请先绑定B站账号 </NAlert>
-        <NAlert v-else-if="!code && accountInfo && accountInfo.biliAuthCodeStatus != 1" type="error"> 身份码状态异常, 请重新绑定 </NAlert>
-        <NCard>
-          <NSpace align="center">
-            <NButton type="info" @click="showModal = true" size="small"> 抽奖历史</NButton>
-            <NButton type="success" @click="showOBSModal = true" size="small"> OBS组件</NButton>
-          </NSpace>
-        </NCard>
-        <NCard size="small" embedded title="抽奖选项">
-          <template #header-extra>
-            <NButton size="small" secondary @click="lotteryOption = defaultOption" :disabled="isStartLottery"> 恢复默认 </NButton>
-          </template>
-          <NSpace justify="center" align="center">
-            <NTag :bordered="false"> 抽奖类型 </NTag>
-            <NRadioGroup v-model:value="lotteryOption.type" :disabled="isLottering" size="small">
-              <NRadioButton value="danmaku" :disabled="isStartLottery"> 弹幕 </NRadioButton>
-              <NRadioButton value="gift" :disabled="isStartLottery"> 礼物 </NRadioButton>
-            </NRadioGroup>
-          </NSpace>
-          <NDivider style="margin: 10px 0 10px 0"></NDivider>
-          <NSpace align="center">
-            <NInputGroup style="max-width: 200px">
-              <NInputGroupLabel> 抽选人数 </NInputGroupLabel>
-              <NInputNumber :disabled="isStartLottery" v-model:value="lotteryOption.resultCount" placeholder="" min="1" />
+        <NSpace justify="center" align="center">
+          <NTag :bordered="false"> 抽奖类型 </NTag>
+          <NRadioGroup v-model:value="lotteryOption.type" :disabled="isLottering" size="small">
+            <NRadioButton value="danmaku" :disabled="isStartLottery"> 弹幕 </NRadioButton>
+            <NRadioButton value="gift" :disabled="isStartLottery"> 礼物 </NRadioButton>
+          </NRadioGroup>
+        </NSpace>
+        <NDivider style="margin: 10px 0 10px 0"></NDivider>
+        <NSpace align="center">
+          <NInputGroup style="max-width: 200px">
+            <NInputGroupLabel> 抽选人数 </NInputGroupLabel>
+            <NInputNumber :disabled="isStartLottery" v-model:value="lotteryOption.resultCount" placeholder="" min="1" />
+          </NInputGroup>
+          <NCheckbox :disabled="isStartLottery" v-model:checked="lotteryOption.needGuard"> 需要上舰 </NCheckbox>
+          <NCheckbox :disabled="isStartLottery" v-model:checked="lotteryOption.needFanMedal"> 需要粉丝牌 </NCheckbox>
+          <NCollapseTransition>
+            <NInputGroup v-if="lotteryOption.needFanMedal" style="max-width: 200px">
+              <NInputGroupLabel> 最低粉丝牌等级 </NInputGroupLabel>
+              <NInputNumber v-model:value="lotteryOption.fanCardLevel" min="1" max="50" :default-value="1" :disabled="isLottering || isStartLottery" />
             </NInputGroup>
-            <NCheckbox :disabled="isStartLottery" v-model:checked="lotteryOption.needGuard"> 需要上舰 </NCheckbox>
-            <NCheckbox :disabled="isStartLottery" v-model:checked="lotteryOption.needFanMedal"> 需要粉丝牌 </NCheckbox>
-            <NCollapseTransition>
-              <NInputGroup v-if="lotteryOption.needFanMedal" style="max-width: 200px">
-                <NInputGroupLabel> 最低粉丝牌等级 </NInputGroupLabel>
-                <NInputNumber v-model:value="lotteryOption.fanCardLevel" min="1" max="50" :default-value="1" :disabled="isLottering || isStartLottery" />
-              </NInputGroup>
-            </NCollapseTransition>
-            <template v-if="lotteryOption.type == 'danmaku'">
+          </NCollapseTransition>
+          <template v-if="lotteryOption.type == 'danmaku'">
+            <NTooltip>
+              <template #trigger>
+                <NInputGroup style="max-width: 250px">
+                  <NInputGroupLabel> 弹幕内容 </NInputGroupLabel>
+                  <NInput :disabled="isStartLottery" v-model:value="lotteryOption.danmakuKeyword" placeholder="留空则任何弹幕都可以" />
+                </NInputGroup>
+              </template>
+              符合规则的弹幕才会被添加到抽奖队列中
+            </NTooltip>
+            <NRadioGroup v-model:value="lotteryOption.danmakuFilterType" name="判定类型" :disabled="isLottering" size="small">
+              <NRadioButton :disabled="isStartLottery" value="all"> 完全一致 </NRadioButton>
+              <NRadioButton :disabled="isStartLottery" value="contains"> 包含 </NRadioButton>
+              <NRadioButton :disabled="isStartLottery" value="regex"> 正则 </NRadioButton>
+            </NRadioGroup>
+          </template>
+          <template v-else-if="lotteryOption.type == 'gift'">
+            <NInputGroup style="max-width: 250px">
+              <NInputGroupLabel> 最低价格 </NInputGroupLabel>
+              <NInputNumber :disabled="isStartLottery" v-model:value="lotteryOption.giftMinPrice" placeholder="留空则不限制" />
+            </NInputGroup>
+            <NInputGroup style="max-width: 200px">
+              <NInputGroupLabel> 礼物名称 </NInputGroupLabel>
+              <NInput :disabled="isStartLottery" v-model:value="lotteryOption.giftName" placeholder="留空则不限制" />
+            </NInputGroup>
+          </template>
+        </NSpace>
+        <NDivider style="margin: 10px 0 10px 0"></NDivider>
+        <NSpace justify="center" align="center">
+          <NTag :bordered="false"> 抽取方式 </NTag>
+          <NRadioGroup v-model:value="lotteryOption.lotteryType" name="抽取类型" size="small" :disabled="isLottering">
+            <NRadioButton value="single">
+              单个
               <NTooltip>
                 <template #trigger>
-                  <NInputGroup style="max-width: 250px">
-                    <NInputGroupLabel> 弹幕内容 </NInputGroupLabel>
-                    <NInput :disabled="isStartLottery" v-model:value="lotteryOption.danmakuKeyword" placeholder="留空则任何弹幕都可以" />
-                  </NInputGroup>
+                  <NIcon :component="Info24Filled" />
                 </template>
-                符合规则的弹幕才会被添加到抽奖队列中
+                一个一个减少
               </NTooltip>
-              <NRadioGroup v-model:value="lotteryOption.danmakuFilterType" name="判定类型" :disabled="isLottering" size="small">
-                <NRadioButton :disabled="isStartLottery" value="all"> 完全一致 </NRadioButton>
-                <NRadioButton :disabled="isStartLottery" value="contains"> 包含 </NRadioButton>
-                <NRadioButton :disabled="isStartLottery" value="regex"> 正则 </NRadioButton>
-              </NRadioGroup>
-            </template>
-            <template v-else-if="lotteryOption.type == 'gift'">
-              <NInputGroup style="max-width: 250px">
-                <NInputGroupLabel> 最低价格 </NInputGroupLabel>
-                <NInputNumber :disabled="isStartLottery" v-model:value="lotteryOption.giftMinPrice" placeholder="留空则不限制" />
-              </NInputGroup>
-              <NInputGroup style="max-width: 200px">
-                <NInputGroupLabel> 礼物名称 </NInputGroupLabel>
-                <NInput :disabled="isStartLottery" v-model:value="lotteryOption.giftName" placeholder="留空则不限制" />
-              </NInputGroup>
-            </template>
-          </NSpace>
-          <NDivider style="margin: 10px 0 10px 0"></NDivider>
-          <NSpace justify="center" align="center">
-            <NTag :bordered="false"> 抽取方式 </NTag>
-            <NRadioGroup v-model:value="lotteryOption.lotteryType" name="抽取类型" size="small" :disabled="isLottering">
-              <NRadioButton value="single">
-                单个
-                <NTooltip>
-                  <template #trigger>
-                    <NIcon :component="Info24Filled" />
-                  </template>
-                  一个一个减少
-                </NTooltip>
-              </NRadioButton>
-              <NRadioButton value="half">
-                减半
-                <NTooltip>
-                  <template #trigger>
-                    <NIcon :component="Info24Filled" />
-                  </template>
-                  点一次减少一半
-                </NTooltip>
-              </NRadioButton>
-            </NRadioGroup>
-          </NSpace>
-        </NCard>
-        <NCard v-if="originUsers" size="small">
-          <NSpace justify="center" align="center">
-            <NButton type="primary" @click="continueLottery" :loading="isStartLottery" :disabled="isStartLottery || isLotteried || !client"> 开始 </NButton>
-            <NButton type="warning" :disabled="!isStartLottery" @click="pause"> 停止 </NButton>
-            <NButton type="error" :disabled="isLottering || originUsers.length == 0" @click="clear"> 清空 </NButton>
-          </NSpace>
-          <NDivider style="margin: 20px 0 20px 0"> <template v-if="isStartLottery"> 进行抽取前需要先停止 </template> </NDivider>
-          <NSpace justify="center">
-            <NButton type="primary" secondary @click="startLottery" :loading="isLottering" :disabled="isStartLottery || isLotteried"> 进行抽取 </NButton>
-            <NButton type="info" secondary :disabled="isStartLottery || isLottering || !isLotteried" @click="reset"> 重置 </NButton>
-          </NSpace>
-          <NDivider style="margin: 10px 0 10px 0"> 共 {{ currentUsers?.length }} 人</NDivider>
-          <NGrid v-if="currentUsers.length > 0" cols="1 500:2 800:3 1000:4" :x-gap="12" :y-gap="8">
-            <NGridItem v-for="item in currentUsers" v-bind:key="item.uId">
-              <NCard size="small" :title="item.name" style="height: 155px" embedded>
-                <template #header>
-                  <NSpace align="center" vertical :size="5">
-                    <NAvatar round lazy borderd :size="64" :src="item.avatar + '@64w_64h'" :img-props="{ referrerpolicy: 'no-referrer' }" style="box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2)" />
-                    <NSpace v-if="item.fans_medal_wearing_status">
-                      <NTag size="tiny" round>
-                        <NTag size="tiny" round :bordered="false">
-                          {{ item.fans_medal_level }}
-                        </NTag>
-                        <span style="color: #577fb8">
-                          {{ item.fans_medal_name }}
-                        </span>
-                      </NTag>
-                    </NSpace>
-                    <NTag v-else size="tiny" round :bordered="false"> 无粉丝牌 </NTag>
-                    {{ item.name }}
-                  </NSpace>
-
-                  <NButton style="position: absolute; right: 5px; top: 5px; color: #753e3e" @click="removeUser(item)" size="small" circle>
-                    <template #icon>
-                      <NIcon :component="Delete24Filled" />
-                    </template>
-                  </NButton>
+            </NRadioButton>
+            <NRadioButton value="half">
+              减半
+              <NTooltip>
+                <template #trigger>
+                  <NIcon :component="Info24Filled" />
                 </template>
-              </NCard>
-            </NGridItem>
-          </NGrid>
-          <NEmpty v-else description="暂无用户" />
-        </NCard>
+                点一次减少一半
+              </NTooltip>
+            </NRadioButton>
+          </NRadioGroup>
+        </NSpace>
       </NCard>
-    </template>
-    <NModal v-model:show="showModal" preset="card" title="抽奖结果" style="max-width: 90%; width: 800px" closable>
-      <template #header-extra>
-        <NButton type="error" size="small" @click="lotteryHistory = []"> 清空 </NButton>
-      </template>
-      <NScrollbar v-if="lotteryHistory.length > 0" style="max-height: 80vh">
-        <NList>
-          <NListItem v-for="item in lotteryHistory" :key="item.time">
-            <NCard size="small">
+      <NCard v-if="originUsers" size="small">
+        <NSpace justify="center" align="center">
+          <NButton type="primary" @click="continueLottery" :loading="isStartLottery" :disabled="isStartLottery || isLotteried || !client"> 开始 </NButton>
+          <NButton type="warning" :disabled="!isStartLottery" @click="pause"> 停止 </NButton>
+          <NButton type="error" :disabled="isLottering || originUsers.length == 0" @click="clear"> 清空 </NButton>
+        </NSpace>
+        <NDivider style="margin: 20px 0 20px 0"> <template v-if="isStartLottery"> 进行抽取前需要先停止 </template> </NDivider>
+        <NSpace justify="center">
+          <NButton
+            type="primary"
+            secondary
+            @click="startLottery"
+            :loading="isLottering"
+            :disabled="isStartLottery || isLotteried"
+            data-umami-event="Open-Live Use Lottery"
+            :data-umami-event-uid="client.roomAuthInfo.value?.anchor_info.uid"
+          >
+            进行抽取
+          </NButton>
+          <NButton type="info" secondary :disabled="isStartLottery || isLottering || !isLotteried" @click="reset"> 重置 </NButton>
+        </NSpace>
+        <NDivider style="margin: 10px 0 10px 0"> 共 {{ currentUsers?.length }} 人</NDivider>
+        <NGrid v-if="currentUsers.length > 0" cols="1 500:2 800:3 1000:4" :x-gap="12" :y-gap="8">
+          <NGridItem v-for="item in currentUsers" v-bind:key="item.uId">
+            <NCard size="small" :title="item.name" style="height: 155px" embedded>
               <template #header>
-                <NTime :time="item.time" />
-              </template>
-              <template #header-extra>
-                <NButton type="error" size="small" @click="lotteryHistory.splice(lotteryHistory.indexOf(item), 1)"> 删除 </NButton>
-              </template>
-              <NSpace vertical>
-                <NSpace v-for="user in item.users" :key="user.uId">
-                  <NAvatar round lazy :src="user.avatar + '@64w_64h'" :img-props="{ referrerpolicy: 'no-referrer' }" />
-                  {{ user.name }}
+                <NSpace align="center" vertical :size="5">
+                  <NAvatar round lazy borderd :size="64" :src="item.avatar + '@64w_64h'" :img-props="{ referrerpolicy: 'no-referrer' }" style="box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2)" />
+                  <NSpace v-if="item.fans_medal_wearing_status">
+                    <NTag size="tiny" round>
+                      <NTag size="tiny" round :bordered="false">
+                        {{ item.fans_medal_level }}
+                      </NTag>
+                      <span style="color: #577fb8">
+                        {{ item.fans_medal_name }}
+                      </span>
+                    </NTag>
+                  </NSpace>
+                  <NTag v-else size="tiny" round :bordered="false"> 无粉丝牌 </NTag>
+                  {{ item.name }}
                 </NSpace>
-              </NSpace>
-            </NCard>
-          </NListItem>
-        </NList>
-      </NScrollbar>
-      <NEmpty v-else description="暂无记录" />
-    </NModal>
-    <NModal v-model:show="showOBSModal" preset="card" title="OBS 组件" style="max-width: 90%; width: 800px; max-height: 90vh" closable content-style="overflow: auto">
-      <NAlert title="这是什么?  " type="info"> 将等待队列以及结果显示在OBS中 </NAlert>
-      <NDivider> 浏览 </NDivider>
-      <div style="height: 400px; width: 250px; position: relative; margin: 0 auto">
-        <LiveLotteryOBS :code="code" />
-      </div>
-      <br />
-      <NInput :value="'https://vtsuru.live/obs/live-lottery?code=' + code" />
-      <NDivider />
-      <NCollapse>
-        <NCollapseItem title="使用说明">
-          <NUl>
-            <NLi>在 OBS 来源中添加源, 选择 浏览器</NLi>
-            <NLi>在 URL 栏填入上方链接</NLi>
-            <NLi>根据自己的需要调整宽度和高度</NLi>
-            <NLi>完事</NLi>
-          </NUl>
-        </NCollapseItem>
-      </NCollapse>
 
-      <NDivider />
-    </NModal>
-  </NLayoutContent>
+                <NButton style="position: absolute; right: 5px; top: 5px; color: #753e3e" @click="removeUser(item)" size="small" circle>
+                  <template #icon>
+                    <NIcon :component="Delete24Filled" />
+                  </template>
+                </NButton>
+              </template>
+            </NCard>
+          </NGridItem>
+        </NGrid>
+        <NEmpty v-else description="暂无用户" />
+      </NCard>
+    </NCard>
+  </template>
+  <NModal v-model:show="showModal" preset="card" title="抽奖结果" style="max-width: 90%; width: 800px" closable>
+    <template #header-extra>
+      <NButton type="error" size="small" @click="lotteryHistory = []"> 清空 </NButton>
+    </template>
+    <NScrollbar v-if="lotteryHistory.length > 0" style="max-height: 80vh">
+      <NList>
+        <NListItem v-for="item in lotteryHistory" :key="item.time">
+          <NCard size="small">
+            <template #header>
+              <NTime :time="item.time" />
+            </template>
+            <template #header-extra>
+              <NButton type="error" size="small" @click="lotteryHistory.splice(lotteryHistory.indexOf(item), 1)"> 删除 </NButton>
+            </template>
+            <NSpace vertical>
+              <NSpace v-for="user in item.users" :key="user.uId">
+                <NAvatar round lazy :src="user.avatar + '@64w_64h'" :img-props="{ referrerpolicy: 'no-referrer' }" />
+                {{ user.name }}
+              </NSpace>
+            </NSpace>
+          </NCard>
+        </NListItem>
+      </NList>
+    </NScrollbar>
+    <NEmpty v-else description="暂无记录" />
+  </NModal>
+  <NModal v-model:show="showOBSModal" preset="card" title="OBS 组件" style="max-width: 90%; width: 800px; max-height: 90vh" closable content-style="overflow: auto">
+    <NAlert title="这是什么?  " type="info"> 将等待队列以及结果显示在OBS中 </NAlert>
+    <NDivider> 浏览 </NDivider>
+    <div style="height: 400px; width: 250px; position: relative; margin: 0 auto">
+      <LiveLotteryOBS :code="code" />
+    </div>
+    <br />
+    <NInput :value="'https://vtsuru.live/obs/live-lottery?code=' + code" />
+    <NDivider />
+    <NCollapse>
+      <NCollapseItem title="使用说明">
+        <NUl>
+          <NLi>在 OBS 来源中添加源, 选择 浏览器</NLi>
+          <NLi>在 URL 栏填入上方链接</NLi>
+          <NLi>根据自己的需要调整宽度和高度</NLi>
+          <NLi>完事</NLi>
+        </NUl>
+      </NCollapseItem>
+    </NCollapse>
+
+    <NDivider />
+  </NModal>
 </template>
-@/data/DanmakuClient