Files
laravel_swoole/resources/admin/src/pages/home/widgets/components/ver.vue
T
2026-02-08 22:38:13 +08:00

70 lines
1.3 KiB
Vue

<template>
<div class="ver-card">
<div class="header">
<span class="title">版本信息</span>
</div>
<a-spin :spinning="loading">
<a-descriptions bordered :column="1">
<a-descriptions-item v-for="(item, index) in sysInfo" :key="index" :label="item.label">
{{ item.values }}
</a-descriptions-item>
</a-descriptions>
</a-spin>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import systemApi from '@/api/system'
// 定义组件名称
defineOptions({
name: 'VerWidget',
})
const loading = ref(true)
const sysInfo = ref([])
const getSystemList = async () => {
try {
const res = await systemApi.version.get()
if (res.code === 1) {
sysInfo.value = res.data
}
} catch (error) {
console.error('获取版本信息失败:', error)
// 使用模拟数据作为fallback
sysInfo.value = [
{ label: '系统版本', values: '1.0.0' },
{ label: '框架版本', values: 'Vue 3.x' },
{ label: '构建时间', values: '2024-01-01' },
]
} finally {
loading.value = false
}
}
onMounted(() => {
getSystemList()
})
</script>
<style scoped lang="scss">
.ver-card {
background-color: #ffffff;
padding: 16px;
border-radius: 10px;
margin: 16px 0;
.header{
padding-bottom: 10px;
.title{
font-size: 18px;
}
}
:deep(.ant-descriptions-item-label) {
width: 160px;
font-weight: 500;
}
}
</style>