完成全部页面分页组件的抽取

pages/mall/admin/finance/capital_flow.uvue

@@ -41,7 +41,7 @@
       </view>
 
       <view class="table-body">
-        <view class="table-row" v-for="item in tableData" :key="item.flowNo">
+        <view class="table-row" v-for="item in pagedList" :key="item.flowNo">
           <view class="td col-flow"><text class="td-txt">{{ item.flowNo }}</text></view>
           <view class="td col-order text-left"><text class="td-txt">{{ item.orderNo }}</text></view>
           <view class="td col-time"><text class="td-txt">{{ item.time }}</text></view>
@@ -55,11 +55,28 @@
         </view>
       </view>
     </view>
+    <CommonPagination
+      v-if="true"
+      :total="total"
+      :loading="false"
+      :currentPage="currentPage"
+      :pageSize="pageSize"
+      :pageSizeOptionLabels="pageSizeOptionLabels"
+      :pageSizeIndex="pageSizeIndex"
+      :visiblePages="visiblePages"
+      :totalPage="totalPage"
+      :jumpPageInput="jumpPageInput"
+      @page-size-change="handlePageSizeChange"
+      @page-change="handlePageChange"
+      @update:jumpPageInput="(val: string) => { jumpPageInput.value = val }"
+      @jump-page="handleJumpPage"
+    />
   </view>
 </template>
 
 <script setup lang="uts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
 
 interface FlowRecord {
   flowNo: string
@@ -134,8 +151,52 @@ const tableData = ref<FlowRecord[]>([
     user: 'b342865d2077',
     method: '微信',
     remark: ''
-  }
+  },
+  { flowNo: 'ZJ202601290823456789', orderNo: 'hy539987654321234567', time: '2026-01-29 08:23:45', amount: '+88.00', user: '张小明', method: '支付宝', remark: '' },
+  { flowNo: 'ZJ202601281534267890', orderNo: 'hy539765432109876543', time: '2026-01-28 15:34:26', amount: '+200.00', user: '王芳芳', method: '微信', remark: '' },
+  { flowNo: 'ZJ202601270945123450', orderNo: 'hy539543210987654321', time: '2026-01-27 09:45:12', amount: '-50.00', user: '李建国', method: '余额', remark: '退款' },
+  { flowNo: 'ZJ202601261200345678', orderNo: 'hy539321098765432109', time: '2026-01-26 12:00:34', amount: '+150.00', user: 'Tom Wang', method: '支付宝', remark: '' },
+  { flowNo: 'ZJ202601251756890123', orderNo: 'hy539098765432109876', time: '2026-01-25 17:56:08', amount: '+30.00', user: '赵小燕', method: '微信', remark: '' },
+  { flowNo: 'ZJ202601240314567890', orderNo: 'hy538876543210987654', time: '2026-01-24 03:14:56', amount: '+500.00', user: '陈大伟', method: '微信', remark: '' },
+  { flowNo: 'ZJ202601231023456789', orderNo: 'hy538654321098765432', time: '2026-01-23 10:23:45', amount: '+1000.00', user: '周总', method: '支付宝', remark: '' },
+  { flowNo: 'ZJ202601221445678901', orderNo: 'hy538432109876543210', time: '2026-01-22 14:45:06', amount: '-20.00', user: '刘小丽', method: '余额', remark: '佣金提现' },
+  { flowNo: 'ZJ202601210856789012', orderNo: 'hy538209876543210987', time: '2026-01-21 08:56:07', amount: '+75.00', user: '黄志强', method: '微信', remark: '' },
+  { flowNo: 'ZJ202601201234567890', orderNo: 'hy537987654321098765', time: '2026-01-20 12:34:56', amount: '+320.00', user: '吴晓东', method: '支付宝', remark: '' },
+  { flowNo: 'ZJ202601191634234567', orderNo: 'hy537765432109876543', time: '2026-01-19 16:34:23', amount: '+65.00', user: '郑美华', method: '微信', remark: '' },
+  { flowNo: 'ZJ202601181034567890', orderNo: 'hy537543210987654321', time: '2026-01-18 10:34:56', amount: '+128.00', user: '孙小峰', method: '微信', remark: '' }
 ])
+
+// ========== PAGINATION STATE ==========
+const currentPage = ref(1)
+const pageSize = ref(15)
+const jumpPageInput = ref('')
+const pageSizeOptions = [10, 15, 20, 30, 50]
+const pageSizeOptionLabels = computed(() => pageSizeOptions.map((n: number) => `${n}条/页`))
+const pageSizeIndex = computed(() => { const idx = pageSizeOptions.indexOf(pageSize.value); return idx >= 0 ? idx : 0 })
+const total = computed(() => tableData.value.length)
+const totalPage = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
+const pagedList = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  return tableData.value.slice(start, start + pageSize.value)
+})
+const visiblePages = computed((): number[] => {
+  const t = totalPage.value; const cur = currentPage.value
+  if (t <= 7) return Array.from({ length: t }, (_: any, i: number) => i + 1)
+  if (cur <= 4) return [1, 2, 3, 4, 5, -1, t]
+  if (cur >= t - 3) return [1, -1, t - 4, t - 3, t - 2, t - 1, t]
+  return [1, -1, cur - 1, cur, cur + 1, -1, t]
+})
+const handlePageChange = (p: number) => { currentPage.value = p }
+const handlePageSizeChange = (e: any) => {
+  const idx = Number(e.detail.value)
+  pageSize.value = pageSizeOptions[idx] ?? pageSizeOptions[0]
+  currentPage.value = 1
+}
+const handleJumpPage = () => {
+  const p = parseInt(jumpPageInput.value)
+  if (!isNaN(p) && p >= 1 && p <= totalPage.value) currentPage.value = p
+}
+// ========== END PAGINATION STATE ==========
 </script>
 
 <style scoped lang="scss">

pages/mall/admin/finance/recharge.uvue

@@ -62,7 +62,7 @@
       </view>
 
       <view class="table-body">
-        <view class="table-row" v-for="item in tableData" :key="item.id">
+        <view class="table-row" v-for="item in pagedList" :key="item.id">
           <view class="td col-id"><text class="td-txt">{{ item.id }}</text></view>
           <view class="td col-avatar">
             <view class="avatar-box">
@@ -82,11 +82,28 @@
         </view>
       </view>
     </view>
+    <CommonPagination
+      v-if="true"
+      :total="total"
+      :loading="false"
+      :currentPage="currentPage"
+      :pageSize="pageSize"
+      :pageSizeOptionLabels="pageSizeOptionLabels"
+      :pageSizeIndex="pageSizeIndex"
+      :visiblePages="visiblePages"
+      :totalPage="totalPage"
+      :jumpPageInput="jumpPageInput"
+      @page-size-change="handlePageSizeChange"
+      @page-change="handlePageChange"
+      @update:jumpPageInput="(val: string) => { jumpPageInput.value = val }"
+      @jump-page="handleJumpPage"
+    />
   </view>
 </template>
 
 <script setup lang="uts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
 
 const stats = ref([
   { label: '充值总金额', value: '446747490.72', icon: '¥', colorClass: 'blue' },
@@ -156,8 +173,55 @@ const tableData = ref<RechargeRecord[]>([
     isPaid: '未支付',
     type: '其他充值',
     time: '暂无'
-  }
+  },
+  { id: 4517, hasAvatar: true, nickname: '张小红', orderNo: 'cz518000000001234567', amount: '100.00', isPaid: '已支付', type: '微信充值', time: '2025-06-20 10:22' },
+  { id: 4516, hasAvatar: false, nickname: '李大明', orderNo: 'cz517900000001234567', amount: '50.00', isPaid: '已支付', type: '支付宝充值', time: '2025-06-15 09:30' },
+  { id: 4515, hasAvatar: true, nickname: '王建国', orderNo: 'cz517800000001234567', amount: '200.00', isPaid: '已支付', type: '微信充值', time: '2025-06-10 14:55' },
+  { id: 4514, hasAvatar: false, nickname: '刘晓燕', orderNo: 'cz517700000001234567', amount: '30.00', isPaid: '已支付', type: '支付宝充值', time: '2025-06-05 11:22' },
+  { id: 4513, hasAvatar: true, nickname: 'BoBo', orderNo: 'cz517600000001234567', amount: '1000.00', isPaid: '已支付', type: '微信充值', time: '2025-05-28 08:00' },
+  { id: 4512, hasAvatar: false, nickname: '陈小华', orderNo: 'cz517500000001234567', amount: '20.00', isPaid: '未支付', type: '其他充值', time: '暂无' },
+  { id: 4511, hasAvatar: true, nickname: '周伟', orderNo: 'cz517400000001234567', amount: '500.00', isPaid: '已支付', type: '支付宝充值', time: '2025-05-20 16:30' },
+  { id: 4510, hasAvatar: false, nickname: '吴晓梅', orderNo: 'cz517300000001234567', amount: '150.00', isPaid: '已支付', type: '微信充值', time: '2025-05-15 10:11' },
+  { id: 4509, hasAvatar: true, nickname: '郑浩', orderNo: 'cz517200000001234567', amount: '88.00', isPaid: '已支付', type: '微信充值', time: '2025-05-10 09:45' },
+  { id: 4508, hasAvatar: false, nickname: '黄丽丽', orderNo: 'cz517100000001234567', amount: '300.00', isPaid: '已支付', type: '支付宝充值', time: '2025-05-05 14:22', hasAvatar: false },
+  { id: 4507, hasAvatar: true, nickname: 'Super User', orderNo: 'cz517000000001234567', amount: '999.00', isPaid: '已支付', type: '微信充值', time: '2025-04-28 11:30' },
+  { id: 4506, hasAvatar: false, nickname: '孙国强', orderNo: 'cz516900000001234567', amount: '45.00', isPaid: '未支付', type: '其他充值', time: '暂无' },
+  { id: 4505, hasAvatar: true, nickname: '赵小燕', orderNo: 'cz516800000001234567', amount: '600.00', isPaid: '已支付', type: '支付宝充值', time: '2025-04-20 09:00' },
+  { id: 4504, hasAvatar: false, nickname: '钱大虎', orderNo: 'cz516700000001234567', amount: '75.00', isPaid: '已支付', type: '微信充值', time: '2025-04-15 15:40' },
+  { id: 4503, hasAvatar: true, nickname: '李明明', orderNo: 'cz516600000001234567', amount: '250.00', isPaid: '已支付', type: '微信充值', time: '2025-04-10 13:25' }
 ])
+
+// ========== PAGINATION STATE ==========
+const currentPage = ref(1)
+const pageSize = ref(15)
+const jumpPageInput = ref('')
+const pageSizeOptions = [10, 15, 20, 30, 50]
+const pageSizeOptionLabels = computed(() => pageSizeOptions.map((n: number) => `${n}条/页`))
+const pageSizeIndex = computed(() => { const idx = pageSizeOptions.indexOf(pageSize.value); return idx >= 0 ? idx : 0 })
+const total = computed(() => tableData.value.length)
+const totalPage = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
+const pagedList = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  return tableData.value.slice(start, start + pageSize.value)
+})
+const visiblePages = computed((): number[] => {
+  const t = totalPage.value; const cur = currentPage.value
+  if (t <= 7) return Array.from({ length: t }, (_: any, i: number) => i + 1)
+  if (cur <= 4) return [1, 2, 3, 4, 5, -1, t]
+  if (cur >= t - 3) return [1, -1, t - 4, t - 3, t - 2, t - 1, t]
+  return [1, -1, cur - 1, cur, cur + 1, -1, t]
+})
+const handlePageChange = (p: number) => { currentPage.value = p }
+const handlePageSizeChange = (e: any) => {
+  const idx = Number(e.detail.value)
+  pageSize.value = pageSizeOptions[idx] ?? pageSizeOptions[0]
+  currentPage.value = 1
+}
+const handleJumpPage = () => {
+  const p = parseInt(jumpPageInput.value)
+  if (!isNaN(p) && p >= 1 && p <= totalPage.value) currentPage.value = p
+}
+// ========== END PAGINATION STATE ==========
 </script>
 
 <style scoped lang="scss">

pages/mall/admin/maintain/api/account.uvue

@@ -26,7 +26,7 @@
           </view>
 
           <view class="table-body">
-            <view v-for="item in dataList" :key="item.id" class="table-row">
+            <view v-for="item in pagedList" :key="item.id" class="table-row">
               <view class="col col-id"><text>{{ item.id }}</text></view>
               <view class="col col-account"><text>{{ item.account }}</text></view>
               <view class="col col-desc"><text>{{ item.desc }}</text></view>
@@ -50,27 +50,88 @@
           </view>
         </view>
 
-        <!-- 分页 (模拟) -->
+        <CommonPagination
-        <view class="pagination">
+          v-if="true"
-          <text class="page-info">共 2 条 20条/页</text>
+          :total="total"
-          <view class="page-btns">
+          :loading="false"
-            <text class="p-btn disabled">˂</text>
+          :currentPage="currentPage"
-            <text class="p-btn active">1</text>
+          :pageSize="pageSize"
-            <text class="p-btn disabled">˃</text>
+          :pageSizeOptionLabels="pageSizeOptionLabels"
-          </view>
+          :pageSizeIndex="pageSizeIndex"
-        </view>
+          :visiblePages="visiblePages"
+          :totalPage="totalPage"
+          :jumpPageInput="jumpPageInput"
+          @page-size-change="handlePageSizeChange"
+          @page-change="handlePageChange"
+          @update:jumpPageInput="(val: string) => { jumpPageInput.value = val }"
+          @jump-page="handleJumpPage"
+        />
       </view>
     </view>
   </view>
 </template>
 
 <script setup lang="uts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
 
+// ========== MOCK DATA START ==========
+// TODO: 接真实接口时替换此处 dataList 为 fetchApiAccountList() 调用
 const dataList = ref([
   { id: 9, account: 'ceshi', desc: 'ceshi', addTime: '2024-09-05 11:16:07', lastTime: '暂无', lastIp: '', status: true },
-  { id: 10, account: 'tuoluojiang', desc: '', addTime: '2024-09-09 10:12:54', lastTime: '2024-09-10 19:15:01', lastIp: '124.221.49.234', status: true }
+  { id: 10, account: 'tuoluojiang', desc: '', addTime: '2024-09-09 10:12:54', lastTime: '2024-09-10 19:15:01', lastIp: '124.221.49.234', status: true },
+  { id: 11, account: 'shop_api_01', desc: '商城对外接口', addTime: '2024-10-01 09:00:00', lastTime: '2024-10-15 14:22:11', lastIp: '10.0.0.1', status: true },
+  { id: 12, account: 'erp_sync', desc: 'ERP同步接口', addTime: '2024-10-05 10:30:00', lastTime: '2024-10-20 08:10:00', lastIp: '192.168.1.100', status: true },
+  { id: 13, account: 'wms_api', desc: '仓储系统接口', addTime: '2024-10-08 14:00:00', lastTime: '暂无', lastIp: '', status: false },
+  { id: 14, account: 'oms_push', desc: '订单推送接口', addTime: '2024-10-10 11:20:00', lastTime: '2024-11-01 09:30:00', lastIp: '172.16.0.50', status: true },
+  { id: 15, account: 'report_api', desc: '报表数据接口', addTime: '2024-10-12 15:45:00', lastTime: '2024-11-05 17:00:00', lastIp: '10.10.10.1', status: true },
+  { id: 16, account: 'crm_sync', desc: 'CRM数据同步', addTime: '2024-10-15 09:00:00', lastTime: '暂无', lastIp: '', status: false },
+  { id: 17, account: 'bi_export', desc: 'BI数据导出', addTime: '2024-10-18 10:00:00', lastTime: '2024-11-10 08:20:00', lastIp: '192.168.2.200', status: true },
+  { id: 18, account: 'logistics_api', desc: '物流回调接口', addTime: '2024-10-20 14:30:00', lastTime: '2024-11-08 12:00:00', lastIp: '10.0.0.88', status: true },
+  { id: 19, account: 'sms_gateway', desc: '短信网关接口', addTime: '2024-10-22 16:00:00', lastTime: '2024-11-12 09:45:00', lastIp: '203.0.113.5', status: true },
+  { id: 20, account: 'pay_notify', desc: '支付回调接口', addTime: '2024-10-25 09:30:00', lastTime: '2024-11-15 11:00:00', lastIp: '47.100.200.1', status: true },
+  { id: 21, account: 'stock_alert', desc: '库存预警接口', addTime: '2024-10-28 11:00:00', lastTime: '暂无', lastIp: '', status: false },
+  { id: 22, account: 'audit_log', desc: '审计日志接口', addTime: '2024-11-01 10:00:00', lastTime: '2024-11-16 14:30:00', lastIp: '10.20.30.40', status: true },
+  { id: 23, account: 'open_api_v2', desc: '对外开放接口v2', addTime: '2024-11-05 09:00:00', lastTime: '2024-11-17 10:10:00', lastIp: '120.55.66.77', status: true },
+  { id: 24, account: 'internal_bot', desc: '内部机器人接口', addTime: '2024-11-08 13:15:00', lastTime: '2024-11-18 08:00:00', lastIp: '10.0.1.99', status: true },
+  { id: 25, account: 'data_clean', desc: '数据清洗任务接口', addTime: '2024-11-10 15:00:00', lastTime: '暂无', lastIp: '', status: false },
+  { id: 26, account: 'search_sync', desc: '搜索索引同步', addTime: '2024-11-12 10:30:00', lastTime: '2024-11-19 09:00:00', lastIp: '10.30.40.50', status: true },
+  { id: 27, account: 'push_gateway', desc: '消息推送縯道', addTime: '2024-11-15 09:45:00', lastTime: '2024-11-20 11:30:00', lastIp: '47.200.100.5', status: true },
+  { id: 28, account: 'cdn_purge', desc: 'CDN刷新接口', addTime: '2024-11-18 14:00:00', lastTime: '2024-11-21 13:00:00', lastIp: '1.2.3.4', status: true }
 ])
+// ========== MOCK DATA END ==========
+
+// ========== PAGINATION STATE ==========
+const currentPage = ref(1)
+const pageSize = ref(15)
+const jumpPageInput = ref('')
+const pageSizeOptions = [10, 15, 20, 30, 50]
+const pageSizeOptionLabels = computed(() => pageSizeOptions.map((n: number) => `${n}条/页`))
+const pageSizeIndex = computed(() => { const idx = pageSizeOptions.indexOf(pageSize.value); return idx >= 0 ? idx : 0 })
+const total = computed(() => dataList.value.length)
+const totalPage = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
+const pagedList = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  return dataList.value.slice(start, start + pageSize.value)
+})
+const visiblePages = computed((): number[] => {
+  const t = totalPage.value; const cur = currentPage.value
+  if (t <= 7) return Array.from({ length: t }, (_: any, i: number) => i + 1)
+  if (cur <= 4) return [1, 2, 3, 4, 5, -1, t]
+  if (cur >= t - 3) return [1, -1, t - 4, t - 3, t - 2, t - 1, t]
+  return [1, -1, cur - 1, cur, cur + 1, -1, t]
+})
+const handlePageChange = (p: number) => { currentPage.value = p }
+const handlePageSizeChange = (e: any) => {
+  const idx = Number(e.detail.value)
+  pageSize.value = pageSizeOptions[idx] ?? pageSizeOptions[0]
+  currentPage.value = 1
+}
+const handleJumpPage = () => {
+  const p = parseInt(jumpPageInput.value)
+  if (!isNaN(p) && p >= 1 && p <= totalPage.value) currentPage.value = p
+}
+// ========== END PAGINATION STATE ==========
 
 function addAccount() {
   uni.showToast({ title: '添加账号', icon: 'none' })
@@ -182,7 +243,7 @@ function deleteItem(item: any) {
 .col-last-time { width: 180px; }
 .col-last-ip { width: 150px; }
 .col-status { width: 100px; justify-content: center; }
-.col-action { width: 200px; justify-content: flex-end; }
+.col-action { width: 200px; justify-content: flex-end; display: flex; flex-direction: row; }
 
 .status-tag {
   width: 60px;

pages/mall/admin/maintain/data/city.uvue

@@ -20,7 +20,7 @@
           </view>
 
           <view class="table-body">
-            <view v-for="item in dataList" :key="item.id" class="table-row">
+            <view v-for="item in pagedList" :key="item.id" class="table-row">
               <view class="col col-id"><text>{{ item.id }}</text></view>
               <view class="col col-name">
                 <text class="expand-icon">˃</text>
@@ -38,13 +38,32 @@
           </view>
         </view>
       </view>
+      <CommonPagination
+        v-if="true"
+        :total="total"
+        :loading="false"
+        :currentPage="currentPage"
+        :pageSize="pageSize"
+        :pageSizeOptionLabels="pageSizeOptionLabels"
+        :pageSizeIndex="pageSizeIndex"
+        :visiblePages="visiblePages"
+        :totalPage="totalPage"
+        :jumpPageInput="jumpPageInput"
+        @page-size-change="handlePageSizeChange"
+        @page-change="handlePageChange"
+        @update:jumpPageInput="(val: string) => { jumpPageInput.value = val }"
+        @jump-page="handleJumpPage"
+      />
     </view>
   </view>
 </template>
 
 <script setup lang="uts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
 
+// ========== MOCK DATA START ==========
+// TODO: 接真实接口时替换此处 dataList 为 fetchCityList() 调用
 const dataList = ref([
   { id: 1, name: '北京市', parentName: '中国' },
   { id: 2, name: '天津市', parentName: '中国' },
@@ -59,8 +78,61 @@ const dataList = ref([
   { id: 11, name: '浙江省', parentName: '中国' },
   { id: 12, name: '安徽省', parentName: '中国' },
   { id: 13, name: '福建省', parentName: '中国' },
-  { id: 14, name: '江西省', parentName: '中国' }
+  { id: 14, name: '江西省', parentName: '中国' },
+  { id: 15, name: '山东省', parentName: '中国' },
+  { id: 16, name: '河南省', parentName: '中国' },
+  { id: 17, name: '湖北省', parentName: '中国' },
+  { id: 18, name: '湖南省', parentName: '中国' },
+  { id: 19, name: '广东省', parentName: '中国' },
+  { id: 20, name: '广西壮族自治区', parentName: '中国' },
+  { id: 21, name: '海南省', parentName: '中国' },
+  { id: 22, name: '重庆市', parentName: '中国' },
+  { id: 23, name: '四川省', parentName: '中国' },
+  { id: 24, name: '贵州省', parentName: '中国' },
+  { id: 25, name: '云南省', parentName: '中国' },
+  { id: 26, name: '西藏自治区', parentName: '中国' },
+  { id: 27, name: '陕西省', parentName: '中国' },
+  { id: 28, name: '甘肃省', parentName: '中国' },
+  { id: 29, name: '青海省', parentName: '中国' },
+  { id: 30, name: '宁夏回族自治区', parentName: '中国' },
+  { id: 31, name: '新疆维吾尔自治区', parentName: '中国' },
+  { id: 32, name: '香港特别行政区', parentName: '中国' },
+  { id: 33, name: '澳门特别行政区', parentName: '中国' },
+  { id: 34, name: '台湾省', parentName: '中国' }
 ])
+// ========== MOCK DATA END ==========
+
+// ========== PAGINATION STATE ==========
+const currentPage = ref(1)
+const pageSize = ref(15)
+const jumpPageInput = ref('')
+const pageSizeOptions = [10, 15, 20, 30, 50]
+const pageSizeOptionLabels = computed(() => pageSizeOptions.map((n: number) => `${n}条/页`))
+const pageSizeIndex = computed(() => { const idx = pageSizeOptions.indexOf(pageSize.value); return idx >= 0 ? idx : 0 })
+const total = computed(() => dataList.value.length)
+const totalPage = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
+const pagedList = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  return dataList.value.slice(start, start + pageSize.value)
+})
+const visiblePages = computed((): number[] => {
+  const t = totalPage.value; const cur = currentPage.value
+  if (t <= 7) return Array.from({ length: t }, (_: any, i: number) => i + 1)
+  if (cur <= 4) return [1, 2, 3, 4, 5, -1, t]
+  if (cur >= t - 3) return [1, -1, t - 4, t - 3, t - 2, t - 1, t]
+  return [1, -1, cur - 1, cur, cur + 1, -1, t]
+})
+const handlePageChange = (p: number) => { currentPage.value = p }
+const handlePageSizeChange = (e: any) => {
+  const idx = Number(e.detail.value)
+  pageSize.value = pageSizeOptions[idx] ?? pageSizeOptions[0]
+  currentPage.value = 1
+}
+const handleJumpPage = () => {
+  const p = parseInt(jumpPageInput.value)
+  if (!isNaN(p) && p >= 1 && p <= totalPage.value) currentPage.value = p
+}
+// ========== END PAGINATION STATE ==========
 
 function addProvince() {
   uni.showToast({ title: '添加省份', icon: 'none' })
@@ -173,7 +245,7 @@ function deleteItem(item: any) {
 .col-id { width: 100px; }
 .col-name { flex: 2; }
 .col-parent { flex: 1; }
-.col-action { width: 200px; justify-content: flex-end; }
+.col-action { width: 200px; justify-content: flex-end; display: flex; flex-direction: row; }
 
 .expand-icon {
   margin-right: 8px;

pages/mall/admin/maintain/data/logistics-company.uvue

@@ -37,7 +37,7 @@
         </view>
       </view>
       <CommonPagination
-        v-if="total > 0"
+        v-if="true"
         :total="total"
         :loading="false"
         :currentPage="currentPage"
@@ -145,6 +145,7 @@ function onDel(item: LogisticsItem) {
 .table-wrap { width: 100%; border: 1px solid #f0f0f0; }
 .table-header { display: flex; flex-direction: row; background-color: #f8f8f9; }
 .th { padding: 12px 10px; font-size: 13px; font-weight: bold; color: #515a6e; border-bottom: 1px solid #f0f0f0; text-align: center; }
+.table-body { overflow-y: auto; max-height: calc(100vh - 380px); }
 .tr { display: flex; flex-direction: row; align-items: center; border-bottom: 1px solid #f0f0f0; min-height: 50px; }
 .td { padding: 10px; font-size: 13px; color: #515a6e; text-align: center; }
 .action-btn { font-size: 13px; color: #1890ff; margin-right: 8px; cursor: pointer; }

pages/mall/admin/maintain/data/logistics.uvue

@@ -37,7 +37,7 @@
           </view>
 
           <view class="table-body">
-            <view v-for="item in dataList" :key="item.id" class="table-row">
+            <view v-for="item in pagedList" :key="item.id" class="table-row">
               <view class="col col-id"><text>{{ item.id }}</text></view>
               <view class="col col-name"><text>{{ item.name }}</text></view>
               <view class="col col-code"><text>{{ item.code }}</text></view>
@@ -52,18 +52,33 @@
           </view>
         </view>
 
-        <!-- 分页 (模拟) -->
+        <CommonPagination
-        <view class="pagination">
+          v-if="true"
-          <!-- 这里可以放分页组件 -->
+          :total="total"
-        </view>
+          :loading="false"
+          :currentPage="currentPage"
+          :pageSize="pageSize"
+          :pageSizeOptionLabels="pageSizeOptionLabels"
+          :pageSizeIndex="pageSizeIndex"
+          :visiblePages="visiblePages"
+          :totalPage="totalPage"
+          :jumpPageInput="jumpPageInput"
+          @page-size-change="handlePageSizeChange"
+          @page-change="handlePageChange"
+          @update:jumpPageInput="(val: string) => { jumpPageInput.value = val }"
+          @jump-page="handleJumpPage"
+        />
       </view>
     </view>
   </view>
 </template>
 
 <script setup lang="uts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
 
+// ========== MOCK DATA START ==========
+// TODO: 接真实接口时替换此处 dataList 为 fetchLogisticsList() 调用
 const dataList = ref([
   { id: 2, name: '顺丰速运', code: 'shunfeng', sort: 0, show: true },
   { id: 3, name: '圆通速递', code: 'yuantong', sort: 0, show: true },
@@ -77,8 +92,48 @@ const dataList = ref([
   { id: 11, name: 'EMS', code: 'ems', sort: 0, show: true },
   { id: 12, name: '德邦物流', code: 'debangwuliu', sort: 0, show: true },
   { id: 13, name: '德邦快递', code: 'debangkuaidi', sort: 0, show: true },
-  { id: 14, name: '众邮快递', code: 'zhongyouex', sort: 0, show: true }
+  { id: 14, name: '众邮快递', code: 'zhongyouex', sort: 0, show: true },
+  { id: 15, name: '安能快运', code: 'annengkuaiyun', sort: 0, show: true },
+  { id: 16, name: '壹米滴答', code: 'yimidida', sort: 0, show: false },
+  { id: 17, name: '宅急送', code: 'zhaijisong', sort: 0, show: true },
+  { id: 18, name: '苏宁物流', code: 'suning', sort: 0, show: true },
+  { id: 19, name: '中通快运', code: 'zhongtongkuaiyun', sort: 0, show: true },
+  { id: 20, name: '芝麻开门', code: 'zhimakaimen', sort: 0, show: false },
+  { id: 21, name: '优速快递', code: 'youshuwuliu', sort: 0, show: true }
 ])
+// ========== MOCK DATA END ==========
+
+// ========== PAGINATION STATE ==========
+const currentPage = ref(1)
+const pageSize = ref(15)
+const jumpPageInput = ref('')
+const pageSizeOptions = [10, 15, 20, 30, 50]
+const pageSizeOptionLabels = computed(() => pageSizeOptions.map((n: number) => `${n}条/页`))
+const pageSizeIndex = computed(() => { const idx = pageSizeOptions.indexOf(pageSize.value); return idx >= 0 ? idx : 0 })
+const total = computed(() => dataList.value.length)
+const totalPage = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
+const pagedList = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  return dataList.value.slice(start, start + pageSize.value)
+})
+const visiblePages = computed((): number[] => {
+  const t = totalPage.value; const cur = currentPage.value
+  if (t <= 7) return Array.from({ length: t }, (_: any, i: number) => i + 1)
+  if (cur <= 4) return [1, 2, 3, 4, 5, -1, t]
+  if (cur >= t - 3) return [1, -1, t - 4, t - 3, t - 2, t - 1, t]
+  return [1, -1, cur - 1, cur, cur + 1, -1, t]
+})
+const handlePageChange = (p: number) => { currentPage.value = p }
+const handlePageSizeChange = (e: any) => {
+  const idx = Number(e.detail.value)
+  pageSize.value = pageSizeOptions[idx] ?? pageSizeOptions[0]
+  currentPage.value = 1
+}
+const handleJumpPage = () => {
+  const p = parseInt(jumpPageInput.value)
+  if (!isNaN(p) && p >= 1 && p <= totalPage.value) currentPage.value = p
+}
+// ========== END PAGINATION STATE ==========
 
 function onSearch() {
   uni.showToast({ title: '查询中...', icon: 'none' })

pages/mall/admin/maintain/dev-config/permission.uvue

@@ -237,7 +237,7 @@ function onDelete(item: any) {
 .col-route { flex: 3; }
 .col-status { width: 100px; justify-content: center; }
 .col-memo { flex: 1; }
-.col-ops { flex: 3; justify-content: flex-end; }
+.col-ops { flex: 3; justify-content: flex-end; display: flex; flex-direction: row; }
 
 .expand-icon {
   margin-right: 8px;

pages/mall/admin/maintain/dev-tools/data-dict.uvue

@@ -239,6 +239,8 @@ function handleDelete(item: any) {
   font-size: 14px;
   color: #666;
   padding: 0 10px;
+  display: flex;
+  flex-direction: row;
 }
 
 .action-link {

pages/mall/admin/maintain/dev-tools/database.uvue

@@ -21,7 +21,7 @@
             <view class="th col-op">操作</view>
           </view>
           <view class="tbody">
-            <view v-for="(item, index) in tableData" :key="index" class="tr">
+            <view v-for="(item, index) in pagedList" :key="index" class="tr">
               <view class="td col-name">{{ item.name }}</view>
               <view class="td col-engine">{{ item.engine }}</view>
               <view class="td col-rows">{{ item.rows }}</view>
@@ -35,21 +35,87 @@
             </view>
           </view>
         </view>
+        <CommonPagination
+          v-if="true"
+          :total="total"
+          :loading="false"
+          :currentPage="currentPage"
+          :pageSize="pageSize"
+          :pageSizeOptionLabels="pageSizeOptionLabels"
+          :pageSizeIndex="pageSizeIndex"
+          :visiblePages="visiblePages"
+          :totalPage="totalPage"
+          :jumpPageInput="jumpPageInput"
+          @page-size-change="handlePageSizeChange"
+          @page-change="handlePageChange"
+          @update:jumpPageInput="(val: string) => { jumpPageInput.value = val }"
+          @jump-page="handleJumpPage"
+        />
       </view>
     </view>
   </view>
 </template>
 
 <script setup lang="uts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
 
+// ========== MOCK DATA START ==========
+// TODO: 接真实接口时替换此处 tableData 为 fetchTableList() 调用
 const tableData = ref([
   { name: 'eb_system_admin', engine: 'InnoDB', rows: 5, dataSize: '16.00 KB', indexSize: '16.00 KB', comment: '后台管理员表' },
   { name: 'eb_user', engine: 'InnoDB', rows: 1250, dataSize: '320.00 KB', indexSize: '156.00 KB', comment: '用户表' },
   { name: 'eb_store_product', engine: 'InnoDB', rows: 86, dataSize: '1.20 MB', indexSize: '64.00 KB', comment: '商品表' },
   { name: 'eb_store_order', engine: 'InnoDB', rows: 4521, dataSize: '2.50 MB', indexSize: '512.00 KB', comment: '订单表' },
-  { name: 'eb_system_config', engine: 'InnoDB', rows: 156, dataSize: '48.00 KB', indexSize: '16.00 KB', comment: '系统配置表' }
+  { name: 'eb_system_config', engine: 'InnoDB', rows: 156, dataSize: '48.00 KB', indexSize: '16.00 KB', comment: '系统配置表' },
+  { name: 'eb_store_category', engine: 'InnoDB', rows: 42, dataSize: '32.00 KB', indexSize: '16.00 KB', comment: '商品分类表' },
+  { name: 'eb_user_address', engine: 'InnoDB', rows: 3210, dataSize: '256.00 KB', indexSize: '64.00 KB', comment: '用户收货地址表' },
+  { name: 'eb_store_cart', engine: 'InnoDB', rows: 8820, dataSize: '1.80 MB', indexSize: '256.00 KB', comment: '购物车表' },
+  { name: 'eb_coupon', engine: 'InnoDB', rows: 312, dataSize: '96.00 KB', indexSize: '32.00 KB', comment: '优惠券表' },
+  { name: 'eb_coupon_user', engine: 'InnoDB', rows: 12500, dataSize: '3.20 MB', indexSize: '512.00 KB', comment: '用户优惠券表' },
+  { name: 'eb_store_order_product', engine: 'InnoDB', rows: 9800, dataSize: '2.10 MB', indexSize: '320.00 KB', comment: '订单商品明细表' },
+  { name: 'eb_system_admin_log', engine: 'InnoDB', rows: 25000, dataSize: '8.00 MB', indexSize: '1.20 MB', comment: '管理员操作日志表' },
+  { name: 'eb_user_integral', engine: 'InnoDB', rows: 5600, dataSize: '640.00 KB', indexSize: '128.00 KB', comment: '用户积分记录表' },
+  { name: 'eb_seckill', engine: 'InnoDB', rows: 18, dataSize: '16.00 KB', indexSize: '16.00 KB', comment: '秒杀活动表' },
+  { name: 'eb_bargain', engine: 'InnoDB', rows: 24, dataSize: '16.00 KB', indexSize: '16.00 KB', comment: '研价活动表' },
+  { name: 'eb_combination', engine: 'InnoDB', rows: 36, dataSize: '32.00 KB', indexSize: '16.00 KB', comment: '拼团活动表' },
+  { name: 'eb_agent', engine: 'InnoDB', rows: 890, dataSize: '128.00 KB', indexSize: '32.00 KB', comment: '代理商表' },
+  { name: 'eb_spread_commission', engine: 'InnoDB', rows: 18700, dataSize: '4.50 MB', indexSize: '768.00 KB', comment: '佣金流水表' },
+  { name: 'eb_wechat_media', engine: 'InnoDB', rows: 210, dataSize: '2.50 MB', indexSize: '64.00 KB', comment: '微信素材库表' }
 ])
+// ========== MOCK DATA END ==========
+
+// ========== PAGINATION STATE ==========
+const currentPage = ref(1)
+const pageSize = ref(15)
+const jumpPageInput = ref('')
+const pageSizeOptions = [10, 15, 20, 30, 50]
+const pageSizeOptionLabels = computed(() => pageSizeOptions.map((n: number) => `${n}条/页`))
+const pageSizeIndex = computed(() => { const idx = pageSizeOptions.indexOf(pageSize.value); return idx >= 0 ? idx : 0 })
+const total = computed(() => tableData.value.length)
+const totalPage = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
+const pagedList = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  return tableData.value.slice(start, start + pageSize.value)
+})
+const visiblePages = computed((): number[] => {
+  const t = totalPage.value; const cur = currentPage.value
+  if (t <= 7) return Array.from({ length: t }, (_: any, i: number) => i + 1)
+  if (cur <= 4) return [1, 2, 3, 4, 5, -1, t]
+  if (cur >= t - 3) return [1, -1, t - 4, t - 3, t - 2, t - 1, t]
+  return [1, -1, cur - 1, cur, cur + 1, -1, t]
+})
+const handlePageChange = (p: number) => { currentPage.value = p }
+const handlePageSizeChange = (e: any) => {
+  const idx = Number(e.detail.value)
+  pageSize.value = pageSizeOptions[idx] ?? pageSizeOptions[0]
+  currentPage.value = 1
+}
+const handleJumpPage = () => {
+  const p = parseInt(jumpPageInput.value)
+  if (!isNaN(p) && p >= 1 && p <= totalPage.value) currentPage.value = p
+}
+// ========== END PAGINATION STATE ==========
 
 function handleExport() {
   uni.showLoading({ title: '正在备份...' })
@@ -138,7 +204,7 @@ function handleRepair(name: string) {
 .col-size { flex: 1; }
 .col-index { flex: 1; }
 .col-comment { flex: 2; }
-.col-op { width: 120px; justify-content: space-around; }
+.col-op { width: 120px; justify-content: space-around; display: flex; flex-direction: row; }
 
 .op-link {
   color: #1890ff;

pages/mall/admin/maintain/i18n/language-list.uvue

@@ -131,7 +131,7 @@ function onDel(item: LangItem) {
 .table-header { display: flex; flex-direction: row; background-color: #f8f8f9; }
 .th { padding: 12px 10px; font-size: 13px; font-weight: bold; color: #515a6e; border-bottom: 1px solid #f0f0f0; text-align: center; }
 .tr { display: flex; flex-direction: row; align-items: center; border-bottom: 1px solid #f0f0f0; min-height: 50px; }
-.td { padding: 10px; font-size: 13px; color: #515a6e; text-align: center; }
+.td { padding: 10px; font-size: 13px; color: #515a6e; text-align: center; display: flex; flex-direction:row }
 .action-btn { font-size: 13px; color: #1890ff; margin-right: 8px; cursor: pointer; }
 .action-btn-del { font-size: 13px; color: #ed4014; cursor: pointer; }
 </style>

pages/mall/admin/maintain/lang/detail.uvue

@@ -56,7 +56,7 @@
           </view>
 
           <view class="table-body">
-            <view v-for="item in dataList" :key="item.id" class="table-row">
+            <view v-for="item in pagedList" :key="item.id" class="table-row">
               <view class="col col-id"><text>{{ item.id }}</text></view>
               <view class="col col-origin"><text>{{ item.origin }}</text></view>
               <view class="col col-translation"><text>{{ item.translation }}</text></view>
@@ -70,14 +70,33 @@
             </view>
           </view>
         </view>
+        <CommonPagination
+          v-if="true"
+          :total="total"
+          :loading="false"
+          :currentPage="currentPage"
+          :pageSize="pageSize"
+          :pageSizeOptionLabels="pageSizeOptionLabels"
+          :pageSizeIndex="pageSizeIndex"
+          :visiblePages="visiblePages"
+          :totalPage="totalPage"
+          :jumpPageInput="jumpPageInput"
+          @page-size-change="handlePageSizeChange"
+          @page-change="handlePageChange"
+          @update:jumpPageInput="(val: string) => { jumpPageInput.value = val }"
+          @jump-page="handleJumpPage"
+        />
       </view>
     </view>
   </view>
 </template>
 
 <script setup lang="uts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
 
+// ========== MOCK DATA START ==========
+// TODO: 接真实接口时替换此处 dataList 为 fetchTranslationList() 调用
 const dataList = ref([
   { id: 55493, origin: '秒杀活动', translation: '秒杀活动', code: '秒杀活动', type: '中文(zh-CN)' },
   { id: 55483, origin: '哥哥我', translation: '', code: '哥哥我', type: '中文(zh-CN)' },
@@ -88,8 +107,50 @@ const dataList = ref([
   { id: 25181, origin: '支付剩余时间', translation: '支付剩余时间', code: '支付剩余时间', type: '中文(zh-CN)' },
   { id: 24711, origin: '全部已读', translation: '全部已读', code: '全部已读', type: '中文(zh-CN)' },
   { id: 24701, origin: '获得拼团团长佣金', translation: '获得拼团团长佣金', code: '获得拼团团长佣金', type: '中文(zh-CN)' },
-  { id: 24691, origin: '获得事业部推广订单佣金', translation: '获得事业部推广订单佣金', code: '获得事业部推广订单佣金', type: '中文(zh-CN)' }
+  { id: 24691, origin: '获得事业部推广订单佣金', translation: '获得事业部推广订单佣金', code: '获得事业部推广订单佣金', type: '中文(zh-CN)' },
+  { id: 24681, origin: '返回默认地址', translation: '返回默认地址', code: '返回默认地址', type: '中文(zh-CN)' },
+  { id: 24671, origin: '我的购物车', translation: '我的购物车', code: '我的购物车', type: '中文(zh-CN)' },
+  { id: 24661, origin: '监控山东', translation: '监控山东', code: '监控山东', type: '中文(zh-CN)' },
+  { id: 24651, origin: '商品评价', translation: '商品评价', code: '商品评价', type: '中文(zh-CN)' },
+  { id: 24641, origin: '手机号已绑定', translation: '手机号已绑定', code: '手机号已绑定', type: '中文(zh-CN)' },
+  { id: 24631, origin: '订单列表', translation: '订单列表', code: '订单列表', type: '中文(zh-CN)' },
+  { id: 24621, origin: '购买商品', translation: '购买商品', code: '购买商品', type: '中文(zh-CN)' },
+  { id: 24611, origin: '会员中心', translation: '会员中心', code: '会员中心', type: '中文(zh-CN)' },
+  { id: 24601, origin: '就此评价', translation: '就此评价', code: '就此评价', type: '中文(zh-CN)' }
 ])
+// ========== MOCK DATA END ==========
+
+// ========== PAGINATION STATE ==========
+const currentPage = ref(1)
+const pageSize = ref(15)
+const jumpPageInput = ref('')
+const pageSizeOptions = [10, 15, 20, 30, 50]
+const pageSizeOptionLabels = computed(() => pageSizeOptions.map((n: number) => `${n}条/页`))
+const pageSizeIndex = computed(() => { const idx = pageSizeOptions.indexOf(pageSize.value); return idx >= 0 ? idx : 0 })
+const total = computed(() => dataList.value.length)
+const totalPage = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
+const pagedList = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  return dataList.value.slice(start, start + pageSize.value)
+})
+const visiblePages = computed((): number[] => {
+  const t = totalPage.value; const cur = currentPage.value
+  if (t <= 7) return Array.from({ length: t }, (_: any, i: number) => i + 1)
+  if (cur <= 4) return [1, 2, 3, 4, 5, -1, t]
+  if (cur >= t - 3) return [1, -1, t - 4, t - 3, t - 2, t - 1, t]
+  return [1, -1, cur - 1, cur, cur + 1, -1, t]
+})
+const handlePageChange = (p: number) => { currentPage.value = p }
+const handlePageSizeChange = (e: any) => {
+  const idx = Number(e.detail.value)
+  pageSize.value = pageSizeOptions[idx] ?? pageSizeOptions[0]
+  currentPage.value = 1
+}
+const handleJumpPage = () => {
+  const p = parseInt(jumpPageInput.value)
+  if (!isNaN(p) && p >= 1 && p <= totalPage.value) currentPage.value = p
+}
+// ========== END PAGINATION STATE ==========
 
 function onSearch() {
   uni.showToast({ title: '搜索中...', icon: 'none' })
@@ -255,7 +316,7 @@ function deleteWord(item: any) {
 .col-translation { flex: 2; }
 .col-code { flex: 2; }
 .col-type { width: 150px; }
-.col-action { width: 150px; justify-content: flex-end; }
+.col-action { width: 150px; justify-content: flex-end;display: flex; flex-direction: row; }
 
 .action-btn {
   color: #1890ff;

pages/mall/admin/maintain/lang/list.uvue

@@ -18,7 +18,7 @@
           </view>
 
           <view class="table-body">
-            <view v-for="item in dataList" :key="item.id" class="table-row">
+            <view v-for="item in pagedList" :key="item.id" class="table-row">
               <view class="col col-id"><text>{{ item.id }}</text></view>
               <view class="col col-name">
                 <text>{{ item.name }}</text>
@@ -41,17 +41,33 @@
         </view>
 
         <!-- 分页 -->
-        <view class="pagination">
+        <CommonPagination
-          <text class="page-info">共 10 条 15条/页</text>
+          v-if="true"
-        </view>
+          :total="total"
+          :loading="false"
+          :currentPage="currentPage"
+          :pageSize="pageSize"
+          :pageSizeOptionLabels="pageSizeOptionLabels"
+          :pageSizeIndex="pageSizeIndex"
+          :visiblePages="visiblePages"
+          :totalPage="totalPage"
+          :jumpPageInput="jumpPageInput"
+          @page-size-change="handlePageSizeChange"
+          @page-change="handlePageChange"
+          @update:jumpPageInput="(val: string) => { jumpPageInput.value = val }"
+          @jump-page="handleJumpPage"
+        />
       </view>
     </view>
   </view>
 </template>
 
 <script setup lang="uts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
 
+// ========== MOCK DATA START ==========
+// TODO: 接真实接口时替换此处 dataList 为 fetchLanguageList() 调用
 const dataList = ref([
   { id: 1, name: '中文', code: 'zh-CN', status: true, isDefault: true },
   { id: 2, name: 'English', code: 'en-US', status: true, isDefault: false },
@@ -62,8 +78,51 @@ const dataList = ref([
   { id: 7, name: '한국어', code: 'ko-KR', status: true, isDefault: false },
   { id: 8, name: 'Монгол', code: 'mn-MN', status: true, isDefault: false },
   { id: 9, name: 'ภาษาไทย', code: 'th-TH', status: true, isDefault: false },
-  { id: 10, name: 'ViệtName', code: 'vi-VN', status: true, isDefault: false }
+  { id: 10, name: 'ViệtName', code: 'vi-VN', status: true, isDefault: false },
+  { id: 11, name: '한국어', code: 'ko-KR', status: true, isDefault: false },
+  { id: 12, name: 'Deutsch', code: 'de-DE', status: false, isDefault: false },
+  { id: 13, name: 'Español', code: 'es-ES', status: false, isDefault: false },
+  { id: 14, name: 'Português', code: 'pt-PT', status: false, isDefault: false },
+  { id: 15, name: 'русский', code: 'ru-RU', status: false, isDefault: false },
+  { id: 16, name: 'Italiano', code: 'it-IT', status: true, isDefault: false },
+  { id: 17, name: 'Bahasa Indonesia', code: 'id-ID', status: false, isDefault: false },
+  { id: 18, name: 'Bahasa Melayu', code: 'ms-MY', status: false, isDefault: false },
+  { id: 19, name: 'Türkçe', code: 'tr-TR', status: false, isDefault: false },
+  { id: 20, name: 'Nederlands', code: 'nl-NL', status: false, isDefault: false }
 ])
+// ========== MOCK DATA END ==========
+
+// ========== PAGINATION STATE ==========
+const currentPage = ref(1)
+const pageSize = ref(15)
+const jumpPageInput = ref('')
+const pageSizeOptions = [10, 15, 20, 30, 50]
+const pageSizeOptionLabels = computed(() => pageSizeOptions.map((n: number) => `${n}条/页`))
+const pageSizeIndex = computed(() => { const idx = pageSizeOptions.indexOf(pageSize.value); return idx >= 0 ? idx : 0 })
+const total = computed(() => dataList.value.length)
+const totalPage = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
+const pagedList = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  return dataList.value.slice(start, start + pageSize.value)
+})
+const visiblePages = computed((): number[] => {
+  const t = totalPage.value; const cur = currentPage.value
+  if (t <= 7) return Array.from({ length: t }, (_: any, i: number) => i + 1)
+  if (cur <= 4) return [1, 2, 3, 4, 5, -1, t]
+  if (cur >= t - 3) return [1, -1, t - 4, t - 3, t - 2, t - 1, t]
+  return [1, -1, cur - 1, cur, cur + 1, -1, t]
+})
+const handlePageChange = (p: number) => { currentPage.value = p }
+const handlePageSizeChange = (e: any) => {
+  const idx = Number(e.detail.value)
+  pageSize.value = pageSizeOptions[idx] ?? pageSizeOptions[0]
+  currentPage.value = 1
+}
+const handleJumpPage = () => {
+  const p = parseInt(jumpPageInput.value)
+  if (!isNaN(p) && p >= 1 && p <= totalPage.value) currentPage.value = p
+}
+// ========== END PAGINATION STATE ==========
 
 function addLanguage() {
   uni.showToast({ title: '添加语言', icon: 'none' })
@@ -153,7 +212,7 @@ function deleteItem(item: any) {
 .col-name { flex: 1; position: relative; }
 .col-code { flex: 1; }
 .col-status { width: 120px; justify-content: center; }
-.col-action { width: 150px; justify-content: flex-end; }
+.col-action { width: 150px; justify-content: flex-end;display: flex; flex-direction: row; }
 
 .default-badge {
   background-color: #e6f7ff;

pages/mall/admin/maintain/lang/region.uvue

@@ -29,7 +29,7 @@
           </view>
 
           <view class="table-body">
-            <view v-for="item in dataList" :key="item.id" class="table-row">
+            <view v-for="item in pagedList" :key="item.id" class="table-row">
               <view class="col col-id"><text>{{ item.id }}</text></view>
               <view class="col col-code"><text>{{ item.code }}</text></view>
               <view class="col col-desc"><text>{{ item.desc }}</text></view>
@@ -42,14 +42,33 @@
             </view>
           </view>
         </view>
+        <CommonPagination
+          v-if="true"
+          :total="total"
+          :loading="false"
+          :currentPage="currentPage"
+          :pageSize="pageSize"
+          :pageSizeOptionLabels="pageSizeOptionLabels"
+          :pageSizeIndex="pageSizeIndex"
+          :visiblePages="visiblePages"
+          :totalPage="totalPage"
+          :jumpPageInput="jumpPageInput"
+          @page-size-change="handlePageSizeChange"
+          @page-change="handlePageChange"
+          @update:jumpPageInput="(val: string) => { jumpPageInput.value = val }"
+          @jump-page="handleJumpPage"
+        />
       </view>
     </view>
   </view>
 </template>
 
 <script setup lang="uts">
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import CommonPagination from '@/components/CommonPagination/CommonPagination.uvue'
 
+// ========== MOCK DATA START ==========
+// TODO: 接真实接口时替换此处 dataList 为 fetchRegionList() 调用
 const dataList = ref([
   { id: 346, code: 'zh-HK', desc: '中文(繁体, 香港特别行政区)', lang: '' },
   { id: 344, code: 'zh-MO', desc: '中文(繁体, 澳门特别行政区)', lang: '' },
@@ -60,8 +79,50 @@ const dataList = ref([
   { id: 337, code: 'en-GB', desc: '英语(英国)', lang: '' },
   { id: 336, code: 'en-IN', desc: '英语(印度)', lang: '' },
   { id: 335, code: 'en-JM', desc: '英语(牙买加)', lang: '' },
-  { id: 334, code: 'en-NZ', desc: '英语(新西兰)', lang: '' }
+  { id: 334, code: 'en-NZ', desc: '英语(新西兰)', lang: '' },
+  { id: 333, code: 'en-AU', desc: '英语(澳大利亚)', lang: '' },
+  { id: 332, code: 'en-CA', desc: '英语(加拿大)', lang: '' },
+  { id: 331, code: 'fr-FR', desc: '法语(法国)', lang: '' },
+  { id: 330, code: 'fr-CA', desc: '法语(加拿大)', lang: '' },
+  { id: 329, code: 'de-DE', desc: '德语(德国)', lang: '' },
+  { id: 328, code: 'de-AT', desc: '德语(奥地利)', lang: '' },
+  { id: 327, code: 'ja-JP', desc: '日语(日本)', lang: '日本语(ja-JP)' },
+  { id: 326, code: 'ko-KR', desc: '韩语(韩国)', lang: '' },
+  { id: 325, code: 'es-ES', desc: '西班牙语(西班牙)', lang: '' }
 ])
+// ========== MOCK DATA END ==========
+
+// ========== PAGINATION STATE ==========
+const currentPage = ref(1)
+const pageSize = ref(15)
+const jumpPageInput = ref('')
+const pageSizeOptions = [10, 15, 20, 30, 50]
+const pageSizeOptionLabels = computed(() => pageSizeOptions.map((n: number) => `${n}条/页`))
+const pageSizeIndex = computed(() => { const idx = pageSizeOptions.indexOf(pageSize.value); return idx >= 0 ? idx : 0 })
+const total = computed(() => dataList.value.length)
+const totalPage = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))
+const pagedList = computed(() => {
+  const start = (currentPage.value - 1) * pageSize.value
+  return dataList.value.slice(start, start + pageSize.value)
+})
+const visiblePages = computed((): number[] => {
+  const t = totalPage.value; const cur = currentPage.value
+  if (t <= 7) return Array.from({ length: t }, (_: any, i: number) => i + 1)
+  if (cur <= 4) return [1, 2, 3, 4, 5, -1, t]
+  if (cur >= t - 3) return [1, -1, t - 4, t - 3, t - 2, t - 1, t]
+  return [1, -1, cur - 1, cur, cur + 1, -1, t]
+})
+const handlePageChange = (p: number) => { currentPage.value = p }
+const handlePageSizeChange = (e: any) => {
+  const idx = Number(e.detail.value)
+  pageSize.value = pageSizeOptions[idx] ?? pageSizeOptions[0]
+  currentPage.value = 1
+}
+const handleJumpPage = () => {
+  const p = parseInt(jumpPageInput.value)
+  if (!isNaN(p) && p >= 1 && p <= totalPage.value) currentPage.value = p
+}
+// ========== END PAGINATION STATE ==========
 
 function onSearch() {
   uni.showToast({ title: '搜索中...', icon: 'none' })
@@ -172,7 +233,7 @@ function deleteItem(item: any) {
 .col-code { flex: 1; }
 .col-desc { flex: 2; }
 .col-lang { flex: 1; }
-.col-action { width: 150px; justify-content: flex-end; }
+.col-action { width: 150px; justify-content: flex-end; display: flex; flex-direction: row; }
 
 .action-btn {
   color: #1890ff;

pages/mall/admin/setting/delivery/staff.uvue

@@ -207,6 +207,7 @@ function onDel(item: CourierItem) {
   color: #515a6e;
   text-align: center;
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
 }

pages/mall/admin/setting/delivery/station.uvue

@@ -278,6 +278,7 @@ function onDel(item: StationItem) {
   color: #515a6e;
   text-align: center;
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
 }

pages/mall/admin/setting/delivery/template.uvue

@@ -171,6 +171,7 @@ function onDel(item: FreightItem) {
   color: #515a6e;
   text-align: center;
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
 }

pages/mall/admin/setting/delivery/verifier.uvue

@@ -256,6 +256,7 @@ function onDel(item: VerifierItem) {
   color: #515a6e;
   text-align: center;
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
 }