feat(PageHeader): 新增 PageHeader 组件并应用于多个配置页面

新增了 PageHeader 通用组件，用于统一页面标题和操作按钮区域的布局。
该组件包含 title 属性以及 buttons 和 alerts 两个具名插槽，便于复用和维护。
已在以下页面中集成使用：
- 图片管理页（ImageConfig.vue）
- 音乐管理页（MusicConfig.vue）
- 人员管理页（PersonAll/index.vue）
- 中奖者管理页（PersonAlready.vue）
- 奖品管理页（PrizeConfig.vue）

src/views/Config/Person/PersonAll/index.vue

@@ -4,6 +4,7 @@ import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
 import CustomDialog from '@/components/Dialog/index.vue'
+import PageHeader from '@/components/PageHeader/index.vue'
 import { useViewModel } from './useViewModel'
 
 const resetDataDialogRef = ref()
@@ -29,43 +30,46 @@ const limitType = '.xlsx,.xls'
   />
 
   <div class="min-w-1000px">
-    <h2>{{ t('viewTitle.personManagement') }}</h2>
-    <div class="flex gap-3">
-      <button class="btn btn-error btn-sm" @click="delAllDataDialogRef.showDialog()">
-        {{ t('button.allDelete') }}
-      </button>
-      <div class="tooltip tooltip-bottom" :data-tip="t('tooltip.downloadTemplateTip')">
-        <a
-          class="no-underline btn btn-secondary btn-sm" :download="t('data.xlsxName')" target="_blank"
-          :href="`/log-lottery/${t('data.xlsxName')}`"
-        >{{ t('button.downloadTemplate') }}</a>
-      </div>
-      <div class="">
-        <label for="explore">
-
-          <div class="tooltip tooltip-bottom" :data-tip="t('tooltip.uploadExcelTip')">
-            <input
-              id="explore" ref="exportInputFileRef" type="file" class="" style="display: none"
-              :accept="limitType" @change="handleFileChange"
-            >
-
-            <span class="btn btn-primary btn-sm">{{ t('button.importData') }}</span>
+    <PageHeader :title="t('viewTitle.personManagement')">
+      <template #buttons>
+        <div class="flex gap-3">
+          <button class="btn btn-error btn-sm" @click="delAllDataDialogRef.showDialog()">
+            {{ t('button.allDelete') }}
+          </button>
+          <div class="tooltip tooltip-bottom" :data-tip="t('tooltip.downloadTemplateTip')">
+            <a
+              class="no-underline btn btn-secondary btn-sm" :download="t('data.xlsxName')" target="_blank"
+              :href="`/log-lottery/${t('data.xlsxName')}`"
+            >{{ t('button.downloadTemplate') }}</a>
           </div>
-        </label>
-      </div>
-      <button class="btn btn-error btn-sm" @click="resetDataDialogRef.showDialog()">
-        {{ t('button.resetData') }}
-      </button>
-      <button class="btn btn-accent btn-sm" @click="exportData">
-        {{ t('button.exportResult') }}
-      </button>
-      <div>
-        <span>{{ t('table.luckyPeopleNumber') }}:</span>
-        <span>{{ alreadyPersonList.length }}</span>
-        <span>&nbsp;/&nbsp;</span>
-        <span>{{ allPersonList.length }}</span>
-      </div>
-    </div>
+          <div class="">
+            <label for="explore">
+              <div class="tooltip tooltip-bottom" :data-tip="t('tooltip.uploadExcelTip')">
+                <input
+                  id="explore" ref="exportInputFileRef" type="file" class="" style="display: none"
+                  :accept="limitType" @change="handleFileChange"
+                >
+
+                <span class="btn btn-primary btn-sm">{{ t('button.importData') }}</span>
+              </div>
+            </label>
+          </div>
+          <button class="btn btn-error btn-sm" @click="resetDataDialogRef.showDialog()">
+            {{ t('button.resetData') }}
+          </button>
+          <button class="btn btn-accent btn-sm" @click="exportData">
+            {{ t('button.exportResult') }}
+          </button>
+          <div>
+            <span>{{ t('table.luckyPeopleNumber') }}:</span>
+            <span>{{ alreadyPersonList.length }}</span>
+            <span>&nbsp;/&nbsp;</span>
+            <span>{{ allPersonList.length }}</span>
+          </div>
+        </div>
+      </template>
+    </PageHeader>
+
     <DaiysuiTable :table-columns="tableColumns" :data="allPersonList" />
   </div>
 </template>