machine-setup: add seat setting

Author: pandadtdyy

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

@@ -1,9 +1,29 @@
 <template>
-  <h1>@Hydro/XCPC-TOOLS Setup-Tool</h1>
+  <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-card bordered shadow="always">
+            <n-input placeholder="请输入座位号"type="text" size="large" style="width: 100%; margin-bottom: .5em;" />
+            <n-space x-gap="12" :cols="2" 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 shadow="always" title="System Info" ></n-card>
+      </n-gi>
+    </n-grid>
+  </n-config-provider>
 </template>
 
 <script setup lang="ts">
+import { 
+  NGrid, NGi, darkTheme, NConfigProvider, useOsTheme, NButton, NCard,
+} from 'naive-ui';
 
+const osTheme = useOsTheme();
 </script>
 
 <style scoped>