From e0055bf4919eb55efecc9c35bbba387f4f2e678d Mon Sep 17 00:00:00 2001
From: mofeng-git <mofeng654321@hotmail.com>
Date: Mon, 20 Jul 2026 21:24:27 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=88=A0=E9=99=A4=20nmcli=20=E5=91=BD?=
 =?UTF-8?q?=E4=BB=A4=E7=BC=BA=E5=A4=B1=E5=BC=B9=E7=AA=97=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/api/config.ts          |  2 +-
 web/src/i18n/en-US.ts          |  1 +
 web/src/i18n/zh-CN.ts          |  1 +
 web/src/views/SettingsView.vue | 54 ++++++++++++++++++++++++----------
 4 files changed, 41 insertions(+), 17 deletions(-)

diff --git a/web/src/api/config.ts b/web/src/api/config.ts
index b10994fa..681fbc43 100644
--- a/web/src/api/config.ts
+++ b/web/src/api/config.ts
@@ -115,7 +115,7 @@ export const otgNetworkApi = {
 
   status: () => request<OtgNetworkStatus>('/otg/network/status'),
 
-  interfaces: () => request<NetworkInterfaceInfo[]>('/devices/network'),
+  interfaces: () => request<NetworkInterfaceInfo[]>('/devices/network', {}, { toastOnError: false }),
 }
 
 export const otgConfigApi = {
diff --git a/web/src/i18n/en-US.ts b/web/src/i18n/en-US.ts
index 461d6b01..348554d9 100644
--- a/web/src/i18n/en-US.ts
+++ b/web/src/i18n/en-US.ts
@@ -653,6 +653,7 @@ export default {
     otgNetworkDriver: 'Host Driver Mode',
     otgNetworkInterface: 'Bridge Interface',
     otgNetworkNone: 'None',
+    otgNetworkInterfacesLoadFailed: 'Failed to load bridge interfaces',
     otgDescriptor: 'USB Device Descriptor',
     vendorId: 'Vendor ID (VID)',
     productId: 'Product ID (PID)',
diff --git a/web/src/i18n/zh-CN.ts b/web/src/i18n/zh-CN.ts
index 7d4da3b5..45982f12 100644
--- a/web/src/i18n/zh-CN.ts
+++ b/web/src/i18n/zh-CN.ts
@@ -652,6 +652,7 @@ export default {
     otgNetworkDriver: '目标机驱动模式',
     otgNetworkInterface: '桥接网卡',
     otgNetworkNone: '无',
+    otgNetworkInterfacesLoadFailed: '无法获取桥接网卡列表',
     otgDescriptor: 'USB 设备描述符',
     vendorId: '厂商 ID (VID)',
     productId: '产品 ID (PID)',
diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index 45ec49f0..fc7dcd31 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -269,15 +269,12 @@ async function loadSectionData(section: SettingsSectionId) {
     case 'video':
       await Promise.all([
         loadConfig(),
-        loadDevices(),
+        loadDeviceConfig(),
         loadBackends(),
       ])
       return
     case 'hid':
-      await Promise.all([
-        loadConfig(),
-        loadDevices(),
-      ])
+      await Promise.all([loadConfig(), loadHidDeviceOptions()])
       return
     case 'atx':
       await Promise.all([
@@ -689,6 +686,7 @@ const config = ref({
 
 const otgNetworkInterfaces = ref<NetworkInterfaceInfo[]>([])
 const otgNetworkInterfacesLoaded = ref(false)
+const otgNetworkInterfacesError = ref('')
 const otgNetworkStatus = ref<OtgNetworkStatus | null>(null)
 
 function syncOtgNetworkInterface() {
@@ -1569,20 +1567,30 @@ async function loadConfig() {
   }
 }
 
-async function loadDevices() {
+async function loadDeviceConfig() {
   try {
-    const [deviceConfig, networkInterfaces] = await Promise.all([
-      configApi.listDevices(),
-      otgNetworkApi.interfaces().catch(() => []),
-    ])
-    devices.value = deviceConfig
-    otgNetworkInterfaces.value = networkInterfaces
+    devices.value = await configApi.listDevices()
+  } catch {
+  }
+}
+
+async function loadOtgNetworkInterfaces() {
+  otgNetworkInterfacesError.value = ''
+  try {
+    otgNetworkInterfaces.value = await otgNetworkApi.interfaces()
     otgNetworkInterfacesLoaded.value = true
     syncOtgNetworkInterface()
   } catch {
+    otgNetworkInterfaces.value = []
+    otgNetworkInterfacesLoaded.value = false
+    otgNetworkInterfacesError.value = t('settings.otgNetworkInterfacesLoadFailed')
   }
 }
 
+async function loadHidDeviceOptions() {
+  await Promise.all([loadDeviceConfig(), loadOtgNetworkInterfaces()])
+}
+
 async function loadBackends() {
   try {
     const result = await streamApi.getCodecs()
@@ -2902,7 +2910,7 @@ watch(isWindows, () => {
                   <CardTitle>{{ t('settings.videoSettings') }}</CardTitle>
                   <CardDescription>{{ t('settings.videoSettingsDesc') }}</CardDescription>
                 </div>
-                <Button variant="ghost" size="icon-sm" :aria-label="t('common.refresh')" @click="loadDevices">
+                <Button variant="ghost" size="icon-sm" :aria-label="t('common.refresh')" @click="loadDeviceConfig">
                   <RefreshCw class="size-4" />
                 </Button>
               </CardHeader>
@@ -3041,7 +3049,7 @@ watch(isWindows, () => {
                   <CardTitle>{{ t('settings.hidSettings') }}</CardTitle>
                   <CardDescription>{{ t('settings.hidSettingsDesc') }}</CardDescription>
                 </div>
-                <Button variant="ghost" size="icon-sm" :aria-label="t('common.refresh')" @click="loadDevices">
+                <Button variant="ghost" size="icon-sm" :aria-label="t('common.refresh')" @click="loadHidDeviceOptions">
                   <RefreshCw class="size-4" />
                 </Button>
               </CardHeader>
@@ -3325,8 +3333,22 @@ watch(isWindows, () => {
                             </div>
                             <div class="space-y-2">
                               <Label for="otg-network-interface">{{ t('settings.otgNetworkInterface') }}</Label>
-                              <NativeSelect id="otg-network-interface" v-model="config.otg_network_interface" class="w-full" :disabled="otgNetworkInterfaces.length === 0">
-                                <NativeSelectOption v-if="otgNetworkInterfaces.length === 0" value="">{{ t('settings.otgNetworkNone') }}</NativeSelectOption>
+                              <NativeSelect
+                                id="otg-network-interface"
+                                v-model="config.otg_network_interface"
+                                class="w-full"
+                                :disabled="otgNetworkInterfaces.length === 0"
+                                :aria-invalid="Boolean(otgNetworkInterfacesError)"
+                              >
+                                <NativeSelectOption
+                                  v-if="otgNetworkInterfacesError"
+                                  :value="config.otg_network_interface"
+                                >
+                                  {{ otgNetworkInterfacesError }}
+                                </NativeSelectOption>
+                                <NativeSelectOption v-else-if="otgNetworkInterfaces.length === 0" value="">
+                                  {{ t('settings.otgNetworkNone') }}
+                                </NativeSelectOption>
                                 <NativeSelectOption
                                   v-for="item in otgNetworkInterfaces"
                                   :key="item.name"