串口下拉框去掉电脑自带的 COM1，只留实训台上的 COM2–COM5；展开时每个串口后面用灰字标出接的设备（ADAM-4017+、ADAM-4150、ZigBee 协调器、LED 屏），选中后的值还是 COM2 这样的串口名，和真机一致。项目 5 任务 3 跳过 COM1 的写法照书保留，任务说明补一句；使用说明、设计方案同步；按位置选串口的测试下标跟着改

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/pages/HelpPage.vue

@@ -105,7 +105,7 @@ onBeforeUnmount(() => window.removeEventListener('keydown', onKey))
 
         <h3>5. 虚拟实训台</h3>
         <ul>
-          <li>运行区下面是虚拟实训台，代替书上的实物设备。程序打开的串口：COM2 → ADAM-4017+，COM3 → ADAM-4150，COM4 → ZigBee 协调器，COM5 → LED 屏。</li>
+          <li>运行区下面是虚拟实训台，代替书上的实物设备。程序打开的串口：COM2 → ADAM-4017+，COM3 → ADAM-4150，COM4 → ZigBee 协调器，COM5 → LED 屏。程序里的串口下拉框展开时，每个串口后面也会用灰字标出接的设备。</li>
           <li>拖动滑块（或点一下滑块再按方向键）调温度、湿度、光照；点人体红外、烟雾、火焰、红外对射切换有无。程序控制的灯、警示灯、LED 屏会跟着变化。</li>
           <li>
             两盏照明灯：<b>照明灯 1</b> 接 ZigBee 继电器节点 1（项目 3 的路灯），<b>照明灯 2</b> 接 ADAM-4150 的 DO1（项目 7 的教室、寝室、会议室）；警示灯接

web/src/winforms/ControlView.vue

@@ -58,6 +58,8 @@ const items = computed(() => (p.value.Items as string[] | undefined) ?? [])
 const editable = computed(() => p.value.DropDownStyle !== 'DropDownList')
 const combo = ref<HTMLElement>()
 const listStyle = ref<CSSProperties>({})
+/** 串口列表里每个口后面用灰字标出实训台上接的设备，只是提示，下拉框的值还是 COM2 这样的串口名 */
+const portDevices: Record<string, string> = { COM2: 'ADAM-4017+', COM3: 'ADAM-4150', COM4: 'ZigBee 协调器', COM5: 'LED 屏' }
 
 function openDropDown() {
   if (!enabled.value) return
@@ -73,7 +75,7 @@ function openDropDown() {
   listStyle.value = {
     left: `${rect.left}px`,
     top: `${rect.bottom}px`,
-    width: `${el.offsetWidth}px`,
+    minWidth: `${el.offsetWidth}px`,
     transform: `scale(${rect.width / el.offsetWidth || 1})`,
     font: css.font,
     color: css.color,
@@ -177,7 +179,9 @@ const itemHeight = computed(() => `${(p.value.ItemHeight as number | undefined)
     <span class="wf-combobox-arrow" @mousedown.prevent="openDropDown">▾</span>
     <Teleport to="body">
       <ul v-if="dropDownOpen" class="wf-combobox-list" :style="listStyle">
-        <li v-for="(item, index) in items" :key="index" @mousedown.prevent="selectItem(index)">{{ item }}</li>
+        <li v-for="(item, index) in items" :key="index" @mousedown.prevent="selectItem(index)">
+          {{ item }}<span v-if="portDevices[item]" class="wf-combobox-hint">{{ portDevices[item] }}</span>
+        </li>
         <li v-if="items.length === 0" class="wf-combobox-empty">&nbsp;</li>
       </ul>
     </Teleport>

web/src/winforms/winforms.css

@@ -196,6 +196,13 @@
 
 .wf-combobox-list li {
   padding: 1px 3px;
+  white-space: nowrap;
+}
+
+/* 串口后面的设备名提示：比列表文字淡，悬停变蓝底白字时也看得清 */
+.wf-combobox-hint {
+  margin-left: 1.5em;
+  opacity: 0.55;
 }
 
 .wf-combobox-list li:hover {