完成代码路径重构
This commit is contained in:
213
pages/mall/admin/maintain/dev-tools/database/index.uvue
Normal file
213
pages/mall/admin/maintain/dev-tools/database/index.uvue
Normal file
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<view class="admin-page">
|
||||
<view class="admin-sections">
|
||||
<view class="admin-card">
|
||||
<view class="page-header">
|
||||
<text class="page-title">数据库管理</text>
|
||||
<view class="header-btns">
|
||||
<button class="btn btn-primary btn-sm" @click="handleExport">备份数据库</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<view class="admin-table">
|
||||
<view class="thead">
|
||||
<view class="th col-name">表名</view>
|
||||
<view class="th col-engine">引擎</view>
|
||||
<view class="th col-rows">行数</view>
|
||||
<view class="th col-size">数据大小</view>
|
||||
<view class="th col-index">索引大小</view>
|
||||
<view class="th col-comment">备注</view>
|
||||
<view class="th col-op">操作</view>
|
||||
</view>
|
||||
<view class="tbody">
|
||||
<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>
|
||||
<view class="td col-size">{{ item.dataSize }}</view>
|
||||
<view class="td col-index">{{ item.indexSize }}</view>
|
||||
<view class="td col-comment">{{ item.comment }}</view>
|
||||
<view class="td col-op">
|
||||
<text class="op-link" @click="handleOptimize(item.name)">优化</text>
|
||||
<text class="op-link" @click="handleRepair(item.name)">修复</text>
|
||||
</view>
|
||||
</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, 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_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: '正在备份...' })
|
||||
setTimeout(() => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: '备份成功' })
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
function handleOptimize(name: string) {
|
||||
uni.showToast({ title: '优化表: ' + name, icon: 'none' })
|
||||
}
|
||||
|
||||
function handleRepair(name: string) {
|
||||
uni.showToast({ title: '修复表: ' + name, icon: 'none' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.admin-page {
|
||||
/* 使用 Layout 的背景和内边距 */
|
||||
min-height: 100vh;
|
||||
}
|
||||
.admin-card {
|
||||
background-color: #fff;
|
||||
padding: var(--admin-card-padding);
|
||||
border-radius: 4px;
|
||||
}
|
||||
.page-header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.page-title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.btn-sm {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: #1890ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 表格样式 */
|
||||
.admin-table {
|
||||
border: 1px solid #e8eaec;
|
||||
}
|
||||
.thead {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #f8f8f9;
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
}
|
||||
.tbody {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.tr {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
}
|
||||
.tr:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.th, .td {
|
||||
padding: 12px 10px;
|
||||
font-size: 14px;
|
||||
color: #515a6e;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.th {
|
||||
font-weight: bold;
|
||||
}
|
||||
.col-name { flex: 2; }
|
||||
.col-engine { flex: 1; }
|
||||
.col-rows { flex: 1; }
|
||||
.col-size { flex: 1; }
|
||||
.col-index { flex: 1; }
|
||||
.col-comment { flex: 2; }
|
||||
.col-op { width: 120px; justify-content: space-around; display: flex; flex-direction: row; }
|
||||
|
||||
.op-link {
|
||||
color: #1890ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user