machine-setup: add heartbeat/network info

Author: pandadtdyy

packages/machine-setup/frontend/src/App.vue

@@ -3,7 +3,7 @@
         <n-grid x-gap="12" :cols="2">
             <n-gi>
             <basic-info />
-            <connect-server />
+            <heartbeat-info />
             <video-info />
             </n-gi>
             <n-gi>
@@ -19,7 +19,7 @@
     NGrid, NGi, darkTheme, NConfigProvider, useOsTheme,
   } from 'naive-ui';
   import BasicInfo from './components/BasicInfo.vue';
-  import ConnectServer from './components/HeartbeatInfo.vue';
+  import HeartbeatInfo from './components/HeartbeatInfo.vue';
   import SystemInfo from './components/SystemInfo.vue';
   import NetworkInfo from './components/NetworkInfo.vue';
   import VideoInfo from './components/VideoInfo.vue';

packages/machine-setup/frontend/src/components/HeartbeatInfo.vue

@@ -0,0 +1,29 @@
+<template>
+    <n-card bordered shadow="always">
+        <n-grid x-gap="12" :cols="2">
+            <n-gi>
+                <p>XCPC-TOOLS 心跳上报状态：<n-tag :type="onHeartbeat ? 'success' : 'error'">{{ onHeartbeat ? '已开启' : '未开启' }}</n-tag></p>
+                <p>当前上报中心：<n-tag :type="!heartbeaturl ? 'error' : 'success'">{{ heartbeaturl }}</n-tag></p>
+            </n-gi>
+            <n-gi>
+                <n-input placeholder="请输入心跳上报URL" v-model:value="heartbeaturl" size="large" style="width: 100%; margin-bottom: .5em;" />
+                <n-grid x-gap="12" :cols="2" style="width: 100%;">
+                    <n-gi>
+                        <n-button style="width: 100%;">保存</n-button>
+                    </n-gi>
+                    <n-gi>
+                        <n-button type="info" style="width: 100%;">测试</n-button>
+                    </n-gi>
+                </n-grid>
+            </n-gi>
+        </n-grid>
+    </n-card>
+</template>
+
+<script setup lang="ts">
+import { NCard, NGrid, NGi, NButton, NInput } from 'naive-ui';
+import { ref } from 'vue';
+
+const heartbeaturl = ref<string>('');
+const onHeartbeat = ref<boolean>(false);
+</script>

packages/machine-setup/frontend/src/components/NetworkInfo.vue

@@ -0,0 +1,17 @@
+<template>
+    <n-card bordered title="网络信息" shadow="always">
+        <n-grid x-gap="12" :cols="2">
+            <n-gi v-for="info in netInfo" :key="info.ip">
+                <p>{{ info.dev }}/{{ info.mac }}</p>
+                <p>IP: {{ info.ip }}</p>
+            </n-gi>
+        </n-grid>
+        <p v-if="netInfo.length === 0">No network information found.</p>
+    </n-card>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const netInfo = ref<any[]>([]);
+</script>