update ServerDashboard

src/pages/dashboard/ServerDashboard/ServerDetail.vue

@@ -0,0 +1,91 @@
+<template>
+	<div class="server-detail">
+		<div v-if="isLoading && !snapshotView" class="loading-wrap">
+			<t-loading text="加载系统详情..." />
+		</div>
+		<template v-else-if="snapshotView">
+			<t-cell-group title="系统" theme="card">
+				<t-cell title="服务器时间" :note="Time.toDateTime(snapshotView.serverTime)" />
+				<t-cell title="采样周期" :note="`${snapshotView.sampleRateMs} ms`" />
+				<t-cell title="操作系统" :note="os?.name" />
+				<t-cell title="启动时间" :note="Time.toPassedDateTime(os?.bootAt)" />
+			</t-cell-group>
+			<t-cell-group title="硬件信息" theme="card">
+				<t-cell title="主板厂商" :note="hardware?.baseboard?.manufacturer" />
+				<t-cell title="主板型号" :note="hardware?.baseboard?.model" />
+				<t-cell title="主板版本" :note="hardware?.baseboard?.version" />
+				<t-cell title="主板序列号" :note="hardware?.baseboard?.serialNumber" />
+				<t-cell title="固件厂商" :note="hardware?.firmware?.manufacturer" />
+				<t-cell title="固件名称" :note="hardware?.firmware?.name" />
+				<t-cell title="固件描述" :note="hardware?.firmware?.description" />
+				<t-cell title="固件版本" :note="hardware?.firmware?.version" />
+				<t-cell title="固件发布日期" :note="hardware?.firmware?.releaseDate" />
+			</t-cell-group>
+		</template>
+		<t-empty v-else description="暂无系统详情数据" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Toast } from "tdesign-mobile-vue";
+import { getSystemStatus, resolveSystemRequestErrorMessage } from "@/api/SystemAPI";
+import type { SystemStatusSnapshotView } from "@/types/System";
+import { Time } from "timi-web";
+
+defineOptions({
+	name: "ServerDetail"
+});
+
+const isLoading = ref(false);
+const snapshotView = ref<SystemStatusSnapshotView | null>(null);
+const refreshIntervalMs = 3000;
+let refreshTimer: ReturnType<typeof setInterval> | null = null;
+
+const os = computed(() => snapshotView.value?.snapshot?.os);
+const hardware = computed(() => snapshotView.value?.snapshot?.hardware);
+
+onMounted(() => {
+	void refreshDetail();
+	refreshTimer = setInterval(() => {
+		void refreshDetail();
+	}, refreshIntervalMs);
+});
+
+onUnmounted(() => {
+	if (!refreshTimer) {
+		return;
+	}
+	clearInterval(refreshTimer);
+	refreshTimer = null;
+});
+
+async function refreshDetail(): Promise<void> {
+	if (isLoading.value) {
+		return;
+	}
+	isLoading.value = true;
+	try {
+		snapshotView.value = await getSystemStatus("os,hardware");
+	} catch (error) {
+		Toast({
+			theme: "error",
+			message: resolveSystemRequestErrorMessage(error)
+		});
+	} finally {
+		isLoading.value = false;
+	}
+}
+</script>
+
+<style scoped lang="less">
+.server-detail {
+	padding: var(--app-nav-offset) 0 1rem 0;
+
+	.loading-wrap {
+		display: flex;
+		min-height: 4rem;
+		align-items: center;
+		justify-content: center;
+	}
+}
+</style>