1. 前言

接上篇，本次添加Docker信息查看功能
改进以下:

• 路由切换时自动刷新界面，利用onBeforeMount钩子

import { onBeforeMount, ref } from 'vue';onBeforeMount(() => handleRefresh());

2. 效果图

3. 代码

直接调用官方库

app.go

// 直接反馈docker官方数据结构，前端JS处理
func (a *App) Info() (types.Info, error) {return Cli.Info(context.Background())
}

InfoView.vue

<template><a-badge :count="info.Containers" color="green" show-zero><a-tag color="success">总容器数</a-tag></a-badge><a-divider type="vertical" style="background-color: #7cb305; margin-left: 2rem; margin-right: 2rem; height: 2rem;" /><a-badge :count="info.ContainersRunning" color="green" show-zero><a-tag color="success">运行的容器数</a-tag></a-badge><a-divider type="vertical" style="background-color: #7cb305; margin-left: 2rem; margin-right: 2rem; height: 2rem;" /><a-badge :count="info.ContainersPaused" color="green" show-zero><a-tag color="success">暂停的容器数</a-tag></a-badge><a-divider type="vertical" style="background-color: #7cb305; margin-left: 2rem; margin-right: 2rem; height: 2rem;" /><a-badge :count="info.ContainersStopped" color="green" show-zero><a-tag color="success">停止的容器数</a-tag></a-badge><a-divider type="vertical" style="background-color: #7cb305; margin-left: 2rem; margin-right: 2rem; height: 2rem;" /><a-badge :count="info.Images" color="green" show-zero><a-tag color="success">镜像数量</a-tag></a-badge><a-divider /><a-list item-layout="horizontal"><a-list-item><a-list-item-meta :description="info.IndexServerAddress"><template #title>Registry:</template></a-list-item-meta></a-list-item><a-list-item v-for="v, i in info.RegistryConfig && info.RegistryConfig.Mirrors"><a-list-item-meta :description="v"><template #title>Registry Mirrors {{ i }}:</template></a-list-item-meta></a-list-item><a-list-item><a-list-item-meta :description="info.KernelVersion"><template #title>Kernel Version::</template></a-list-item-meta></a-list-item><a-list-item><a-list-item-meta :description="info.OperatingSystem"><template #title>Operating System:</template></a-list-item-meta></a-list-item><a-list-item><a-list-item-meta :description="info.NCPU"><template #title>CPUs:</template></a-list-item-meta></a-list-item><a-list-item><a-list-item-meta :description="(info.MemTotal / 1024 / 1024 / 1024).toFixed(2) + 'GB'"><template #title>Total Memory:</template></a-list-item-meta></a-list-item><a-list-item><a-list-item-meta :description="info.SystemTime"><template #title>当前时间:</template></a-list-item-meta></a-list-item></a-list>
</template>
<script setup>
import { message } from "ant-design-vue";
import { Info } from "../../wailsjs/go/main/App";
import { onBeforeMount, ref } from "vue";const updateInfo = () => {Info().then((d) => {info.value = d;console.log(d);}).catch((e) => {message.error(`获取信息错误: ${e}!`);});
};const info = ref({});
onBeforeMount(() => { updateInfo() });
</script>

项目地址 https://github.com/LeoBest2/my-docker-gui