147 lines
4.0 KiB
Plaintext
147 lines
4.0 KiB
Plaintext
<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 tableData" :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>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="uts">
|
|
import { ref } from 'vue'
|
|
|
|
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: '系统配置表' }
|
|
])
|
|
|
|
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 {
|
|
padding: 20px;
|
|
}
|
|
.admin-card {
|
|
background-color: #fff;
|
|
padding: 20px;
|
|
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; }
|
|
|
|
.op-link {
|
|
color: #1890ff;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|