perf:功能优化

package.json

@@ -39,7 +39,7 @@
     "tauri-plugin-context-menu": "^0.7.0",
     "vue": "^3.4.23",
     "vue-router": "^4.3.2",
-    "vue-tiny-virtual-list": "^1.4.0"
+    "vue-virt-list": "^1.2.1"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^2.15.0",

src/apis/live.ts

@@ -21,13 +21,13 @@ function getLiveCodeApi() {
 
 // 获取ws认证token
 function getLiveTokenApi() {
-  const { currentUser, room } = useAppStore()
+  const { currentUser, currentRoom } = useAppStore()
 
   return request({
     url: `${LIVE_URL_PREFIX}/xlive/web-room/v1/index/getDanmuInfo`,
     method: 'GET',
     params: {
-      id: room,
+      id: currentRoom,
     },
     headers: {
       cookie: currentUser?.cookie,
@@ -37,14 +37,14 @@ function getLiveTokenApi() {
 
 // 获取表情列表
 function getEmojiApi() {
-  const { currentUser, room } = useAppStore()
+  const { currentUser, currentRoom } = useAppStore()
 
   return request({
     url: `${LIVE_URL_PREFIX}/xlive/web-ucenter/v2/emoticon/GetEmoticons`,
     method: 'GET',
     params: {
       platform: 'pc',
-      room_id: room,
+      room_id: currentRoom,
     },
     headers: {
       cookie: currentUser?.cookie,
@@ -54,9 +54,9 @@ function getEmojiApi() {
 
 // 发送消息
 function sendMessageApi(message: string, type: EDMType, replyMid = 0) {
-  const { currentUser, room, currentMedal } = useAppStore()
+  const { currentUser, currentRoom, currentMedal } = useAppStore()
   const data = {
-    roomid: type === EDMType.打卡专用 ? `${currentMedal?.roomid}` : `${room}`,
+    roomid: type === EDMType.打卡专用 ? `${currentMedal?.roomid}` : `${currentRoom}`,
     msg: message,
     dm_type: type === EDMType.打卡专用 ? '0' : type,
     bubble: '0',
@@ -84,17 +84,28 @@ function sendMessageApi(message: string, type: EDMType, replyMid = 0) {
 
 // 获取当前直播状态
 function getLiveStatusApi() {
-  const { room } = useAppStore()
+  const { currentRoom } = useAppStore()
   return request({
     url: `${LIVE_URL_PREFIX}/xlive/web-room/v1/index/getRoomBaseInfo`,
     method: 'GET',
     params: {
-      room_ids: room,
+      room_ids: currentRoom,
       req_biz: 'link-center',
     },
   })
 }
 
+// 获取主播信息
+function getMasterInfoApi(uid: number) {
+  return request({
+    url: `${LIVE_URL_PREFIX}/live_user/v1/Master/info`,
+    method: 'GET',
+    params: {
+      uid,
+    },
+  })
+}
+
 // 获取用户持有的粉丝勋章
 function getMedalApi(page: number = 1) {
   const { currentUser } = useAppStore()
@@ -154,4 +165,5 @@ export {
   getMedalApi,
   wearMedalApi,
   unWearMedalApi,
+  getMasterInfoApi,
 }

src/components/Control.vue

@@ -4,7 +4,7 @@ import { appWindow } from '@tauri-apps/api/window'
 import { connected, startWebsocket, stopWebsocket } from '@/utils/room'
 import { openWindow } from '@/utils/window'
 
-const { room, isFix, isBroadcast, roomList } = storeToRefs(useAppStore())
+const { currentRoom, isFix, isBroadcast, roomList } = storeToRefs(useAppStore())
 const { deleteRoom } = useAppStore()
 
 watchEffect(() => {
@@ -29,7 +29,7 @@ watch(connected, () => {
   </div>
   <div class="room">
     <el-select
-      v-model.trim="room"
+      v-model.trim="currentRoom"
       class="flex-1"
       filterable
       allow-create

src/components/Danmu/Client.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { VirtualList } from 'vue-tiny-virtual-list'
+import { VirtList } from 'vue-virt-list'
 
 import { demos } from './config'
 
@@ -15,7 +15,7 @@ const demo = computed(() => {
 
 const { autoScroll } = storeToRefs(useAppStore())
 
-const danmuRef: Ref<InstanceType<typeof VirtualList> | null> = ref(null)
+const danmuRef: Ref<InstanceType<typeof VirtList> | null> = ref(null)
 
 watch(() => props.msgList, () => {
   if (!danmuRef.value || !autoScroll.value)
@@ -37,7 +37,7 @@ watch(autoScroll, (val) => {
 <template>
   <div class="danmu">
     <slot />
-    <VirtualList
+    <VirtList
       ref="danmuRef" item-key="id" :list="msgList" :min-size="30" :fixed="false" :buffer="2"
     >
       <template #default="{ itemData }">
@@ -57,7 +57,7 @@ watch(autoScroll, (val) => {
           />
         </div>
       </template>
-    </VirtualList>
+    </VirtList>
   </div>
 </template>
 

src/components/Danmu/Host.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { BaseDirectory, writeTextFile } from '@tauri-apps/api/fs'
 import { dayjs } from 'element-plus'
-import { VirtualList } from 'vue-tiny-virtual-list'
+import { VirtList } from 'vue-virt-list'
 
 import HostItem from './HostItem.vue'
 
@@ -10,7 +10,7 @@ import { useSocket } from '@/utils/socket'
 
 const { msgList, autoScroll } = storeToRefs(useAppStore())
 
-const danmuRef: Ref<InstanceType<typeof VirtualList> | null> = ref(null)
+const danmuRef: Ref<InstanceType<typeof VirtList> | null> = ref(null)
 
 function handleClear() {
   msgList.value = []
@@ -52,7 +52,7 @@ watch(autoScroll, (val) => {
 
 <template>
   <div class="danmu">
-    <div class="fixed right-5 top-28 opacity-0 hover:opacity-100">
+    <div class="absolute right-5 opacity-30 hover:opacity-100">
       <el-tooltip v-if="connected" content="自动滚动">
         <el-button :type="autoScroll ? 'primary' : 'info'" size="small" round plain @click="autoScroll = !autoScroll">
           <span class="i-carbon-auto-scroll h4 w4" />
@@ -69,13 +69,13 @@ watch(autoScroll, (val) => {
         </el-button>
       </el-tooltip>
     </div>
-    <VirtualList
+    <VirtList
       ref="danmuRef" item-key="id" :list="msgList" :min-size="30" :fixed="false" :buffer="2"
     >
       <template #default="{ itemData }">
         <HostItem :item-data="itemData" />
       </template>
-    </VirtualList>
+    </VirtList>
   </div>
 </template>
 

src/components/Danmu/HostItem.vue

@@ -39,13 +39,15 @@ function handleAt() {
       </div>
       <span class="text-base text-amber">
         <el-tooltip
+          v-if="currentUser?.mid !== itemData.uid"
           placement="top"
           :width="80"
           trigger="hover"
           content="@TA"
         >
           <span class="cursor-pointer" @click="handleAt">{{ itemData.uname }}</span>
         </el-tooltip>
+        <span v-else>{{ itemData.uname }}</span>
       </span>
       <div v-if="itemData.type === 'emoji'">
         <img :src="itemData.message" alt="" class="ml1 min-h-6 w14">
@@ -71,13 +73,15 @@ function handleAt() {
         </el-tooltip>
         <div class="text-base text-amber">
           <el-tooltip
+            v-if="currentUser?.mid !== itemData.uid"
             placement="top"
             :width="80"
             trigger="hover"
             content="@TA"
           >
             <span class="cursor-pointer" @click="handleAt">{{ itemData.uname }}</span>
           </el-tooltip>
+          <span v-else>{{ itemData.uname }}</span>
         </div>
         <div class="ml2 text-xs text-gray/200">
           {{ itemData.time }}

src/components/QRCode.vue

@@ -3,11 +3,12 @@ import QRCode from 'qrcode'
 import QS from 'qs'
 
 import { getLoginUrlApi, verifyQrCodeApi } from '@/apis/bilibili'
+import { getMasterInfoApi } from '@/apis/live.ts'
 import { ELoginState, EQRCodeState } from '@/utils/enums'
 
 const emits = defineEmits(['success'])
 
-const { userList, currentUser } = storeToRefs(useAppStore())
+const { userList, currentUser, currentRoom, roomList } = storeToRefs(useAppStore())
 
 const qrCodeImage = ref<string>()
 
@@ -107,6 +108,17 @@ async function setUserInfo(access: IAccess) {
   currentUser.value = user
   qrCodeImage.value = ''
   loginState.value = ELoginState.未登录
+
+  const { data } = await getMasterInfoApi(access.uid)
+  if (data) {
+    currentRoom.value = data.room_id
+    const room: IRoom = {
+      roomid: data.room_id,
+      uname: data.info.uname,
+    }
+    roomList.value.unshift(room)
+  }
+
   emits('success')
 }
 
@@ -132,7 +144,7 @@ onMounted(getQRCode)
 </template>
 
 <style lang="scss" scoped>
-.box{
+.box {
   @apply h-40 w-40 center;
 }
 </style>

src/stores/index.ts

@@ -21,7 +21,7 @@ export const useAppStore = defineStore(
     }])
 
     // 当前的房间号
-    const room = ref<number>()
+    const currentRoom = ref<number>()
     const roomList = ref<IRoom[]>([])
 
     const addRoom = (info: IRoom) => {
@@ -163,7 +163,7 @@ export const useAppStore = defineStore(
     return {
       currentUser,
       userList,
-      room,
+      currentRoom,
       msgList,
       isFix,
       isBroadcast,
@@ -183,7 +183,7 @@ export const useAppStore = defineStore(
   },
   {
     persist: {
-      paths: ['currentUser', 'userList', 'room', 'currentMedal', 'autoScroll', 'isFix', 'customStyle', 'defaultSample', 'roomList'],
+      paths: ['currentUser', 'userList', 'currentRoom', 'currentMedal', 'autoScroll', 'isFix', 'customStyle', 'defaultSample', 'roomList'],
     },
   },
 )