feat: 展示全部类型信息

src/App.vue

@@ -12,6 +12,7 @@ import { getInputId } from './utils/cli'
 import CliHeader from './components/CliHeader.vue'
 import TabSelector from './components/TabSelector.vue'
 import MsgTime from './components/MsgTime.vue'
+import MsgType from './components/MsgType.vue'
 
 import DanmuMsgCom from './components/msgCom/DanmuMsgCom.vue'
 import SuperChatMsgCom from './components/msgCom/SuperChatMsgCom.vue'
@@ -64,7 +65,7 @@ onMounted(async () => {
         guardBuyList.value.push(msg)
       },
       onNewComer: (msg) => {
-        allList.value.push(msg)
+        // allList.value.push(msg)
         newComerList.value.push(msg)
       },
     }
@@ -118,6 +119,25 @@ const handleTabChange = (index: number) => {
           </TBox>
         </TBox>
         <TBox v-else flex-direction="column">
+          <TBox v-for="msg in allList.slice(-14)" flex-direction="row">
+            <MsgTime :timestamp="msg.timestamp" />
+            <MsgType :type="msg.type"></MsgType>
+            <template v-if="msg.type === 'DANMU_MSG'">
+              <DanmuMsgCom :msg="msg.body" :key="msg.id" />
+            </template>
+            <template v-else-if="msg.type === 'SUPER_CHAT_MESSAGE'">
+              <SuperChatMsgCom :msg="msg.body" :key="msg.id" />
+            </template>
+            <template v-else-if="msg.type === 'SEND_GIFT'">
+              <GiftMsgCom :msg="msg.body" :key="msg.id" />
+            </template>
+            <template v-else-if="msg.type === 'GUARD_BUY'">
+              <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" />
+            </template>
+          </TBox>
         </TBox>
       </TBox>
     </TBox>

src/components/MsgTime.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import { TBox, TText } from '@temir/core'
 import dayjs from 'dayjs'
 

src/components/MsgType.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { TBox, TText } from '@temir/core'
+
+const { type } = defineProps<{
+  type: string
+}>()
+
+const typeDict: Record<string, string> = {
+  DANMU_MSG: '弹幕',
+  SUPER_CHAT_MESSAGE: 'SC',
+  SEND_GIFT: '礼物',
+  GUARD_BUY: '上舰',
+  INTERACT_WORD: '进场',
+  ENTRY_EFFECT: '进场',
+}
+</script>
+
+<template>
+  <TBox :margin-right="1">
+    <TText color="yellow">[{{ typeDict[type] }}]</TText>
+  </TBox>
+</template>
+

src/utils/format.ts

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