feat: cli header

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
   "cSpell.words": [
-    "danmu"
+    "danmu",
+    "temir"
   ]
 }

package.json

@@ -15,12 +15,15 @@
   "license": "ISC",
   "devDependencies": {
     "@temir/cli": "^0.0.18",
+    "@temir/link": "^0.0.19",
     "@temir/tab": "^0.0.18",
     "tsup": "^6.2.3",
     "typescript": "^4.8.2"
   },
   "dependencies": {
     "@temir/core": "^0.0.18",
+    "dayjs": "^1.11.5",
+    "ohmyfetch": "^0.4.18",
     "vue": "^3.2.38"
   }
 }

src/App.vue

@@ -2,39 +2,38 @@
 import { onMounted, ref } from 'vue'
 import { openRoom } from 'danmu-console-helper'
 import type { DanmuMsg, MsgHandler } from 'danmu-console-helper'
-import { TBox, TText } from '@temir/core'
+import { TBox } from '@temir/core'
+import { getRoomInfo, type RoomInfo } from './utils/getInfo'
+import CliHeader from './components/CliHeader.vue'
 import DanmuMsgCom from './components/DanmuMsgCom.vue'
 import TabSelector from './components/TabSelector.vue'
 
-const roomId = 652581
+const inputRoomId = 652581
+const currentRoomInfo = ref<RoomInfo | null>(null)
 const watchers = ref(0)
-const watchersHighlight = ref(false)
-const hot = ref(0)
-const hotHighlight = ref(false)
+const attention = ref(0)
 const danmuList = ref<DanmuMsg[]>([])
 
-onMounted(() => {
+onMounted(async () => {
+  const roomInfo = await getRoomInfo(inputRoomId)
+  if (!roomInfo) {
+    console.log('房间不存在')
+    return
+  }
+  currentRoomInfo.value = roomInfo
   try {
     const handler: MsgHandler = {
-      onHeartbeat: (newHot) => {
-        hot.value = newHot
-        hotHighlight.value = true
-        setTimeout(() => {
-          hotHighlight.value = false
-        }, 1000)
+      onHeartbeat: (newAttention) => {
+        attention.value = newAttention
       },
       onWatchedChange: (newWatched) => {
         watchers.value = newWatched
-        watchersHighlight.value = true
-        setTimeout(() => {
-          watchersHighlight.value = false
-        }, 1000)
       },
       onIncomeDanmu: (msg) => {
         danmuList.value.push(msg)
       },
     }
-    openRoom(roomId, handler)
+    openRoom(roomInfo.room_id, handler)
   } catch (error) {
     console.error(error)
   }
@@ -43,15 +42,7 @@ onMounted(() => {
 
 <template>
   <TBox flex-direction="column">
-    <TBox width="100%" :padding-left="1" :padding-right="2" border-style="round" justify-content="space-between">
-      <TBox>
-        <TText>{{ roomId }}</TText>
-      </TBox>
-      <TBox>
-        <TText :background-color="watchersHighlight ? 'green' : 'black'">{{ ` 👀${watchers} ` }}</TText>
-        <TText :background-color="hotHighlight ? 'green' : 'black'">{{ ` 🔥${hot} ` }}</TText>
-      </TBox>
-    </TBox>
+    <CliHeader :roomInfo="currentRoomInfo" :watchers="watchers" :attention="attention" />
     <TBox>
       <TBox flex-direction="column" border-style="round">
         <TabSelector />

src/components/CliHeader.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { TBox, TText } from '@temir/core'
+import dayjs from 'dayjs'
+import { addSpace } from '../utils/format'
+import type { RoomInfo } from '../utils/getInfo'
+
+const props = defineProps<{
+  roomInfo: RoomInfo | null
+  watchers: number
+  attention: number
+}>()
+
+const watchersHighlight = ref(false)
+const attentionHighlight = ref(false)
+const timer = ref(0)
+const timeText = ref(' ')
+
+watch(() => props.watchers, () => {
+  watchersHighlight.value = true
+  setTimeout(() => {
+    watchersHighlight.value = false
+  }, 1000)
+})
+
+watch(() => props.attention, () => {
+  attentionHighlight.value = true
+  setTimeout(() => {
+    attentionHighlight.value = false
+  }, 1000)
+})
+
+watch(() => props.roomInfo, info => {
+  if (!info || info.live_status !== 1) {
+    clearInterval(timer.value)
+    return
+  }
+  timer.value = 0
+  clearInterval(timer.value)
+  timer.value = setInterval(() => {
+    const liveSeconds = dayjs().diff(info.live_time, 'second')
+    timeText.value = formatSeconds(liveSeconds)
+  }, 1000)
+})
+
+const formatSeconds = (seconds: number) => {
+  const minutes = Math.floor(seconds / 60)
+  const leftSeconds = seconds % 60
+  return `${minutes}:${leftSeconds < 10 ? '0' : ''}${leftSeconds}`
+}
+
+</script>
+
+<template>
+  <TBox width="100%" :padding-left="1" :padding-right="2" border-style="round" justify-content="space-between">
+    <TBox>
+      <TBox v-if="roomInfo">
+        <TText color="green" bold>{{ roomInfo.short_id || roomInfo.room_id }}</TText>
+        <TText>{{ addSpace(roomInfo.title) }}</TText>
+      </TBox>
+    </TBox>
+    <TBox>
+      <TBox>
+        <TBox v-if="roomInfo">
+          <TBox v-if="roomInfo.live_status === 1">
+            <TText>🔴</TText>
+            <TText>{{ timeText }}</TText>
+            <TText> (Start at {{ dayjs(roomInfo.live_time).format('HH:mm') }}) </TText> 
+          </TBox>
+          <TBox v-else>
+            <TText>⚫️</TText>
+          </TBox>
+        </TBox>
+      </TBox>
+      <TText :background-color="watchersHighlight ? 'green' : 'black'">{{ ` 👀${props.watchers} ` }}</TText>
+      <TText :background-color="attentionHighlight ? 'green' : 'black'">{{ ` 🔥${props.attention} ` }}</TText>
+    </TBox>
+  </TBox>
+</template>

src/components/DanmuMsgCom.vue

@@ -1,11 +1,25 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { TBox, TText } from '@temir/core'
 import type { DanmuMsg } from 'danmu-console-helper'
 
 const { msg } = defineProps<{
   msg: DanmuMsg
 }>()
 
+const nameColor = computed(() => {
+  const level = msg.user.identity.member
+  // 舰长: 3 提督: 2 总督: 1
+  const colorDict = ['white', 'red', 'magenta', 'blue']
+  return colorDict[level] || 'white'
+})
+
+const rankText = computed(() => {
+  const level = msg.user.identity.rank
+  const rankDict = [' 1️⃣  ', ' 2️⃣  ', ' 3️⃣  ']
+  return rankDict[level - 1] || ''
+})
+
 const addSpace = (str: string) => {
   return ' ' + str + ' '
 }
@@ -15,16 +29,17 @@ const addSpace = (str: string) => {
   <TBox>
     <TBox>
       <TBox :flex-shrink="0">
-        <TBox v-if="msg.user.badge" :margin-right="1">
+        <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>
-        <TText bold>{{ msg.user.uname }}: </TText>
+        <TText bold :color="nameColor">{{ msg.user.uname }}</TText>
+        <TText>{{ rankText }}</TText>
+        <TText>: </TText>
       </TBox>
       <TBox :flex-glow="1">
         <TText>{{ msg.content }}</TText>
       </TBox>
-      <!-- <TText>{{ JSON.stringify(props.msg) }}</TText> -->
     </TBox>
   </TBox>
 </template>