fix(stocktake): 欢迎页可滚动、明细列合并、弹窗备注组件统一

【1. 修小屏按钮被截断】
根因不只是缺 overflow —— .idle-card 用了 justify-content: center，
flex 居中在内容超出容器时会把上下两端**同时裁掉**，这才是按钮只剩一半的原因。
改为：容器 overflow-y: auto + padding-bottom: 40px，居中交给子元素的
margin: auto（不高时正常居中，超高时 auto 塌缩为 0，可完整滚动到顶与底）。

【2. 批次/序列号合并为一列】
「批次 / 序列号」min-width=120，两者都有显示「批次 / SN」，只有一个只显示它，
都没有显示 '-'。

【3. 规格列压缩】min-width=120 → width=100 show-overflow-tooltip，给备注让位。

【4. 录入实盘数量弹窗的备注统一为 el-select】
textarea 换成与明细抽屉完全相同的 filterable allow-create
default-first-option 组件，共用同一份 REMARK_OPTIONS。
保存链路不变：inputRemark → syncToBackend → /draft/add（后端本就存 remark）。

★ 顺带修一个数据正确性 bug：openQtyDialog 从不重置 inputRemark，
  工人扫 A 填了备注后**取消**弹窗，再扫 B 时 A 的备注会残留并可能被写进 B。
  改成下拉选项后这个陷阱更隐蔽（离散值不像 textarea 那样扎眼）。
  现两处开窗分支都先清空 inputRemark。

inventory-web/src/views/stock/stocktake/index.vue

@@ -384,13 +384,18 @@
         <!-- ★ 新增: 备注输入框 -->
         <div class="remark-area" style="margin-top: 15px;">
           <el-form-item label="备注:" label-width="60px">
-            <el-input
+            <!-- 与明细抽屉里的备注组件保持一致：可点选高频原因，也可自行输入 -->
+            <el-select
                 v-model="inputRemark"
-                placeholder="选填，可填写差异原因说明"
-                type="textarea"
-                :rows="2"
+                placeholder="选填，可点选或输入差异原因"
+                filterable
+                allow-create
+                default-first-option
                 clearable
-            />
+                style="width: 100%"
+            >
+              <el-option v-for="opt in REMARK_OPTIONS" :key="opt" :label="opt" :value="opt" />
+            </el-select>
           </el-form-item>
         </div>
       </div>
@@ -446,14 +451,15 @@
             <!-- ★ 刻意不展示 SKU：SKU 是账务口径的物料主键，现场照着它抄数
                  等于把账面信息递给盘点人。改用批次号/序列号做实物辨识。
                  （搜索框仍支持按 SKU 搜，只是列表不直接展示。） -->
-            <el-table-column label="批次号" width="110" show-overflow-tooltip>
-              <template #default="{ row }">{{ row.batch_number || '-' }}</template>
-            </el-table-column>
-            <el-table-column label="序列号" width="130" show-overflow-tooltip>
-              <template #default="{ row }">{{ row.serial_number || '-' }}</template>
+            <!-- 批次号与序列号合并为一列省空间：两者都有则「批次 / SN」，
+                 只有一个则只显示它，都没有显示 '-' -->
+            <el-table-column label="批次 / 序列号" min-width="120" show-overflow-tooltip>
+              <template #default="{ row }">
+                {{ [row.batch_number, row.serial_number].filter(Boolean).join(' / ') || '-' }}
+              </template>
             </el-table-column>
             <el-table-column prop="material_name" label="名称" min-width="120" show-overflow-tooltip />
-            <el-table-column prop="spec_model" label="规格" min-width="120" show-overflow-tooltip />
+            <el-table-column prop="spec_model" label="规格" width="100" show-overflow-tooltip />
             <!-- ★ 库位：找货刚需。固定宽度，超长路径靠 tooltip 看 -->
             <el-table-column prop="warehouse_location" label="库位" width="120" show-overflow-tooltip />
             <!-- ★ 账面数与差异由**后端**按会话 mode 决定是否下发：
@@ -1443,6 +1449,9 @@ const openQtyDialog = async (item: StockItem) => {
       // 用户确认修改 → 预填当前值，弹输入框
       currentItem.value = item
       inputQty.value = existingQty || 1
+      // ★ 每次开窗都清空备注。否则上一次「填了备注又取消」的残留会带到下一个物料，
+      //   确认时被一起写进它的草稿里。
+      inputRemark.value = ''
       showQtyDialog.value = true
       nextTick(() => {
         const inputEl = document.querySelector('.qty-dialog input') as HTMLInputElement
@@ -1456,6 +1465,7 @@ const openQtyDialog = async (item: StockItem) => {
     // 未盘过 → 正常弹输入框
     currentItem.value = item
     inputQty.value = item.scanned ? item.qty_actual : 1
+    inputRemark.value = ''   // 同上：开窗前清空，避免残留到下一个物料
     showQtyDialog.value = true
     nextTick(() => {
       const inputEl = document.querySelector('.qty-dialog input') as HTMLInputElement
@@ -1846,13 +1856,18 @@ const goToVarianceReview = () => {
   flex: 1;
   display: flex;
   flex-direction: column;
-  justify-content: center;
+  /* ★ 刻意不用 justify-content: center —— flex 居中在内容超出容器时会把
+     上下两端**同时裁掉**（经典陷阱），这就是小屏上「开始新盘点」按钮被
+     截掉一半的原因。改由子元素的 margin:auto 居中：内容不超高时正常居中，
+     超高时 auto 塌缩为 0，配合 overflow-y 可完整滚动到顶与底。 */
   align-items: center;
   text-align: center;
   border: none;
   border-radius: 0;
+  overflow-y: auto;
+  padding-bottom: 40px;   /* 底部留白，避免按钮贴着屏幕边缘 */
 }
-.idle-content { width: 100%; max-width: 400px; padding: 20px; }
+.idle-content { width: 100%; max-width: 400px; padding: 20px; margin: auto; }
 /* 抽盘配置区是双栏，窄容器装不下，此时放宽欢迎页 */
 .idle-content.is-wide { max-width: 780px; }
 .app-title { font-size: 24px; margin-bottom: 10px; color: #303133; }