From f43a490d6d4f670fa9717c9666c8e104e50e473f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A6=82=E5=88=9D?= <3236758982@qq.com>
Date: Tue, 26 May 2026 17:52:56 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=9D=8E=E7=BA=A2=E6=94=80=EF=BC=9AV2.0?=
 =?UTF-8?q?.063=EF=BC=8C=E5=85=B6=E5=AE=83=E5=85=A5=E5=BA=93=E3=80=81?=
 =?UTF-8?q?=E5=85=B6=E5=AE=83=E5=87=BA=E5=BA=93=E6=89=AB=E7=A0=81=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../scan/components/recent-scan-list.vue      |  149 +++
 .../scan/components/scan-context-bar.vue      |   68 +
 .../scan/components/scan-feedback-bar.vue     |   43 +
 src/pages-erp/stock-in/scan/index.vue         | 1028 ++++++++++-----
 .../scan/components/recent-scan-list.vue      |  156 +++
 .../scan/components/scan-context-bar.vue      |   68 +
 .../scan/components/scan-feedback-bar.vue     |   43 +
 src/pages-erp/stock-out/scan/index.vue        | 1136 ++++++++++++-----
 8 files changed, 2050 insertions(+), 641 deletions(-)
 create mode 100644 src/pages-erp/stock-in/scan/components/recent-scan-list.vue
 create mode 100644 src/pages-erp/stock-in/scan/components/scan-context-bar.vue
 create mode 100644 src/pages-erp/stock-in/scan/components/scan-feedback-bar.vue
 create mode 100644 src/pages-erp/stock-out/scan/components/recent-scan-list.vue
 create mode 100644 src/pages-erp/stock-out/scan/components/scan-context-bar.vue
 create mode 100644 src/pages-erp/stock-out/scan/components/scan-feedback-bar.vue

diff --git a/src/pages-erp/stock-in/scan/components/recent-scan-list.vue b/src/pages-erp/stock-in/scan/components/recent-scan-list.vue
new file mode 100644
index 0000000..4f067d5
--- /dev/null
+++ b/src/pages-erp/stock-in/scan/components/recent-scan-list.vue
@@ -0,0 +1,149 @@
+<template>
+  <view class="recent-scan-list">
+    <view v-if="records.length === 0" class="recent-scan-list__empty">
+      暂无扫码记录，开始扫码入库
+    </view>
+
+    <view
+      v-for="(record, index) in records"
+      :key="record.id || index"
+      class="scan-card"
+      :class="{ 'scan-card--latest': latestIndex === index }"
+    >
+      <view class="scan-card__header">
+        <text class="scan-card__name">{{ record.productName || '-' }}</text>
+        <text class="scan-card__delete" @tap="emit('delete', index)">删除</text>
+      </view>
+
+      <view class="scan-card__meta">
+        <text>条码：{{ record.productBarCode || '-' }}</text>
+        <text>规格：{{ record.productSpec || '-' }}</text>
+      </view>
+      <view class="scan-card__meta">
+        <text>仓库：{{ record.warehouseName || '-' }}</text>
+        <text>单位：{{ record.productUnit || '-' }}</text>
+      </view>
+      <view class="scan-card__meta">
+        <text>库位：{{ record.locationCode || '-' }}</text>
+        <text>批次：{{ record.batchNo || '-' }}</text>
+      </view>
+      <view class="scan-card__footer">
+        <view class="scan-card__count-control">
+          <text class="scan-card__count-btn" @tap="emit('decrease', index)">-</text>
+          <text class="scan-card__count">{{ record.scanCount }}</text>
+          <text class="scan-card__count-btn" @tap="emit('increase', index)">+</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { ScanRecord } from '../index.vue'
+
+defineProps<{
+  records: ScanRecord[]
+  latestIndex?: number
+}>()
+
+const emit = defineEmits<{
+  (event: 'delete', index: number): void
+  (event: 'increase', index: number): void
+  (event: 'decrease', index: number): void
+  (event: 'clear'): void
+}>()
+</script>
+
+<style lang="scss" scoped>
+.recent-scan-list {
+  &__empty {
+    padding: 48rpx;
+    border-radius: 16rpx;
+    background: #fff;
+    color: #86909c;
+    text-align: center;
+    font-size: 26rpx;
+  }
+}
+
+.scan-card {
+  margin-bottom: 16rpx;
+  padding: 24rpx;
+  border: 2rpx solid transparent;
+  border-radius: 16rpx;
+  background: #fff;
+
+  &--latest {
+    border-color: #1677ff;
+    box-shadow: 0 8rpx 20rpx rgba(22, 119, 255, 0.12);
+  }
+
+  &__header,
+  &__meta,
+  &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16rpx;
+  }
+
+  &__header {
+    margin-bottom: 10rpx;
+  }
+
+  &__name {
+    color: #1f2329;
+    font-size: 28rpx;
+    font-weight: 600;
+  }
+
+  &__delete {
+    flex-shrink: 0;
+    color: #f53f3f;
+    font-size: 24rpx;
+  }
+
+  &__meta {
+    margin-top: 6rpx;
+    color: #4e5969;
+    font-size: 22rpx;
+    flex-wrap: wrap;
+  }
+
+  &__footer {
+    margin-top: 10rpx;
+    padding-top: 10rpx;
+    border-top: 2rpx solid #f2f3f5;
+    justify-content: flex-end;
+  }
+
+  &__count-control {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+  }
+
+  &__count-btn {
+    width: 56rpx;
+    height: 56rpx;
+    line-height: 56rpx;
+    text-align: center;
+    border-radius: 12rpx;
+    background: #f2f3f5;
+    color: #1d2129;
+    font-size: 32rpx;
+  }
+
+  &__count {
+    min-width: 72rpx;
+    height: 56rpx;
+    line-height: 56rpx;
+    text-align: center;
+    border-radius: 12rpx;
+    background: #fff7e8;
+    color: #1677ff;
+    font-size: 28rpx;
+    font-weight: 700;
+  }
+}
+</style>
diff --git a/src/pages-erp/stock-in/scan/components/scan-context-bar.vue b/src/pages-erp/stock-in/scan/components/scan-context-bar.vue
new file mode 100644
index 0000000..029f0f8
--- /dev/null
+++ b/src/pages-erp/stock-in/scan/components/scan-context-bar.vue
@@ -0,0 +1,68 @@
+<template>
+  <view class="scan-context-bar">
+    <view class="scan-context-bar__main">
+      <view class="scan-context-bar__warehouse">
+        <text class="scan-context-bar__label">仓库</text>
+        <text class="scan-context-bar__value">{{ warehouseName || '未选择仓库' }}</text>
+      </view>
+      <view class="scan-context-bar__stats">
+        <text>明细 {{ recordCount }} 条</text>
+        <text>累计 {{ scannedCount }} 件</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  warehouseName?: string
+  scannedCount: number
+  recordCount: number
+}>()
+</script>
+
+<style lang="scss" scoped>
+.scan-context-bar {
+  padding: 20rpx 24rpx;
+  border-radius: 16rpx;
+  background: #fff;
+  margin-bottom: 16rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
+
+  &__main {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16rpx;
+  }
+
+  &__warehouse {
+    display: flex;
+    align-items: center;
+    gap: 12rpx;
+    min-width: 0;
+    flex: 1;
+  }
+
+  &__label {
+    flex-shrink: 0;
+    color: #86909c;
+    font-size: 24rpx;
+  }
+
+  &__value {
+    color: #1f2329;
+    font-size: 28rpx;
+    font-weight: 600;
+  }
+
+  &__stats {
+    display: flex;
+    gap: 20rpx;
+    flex-shrink: 0;
+    color: #1677ff;
+    font-size: 24rpx;
+    font-weight: 600;
+  }
+}
+</style>
diff --git a/src/pages-erp/stock-in/scan/components/scan-feedback-bar.vue b/src/pages-erp/stock-in/scan/components/scan-feedback-bar.vue
new file mode 100644
index 0000000..ff15817
--- /dev/null
+++ b/src/pages-erp/stock-in/scan/components/scan-feedback-bar.vue
@@ -0,0 +1,43 @@
+<template>
+  <view v-if="message" class="feedback-bar" :class="`feedback-bar--${tone}`">
+    {{ message }}
+  </view>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    tone?: 'success' | 'error' | 'idle'
+    message?: string
+  }>(),
+  {
+    tone: 'idle',
+    message: '',
+  },
+)
+</script>
+
+<style lang="scss" scoped>
+.feedback-bar {
+  min-height: 76rpx;
+  padding: 18rpx 24rpx;
+  border-radius: 14rpx;
+  font-size: 24rpx;
+  line-height: 40rpx;
+
+  &--idle {
+    background: #f2f3f5;
+    color: #4e5969;
+  }
+
+  &--success {
+    background: #f6ffed;
+    color: #389e0d;
+  }
+
+  &--error {
+    background: #fff2f0;
+    color: #cf1322;
+  }
+}
+</style>
diff --git a/src/pages-erp/stock-in/scan/index.vue b/src/pages-erp/stock-in/scan/index.vue
index 9f265d3..a9b6342 100644
--- a/src/pages-erp/stock-in/scan/index.vue
+++ b/src/pages-erp/stock-in/scan/index.vue
@@ -10,68 +10,162 @@
     />
 
     <view class="scan-page__content">
-      <view class="scan-section">
-        <view class="scan-section__title">
-          单据信息
-        </view>
-        <picker :range="warehouses" range-key="name" :value="selectedWarehouseIndex" @change="handleWarehouseChange">
-          <view class="scan-field">
-            {{ currentWarehouse?.name || '请选择入库仓库' }}
+      <!-- 顶部上下文条 -->
+      <ScanContextBar
+        :warehouse-name="locationInfo?.warehouseName"
+        :scanned-count="scannedTotalCount"
+        :record-count="records.length"
+      />
+
+      <!-- 扫码工作台 -->
+      <view class="scan-workbench">
+        <!-- 当前扫码上下文提示 -->
+        <view class="scan-panel">
+          <!-- 步骤指示器：库位 → 产品 -->
+          <view class="scan-step-indicator">
+            <view class="scan-step-indicator__item" :class="{ 'active': step === 'idle', 'done': step !== 'idle' }">
+              <view class="scan-step-indicator__dot">1</view>
+              <text>扫库位</text>
+            </view>
+            <view class="scan-step-indicator__line" :class="{ 'done': step !== 'idle' }" />
+            <view class="scan-step-indicator__item" :class="{ 'active': step === 'scanned' }">
+              <view class="scan-step-indicator__dot">2</view>
+              <text>扫产品</text>
+            </view>
           </view>
-        </picker>
-        <picker :range="suppliers" range-key="name" :value="selectedSupplierIndex" @change="handleSupplierChange">
-          <view class="scan-field">
-            {{ currentSupplierName }}
+
+          <!-- 当前作业提示 -->
+          <view class="scan-current-hint">
+            <text v-if="step === 'idle'">请扫描库位条码</text>
+            <text v-else>产品已入库，请继续扫码</text>
           </view>
-        </picker>
-        <input v-model="remark" class="scan-field" placeholder="请输入备注">
-      </view>
 
-      <view class="scan-section">
-        <view class="scan-section__title">
-          扫码录入
+          <!-- 库位扫码区 -->
+          <view class="scan-row" :class="{ 'scan-row--dim': step !== 'idle' }">
+            <input
+              v-model="locationCode"
+              class="scan-field"
+              :class="{ 'scan-field--active': step === 'idle' }"
+              placeholder="扫描库位条码"
+              confirm-type="next"
+              :focus="locationInputFocus"
+              :cursor-spacing="20"
+              :adjust-position="true"
+              :hold-keyboard="true"
+              @blur="handleLocationBlur"
+              @confirm="handleLocationScan"
+            >
+            <button class="scan-camera-btn" :disabled="scanLoading" @tap="handleCameraScan('location')">
+              拍
+            </button>
+          </view>
+
+          <!-- 库位预览（扫库位码后显示） -->
+          <view class="scan-location-preview" v-if="locationInfo">
+            <view class="scan-location-preview__row">
+              <text class="scan-location-preview__label">仓库</text>
+              <text class="scan-location-preview__value">{{ locationInfo.warehouseName }}</text>
+            </view>
+            <view class="scan-location-preview__row">
+              <text class="scan-location-preview__label">库位</text>
+              <text class="scan-location-preview__value scan-location-preview__value--code">
+                {{ locationInfo.locationCode }}
+              </text>
+              <text class="scan-location-preview__badge" :class="locationInfo.enableLocation ? 'badge--green' : 'badge--gray'">
+                {{ locationInfo.enableLocation ? '库位管理' : '无库位管理' }}
+              </text>
+            </view>
+          </view>
+
+          <!-- 产品扫码区 -->
+          <view class="scan-row" :class="{ 'scan-row--dim': step === 'idle' }">
+            <input
+              v-model="productBarCode"
+              class="scan-field"
+              :class="{ 'scan-field--active': step === 'scanned' }"
+              placeholder="扫描产品条码"
+              confirm-type="done"
+              :focus="productInputFocus"
+              :cursor-spacing="20"
+              :adjust-position="true"
+              :hold-keyboard="true"
+              @blur="handleProductBlur"
+              @confirm="handleProductScan"
+            >
+            <button class="scan-camera-btn" :disabled="scanLoading" @tap="handleCameraScan('product')">
+              拍
+            </button>
+          </view>
+
+          <!-- 产品预览（扫产品码后显示） -->
+          <view class="scan-product-preview" v-if="productPreview">
+            <view class="scan-product-preview__row">
+              <text class="scan-product-preview__label">产品</text>
+              <text class="scan-product-preview__value scan-product-preview__value--name">
+                {{ productPreview.name }}
+              </text>
+            </view>
+            <view class="scan-product-preview__row">
+              <text class="scan-product-preview__label">规格</text>
+              <text class="scan-product-preview__value">{{ productPreview.standard || '-' }}</text>
+            </view>
+            <view class="scan-product-preview__row">
+              <text class="scan-product-preview__label">条码</text>
+              <text class="scan-product-preview__value">{{ productPreview.barCode || '-' }}</text>
+            </view>
+          </view>
+
+          <ScanFeedbackBar :tone="feedbackTone" :message="feedbackMessage" />
         </view>
-        <input v-model="batchNo" class="scan-field" placeholder="请输入或扫描批次号（可选）">
-        <input v-model="locationCode" class="scan-field" placeholder="请输入或扫描库位码（可选）">
-        <ScanInput
-          v-model="scanCode"
-          placeholder="请先选择仓库，再扫描产品条码"
-          :loading="scanLoading"
-          :auto-focus="false"
-          @submit="handleScanSubmit"
-          @camera-scan="handleCameraScan"
-        />
-      </view>
 
-      <view class="scan-section">
-        <view class="scan-section__title">
-          入库明细
+        <!-- 扫码记录列表 -->
+        <view class="scan-panel scan-panel--list">
+          <view class="scan-panel__header">
+            <view class="scan-panel__title">
+              扫码记录
+            </view>
+            <view class="scan-panel__meta">
+              共 {{ records.length }} 条
+            </view>
+          </view>
+          <RecentScanList
+            :records="records"
+            :latest-index="latestRecordIndex"
+            @delete="handleDeleteRecord"
+            @increase="handleIncreaseCount"
+            @decrease="handleDecreaseCount"
+          />
         </view>
-        <ItemList :items="items" @increase="increaseCount" @decrease="decreaseCount" @remove="removeItem" />
-      </view>
 
-      <SubmitBar :loading="submitting" submit-text="提交其它入库" @submit="handleSubmit" @secondary="clearItems" />
+        <!-- 提交栏 -->
+        <view class="scan-footer">
+          <button class="scan-footer__clear" @tap="handleClearAll">
+            清空记录
+          </button>
+          <button class="scan-footer__submit" :loading="submitting" @tap="handleSubmit">
+            提交其它入库
+          </button>
+        </view>
+      </view>
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
 import type { ProductByBarCode } from '@/api/erp/product'
+import type { LocationByCodeVO } from '@/api/erp/location'
 import type { StockIn, StockInItem } from '@/api/erp/stock-in'
-import type { Warehouse } from '@/api/erp/warehouse'
-import type { ItemCardValue } from '@/components/erp-scan/item-list.vue'
 
-import { computed, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref } from 'vue'
 import { useToast } from 'wot-design-uni'
 import { getProductByBarCode } from '@/api/erp/product'
+import { getLocationByCode } from '@/api/erp/location'
 import { createStockIn } from '@/api/erp/stock-in'
-import { getSupplierSimpleList } from '@/api/erp/supplier'
-import { getWarehouseSimpleList } from '@/api/erp/warehouse'
-import ItemList from '@/components/erp-scan/item-list.vue'
-import ScanInput from '@/components/erp-scan/scan-input.vue'
-import SubmitBar from '@/components/erp-scan/submit-bar.vue'
+import ScanFeedbackBar from '@/pages-erp/stock-in/scan/components/scan-feedback-bar.vue'
+import RecentScanList from '@/pages-erp/stock-in/scan/components/recent-scan-list.vue'
+import ScanContextBar from '@/pages-erp/stock-in/scan/components/scan-context-bar.vue'
 import { navigateBackPlus } from '@/utils'
-import { buildScanMergeKey, normalizeCameraScanResult, normalizeScanCode } from '@/utils/scan'
+import { normalizeCameraScanResult, normalizeScanCode } from '@/utils/scan'
 
 definePage({
   style: {
@@ -80,356 +174,702 @@ definePage({
   },
 })
 
-interface StockInScanItem extends ItemCardValue {
-  remark?: string
+/** 扫码入库记录 */
+export interface ScanRecord {
+  id?: number
+  productId?: number
+  productName?: string
+  productSpec?: string
+  productBarCode?: string
+  productUnit?: string
+  productPrice?: number
+  warehouseId?: number
+  warehouseName?: string
+  locationCode?: string
+  batchNo?: string
+  scanCount: number
+  scanTime?: string
 }
 
-interface OptionalSupplierOption {
-  id?: number
-  name: string
-}
+type Step = 'idle' | 'scanned'
 
 const toast = useToast()
-const scanCode = ref('')
+
+// 扫码步骤
+const step = ref<Step>('idle')
+
+// 扫码数据
+const locationCode = ref('')
+const locationInfo = ref<LocationByCodeVO | null>(null)
+const productBarCode = ref('')
+const productPreview = ref<ProductByBarCode | null>(null)
+
+// 状态
 const scanLoading = ref(false)
 const submitting = ref(false)
-const remark = ref('')
-const warehouses = ref<Warehouse[]>([])
-const suppliers = ref<OptionalSupplierOption[]>([])
-const selectedWarehouseId = ref<number>()
-const selectedSupplierId = ref<number>()
-const items = ref<StockInScanItem[]>([])
-const batchNo = ref('')
-const locationCode = ref('')
+const records = ref<ScanRecord[]>([])
+const feedbackTone = ref<'success' | 'error' | 'idle'>('idle')
+const feedbackMessage = ref('')
 
-const EMPTY_SUPPLIER_OPTION: OptionalSupplierOption = {
-  id: undefined,
-  name: '不选择供应商（可选）',
-}
+// 输入框焦点控制
+const locationInputFocus = ref(false)
+const productInputFocus = ref(false)
 
-const currentWarehouse = computed(() =>
-  warehouses.value.find(item => item.id === selectedWarehouseId.value),
-)
-const currentSupplierName = computed(() => suppliers.value.find(item => item.id === selectedSupplierId.value)?.name || EMPTY_SUPPLIER_OPTION.name)
-const selectedWarehouseIndex = computed(() => Math.max(warehouses.value.findIndex(item => item.id === selectedWarehouseId.value), 0))
-const selectedSupplierIndex = computed(() => {
-  const index = suppliers.value.findIndex(item => item.id === selectedSupplierId.value)
-  return index < 0 ? 0 : index
+// 计算属性
+const canConfirm = computed(() => {
+  return locationInfo.value?.warehouseId && productPreview.value?.id && scanLoading.value === false
 })
 
-/**
- * 功能说明：返回上一页，若没有上一级页面则回到其它入库列表页。
- * 适用场景：用户从快捷页返回库存业务列表。
- * @return 无
- * 注意事项：使用增强返回逻辑，避免页面栈为空时返回失败。
- */
+const scannedTotalCount = computed(() =>
+  records.value.reduce((sum, r) => sum + Number(r.scanCount || 0), 0),
+)
+
+const latestRecordIndex = computed(() => {
+  if (records.value.length === 0) return undefined
+  return records.value.length - 1
+})
+
+/** 返回上一页 */
 function handleBack() {
   navigateBackPlus('/pages-erp/stock-in/index')
 }
 
-/**
- * 功能说明：加载扫码其它入库页依赖的基础下拉数据。
- * 适用场景：页面首次进入时准备仓库和供应商数据。
- * @return 无
- * 注意事项：默认仓库优先取系统默认仓库，减少仓库人员开始作业前的额外点击。
- */
-async function loadInitialData() {
-  const [warehouseList, supplierList] = await Promise.all([
-    getWarehouseSimpleList(),
-    getSupplierSimpleList(),
-  ])
+/** 初始化页面 */
+onMounted(async () => {
+  // PDA 扫码枪需要输入框自动获得焦点，延迟确保页面完全渲染
+  await nextTick()
+  setTimeout(() => {
+    focusLocationInput()
+  }, 500)
+})
 
-  warehouses.value = warehouseList
-  suppliers.value = [EMPTY_SUPPLIER_OPTION, ...supplierList]
-  selectedWarehouseId.value = warehouseList.find(item => item.defaultStatus)?.id || warehouseList[0]?.id
+const ERROR_DISPLAY_MS = 2000
+
+/** 重置到初始状态 */
+function resetToIdle() {
+  clearScanInputs()
+  locationInfo.value = null
+  productPreview.value = null
+  step.value = 'idle'
+  setTimeout(() => {
+    clearFeedback()
+    focusLocationInput()
+  }, ERROR_DISPLAY_MS)
 }
 
-/**
- * 功能说明：切换当前入库仓库。
- * 适用场景：操作员选择本次扫码作业仓库。
- * @param event picker 事件
- * @return 无
- * 注意事项：已录入明细不会被自动改仓，避免把历史扫码明细误迁到新仓库。
- */
-function handleWarehouseChange(event: Record<string, any>) {
-  const warehouse = warehouses.value[Number(event.detail.value)]
-  selectedWarehouseId.value = warehouse?.id
+/** 停留在产品扫码阶段 + 聚焦产品输入框（扫产品失败用） */
+function resetToProductScan() {
+  productBarCode.value = ''
+  productPreview.value = null
+  setTimeout(() => {
+    clearFeedback()
+    focusProductInput()
+  }, ERROR_DISPLAY_MS)
 }
 
-/**
- * 功能说明：切换当前供应商。
- * 适用场景：其它入库单头维护可选供应商。
- * @param event picker 事件
- * @return 无
- * 注意事项：供应商当前不是强校验项，因此仅在存在时传给后端。
- */
-function handleSupplierChange(event: Record<string, any>) {
-  const supplier = suppliers.value[Number(event.detail.value)]
-  selectedSupplierId.value = supplier?.id
-}
-
-/**
- * 功能说明：把扫码命中的产品合并到当前入库明细。
- * 适用场景：扫码枪连续扫到同一产品时自动累计数量。
- * @param product 条码命中的产品
- * @return 无
- * 注意事项：重复扫码按“仓库 + 产品”合并，避免同一产品刷出多行影响 PDA 作业效率。
- */
-function appendScannedProduct(product: ProductByBarCode) {
-  const warehouseId = selectedWarehouseId.value as number
-  const currentBatchNo = batchNo.value.trim()
-  const currentLocationCode = locationCode.value.trim()
-  const targetKey = buildScanMergeKey({
-    warehouseId,
-    productId: product.id,
-    count: 1,
-    batchNo: currentBatchNo,
-    locationCode: currentLocationCode,
-  }, true)
-  const existedIndex = items.value.findIndex(item => buildScanMergeKey({
-    warehouseId: item.warehouseId,
-    productId: item.productId,
-    count: item.count,
-    batchNo: item.batchNo,
-    locationCode: item.locationCode,
-  }, true) === targetKey)
-
-  if (existedIndex >= 0) {
-    items.value[existedIndex].count += 1
-    return
-  }
-
-  items.value.unshift({
-    warehouseId,
-    warehouseName: currentWarehouse.value?.name,
-    productId: product.id,
-    productName: product.name,
-    productBarCode: product.barCode,
-    productSpec: product.standard,
-    productUnitName: product.unitName,
-    productPrice: Number(product.minPrice || 0),
-    batchNo: currentBatchNo,
-    locationCode: currentLocationCode,
-    count: 1,
+/** 聚焦库位码输入框 */
+function focusLocationInput() {
+  productInputFocus.value = false
+  locationInputFocus.value = false
+  nextTick(() => {
+    locationInputFocus.value = true
   })
 }
 
+/** 库位输入框失焦处理 - 如果当前步骤是 idle，自动重新聚焦 */
+function handleLocationBlur() {
+  if (step.value === 'idle' && !scanLoading.value) {
+    setTimeout(() => {
+      if (step.value === 'idle') {
+        focusLocationInput()
+      }
+    }, 100)
+  }
+}
+
+/** 产品输入框失焦处理 - 如果当前步骤是 scanned，自动重新聚焦 */
+function handleProductBlur() {
+  if (step.value === 'scanned' && !scanLoading.value) {
+    setTimeout(() => {
+      if (step.value === 'scanned') {
+        focusProductInput()
+      }
+    }, 100)
+  }
+}
+
 /**
- * 功能说明：处理扫码提交。
- * 适用场景：扫码枪回车或用户点击确认按钮。
- * @param sourceCode 可选的外部条码输入值
- * @return 无
- * 注意事项：未选择仓库时直接拦截，避免条码产品被录入到错误仓库上下文。
+ * 扫库位码：自动反查仓库信息
  */
-async function handleScanSubmit(sourceCode?: string) {
-  if (scanLoading.value) {
-    return
-  }
-
-  if (!selectedWarehouseId.value) {
-    toast.error('请先选择仓库')
-    return
-  }
-
-  const barCode = normalizeScanCode(sourceCode ?? scanCode.value)
-  if (!barCode) {
-    toast.error('请先扫描条码')
+async function handleLocationScan() {
+  const code = normalizeScanCode(locationCode.value)
+  if (!code) {
+    setErrorFeedback('请先扫描库位条码')
     return
   }
 
   scanLoading.value = true
   try {
-    const product = await getProductByBarCode(barCode)
-    if (!product?.id) {
-      toast.error('未匹配到启用中的产品')
+    try {
+      locationInfo.value = await getLocationByCode(code)
+    } catch {
+      setErrorFeedback(`库位码 ${code} 不存在`)
+      resetToIdle()
       return
     }
 
-    appendScannedProduct(product)
-    scanCode.value = ''
+    if (!locationInfo.value?.warehouseId) {
+      setErrorFeedback(`库位码 ${code} 未找到对应仓库`)
+      resetToIdle()
+      return
+    }
+
+    locationCode.value = code
+    step.value = 'scanned'
+    productBarCode.value = ''
+    productPreview.value = null
+    clearFeedback()
+
+    // 聚焦产品输入框，等待扫码枪输入
+    focusProductInput()
+  } finally {
+    scanLoading.value = false
+  }
+}
+
+/** 聚焦产品码输入框 */
+function focusProductInput() {
+  locationInputFocus.value = false
+  productInputFocus.value = false
+  nextTick(() => {
+    productInputFocus.value = true
+  })
+}
+
+/**
+ * 扫产品码：自动反查产品信息
+ */
+async function handleProductScan() {
+  const code = normalizeScanCode(productBarCode.value)
+  if (!code) {
+    setErrorFeedback('请先扫描产品条码')
+    return
+  }
+
+  if (!locationInfo.value) {
+    setErrorFeedback('请先扫描库位条码')
+    step.value = 'idle'
+    return
+  }
+
+  scanLoading.value = true
+  try {
+    try {
+      productPreview.value = await getProductByBarCode(code)
+    } catch {
+      setErrorFeedback(`条码 ${code} 未匹配到产品`)
+      resetToProductScan()
+      return
+    }
+
+    if (!productPreview.value?.id) {
+      setErrorFeedback(`条码 ${code} 未匹配到产品`)
+      resetToProductScan()
+      return
+    }
+
+    productBarCode.value = code
+    step.value = 'scanned'
+    clearFeedback()
+    // 自动确认入库
+    nextTick(() => handleConfirm())
   } finally {
     scanLoading.value = false
   }
 }
 
 /**
- * 功能说明：触发相机扫码，并将结果接入现有扫码录入流程。
- * 适用场景：普通手机没有外接扫码枪时，通过摄像头录入条码。
- * @return 无
- * 注意事项：扫码取消应静默返回，不应污染当前输入框内容或产生误报。
+ * 确认入库：将扫码记录添加到列表
  */
-function handleCameraScan() {
-  if (scanLoading.value) {
-    return
-  }
+async function handleConfirm() {
+  if (!canConfirm.value) return
 
+  scanLoading.value = true
+  try {
+    // 检查是否已存在相同的记录（仓库+产品+库位），如果存在则累加数量
+    const existingIndex = records.value.findIndex(r =>
+      r.warehouseId === locationInfo.value!.warehouseId &&
+      r.productId === productPreview.value!.id &&
+      r.locationCode === locationInfo.value!.locationCode
+    )
+
+    if (existingIndex >= 0) {
+      // 累加数量
+      records.value[existingIndex].scanCount += 1
+    } else {
+      // 新增记录
+      const record: ScanRecord = {
+        id: Date.now(),
+        productId: productPreview.value!.id,
+        productName: productPreview.value!.name,
+        productSpec: productPreview.value!.standard,
+        productBarCode: productPreview.value!.barCode,
+        productUnit: productPreview.value!.unitName,
+        productPrice: Number(productPreview.value!.minPrice || 0),
+        warehouseId: locationInfo.value!.warehouseId,
+        warehouseName: locationInfo.value!.warehouseName,
+        locationCode: locationInfo.value!.locationCode,
+        scanCount: 1,
+        scanTime: new Date().toISOString(),
+      }
+      records.value.push(record)
+    }
+
+    // 重置，准备下一次扫码
+    const productName = productPreview.value!.name
+    const locationCodeText = locationInfo.value!.locationCode
+    clearScanInputs()
+    step.value = 'idle'
+    setSuccessFeedback(`${productName} → ${locationCodeText} 入库成功`)
+
+    await nextTick()
+    // 聚焦库位输入框，等待扫码枪输入
+    focusLocationInput()
+  } finally {
+    scanLoading.value = false
+  }
+}
+
+/** 相机扫码 */
+function handleCameraScan(target: 'location' | 'product') {
+  if (scanLoading.value) return
+
+  // #ifdef APP-PLUS
+  // Android 运行时权限检查
+  plus.android.requestPermissions(
+    ['android.permission.CAMERA'],
+    function(result) {
+      const granted = result.granted
+      if (granted && granted.length > 0) {
+        doScan(target)
+      } else {
+        toast.error('请在设置中开启相机权限')
+        uni.openSetting()
+      }
+    },
+    function() {
+      toast.error('相机权限获取失败')
+    },
+  )
+  // #endif
+
+  // #ifndef APP-PLUS
+  doScan(target)
+  // #endif
+}
+
+function doScan(target: 'location' | 'product') {
   uni.scanCode({
     onlyFromCamera: true,
     success: async (result) => {
-      const barCode = normalizeCameraScanResult(result)
-      if (!barCode) {
-        return
-      }
+      const code = normalizeCameraScanResult(result)
+      if (!code) return
 
-      scanCode.value = barCode
-      await handleScanSubmit(barCode)
+      if (target === 'location') {
+        locationCode.value = code
+        await handleLocationScan()
+      } else {
+        productBarCode.value = code
+        await handleProductScan()
+      }
     },
     fail: (error) => {
-      // 用户主动取消扫码不属于异常流程，这里静默返回，避免产生干扰提示。
-      if (String(error?.errMsg || '').includes('cancel')) {
-        return
-      }
-
+      if (String(error?.errMsg || '').includes('cancel')) return
       toast.error('相机扫码失败，请重试')
     },
   })
 }
 
-/**
- * 功能说明：增加指定明细数量。
- * 适用场景：扫码后人工补正入库数量。
- * @param index 明细下标
- * @return 无
- * 注意事项：其它入库不需要前端库存拦截，只做数量累加。
- */
-function increaseCount(index: number) {
-  items.value[index].count += 1
+/** 删除单条记录 */
+function handleDeleteRecord(index: number) {
+  records.value.splice(index, 1)
 }
 
-/**
- * 功能说明：减少指定明细数量。
- * 适用场景：误扫后人工回退数量。
- * @param index 明细下标
- * @return 无
- * 注意事项：数量最低保留 1，避免留下 0 数量脏明细。
- */
-function decreaseCount(index: number) {
-  if (items.value[index].count <= 1) {
-    return
+/** 增加数量 */
+function handleIncreaseCount(index: number) {
+  if (records.value[index]) {
+    records.value[index].scanCount += 1
   }
-
-  items.value[index].count -= 1
 }
 
-/**
- * 功能说明：删除指定明细。
- * 适用场景：误扫错误产品后移除整行。
- * @param index 明细下标
- * @return 无
- * 注意事项：这里只删除当前行，不联动其他已录入产品。
- */
-function removeItem(index: number) {
-  items.value.splice(index, 1)
+/** 减少数量 */
+function handleDecreaseCount(index: number) {
+  if (records.value[index] && records.value[index].scanCount > 1) {
+    records.value[index].scanCount -= 1
+  }
 }
 
-/**
- * 功能说明：清空当前录入明细。
- * 适用场景：整单作废后重新扫码。
- * @return 无
- * 注意事项：清空后保留当前仓库和供应商上下文，避免重新开始时重复选择。
- */
-function clearItems() {
-  items.value = []
+/** 清空所有记录 */
+function handleClearAll() {
+  if (records.value.length === 0) return
+  uni.showModal({
+    title: '确认清空',
+    content: '确定要清空所有扫码记录吗？',
+    success: (res) => {
+      if (!res.confirm) return
+      records.value = []
+      clearFeedback()
+    },
+  })
 }
 
-/**
- * 功能说明：将页面明细转换成其它入库接口需要的明细结构。
- * 适用场景：提交前组装请求体。
- * @return 其它入库明细数组
- * 注意事项：这里只保留后端真正需要的字段，避免把展示字段一并带入接口契约。
- */
-function buildSubmitItems(): StockInItem[] {
-  return items.value.map(item => ({
-    warehouseId: item.warehouseId,
-    locationCode: item.locationCode,
-    productId: item.productId,
-    productPrice: item.productPrice,
-    batchNo: item.batchNo,
-    count: item.count,
-    remark: item.remark,
-  }))
-}
-
-/**
- * 功能说明：提交扫码其它入库单。
- * 适用场景：扫码录入完成后生成正式其它入库单。
- * @return 无
- * 注意事项：提交失败时保留当前录入数据，方便用户修正后重试。
- */
+/** 提交其它入库单 */
 async function handleSubmit() {
-  if (submitting.value) {
-    return
-  }
-
-  if (items.value.length === 0) {
-    toast.error('请先扫描入库明细')
+  if (records.value.length === 0) {
+    toast.warning('暂无扫码记录')
     return
   }
 
   submitting.value = true
   try {
+    // 构建入库明细
+    const items: StockInItem[] = records.value.map(r => ({
+      warehouseId: r.warehouseId,
+      locationCode: r.locationCode,
+      productId: r.productId,
+      productPrice: r.productPrice,
+      count: r.scanCount,
+    }))
+
     const payload: StockIn = {
+      supplierId: 1, // 默认供应商
       inTime: new Date().toISOString(),
-      remark: remark.value,
-      items: buildSubmitItems(),
-    }
-    if (selectedSupplierId.value !== undefined) {
-      payload.supplierId = selectedSupplierId.value
+      items,
     }
 
     await createStockIn(payload)
-    toast.success('入库成功')
-    clearItems()
-    remark.value = ''
-    batchNo.value = ''
-    locationCode.value = ''
+    toast.success(`已提交 ${records.value.length} 条入库记录`)
+    records.value = []
+    clearFeedback()
   } finally {
     submitting.value = false
   }
 }
 
-/**
- * 功能说明：初始化扫码其它入库页。
- * 适用场景：页面首次挂载时准备基础数据。
- * @return 无
- * 注意事项：初始化失败时由请求封装统一提示，这里不额外重复 toast。
- */
-onMounted(async () => {
-  await loadInitialData()
-})
+/** 清空本次扫码输入 */
+function clearScanInputs() {
+  locationCode.value = ''
+  locationInfo.value = null
+  productBarCode.value = ''
+  productPreview.value = null
+}
+
+function setSuccessFeedback(message: string) {
+  feedbackTone.value = 'success'
+  feedbackMessage.value = message
+}
+
+function setErrorFeedback(message: string) {
+  feedbackTone.value = 'error'
+  feedbackMessage.value = message
+}
+
+function clearFeedback() {
+  feedbackTone.value = 'idle'
+  feedbackMessage.value = ''
+}
 </script>
 
 <style lang="scss" scoped>
 .scan-page {
   background: #f4f6f8;
+  min-height: 100vh;
 
   &__content {
     padding: 24rpx;
+    padding-top: calc(24rpx + env(safe-area-inset-top) + 88rpx);
+    box-sizing: border-box;
   }
 }
 
-.scan-section {
-  margin-bottom: 24rpx;
+.scan-workbench {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.scan-panel {
   padding: 24rpx;
-  border-radius: 20rpx;
+  border-radius: 18rpx;
   background: #fff;
 
+  &--list {
+    padding-bottom: 8rpx;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16rpx;
+    margin-bottom: 16rpx;
+  }
+
   &__title {
-    margin-bottom: 20rpx;
-    font-size: 30rpx;
-    font-weight: 600;
     color: #1f2329;
+    font-size: 28rpx;
+    font-weight: 600;
+  }
+
+  &__meta {
+    color: #86909c;
+    font-size: 22rpx;
+  }
+}
+
+// 步骤指示器
+.scan-step-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 24rpx;
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8rpx;
+
+    text {
+      font-size: 22rpx;
+      color: #86909c;
+    }
+
+    &.active text {
+      color: #1677ff;
+      font-weight: 600;
+    }
+
+    &.done text {
+      color: #52c41a;
+    }
+  }
+
+  &__dot {
+    width: 48rpx;
+    height: 48rpx;
+    line-height: 48rpx;
+    border-radius: 50%;
+    background: #f2f3f5;
+    color: #86909c;
+    font-size: 24rpx;
+    font-weight: 600;
+    text-align: center;
+  }
+
+  &__item.active &__dot {
+    background: #1677ff;
+    color: #fff;
+  }
+
+  &__item.done &__dot {
+    background: #52c41a;
+    color: #fff;
+  }
+
+  &__line {
+    flex: 1;
+    height: 2rpx;
+    background: #e5e6eb;
+    margin: 0 12rpx;
+    margin-bottom: 28rpx;
+    max-width: 80rpx;
+
+    &.done {
+      background: #52c41a;
+    }
+  }
+}
+
+// 当前作业提示
+.scan-current-hint {
+  text-align: center;
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #1f2329;
+  margin-bottom: 20rpx;
+}
+
+// 输入行
+.scan-row {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  margin-bottom: 16rpx;
+  transition: opacity 0.2s;
+
+  &--dim {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
+  .scan-field {
+    flex: 1;
   }
 }
 
 .scan-field {
-  height: 84rpx;
-  margin-bottom: 16rpx;
+  height: 88rpx;
   padding: 0 24rpx;
-  line-height: 84rpx;
+  line-height: 88rpx;
   border: 2rpx solid #e5e6eb;
-  border-radius: 12rpx;
+  border-radius: 14rpx;
   background: #f7f8fa;
   color: #1f2329;
+  box-sizing: border-box;
+  font-size: 28rpx;
+
+  &--active {
+    border-color: #1677ff;
+    background: #fff;
+    box-shadow: 0 0 0 4rpx rgba(22, 119, 255, 0.1);
+  }
+}
+
+.scan-camera-btn {
+  width: 88rpx;
+  height: 88rpx;
+  line-height: 88rpx;
+  border-radius: 14rpx;
+  background: #1677ff;
+  color: #fff;
+  font-size: 26rpx;
+  font-weight: 600;
+  padding: 0;
+  border: none;
+  flex-shrink: 0;
+
+  &:active { opacity: 0.85; }
+  &[disabled] { background: #d9d9d9; }
+}
+
+// 库位预览（优先显示）
+.scan-location-preview {
+  margin-bottom: 16rpx;
+  padding: 20rpx;
+  border-radius: 14rpx;
+  background: #f6fff0;
+  border: 2rpx solid #b7eb8f;
+
+  &__row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6rpx 0;
+  }
+
+  &__label {
+    color: #4e5969;
+    font-size: 24rpx;
+    flex-shrink: 0;
+  }
+
+  &__value {
+    color: #1f2329;
+    font-size: 24rpx;
+    font-weight: 600;
+    margin-right: 12rpx;
+
+    &--code {
+      color: #52c41a;
+      font-size: 28rpx;
+      font-weight: 700;
+    }
+  }
+
+  &__badge {
+    padding: 4rpx 12rpx;
+    border-radius: 8rpx;
+    font-size: 20rpx;
+    font-weight: 600;
+    flex-shrink: 0;
+
+    &.badge--green {
+      background: #f6ffed;
+      color: #52c41a;
+      border: 1rpx solid #b7eb8f;
+    }
+
+    &.badge--gray {
+      background: #f7f8fa;
+      color: #86909c;
+      border: 1rpx solid #e5e6eb;
+    }
+  }
+}
+
+// 产品预览
+.scan-product-preview {
+  margin-bottom: 16rpx;
+  padding: 20rpx;
+  border-radius: 14rpx;
+  background: #f0f5ff;
+  border: 2rpx solid #adc6ff;
+
+  &__row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6rpx 0;
+  }
+
+  &__label {
+    color: #4e5969;
+    font-size: 24rpx;
+    flex-shrink: 0;
+  }
+
+  &__value {
+    color: #1f2329;
+    font-size: 24rpx;
+    text-align: right;
+
+    &--name {
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+  }
+}
+
+// 底部栏
+.scan-footer {
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  gap: 16rpx;
+  padding: 20rpx 0 calc(20rpx + env(safe-area-inset-bottom));
+  background: #f4f6f8;
+
+  &__clear {
+    flex: 1;
+    height: 88rpx;
+    line-height: 88rpx;
+    border-radius: 16rpx;
+    background: #fff;
+    color: #4e5969;
+    font-size: 28rpx;
+    border: 2rpx solid #e5e6eb;
+  }
+
+  &__submit {
+    flex: 2;
+    height: 88rpx;
+    line-height: 88rpx;
+    border-radius: 16rpx;
+    background: #1677ff;
+    color: #fff;
+    font-size: 28rpx;
+    font-weight: 600;
+  }
 }
 </style>
diff --git a/src/pages-erp/stock-out/scan/components/recent-scan-list.vue b/src/pages-erp/stock-out/scan/components/recent-scan-list.vue
new file mode 100644
index 0000000..b662794
--- /dev/null
+++ b/src/pages-erp/stock-out/scan/components/recent-scan-list.vue
@@ -0,0 +1,156 @@
+<template>
+  <view class="recent-scan-list">
+    <view v-if="records.length === 0" class="recent-scan-list__empty">
+      暂无扫码记录，开始扫码出库
+    </view>
+
+    <view
+      v-for="(record, index) in records"
+      :key="record.id || index"
+      class="scan-card"
+      :class="{ 'scan-card--latest': latestIndex === index }"
+    >
+      <view class="scan-card__header">
+        <text class="scan-card__name">{{ record.productName || '-' }}</text>
+        <text class="scan-card__delete" @tap="emit('delete', index)">删除</text>
+      </view>
+
+      <view class="scan-card__meta">
+        <text>条码：{{ record.productBarCode || '-' }}</text>
+        <text>规格：{{ record.productSpec || '-' }}</text>
+      </view>
+      <view class="scan-card__meta">
+        <text>仓库：{{ record.warehouseName || '-' }}</text>
+        <text>单位：{{ record.productUnit || '-' }}</text>
+      </view>
+      <view class="scan-card__meta">
+        <text>库位：{{ record.locationCode || '-' }}</text>
+        <text>库存：{{ record.stockCount ?? '-' }}</text>
+      </view>
+      <view class="scan-card__footer">
+        <view class="scan-card__stock-hint" v-if="record.stockCount !== undefined">
+          剩余 {{ Math.max((record.stockCount || 0) - record.scanCount, 0) }}
+        </view>
+        <view class="scan-card__count-control">
+          <text class="scan-card__count-btn" @tap="emit('decrease', index)">-</text>
+          <text class="scan-card__count">{{ record.scanCount }}</text>
+          <text class="scan-card__count-btn" @tap="emit('increase', index)">+</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { ScanRecord } from '../index.vue'
+
+defineProps<{
+  records: ScanRecord[]
+  latestIndex?: number
+}>()
+
+const emit = defineEmits<{
+  (event: 'delete', index: number): void
+  (event: 'increase', index: number): void
+  (event: 'decrease', index: number): void
+  (event: 'clear'): void
+}>()
+</script>
+
+<style lang="scss" scoped>
+.recent-scan-list {
+  &__empty {
+    padding: 48rpx;
+    border-radius: 16rpx;
+    background: #fff;
+    color: #86909c;
+    text-align: center;
+    font-size: 26rpx;
+  }
+}
+
+.scan-card {
+  margin-bottom: 16rpx;
+  padding: 24rpx;
+  border: 2rpx solid transparent;
+  border-radius: 16rpx;
+  background: #fff;
+
+  &--latest {
+    border-color: #fa8c16;
+    box-shadow: 0 8rpx 20rpx rgba(250, 140, 22, 0.12);
+  }
+
+  &__header,
+  &__meta,
+  &__footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16rpx;
+  }
+
+  &__header {
+    margin-bottom: 10rpx;
+  }
+
+  &__name {
+    color: #1f2329;
+    font-size: 28rpx;
+    font-weight: 600;
+  }
+
+  &__delete {
+    flex-shrink: 0;
+    color: #f53f3f;
+    font-size: 24rpx;
+  }
+
+  &__meta {
+    margin-top: 6rpx;
+    color: #4e5969;
+    font-size: 22rpx;
+    flex-wrap: wrap;
+  }
+
+  &__footer {
+    margin-top: 10rpx;
+    padding-top: 10rpx;
+    border-top: 2rpx solid #f2f3f5;
+  }
+
+  &__stock-hint {
+    color: #86909c;
+    font-size: 22rpx;
+  }
+
+  &__count-control {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+  }
+
+  &__count-btn {
+    width: 56rpx;
+    height: 56rpx;
+    line-height: 56rpx;
+    text-align: center;
+    border-radius: 12rpx;
+    background: #f2f3f5;
+    color: #1d2129;
+    font-size: 32rpx;
+  }
+
+  &__count {
+    min-width: 72rpx;
+    height: 56rpx;
+    line-height: 56rpx;
+    text-align: center;
+    border-radius: 12rpx;
+    background: #fff7e8;
+    color: #fa8c16;
+    font-size: 28rpx;
+    font-weight: 700;
+  }
+}
+</style>
diff --git a/src/pages-erp/stock-out/scan/components/scan-context-bar.vue b/src/pages-erp/stock-out/scan/components/scan-context-bar.vue
new file mode 100644
index 0000000..46a1f39
--- /dev/null
+++ b/src/pages-erp/stock-out/scan/components/scan-context-bar.vue
@@ -0,0 +1,68 @@
+<template>
+  <view class="scan-context-bar">
+    <view class="scan-context-bar__main">
+      <view class="scan-context-bar__warehouse">
+        <text class="scan-context-bar__label">仓库</text>
+        <text class="scan-context-bar__value">{{ warehouseName || '未选择仓库' }}</text>
+      </view>
+      <view class="scan-context-bar__stats">
+        <text>明细 {{ recordCount }} 条</text>
+        <text>累计 {{ scannedCount }} 件</text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  warehouseName?: string
+  scannedCount: number
+  recordCount: number
+}>()
+</script>
+
+<style lang="scss" scoped>
+.scan-context-bar {
+  padding: 20rpx 24rpx;
+  border-radius: 16rpx;
+  background: #fff;
+  margin-bottom: 16rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
+
+  &__main {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16rpx;
+  }
+
+  &__warehouse {
+    display: flex;
+    align-items: center;
+    gap: 12rpx;
+    min-width: 0;
+    flex: 1;
+  }
+
+  &__label {
+    flex-shrink: 0;
+    color: #86909c;
+    font-size: 24rpx;
+  }
+
+  &__value {
+    color: #1f2329;
+    font-size: 28rpx;
+    font-weight: 600;
+  }
+
+  &__stats {
+    display: flex;
+    gap: 20rpx;
+    flex-shrink: 0;
+    color: #fa8c16;
+    font-size: 24rpx;
+    font-weight: 600;
+  }
+}
+</style>
diff --git a/src/pages-erp/stock-out/scan/components/scan-feedback-bar.vue b/src/pages-erp/stock-out/scan/components/scan-feedback-bar.vue
new file mode 100644
index 0000000..ff15817
--- /dev/null
+++ b/src/pages-erp/stock-out/scan/components/scan-feedback-bar.vue
@@ -0,0 +1,43 @@
+<template>
+  <view v-if="message" class="feedback-bar" :class="`feedback-bar--${tone}`">
+    {{ message }}
+  </view>
+</template>
+
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    tone?: 'success' | 'error' | 'idle'
+    message?: string
+  }>(),
+  {
+    tone: 'idle',
+    message: '',
+  },
+)
+</script>
+
+<style lang="scss" scoped>
+.feedback-bar {
+  min-height: 76rpx;
+  padding: 18rpx 24rpx;
+  border-radius: 14rpx;
+  font-size: 24rpx;
+  line-height: 40rpx;
+
+  &--idle {
+    background: #f2f3f5;
+    color: #4e5969;
+  }
+
+  &--success {
+    background: #f6ffed;
+    color: #389e0d;
+  }
+
+  &--error {
+    background: #fff2f0;
+    color: #cf1322;
+  }
+}
+</style>
diff --git a/src/pages-erp/stock-out/scan/index.vue b/src/pages-erp/stock-out/scan/index.vue
index 826463b..31d7232 100644
--- a/src/pages-erp/stock-out/scan/index.vue
+++ b/src/pages-erp/stock-out/scan/index.vue
@@ -10,70 +10,168 @@
     />
 
     <view class="scan-page__content">
-      <view class="scan-section">
-        <view class="scan-section__title">
-          单据信息
-        </view>
-        <picker :range="warehouses" range-key="name" :value="selectedWarehouseIndex" @change="handleWarehouseChange">
-          <view class="scan-field">
-            {{ currentWarehouse?.name || '请选择出库仓库' }}
+      <!-- 顶部上下文条 -->
+      <ScanContextBar
+        :warehouse-name="locationInfo?.warehouseName"
+        :scanned-count="scannedTotalCount"
+        :record-count="records.length"
+      />
+
+      <!-- 扫码工作台 -->
+      <view class="scan-workbench">
+        <!-- 当前扫码上下文提示 -->
+        <view class="scan-panel">
+          <!-- 步骤指示器：库位 → 产品 -->
+          <view class="scan-step-indicator">
+            <view class="scan-step-indicator__item" :class="{ 'active': step === 'idle', 'done': step !== 'idle' }">
+              <view class="scan-step-indicator__dot">1</view>
+              <text>扫库位</text>
+            </view>
+            <view class="scan-step-indicator__line" :class="{ 'done': step !== 'idle' }" />
+            <view class="scan-step-indicator__item" :class="{ 'active': step === 'scanned' }">
+              <view class="scan-step-indicator__dot">2</view>
+              <text>扫产品</text>
+            </view>
           </view>
-        </picker>
-        <picker :range="customers" range-key="name" :value="selectedCustomerIndex" @change="handleCustomerChange">
-          <view class="scan-field">
-            {{ currentCustomerName }}
+
+          <!-- 当前作业提示 -->
+          <view class="scan-current-hint">
+            <text v-if="step === 'idle'">请扫描库位条码</text>
+            <text v-else>产品已出库，请继续扫码</text>
           </view>
-        </picker>
-        <input v-model="remark" class="scan-field" placeholder="请输入备注">
-      </view>
 
-      <view class="scan-section">
-        <view class="scan-section__title">
-          扫码录入
+          <!-- 库位扫码区 -->
+          <view class="scan-row" :class="{ 'scan-row--dim': step !== 'idle' }">
+            <input
+              v-model="locationCode"
+              class="scan-field"
+              :class="{ 'scan-field--active': step === 'idle' }"
+              placeholder="扫描库位条码"
+              confirm-type="next"
+              :focus="locationInputFocus"
+              :cursor-spacing="20"
+              :adjust-position="true"
+              :hold-keyboard="true"
+              @blur="handleLocationBlur"
+              @confirm="handleLocationScan"
+            >
+            <button class="scan-camera-btn" :disabled="scanLoading" @tap="handleCameraScan('location')">
+              拍
+            </button>
+          </view>
+
+          <!-- 库位预览（扫库位码后显示） -->
+          <view class="scan-location-preview" v-if="locationInfo">
+            <view class="scan-location-preview__row">
+              <text class="scan-location-preview__label">仓库</text>
+              <text class="scan-location-preview__value">{{ locationInfo.warehouseName }}</text>
+            </view>
+            <view class="scan-location-preview__row">
+              <text class="scan-location-preview__label">库位</text>
+              <text class="scan-location-preview__value scan-location-preview__value--code">
+                {{ locationInfo.locationCode }}
+              </text>
+              <text class="scan-location-preview__badge" :class="locationInfo.enableLocation ? 'badge--green' : 'badge--gray'">
+                {{ locationInfo.enableLocation ? '库位管理' : '无库位管理' }}
+              </text>
+            </view>
+          </view>
+
+          <!-- 产品扫码区 -->
+          <view class="scan-row" :class="{ 'scan-row--dim': step === 'idle' }">
+            <input
+              v-model="productBarCode"
+              class="scan-field"
+              :class="{ 'scan-field--active': step === 'scanned' }"
+              placeholder="扫描产品条码"
+              confirm-type="done"
+              :focus="productInputFocus"
+              :cursor-spacing="20"
+              :adjust-position="true"
+              :hold-keyboard="true"
+              @blur="handleProductBlur"
+              @confirm="handleProductScan"
+            >
+            <button class="scan-camera-btn" :disabled="scanLoading" @tap="handleCameraScan('product')">
+              拍
+            </button>
+          </view>
+
+          <!-- 产品预览（扫产品码后显示） -->
+          <view class="scan-product-preview" v-if="productPreview">
+            <view class="scan-product-preview__row">
+              <text class="scan-product-preview__label">产品</text>
+              <text class="scan-product-preview__value scan-product-preview__value--name">
+                {{ productPreview.name }}
+              </text>
+            </view>
+            <view class="scan-product-preview__row">
+              <text class="scan-product-preview__label">规格</text>
+              <text class="scan-product-preview__value">{{ productPreview.standard || '-' }}</text>
+            </view>
+            <view class="scan-product-preview__row">
+              <text class="scan-product-preview__label">条码</text>
+              <text class="scan-product-preview__value">{{ productPreview.barCode || '-' }}</text>
+            </view>
+            <view class="scan-product-preview__row" v-if="currentStockCount !== undefined">
+              <text class="scan-product-preview__label">库存</text>
+              <text class="scan-product-preview__value scan-product-preview__value--stock">{{ currentStockCount }}</text>
+            </view>
+          </view>
+
+          <ScanFeedbackBar :tone="feedbackTone" :message="feedbackMessage" />
         </view>
-        <input v-model="batchNo" class="scan-field" placeholder="请输入或扫描批次号（可选）">
-        <input v-model="locationCode" class="scan-field" placeholder="请输入或扫描库位码（可选）">
-        <ScanInput
-          v-model="scanCode"
-          placeholder="请先选择仓库，再扫描产品条码"
-          :loading="scanLoading"
-          :auto-focus="false"
-          @submit="handleScanSubmit"
-          @camera-scan="handleCameraScan"
-        />
-      </view>
 
-      <view class="scan-section">
-        <view class="scan-section__title">
-          出库明细
+        <!-- 扫码记录列表 -->
+        <view class="scan-panel scan-panel--list">
+          <view class="scan-panel__header">
+            <view class="scan-panel__title">
+              扫码记录
+            </view>
+            <view class="scan-panel__meta">
+              共 {{ records.length }} 条
+            </view>
+          </view>
+          <RecentScanList
+            :records="records"
+            :latest-index="latestRecordIndex"
+            @delete="handleDeleteRecord"
+            @increase="handleIncreaseCount"
+            @decrease="handleDecreaseCount"
+          />
         </view>
-        <ItemList :items="items" :show-stock="true" @increase="increaseCount" @decrease="decreaseCount" @remove="removeItem" />
-      </view>
 
-      <SubmitBar :loading="submitting" submit-text="提交其它出库" @submit="handleSubmit" @secondary="clearItems" />
+        <!-- 提交栏 -->
+        <view class="scan-footer">
+          <button class="scan-footer__clear" @tap="handleClearAll">
+            清空记录
+          </button>
+          <button class="scan-footer__submit" :loading="submitting" @tap="handleSubmit">
+            提交其它出库
+          </button>
+        </view>
+      </view>
     </view>
   </view>
 </template>
 
 <script setup lang="ts">
 import type { ProductByBarCode } from '@/api/erp/product'
+import type { LocationByCodeVO } from '@/api/erp/location'
 import type { Stock } from '@/api/erp/stock'
 import type { StockOut, StockOutItem } from '@/api/erp/stock-out'
-import type { Warehouse } from '@/api/erp/warehouse'
-import type { ItemCardValue } from '@/components/erp-scan/item-list.vue'
 
-import { computed, onMounted, ref } from 'vue'
+import { computed, nextTick, onMounted, ref } from 'vue'
 import { useToast } from 'wot-design-uni'
-import { getCustomerSimpleList } from '@/api/erp/customer'
 import { getProductByBarCode } from '@/api/erp/product'
+import { getLocationByCode } from '@/api/erp/location'
 import { getStock2 } from '@/api/erp/stock'
 import { createStockOut } from '@/api/erp/stock-out'
-import { getWarehouseSimpleList } from '@/api/erp/warehouse'
-import ItemList from '@/components/erp-scan/item-list.vue'
-import ScanInput from '@/components/erp-scan/scan-input.vue'
-import SubmitBar from '@/components/erp-scan/submit-bar.vue'
+import ScanFeedbackBar from '@/pages-erp/stock-out/scan/components/scan-feedback-bar.vue'
+import RecentScanList from '@/pages-erp/stock-out/scan/components/recent-scan-list.vue'
+import ScanContextBar from '@/pages-erp/stock-out/scan/components/scan-context-bar.vue'
 import { navigateBackPlus } from '@/utils'
-import { buildScanMergeKey, normalizeCameraScanResult, normalizeScanCode } from '@/utils/scan'
+import { normalizeCameraScanResult, normalizeScanCode } from '@/utils/scan'
 
 definePage({
   style: {
@@ -82,409 +180,753 @@ definePage({
   },
 })
 
-interface StockOutScanItem extends ItemCardValue {
-  remark?: string
+/** 扫码出库记录 */
+export interface ScanRecord {
+  id?: number
+  productId?: number
+  productName?: string
+  productSpec?: string
+  productBarCode?: string
+  productUnit?: string
+  productPrice?: number
+  warehouseId?: number
+  warehouseName?: string
+  locationCode?: string
+  batchNo?: string
+  stockCount?: number
+  scanCount: number
+  scanTime?: string
 }
 
-interface OptionalCustomerOption {
-  id?: number
-  name: string
-}
+type Step = 'idle' | 'scanned'
 
 const toast = useToast()
-const scanCode = ref('')
+
+// 扫码步骤
+const step = ref<Step>('idle')
+
+// 扫码数据
+const locationCode = ref('')
+const locationInfo = ref<LocationByCodeVO | null>(null)
+const productBarCode = ref('')
+const productPreview = ref<ProductByBarCode | null>(null)
+const currentStockCount = ref<number>()
+
+// 状态
 const scanLoading = ref(false)
 const submitting = ref(false)
-const remark = ref('')
-const warehouses = ref<Warehouse[]>([])
-const customers = ref<OptionalCustomerOption[]>([])
-const selectedWarehouseId = ref<number>()
-const selectedCustomerId = ref<number>()
-const items = ref<StockOutScanItem[]>([])
-const batchNo = ref('')
-const locationCode = ref('')
+const records = ref<ScanRecord[]>([])
+const feedbackTone = ref<'success' | 'error' | 'idle'>('idle')
+const feedbackMessage = ref('')
 
-const EMPTY_CUSTOMER_OPTION: OptionalCustomerOption = {
-  id: undefined,
-  name: '不选择客户（可选）',
-}
+// 输入框焦点控制
+const locationInputFocus = ref(false)
+const productInputFocus = ref(false)
 
-const currentWarehouse = computed(() =>
-  warehouses.value.find(item => item.id === selectedWarehouseId.value),
-)
-const currentCustomerName = computed(() => customers.value.find(item => item.id === selectedCustomerId.value)?.name || EMPTY_CUSTOMER_OPTION.name)
-const selectedWarehouseIndex = computed(() => Math.max(warehouses.value.findIndex(item => item.id === selectedWarehouseId.value), 0))
-const selectedCustomerIndex = computed(() => {
-  const index = customers.value.findIndex(item => item.id === selectedCustomerId.value)
-  return index < 0 ? 0 : index
+// 计算属性
+const canConfirm = computed(() => {
+  return locationInfo.value?.warehouseId && productPreview.value?.id && scanLoading.value === false
 })
 
-/**
- * 功能说明：返回上一页，若没有上一级页面则回到其它出库列表页。
- * 适用场景：用户从快捷页返回库存业务列表。
- * @return 无
- * 注意事项：使用增强返回逻辑，避免页面栈为空时返回失败。
- */
+const scannedTotalCount = computed(() =>
+  records.value.reduce((sum, r) => sum + Number(r.scanCount || 0), 0),
+)
+
+const latestRecordIndex = computed(() => {
+  if (records.value.length === 0) return undefined
+  return records.value.length - 1
+})
+
+/** 返回上一页 */
 function handleBack() {
   navigateBackPlus('/pages-erp/stock-out/index')
 }
 
-/**
- * 功能说明：加载扫码其它出库页依赖的基础下拉数据。
- * 适用场景：页面首次进入时准备仓库和客户数据。
- * @return 无
- * 注意事项：默认仓库优先取系统默认仓库，减少开始作业前的额外点击。
- */
-async function loadInitialData() {
-  const [warehouseList, customerList] = await Promise.all([
-    getWarehouseSimpleList(),
-    getCustomerSimpleList(),
-  ])
+/** 初始化页面 */
+onMounted(async () => {
+  // PDA 扫码枪需要输入框自动获得焦点，延迟确保页面完全渲染
+  await nextTick()
+  setTimeout(() => {
+    focusLocationInput()
+  }, 500)
+})
 
-  warehouses.value = warehouseList
-  customers.value = [EMPTY_CUSTOMER_OPTION, ...customerList]
-  selectedWarehouseId.value = warehouseList.find(item => item.defaultStatus)?.id || warehouseList[0]?.id
+const ERROR_DISPLAY_MS = 2000
+
+/** 重置到初始状态 */
+function resetToIdle() {
+  clearScanInputs()
+  locationInfo.value = null
+  productPreview.value = null
+  currentStockCount.value = undefined
+  step.value = 'idle'
+  setTimeout(() => {
+    clearFeedback()
+    focusLocationInput()
+  }, ERROR_DISPLAY_MS)
 }
 
-/**
- * 功能说明：切换当前出库仓库。
- * 适用场景：操作员选择本次扫码作业仓库。
- * @param event picker 事件
- * @return 无
- * 注意事项：已录入明细不会被自动改仓，避免中途切仓导致历史扫码上下文错乱。
- */
-function handleWarehouseChange(event: Record<string, any>) {
-  const warehouse = warehouses.value[Number(event.detail.value)]
-  selectedWarehouseId.value = warehouse?.id
+/** 停留在产品扫码阶段 + 聚焦产品输入框（扫产品失败用） */
+function resetToProductScan() {
+  productBarCode.value = ''
+  productPreview.value = null
+  currentStockCount.value = undefined
+  setTimeout(() => {
+    clearFeedback()
+    focusProductInput()
+  }, ERROR_DISPLAY_MS)
 }
 
-/**
- * 功能说明：切换当前客户。
- * 适用场景：其它出库单头维护可选客户信息。
- * @param event picker 事件
- * @return 无
- * 注意事项：客户当前不是必填项，但保留该字段便于后续业务追溯。
- */
-function handleCustomerChange(event: Record<string, any>) {
-  const customer = customers.value[Number(event.detail.value)]
-  selectedCustomerId.value = customer?.id
-}
-
-/**
- * 功能说明：按产品和仓库查询即时库存。
- * 适用场景：扫码新增明细前或手工增加数量前进行库存校验。
- * @param productId 产品编号
- * @return 当前仓库下的库存信息
- * 注意事项：出库页需要每次实时查询，避免沿用旧库存误放行。
- */
-async function loadStockInfo(productId: number): Promise<Stock> {
-  return await getStock2(productId, selectedWarehouseId.value as number)
-}
-
-/**
- * 功能说明：校验目标数量是否超过当前库存。
- * 适用场景：扫码新增、重复扫码累计、手工增加数量。
- * @param stockCount 当前库存数量
- * @param nextCount 目标数量
- * @param productName 产品名称
- * @return 是否允许继续
- * 注意事项：不在前端提前拦截的话，仓库人员可能连续扫码后才在提交时整体失败，体验会很差。
- */
-function validateStock(stockCount: number, nextCount: number, productName: string): boolean {
-  if (Number(stockCount || 0) < nextCount) {
-    toast.error(`${productName} 库存不足`)
-    return false
-  }
-
-  return true
-}
-
-/**
- * 功能说明：把扫码命中的产品合并到当前出库明细。
- * 适用场景：扫码枪连续扫到同一产品时自动累计数量。
- * @param product 条码命中的产品
- * @return 无
- * 注意事项：重复扫码前会先刷新库存并验证累计后数量，避免页面沿用旧库存误放行。
- */
-async function appendScannedProduct(product: ProductByBarCode) {
-  const warehouseId = selectedWarehouseId.value as number
-  const currentBatchNo = batchNo.value.trim()
-  const currentLocationCode = locationCode.value.trim()
-  const targetKey = buildScanMergeKey({
-    warehouseId,
-    productId: product.id,
-    count: 1,
-    batchNo: currentBatchNo,
-    locationCode: currentLocationCode,
-  }, true)
-  const existedIndex = items.value.findIndex(item => buildScanMergeKey({
-    warehouseId: item.warehouseId,
-    productId: item.productId,
-    count: item.count,
-    batchNo: item.batchNo,
-    locationCode: item.locationCode,
-  }, true) === targetKey)
-  const stockInfo = await loadStockInfo(product.id)
-  const stockCount = Number(stockInfo?.count || 0)
-
-  if (existedIndex >= 0) {
-    const nextCount = items.value[existedIndex].count + 1
-    if (!validateStock(stockCount, nextCount, product.name)) {
-      return
-    }
-
-    items.value[existedIndex].count = nextCount
-    items.value[existedIndex].stockCount = stockCount
-    items.value[existedIndex].remainCount = Math.max(stockCount - nextCount, 0)
-    return
-  }
-
-  if (!validateStock(stockCount, 1, product.name)) {
-    return
-  }
-
-  items.value.unshift({
-    warehouseId,
-    warehouseName: currentWarehouse.value?.name,
-    productId: product.id,
-    productName: product.name,
-    productBarCode: product.barCode,
-    productSpec: product.standard,
-    productUnitName: product.unitName,
-    productPrice: Number(stockInfo?.unitPrice ?? product.minPrice ?? 0),
-    stockCount,
-    remainCount: Math.max(stockCount - 1, 0),
-    batchNo: currentBatchNo,
-    locationCode: currentLocationCode,
-    count: 1,
+/** 聚焦库位码输入框 */
+function focusLocationInput() {
+  productInputFocus.value = false
+  locationInputFocus.value = false
+  nextTick(() => {
+    locationInputFocus.value = true
   })
 }
 
+/** 库位输入框失焦处理 - 如果当前步骤是 idle，自动重新聚焦 */
+function handleLocationBlur() {
+  if (step.value === 'idle' && !scanLoading.value) {
+    setTimeout(() => {
+      if (step.value === 'idle') {
+        focusLocationInput()
+      }
+    }, 100)
+  }
+}
+
+/** 产品输入框失焦处理 - 如果当前步骤是 scanned，自动重新聚焦 */
+function handleProductBlur() {
+  if (step.value === 'scanned' && !scanLoading.value) {
+    setTimeout(() => {
+      if (step.value === 'scanned') {
+        focusProductInput()
+      }
+    }, 100)
+  }
+}
+
 /**
- * 功能说明：处理扫码提交。
- * 适用场景：扫码枪回车或用户点击确认按钮。
- * @param sourceCode 可选的外部条码输入值
- * @return 无
- * 注意事项：未选择仓库时直接拦截，避免库存查询与出库校验失去仓库上下文。
+ * 扫库位码：自动反查仓库信息
  */
-async function handleScanSubmit(sourceCode?: string) {
-  if (scanLoading.value) {
-    return
-  }
-
-  if (!selectedWarehouseId.value) {
-    toast.error('请先选择仓库')
-    return
-  }
-
-  const barCode = normalizeScanCode(sourceCode ?? scanCode.value)
-  if (!barCode) {
-    toast.error('请先扫描条码')
+async function handleLocationScan() {
+  const code = normalizeScanCode(locationCode.value)
+  if (!code) {
+    setErrorFeedback('请先扫描库位条码')
     return
   }
 
   scanLoading.value = true
   try {
-    const product = await getProductByBarCode(barCode)
-    if (!product?.id) {
-      toast.error('未匹配到启用中的产品')
+    try {
+      locationInfo.value = await getLocationByCode(code)
+    } catch {
+      setErrorFeedback(`库位码 ${code} 不存在`)
+      resetToIdle()
       return
     }
 
-    await appendScannedProduct(product)
-    scanCode.value = ''
+    if (!locationInfo.value?.warehouseId) {
+      setErrorFeedback(`库位码 ${code} 未找到对应仓库`)
+      resetToIdle()
+      return
+    }
+
+    locationCode.value = code
+    step.value = 'scanned'
+    productBarCode.value = ''
+    productPreview.value = null
+    currentStockCount.value = undefined
+    clearFeedback()
+
+    // 聚焦产品输入框，等待扫码枪输入
+    focusProductInput()
+  } finally {
+    scanLoading.value = false
+  }
+}
+
+/** 聚焦产品码输入框 */
+function focusProductInput() {
+  locationInputFocus.value = false
+  productInputFocus.value = false
+  nextTick(() => {
+    productInputFocus.value = true
+  })
+}
+
+/** 加载库存信息 */
+async function loadStockInfo(productId: number, warehouseId: number): Promise<Stock | null> {
+  try {
+    return await getStock2(productId, warehouseId)
+  } catch {
+    return null
+  }
+}
+
+/**
+ * 扫产品码：自动反查产品信息
+ */
+async function handleProductScan() {
+  const code = normalizeScanCode(productBarCode.value)
+  if (!code) {
+    setErrorFeedback('请先扫描产品条码')
+    return
+  }
+
+  if (!locationInfo.value) {
+    setErrorFeedback('请先扫描库位条码')
+    step.value = 'idle'
+    return
+  }
+
+  scanLoading.value = true
+  try {
+    try {
+      productPreview.value = await getProductByBarCode(code)
+    } catch {
+      setErrorFeedback(`条码 ${code} 未匹配到产品`)
+      resetToProductScan()
+      return
+    }
+
+    if (!productPreview.value?.id) {
+      setErrorFeedback(`条码 ${code} 未匹配到产品`)
+      resetToProductScan()
+      return
+    }
+
+    // 查询库存
+    const stockInfo = await loadStockInfo(productPreview.value.id, locationInfo.value.warehouseId)
+    currentStockCount.value = Number(stockInfo?.count || 0)
+
+    // 检查库存是否足够
+    if (currentStockCount.value <= 0) {
+      setErrorFeedback(`${productPreview.value.name} 库存不足`)
+      resetToProductScan()
+      return
+    }
+
+    productBarCode.value = code
+    step.value = 'scanned'
+    clearFeedback()
+    // 自动确认出库
+    nextTick(() => handleConfirm())
   } finally {
     scanLoading.value = false
   }
 }
 
 /**
- * 功能说明：触发相机扫码，并将结果接入现有扫码录入流程。
- * 适用场景：普通手机没有外接扫码枪时，通过摄像头录入条码。
- * @return 无
- * 注意事项：扫码取消应静默返回，避免把用户主动取消误判成系统错误。
+ * 确认出库：将扫码记录添加到列表
  */
-function handleCameraScan() {
-  if (scanLoading.value) {
-    return
-  }
+async function handleConfirm() {
+  if (!canConfirm.value) return
 
+  scanLoading.value = true
+  try {
+    // 检查是否已存在相同的记录（仓库+产品+库位），如果存在则累加数量
+    const existingIndex = records.value.findIndex(r =>
+      r.warehouseId === locationInfo.value!.warehouseId &&
+      r.productId === productPreview.value!.id &&
+      r.locationCode === locationInfo.value!.locationCode
+    )
+
+    if (existingIndex >= 0) {
+      // 检查库存是否足够
+      const nextCount = records.value[existingIndex].scanCount + 1
+      const stockCount = records.value[existingIndex].stockCount || 0
+      if (nextCount > stockCount) {
+        setErrorFeedback(`${productPreview.value!.name} 库存不足`)
+        resetToProductScan()
+        return
+      }
+      // 累加数量
+      records.value[existingIndex].scanCount = nextCount
+    } else {
+      // 新增记录
+      const record: ScanRecord = {
+        id: Date.now(),
+        productId: productPreview.value!.id,
+        productName: productPreview.value!.name,
+        productSpec: productPreview.value!.standard,
+        productBarCode: productPreview.value!.barCode,
+        productUnit: productPreview.value!.unitName,
+        productPrice: Number(productPreview.value!.minPrice || 0),
+        warehouseId: locationInfo.value!.warehouseId,
+        warehouseName: locationInfo.value!.warehouseName,
+        locationCode: locationInfo.value!.locationCode,
+        stockCount: currentStockCount.value,
+        scanCount: 1,
+        scanTime: new Date().toISOString(),
+      }
+      records.value.push(record)
+    }
+
+    // 重置，准备下一次扫码
+    const productName = productPreview.value!.name
+    const locationCodeText = locationInfo.value!.locationCode
+    clearScanInputs()
+    step.value = 'idle'
+    setSuccessFeedback(`${productName} → ${locationCodeText} 出库成功`)
+
+    await nextTick()
+    // 聚焦库位输入框，等待扫码枪输入
+    focusLocationInput()
+  } finally {
+    scanLoading.value = false
+  }
+}
+
+/** 相机扫码 */
+function handleCameraScan(target: 'location' | 'product') {
+  if (scanLoading.value) return
+
+  // #ifdef APP-PLUS
+  // Android 运行时权限检查
+  plus.android.requestPermissions(
+    ['android.permission.CAMERA'],
+    function(result) {
+      const granted = result.granted
+      if (granted && granted.length > 0) {
+        doScan(target)
+      } else {
+        toast.error('请在设置中开启相机权限')
+        uni.openSetting()
+      }
+    },
+    function() {
+      toast.error('相机权限获取失败')
+    },
+  )
+  // #endif
+
+  // #ifndef APP-PLUS
+  doScan(target)
+  // #endif
+}
+
+function doScan(target: 'location' | 'product') {
   uni.scanCode({
     onlyFromCamera: true,
     success: async (result) => {
-      const barCode = normalizeCameraScanResult(result)
-      if (!barCode) {
-        return
-      }
+      const code = normalizeCameraScanResult(result)
+      if (!code) return
 
-      scanCode.value = barCode
-      await handleScanSubmit(barCode)
+      if (target === 'location') {
+        locationCode.value = code
+        await handleLocationScan()
+      } else {
+        productBarCode.value = code
+        await handleProductScan()
+      }
     },
     fail: (error) => {
-      // 用户主动取消扫码不属于异常流程，这里静默返回，避免产生干扰提示。
-      if (String(error?.errMsg || '').includes('cancel')) {
-        return
-      }
-
+      if (String(error?.errMsg || '').includes('cancel')) return
       toast.error('相机扫码失败，请重试')
     },
   })
 }
 
-/**
- * 功能说明：增加指定明细数量。
- * 适用场景：扫码后人工补正出库数量。
- * @param index 明细下标
- * @return 无
- * 注意事项：每次加数量前都重新校验库存，避免页面显示的库存已被其他单据消耗后继续放行。
- */
-async function increaseCount(index: number) {
-  const item = items.value[index]
-  const stockInfo = await loadStockInfo(item.productId)
-  const nextCount = item.count + 1
-  if (!validateStock(Number(stockInfo?.count || 0), nextCount, item.productName)) {
+/** 删除单条记录 */
+function handleDeleteRecord(index: number) {
+  records.value.splice(index, 1)
+}
+
+/** 增加数量 */
+async function handleIncreaseCount(index: number) {
+  const record = records.value[index]
+  if (!record) return
+
+  // 重新查询库存
+  const stockInfo = await loadStockInfo(record.productId!, record.warehouseId!)
+  const stockCount = Number(stockInfo?.count || 0)
+  record.stockCount = stockCount
+
+  const nextCount = record.scanCount + 1
+  if (nextCount > stockCount) {
+    toast.error(`${record.productName} 库存不足`)
     return
   }
-
-  item.stockCount = Number(stockInfo?.count || 0)
-  item.remainCount = Math.max(Number(stockInfo?.count || 0) - nextCount, 0)
-  item.count = nextCount
+  record.scanCount = nextCount
 }
 
-/**
- * 功能说明：减少指定明细数量。
- * 适用场景：误扫后人工回退数量。
- * @param index 明细下标
- * @return 无
- * 注意事项：数量最低保留 1，避免出现 0 数量明细继续提交。
- */
-function decreaseCount(index: number) {
-  if (items.value[index].count <= 1) {
-    return
+/** 减少数量 */
+function handleDecreaseCount(index: number) {
+  if (records.value[index] && records.value[index].scanCount > 1) {
+    records.value[index].scanCount -= 1
   }
-
-  items.value[index].count -= 1
 }
 
-/**
- * 功能说明：删除指定明细。
- * 适用场景：误扫错误产品后移除整行。
- * @param index 明细下标
- * @return 无
- * 注意事项：这里只删除当前行，不联动其他产品数量和库存展示。
- */
-function removeItem(index: number) {
-  items.value.splice(index, 1)
+/** 清空所有记录 */
+function handleClearAll() {
+  if (records.value.length === 0) return
+  uni.showModal({
+    title: '确认清空',
+    content: '确定要清空所有扫码记录吗？',
+    success: (res) => {
+      if (!res.confirm) return
+      records.value = []
+      clearFeedback()
+    },
+  })
 }
 
-/**
- * 功能说明：清空当前录入明细。
- * 适用场景：整单作废后重新扫码。
- * @return 无
- * 注意事项：清空后保留当前仓库和客户上下文，便于同一作业场景继续录单。
- */
-function clearItems() {
-  items.value = []
-}
-
-/**
- * 功能说明：将页面明细转换成其它出库接口需要的明细结构。
- * 适用场景：提交前组装请求体。
- * @return 其它出库明细数组
- * 注意事项：这里只保留后端真正需要的字段，避免把展示字段一并带入接口契约。
- */
-function buildSubmitItems(): StockOutItem[] {
-  return items.value.map(item => ({
-    warehouseId: item.warehouseId,
-    locationCode: item.locationCode,
-    productId: item.productId,
-    productPrice: item.productPrice,
-    batchNo: item.batchNo,
-    count: item.count,
-    remark: item.remark,
-  }))
-}
-
-/**
- * 功能说明：提交扫码其它出库单。
- * 适用场景：扫码录入完成后生成正式其它出库单。
- * @return 无
- * 注意事项：前端库存校验只做即时提醒，最终正确性以后端校验结果为准。
- */
+/** 提交其它出库单 */
 async function handleSubmit() {
-  if (submitting.value) {
-    return
-  }
-
-  if (items.value.length === 0) {
-    toast.error('请先扫描出库明细')
+  if (records.value.length === 0) {
+    toast.warning('暂无扫码记录')
     return
   }
 
   submitting.value = true
   try {
+    // 构建出库明细
+    const items: StockOutItem[] = records.value.map(r => ({
+      warehouseId: r.warehouseId,
+      locationCode: r.locationCode,
+      productId: r.productId,
+      productPrice: r.productPrice,
+      count: r.scanCount,
+    }))
+
     const payload: StockOut = {
+      customerId: 1, // 默认客户
       outTime: new Date().toISOString(),
-      remark: remark.value,
-      items: buildSubmitItems(),
-    }
-    if (selectedCustomerId.value !== undefined) {
-      payload.customerId = selectedCustomerId.value
+      items,
     }
 
     await createStockOut(payload)
-    toast.success('出库成功')
-    clearItems()
-    remark.value = ''
-    batchNo.value = ''
-    locationCode.value = ''
+    toast.success(`已提交 ${records.value.length} 条出库记录`)
+    records.value = []
+    clearFeedback()
   } finally {
     submitting.value = false
   }
 }
 
-/**
- * 功能说明：初始化扫码其它出库页。
- * 适用场景：页面首次挂载时准备基础数据。
- * @return 无
- * 注意事项：初始化失败时由请求封装统一提示，这里不额外重复 toast。
- */
-onMounted(async () => {
-  await loadInitialData()
-})
+/** 清空本次扫码输入 */
+function clearScanInputs() {
+  locationCode.value = ''
+  locationInfo.value = null
+  productBarCode.value = ''
+  productPreview.value = null
+  currentStockCount.value = undefined
+}
+
+function setSuccessFeedback(message: string) {
+  feedbackTone.value = 'success'
+  feedbackMessage.value = message
+}
+
+function setErrorFeedback(message: string) {
+  feedbackTone.value = 'error'
+  feedbackMessage.value = message
+}
+
+function clearFeedback() {
+  feedbackTone.value = 'idle'
+  feedbackMessage.value = ''
+}
 </script>
 
 <style lang="scss" scoped>
 .scan-page {
   background: #f4f6f8;
+  min-height: 100vh;
 
   &__content {
     padding: 24rpx;
+    padding-top: calc(24rpx + env(safe-area-inset-top) + 88rpx);
+    box-sizing: border-box;
   }
 }
 
-.scan-section {
-  margin-bottom: 24rpx;
+.scan-workbench {
+  display: flex;
+  flex-direction: column;
+  gap: 16rpx;
+}
+
+.scan-panel {
   padding: 24rpx;
-  border-radius: 20rpx;
+  border-radius: 18rpx;
   background: #fff;
 
+  &--list {
+    padding-bottom: 8rpx;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16rpx;
+    margin-bottom: 16rpx;
+  }
+
   &__title {
-    margin-bottom: 20rpx;
-    font-size: 30rpx;
-    font-weight: 600;
     color: #1f2329;
+    font-size: 28rpx;
+    font-weight: 600;
+  }
+
+  &__meta {
+    color: #86909c;
+    font-size: 22rpx;
+  }
+}
+
+// 步骤指示器
+.scan-step-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 24rpx;
+
+  &__item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8rpx;
+
+    text {
+      font-size: 22rpx;
+      color: #86909c;
+    }
+
+    &.active text {
+      color: #fa8c16;
+      font-weight: 600;
+    }
+
+    &.done text {
+      color: #52c41a;
+    }
+  }
+
+  &__dot {
+    width: 48rpx;
+    height: 48rpx;
+    line-height: 48rpx;
+    border-radius: 50%;
+    background: #f2f3f5;
+    color: #86909c;
+    font-size: 24rpx;
+    font-weight: 600;
+    text-align: center;
+  }
+
+  &__item.active &__dot {
+    background: #fa8c16;
+    color: #fff;
+  }
+
+  &__item.done &__dot {
+    background: #52c41a;
+    color: #fff;
+  }
+
+  &__line {
+    flex: 1;
+    height: 2rpx;
+    background: #e5e6eb;
+    margin: 0 12rpx;
+    margin-bottom: 28rpx;
+    max-width: 80rpx;
+
+    &.done {
+      background: #52c41a;
+    }
+  }
+}
+
+// 当前作业提示
+.scan-current-hint {
+  text-align: center;
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #1f2329;
+  margin-bottom: 20rpx;
+}
+
+// 输入行
+.scan-row {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+  margin-bottom: 16rpx;
+  transition: opacity 0.2s;
+
+  &--dim {
+    opacity: 0.4;
+    pointer-events: none;
+  }
+
+  .scan-field {
+    flex: 1;
   }
 }
 
 .scan-field {
-  height: 84rpx;
-  margin-bottom: 16rpx;
+  height: 88rpx;
   padding: 0 24rpx;
-  line-height: 84rpx;
+  line-height: 88rpx;
   border: 2rpx solid #e5e6eb;
-  border-radius: 12rpx;
+  border-radius: 14rpx;
   background: #f7f8fa;
   color: #1f2329;
+  box-sizing: border-box;
+  font-size: 28rpx;
+
+  &--active {
+    border-color: #fa8c16;
+    background: #fff;
+    box-shadow: 0 0 0 4rpx rgba(250, 140, 22, 0.1);
+  }
+}
+
+.scan-camera-btn {
+  width: 88rpx;
+  height: 88rpx;
+  line-height: 88rpx;
+  border-radius: 14rpx;
+  background: #fa8c16;
+  color: #fff;
+  font-size: 26rpx;
+  font-weight: 600;
+  padding: 0;
+  border: none;
+  flex-shrink: 0;
+
+  &:active { opacity: 0.85; }
+  &[disabled] { background: #d9d9d9; }
+}
+
+// 库位预览（优先显示）
+.scan-location-preview {
+  margin-bottom: 16rpx;
+  padding: 20rpx;
+  border-radius: 14rpx;
+  background: #f6fff0;
+  border: 2rpx solid #b7eb8f;
+
+  &__row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6rpx 0;
+  }
+
+  &__label {
+    color: #4e5969;
+    font-size: 24rpx;
+    flex-shrink: 0;
+  }
+
+  &__value {
+    color: #1f2329;
+    font-size: 24rpx;
+    font-weight: 600;
+    margin-right: 12rpx;
+
+    &--code {
+      color: #52c41a;
+      font-size: 28rpx;
+      font-weight: 700;
+    }
+  }
+
+  &__badge {
+    padding: 4rpx 12rpx;
+    border-radius: 8rpx;
+    font-size: 20rpx;
+    font-weight: 600;
+    flex-shrink: 0;
+
+    &.badge--green {
+      background: #f6ffed;
+      color: #52c41a;
+      border: 1rpx solid #b7eb8f;
+    }
+
+    &.badge--gray {
+      background: #f7f8fa;
+      color: #86909c;
+      border: 1rpx solid #e5e6eb;
+    }
+  }
+}
+
+// 产品预览
+.scan-product-preview {
+  margin-bottom: 16rpx;
+  padding: 20rpx;
+  border-radius: 14rpx;
+  background: #fff7e6;
+  border: 2rpx solid #ffd591;
+
+  &__row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6rpx 0;
+  }
+
+  &__label {
+    color: #4e5969;
+    font-size: 24rpx;
+    flex-shrink: 0;
+  }
+
+  &__value {
+    color: #1f2329;
+    font-size: 24rpx;
+    text-align: right;
+
+    &--name {
+      font-size: 28rpx;
+      font-weight: 600;
+    }
+
+    &--stock {
+      color: #fa8c16;
+      font-weight: 600;
+    }
+  }
+}
+
+// 底部栏
+.scan-footer {
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  gap: 16rpx;
+  padding: 20rpx 0 calc(20rpx + env(safe-area-inset-bottom));
+  background: #f4f6f8;
+
+  &__clear {
+    flex: 1;
+    height: 88rpx;
+    line-height: 88rpx;
+    border-radius: 16rpx;
+    background: #fff;
+    color: #4e5969;
+    font-size: 28rpx;
+    border: 2rpx solid #e5e6eb;
+  }
+
+  &__submit {
+    flex: 2;
+    height: 88rpx;
+    line-height: 88rpx;
+    border-radius: 16rpx;
+    background: #fa8c16;
+    color: #fff;
+    font-size: 28rpx;
+    font-weight: 600;
+  }
 }
 </style>