machine-setup: use components

Author: pandadtdyy

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

@@ -1,80 +1,28 @@
 <template>
-  <n-config-provider :theme="osTheme === 'dark' ? darkTheme : undefined">
-    <n-grid x-gap="12" :cols="2">
-      <n-gi>
-        <n-card bordered shadow="always" title="@Hydro/XCPC-TOOLS Setup Tool">
-            <n-statistic title="座位号" value="未配置" style="text-align: center; font-size: 8em;" />
-        </n-card>
-        <n-card bordered shadow="always">
-            <n-input placeholder="请输入座位号" type="text" size="large" style="width: 100%; margin-bottom: .5em;" />
-            <n-space style="width: 100%;">
-                <n-button type="primary" style="width: 100%;">保存</n-button>
-                <n-button type="info" style="width: 100%;">放大显示</n-button>
-            </n-space>
-        </n-card>
-        <n-card bordered shadow="always" title="Stream Info">
-            <p>摄像头服务: 未配置</p>
-            <n-space style="width: 100%;">
-                <n-button type="primary" style="width: 100%;">启动</n-button>
-                <n-button type="info" style="width: 100%;">测试</n-button>
-            </n-space>
-            <p>麦克风服务: 未配置</p>
-            <n-space style="width: 100%;">
-                <n-button type="primary" style="width: 100%;">启动</n-button>
-                <n-button type="info" style="width: 100%;">测试</n-button>
-            </n-space>
-        </n-card>
-      </n-gi>
-      <n-gi>
-        <n-card bordered title="Machine Info" shadow="always">
-            <n-grid x-gap="12" :cols="2">
-                <n-gi>
-                    <p>CPU: Unknown</p>
-                    <p>Mem: Unknown</p>
-                    <p>OS: Unknown</p>
-                    <p>Image Version: Unknown</p>
-                    <p>Displays: Unknown</p>
-                </n-gi>
-                <n-gi>
-                    <p>gcc: Unknown</p>
-                    <p>g++: Unknown</p>
-                    <p>java: Unknown</p>
-                    <p>kotlin: Unknown</p>
-                    <p>python3: Unknown</p>
-                    <p>pypy3: Unknown</p>
-                </n-gi>
-            </n-grid>
-        </n-card>
-        <n-card bordered title="Network Info" shadow="always">
-            <p>IP: Unknown</p>
-            <p>Mac: Unknown</p>
-            <p>Interface: Unknown</p>
-        </n-card>
-      </n-gi>
-    </n-grid>
-  </n-config-provider>
-</template>
-
-<script setup lang="ts">
-import { 
-  NGrid, NGi, darkTheme, NConfigProvider, useOsTheme, NButton, NCard, NStatistic,
-} from 'naive-ui';
-
-const osTheme = useOsTheme();
-</script>
-
-<style scoped>
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
-</style>
+    <n-config-provider :theme="osTheme === 'dark' ? darkTheme : undefined">
+        <n-grid x-gap="12" :cols="2">
+            <n-gi>
+            <basic-info />
+            <connect-server />
+            <video-info />
+            </n-gi>
+            <n-gi>
+            <system-info />
+            <network-info />
+            </n-gi>
+        </n-grid>
+    </n-config-provider>
+  </template>
+  
+  <script setup lang="ts">
+  import { 
+    NGrid, NGi, darkTheme, NConfigProvider, useOsTheme,
+  } from 'naive-ui';
+  import BasicInfo from './components/BasicInfo.vue';
+  import ConnectServer from './components/HeartbeatInfo.vue';
+  import SystemInfo from './components/SystemInfo.vue';
+  import NetworkInfo from './components/NetworkInfo.vue';
+  import VideoInfo from './components/VideoInfo.vue';
+  
+  const osTheme = useOsTheme();
+  </script>

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

@@ -0,0 +1,16 @@
+<template>
+    <n-card bordered shadow="always" title="@Hydro/XCPC-TOOLS Setup Tool">
+        <n-statistic title="座位号" value="未配置" style="text-align: center; font-size: 8em;" />
+    </n-card>
+    <n-card bordered shadow="always">
+        <n-input placeholder="请输入座位号" type="text" size="large" style="width: 100%; margin-bottom: .5em;" />
+        <n-space style="width: 100%;">
+            <n-button type="primary" style="width: 100%;">保存</n-button>
+            <n-button type="info" style="width: 100%;">放大显示</n-button>
+        </n-space>
+    </n-card>
+</template>
+
+<script setup lang="ts">
+import { NCard, NButton, NInput } from 'naive-ui';
+</script>

packages/machine-setup/neutralino.config.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://raw.githubusercontent.com/neutralinojs/neutralinojs/main/schemas/neutralino.config.schema.json",
-  "applicationId": "org.hydro.xcpctools.setupapp",
+  "applicationId": "org.hydro.xcpctools.machinesetup",
   "version": "1.0.0",
   "defaultMode": "window",
   "port": 0,
@@ -16,20 +16,10 @@
   "nativeAllowList": [
     "app.*",
     "os.*",
+    "computer.*",
+    "filesystem.*",
     "debug.log"
   ],
-  "globalVariables": {
-    "TEST1": "Hello",
-    "TEST2": [
-      2,
-      4,
-      5
-    ],
-    "TEST3": {
-      "value1": 10,
-      "value2": {}
-    }
-  },
   "modes": {
     "window": {
       "title": "@hydro/xcpc-tools/machine-setup",
@@ -47,33 +37,10 @@
       "hidden": false,
       "resizable": true,
       "exitProcessOnClose": false
-    },
-    "browser": {
-      "globalVariables": {
-        "TEST": "Test value browser"
-      },
-      "nativeBlockList": [
-        "filesystem.*"
-      ]
-    },
-    "cloud": {
-      "url": "/resources/#cloud",
-      "nativeAllowList": [
-        "app.*"
-      ]
-    },
-    "chrome": {
-      "width": 1280,
-      "height": 720,
-      "args": "--user-agent=\"Neutralinojs chrome mode\"",
-      "nativeBlockList": [
-        "filesystem.*",
-        "os.*"
-      ]
     }
   },
   "cli": {
-    "binaryName": "myapp",
+    "binaryName": "hydro-xcpctools-machine-setup",
     "resourcesPath": "/frontend/",
     "extensionsPath": "/extensions/",
     "binaryVersion": "5.0.0",