feat: 添加歌曲列表分页功能和键盘快捷键支持

- 在 SongList 组件中实现分页功能，支持上一页和下一页操作
- 添加键盘快捷键，允许用户通过方向键进行翻页
- 优化组件结构，增强可读性和用户体验

src/views/obs/blivechat/MessageRender.vue

@@ -44,7 +44,7 @@
                 :author-name="message.authorName"
                 :author-type="message.authorType"
                 :privilege-type="message.privilegeType"
-                :rich-content="getShowRichContent(message)"
+                :content-parts="getShowContentParts(message)"
                 :repeated="message.repeated"
               />
               <paid-message
@@ -205,7 +205,7 @@ export default defineComponent({
     },
     getGiftShowNameAndNum: constants.getGiftShowNameAndNum,
     getShowContent: constants.getShowContent,
-    getShowRichContent: constants.getShowRichContent,
+    getShowContentParts: constants.getShowContentParts,
     getShowAuthorName: constants.getShowAuthorName,
 
     addMessage(message) {

src/views/obs/blivechat/TextMessage.vue

@@ -29,7 +29,7 @@
         id="message"
         class="style-scope yt-live-chat-text-message-renderer"
       >
-        <template v-for="(content, index) in richContent">
+        <template v-for="(content, index) in contentParts">
           <span
             v-if="content.type === CONTENT_TYPE_TEXT"
             :key="index"
@@ -81,7 +81,7 @@ const props = defineProps({
   time: Date,
   authorName: String,
   authorType: Number,
-  richContent: Array,
+  contentParts: Array,
   privilegeType: Number,
   repeated: Number
 })

src/views/obs/blivechat/constants.js

@@ -10,17 +10,21 @@ export const AUTHOR_TYPE_TO_TEXT = [
   'owner' // 主播
 ]
 
+import * as i18n from '@/i18n'
+
+const GUARD_LEVEL_TO_TEXT_KEY = [
+  '',
+  'chat.guardLevel1',
+  'chat.guardLevel2',
+  'chat.guardLevel3'
+]
+
 export function getShowGuardLevelText(guardLevel) {
-  switch (guardLevel) {
-    case 1:
-      return '总督'
-    case 2:
-      return '提督'
-    case 3:
-      return '舰长'
-    default:
-      return ''
+  let key = GUARD_LEVEL_TO_TEXT_KEY[guardLevel] || ''
+  if (key === '') {
+    return ''
   }
+  return i18n.i18n.t(key)
 }
 
 export const MESSAGE_TYPE_TEXT = 0
@@ -195,7 +199,7 @@ export function getGiftShowContent(message, showGiftName) {
   if (!showGiftName) {
     return ''
   }
-  return `赠送 ${message.giftName}x${message.num}`
+  return i18n.i18n.t('chat.sendGift', { giftName: message.giftName, num: message.num })
 }
 
 export function getGiftShowNameAndNum(message) {