From 8b908f5ac97925fde7934f7f28666986cc8091d6 Mon Sep 17 00:00:00 2001
From: Megghy <megghy@qq.com>
Date: Mon, 28 Apr 2025 04:04:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=AD=8C=E6=9B=B2?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=88=86=E9=A1=B5=E5=8A=9F=E8=83=BD=E5=92=8C?=
 =?UTF-8?q?=E9=94=AE=E7=9B=98=E5=BF=AB=E6=8D=B7=E9=94=AE=E6=94=AF=E6=8C=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 SongList 组件中实现分页功能，支持上一页和下一页操作
- 添加键盘快捷键，允许用户通过方向键进行翻页
- 优化组件结构，增强可读性和用户体验
---
 message_render_content.txt                    |  Bin 0 -> 45752 bytes
 src/components/SongList.vue                   |   32 +-
 src/components/manage/PointOrderCard.vue      | 1017 ++++++++++----
 src/data/TemplateTypes.ts                     |    1 +
 src/data/constants.ts                         |   24 +-
 src/views/manage/SettingsManageView.vue       |    2 +-
 src/views/manage/point/PointManage.vue        | 1218 ++++++++++-------
 src/views/manage/point/PointUserManage.vue    |  146 +-
 src/views/obs/blivechat/MessageRender.vue     |    4 +-
 src/views/obs/blivechat/TextMessage.vue       |    4 +-
 src/views/obs/blivechat/constants.js          |   24 +-
 .../indexTemplate/DefaultIndexTemplate.vue    |    1 +
 .../DefaultSongListTemplate.vue               |  152 +-
 13 files changed, 1712 insertions(+), 913 deletions(-)
 create mode 100644 message_render_content.txt

diff --git a/message_render_content.txt b/message_render_content.txt
new file mode 100644
index 0000000000000000000000000000000000000000..58cbbac1e75d4a7be84b24a9ce61cc7aef0e43c8
GIT binary patch
literal 45752
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
F`#(p(E7|}6

literal 0
HcmV?d00001

diff --git a/src/components/SongList.vue b/src/components/SongList.vue
index 002642c..268df0f 100644
--- a/src/components/SongList.vue
+++ b/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
diff --git a/src/components/manage/PointOrderCard.vue b/src/components/manage/PointOrderCard.vue
index b69f017..5720e4f 100644
--- a/src/components/manage/PointOrderCard.vue
+++ b/src/components/manage/PointOrderCard.vue
@@ -32,58 +32,101 @@ import {
   NTooltip,
   useDialog,
   useMessage,
+  NCard,
+  NSpace,
+  NAlert,
 } from 'naive-ui'
 import { computed, h, onMounted, ref, watch } from 'vue'
 import AddressDisplay from './AddressDisplay.vue'
 import PointGoodsItem from './PointGoodsItem.vue'
 
+type OrderType = ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel
+
 const props = defineProps<{
   order: ResponsePointOrder2UserModel[] | ResponsePointOrder2OwnerModel[]
   type: 'user' | 'owner'
   goods?: ResponsePointGoodModel[]
   loading?: boolean
 }>()
+
 const message = useMessage()
 const dialog = useDialog()
-
-const isLoading = ref(false)
-watch(
-  () => props.loading,
-  () => {
-    isLoading.value = props.loading
-  },
-)
-const orderAsUser = computed(() => {
-  return props.order as ResponsePointOrder2UserModel[]
-})
-const orderAsOwner = computed(() => {
-  return props.order as ResponsePointOrder2OwnerModel[]
-})
-const selectedItem = ref<DataTableRowKey[]>()
-
 const emit = defineEmits(['selectedItem'])
 
+// 状态管理
+const isLoading = ref(false)
 const showDetailModal = ref(false)
-const orderDetail = ref<ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel>()
-const currentGoods = computed(() => {
-  //@ts-ignore
-  if (props.type == 'user') return orderDetail.value.goods
-  //@ts-ignore
-  else return props.goods.find((g) => g.id == orderDetail.value.goodsId)
+const selectedItem = ref<DataTableRowKey[]>([])
+const orderDetail = ref<OrderType>()
+
+// 监听加载状态
+watch(() => props.loading, (val) => {
+  isLoading.value = !!val
 })
+
+// 计算属性
+const orderAsUser = computed(() => props.order as ResponsePointOrder2UserModel[])
+const orderAsOwner = computed(() => props.order as ResponsePointOrder2OwnerModel[])
+
+const currentGoods = computed(() => {
+  if (!orderDetail.value) return null
+
+  if (props.type === 'user') {
+    return (orderDetail.value as ResponsePointOrder2UserModel).goods
+  } else {
+    return props.goods?.find((g) => g.id === (orderDetail.value as ResponsePointOrder2OwnerModel).goodsId)
+  }
+})
+
 const expressOptions = computed(() => {
-  if (!orderAsOwner.value) return []
-  return orderAsOwner.value.map((o) => ({
-    label: o.expressCompany,
-    value: o.expressCompany,
+  if (props.type !== 'owner' || !orderAsOwner.value) return []
+
+  // 过滤掉空值并去重
+  const companies = [...new Set(
+    orderAsOwner.value
+      .map(o => o.expressCompany)
+      .filter(Boolean)
+  )]
+
+  return companies.map(company => ({
+    label: company,
+    value: company,
   }))
 })
 
-const orderColumn: DataTableColumns<ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel> = [
+// 状态映射表
+const statusMap = {
+  [PointOrderStatus.Pending]: {
+    text: '等待发货',
+    type: 'default',
+    description: '订单创建完成，等待主播发货',
+    action: '发货',
+    nextStatusText: '确认发货后，订单状态将变为"已发货"',
+    prevStatusText: ''
+  },
+  [PointOrderStatus.Shipped]: {
+    text: (hasExpress: boolean) => hasExpress ? '已发货 | 已填写单号' : '已发货 | 未填写单号',
+    type: (hasExpress: boolean) => hasExpress ? 'info' : 'warning',
+    description: '订单已发货，可以添加快递信息',
+    action: '完成订单',
+    nextStatusText: '确认后将可以进行发货信息填写',
+    prevStatusText: '回退到"等待发货"状态，适用于发货信息填写错误等情况'
+  },
+  [PointOrderStatus.Completed]: {
+    text: '已完成',
+    type: 'success',
+    description: '订单已完成',
+    action: '',
+    nextStatusText: '完成后无法再进行状态修改',
+    prevStatusText: '回退到"已发货"状态（仅限实体礼物）'
+  },
+}
+
+// 表格列定义
+const orderColumn: DataTableColumns<OrderType> = [
   {
     type: 'selection',
-
-    disabled: () => props.type == 'user',
+    disabled: () => props.type === 'user',
     options: [
       'all',
       'none',
@@ -91,8 +134,9 @@ const orderColumn: DataTableColumns<ResponsePointOrder2UserModel | ResponsePoint
         label: '选中未发货的',
         key: 'f2',
         onSelect: (pageData) => {
-          selectedItem.value = pageData.filter((row) => row.status == PointOrderStatus.Pending).map((row) => row.id)
-          console.log(selectedItem.value)
+          selectedItem.value = pageData
+            .filter((row) => row.status === PointOrderStatus.Pending)
+            .map((row) => row.id)
         },
       },
     ],
@@ -104,32 +148,36 @@ const orderColumn: DataTableColumns<ResponsePointOrder2UserModel | ResponsePoint
   {
     title: '用户',
     key: 'user',
-    disabled: () => props.type == 'user',
-    render: (row: ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel) => {
-      return row.instanceOf == 'user'
-        ? ''
-        : h(NTooltip, null, {
-            trigger: () =>
-              h(
-                NButton,
-                {
-                  text: true,
-                  type: 'primary',
-                  tag: 'a',
-                  href: 'https://space.bilibili.com/' + row.customer?.userId + '',
-                  target: '_blank',
-                },
-                { default: () => row.customer?.name || '未知用户' },
-              ),
-            default: () => row.customer?.userId || '未知ID',
-          })
+    disabled: () => props.type === 'user',
+    render: (row: OrderType) => {
+      if (row.instanceOf === 'user') return ''
+
+      const ownerRow = row as ResponsePointOrder2OwnerModel
+      return h(NTooltip, null, {
+        trigger: () =>
+          h(
+            NButton,
+            {
+              text: true,
+              type: 'primary',
+              tag: 'a',
+              href: `https://space.bilibili.com/${ownerRow.customer?.userId || ''}`,
+              target: '_blank',
+            },
+            { default: () => ownerRow.customer?.name || '未知用户' },
+          ),
+        default: () => ownerRow.customer?.userId || '未知ID',
+      })
     },
   },
   {
     title: '礼物名',
     key: 'giftName',
-    render: (row: ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel) => {
-      return row.instanceOf == 'user' ? row.goods.name : props.goods?.find((g) => g.id == row.goodsId)?.name
+    render: (row: OrderType) => {
+      if (row.instanceOf === 'user') {
+        return (row as ResponsePointOrder2UserModel).goods.name
+      }
+      return props.goods?.find((g) => g.id === row.goodsId)?.name || '未知礼物'
     },
   },
   {
@@ -141,7 +189,7 @@ const orderColumn: DataTableColumns<ResponsePointOrder2UserModel | ResponsePoint
     key: 'time',
     sorter: 'default',
     minWidth: 80,
-    render: (row: ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel) => {
+    render: (row: OrderType) => {
       return h(NTooltip, null, {
         trigger: () => h(NTime, { time: row.createAt, type: 'relative' }),
         default: () => h(NTime, { time: row.createAt }),
@@ -156,88 +204,64 @@ const orderColumn: DataTableColumns<ResponsePointOrder2UserModel | ResponsePoint
   {
     title: '订单状态',
     key: 'status',
-    filter:
-      props.type == 'owner'
-        ? undefined
-        : (filterOptionValue: unknown, row: ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel) => {
-            return row.status == filterOptionValue
-          },
+    filter: props.type === 'owner'
+      ? undefined
+      : (filterOptionValue: unknown, row: OrderType) => row.status === filterOptionValue,
     filterOptions: [
-      {
-        label: '等待发货',
-        value: PointOrderStatus.Pending,
-      },
-      {
-        label: '已发货',
-        value: PointOrderStatus.Shipped,
-      },
-      {
-        label: '已完成',
-        value: PointOrderStatus.Completed,
-      },
+      { label: '等待发货', value: PointOrderStatus.Pending },
+      { label: '已发货', value: PointOrderStatus.Shipped },
+      { label: '已完成', value: PointOrderStatus.Completed },
     ],
-    render: (row: ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel) => {
-      const statusMap = {
-        [PointOrderStatus.Pending]: {
-          text: '等待发货',
-          type: 'default'
-        },
-        [PointOrderStatus.Shipped]: {
-          text: row.expressCompany ? '已发货 | 已填写单号' : '已发货 | 未填写单号',
-          type: row.expressCompany ? 'info' : 'warning'
-        },
-        [PointOrderStatus.Completed]: {
-          text: '已完成',
-          type: 'success'
-        }
-      }
-
+    render: (row: OrderType) => {
       const status = statusMap[row.status] || { text: '未知状态', type: 'error' }
+      const hasExpress = !!row.expressCompany
+
+      const text = typeof status.text === 'function' ? status.text(hasExpress) : status.text
+      const type = typeof status.type === 'function' ? status.type(hasExpress) : status.type
 
       return h(NTag, {
         size: 'small',
-        type: status.type as any,
+        type: type as any,
         bordered: false
-      }, () => status.text)
+      }, () => text)
     },
   },
   {
     title: '订单类型',
     key: 'type',
-    filter:
-      props.type == 'owner'
-        ? undefined
-        : (filterOptionValue: unknown, row: ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel) => {
-            return row.type == filterOptionValue
-          },
+    filter: props.type === 'owner'
+      ? undefined
+      : (filterOptionValue: unknown, row: OrderType) => row.type === filterOptionValue,
     filterOptions: [
-      {
-        label: '实体礼物',
-        value: GoodsTypes.Physical,
-      },
-      {
-        label: '虚拟礼物',
-        value: GoodsTypes.Virtual,
-      },
+      { label: '实体礼物', value: GoodsTypes.Physical },
+      { label: '虚拟礼物', value: GoodsTypes.Virtual },
     ],
-    render: (row: ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel) => {
-      return h(NTag, { type: 'success', bordered: false, size: 'small' }, () =>
-        row.type == GoodsTypes.Physical ? '实体礼物' : '虚拟礼物',
-      )
+    render: (row: OrderType) => {
+      return h(NTag, {
+        type: 'success',
+        bordered: false,
+        size: 'small'
+      }, () => row.type === GoodsTypes.Physical ? '实体礼物' : '虚拟礼物')
     },
   },
   {
     title: '地址',
     key: 'address',
     minWidth: 250,
-    render: (row: ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel) => {
-      const collectUrl =
-        row.instanceOf == 'user' ? row.goods.collectUrl : props.goods?.find((g) => g.id == row.goodsId)?.collectUrl
-      if (row.type == GoodsTypes.Physical) {
-        return collectUrl
-          ? h(NButton, { tag: 'a', href: collectUrl, target: '_blank', text: true, type: 'info' }, () =>
-              h(NText, { italic: true }, () => '通过站外链接收集'),
-            )
+    render: (row: OrderType) => {
+      const goodsCollectUrl = row.instanceOf === 'user'
+        ? (row as ResponsePointOrder2UserModel).goods.collectUrl
+        : props.goods?.find((g) => g.id === row.goodsId)?.collectUrl
+
+      if (row.type === GoodsTypes.Physical) {
+        return goodsCollectUrl
+          ? h(NButton, {
+              tag: 'a',
+              href: goodsCollectUrl,
+              target: '_blank',
+              text: true,
+              type: 'info'
+            }, () => h(NText, { italic: true }, () => '通过站外链接收集'))
           : h(AddressDisplay, { address: row.address })
       } else {
         return h(NText, { depth: 3, italic: true }, () => '无需发货')
@@ -248,36 +272,23 @@ const orderColumn: DataTableColumns<ResponsePointOrder2UserModel | ResponsePoint
     title: '快递信息',
     key: 'express',
     minWidth: 150,
-    render: (row: ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel) => {
-      if (row.type == GoodsTypes.Physical) {
-        return row.trackingNumber
-          ? h(
-              NFlex,
-              {
-                depth: 3,
-              },
-              () => [
-                h(
-                  NTag,
-                  {
-                    size: 'tiny',
-                    bordered: false,
-                  },
-                  () => row.expressCompany,
-                ),
-                h(NText, { depth: 3 }, () => row.trackingNumber),
-              ],
-            )
-          : h(NText, { depth: 3, italic: true }, () => '尚未发货')
-      } else {
-        return h(NText, { depth: 3, italic: true }, () => '无需发货')
+    render: (row: OrderType) => {
+      if (row.type === GoodsTypes.Physical) {
+        if (row.trackingNumber) {
+          return h(NFlex, { align: 'center', gap: 8 }, () => [
+            h(NTag, { size: 'tiny', bordered: false }, () => row.expressCompany),
+            h(NText, { depth: 3 }, () => row.trackingNumber),
+          ])
+        }
+        return h(NText, { depth: 3, italic: true }, () => '尚未发货')
       }
+      return h(NText, { depth: 3, italic: true }, () => '无需发货')
     },
   },
   {
     title: '操作',
     key: 'action',
-    render: (row: ResponsePointOrder2UserModel | ResponsePointOrder2OwnerModel) => {
+    render: (row: OrderType) => {
       return h(
         NButton,
         {
@@ -293,10 +304,65 @@ const orderColumn: DataTableColumns<ResponsePointOrder2UserModel | ResponsePoint
     },
   },
 ]
+
+// 业务方法
+function getNextStatus(currentStatus: PointOrderStatus): PointOrderStatus | null {
+  if (!orderDetail.value) return null
+
+  // 虚拟礼物直接从等待到完成
+  if (orderDetail.value.type === GoodsTypes.Virtual && currentStatus === PointOrderStatus.Pending) {
+    return PointOrderStatus.Completed
+  }
+
+  if (currentStatus === PointOrderStatus.Pending) return PointOrderStatus.Shipped
+  if (currentStatus === PointOrderStatus.Shipped) return PointOrderStatus.Completed
+  return null
+}
+
+function getPrevStatus(currentStatus: PointOrderStatus): PointOrderStatus | null {
+  if (!orderDetail.value) return null
+
+  // 虚拟礼物不允许回退
+  if (orderDetail.value.type === GoodsTypes.Virtual) return null
+
+  // 已完成订单不允许回退
+  if (currentStatus === PointOrderStatus.Completed) return null
+
+  if (currentStatus === PointOrderStatus.Shipped) return PointOrderStatus.Pending
+  return null
+}
+
 function onChangeStatus(id: number, status: PointOrderStatus) {
+  const statusInfo = statusMap[status]
+  const currentStatusInfo = orderDetail.value ? statusMap[orderDetail.value.status] : null
+  const currentStatusText = currentStatusInfo
+    ? (typeof currentStatusInfo.text === 'function'
+      ? currentStatusInfo.text(!!orderDetail.value?.expressCompany)
+      : currentStatusInfo.text)
+    : '当前状态'
+
+  const newStatusText = typeof statusInfo.text === 'function'
+    ? statusInfo.text(false)
+    : statusInfo.text
+
+  let tipText = ''
+  if (status > (orderDetail.value?.status || 0)) {
+    tipText = statusInfo.nextStatusText
+
+    // 特殊处理虚拟礼物
+    if (orderDetail.value?.type === GoodsTypes.Virtual && status === PointOrderStatus.Completed) {
+      tipText = '该虚拟礼物将被标记为已完成'
+    }
+  } else if (status < (orderDetail.value?.status || 0)) {
+    tipText = statusInfo.prevStatusText
+  }
+
   dialog.info({
-    title: '提示',
-    content: '确认修改订单状态?',
+    title: '修改订单状态',
+    content: () => h('div', null, [
+      h('p', null, `确认将订单状态从「${currentStatusText}」修改为「${newStatusText}」吗？`),
+      tipText ? h('p', { style: 'color: #f90; margin-top: 8px;' }, tipText) : null
+    ]),
     positiveText: '确认',
     negativeText: '取消',
     onPositiveClick: () => {
@@ -304,17 +370,21 @@ function onChangeStatus(id: number, status: PointOrderStatus) {
     },
   })
 }
-async function updateStatus(id: number[], status: PointOrderStatus) {
+
+async function updateStatus(ids: number[], status: PointOrderStatus) {
+  if (!ids.length) return
+
   try {
     isLoading.value = true
     const data = await QueryPostAPI(POINT_API_URL + 'update-orders-status', {
-      ids: id,
+      ids,
       status,
     })
-    if (data.code == 200) {
+
+    if (data.code === 200) {
       message.success('操作成功')
       props.order?.forEach((row) => {
-        if (id.includes(row.id)) {
+        if (ids.includes(row.id)) {
           row.status = status
         }
       })
@@ -323,16 +393,18 @@ async function updateStatus(id: number[], status: PointOrderStatus) {
     }
   } catch (err) {
     message.error('操作失败: ' + err)
-    console.log(err)
+    console.error(err)
   } finally {
     isLoading.value = false
   }
 }
+
 async function updateExpress(item: ResponsePointOrder2OwnerModel) {
   if (!item.trackingNumber || !item.expressCompany) {
     message.error('请填写快递单号和快递公司')
     return
   }
+
   try {
     isLoading.value = true
     const data = await QueryPostAPI(POINT_API_URL + 'update-order-express', {
@@ -340,18 +412,21 @@ async function updateExpress(item: ResponsePointOrder2OwnerModel) {
       trackingNumber: item.trackingNumber,
       expressCompany: item.expressCompany,
     })
-    if (data.code == 200) {
+
+    if (data.code === 200) {
       message.success('操作成功')
     } else {
       message.error('操作失败: ' + data.message)
     }
   } catch (err) {
     message.error('操作失败: ' + err)
-    console.log(err)
+    console.error(err)
+  } finally {
+    isLoading.value = false
   }
-  isLoading.value = false
 }
 
+// 初始化
 onMounted(() => {
   props.order?.forEach((row) => {
     row.instanceOf = props.type
@@ -360,151 +435,521 @@ onMounted(() => {
 </script>
 
 <template>
-  <NDataTable
-    v-model:checked-row-keys="selectedItem"
-    :row-key="(row) => row.id"
-    :loading="isLoading"
-    :columns="orderColumn"
-    :data="order"
-    :pagination="{ showSizePicker: true, pageSizes: [10, 25, 50, 100], defaultPageSize: 10, size: 'small' }"
-    size="small"
-    @update:checked-row-keys="keys => emit('selectedItem', keys)"
-  >
-    <template #empty>
-      <NEmpty description="暂无订单" />
-    </template>
-  </NDataTable>
-  <NModal
-    v-if="orderDetail"
-    v-model:show="showDetailModal"
-    preset="card"
-    title="订单详情"
-    style="max-width: 800px; max-height: 90vh"
-  >
-    <NScrollbar style="max-height: 80vh">
-      <div style="width: 97%">
-        <template v-if="orderDetail.instanceOf == 'user'">
-          <NDivider style="margin-top: 0">
-            礼物快照
-            <NTooltip>
-              <template #trigger>
-                <NIcon :component="Info24Filled" />
-              </template>
-              兑换成功时生成的礼物快照, 即使主播对礼物内容进行了修改这个地方也不会变化
-            </NTooltip>
-          </NDivider>
-          <NFlex justify="center">
-            <PointGoodsItem
-              style="max-width: 300px"
-              :goods="currentGoods"
-            />
-          </NFlex>
-          <template v-if="orderDetail.type == GoodsTypes.Virtual">
-            <NDivider> 虚拟礼物内容 </NDivider>
-            <NInput
-              :value="currentGoods?.content"
-              type="textarea"
-              readonly
-              placeholder="无内容"
-            />
-          </template>
-          <template
-            v-if="
-              orderDetail.type == GoodsTypes.Physical &&
-                orderDetail.status == PointOrderStatus.Pending &&
-                orderDetail.goods.embedCollectUrl &&
-                orderDetail.goods.collectUrl
-            "
-          >
-            <NDivider> 填写收货地址 </NDivider>
-            <NButton
-              tag="a"
-              :href="orderDetail.goods.collectUrl"
-              target="_blank"
-              type="info"
+  <div class="point-order-card">
+    <NDataTable
+      v-model:checked-row-keys="selectedItem"
+      :row-key="(row) => row.id"
+      :loading="isLoading"
+      :columns="orderColumn"
+      :data="order"
+      :pagination="{
+        showSizePicker: true,
+        pageSizes: [10, 25, 50, 100],
+        defaultPageSize: 10,
+        size: 'small'
+      }"
+      size="small"
+      @update:checked-row-keys="keys => emit('selectedItem', keys)"
+    >
+      <template #empty>
+        <NEmpty description="暂无订单" />
+      </template>
+    </NDataTable>
+
+    <!-- 订单详情模态框 -->
+    <NModal
+      v-if="orderDetail"
+      v-model:show="showDetailModal"
+      preset="card"
+      title="订单详情"
+      style="max-width: 90vw; min-width: 400px; width: 800px;"
+    >
+      <NScrollbar
+        style="max-height: 80vh; padding-right: 12px;"
+        trigger="none"
+      >
+        <div class="order-detail-content">
+          <!-- 用户视图 -->
+          <template v-if="orderDetail.instanceOf === 'user'">
+            <NDivider style="margin-top: 0">
+              礼物快照
+              <NTooltip>
+                <template #trigger>
+                  <NIcon :component="Info24Filled" />
+                </template>
+                兑换成功时生成的礼物快照, 即使主播对礼物内容进行了修改这个地方也不会变化
+              </NTooltip>
+            </NDivider>
+
+            <NFlex justify="center">
+              <PointGoodsItem
+                v-if="currentGoods"
+                class="goods-item"
+                :goods="currentGoods"
+              />
+            </NFlex>
+
+            <!-- 虚拟礼物内容 -->
+            <template v-if="orderDetail.type === GoodsTypes.Virtual">
+              <NDivider>虚拟礼物内容</NDivider>
+              <NInput
+                v-if="currentGoods"
+                :value="currentGoods.content"
+                type="textarea"
+                readonly
+                placeholder="无内容"
+              />
+            </template>
+
+            <!-- 实体礼物地址收集 -->
+            <template
+              v-if="
+                orderDetail.type === GoodsTypes.Physical &&
+                  orderDetail.status === PointOrderStatus.Pending &&
+                  (orderDetail as ResponsePointOrder2UserModel).goods.embedCollectUrl &&
+                  (orderDetail as ResponsePointOrder2UserModel).goods.collectUrl
+              "
             >
-              在新窗口中打开地址填写表格
-            </NButton>
-            <br>
-            <iframe
-              height="1200"
-              width="800"
-              :src="orderDetail.goods.collectUrl"
-              frameborder="0"
-              allowfullscreen
-              sandbox="allow-same-origin allow-scripts allow-modals allow-downloads allow-forms allow-popups"
-            />
-          </template>
-        </template>
-        <template v-else-if="orderDetail.instanceOf == 'owner'">
-          <NFlex justify="center">
-            <PointGoodsItem
-              style="max-width: 300px"
-              :goods="currentGoods"
-            />
-          </NFlex>
-          <NDivider> 设置订单状态 </NDivider>
-          <NFlex
-            justify="center"
-            style="width: 100%"
-          >
-            <NSteps
-              :current="orderDetail.status + 1"
-              size="small"
-              @update:current="(c) => onChangeStatus(orderDetail?.id ?? -1, c - 1)"
-            >
-              <NStep
-                title="等待中"
-                description="等待主播发货"
-                :disabled="orderDetail.status >= 0"
-              />
-              <NStep
-                title="已发货"
-                description="已经发货了"
-                :disabled="orderDetail.status >= 1"
-              />
-              <NStep
-                title="已完成"
-                description="就是已完成"
-                :disabled="orderDetail.status >= 2"
-              />
-            </NSteps>
-          </NFlex>
-          <template v-if="orderDetail.status == PointOrderStatus.Shipped && orderDetail.instanceOf == 'owner'">
-            <NDivider> 快递 </NDivider>
-            <NFlex vertical>
-              <NAutoComplete
-                v-model:value="orderDetail.expressCompany"
-                placeholder="快递公司"
-                :options="expressOptions"
-                style="max-width: 100px"
-              />
-              <NInputGroup>
-                <NInputGroupLabel> 快递单号 </NInputGroupLabel>
-                <NInput
-                  v-model:value="orderDetail.trackingNumber"
-                  placeholder="就是快递单号"
-                  style="max-width: 200px"
-                />
-              </NInputGroup>
-              <NButton
-                type="primary"
-                style="width: 120px"
-                :loading="isLoading"
-                @click="updateExpress(orderDetail)"
+              <NDivider>填写收货地址</NDivider>
+              <NFlex
+                vertical
+                align="center"
+                gap="12"
               >
-                更新快递信息
+                <NButton
+                  tag="a"
+                  :href="(orderDetail as ResponsePointOrder2UserModel).goods.collectUrl"
+                  target="_blank"
+                  type="info"
+                >
+                  在新窗口中打开地址填写表格
+                </NButton>
+
+                <iframe
+                  class="collect-iframe"
+                  :src="(orderDetail as ResponsePointOrder2UserModel).goods.collectUrl"
+                  frameborder="0"
+                  allowfullscreen
+                  sandbox="allow-same-origin allow-scripts allow-modals allow-downloads allow-forms allow-popups"
+                />
+              </NFlex>
+            </template>
+          </template>
+
+          <!-- 主播视图 -->
+          <template v-else-if="orderDetail.instanceOf === 'owner'">
+            <NFlex justify="center">
+              <PointGoodsItem
+                v-if="currentGoods"
+                class="goods-item"
+                :goods="currentGoods"
+              />
+            </NFlex>
+
+            <NDivider>订单状态管理</NDivider>
+
+            <!-- 虚拟礼物提示 -->
+            <NAlert
+              v-if="orderDetail.type === GoodsTypes.Virtual"
+              type="success"
+              style="margin-bottom: 16px;"
+            >
+              <template #icon>
+                <NIcon>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    width="18"
+                    height="18"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <circle
+                      cx="12"
+                      cy="12"
+                      r="10"
+                    />
+                    <line
+                      x1="12"
+                      y1="16"
+                      x2="12"
+                      y2="12"
+                    />
+                    <line
+                      x1="12"
+                      y1="8"
+                      x2="12.01"
+                      y2="8"
+                    />
+                  </svg>
+                </NIcon>
+              </template>
+              该订单为虚拟礼物，无需发货
+            </NAlert>
+
+            <!-- 订单已完成提示 -->
+            <NAlert
+              v-if="orderDetail.status === PointOrderStatus.Completed"
+              type="info"
+              style="margin-bottom: 16px;"
+            >
+              <template #icon>
+                <NIcon>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    width="18"
+                    height="18"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+                    <polyline points="22 4 12 14.01 9 11.01" />
+                  </svg>
+                </NIcon>
+              </template>
+              该订单已完成，无法再进行状态修改
+            </NAlert>
+
+            <!-- 状态信息卡片 -->
+            <NCard
+              class="status-info-card"
+              size="small"
+            >
+              <template #header>
+                <div class="status-info-header">
+                  <NTag
+                    v-if="orderDetail.status === PointOrderStatus.Pending"
+                    type="default"
+                    size="medium"
+                  >
+                    {{ statusMap[PointOrderStatus.Pending].text }}
+                  </NTag>
+                  <NTag
+                    v-else-if="orderDetail.status === PointOrderStatus.Shipped"
+                    :type="orderDetail.expressCompany ? 'info' : 'warning'"
+                    size="medium"
+                  >
+                    {{ orderDetail.expressCompany
+                      ? '已发货 | 已填写单号'
+                      : '已发货 | 未填写单号' }}
+                  </NTag>
+                  <NTag
+                    v-else-if="orderDetail.status === PointOrderStatus.Completed"
+                    type="success"
+                    size="medium"
+                  >
+                    {{ statusMap[PointOrderStatus.Completed].text }}
+                  </NTag>
+                  <span class="status-info-desc">{{ statusMap[orderDetail.status].description }}</span>
+                </div>
+              </template>
+
+              <NSpace
+                v-if="orderDetail.status !== PointOrderStatus.Completed"
+                vertical
+                size="small"
+                class="status-actions-info"
+              >
+                <NCard
+                  v-if="getNextStatus(orderDetail.status) !== null"
+                  class="status-action-item"
+                  embedded
+                >
+                  <NSpace align="center">
+                    <NIcon
+                      class="action-icon"
+                      size="20"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <path d="m9 18 6-6-6-6" />
+                      </svg>
+                    </NIcon>
+                    <div class="action-text">
+                      <div class="action-title">
+                        下一状态操作
+                      </div>
+                      <div class="action-desc">
+                        {{ statusMap[orderDetail.status].nextStatusText }}
+                      </div>
+                    </div>
+                  </NSpace>
+                </NCard>
+
+                <NCard
+                  v-if="getPrevStatus(orderDetail.status) !== null"
+                  class="status-action-item"
+                  embedded
+                >
+                  <NSpace align="center">
+                    <NIcon
+                      class="action-icon"
+                      size="20"
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      >
+                        <path d="m15 18-6-6 6-6" />
+                      </svg>
+                    </NIcon>
+                    <div class="action-text">
+                      <div class="action-title">
+                        回退操作
+                      </div>
+                      <div class="action-desc">
+                        {{ statusMap[orderDetail.status].prevStatusText }}
+                      </div>
+                    </div>
+                  </NSpace>
+                </NCard>
+              </NSpace>
+            </NCard>
+
+
+            <!-- 快递信息 -->
+            <template v-if="orderDetail.status === PointOrderStatus.Shipped && orderDetail.instanceOf === 'owner' && orderDetail.type === GoodsTypes.Physical">
+              <NDivider>快递</NDivider>
+              <NCard
+                size="small"
+                class="express-form"
+              >
+                <NSpace
+                  vertical
+                  size="medium"
+                >
+                  <NAutoComplete
+                    v-model:value="orderDetail.expressCompany"
+                    placeholder="快递公司"
+                    :options="expressOptions"
+                    class="express-company-input"
+                  />
+                  <NInputGroup>
+                    <NInputGroupLabel>快递单号</NInputGroupLabel>
+                    <NInput
+                      v-model:value="orderDetail.trackingNumber"
+                      placeholder="就是快递单号"
+                      class="tracking-number-input"
+                    />
+                  </NInputGroup>
+                  <NButton
+                    type="primary"
+                    class="update-express-btn"
+                    :loading="isLoading"
+                    @click="updateExpress(orderDetail as ResponsePointOrder2OwnerModel)"
+                  >
+                    更新快递信息
+                  </NButton>
+                </NSpace>
+              </NCard>
+            </template>
+
+            <NDivider>
+              状态更新
+            </NDivider>
+
+            <!-- 状态修改指引 -->
+            <NText
+              v-if="orderDetail.status !== PointOrderStatus.Completed"
+              class="status-guide"
+              depth="3"
+            >
+              <NIcon
+                :component="Info24Filled"
+                style="margin-right: 4px"
+              />订
+              点击步骤条可直接修改订单状态，或使用下方按钮进行更改
+            </NText>
+
+            <NFlex
+              justify="center"
+              class="order-status-steps"
+            >
+              <NSteps
+                :current="orderDetail.status + 1"
+                size="small"
+                @update:current="(c) => onChangeStatus(orderDetail?.id ?? -1, c - 1)"
+              >
+                <NStep
+                  title="等待中"
+                  :description="statusMap[PointOrderStatus.Pending].description"
+                  :disabled="orderDetail.status >= 0 || orderDetail.type === GoodsTypes.Virtual"
+                />
+                <NStep
+                  title="已发货"
+                  :description="statusMap[PointOrderStatus.Shipped].description"
+                  :disabled="orderDetail.status >= 1 || orderDetail.type === GoodsTypes.Virtual"
+                />
+                <NStep
+                  title="已完成"
+                  :description="statusMap[PointOrderStatus.Completed].description"
+                  :disabled="orderDetail.status >= 2"
+                />
+              </NSteps>
+            </NFlex>
+
+            <!-- 状态操作按钮 -->
+            <NFlex
+              justify="center"
+              class="status-action-buttons"
+            >
+              <NButton
+                v-if="getPrevStatus(orderDetail.status) !== null"
+                type="warning"
+                @click="onChangeStatus(orderDetail.id, getPrevStatus(orderDetail.status)!)"
+              >
+                回退到上一状态
+              </NButton>
+
+              <NButton
+                v-if="getNextStatus(orderDetail.status) !== null"
+                type="primary"
+                @click="onChangeStatus(orderDetail.id, getNextStatus(orderDetail.status)!)"
+              >
+                {{ orderDetail.type === GoodsTypes.Virtual && orderDetail.status === PointOrderStatus.Pending
+                  ? '完成订单'
+                  : statusMap[orderDetail.status].action }}
               </NButton>
             </NFlex>
           </template>
-        </template>
-      </div>
-    </NScrollbar>
-  </NModal>
+        </div>
+      </NScrollbar>
+    </NModal>
+  </div>
 </template>
 
 <style scoped>
+.point-order-card {
+  width: 100%;
+}
+
 :deep(.n-data-table .n-data-table-tr:hover) {
-  background-color: rgba(0, 0, 0, 0.03);
+  background-color: var(--n-table-color-striped);
+}
+
+.order-detail-content {
+  width: 100%;
+  padding: 0 8px;
+}
+
+.goods-item {
+  max-width: 300px;
+  width: 100%;
+}
+
+.order-status-steps {
+  width: 100%;
+  margin-bottom: 12px;
+}
+
+.status-info-card {
+  margin-bottom: 16px;
+}
+
+.status-info-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.status-info-desc {
+  margin-left: 12px;
+  color: var(--n-text-color-3);
+}
+
+.status-actions-info {
+  width: 100%;
+}
+
+.action-icon {
+  color: var(--n-text-color-3);
+}
+
+.action-title {
+  font-weight: 500;
+  margin-bottom: 4px;
+  font-size: 14px;
+  color: var(--n-text-color-1);
+}
+
+.action-desc {
+  color: var(--n-text-color-3);
+  font-size: 13px;
+}
+
+.status-guide {
+  display: block;
+  margin-bottom: 12px;
+  font-size: 14px;
+  text-align: center;
+}
+
+.express-form {
+  max-width: 400px;
+}
+
+.express-company-input {
+  max-width: 200px;
+}
+
+.tracking-number-input {
+  max-width: 300px;
+}
+
+.update-express-btn {
+  width: 120px;
+}
+
+.collect-iframe {
+  height: 600px;
+  width: 100%;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--n-border-color);
+}
+
+.status-action-buttons {
+  margin: 16px 0 24px;
+  display: flex;
+  gap: 12px;
+}
+
+.status-action-buttons .n-button {
+  min-width: 120px;
+  transition: all 0.3s;
+}
+
+.status-action-buttons .n-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 2px 8px var(--n-box-shadow-color);
+}
+
+@media (max-width: 768px) {
+  .order-detail-modal {
+    max-width: 95vw;
+  }
+
+  .goods-item {
+    max-width: 100%;
+  }
+
+  .collect-iframe {
+    height: 400px;
+  }
 }
 </style>
diff --git a/src/data/TemplateTypes.ts b/src/data/TemplateTypes.ts
index a887f9a..8062b25 100644
--- a/src/data/TemplateTypes.ts
+++ b/src/data/TemplateTypes.ts
@@ -21,4 +21,5 @@ export interface ScheduleConfigType {
   userInfo: UserInfo | undefined
   biliInfo: any | undefined
   data: ScheduleWeekInfo[] | undefined
+  config?: any
 }
diff --git a/src/data/constants.ts b/src/data/constants.ts
index b1066cd..8cd2605 100644
--- a/src/data/constants.ts
+++ b/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)
   }
 };
 
diff --git a/src/views/manage/SettingsManageView.vue b/src/views/manage/SettingsManageView.vue
index 9b9350b..6e27403 100644
--- a/src/views/manage/SettingsManageView.vue
+++ b/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';
 
   // 模板定义类型接口
diff --git a/src/views/manage/point/PointManage.vue b/src/views/manage/point/PointManage.vue
index d179992..aae9dcf 100644
--- a/src/views/manage/point/PointManage.vue
+++ b/src/views/manage/point/PointManage.vue
@@ -9,6 +9,7 @@ import { CN_HOST, CURRENT_HOST, FILE_BASE_URL, POINT_API_URL } from '@/data/cons
 import { useAuthStore } from '@/store/useAuthStore'
 import { Info24Filled } from '@vicons/fluent'
 import { useRouteHash } from '@vueuse/router'
+import { useStorage } from '@vueuse/core'
 import {
   FormItemRule,
   NAlert,
@@ -46,16 +47,19 @@ import { computed, onMounted, ref } from 'vue'
 import PointOrderManage from './PointOrderManage.vue'
 import PointSettings from './PointSettings.vue'
 import PointUserManage from './PointUserManage.vue'
-import { useStorage } from '@vueuse/core'
 
 const message = useMessage()
 const accountInfo = useAccount()
 const dialog = useDialog()
 const useBiliAuth = useAuthStore()
+const formRef = ref()
+const isUpdating = ref(false)
+const isAllowedPrivacyPolicy = ref(false)
+const useCNUrl = useStorage('Settings.UseCNUrl', false)
+const showAddGoodsModal = ref(false)
 
-const realHash = useRouteHash('goods', {
-  mode: 'replace',
-})
+// 路由哈希处理
+const realHash = useRouteHash('goods', { mode: 'replace' })
 const hash = computed({
   get() {
     return realHash.value?.startsWith('#') ? realHash.value.slice(1) : realHash.value || 'goods'
@@ -65,6 +69,7 @@ const hash = computed({
   },
 })
 
+// 商品数据及模型
 const goods = ref<ResponsePointGoodModel[]>(await useBiliAuth.GetGoods(accountInfo.value?.id, message))
 const defaultGoodsModel = {
   goods: {
@@ -72,39 +77,60 @@ const defaultGoodsModel = {
     status: GoodsStatus.Normal,
     maxBuyCount: 1,
     isAllowRebuy: false,
-    setting: {},
+    setting: {
+      allowGuardLevel: 0
+    },
   } as PointGoodsModel,
   fileList: [],
 } as { goods: PointGoodsModel; fileList: UploadFileInfo[] }
 const currentGoodsModel = ref<{ goods: PointGoodsModel; fileList: UploadFileInfo[] }>(
-  JSON.parse(JSON.stringify(defaultGoodsModel)),
+  JSON.parse(JSON.stringify(defaultGoodsModel))
 )
 
-const showAddGoodsModal = ref(false)
-
-const isAllowedPrivacyPolicy = ref(false)
-const isUpdating = ref(false)
-
-const useCNUrl = useStorage('Settings.UseCNUrl', false)
-
+// 计算属性
 const allowedYearOptions = computed(() => {
-  //从2024到现在的年份
-  return Array.from({ length: new Date().getFullYear() - 2024 + 1 }, (_, i) => 2024 + i).map((item) => {
-    return {
-      label: item.toString() + '年',
-      value: item,
-    }
-  })
-})
-const allowedMonthOptions = computed(() => {
-  return Array.from({ length: 12 }, (_, i) => i + 1).map((item) => {
-    return {
-      label: item.toString() + '月',
-      value: item + 1,
-    }
-  })
+  return Array.from({ length: new Date().getFullYear() - 2024 + 1 }, (_, i) => 2024 + i).map((item) => ({
+    label: item.toString() + '年',
+    value: item,
+  }))
 })
 
+const allowedMonthOptions = computed(() => {
+  return Array.from({ length: 12 }, (_, i) => i + 1).map((item) => ({
+    label: item.toString() + '月',
+    value: item,
+  }))
+})
+
+const existTags = computed(() => {
+  if (goods.value.length === 0) return []
+
+  const tempSet = new Set<string>()
+  for (const good of goods.value) {
+    if (!good.tags || good.tags.length === 0) continue
+    good.tags.forEach(tag => tempSet.add(tag))
+  }
+
+  return Array.from(tempSet).map(tag => ({ label: tag, value: tag }))
+})
+
+// 下拉菜单选项
+const dropDownActions = {
+  update: {
+    label: '修改',
+    key: 'update',
+    action: (item: ResponsePointGoodModel) => onUpdateClick(item),
+  },
+  delete: {
+    label: '删除',
+    key: 'delete',
+    action: (item: ResponsePointGoodModel) => onDeleteClick(item),
+  },
+} as { [key: string]: { label: string; key: string; action: (item: ResponsePointGoodModel) => void } }
+
+const dropDownOptions = computed(() => Object.values(dropDownActions))
+
+// 表单验证规则
 const rules = {
   name: {
     required: true,
@@ -121,30 +147,23 @@ const rules = {
   content: {
     required: true,
     message: '请输入虚拟礼物的具体内容',
-    validator: (rule: FormItemRule, value: string) => {
-      return currentGoodsModel.value.goods.type != GoodsTypes.Virtual || (value?.length ?? 0) > 0
-    },
+    validator: (rule: FormItemRule, value: string) =>
+      currentGoodsModel.value.goods.type != GoodsTypes.Virtual || (value?.length ?? 0) > 0
   },
   privacy: {
     required: true,
     message: '需要阅读并同意本站隐私协议',
-    validator: (rule: FormItemRule, value: boolean) => {
-      return (
-        (currentGoodsModel.value.goods.type != GoodsTypes.Physical &&
-          currentGoodsModel.value.goods.collectUrl != undefined) ||
-        isAllowedPrivacyPolicy.value
-      )
-    },
+    validator: (rule: FormItemRule, value: boolean) =>
+      (currentGoodsModel.value.goods.type != GoodsTypes.Physical &&
+      currentGoodsModel.value.goods.collectUrl != undefined) ||
+      isAllowedPrivacyPolicy.value
   },
   maxBuyCount: {
     required: true,
     message: '需要输入最大购买数量',
-    validator: (rule: FormItemRule, value: number) => {
-      return (
-        currentGoodsModel.value.goods.type != GoodsTypes.Physical ||
-        (currentGoodsModel.value.goods.maxBuyCount ?? 0) > 0
-      )
-    },
+    validator: (rule: FormItemRule, value: number) =>
+      currentGoodsModel.value.goods.type != GoodsTypes.Physical ||
+      (currentGoodsModel.value.goods.maxBuyCount ?? 0) > 0
   },
   'goods.url': {
     required: true,
@@ -159,104 +178,64 @@ const rules = {
     },
   },
 }
-const formRef = ref()
-
-const existTags = computed(() => {
-  if (goods.value.length == 0) {
-    return []
-  }
-  //获取所有已存在商品的tags并去重
-  const tempSet = new Set<string>()
-  for (let i = 0; i < goods.value.length; i++) {
-    const goodsTags = goods.value[i].tags
-    if (!goodsTags || goodsTags.length == 0) {
-      continue
-    }
-    for (let j = 0; j < goods.value[i].tags.length; j++) {
-      tempSet.add(goods.value[i].tags[j])
-    }
-  }
-  return Array.from(tempSet).map((item) => {
-    return { label: item, value: item }
-  })
-})
-
-const dropDownActions = {
-  update: {
-    label: '修改',
-    key: 'update',
-    action: (item: ResponsePointGoodModel) => onUpdateClick(item),
-  },
-  delete: {
-    label: '删除',
-    key: 'delete',
-    action: (item: ResponsePointGoodModel) => onDeleteClick(item),
-  },
-} as { [key: string]: { label: string; key: string; action: (item: ResponsePointGoodModel) => void } }
-const dropDownOptions = computed(() => {
-  return Object.values(dropDownActions)
-})
 
+// 方法
 async function setFunctionEnable(enable: boolean) {
-  let success = false
-  if (enable) {
-    success = await EnableFunction(FunctionTypes.Point)
-  } else {
-    success = await DisableFunction(FunctionTypes.Point)
-  }
+  const success = enable ? await EnableFunction(FunctionTypes.Point) : await DisableFunction(FunctionTypes.Point)
+
   if (success) {
     message.success('已' + (enable ? '启用' : '禁用') + '积分系统')
   } else {
     message.error('无法' + (enable ? '启用' : '禁用') + '积分系统')
   }
 }
+
 async function updateGoods(e: MouseEvent) {
   if (isUpdating.value || !formRef.value) return
   e.preventDefault()
   isUpdating.value = true
-  await formRef.value
-    .validate()
-    .then(async () => {
-      if (currentGoodsModel.value.fileList.length > 0) {
-        currentGoodsModel.value.goods.cover = await getImageUploadModel(currentGoodsModel.value.fileList)
-      }
-      await QueryPostAPI<ResponsePointGoodModel>(POINT_API_URL + 'update-goods', currentGoodsModel.value.goods)
-        .then((data) => {
-          if (data.code == 200) {
-            message.success('成功')
-            showAddGoodsModal.value = false
-            currentGoodsModel.value = JSON.parse(JSON.stringify(defaultGoodsModel))
-            if (goods.value.find((g) => g.id == data.data.id)) {
-              goods.value[goods.value.findIndex((g) => g.id == data.data.id)] = data.data
-            } else {
-              goods.value.push(data.data)
-            }
-          } else {
-            message.error('失败: ' + data.message)
-          }
-        })
-        .catch((err) => {
-          message.error('失败: ' + err)
-          console.error(err)
-        })
-    })
-    .catch((err: unknown) => {
-      console.log(err)
-      message.error('表单验证失败')
-    })
-    .finally(() => {
-      isUpdating.value = false
-    })
-}
-function OnFileListChange(files: UploadFileInfo[]) {
-  if (files.length == 1) {
-    const file = files[0]
-    if ((file.file?.size ?? 0) > 10 * 1024 * 1024) {
-      message.error('文件大小不能超过10MB')
-      currentGoodsModel.value.fileList = []
+
+  try {
+    await formRef.value.validate()
+
+    if (currentGoodsModel.value.fileList.length > 0) {
+      currentGoodsModel.value.goods.cover = await getImageUploadModel(currentGoodsModel.value.fileList)
     }
+
+    const { code, data, message: errMsg } = await QueryPostAPI<ResponsePointGoodModel>(
+      POINT_API_URL + 'update-goods',
+      currentGoodsModel.value.goods
+    )
+
+    if (code === 200) {
+      message.success('成功')
+      showAddGoodsModal.value = false
+      currentGoodsModel.value = JSON.parse(JSON.stringify(defaultGoodsModel))
+
+      const index = goods.value.findIndex(g => g.id === data.id)
+      if (index >= 0) {
+        goods.value[index] = data
+      } else {
+        goods.value.push(data)
+      }
+    } else {
+      message.error('失败: ' + errMsg)
+    }
+  } catch (err) {
+    console.error(err)
+    message.error(typeof err === 'string' ? `失败: ${err}` : '表单验证失败')
+  } finally {
+    isUpdating.value = false
   }
 }
+
+function OnFileListChange(files: UploadFileInfo[]) {
+  if (files.length === 1 && (files[0].file?.size ?? 0) > 10 * 1024 * 1024) {
+    message.error('文件大小不能超过10MB')
+    currentGoodsModel.value.fileList = []
+  }
+}
+
 function onUpdateClick(item: ResponsePointGoodModel) {
   currentGoodsModel.value = {
     goods: {
@@ -278,8 +257,8 @@ function onUpdateClick(item: ResponsePointGoodModel) {
   isAllowedPrivacyPolicy.value = true
   showAddGoodsModal.value = true
 }
-//下架
-function onSetShelfClick(item: ResponsePointGoodModel, status: GoodsStatus) {
+
+async function onSetShelfClick(item: ResponsePointGoodModel, status: GoodsStatus) {
   const d = dialog.warning({
     title: '警告',
     content: `你确定要${status == GoodsStatus.Normal ? '重新上架' : '下架'}这个礼物吗？`,
@@ -288,22 +267,23 @@ function onSetShelfClick(item: ResponsePointGoodModel, status: GoodsStatus) {
     onPositiveClick: async () => {
       d.loading = true
       const originStatus = item.status
-      //item.status = status
+
       try {
-        const data = await QueryPostAPI(POINT_API_URL + 'update-goods-status', {
+        const { code, message: errMsg } = await QueryPostAPI(POINT_API_URL + 'update-goods-status', {
           ids: [item.id],
           status: status,
         })
-        if (data.code == 200) {
+
+        if (code === 200) {
           message.success('成功')
-          const index = goods.value.findIndex((g) => g.id == item.id)
+          const index = goods.value.findIndex(g => g.id === item.id)
           if (index > -1) {
             goods.value[index].status = status
           }
         } else {
-          message.error('失败: ' + data.message)
+          message.error('失败: ' + errMsg)
           item.status = originStatus
-          console.error(data.message)
+          console.error(errMsg)
         }
       } catch (err) {
         message.error('失败: ' + err)
@@ -315,6 +295,7 @@ function onSetShelfClick(item: ResponsePointGoodModel, status: GoodsStatus) {
     },
   })
 }
+
 function onDeleteClick(item: ResponsePointGoodModel) {
   const d = dialog.warning({
     title: '警告',
@@ -323,16 +304,18 @@ function onDeleteClick(item: ResponsePointGoodModel) {
     negativeText: '取消',
     onPositiveClick: async () => {
       d.loading = true
+
       try {
-        const data = await QueryGetAPI(POINT_API_URL + 'delete-goods', {
+        const { code, message: errMsg } = await QueryGetAPI(POINT_API_URL + 'delete-goods', {
           id: item.id,
         })
-        if (data.code == 200) {
+
+        if (code === 200) {
           message.success('成功')
-          goods.value = goods.value.filter((g) => g.id != item.id)
+          goods.value = goods.value.filter(g => g.id !== item.id)
         } else {
-          message.error('失败: ' + data.message)
-          console.error(data.message)
+          message.error('失败: ' + errMsg)
+          console.error(errMsg)
         }
       } catch (err) {
         message.error('失败: ' + err)
@@ -343,94 +326,127 @@ function onDeleteClick(item: ResponsePointGoodModel) {
     },
   })
 }
+
 function onModalOpen() {
   if (currentGoodsModel.value.goods.id) {
     resetGoods()
   }
   showAddGoodsModal.value = true
 }
+
 function resetGoods() {
   currentGoodsModel.value = JSON.parse(JSON.stringify(defaultGoodsModel))
 }
-function responseGoodsToModel(goods: ResponsePointGoodModel) { }
 
 onMounted(() => { })
 </script>
 
 <template>
-  <NFlex>
-    <NAlert
-      :type="accountInfo.settings.enableFunctions.includes(FunctionTypes.Point) && accountInfo.eventFetcherState.online
-        ? 'success'
-        : 'warning'
-      "
-      style="min-width: 400px"
-    >
-      启用
-      <NButton
-        text
-        type="primary"
-        tag="a"
-        href="https://www.wolai.com/ueENtfAm9gPEqHrAVSB2Co"
-        target="_blank"
-      >
-        积分系统
-      </NButton>
-      <NDivider vertical />
-      <NSwitch
-        :value="accountInfo?.settings.enableFunctions.includes(FunctionTypes.Point)"
-        @update:value="setFunctionEnable"
-      />
-      <br>
-      <NText depth="3">
-        此功能需要部署
-        <NButton
-          text
-          type="primary"
-          tag="a"
-          href="https://www.wolai.com/fje5wLtcrDoZcb9rk2zrFs"
-          target="_blank"
-        >
-          VtsuruEventFetcher
-        </NButton>
-        , 否则将无法记录各种事件
-      </NText>
-    </NAlert>
-    <EventFetcherStatusCard />
-  </NFlex>
-  <NDivider
-    style="margin: 16px 0 16px 0"
-    title-placement="left"
+  <!-- 头部状态卡片 -->
+  <NFlex
+    vertical
+    :size="16"
   >
-    礼物展示页链接
-  </NDivider>
-  <NFlex align="center">
-    <NInputGroup style="max-width: 400px;">
-      <NInput
-        :value="`${useCNUrl ? CN_HOST : CURRENT_HOST}@${accountInfo.name}/goods`"
-        readonly
-      />
-      <NButton
-        secondary
-        @click="copyToClipboard(`${useCNUrl ? CN_HOST : CURRENT_HOST}@${accountInfo.name}/goods`)"
+    <NFlex
+      justify="space-between"
+      align="center"
+      :gap="16"
+    >
+      <NAlert
+        :type="accountInfo.settings.enableFunctions.includes(FunctionTypes.Point) && accountInfo.eventFetcherState.online
+          ? 'success'
+          : 'warning'
+        "
+        style="flex: 1; min-width: 300px"
       >
-        复制
-      </NButton>
-    </NInputGroup>
-    <NCheckbox v-model:checked="useCNUrl">
-      使用国内镜像(访问更快)
-    </NCheckbox>
+        <NFlex
+          align="center"
+          :gap="8"
+        >
+          <span>启用</span>
+          <NButton
+            text
+            type="primary"
+            tag="a"
+            href="https://www.wolai.com/ueENtfAm9gPEqHrAVSB2Co"
+            target="_blank"
+          >
+            积分系统
+          </NButton>
+          <NDivider vertical />
+          <NSwitch
+            :value="accountInfo?.settings.enableFunctions.includes(FunctionTypes.Point)"
+            @update:value="setFunctionEnable"
+          />
+        </NFlex>
+        <NText
+          depth="3"
+          style="margin-top: 8px; display: block"
+        >
+          此功能需要部署
+          <NButton
+            text
+            type="primary"
+            tag="a"
+            href="https://www.wolai.com/fje5wLtcrDoZcb9rk2zrFs"
+            target="_blank"
+          >
+            VtsuruEventFetcher
+          </NButton>
+          , 否则将无法记录各种事件
+        </NText>
+      </NAlert>
+      <EventFetcherStatusCard />
+    </NFlex>
+
+    <!-- 礼物展示页链接 -->
+    <NDivider
+      style="margin: 16px 0"
+      title-placement="left"
+    >
+      礼物展示页链接
+    </NDivider>
+
+    <NFlex
+      align="center"
+      :gap="12"
+    >
+      <NInputGroup style="max-width: 400px;">
+        <NInput
+          :value="`${useCNUrl ? CN_HOST : CURRENT_HOST}@${accountInfo.name}/goods`"
+          readonly
+        />
+        <NButton
+          secondary
+          @click="copyToClipboard(`${useCNUrl ? CN_HOST : CURRENT_HOST}@${accountInfo.name}/goods`)"
+        >
+          复制
+        </NButton>
+      </NInputGroup>
+      <NCheckbox v-model:checked="useCNUrl">
+        使用国内镜像(访问更快)
+      </NCheckbox>
+    </NFlex>
   </NFlex>
-  <NDivider />
+
+  <NDivider style="margin: 16px 0" />
+
+  <!-- 主要内容标签页 -->
   <NTabs
     v-model:value="hash"
     animated
+    style="margin-top: 8px"
   >
+    <!-- 礼物管理标签页 -->
     <NTabPane
       name="goods"
       tab="礼物"
     >
-      <NFlex>
+      <NFlex
+        justify="start"
+        :gap="12"
+        style="margin-bottom: 16px"
+      >
         <NButton
           type="primary"
           @click="onModalOpen"
@@ -444,7 +460,8 @@ onMounted(() => { })
           前往展示页
         </NButton>
       </NFlex>
-      <NDivider />
+
+      <!-- 上架礼物列表 -->
       <NEmpty
         v-if="goods.filter((g) => g.status != GoodsStatus.Discontinued).length == 0"
         description="暂无礼物"
@@ -452,44 +469,60 @@ onMounted(() => { })
       <NGrid
         v-else
         cols="1 500:2 700:3 1000:4 1200:5"
-        :x-gap="12"
-        :y-gap="8"
+        :x-gap="16"
+        :y-gap="16"
       >
         <NGridItem
           v-for="item in goods.filter((g) => g.status != GoodsStatus.Discontinued)"
           :key="item.id"
         >
-          <PointGoodsItem :goods="item">
+          <PointGoodsItem
+            :goods="item"
+            class="point-goods-card"
+          >
             <template #footer>
-              <span> 价格: {{ item.price }} </span>
-              <NFlex>
-                <NButton
-                  type="info"
-                  size="small"
-                  @click="onUpdateClick(item)"
+              <NFlex
+                vertical
+                :gap="8"
+                style="width: 100%"
+              >
+                <span>价格: {{ item.price }}</span>
+                <NFlex
+                  justify="space-between"
+                  :gap="8"
                 >
-                  修改
-                </NButton>
-                <NButton
-                  type="warning"
-                  size="small"
-                  @click="onSetShelfClick(item, GoodsStatus.Discontinued)"
-                >
-                  下架
-                </NButton>
-                <NButton
-                  type="error"
-                  size="small"
-                  @click="onDeleteClick(item)"
-                >
-                  删除
-                </NButton>
+                  <NButton
+                    type="info"
+                    size="small"
+                    @click="onUpdateClick(item)"
+                  >
+                    修改
+                  </NButton>
+                  <NButton
+                    type="warning"
+                    size="small"
+                    @click="onSetShelfClick(item, GoodsStatus.Discontinued)"
+                  >
+                    下架
+                  </NButton>
+                  <NButton
+                    type="error"
+                    size="small"
+                    @click="onDeleteClick(item)"
+                  >
+                    删除
+                  </NButton>
+                </NFlex>
               </NFlex>
             </template>
           </PointGoodsItem>
         </NGridItem>
       </NGrid>
-      <NDivider>已下架</NDivider>
+
+      <!-- 下架礼物列表 -->
+      <NDivider style="margin: 24px 0 16px">
+        已下架
+      </NDivider>
       <NEmpty
         v-if="goods.filter((g) => g.status == GoodsStatus.Discontinued).length == 0"
         description="暂无已下架的礼物"
@@ -497,44 +530,58 @@ onMounted(() => { })
       <NGrid
         v-else
         cols="1 500:2 700:3 1000:4 1200:5"
-        :x-gap="12"
-        :y-gap="8"
+        :x-gap="16"
+        :y-gap="16"
       >
         <NGridItem
           v-for="item in goods.filter((g) => g.status == GoodsStatus.Discontinued)"
           :key="item.id"
         >
-          <PointGoodsItem :goods="item">
+          <PointGoodsItem
+            :goods="item"
+            class="point-goods-card"
+          >
             <template #footer>
-              <span> 价格: {{ item.price }} </span>
-              <NFlex>
-                <NButton
-                  type="info"
-                  size="small"
-                  @click="onUpdateClick(item)"
+              <NFlex
+                vertical
+                :gap="8"
+                style="width: 100%"
+              >
+                <span>价格: {{ item.price }}</span>
+                <NFlex
+                  justify="space-between"
+                  :gap="8"
                 >
-                  修改
-                </NButton>
-                <NButton
-                  type="success"
-                  size="small"
-                  @click="onSetShelfClick(item, GoodsStatus.Normal)"
-                >
-                  上架
-                </NButton>
-                <NButton
-                  type="error"
-                  size="small"
-                  @click="onDeleteClick(item)"
-                >
-                  删除
-                </NButton>
+                  <NButton
+                    type="info"
+                    size="small"
+                    @click="onUpdateClick(item)"
+                  >
+                    修改
+                  </NButton>
+                  <NButton
+                    type="success"
+                    size="small"
+                    @click="onSetShelfClick(item, GoodsStatus.Normal)"
+                  >
+                    上架
+                  </NButton>
+                  <NButton
+                    type="error"
+                    size="small"
+                    @click="onDeleteClick(item)"
+                  >
+                    删除
+                  </NButton>
+                </NFlex>
               </NFlex>
             </template>
           </PointGoodsItem>
         </NGridItem>
       </NGrid>
     </NTabPane>
+
+    <!-- 订单管理标签页 -->
     <NTabPane
       name="orders"
       tab="订单"
@@ -542,6 +589,8 @@ onMounted(() => { })
     >
       <PointOrderManage :goods="goods" />
     </NTabPane>
+
+    <!-- 用户管理标签页 -->
     <NTabPane
       name="users"
       tab="用户"
@@ -549,6 +598,8 @@ onMounted(() => { })
     >
       <PointUserManage :goods="goods" />
     </NTabPane>
+
+    <!-- 设置标签页 -->
     <NTabPane
       name="settings"
       tab="设置"
@@ -557,12 +608,14 @@ onMounted(() => { })
       <PointSettings />
     </NTabPane>
   </NTabs>
-  <NDivider />
+
+  <!-- 添加/修改礼物模态框 -->
   <NModal
     v-model:show="showAddGoodsModal"
     preset="card"
     style="width: 600px; max-width: 90%"
     title="添加/修改礼物信息"
+    class="goods-modal"
   >
     <template #header-extra>
       <NPopconfirm
@@ -585,294 +638,431 @@ onMounted(() => { })
         ref="formRef"
         :model="currentGoodsModel"
         :rules="rules"
-        style="width: 95%"
+        style="width: 100%"
       >
-        <NFormItem
-          path="goods.name"
-          label="名称"
-          required
+        <!-- 基本信息分组 -->
+        <NDivider
+          title-placement="left"
+          style="margin: 8px 0 16px"
         >
-          <NInput
-            v-model:value="currentGoodsModel.goods.name"
-            placeholder="必填, 礼物名称"
-          />
-        </NFormItem>
-        <NFormItem
-          path="goods.price"
-          label="所需积分"
-          required
+          基本信息
+        </NDivider>
+        <NFlex
+          vertical
+          :gap="12"
+          style="margin-bottom: 16px"
         >
-          <NInputNumber
-            v-model:value="currentGoodsModel.goods.price"
-            placeholder="必填, 兑换所需要的积分"
-            min="0"
-          />
-        </NFormItem>
-        <NFormItem
-          path="goods.count"
-          label="库存"
-        >
-          <NCheckbox
-            :checked="!currentGoodsModel.goods.count"
-            @update:checked="(v) => (currentGoodsModel.goods.count = v ? undefined : 100)"
-          >
-            不限
-          </NCheckbox>
-          <NInputNumber
-            v-if="currentGoodsModel.goods.count"
-            v-model:value="currentGoodsModel.goods.count"
-            placeholder="可选, 礼物库存"
-            style="max-width: 120px"
-          />
-        </NFormItem>
-        <NFormItem
-          path="goods.description"
-          label="描述"
-        >
-          <NInput
-            v-model:value="currentGoodsModel.goods.description"
-            placeholder="可选, 礼物描述"
-            maxlength="500"
-            type="textarea"
-          />
-        </NFormItem>
-        <NFormItem
-          path="goods.tags"
-          label="标签"
-        >
-          <NSelect
-            v-model:value="currentGoodsModel.goods.tags"
-            filterable
-            multiple
-            clearable
-            tag
-            placeholder="可选，输入后按回车添加"
-            :options="existTags"
-          />
-        </NFormItem>
-        <NFormItem
-          path="goods.cover"
-          label="封面"
-        >
-          <NFlex v-if="currentGoodsModel.goods.cover">
-            <NText>当前封面: </NText>
-            <NImage
-              :src="FILE_BASE_URL + currentGoodsModel.goods.cover"
-              height="50"
-              object-fit="cover"
-            />
-          </NFlex>
-          <NUpload
-            v-model:file-list="currentGoodsModel.fileList"
-            :max="1"
-            accept=".png,.jpg,.jpeg,.gif,.svg,.webp,.ico,.bmp,.tif,.tiff,.jfif,.jpe,.jp,.psd,."
-            list-type="image-card"
-            :default-upload="false"
-            @update:file-list="OnFileListChange"
-          >
-            + {{ currentGoodsModel.goods.cover ? '更换' : '上传' }}封面
-          </NUpload>
-        </NFormItem>
-        <NFormItem
-          path="goods.guardFree"
-          label="兑换规则"
-        >
-          <NFlex vertical>
-            <NCheckbox
-              :checked="currentGoodsModel.goods.setting?.guardFree != undefined"
-              @update:checked="
-                (v) => {
-                  // @ts-ignore
-                  currentGoodsModel.goods.setting.guardFree = v ? { year: undefined, month: undefined } : undefined
-                }
-              "
-            >
-              允许舰长免费兑换
-              <NTooltip>
-                <template #trigger>
-                  <NIcon :component="Info24Filled" />
-                </template>
-                仅当
-                <NButton
-                  type="info"
-                  text
-                  tag="a"
-                  href="/manage/event"
-                  target="_blank"
-                >
-                  舰长和SC
-                </NButton>
-                中存在对应记录时才能生效
-              </NTooltip>
-            </NCheckbox>
-            <NFlex v-if="currentGoodsModel.goods.setting?.guardFree">
-              <NSelect
-                v-model:value="currentGoodsModel.goods.setting.guardFree.year"
-                :options="allowedYearOptions"
-                placeholder="请选择年份"
-              />
-              <NSelect
-                v-model:value="currentGoodsModel.goods.setting.guardFree.month"
-                :options="allowedMonthOptions"
-                placeholder="请选择月份"
-              />
-            </NFlex>
-            <NText>
-              最低兑换等级
-              <NTooltip>
-                <template #trigger>
-                  <NIcon :component="Info24Filled" />
-                </template>
-                仅当
-                <NButton
-                  type="info"
-                  text
-                  tag="a"
-                  href="/manage/event"
-                  target="_blank"
-                >
-                  舰长和SC
-                </NButton>
-                中存在对应记录时才能生效
-              </NTooltip>
-            </NText>
-
-            <NRadioGroup v-model:value="currentGoodsModel.goods.setting.allowGuardLevel">
-              <NRadioButton :value="0">
-                不限
-              </NRadioButton>
-              <NRadioButton :value="1">
-                总督
-              </NRadioButton>
-              <NRadioButton :value="2">
-                提督
-              </NRadioButton>
-              <NRadioButton :value="3">
-                舰长
-              </NRadioButton>
-            </NRadioGroup>
-          </NFlex>
-        </NFormItem>
-        <NFormItem
-          path="goods.type"
-          label="类型"
-        >
-          <NRadioGroup v-model:value="currentGoodsModel.goods.type">
-            <NRadioButton :value="GoodsTypes.Virtual">
-              虚拟礼物
-            </NRadioButton>
-            <NRadioButton :value="GoodsTypes.Physical">
-              实体礼物
-            </NRadioButton>
-          </NRadioGroup>
-        </NFormItem>
-        <NFormItem
-          path="settings"
-          label="选项"
-        >
-          <NCheckbox v-model:checked="currentGoodsModel.goods.isAllowRebuy">
-            允许重复兑换
-          </NCheckbox>
-        </NFormItem>
-        <template v-if="currentGoodsModel.goods.type == GoodsTypes.Physical">
           <NFormItem
-            path="goods.maxBuyCount"
-            label="最大兑换数量"
+            path="goods.name"
+            label="名称"
+            required
           >
-            <NInputNumber
-              v-model:value="currentGoodsModel.goods.maxBuyCount"
-              placeholder="必填, 最大兑换数量"
-              min="1"
+            <NInput
+              v-model:value="currentGoodsModel.goods.name"
+              placeholder="必填, 礼物名称"
             />
           </NFormItem>
+
           <NFormItem
-            path="address"
-            label="收货地址"
+            path="goods.price"
+            label="所需积分"
+            required
           >
-            <NFlex vertical>
-              <NRadioGroup
-                :value="currentGoodsModel.goods.collectUrl == undefined ? 0 : 1"
-                @update:value="(v) => (currentGoodsModel.goods.collectUrl = v == 1 ? '' : undefined)"
+            <NInputNumber
+              v-model:value="currentGoodsModel.goods.price"
+              placeholder="必填, 兑换所需要的积分"
+              min="0"
+            />
+          </NFormItem>
+
+          <NFormItem
+            path="goods.count"
+            label="库存"
+          >
+            <NFlex
+              :gap="12"
+              align="center"
+            >
+              <NCheckbox
+                :checked="!currentGoodsModel.goods.count"
+                @update:checked="(v) => (currentGoodsModel.goods.count = v ? undefined : 100)"
               >
+                不限
+              </NCheckbox>
+              <NInputNumber
+                v-if="currentGoodsModel.goods.count"
+                v-model:value="currentGoodsModel.goods.count"
+                placeholder="礼物库存"
+                style="max-width: 120px"
+              />
+            </NFlex>
+          </NFormItem>
+        </NFlex>
+
+        <!-- 详细描述分组 -->
+        <NDivider
+          title-placement="left"
+          style="margin: 16px 0"
+        >
+          详细描述
+        </NDivider>
+        <NFlex
+          vertical
+          :gap="12"
+          style="margin-bottom: 16px"
+        >
+          <NFormItem
+            path="goods.description"
+            label="描述"
+          >
+            <NInput
+              v-model:value="currentGoodsModel.goods.description"
+              placeholder="可选, 礼物描述"
+              maxlength="500"
+              type="textarea"
+            />
+          </NFormItem>
+
+          <NFormItem
+            path="goods.tags"
+            label="标签"
+          >
+            <NSelect
+              v-model:value="currentGoodsModel.goods.tags"
+              filterable
+              multiple
+              clearable
+              tag
+              placeholder="可选，输入后按回车添加"
+              :options="existTags"
+            />
+          </NFormItem>
+
+          <NFormItem
+            path="goods.cover"
+            label="封面"
+          >
+            <NFlex
+              vertical
+              :gap="8"
+            >
+              <NFlex
+                v-if="currentGoodsModel.goods.cover"
+                :gap="8"
+                align="center"
+              >
+                <NText>当前封面: </NText>
+                <NImage
+                  :src="FILE_BASE_URL + currentGoodsModel.goods.cover"
+                  height="50"
+                  object-fit="cover"
+                />
+              </NFlex>
+              <NUpload
+                v-model:file-list="currentGoodsModel.fileList"
+                :max="1"
+                accept=".png,.jpg,.jpeg,.gif,.svg,.webp,.ico,.bmp,.tif,.tiff,.jfif,.jpe,.jp,.psd,."
+                list-type="image-card"
+                :default-upload="false"
+                @update:file-list="OnFileListChange"
+              >
+                + {{ currentGoodsModel.goods.cover ? '更换' : '上传' }}封面
+              </NUpload>
+            </NFlex>
+          </NFormItem>
+        </NFlex>
+
+        <!-- 兑换规则分组 -->
+        <NDivider
+          title-placement="left"
+          style="margin: 16px 0"
+        >
+          兑换规则
+        </NDivider>
+        <NFlex
+          vertical
+          :gap="12"
+          style="margin-bottom: 16px"
+        >
+          <NFormItem
+            path="goods.type"
+            label="礼物类型"
+          >
+            <NRadioGroup v-model:value="currentGoodsModel.goods.type">
+              <NRadioButton :value="GoodsTypes.Virtual">
+                虚拟礼物
+              </NRadioButton>
+              <NRadioButton :value="GoodsTypes.Physical">
+                实体礼物
+              </NRadioButton>
+            </NRadioGroup>
+          </NFormItem>
+
+          <NFormItem
+            path="settings"
+            label="选项"
+          >
+            <NCheckbox v-model:checked="currentGoodsModel.goods.isAllowRebuy">
+              允许重复兑换
+            </NCheckbox>
+          </NFormItem>
+
+          <NFormItem
+            path="goods.guardFree"
+            label="特殊权限"
+          >
+            <NFlex
+              vertical
+              :gap="8"
+            >
+              <NCheckbox
+                :checked="currentGoodsModel.goods.setting?.guardFree != undefined"
+                @update:checked="
+                  (v) => {
+                    // @ts-ignore
+                    currentGoodsModel.goods.setting.guardFree = v ? { year: undefined, month: undefined } : undefined
+                  }
+                "
+              >
+                允许舰长免费兑换
+                <NTooltip>
+                  <template #trigger>
+                    <NIcon :component="Info24Filled" />
+                  </template>
+                  仅当
+                  <NButton
+                    type="info"
+                    text
+                    tag="a"
+                    href="/manage/event"
+                    target="_blank"
+                  >
+                    舰长和SC
+                  </NButton>
+                  中存在对应记录时才能生效
+                </NTooltip>
+              </NCheckbox>
+
+              <NFlex
+                v-if="currentGoodsModel.goods.setting?.guardFree"
+                :gap="8"
+              >
+                <NSelect
+                  v-model:value="currentGoodsModel.goods.setting.guardFree.year"
+                  :options="allowedYearOptions"
+                  placeholder="请选择年份"
+                />
+                <NSelect
+                  v-model:value="currentGoodsModel.goods.setting.guardFree.month"
+                  :options="allowedMonthOptions"
+                  placeholder="请选择月份"
+                />
+              </NFlex>
+
+              <NText>
+                最低兑换等级
+                <NTooltip>
+                  <template #trigger>
+                    <NIcon :component="Info24Filled" />
+                  </template>
+                  仅当
+                  <NButton
+                    type="info"
+                    text
+                    tag="a"
+                    href="/manage/event"
+                    target="_blank"
+                  >
+                    舰长和SC
+                  </NButton>
+                  中存在对应记录时才能生效
+                </NTooltip>
+              </NText>
+
+              <NRadioGroup v-model:value="currentGoodsModel.goods.setting.allowGuardLevel">
                 <NRadioButton :value="0">
-                  通过本站收集收货地址
+                  不限
                 </NRadioButton>
                 <NRadioButton :value="1">
-                  使用站外链接收集地址
-                  <NTooltip>
-                    <template #trigger>
-                      <NIcon :component="Info24Filled" />
-                    </template>
-                    用腾讯文档等工具收集收货地址
-                  </NTooltip>
+                  总督
+                </NRadioButton>
+                <NRadioButton :value="2">
+                  提督
+                </NRadioButton>
+                <NRadioButton :value="3">
+                  舰长
                 </NRadioButton>
               </NRadioGroup>
             </NFlex>
           </NFormItem>
-          <template v-if="currentGoodsModel.goods.collectUrl != undefined">
+        </NFlex>
+
+        <!-- 礼物类型特定配置 -->
+        <template v-if="currentGoodsModel.goods.type == GoodsTypes.Physical">
+          <NDivider
+            title-placement="left"
+            style="margin: 16px 0"
+          >
+            实物礼物配置
+          </NDivider>
+          <NFlex
+            vertical
+            :gap="12"
+            style="margin-bottom: 16px"
+          >
             <NFormItem
-              path="goods.collectUrl"
-              label="收集链接"
+              path="goods.maxBuyCount"
+              label="最大兑换数量"
+            >
+              <NInputNumber
+                v-model:value="currentGoodsModel.goods.maxBuyCount"
+                placeholder="必填, 最大兑换数量"
+                min="1"
+              />
+            </NFormItem>
+
+            <NFormItem
+              path="address"
+              label="收货地址"
             >
               <NFlex
                 vertical
-                style="width: 100%"
+                :gap="8"
               >
-                <NInput
-                  v-model:value="currentGoodsModel.goods.collectUrl"
-                  placeholder="用于给用户填写自己收货地址的表格的分享链接"
-                  maxlength="300"
-                />
-                <NCheckbox v-model:checked="currentGoodsModel.goods.embedCollectUrl">
-                  尝试将收集链接嵌入到网页中
-                </NCheckbox>
+                <NRadioGroup
+                  :value="currentGoodsModel.goods.collectUrl == undefined ? 0 : 1"
+                  @update:value="(v) => (currentGoodsModel.goods.collectUrl = v == 1 ? '' : undefined)"
+                >
+                  <NRadioButton :value="0">
+                    通过本站收集收货地址
+                  </NRadioButton>
+                  <NRadioButton :value="1">
+                    使用站外链接收集地址
+                    <NTooltip>
+                      <template #trigger>
+                        <NIcon :component="Info24Filled" />
+                      </template>
+                      用腾讯文档等工具收集收货地址
+                    </NTooltip>
+                  </NRadioButton>
+                </NRadioGroup>
               </NFlex>
             </NFormItem>
-          </template>
-          <template v-else>
-            <NFormItem
-              path="privacy"
-              label="隐私协议"
-              required
-            >
-              <NCheckbox v-model:checked="isAllowedPrivacyPolicy">
-                同意本站隐私协议
-              </NCheckbox>
-            </NFormItem>
-          </template>
+
+            <template v-if="currentGoodsModel.goods.collectUrl != undefined">
+              <NFormItem
+                path="goods.collectUrl"
+                label="收集链接"
+              >
+                <NFlex
+                  vertical
+                  :gap="8"
+                  style="width: 100%"
+                >
+                  <NInput
+                    v-model:value="currentGoodsModel.goods.collectUrl"
+                    placeholder="用于给用户填写自己收货地址的表格的分享链接"
+                    maxlength="300"
+                  />
+                  <NCheckbox v-model:checked="currentGoodsModel.goods.embedCollectUrl">
+                    尝试将收集链接嵌入到网页中
+                  </NCheckbox>
+                </NFlex>
+              </NFormItem>
+            </template>
+            <template v-else>
+              <NFormItem
+                path="privacy"
+                label="隐私协议"
+                required
+              >
+                <NCheckbox v-model:checked="isAllowedPrivacyPolicy">
+                  同意本站隐私协议
+                </NCheckbox>
+              </NFormItem>
+            </template>
+          </NFlex>
         </template>
         <template v-else>
-          <NFormItem
-            path="goods.content"
-            required
+          <NDivider
+            title-placement="left"
+            style="margin: 16px 0"
           >
-            <template #label>
-              礼物内容
-              <NTooltip>
-                <template #trigger>
-                  <NIcon :component="Info24Filled" />
-                </template>
-                虚拟礼物的具体内容, 网盘链接什么之类的
-              </NTooltip>
-            </template>
-            <NInput
-              v-model:value="currentGoodsModel.goods.content"
-              type="textarea"
-              placeholder="写这里咯"
-              maxlength="10000"
-              show-count
-              clearable
-            />
-          </NFormItem>
+            虚拟礼物配置
+          </NDivider>
+          <NFlex
+            vertical
+            :gap="12"
+            style="margin-bottom: 16px"
+          >
+            <NFormItem
+              path="goods.content"
+              required
+            >
+              <template #label>
+                礼物内容
+                <NTooltip>
+                  <template #trigger>
+                    <NIcon :component="Info24Filled" />
+                  </template>
+                  虚拟礼物的具体内容, 网盘链接什么之类的
+                </NTooltip>
+              </template>
+              <NInput
+                v-model:value="currentGoodsModel.goods.content"
+                type="textarea"
+                placeholder="写这里咯"
+                maxlength="10000"
+                show-count
+                clearable
+              />
+            </NFormItem>
+          </NFlex>
         </template>
-        <NButton
-          type="primary"
-          :loading="isUpdating"
-          @click="updateGoods"
+
+        <NFlex
+          justify="center"
+          style="margin-top: 24px"
         >
-          {{ currentGoodsModel.goods.id ? '修改' : '创建' }}
-        </NButton>
+          <NButton
+            type="primary"
+            size="large"
+            :loading="isUpdating"
+            @click="updateGoods"
+          >
+            {{ currentGoodsModel.goods.id ? '修改' : '创建' }}
+          </NButton>
+        </NFlex>
       </NForm>
     </NScrollbar>
   </NModal>
 </template>
+
+<style scoped>
+.point-goods-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.point-goods-card :deep(.n-card-header) {
+  padding: 16px;
+}
+
+.point-goods-card :deep(.n-card-content) {
+  padding: 16px;
+  flex-grow: 1;
+}
+
+.point-goods-card :deep(.n-card-footer) {
+  padding: 16px;
+}
+
+.goods-modal :deep(.n-card-header) {
+  padding: 16px 20px;
+}
+
+.goods-modal :deep(.n-card-content) {
+  padding: 0 20px 20px;
+}
+</style>
diff --git a/src/views/manage/point/PointUserManage.vue b/src/views/manage/point/PointUserManage.vue
index 5ea6719..ed804b9 100644
--- a/src/views/manage/point/PointUserManage.vue
+++ b/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>
diff --git a/src/views/obs/blivechat/MessageRender.vue b/src/views/obs/blivechat/MessageRender.vue
index d3bf0d2..ff6b2dd 100644
--- a/src/views/obs/blivechat/MessageRender.vue
+++ b/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) {
diff --git a/src/views/obs/blivechat/TextMessage.vue b/src/views/obs/blivechat/TextMessage.vue
index 2061d88..d1ee134 100644
--- a/src/views/obs/blivechat/TextMessage.vue
+++ b/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
 })
diff --git a/src/views/obs/blivechat/constants.js b/src/views/obs/blivechat/constants.js
index fda7658..a86fcd5 100644
--- a/src/views/obs/blivechat/constants.js
+++ b/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) {
diff --git a/src/views/view/indexTemplate/DefaultIndexTemplate.vue b/src/views/view/indexTemplate/DefaultIndexTemplate.vue
index dd972a1..3f1cd96 100644
--- a/src/views/view/indexTemplate/DefaultIndexTemplate.vue
+++ b/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()
diff --git a/src/views/view/songListTemplate/DefaultSongListTemplate.vue b/src/views/view/songListTemplate/DefaultSongListTemplate.vue
index 14abc88..4b53199 100644
--- a/src/views/view/songListTemplate/DefaultSongListTemplate.vue
+++ b/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>