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

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

src/components/SongList.vue

@@ -87,6 +87,33 @@ const batchUpdate_Option = ref<SongRequestOption | undefined>() // 批量编辑
 const columns = ref<DataTableColumns<SongsInfo>>() // 表格列定义
 const selectedColumn = ref<DataTableRowKey[]>([]) // 表格选中行的 Key 数组
 
+// 分页相关
+const currentPage = ref(1) // 当前页码
+const handlePageChange = (page: number) => {
+  currentPage.value = page
+}
+
+// 暴露分页方法
+const nextPage = () => {
+  const pagination = songsComputed.value.length > 0 ? Math.ceil(songsComputed.value.length / pageSize.value) : 1
+  if (currentPage.value < pagination) {
+    currentPage.value++
+  }
+}
+
+const prevPage = () => {
+  if (currentPage.value > 1) {
+    currentPage.value--
+  }
+}
+
+// 暴露给父组件
+defineExpose({
+  nextPage,
+  prevPage,
+  currentPage
+})
+
 // --- 计算属性 ---
 
 // 筛选后的歌曲列表
@@ -163,8 +190,6 @@ const authorsOptions = computed(() => {
     }))
 })
 
-// --- 表格列定义 ---
-
 // 作者列定义 (包含筛选逻辑)
 const authorColumn = ref<DataTableBaseColumn<SongsInfo>>({
   title: '作者',
@@ -751,7 +776,8 @@ onMounted(() => {
       pageSizes: [10, 25, 50, 100, 200],
       showSizePicker: true,
       showQuickJumper: true,
-
+      page: currentPage,
+      onUpdatePage: handlePageChange
     }"
     :loading="isLoading && songsComputed.length === 0"
     striped

src/data/TemplateTypes.ts

@@ -21,4 +21,5 @@ export interface ScheduleConfigType {
   userInfo: UserInfo | undefined
   biliInfo: any | undefined
   data: ScheduleWeekInfo[] | undefined
+  config?: any
 }

src/data/constants.ts

@@ -1,5 +1,5 @@
 import DefaultIndexTemplateVue from '@/views/view/indexTemplate/DefaultIndexTemplate.vue';
-import { defineAsyncComponent, ref } from 'vue';
+import { defineAsyncComponent, ref, markRaw } from 'vue';
 
 const debugAPI =
   import.meta.env.VITE_API == 'dev'
@@ -74,40 +74,40 @@ export const ScheduleTemplateMap: TemplateMapType = {
   '': {
     name: '默认',
     //settingName: 'Template.Schedule.Default',
-    component: defineAsyncComponent(
+    component: markRaw(defineAsyncComponent(
       () => import('@/views/view/scheduleTemplate/DefaultScheduleTemplate.vue')
-    )
+    ))
   },
   pinky: {
     name: '粉粉',
     //settingName: 'Template.Schedule.Pinky',
-    component: defineAsyncComponent(
+    component: markRaw(defineAsyncComponent(
       () => import('@/views/view/scheduleTemplate/PinkySchedule.vue')
-    )
+    ))
   }
 };
 export const SongListTemplateMap: TemplateMapType = {
   '': {
     name: '默认',
     //settingName: 'Template.SongList.Default',
-    component: defineAsyncComponent(
+    component: markRaw(defineAsyncComponent(
       () => import('@/views/view/songListTemplate/DefaultSongListTemplate.vue')
-    )
+    ))
   },
   simple: {
     name: '简单',
     //settingName: 'Template.SongList.Simple',
-    component: defineAsyncComponent(
+    component: markRaw(defineAsyncComponent(
       () => import('@/views/view/songListTemplate/SimpleSongListTemplate.vue')
-    )
+    ))
   },
   traditional: {
     name: '列表',
     settingName: 'Template.SongList.Traditional',
-    component: defineAsyncComponent(
+    component: markRaw(defineAsyncComponent(
       () =>
         import('@/views/view/songListTemplate/TraditionalSongListTemplate.vue')
-    )
+    ))
   }
 };
 
@@ -115,7 +115,7 @@ export const IndexTemplateMap: TemplateMapType = {
   '': {
     name: '默认',
     //settingName: 'Template.Index.Default',
-    component: DefaultIndexTemplateVue
+    component: markRaw(DefaultIndexTemplateVue)
   }
 };
 

src/views/manage/SettingsManageView.vue

@@ -57,7 +57,7 @@
     SelectOption,
     useMessage,
   } from 'naive-ui';
-  import { computed, h, nextTick, onActivated, onMounted, ref, shallowRef } from 'vue';
+  import { computed, h, nextTick, onActivated, onMounted, ref, shallowRef, markRaw } from 'vue';
   import { useRoute } from 'vue-router';
 
   // 模板定义类型接口

src/views/manage/point/PointUserManage.vue

@@ -89,9 +89,10 @@ const filteredUsers = computed(() => {
 
       // 根据关键词搜索
       if (settings.value.searchKeyword) {
+        const keyword = settings.value.searchKeyword.toLowerCase()
         return (
-          user.info.name?.toLowerCase().includes(settings.value.searchKeyword.toLowerCase()) == true ||
-          user.info.userId?.toString() == settings.value.searchKeyword
+          user.info.name?.toLowerCase().includes(keyword) == true ||
+          user.info.userId?.toString() == keyword
         )
       }
 
@@ -103,6 +104,76 @@ const filteredUsers = computed(() => {
 // 当前查看的用户详情
 const currentUser = ref<ResponsePointUserModel>()
 
+// 渲染用户名或用户ID
+const renderUsername = (user: ResponsePointUserModel) => {
+  if (user.info?.name) {
+    return user.info.name
+  }
+
+  return h(NFlex, null, () => [
+    '未知',
+    h(NText, { depth: 3 }, { default: () => `(${user.info.userId ?? user.info.openId})` }),
+  ])
+}
+
+// 渲染订单数量，更友好的显示方式
+const renderOrderCount = (user: ResponsePointUserModel) => {
+  if (!user.isAuthed) return h(NText, { depth: 3 }, { default: () => '未认证' })
+  return user.orderCount > 0 ? h(NText, {}, { default: () => formatNumber(user.orderCount) }) : h(NText, { depth: 3 }, { default: () => '无订单' })
+}
+
+// 渲染时间戳为相对时间和绝对时间
+const renderTime = (timestamp: number) => {
+  return h(NTooltip, null, {
+    trigger: () => h(NTime, { time: timestamp, type: 'relative' }),
+    default: () => h(NTime, { time: timestamp }),
+  })
+}
+
+// 渲染操作按钮
+const renderActions = (user: ResponsePointUserModel) => {
+  return h(NFlex, { justify: 'center', gap: 8 }, () => [
+    h(
+      NButton,
+      {
+        onClick: () => {
+          currentUser.value = user
+          showModal.value = true
+        },
+        type: 'info',
+        size: 'small',
+      },
+      { default: () => '详情' },
+    ),
+    h(
+      NPopconfirm,
+      { onPositiveClick: () => deleteUser(user) },
+      {
+        default: () => '确定要删除这个用户吗？记录将无法恢复',
+        trigger: () =>
+          h(
+            NButton,
+            {
+              type: 'error',
+              size: 'small',
+            },
+            { default: () => '删除' },
+          ),
+      },
+    ),
+  ])
+}
+
+// 格式化数字，添加千位符
+const formatNumber = (num: number) => {
+  return num.toLocaleString('zh-CN')
+}
+
+// 渲染积分，添加千位符并加粗
+const renderPoint = (num: number) => {
+  return h(NText, { strong: true }, { default: () => formatNumber(num) })
+}
+
 // 数据表格列定义
 const column: DataTableColumns<ResponsePointUserModel> = [
   {
@@ -115,77 +186,29 @@ const column: DataTableColumns<ResponsePointUserModel> = [
   {
     title: '用户名',
     key: 'username',
-    render: (row: ResponsePointUserModel) => {
-      return (
-        row.info?.name ??
-        h(NFlex, null, () => [
-          '未知',
-          h(NText, { depth: 3 }, { default: () => `(${row.info.userId ?? row.info.openId})` }),
-        ])
-      )
-    },
+    render: (row: ResponsePointUserModel) => renderUsername(row),
   },
   {
     title: '积分',
     key: 'point',
     sorter: 'default',
-    render: (row: ResponsePointUserModel) => {
-      return row.point
-    },
+    render: (row: ResponsePointUserModel) => renderPoint(row.point),
   },
   {
     title: '订单数量',
-    key: 'orders',
-    render: (row: ResponsePointUserModel) => {
-      return row.isAuthed ? row.orderCount : '无'
-    },
+    key: 'orderCount',
+    render: (row: ResponsePointUserModel) => renderOrderCount(row),
   },
   {
     title: '最后更新于',
     key: 'updateAt',
     sorter: 'default',
-    render: (row: ResponsePointUserModel) => {
-      return h(NTooltip, null, {
-        trigger: () => h(NTime, { time: row.updateAt, type: 'relative' }),
-        default: () => h(NTime, { time: row.updateAt }),
-      })
-    },
+    render: (row: ResponsePointUserModel) => renderTime(row.updateAt),
   },
   {
     title: '操作',
     key: 'action',
-    render: (row: ResponsePointUserModel) => {
-      return h(NFlex, { justify: 'center', gap: 8 }, () => [
-        h(
-          NButton,
-          {
-            onClick: () => {
-              currentUser.value = row
-              showModal.value = true
-            },
-            type: 'info',
-            size: 'small',
-          },
-          { default: () => '详情' },
-        ),
-        h(
-          NPopconfirm,
-          { onPositiveClick: () => deleteUser(row) },
-          {
-            default: () => '确定要删除这个用户吗？记录将无法恢复',
-            trigger: () =>
-              h(
-                NButton,
-                {
-                  type: 'error',
-                  size: 'small',
-                },
-                { default: () => '删除' },
-              ),
-          },
-        ),
-      ])
-    },
+    render: (row: ResponsePointUserModel) => renderActions(row),
   },
 ]
 
@@ -445,10 +468,10 @@ onMounted(async () => {
     <NDivider />
 
     <!-- 无数据提示 -->
-    <template v-if="filteredUsers.length == 0">
-      <NDivider />
-      <NEmpty :description="settings.onlyAuthed ? '没有已认证的用户' : '没有用户'" />
-    </template>
+    <NEmpty
+      v-if="filteredUsers.length == 0"
+      :description="isLoading ? '加载中...' : (settings.onlyAuthed ? '没有已认证的用户' : '没有用户')"
+    />
 
     <!-- 用户数据表格 -->
     <NDataTable
@@ -465,6 +488,7 @@ onMounted(async () => {
         onUpdatePage: (page) => (pn = page),
         onUpdatePageSize: (pageSize) => (ps = pageSize)
       }"
+      :loading="isLoading"
     />
   </NSpin>
 
@@ -592,8 +616,8 @@ onMounted(async () => {
       <NButton
         type="error"
         :loading="isLoading"
-        @click="resetAllPoints"
         :disabled="resetConfirmText !== RESET_CONFIRM_TEXT"
+        @click="resetAllPoints"
       >
         确认重置所有用户积分
       </NButton>

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) {

src/views/view/indexTemplate/DefaultIndexTemplate.vue

@@ -16,6 +16,7 @@ const props = defineProps<{
   userInfo: UserInfo | undefined
   biliInfo: any | undefined
   currentData?: any
+  config?: any
 }>()
 const isLoading = ref(true)
 const message = useMessage()

src/views/view/songListTemplate/DefaultSongListTemplate.vue

@@ -4,9 +4,9 @@ import { SongsInfo } from '@/api/api-models'
 import SongList from '@/components/SongList.vue'
 import { SongListConfigType } from '@/data/TemplateTypes'
 import LiveRequestOBS from '@/views/obs/LiveRequestOBS.vue'
-import { CloudAdd20Filled } from '@vicons/fluent'
+import { CloudAdd20Filled, ChevronLeft24Filled, ChevronRight24Filled } from '@vicons/fluent'
 import { NButton, NCard, NCollapse, NCollapseItem, NDivider, NIcon, NTooltip, useMessage } from 'naive-ui'
-import { h, ref } from 'vue'
+import { h, ref, onMounted, onUnmounted } from 'vue'
 
 const accountInfo = useAccount()
 
@@ -16,6 +16,50 @@ const emits = defineEmits(['requestSong'])
 
 const isLoading = ref('')
 const message = useMessage()
+const songListRef = ref<InstanceType<typeof SongList> | null>(null)
+
+// 处理翻页逻辑
+const handlePrevPage = () => {
+  if (songListRef.value) {
+    songListRef.value.prevPage()
+  }
+}
+
+const handleNextPage = () => {
+  if (songListRef.value) {
+    songListRef.value.nextPage()
+  }
+}
+
+// 键盘快捷键处理函数
+const handleKeyDown = (event: KeyboardEvent) => {
+  // 忽略在输入框内的按键
+  if (event.target instanceof HTMLInputElement ||
+      event.target instanceof HTMLTextAreaElement ||
+      event.target instanceof HTMLSelectElement) {
+    return
+  }
+
+  // 左方向键 - 上一页
+  if (event.key === 'ArrowLeft') {
+    handlePrevPage()
+    event.preventDefault()
+  }
+  // 右方向键 - 下一页
+  else if (event.key === 'ArrowRight') {
+    handleNextPage()
+    event.preventDefault()
+  }
+}
+
+// 添加和移除事件监听器
+onMounted(() => {
+  window.addEventListener('keydown', handleKeyDown)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown)
+})
 
 const buttons = (song: SongsInfo) => [
   accountInfo.value?.id != props.userInfo?.id
@@ -55,25 +99,89 @@ const buttons = (song: SongsInfo) => [
 </script>
 
 <template>
-  <NDivider style="margin-top: 10px" />
-  <SongList
-    v-if="data"
-    :songs="data ?? []"
-    :is-self="accountInfo?.id == userInfo?.id"
-    :extra-button="buttons"
-    v-bind="$attrs"
-  />
-  <NCollapse v-if="userInfo?.canRequestSong">
-    <NCollapseItem title="点歌列表">
-      <NCard
-        size="small"
-        embedded
+  <div class="song-list-container">
+    <NDivider style="margin-top: 10px" />
+    <!-- 左侧翻页按钮 -->
+    <div class="page-button page-button-left">
+      <NButton
+        circle
+        secondary
+        size="large"
+        title="上一页 (←)"
+        @click="handlePrevPage"
       >
-        <div style="height: 400px; width: 700px; max-width: 100%; position: relative; margin: 0 auto">
-          <LiveRequestOBS :id="userInfo?.id" />
-        </div>
-      </NCard>
-    </NCollapseItem>
-  </NCollapse>
-  <NDivider />
+        <template #icon>
+          <NIcon :component="ChevronLeft24Filled" />
+        </template>
+      </NButton>
+    </div>
+
+    <!-- 右侧翻页按钮 -->
+    <div class="page-button page-button-right">
+      <NButton
+        circle
+        secondary
+        size="large"
+        title="下一页 (→)"
+        @click="handleNextPage"
+      >
+        <template #icon>
+          <NIcon :component="ChevronRight24Filled" />
+        </template>
+      </NButton>
+    </div>
+
+    <SongList
+      v-if="data"
+      ref="songListRef"
+      :songs="data ?? []"
+      :is-self="accountInfo?.id == userInfo?.id"
+      :extra-button="buttons"
+      v-bind="$attrs"
+    />
+    <NCollapse v-if="userInfo?.canRequestSong">
+      <NCollapseItem title="点歌列表">
+        <NCard
+          size="small"
+          embedded
+        >
+          <div style="height: 400px; width: 700px; max-width: 100%; position: relative; margin: 0 auto">
+            <LiveRequestOBS :id="userInfo?.id" />
+          </div>
+        </NCard>
+      </NCollapseItem>
+    </NCollapse>
+    <NDivider />
+  </div>
 </template>
+
+<style scoped>
+.song-list-container {
+  position: relative;
+}
+
+.page-button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+}
+
+.page-button-left {
+  left: -20px;
+}
+
+.page-button-right {
+  right: -20px;
+}
+
+@media (max-width: 768px) {
+  .page-button-left {
+    left: 0;
+  }
+
+  .page-button-right {
+    right: 0;
+  }
+}
+</style>