From 6ed1cf5bef8d2db98338461423695e974345d986 Mon Sep 17 00:00:00 2001
From: mofeng-git <mofeng654321@hotmail.com>
Date: Wed, 11 Feb 2026 20:45:13 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20HID=E4=B8=B2=E5=8F=A3=E4=BC=98=E5=85=88?=
 =?UTF-8?q?ttyUSB=E5=B9=B6=E5=9C=A8=E8=A7=86=E9=A2=91=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E5=90=8D=E7=A7=B0=E5=90=8E=E6=98=BE=E7=A4=BA=E8=B7=AF=E5=BE=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/api/index.ts                      | 31 ++++++++++++++++++++---
 web/src/components/VideoConfigPopover.vue |  2 +-
 web/src/views/SettingsView.vue            |  2 +-
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/web/src/api/index.ts b/web/src/api/index.ts
index 72c823a6..a2375451 100644
--- a/web/src/api/index.ts
+++ b/web/src/api/index.ts
@@ -537,6 +537,25 @@ export const msdApi = {
     }),
 }
 
+interface SerialDeviceOption {
+  path: string
+  name: string
+}
+
+function getSerialDevicePriority(path: string): number {
+  if (/^\/dev\/ttyUSB/i.test(path)) return 0
+  if (/^\/dev\/(ttyS|S)/i.test(path)) return 2
+  return 1
+}
+
+function sortSerialDevices(serialDevices: SerialDeviceOption[]): SerialDeviceOption[] {
+  return [...serialDevices].sort((a, b) => {
+    const priorityDiff = getSerialDevicePriority(a.path) - getSerialDevicePriority(b.path)
+    if (priorityDiff !== 0) return priorityDiff
+    return a.path.localeCompare(b.path, undefined, { numeric: true, sensitivity: 'base' })
+  })
+}
+
 // Config API
 /** @deprecated 使用域特定 API（videoConfigApi, hidConfigApi 等）替代 */
 export const configApi = {
@@ -549,8 +568,8 @@ export const configApi = {
       body: JSON.stringify(updates),
     }),
 
-  listDevices: () =>
-    request<{
+  listDevices: async () => {
+    const result = await request<{
       video: Array<{
         path: string
         name: string
@@ -578,7 +597,13 @@ export const configApi = {
         ttyd_available: boolean
         rustdesk_available: boolean
       }
-    }>('/devices'),
+    }>('/devices')
+
+    return {
+      ...result,
+      serial: sortSerialDevices(result.serial),
+    }
+  },
 }
 
 // 导出新的域分离配置 API
diff --git a/web/src/components/VideoConfigPopover.vue b/web/src/components/VideoConfigPopover.vue
index 82dec97d..62c82671 100644
--- a/web/src/components/VideoConfigPopover.vue
+++ b/web/src/components/VideoConfigPopover.vue
@@ -753,7 +753,7 @@ watch(currentConfig, () => {
                   :value="device.path"
                   class="text-xs"
                 >
-                  {{ device.name }}
+                  {{ device.name }} ({{ device.path }})
                 </SelectItem>
               </SelectContent>
             </Select>
diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index aab58214..c28613a2 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -1654,7 +1654,7 @@ watch(updateChannel, async () => {
                   <Label for="video-device">{{ t('settings.videoDevice') }}</Label>
                   <select id="video-device" v-model="config.video_device" class="w-full h-9 px-3 rounded-md border border-input bg-background text-sm">
                     <option value="">{{ t('settings.selectDevice') }}</option>
-                    <option v-for="dev in devices.video" :key="dev.path" :value="dev.path">{{ dev.name }}</option>
+                    <option v-for="dev in devices.video" :key="dev.path" :value="dev.path">{{ dev.name }} ({{ dev.path }})</option>
                   </select>
                 </div>
                 <div class="space-y-2">