machine-setup: move check all to basic info

Author: pandadtdyy

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

@@ -1,28 +1,25 @@
 <template>
-  <n-config-provider :theme="osTheme === 'dark' ? darkTheme : undefined">
-    <n-notification-provider>
-      <provider />
-      <n-grid x-gap="12" :cols="2">
-        <n-gi>
-          <basic-info />
-          <heartbeat-info />
-          <video-info />
-        </n-gi>
-        <n-gi>
-          <system-info />
-          <network-info />
-          <n-card bordered shadow="always">
-            <n-button type="primary" @click="checkAll" style="width: 100%;">完成设备检查</n-button>
-          </n-card>
-        </n-gi>
-      </n-grid>
-    </n-notification-provider>
-  </n-config-provider>
+    <n-config-provider :theme="osTheme === 'dark' ? darkTheme : undefined">
+        <n-notification-provider>
+            <provider />
+            <n-grid x-gap="12" :cols="2">
+                <n-gi>
+                    <basic-info />
+                    <heartbeat-info />
+                    <video-info />
+                </n-gi>
+                <n-gi>
+                    <system-info />
+                    <network-info />
+                </n-gi>
+            </n-grid>
+        </n-notification-provider>
+    </n-config-provider>
 </template>
 
 <script setup lang="ts">
 import { 
-  NGrid, NGi, darkTheme, NConfigProvider, useOsTheme, NButton, NCard, NNotificationProvider,
+  NGrid, NGi, darkTheme, NConfigProvider, useOsTheme, NNotificationProvider,
 } from 'naive-ui';
 import BasicInfo from './components/BasicInfo.vue';
 import HeartbeatInfo from './components/HeartbeatInfo.vue';
@@ -33,7 +30,4 @@ import Provider from './components/Provider.vue';
 
 const osTheme = useOsTheme();
 
-const checkAll = () => {
-  console.log('check all');
-};
 </script>

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

@@ -3,7 +3,7 @@
         <n-gi>
             <n-card bordered shadow="always" style="margin-bottom: .25em;" class="text-center">
                 <h2 style="margin: .5em 0;">@Hydro/XCPC-TOOLS</h2>
-                <h2 style="margin: .5em 0;">Setup Tool</h2>
+                <h1 style="margin: .25em 0;">Setup Tool</h1>
             </n-card>
             <n-card bordered shadow="always">
                 <n-input placeholder="请输入座位号" v-model:value="editSeat" type="text" size="large" style="width: 100%; margin-bottom: .5em;" />
@@ -16,19 +16,27 @@
                     </n-gi>
                 </n-grid>
             </n-card>
-            </n-gi>
-            <n-gi>
+        </n-gi>
+        <n-gi>
+            <n-card bordered shadow="always">
+                <n-popconfirm @positive-click="checkAll">
+                    <template #trigger>
+                        <n-button type="primary" style="width: 100%;">完成设备检查</n-button>
+                    </template>
+                    确认完成设备检查？
+                </n-popconfirm>
+            </n-card>
             <n-card bordered shadow="always" class="text-center">
                 <h1 style="margin: 0;">座位号</h1>
-                <h1 style="font-size: 8em; margin: 0;">{{ nowSeat || '未配置' }}</h1>
+                <h1 style="font-size: 5em; margin: 0;">{{ nowSeat || 'XX-XX' }}</h1>
             </n-card>
         </n-gi>
     </n-grid>
 </template>
 
 <script setup lang="ts">
 import { filesystem, os } from '@neutralinojs/lib';
-import { NCard, NGrid, NGi, NButton, NInput } from 'naive-ui';
+import { NCard, NGrid, NGi, NButton, NInput, NPopconfirm } from 'naive-ui';
 import { onMounted, ref } from 'vue';
 
 const nowSeat = ref('');
@@ -60,6 +68,9 @@ const showSeat = async () => {
     }
 };
 
+const checkAll = () => {
+  console.log('check all');
+};
 
 onMounted(async () => {
     try {

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

@@ -1,7 +1,7 @@
 <template>
     <n-card bordered shadow="always">
         <n-tabs default-value="video" justify-content="space-evenly" type="line" animated>
-            <n-tab-pane name="video" label="摄像头">
+            <n-tab-pane name="video" tab="摄像头">
                 <n-grid x-gap="12" :cols="2">
                     <n-gi>
                         <p>摄像头服务：未启动</p>
@@ -21,7 +21,7 @@
                     </n-gi>
                 </n-grid> 
             </n-tab-pane>
-            <n-tab-pane name="desktop" label="桌面">
+            <n-tab-pane name="desktop" tab="桌面">
                 <n-grid x-gap="12" :cols="2">
                     <n-gi>
                         <p>屏幕捕获服务：未启动</p>

packages/machine-setup/frontend/src/main.ts

@@ -3,13 +3,13 @@ import './style.css';
 import { app, events, init } from '@neutralinojs/lib';
 import {
     create, NButton, NCard, NConfigProvider, NGi, NGrid, NNotificationProvider,
-    NSpace, NStatistic, NTab, NTabPane, NTag,
+    NPopconfirm, NSpace, NStatistic, NTab, NTabPane, NTag,
 } from 'naive-ui';
 import { createApp } from 'vue';
 import App from './App.vue';
 
 const naive = create({
-    components: [NButton, NGrid, NGi, NCard, NStatistic, NSpace, NConfigProvider, NTab, NTabPane, NTag, NNotificationProvider],
+    components: [NButton, NGrid, NGi, NCard, NStatistic, NSpace, NConfigProvider, NTab, NTabPane, NTag, NNotificationProvider, NPopconfirm],
 });
 
 createApp(App).use(naive).mount('#app');