From 96b0d4616c8b5e45060be7eb3ddea7181c154e85 Mon Sep 17 00:00:00 2001
From: ddiu8081 <ddiu8081@gmail.com>
Date: Sun, 25 Sep 2022 00:05:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/.DS_Store              | Bin 0 -> 6148 bytes
 src/App.vue                |  26 +++++++++++++++++++++-----
 src/components/MsgTime.vue |  16 ++++++++++++++++
 3 files changed, 37 insertions(+), 5 deletions(-)
 create mode 100644 src/.DS_Store
 create mode 100644 src/components/MsgTime.vue

diff --git a/src/.DS_Store b/src/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..1a92f6ea5e64370bcf18c396292f60688cf48cc6
GIT binary patch
literal 6148
zcmeHK%}T>S5T0$TCKjOwg&r5Y7Od1N;w9Aj0!H+pQX5+|m}X0pnnNk%tS{t~_&m<+
zZVRRL;6=pFz|6NhKUwBW*v$ffXpMV^02KgmPzehzniWEE(j_Ta524V{P!K~OHHBm;
zn;n0V0eW}a@CXV9Fho0le?gWEgGdD!{|JUrn56akrzjLl8=G5><CL9y|5;^z+D*qv
zt2?@-*_BdJFdKJ+>#(17D!b<@PP<{;AL)Xy*T<B*n=tOFtfj_rFVVHW2{^9nb}H4$
zq}e>F$;N48T9cF0dc7u(8pqSA>+J0xoLzQaqCu?Q450$QJuN#HXYh`LmA$?Cqc~FW
z6UJw?vl>QbfEi#0)`0=L_c`TtXqJ0q2AF{#F+lr+L?!er<_7iFfrfq`DPAHZ!7<$>
z2&F~OVr~#4D8iH?no?n}7{ZjJU)ns+Vs6lsgU~DEbL`5(-cW>I9sN?LgYXQpWd@jm
zMFxsyTA}m*;`{smViC`n0cPM|F(689zum%??Af~19G$fi^#PTH@^XXo5*+BG7<1_;
cuA*u|zoY@8XE8U39u)o&&@`}N27Z-+FUuxQB>(^b

literal 0
HcmV?d00001

diff --git a/src/App.vue b/src/App.vue
index 934fa8e..e2a7225 100644
--- 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
new file mode 100644
index 0000000..bb2ad4a
--- /dev/null
+++ 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>
+  
\ No newline at end of file