feat: 添加消息时间

ddiu8081 · Sep 24, 2022 · 96b0d46 · 96b0d46
1 parent 884be14
commit 96b0d46
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 5 deletions.
diff --git a/src/.DS_Store b/src/.DS_Store
diff --git a/src/App.vue b/src/App.vue
@@ -11,6 +11,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 DanmuMsgCom from './components/msgCom/DanmuMsgCom.vue'
 import SuperChatMsgCom from './components/msgCom/SuperChatMsgCom.vue'
@@ -87,19 +88,34 @@ const handleTabChange = (index: number) => {
       </TBox>
       <TBox :flex-grow="1" width="100%" :height="16" border-style="round">
         <TBox v-if="selectedTab === 1" flex-direction="column">
-          <DanmuMsgCom :msg="msg.body" v-for="msg in danmuList.slice(-14)" :key="msg.id" />
+          <TBox v-for="msg in danmuList.slice(-14)" flex-direction="row">
+            <MsgTime :timestamp="msg.timestamp" />
+            <DanmuMsgCom :msg="msg.body" :key="msg.id" />
+          </TBox>
         </TBox>
         <TBox v-else-if="selectedTab === 2" flex-direction="column">
-          <SuperChatMsgCom :msg="msg.body" v-for="msg in superChatList.slice(-14)" :key="msg.id" />
+          <TBox v-for="msg in superChatList.slice(-14)" flex-direction="row">
+            <MsgTime :timestamp="msg.timestamp" />
+            <SuperChatMsgCom :msg="msg.body" :key="msg.id" />
+          </TBox>
         </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 v-for="msg in giftList.slice(-14)" flex-direction="row">
+            <MsgTime :timestamp="msg.timestamp" />
+            <GiftMsgCom :msg="msg.body" :key="msg.id" />
+          </TBox>
         </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 v-for="msg in guardBuyList.slice(-14)" flex-direction="row">
+            <MsgTime :timestamp="msg.timestamp" />
+            <GuardBuyMsgCom :msg="msg.body" :key="msg.id" />
+          </TBox>
         </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 v-for="msg in newComerList.slice(-14)" flex-direction="row">
+            <MsgTime :timestamp="msg.timestamp" />
+            <NewComerCom :msg="msg.body" :key="msg.id" />
+          </TBox>
         </TBox>
         <TBox v-else flex-direction="column">
         </TBox>

diff --git a/src/components/MsgTime.vue b/src/components/MsgTime.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { TBox, TText } from '@temir/core'
+import dayjs from 'dayjs'
+
+const { timestamp } = defineProps<{
+  timestamp: number
+}>()
+</script>
+
+<template>
+  <TBox :margin-right="1">
+    <TText color="#666666">{{ dayjs(timestamp).format('HH:mm:ss') }}</TText>
+  </TBox>
+</template>
+