feat: SuperChat Msg

src/App.vue

@@ -7,13 +7,18 @@ 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'
 
 const inputRoomId = getInputId()
 const currentRoomInfo = ref<RoomInfo | null>(null)
 const watchers = ref(0)
 const attention = ref(0)
+const allList = ref<any[]>([])
 const danmuList = ref<DanmuMsg[]>([])
+const superChatList = ref<any[]>([])
+const selectedTab = ref(0)
 
 onMounted(async () => {
   const roomInfo = await getRoomInfo(inputRoomId)
@@ -31,25 +36,41 @@ onMounted(async () => {
         watchers.value = newWatched
       },
       onIncomeDanmu: (msg) => {
+        allList.value.push(msg)
         danmuList.value.push(msg)
       },
+      onIncomeSuperChat: (msg) => {
+        allList.value.push(msg)
+        superChatList.value.push(msg)
+      },
     }
     openRoom(roomInfo.room_id, handler)
   } catch (error) {
     console.error(error)
   }
 })
+
+const handleTabChange = (index: number) => {
+  selectedTab.value = index
+}
 </script>
 
 <template>
   <TBox flex-direction="column">
     <CliHeader :roomInfo="currentRoomInfo" :watchers="watchers" :attention="attention" />
     <TBox>
       <TBox flex-direction="column" border-style="round">
-        <TabSelector />
+        <TabSelector @change="handleTabChange" />
       </TBox>
-      <TBox :flex-grow="1" flex-direction="column" width="100%" :height="16" border-style="round">
-        <DanmuMsgCom :msg="msg" v-for="msg in danmuList.slice(-14)" />
+      <TBox :flex-grow="1" width="100%" :height="16" border-style="round">
+        <TBox v-if="selectedTab === 1" flex-direction="column">
+          <DanmuMsgCom :msg="msg" v-for="msg in danmuList.slice(-14)" />
+        </TBox>
+        <TBox v-else-if="selectedTab === 2" flex-direction="column">
+          <SuperChatMsgCom :msg="msg" v-for="msg in superChatList.slice(-14)" />
+        </TBox>
+        <TBox v-else flex-direction="column">
+        </TBox>
       </TBox>
     </TBox>
   </TBox>

src/components/SuperChatMsgCom.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+  import { TBox, TText } from '@temir/core'
+  import type { DanmuMsg } from 'danmu-console-helper'
+  import { addSpace } from '../utils/format'
+  
+  const { msg } = defineProps<{
+    msg: DanmuMsg
+  }>()
+  
+  const getNameColor = (level: number) => {
+    // level = new Date().getMilliseconds() % 4
+    // 总督: 1 提督: 2  舰长: 3
+    const colorDict = ['#967E76', '#FF7C28', '#E17AFF', '#00D1F1']
+    return colorDict[level]
+  }
+  
+  </script>
+
+  <template>
+    <TBox>
+      <TBox>
+        <TBox :flex-shrink="0">
+          <TBox>
+            <TBox v-if="msg.user.badge && msg.user.badge.active" :margin-right="1">
+              <TText :background-color="msg.user.badge.color" :flex-shrink="0">{{ addSpace(msg.user.badge.name) }}</TText>
+              <TText :color="msg.user.badge.color" background-color="#ffffff">{{ addSpace(msg.user.badge.level.toString()) }}</TText>
+            </TBox>
+          </TBox>
+          <TText background-color="blue">{{ msg.user.identity.rank ? ` 榜${msg.user.identity.rank} ` : '' }}</TText>
+          <TText background-color="red">{{ msg.user.identity.room_admin ? '房' : '' }}</TText>
+          <TText bold :color="getNameColor(msg.user.identity.member)">{{ msg.user.uname }}</TText>
+          <TText>: </TText>
+        </TBox>
+        <TBox :flex-glow="1">
+          <TText>(¥{{ msg.price }}) </TText>
+          <TText :color="msg.content_color">{{ msg.content }}</TText>
+        </TBox>
+      </TBox>
+    </TBox>
+  </template>

src/components/TabSelector.vue

@@ -8,12 +8,19 @@ const tabs = ['ALL', '弹幕', 'SC', '礼物']
 const activeIndex = ref(0)
 const selectedText = computed(() => tabs[activeIndex.value])
 
-const props = defineProps()
+const emit = defineEmits<{
+  (e: 'change', value: number): void
+}>()
+
+const handleTabChange = (index: string) => {
+  activeIndex.value = +index
+  emit('change', parseInt(index))
+}
 </script>
 
 <template>
   <TBox>
-    <TTabs flex-direction="column" :on-change="(index) => activeIndex = +index">
+    <TTabs flex-direction="column" :on-change="handleTabChange">
       <TTab v-for="item in tabs" :key="item">
         {{ item }}
       </TTab>