145f745e71
- 引入 unplugin-vue-components 自动按需导入 Element Plus 组件和图标 - 引入 unplugin-auto-import 自动导入 Vue/EP API（ref/reactive/ElMessage 等） - vite.config 添加 manualChunks 拆包（vendor 独立 chunk） - 移除 main.js 全量 Element Plus 导入和图标注册 - 所有 .vue 文件移除冗余的 import 语句
88 lines
2.0 KiB
Vue
88 lines
2.0 KiB
Vue
<template>
|
|
<div>
|
|
<h2>系统概览</h2>
|
|
<el-row :gutter="20" style="margin-top: 20px">
|
|
<el-col :span="6">
|
|
<el-card>
|
|
<div class="stat-title">站点总数</div>
|
|
<div class="stat-value">{{ stats.sites }}</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-card>
|
|
<div class="stat-title">配置版本数</div>
|
|
<div class="stat-value">{{ stats.configs }}</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-card>
|
|
<div class="stat-title">待审核配置</div>
|
|
<div class="stat-value">{{ stats.pending }}</div>
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-card>
|
|
<div class="stat-title">注册用户</div>
|
|
<div class="stat-value">{{ stats.users }}</div>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-card style="margin-top: 20px">
|
|
<template #header>
|
|
<span>API 状态</span>
|
|
</template>
|
|
<el-tag :type="healthStatus ? 'success' : 'danger'">
|
|
{{ healthStatus ? '服务正常' : '服务异常' }}
|
|
</el-tag>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import api from '../api'
|
|
|
|
const stats = reactive({
|
|
sites: 0,
|
|
configs: 0,
|
|
pending: 0,
|
|
users: 0
|
|
})
|
|
const healthStatus = ref(false)
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const [sitesRes, configsRes, usersRes] = await Promise.all([
|
|
api.sites.list().catch(() => ({ data: [] })),
|
|
api.configs.list().catch(() => ({ data: [] })),
|
|
api.users.list().catch(() => ({ data: [] }))
|
|
])
|
|
stats.sites = sitesRes.data?.length || 0
|
|
stats.configs = configsRes.data?.length || 0
|
|
stats.users = usersRes.data?.length || 0
|
|
} catch (e) {
|
|
console.error(e)
|
|
}
|
|
|
|
try {
|
|
await api.health()
|
|
healthStatus.value = true
|
|
} catch {
|
|
healthStatus.value = false
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.stat-title {
|
|
color: #909399;
|
|
font-size: 14px;
|
|
}
|
|
.stat-value {
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
color: #303133;
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|