refactor: username component

ddiu8081 · Sep 24, 2022 · 66490cd · 66490cd
1 parent 5df4f88
commit 66490cd
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 26 deletions.
diff --git a/src/components/DanmuMsgCom.vue b/src/components/DanmuMsgCom.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { TBox, TText } from '@temir/core'
 import type { DanmuMsg } from 'blive-message-listener'
-import { addSpace, getUserNameColor } from '../utils/format'
+import UserName from './UserName.vue'
 
 const { msg } = defineProps<{
   msg: DanmuMsg
@@ -20,18 +20,7 @@ const badgeColor = computed(() => {
 <template>
   <TBox>
     <TBox>
-      <TBox :flex-shrink="0">
-        <TBox>
-          <TBox v-if="msg.user.badge && msg.user.badge.active" :margin-right="1">
-            <TText :background-color="badgeColor" :flex-shrink="0">{{ addSpace(msg.user.badge.name) }}</TText>
-            <TText :color="badgeColor" 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="getUserNameColor(msg.user.identity?.guard_level)">{{ msg.user.uname }}</TText>
-        <TText>: </TText>
-      </TBox>
+      <UserName :userInfo="msg.user" />
       <TBox :flex-glow="1">
         <TText>{{ msg.content }}</TText>
       </TBox>

diff --git a/src/components/SuperChatMsgCom.vue b/src/components/SuperChatMsgCom.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { TBox, TText } from '@temir/core'
 import type { SuperChatMsg } from 'blive-message-listener'
-import { addSpace, getUserNameColor } from '../utils/format'
+import UserName from './UserName.vue'
 
 const { msg } = defineProps<{
   msg: SuperChatMsg
@@ -12,18 +12,7 @@ const { msg } = defineProps<{
 <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="getUserNameColor(msg.user.identity?.guard_level)">{{ msg.user.uname }}</TText>
-        <TText>: </TText>
-      </TBox>
+      <UserName :userInfo="msg.user" />
       <TBox :flex-glow="1">
         <TText>(¥{{ msg.price }}) </TText>
         <TText :color="msg.content_color">{{ msg.content }}</TText>

diff --git a/src/components/UserName.vue b/src/components/UserName.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { TBox, TText } from '@temir/core'
+import type { User } from 'blive-message-listener'
+import { addSpace, getUserNameColor } from '../utils/format'
+
+const { userInfo } = defineProps<{
+  userInfo: User
+}>()
+
+const badgeColor = computed(() => {
+  if (userInfo.badge?.anchor.is_same_room) {
+    return userInfo.badge.color
+  }
+  return '#666666'
+})
+</script>
+
+<template>
+  <TBox :flex-shrink="0">
+    <TBox>
+      <TBox v-if="userInfo.badge && userInfo.badge.active" :margin-right="1">
+        <TText :background-color="badgeColor" :flex-shrink="0">{{ addSpace(userInfo.badge.name) }}</TText>
+        <TText :color="badgeColor" background-color="#ffffff">{{ addSpace(userInfo.badge.level.toString()) }}</TText>
+      </TBox>
+    </TBox>
+    <TText background-color="blue">{{ userInfo.identity?.rank ? ` 榜${userInfo.identity.rank} ` : '' }}</TText>
+    <TText background-color="red">{{ userInfo.identity?.room_admin ? '房' : '' }}</TText>
+    <TText bold :color="getUserNameColor(userInfo.identity?.guard_level)">{{ userInfo.uname }}</TText>
+    <TText>: </TText>
+  </TBox>
+</template>