machine-setup: add network config button

Author: pandadtdyy

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

@@ -1,18 +1,33 @@
 <template>
     <n-card bordered title="网络信息" shadow="always">
         <n-grid x-gap="12" :cols="2">
-            <n-gi v-for="info in netInfo" :key="info.dev">
-                <p>{{ info.dev }}/{{ info.mac }}</p>
-                <p>IPV4: {{ info.v4 }}</p>
-                <p>IPV6: {{ info.v6 }}</p>
+            <n-gi>
+                <p v-if="netInfo.length === 0">No network information found.</p>
+                <div style="overflow: auto; height: 220px;">
+                    <template v-for="info in netInfo" :key="info.dev">
+                        <p>{{ info.dev }}/{{ info.mac }}</p>
+                        <p>IPV4: {{ info.v4 }}</p>
+                        <p>IPV6: {{ info.v6 }}</p>
+                    </template>
+                </div>
+            </n-gi>
+            <n-gi>
+                <n-space>
+                    <n-button size="small" type="primary" @click="statusDetect">查看detect-wifi服务</n-button>
+                    <n-button size="small" type="warning" @click="runDetect">自动选择wifi网卡生成默认配置</n-button>
+                    <p>非授权请勿手动设置wifi！</p>
+                    <n-input size="small" v-model:value="ssid" placeholder="ssid" />
+                    <n-input size="small" v-model:value="password" placeholder="password" />
+                    <n-button size="small" type="info" @click="saveConfig">保存</n-button>
+                </n-space>
             </n-gi>
         </n-grid>
-        <p v-if="netInfo.length === 0">No network information found.</p>
     </n-card>
 </template>
 
 <script setup lang="ts">
-import { os } from '@neutralinojs/lib';
+import { filesystem, os } from '@neutralinojs/lib';
+import { NCard, NGrid, NGi, NButton, NInput, NSpace } from 'naive-ui';
 import { onMounted, ref } from 'vue';
 
 const netInfo = ref<any[]>([]);
@@ -23,6 +38,43 @@ declare global {
     }
 }
 
+const statusDetect = async () => {
+    try {
+        const res = await os.execCommand(`systemctl status detect-wireless-interface`);
+        if (res.stdErr) throw new Error(res.stdErr);
+        window.$notification.success({ title: '状态获取成功', content: res.stdOut, duration: 10000 });
+    } catch (error) {
+        console.error(error);
+        window.$notification.error({ title: '状态获取失败', content: (error as any).message, duration: 3000 });
+    }
+};
+
+const runDetect = async () => {
+    try {
+        const config = await filesystem.readFile('/etc/default/wifi-setup');
+        const res = await os.execCommand(`${config.replace(/\\n/g, ' ')} /usr/sbin/detect-wireless-interface`);
+        if (res.stdErr) throw new Error(res.stdErr);
+        window.$notification.success({ title: '自动选择wifi网卡成功', content: res.stdOut, duration: 10000 });
+    } catch (error) {
+        console.error(error);
+        window.$notification.error({ title: '自动选择wifi网卡失败', content: (error as any).message, duration: 3000 });
+    }
+};
+
+const ssid = ref('');
+const password = ref('');
+
+const saveConfig = async () => {
+    try {
+        const res = await os.execCommand(`WIFI_SSID=${ssid.value} WIFI_PASS=${password.value} /usr/sbin/detect-wireless-interface`);
+        if (res.stdErr) throw new Error(res.stdErr);
+        window.$notification.success({ title: '配置保存成功', content: res.stdOut, duration: 3000 });
+    } catch (error) {
+        console.error(error);
+        window.$notification.error({ title: '配置保存失败', content: (error as any).message, duration: 3000 });
+    }
+};
+
 onMounted(async () => {
     try {
         const res = await os.execCommand('ip --json address');

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

@@ -2,14 +2,15 @@ import './style.css';
 
 import { app, events, init } from '@neutralinojs/lib';
 import {
-    create, NButton, NCard, NConfigProvider, NGi, NGrid, NNotificationProvider,
+    create, NButton, NCard, NConfigProvider, NGi, NGrid, NInput,
+    NNotificationProvider,
     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, NPopconfirm],
+    components: [NButton, NGrid, NGi, NCard, NStatistic, NSpace, NConfigProvider, NTab, NTabPane, NTag, NNotificationProvider, NPopconfirm, NInput],
 });
 
 createApp(App).use(naive).mount('#app');