diff --git a/message_render_content.txt b/message_render_content.txt
new file mode 100644
index 0000000..58cbbac
Binary files /dev/null and b/message_render_content.txt differ
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>