feat: 用户关注/分享直播间消息

package.json

@@ -39,7 +39,7 @@
     "@temir/core": "^0.0.20",
     "@temir/link": "^0.0.20",
     "@temir/tab": "^0.0.20",
-    "blive-message-listener": "^0.2.1",
+    "blive-message-listener": "^0.3.0",
     "dayjs": "^1.11.5",
     "mri": "^1.2.0",
     "ohmyfetch": "^0.4.19",

src/App.vue

@@ -3,7 +3,7 @@ import { provide, onMounted, ref } from 'vue'
 import { startListen } from 'blive-message-listener'
 import type { 
   MsgHandler, Message,
-  DanmuMsg, SuperChatMsg, GiftMsg, GuardBuyMsg, NewComerMsg
+  DanmuMsg, SuperChatMsg, GiftMsg, GuardBuyMsg, UserActionMsg
 } from 'blive-message-listener'
 import { TBox } from '@temir/core'
 import { getRoomInfo, type RoomInfo } from './utils/getInfo'
@@ -20,7 +20,7 @@ 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'
+import UserActionMsgCom from './components/msgCom/UserActionMsgCom.vue'
 
 const options = parseCliArgs()
 provide('options', options)
@@ -39,7 +39,7 @@ const danmuList = ref<Message<DanmuMsg>[]>([])
 const superChatList = ref<Message<SuperChatMsg>[]>([])
 const giftList = ref<Message<GiftMsg>[]>([])
 const guardBuyList = ref<Message<GuardBuyMsg>[]>([])
-const newComerList = ref<Message<NewComerMsg>[]>([])
+const userActionList = ref<Message<UserActionMsg>[]>([])
 
 onMounted(async () => {
   listenQuitCommand()
@@ -90,8 +90,8 @@ onMounted(async () => {
         allList.value.push(msg)
         guardBuyList.value.push(msg)
       },
-      onNewComer: (msg) => {
-        newComerList.value.push(msg)
+      onUserAction: (msg) => {
+        userActionList.value.push(msg)
       },
     }
     startListen(roomInfo.room_id, handler)
@@ -138,9 +138,9 @@ const handleTabChange = (index: number) => {
           </TBox>
         </TBox>
         <TBox v-else-if="selectedTab === 5" flex-direction="column">
-          <TBox v-for="msg in newComerList.slice(-contentHeight)" flex-direction="row">
+          <TBox v-for="msg in userActionList.slice(-contentHeight)" flex-direction="row">
             <MsgTime :timestamp="msg.timestamp" />
-            <NewComerCom :msg="msg.body" :key="msg.id" />
+            <UserActionMsgCom :msg="msg.body" :key="msg.id" />
           </TBox>
         </TBox>
         <TBox v-else flex-direction="column">
@@ -160,15 +160,15 @@ const handleTabChange = (index: number) => {
               <GuardBuyMsgCom :msg="msg.body" :key="msg.id" />
             </template>
             <template v-else-if="msg.type === 'INTERACT_WORD' || msg.type === 'ENTRY_EFFECT'">
-              <NewComerCom :msg="msg.body" :key="msg.id" />
+              <UserActionMsgCom :msg="msg.body" :key="msg.id" />
             </template>
           </TBox>
         </TBox>
       </TBox>
     </TBox>
     <CliFooter
       :liveStatus="liveStatus"
-      :newestWatcher="newComerList[newComerList.length - 1]"
+      :newestWatcher="userActionList[userActionList.length - 1]"
       :watchers="watchers"
       :attention="attention"
     />

src/components/CliFooter.vue

@@ -2,16 +2,16 @@
 import { ref, watch } from 'vue'
 import { TBox, TText } from '@temir/core'
 import dayjs from 'dayjs'
-import type { Message, NewComerMsg } from 'blive-message-listener'
-import NewComerCom from './msgCom/NewComerMsgCom.vue'
+import type { Message, UserActionMsg } from 'blive-message-listener'
+import UserActionMsgCom from './msgCom/UserActionMsgCom.vue'
 
 interface LiveStatus {
   isLive: boolean
   startTime: string
 }
 
 const props = defineProps<{
-  newestWatcher: Message<NewComerMsg> | null
+  newestWatcher: Message<UserActionMsg> | null
   liveStatus: LiveStatus
   watchers: number
   attention: number
@@ -65,7 +65,7 @@ const formatSeconds = (seconds: number) => {
 <template>
   <TBox width="100%" :padding-left="1" :padding-right="2" border-style="single" justify-content="space-between">
     <TBox>
-      <NewComerCom v-if="props.newestWatcher" :msg="props.newestWatcher.body" :key="props.newestWatcher.id" />
+      <UserActionMsgCom v-if="props.newestWatcher" :msg="props.newestWatcher.body" :key="props.newestWatcher.id" />
     </TBox>
     <TBox>
       <TBox>

src/components/TabSelector.vue

@@ -4,7 +4,7 @@ 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 emit = defineEmits<{

src/components/msgCom/NewComerMsgCom.vue → src/components/msgCom/UserActionMsgCom.vue

@@ -1,19 +1,27 @@
 <script setup lang="ts">
 import { TBox, TText } from '@temir/core'
-import type { NewComerMsg } from 'blive-message-listener'
+import type { UserActionMsg } from 'blive-message-listener'
 import UserName from '../UserName.vue'
 
 const { msg } = defineProps<{
-  msg: NewComerMsg
+  msg: UserActionMsg
 }>()
 
+const typeDict = {
+  enter: '进入',
+  follow: '关注',
+  share: '分享',
+  unknown: '-',
+}
+
 </script>
 
 <template>
   <TBox>
     <TBox>
       <UserName :userInfo="msg.user" />
-      <TText>进入直播间</TText>
+      <TText>{{ typeDict[msg.action] }}</TText>
+      <TText>直播间</TText>
     </TBox>
   </TBox>
 </template>