diff --git a/Web/src/components/Abutton.vue b/Web/src/components/Abutton.vue
new file mode 100644
index 0000000..fbb06c8
--- /dev/null
+++ b/Web/src/components/Abutton.vue
@@ -0,0 +1,17 @@
+<template>
+  <button @click="">{{ text }}</button>
+</template>
+<script lang="ts" setup>
+// 1. 定义接收父组件传来的参数 props
+const props = defineProps({
+  // 字段名、类型、默认值
+  text: String,
+})
+
+const emit = defineEmits(['click'])
+// 定义 click 事件
+const handleClick = (): any => {
+  emit('click')
+}
+
+</script>
\ No newline at end of file
diff --git a/Web/src/components/Pagination.vue b/Web/src/components/Pagination.vue
index 41a40c8..8845e01 100644
--- a/Web/src/components/Pagination.vue
+++ b/Web/src/components/Pagination.vue
@@ -1 +1,123 @@
-<template></template>
\ No newline at end of file
+<template>
+  <div class="pagination">
+    <!-- 第一行：导航按钮 -->
+    <div class="pagination-nav">
+      <a @click="goFirst">首页</a>
+      <a @click="goPrev">上一页</a>
+      <a @click="goNext">下一页</a>
+      <a @click="goLast">尾页</a>
+    </div>
+    <!-- 第二行：页码信息与跳转 -->
+    <div class="pagination-info">
+      <span>第{{ currentPage }}/{{ totalPages }}页</span>
+      <input v-model.number="inputPage" type="number" min="1" :max="totalPages" class="page-input"
+        @keyup.enter="goToPage" />
+      <button @click="goToPage">跳转</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  currentPage: number;
+  totalPages: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  currentPage: 1,
+  totalPages: 1,
+});
+
+const emit = defineEmits<{
+  (e: 'pageChange', page: number): void;
+}>();
+
+const inputPage = ref<number>(props.currentPage);
+
+watch(() => props.currentPage, (newVal: number) => {
+  inputPage.value = newVal;
+});
+
+const goFirst = (): void => {
+  if (props.currentPage > 1) {
+    emit('pageChange', 1);
+  }
+};
+
+const goPrev = (): void => {
+  if (props.currentPage > 1) {
+    emit('pageChange', props.currentPage - 1);
+  }
+};
+
+const goNext = (): void => {
+  if (props.currentPage < props.totalPages) {
+    emit('pageChange', props.currentPage + 1);
+  }
+};
+
+const goLast = (): void => {
+  if (props.currentPage < props.totalPages) {
+    emit('pageChange', props.totalPages);
+  }
+};
+
+const goToPage = (): void => {
+  let page: number = inputPage.value;
+  if (isNaN(page) || page < 1) {
+    page = 1;
+  } else if (page > props.totalPages) {
+    page = props.totalPages;
+  }
+  if (page !== props.currentPage) {
+    emit('pageChange', page);
+  }
+  inputPage.value = page;
+};
+</script>
+
+<style scoped>
+.pagination {
+  text-align: center;
+  font-size: 14px;
+  padding: 10px;
+}
+
+.pagination-nav {
+  margin-bottom: 8px;
+}
+
+.pagination-nav a {
+  display: inline-block;
+  padding: 4px 8px;
+  margin: 0 4px;
+  cursor: pointer;
+  color: #0066cc;
+  text-decoration: underline;
+}
+
+.pagination-nav a.disabled {
+  color: #999;
+  cursor: not-allowed;
+  text-decoration: none;
+}
+
+.pagination-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.page-input {
+  width: 50px;
+  padding: 2px 4px;
+  text-align: center;
+  border: 1px solid #ccc;
+}
+
+.pagination-info button {
+  padding: 2px 8px;
+  cursor: pointer;
+}
+</style>
diff --git a/Web/src/extends/MessageExtend.ts b/Web/src/extends/MessageExtend.ts
index d8dc935..10e81ee 100644
--- a/Web/src/extends/MessageExtend.ts
+++ b/Web/src/extends/MessageExtend.ts
@@ -27,14 +27,38 @@ export class MessageExtend {
       })
   }
 
+  //  异步提示弹窗
+  static ShowDialogAsyc(title: string, message: string, onConfirm?: () => Promise<boolean>): Promise<boolean> {
+    return new Promise((resolve) => {
+      showConfirmDialog({
+        title,
+        message,
+        beforeClose: async (action) => {
+          if (action === 'confirm' && onConfirm) {
+            const result = await onConfirm()
+            if (result) {
+              resolve(true)
+              return true
+            }
+            return false
+          }
+          resolve(action === 'confirm')
+          return true
+        },
+      }).catch(() => {
+        resolve(false) // 捕获取消操作，返回 false
+      })
+    })
+  }
+
   // 成功失败默认提示
   static ShowToast(text: any, type?: 'success' | 'fail' | 'default') {
     if (type == 'success') {
       showSuccessToast(text)
     } else if (type == 'fail') {
       showFailToast(text)
-    } else {      
-      console.log(text);
+    } else {
+      console.log(text)
       showToast(text)
     }
   }
diff --git a/Web/src/pages/customer/index.vue b/Web/src/pages/customer/index.vue
index 99fb479..e792204 100644
--- a/Web/src/pages/customer/index.vue
+++ b/Web/src/pages/customer/index.vue
@@ -8,17 +8,43 @@
         target="_blank">点击咨询</a><br />客服QQ：531493955<br />官方QQ群：238938639<br />客服邮箱：531493955@qq.com<br />
     </div>
     <Abar href="/">返回游戏首页</Abar>
+    <!-- 分页组件示例 -->
+    <div class="content" style="margin-top: 10px;">
+      <Pagination :currentPage="currentPage" :totalPages="totalPages" @pageChange="handlePageChange" />
+    </div>
   </div>
 </template>
 
-<script setup>
-import pageLoading from '~/middleware/page-loading';
+<script setup lang="ts">
+let a = 1
 
 definePageMeta({
   layout: layout.empty,
   middleware: 'page-loading'
 })
 
+const currentPage = ref<number>(1);
+const totalPages = ref<number>(95);
+
+const handlePageChange = (page: number): void => {
+  currentPage.value = page;
+  console.log('跳转到第', page, '页');
+};
+
+
+MessageExtend.ShowDialogAsyc('dada', 'dasda', async () => {
+  var result = await PubService.GetMain(StateHelper.Sid);
+  if (result.code == 0) {
+
+  }
+  else {
+    MessageExtend.ShowToast(result.msg, "fail");
+  }
+  return true
+})
+
+
+
 onMounted(() => {
   PageLoading.Close();
 })