feat: 支持礼物，上舰，观众入场信息筛选

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bilicli",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "",
   "homepage": "https://github.com/ddiu8081/bilicli#readme",
   "repository": {
@@ -41,7 +41,7 @@
     "@temir/core": "^0.0.20",
     "@temir/link": "^0.0.20",
     "@temir/tab": "^0.0.20",
-    "blive-message-listener": "^0.1.8",
+    "blive-message-listener": "^0.1.11",
     "dayjs": "^1.11.5",
     "ohmyfetch": "^0.4.19",
     "vue": "^3.2.39",

src/App.vue

@@ -1,25 +1,35 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { startListen } from 'blive-message-listener'
-import type { MsgHandler, Message, DanmuMsg, SuperChatMsg } from 'blive-message-listener'
+import type { 
+  MsgHandler, Message,
+  DanmuMsg, SuperChatMsg, GiftMsg, GuardBuyMsg, NewComerMsg
+} from 'blive-message-listener'
 import { TBox } from '@temir/core'
 import { getRoomInfo, type RoomInfo } from './utils/getInfo'
 import { getInputId } from './utils/cli'
 
 import CliHeader from './components/CliHeader.vue'
-import DanmuMsgCom from './components/DanmuMsgCom.vue'
-import SuperChatMsgCom from './components/SuperChatMsgCom.vue'
-// import GiftMsgCom from './components/GiftMsgCom.vue'
 import TabSelector from './components/TabSelector.vue'
 
+import DanmuMsgCom from './components/msgCom/DanmuMsgCom.vue'
+import SuperChatMsgCom from './components/msgCom/SuperChatMsgCom.vue'
+import GiftMsgCom from './components/msgCom/GiftMsgCom.vue'
+import GuardBuyMsgCom from './components/msgCom/GuardBuyMsgCom.vue'
+import NewComerCom from './components/msgCom/NewComerMsgCom.vue'
+
 const inputRoomId = getInputId()
 const currentRoomInfo = ref<RoomInfo | null>(null)
 const watchers = ref(0)
 const attention = ref(0)
+const selectedTab = ref(0)
+
 const allList = ref<Message<any>[]>([])
 const danmuList = ref<Message<DanmuMsg>[]>([])
 const superChatList = ref<Message<SuperChatMsg>[]>([])
-const selectedTab = ref(0)
+const giftList = ref<Message<GiftMsg>[]>([])
+const guardBuyList = ref<Message<GuardBuyMsg>[]>([])
+const newComerList = ref<Message<NewComerMsg>[]>([])
 
 onMounted(async () => {
   const roomInfo = await getRoomInfo(inputRoomId)
@@ -44,6 +54,18 @@ onMounted(async () => {
         allList.value.push(msg)
         superChatList.value.push(msg)
       },
+      onGift: (msg) => {
+        allList.value.push(msg)
+        giftList.value.push(msg)
+      },
+      onGuardBuy: (msg) => {
+        allList.value.push(msg)
+        guardBuyList.value.push(msg)
+      },
+      onNewComer: (msg) => {
+        allList.value.push(msg)
+        newComerList.value.push(msg)
+      },
     }
     startListen(roomInfo.room_id, handler)
   } catch (error) {
@@ -70,6 +92,15 @@ const handleTabChange = (index: number) => {
         <TBox v-else-if="selectedTab === 2" flex-direction="column">
           <SuperChatMsgCom :msg="msg.body" v-for="msg in superChatList.slice(-14)" :key="msg.id" />
         </TBox>
+        <TBox v-else-if="selectedTab === 3" flex-direction="column">
+          <GiftMsgCom :msg="msg.body" v-for="msg in giftList.slice(-14)" :key="msg.id" />
+        </TBox>
+        <TBox v-else-if="selectedTab === 4" flex-direction="column">
+          <GuardBuyMsgCom :msg="msg.body" v-for="msg in guardBuyList.slice(-14)" :key="msg.id" />
+        </TBox>
+        <TBox v-else-if="selectedTab === 5" flex-direction="column">
+          <NewComerCom :msg="msg.body" v-for="msg in newComerList.slice(-14)" :key="msg.id" />
+        </TBox>
         <TBox v-else flex-direction="column">
         </TBox>
       </TBox>

src/components/TabSelector.vue

@@ -4,9 +4,8 @@ import { TBox, TText } from '@temir/core'
 import { TTab, TTabs } from '@temir/tab'
 // import type { DanmuMsg } from 'danmu-console-helper'
 
-const tabs = ['ALL', '弹幕', 'SC', '礼物']
+const tabs = ['ALL', '弹幕', 'SC', '礼物', '上舰', '进场']
 const activeIndex = ref(0)
-const selectedText = computed(() => tabs[activeIndex.value])
 
 const emit = defineEmits<{
   (e: 'change', value: number): void

src/components/UserName.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { TBox, TText } from '@temir/core'
 import type { User } from 'blive-message-listener'
-import { addSpace, getUserNameColor } from '../utils/format'
+import { addSpace, getGuardColor } from '../utils/format'
 
 const { userInfo } = defineProps<{
   userInfo: User
@@ -26,7 +26,7 @@ const badgeColor = computed(() => {
     </TBox>
     <TText background-color="blue">{{ userInfo.identity?.rank ? ` 榜${userInfo.identity.rank} ` : '' }}</TText>
     <TText background-color="red">{{ userInfo.identity?.room_admin ? '房' : '' }}</TText>
-    <TText bold :color="getUserNameColor(userInfo.identity?.guard_level)">{{ userInfo.uname }}</TText>
+    <TText bold :color="getGuardColor(userInfo.identity?.guard_level)">{{ userInfo.uname }}</TText>
     <TText>: </TText>
   </TBox>
 </template>

src/components/DanmuMsgCom.vue → src/components/msgCom/DanmuMsgCom.vue

@@ -1,20 +1,12 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import { TBox, TText } from '@temir/core'
 import type { DanmuMsg } from 'blive-message-listener'
-import UserName from './UserName.vue'
+import UserName from '../UserName.vue'
 
 const { msg } = defineProps<{
   msg: DanmuMsg
 }>()
 
-const badgeColor = computed(() => {
-  if (msg.user.badge?.anchor.is_same_room) {
-    return msg.user.badge.color
-  }
-  return '#666666'
-})
-
 </script>
 
 <template>

src/components/msgCom/GiftMsgCom.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { TBox, TText } from '@temir/core'
+import type { GiftMsg } from 'blive-message-listener'
+import UserName from '../UserName.vue'
+
+const { msg } = defineProps<{
+  msg: GiftMsg
+}>()
+
+</script>
+
+<template>
+  <TBox>
+    <TBox>
+      <UserName :userInfo="msg.user" />
+      <TBox>
+        <TText>赠送了</TText>
+        <TText>(¥{{ msg.price / 1000 }}) </TText>
+        <TText>【{{ msg.gift_name }}】 * {{ msg.amount }}</TText>
+      </TBox>
+    </TBox>
+  </TBox>
+</template>

src/components/msgCom/GuardBuyMsgCom.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { TBox, TText } from '@temir/core'
+import type { GuardBuyMsg } from 'blive-message-listener'
+import UserName from '../UserName.vue'
+import { getGuardColor } from '../../utils/format'
+
+const { msg } = defineProps<{
+  msg: GuardBuyMsg
+}>()
+
+</script>
+
+<template>
+  <TBox>
+    <TBox>
+      <UserName :userInfo="msg.user" />
+      <TBox>
+        <TText>(¥{{ msg.price / 1000 }}) </TText>
+        <TText bold :color="getGuardColor(msg.guard_level)">{{ msg.gift_name }}</TText>
+      </TBox>
+    </TBox>
+  </TBox>
+</template>

src/components/msgCom/NewComerMsgCom.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { TBox, TText } from '@temir/core'
+import type { NewComerMsg } from 'blive-message-listener'
+import UserName from '../UserName.vue'
+
+const { msg } = defineProps<{
+  msg: NewComerMsg
+}>()
+
+</script>
+
+<template>
+  <TBox>
+    <TBox>
+      <UserName :userInfo="msg.user" />
+      <TText> 进入直播间</TText>
+    </TBox>
+  </TBox>
+</template>

src/components/SuperChatMsgCom.vue → src/components/msgCom/SuperChatMsgCom.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { TBox, TText } from '@temir/core'
 import type { SuperChatMsg } from 'blive-message-listener'
-import UserName from './UserName.vue'
+import UserName from '../UserName.vue'
 
 const { msg } = defineProps<{
   msg: SuperChatMsg

src/utils/format.ts

@@ -4,7 +4,7 @@ export const addSpace = (str: string) => {
   return ' ' + str + ' '
 }
 
-export const getUserNameColor = (level: GuardLevel = 0) => {
+export const getGuardColor = (level: GuardLevel = 0) => {
   const colorDict = ['#967E76', '#FF7C28', '#E17AFF', '#00D1F1']
   return colorDict[level]
 }