From 201179d33fb976089f1afe2639d4ac70d0361892 Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Sat, 16 May 2026 12:31:17 +0800
Subject: [PATCH] feat(frontend): unify fulfillment admin UI

---
 .../AdminFulfillmentBindingsView.vue          | 293 +++++++++---------
 .../AdminKuaishouCloudFulfillmentView.vue     | 265 ++++++++--------
 2 files changed, 263 insertions(+), 295 deletions(-)

diff --git a/apps/frontend/src/views/admin/fulfillment/AdminFulfillmentBindingsView.vue b/apps/frontend/src/views/admin/fulfillment/AdminFulfillmentBindingsView.vue
index b635cbe5..b2069cce 100644
--- a/apps/frontend/src/views/admin/fulfillment/AdminFulfillmentBindingsView.vue
+++ b/apps/frontend/src/views/admin/fulfillment/AdminFulfillmentBindingsView.vue
@@ -616,13 +616,9 @@ onMounted(loadConfigs)
                 </div>
                 <span class="binding-subtle">{{ getBindingSummary(binding) }}</span>
               </div>
-              <button
-                class="collapse-button"
-                type="button"
-                @click="toggleBindingCollapsed(binding.id)"
-              >
+              <el-button link type="primary" @click="toggleBindingCollapsed(binding.id)">
                 {{ isBindingCollapsed(binding.id) ? '展开' : '折叠' }}
-              </button>
+              </el-button>
             </div>
 
             <div v-if="isBindingCollapsed(binding.id)" class="binding-collapsed-preview">
@@ -646,7 +642,7 @@ onMounted(loadConfigs)
             <div v-else class="binding-grid">
               <label class="field-block">
                 <span>渠道</span>
-                <input
+                <el-input
                   v-model="binding.provider"
                   class="text-input"
                   placeholder="agiso"
@@ -656,7 +652,7 @@ onMounted(loadConfigs)
 
               <label class="field-block">
                 <span>平台</span>
-                <input
+                <el-input
                   v-model="binding.platform"
                   class="text-input"
                   placeholder="xianyu / taobao / pdd"
@@ -666,12 +662,10 @@ onMounted(loadConfigs)
 
               <label class="field-block">
                 <span>店铺 ID</span>
-                <input
+                <el-input
                   v-model="binding.shopId"
-                  :class="[
-                    'text-input',
-                    { 'text-input--invalid': isFieldInvalid(binding.id, 'shopId') },
-                  ]"
+                  :class="[{ 'text-input--invalid': isFieldInvalid(binding.id, 'shopId') }]"
+                  class="text-input"
                   data-field="shopId"
                   placeholder="留空表示跨店铺通用"
                   @input="clearValidationState"
@@ -680,7 +674,7 @@ onMounted(loadConfigs)
 
               <label class="field-block">
                 <span>店铺名称</span>
-                <input
+                <el-input
                   v-model="binding.shopName"
                   class="text-input"
                   placeholder="用于保存和识别店铺"
@@ -690,23 +684,23 @@ onMounted(loadConfigs)
 
               <label class="field-block">
                 <span>优先级</span>
-                <input
-                  v-model.number="binding.priority"
+                <el-input-number
+                  v-model="binding.priority"
                   class="text-input"
-                  type="number"
-                  min="1"
-                  @input="clearValidationState"
+                  :min="1"
+                  controls-position="right"
+                  @change="clearValidationState"
                 />
               </label>
 
               <label class="field-block">
                 <span>外部 SKU 编码</span>
-                <input
+                <el-input
                   v-model="binding.externalSkuCode"
                   :class="[
-                    'text-input',
                     { 'text-input--invalid': isFieldInvalid(binding.id, 'externalSkuCode') },
                   ]"
+                  class="text-input"
                   data-field="externalSkuCode"
                   placeholder="例如 6046726460016"
                   @input="clearValidationState"
@@ -715,12 +709,10 @@ onMounted(loadConfigs)
 
               <label class="field-block">
                 <span>外部商品 ID</span>
-                <input
+                <el-input
                   v-model="binding.externalItemId"
-                  :class="[
-                    'text-input',
-                    { 'text-input--invalid': isFieldInvalid(binding.id, 'externalItemId') },
-                  ]"
+                  :class="[{ 'text-input--invalid': isFieldInvalid(binding.id, 'externalItemId') }]"
+                  class="text-input"
                   data-field="externalItemId"
                   placeholder="例如 1033324289962"
                   @input="clearValidationState"
@@ -729,12 +721,12 @@ onMounted(loadConfigs)
 
               <label class="field-block field-wide">
                 <span>外部商品名</span>
-                <input
+                <el-input
                   v-model="binding.externalSkuName"
                   :class="[
-                    'text-input',
                     { 'text-input--invalid': isFieldInvalid(binding.id, 'externalSkuName') },
                   ]"
+                  class="text-input"
                   data-field="externalSkuName"
                   placeholder="例如 奥利奥动作"
                   @input="clearValidationState"
@@ -743,12 +735,10 @@ onMounted(loadConfigs)
 
               <label class="field-block">
                 <span>内部履约 SKU</span>
-                <input
+                <el-input
                   v-model="binding.skuCode"
-                  :class="[
-                    'text-input',
-                    { 'text-input--invalid': isFieldInvalid(binding.id, 'skuCode') },
-                  ]"
+                  :class="[{ 'text-input--invalid': isFieldInvalid(binding.id, 'skuCode') }]"
+                  class="text-input"
                   data-field="skuCode"
                   placeholder="例如 sjz_hdl_test01"
                   @input="clearValidationState"
@@ -760,7 +750,7 @@ onMounted(loadConfigs)
 
               <label class="field-block">
                 <span>内部商品名</span>
-                <input
+                <el-input
                   v-model="binding.skuName"
                   class="text-input"
                   placeholder="用于后台展示"
@@ -770,24 +760,25 @@ onMounted(loadConfigs)
 
               <label class="field-block">
                 <span>履约方式</span>
-                <select
+                <el-select
                   v-model="binding.profileKey"
-                  :class="[
-                    'text-input',
-                    { 'text-input--invalid': isFieldInvalid(binding.id, 'profileKey') },
-                  ]"
+                  :class="[{ 'text-input--invalid': isFieldInvalid(binding.id, 'profileKey') }]"
+                  class="text-input"
                   data-field="profileKey"
                   @change="clearValidationState"
                 >
-                  <option v-for="item in PROFILE_OPTIONS" :key="item.value" :value="item.value">
-                    {{ item.label }}
-                  </option>
-                </select>
+                  <el-option
+                    v-for="item in PROFILE_OPTIONS"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  />
+                </el-select>
               </label>
 
               <label class="field-block">
                 <span>匹配后展示名</span>
-                <input
+                <el-input
                   v-model="binding.resolvedSkuName"
                   class="text-input"
                   placeholder="例如 三角洲行动-自动领取"
@@ -801,10 +792,7 @@ onMounted(loadConfigs)
             </p>
 
             <div class="binding-actions">
-              <label class="checkbox-line">
-                <input v-model="binding.enabled" type="checkbox" />
-                <span>启用规则</span>
-              </label>
+              <el-checkbox v-model="binding.enabled">启用规则</el-checkbox>
               <el-button link type="danger" @click="removeBinding(binding.id)">删除</el-button>
             </div>
           </div>
@@ -822,17 +810,17 @@ onMounted(loadConfigs)
           <div class="lookup-toolbar">
             <label class="field-block">
               <span>渠道</span>
-              <input class="text-input" value="agiso" disabled />
+              <el-input class="text-input" model-value="agiso" disabled />
             </label>
 
             <label class="field-block">
               <span>平台</span>
-              <input class="text-input" value="xianyu" disabled />
+              <el-input class="text-input" model-value="xianyu" disabled />
             </label>
 
             <label class="field-block">
               <span>店铺 ID</span>
-              <input
+              <el-input
                 v-model="lookupForm.shopId"
                 class="text-input"
                 placeholder="例如 252609"
@@ -842,7 +830,7 @@ onMounted(loadConfigs)
 
             <label class="field-block">
               <span>平台订单号</span>
-              <input
+              <el-input
                 v-model="lookupForm.platformOrderId"
                 class="text-input"
                 placeholder="输入需要补查的订单号"
@@ -862,7 +850,6 @@ onMounted(loadConfigs)
 
           <p v-if="lookupErrorMessage" class="error-copy lookup-error">{{ lookupErrorMessage }}</p>
           <div v-else-if="lookupLoading" class="empty-inline">正在查询订单详情…</div>
-
           <template v-else-if="lookupResult">
             <div class="lookup-summary">
               <div class="lookup-summary-item">
@@ -892,56 +879,54 @@ onMounted(loadConfigs)
               </div>
             </div>
 
-            <table class="data-table">
-              <thead>
-                <tr>
-                  <th>外部商品</th>
-                  <th>数量</th>
-                  <th>识别结果</th>
-                  <th>操作</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="item in lookupResult.items" :key="item.lineId">
-                  <td>
-                    <div class="cell-stack">
-                      <strong>{{
-                        item.externalSkuName ||
-                        item.itemTitle ||
-                        item.externalSkuCode ||
-                        item.externalItemId ||
-                        '-'
-                      }}</strong>
-                      <span class="cell-subtle">SKU: {{ item.externalSkuCode || '-' }}</span>
-                      <span class="cell-subtle">ItemId: {{ item.externalItemId || '-' }}</span>
-                    </div>
-                  </td>
-                  <td>{{ item.quantity }}</td>
-                  <td>
-                    <div class="cell-stack">
-                      <strong>{{ item.configured ? '已配置' : '未配置' }}</strong>
-                      <span v-if="item.matchedBinding" class="cell-subtle">
-                        {{ item.matchedBinding.skuName || item.matchedBinding.skuCode || '-' }} /
-                        {{ item.matchedBinding.profileKey || '-' }}
-                      </span>
-                      <span v-else class="cell-subtle">可直接导入成新规则草稿</span>
-                    </div>
-                  </td>
-                  <td>
-                    <el-button
-                      v-if="!item.configured && !isLookupProductImported(item.lineId)"
-                      link
-                      type="primary"
-                      @click="importLookupProduct(item)"
-                    >
-                      导入到规则
-                    </el-button>
-                    <span v-else-if="item.configured" class="cell-subtle">已存在</span>
-                    <span v-else class="cell-subtle">已导入草稿</span>
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+            <el-table
+              :data="lookupResult.items"
+              class="data-table element-data-table"
+              empty-text="暂无订单商品"
+            >
+              <el-table-column label="外部商品" min-width="260">
+                <template #default="{ row: item }">
+                  <div class="cell-stack">
+                    <strong>{{
+                      item.externalSkuName ||
+                      item.itemTitle ||
+                      item.externalSkuCode ||
+                      item.externalItemId ||
+                      '-'
+                    }}</strong>
+                    <span class="cell-subtle">SKU: {{ item.externalSkuCode || '-' }}</span>
+                    <span class="cell-subtle">ItemId: {{ item.externalItemId || '-' }}</span>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column prop="quantity" label="数量" width="90" />
+              <el-table-column label="识别结果" min-width="220">
+                <template #default="{ row: item }">
+                  <div class="cell-stack">
+                    <strong>{{ item.configured ? '已配置' : '未配置' }}</strong>
+                    <span v-if="item.matchedBinding" class="cell-subtle">
+                      {{ item.matchedBinding.skuName || item.matchedBinding.skuCode || '-' }} /
+                      {{ item.matchedBinding.profileKey || '-' }}
+                    </span>
+                    <span v-else class="cell-subtle">可直接导入成新规则草稿</span>
+                  </div>
+                </template>
+              </el-table-column>
+              <el-table-column label="操作" width="130">
+                <template #default="{ row: item }">
+                  <el-button
+                    v-if="!item.configured && !isLookupProductImported(item.lineId)"
+                    link
+                    type="primary"
+                    @click="importLookupProduct(item)"
+                  >
+                    导入到规则
+                  </el-button>
+                  <span v-else-if="item.configured" class="cell-subtle">已存在</span>
+                  <span v-else class="cell-subtle">已导入草稿</span>
+                </template>
+              </el-table-column>
+            </el-table>
           </template>
         </section>
 
@@ -957,59 +942,57 @@ onMounted(loadConfigs)
             </div>
           </div>
 
-          <table class="data-table">
-            <thead>
-              <tr>
-                <th>来源</th>
-                <th>外部商品</th>
-                <th>订单商品数</th>
-                <th>最近出现时间</th>
-                <th>状态</th>
-                <th>操作</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                v-for="item in observedProducts"
-                :key="`${item.provider}:${item.platform}:${item.shopId}:${item.externalSkuCode}:${item.externalItemId}:${item.externalSkuName}`"
-              >
-                <td>
-                  <div class="cell-stack">
-                    <strong>{{ item.platform || '-' }}</strong>
-                    <span class="cell-subtle"
-                      >{{ item.provider }} · {{ item.shopName || item.shopId || '全店铺' }}</span
-                    >
-                  </div>
-                </td>
-                <td>
-                  <div class="cell-stack">
-                    <strong>{{
-                      item.externalSkuName || item.externalSkuCode || item.externalItemId || '-'
-                    }}</strong>
-                    <span class="cell-subtle">SKU: {{ item.externalSkuCode || '-' }}</span>
-                    <span class="cell-subtle">ItemId: {{ item.externalItemId || '-' }}</span>
-                  </div>
-                </td>
-                <td>{{ item.orderItemCount }}</td>
-                <td>{{ formatAdminDateTime(item.latestSeenAt) }}</td>
-                <td>{{ item.configured ? '已配置' : '未配置' }}</td>
-                <td>
-                  <el-button
-                    v-if="!item.configured"
-                    link
-                    type="primary"
-                    @click="importObservedProduct(item)"
+          <el-table
+            :data="observedProducts"
+            class="data-table element-data-table"
+            empty-text="最近还没有识别到可用的外部商品。"
+          >
+            <el-table-column label="来源" min-width="180">
+              <template #default="{ row: item }">
+                <div class="cell-stack">
+                  <strong>{{ item.platform || '-' }}</strong>
+                  <span class="cell-subtle"
+                    >{{ item.provider }} · {{ item.shopName || item.shopId || '全店铺' }}</span
                   >
-                    导入到规则
-                  </el-button>
-                  <span v-else class="cell-subtle">已存在</span>
-                </td>
-              </tr>
-              <tr v-if="observedProducts.length === 0">
-                <td colspan="6" class="empty-inline">最近还没有识别到可用的外部商品。</td>
-              </tr>
-            </tbody>
-          </table>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="外部商品" min-width="280">
+              <template #default="{ row: item }">
+                <div class="cell-stack">
+                  <strong>{{
+                    item.externalSkuName || item.externalSkuCode || item.externalItemId || '-'
+                  }}</strong>
+                  <span class="cell-subtle">SKU: {{ item.externalSkuCode || '-' }}</span>
+                  <span class="cell-subtle">ItemId: {{ item.externalItemId || '-' }}</span>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column prop="orderItemCount" label="订单商品数" width="120" />
+            <el-table-column label="最近出现时间" width="180">
+              <template #default="{ row: item }">
+                {{ formatAdminDateTime(item.latestSeenAt) }}
+              </template>
+            </el-table-column>
+            <el-table-column label="状态" width="100">
+              <template #default="{ row: item }">
+                {{ item.configured ? '已配置' : '未配置' }}
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="130">
+              <template #default="{ row: item }">
+                <el-button
+                  v-if="!item.configured"
+                  link
+                  type="primary"
+                  @click="importObservedProduct(item)"
+                >
+                  导入到规则
+                </el-button>
+                <span v-else class="cell-subtle">已存在</span>
+              </template>
+            </el-table-column>
+          </el-table>
         </section>
       </template>
     </template>
diff --git a/apps/frontend/src/views/admin/fulfillment/AdminKuaishouCloudFulfillmentView.vue b/apps/frontend/src/views/admin/fulfillment/AdminKuaishouCloudFulfillmentView.vue
index 3a734b16..5141aa26 100644
--- a/apps/frontend/src/views/admin/fulfillment/AdminKuaishouCloudFulfillmentView.vue
+++ b/apps/frontend/src/views/admin/fulfillment/AdminKuaishouCloudFulfillmentView.vue
@@ -752,10 +752,7 @@ onMounted(loadConfigs)
         <span class="header-tag">保存后同步到任务匹配</span>
       </div>
       <div class="header-actions">
-        <label class="checkbox-line">
-          <input v-model="enabled" type="checkbox" />
-          <span>启用整条配置</span>
-        </label>
+        <el-checkbox v-model="enabled">启用整条配置</el-checkbox>
         <el-button round @click="loadConfigs">刷新</el-button>
         <el-button round type="primary" :loading="saving" @click="saveConfigs">保存配置</el-button>
       </div>
@@ -822,29 +819,29 @@ onMounted(loadConfigs)
           <div class="lookup-toolbar">
             <label class="field-block">
               <span>订单状态</span>
-              <select v-model="ninetyoneLookupForm.status" class="text-input">
-                <option value="pending_config">待补全</option>
-                <option value="manual_failed">已失败</option>
-                <option value="all">全部</option>
-              </select>
+              <el-select v-model="ninetyoneLookupForm.status" class="text-input">
+                <el-option label="待补全" value="pending_config" />
+                <el-option label="已失败" value="manual_failed" />
+                <el-option label="全部" value="all" />
+              </el-select>
             </label>
             <label class="field-block">
               <span>页码</span>
-              <input
-                v-model.number="ninetyoneLookupForm.page"
+              <el-input-number
+                v-model="ninetyoneLookupForm.page"
                 class="text-input"
-                min="1"
-                type="number"
+                :min="1"
+                controls-position="right"
               />
             </label>
             <label class="field-block">
               <span>每页条数</span>
-              <input
-                v-model.number="ninetyoneLookupForm.pageSize"
+              <el-input-number
+                v-model="ninetyoneLookupForm.pageSize"
                 class="text-input"
-                max="100"
-                min="1"
-                type="number"
+                :max="100"
+                :min="1"
+                controls-position="right"
               />
             </label>
             <div class="field-block field-block--action">
@@ -869,61 +866,60 @@ onMounted(loadConfigs)
           </p>
           <div v-else-if="ninetyoneLookupLoading" class="empty-inline">正在查询 91卡券订单…</div>
 
-          <table v-else class="data-table">
-            <thead>
-              <tr>
-                <th>订单</th>
-                <th>来源</th>
-                <th>商品</th>
-                <th>状态</th>
-                <th>操作</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="item in ninetyoneLookupResults" :key="getNinetyoneOrderImportKey(item)">
-                <td>
-                  <div class="cell-stack">
-                    <strong>{{ item.orderNo || '-' }}</strong>
-                    <span class="cell-subtle">{{ item.outTradeNo || '-' }}</span>
-                  </div>
-                </td>
-                <td>
-                  <div class="cell-stack">
-                    <strong>{{ item.shopName || '91卡券' }}</strong>
-                    <span class="cell-subtle">provider: 91kaquan</span>
-                    <span class="cell-subtle">shopId: {{ item.shopId || '91kaquan' }}</span>
-                  </div>
-                </td>
-                <td>
-                  <div class="cell-stack">
-                    <strong>{{ item.productName || item.productNo || '-' }}</strong>
-                    <span class="cell-subtle">productNo: {{ item.productNo || '-' }}</span>
-                    <span class="cell-subtle">数量：{{ item.buyNum || 0 }}</span>
-                  </div>
-                </td>
-                <td>
-                  <div class="cell-stack">
-                    <strong>{{ item.orderStatus || '-' }}</strong>
-                    <span class="cell-subtle">任务 {{ item.taskCount || 0 }}</span>
-                  </div>
-                </td>
-                <td>
-                  <el-button
-                    v-if="!isNinetyoneProductImported(item)"
-                    link
-                    type="primary"
-                    @click="importNinetyoneProduct(item)"
-                  >
-                    导入到规则
-                  </el-button>
-                  <span v-else class="cell-subtle">已导入草稿</span>
-                </td>
-              </tr>
-              <tr v-if="ninetyoneLookupResults.length === 0">
-                <td colspan="5" class="empty-inline">还没有 91卡券查询结果。</td>
-              </tr>
-            </tbody>
-          </table>
+          <el-table
+            v-else
+            :data="ninetyoneLookupResults"
+            class="data-table element-data-table"
+            empty-text="还没有 91卡券查询结果。"
+          >
+            <el-table-column label="订单" min-width="180">
+              <template #default="{ row: item }">
+                <div class="cell-stack">
+                  <strong>{{ item.orderNo || '-' }}</strong>
+                  <span class="cell-subtle">{{ item.outTradeNo || '-' }}</span>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="来源" min-width="180">
+              <template #default="{ row: item }">
+                <div class="cell-stack">
+                  <strong>{{ item.shopName || '91卡券' }}</strong>
+                  <span class="cell-subtle">provider: 91kaquan</span>
+                  <span class="cell-subtle">shopId: {{ item.shopId || '91kaquan' }}</span>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="商品" min-width="240">
+              <template #default="{ row: item }">
+                <div class="cell-stack">
+                  <strong>{{ item.productName || item.productNo || '-' }}</strong>
+                  <span class="cell-subtle">productNo: {{ item.productNo || '-' }}</span>
+                  <span class="cell-subtle">数量：{{ item.buyNum || 0 }}</span>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="状态" min-width="120">
+              <template #default="{ row: item }">
+                <div class="cell-stack">
+                  <strong>{{ item.orderStatus || '-' }}</strong>
+                  <span class="cell-subtle">任务 {{ item.taskCount || 0 }}</span>
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="130">
+              <template #default="{ row: item }">
+                <el-button
+                  v-if="!isNinetyoneProductImported(item)"
+                  link
+                  type="primary"
+                  @click="importNinetyoneProduct(item)"
+                >
+                  导入到规则
+                </el-button>
+                <span v-else class="cell-subtle">已导入草稿</span>
+              </template>
+            </el-table-column>
+          </el-table>
         </section>
 
         <section class="table-card table-card--dense">
@@ -934,19 +930,16 @@ onMounted(loadConfigs)
             </div>
             <div class="section-header-tools">
               <div class="section-mini-stats">
-                <button
+                <el-button
                   v-for="option in ruleFilterOptions"
                   :key="option.value"
-                  :class="[
-                    'mini-stat-chip',
-                    'mini-stat-chip--button',
-                    { 'mini-stat-chip--active': ruleFilter === option.value },
-                  ]"
-                  type="button"
+                  round
+                  size="small"
+                  :type="ruleFilter === option.value ? 'primary' : 'default'"
                   @click="ruleFilter = option.value"
                 >
                   {{ option.label }} {{ option.count }}
-                </button>
+                </el-button>
               </div>
               <div class="section-action-group">
                 <el-button round @click="expandAllRules">全部展开</el-button>
@@ -996,9 +989,9 @@ onMounted(loadConfigs)
                 </div>
                 <span class="binding-subtle">{{ getCardSummary(item) }}</span>
               </div>
-              <button class="collapse-button" type="button" @click="toggleCollapsed(item.localId)">
+              <el-button link type="primary" @click="toggleCollapsed(item.localId)">
                 {{ isCollapsed(item.localId) ? '展开' : '折叠' }}
-              </button>
+              </el-button>
             </div>
 
             <div v-if="isCollapsed(item.localId)" class="binding-collapsed-preview">
@@ -1018,7 +1011,7 @@ onMounted(loadConfigs)
                 <div class="mapping-grid">
                   <label class="field-block">
                     <span>来源 provider</span>
-                    <input
+                    <el-input
                       v-model="item.provider"
                       class="text-input"
                       maxlength="32"
@@ -1027,7 +1020,7 @@ onMounted(loadConfigs)
                   </label>
                   <label class="field-block">
                     <span>来源 platform</span>
-                    <input
+                    <el-input
                       v-model="item.platform"
                       class="text-input"
                       maxlength="32"
@@ -1036,7 +1029,7 @@ onMounted(loadConfigs)
                   </label>
                   <label class="field-block field-wide">
                     <span>店铺 ID</span>
-                    <input
+                    <el-input
                       v-model="item.shopId"
                       class="text-input"
                       maxlength="80"
@@ -1045,7 +1038,7 @@ onMounted(loadConfigs)
                   </label>
                   <label class="field-block">
                     <span>外部 SKU</span>
-                    <input
+                    <el-input
                       v-model="item.externalSkuCode"
                       class="text-input"
                       maxlength="120"
@@ -1054,7 +1047,7 @@ onMounted(loadConfigs)
                   </label>
                   <label class="field-block">
                     <span>外部商品 ID</span>
-                    <input
+                    <el-input
                       v-model="item.externalItemId"
                       class="text-input"
                       maxlength="120"
@@ -1063,7 +1056,7 @@ onMounted(loadConfigs)
                   </label>
                   <label class="field-block field-wide">
                     <span>外部商品名</span>
-                    <input
+                    <el-input
                       v-model="item.externalSkuName"
                       class="text-input"
                       maxlength="200"
@@ -1072,7 +1065,7 @@ onMounted(loadConfigs)
                   </label>
                   <label class="field-block field-wide">
                     <span>解析商品名</span>
-                    <input
+                    <el-input
                       v-model="item.resolvedSkuName"
                       class="text-input"
                       maxlength="120"
@@ -1095,7 +1088,7 @@ onMounted(loadConfigs)
                 <div class="mapping-grid">
                   <label class="field-block">
                     <span>内部 SKU</span>
-                    <input
+                    <el-input
                       v-model="item.internalSkuCode"
                       class="text-input"
                       maxlength="80"
@@ -1104,16 +1097,16 @@ onMounted(loadConfigs)
                   </label>
                   <label class="field-block">
                     <span>优先级</span>
-                    <input
-                      v-model.number="item.priority"
+                    <el-input-number
+                      v-model="item.priority"
                       class="text-input"
-                      min="1"
-                      type="number"
+                      :min="1"
+                      controls-position="right"
                     />
                   </label>
                   <label class="field-block field-wide">
                     <span>内部商品名</span>
-                    <input
+                    <el-input
                       v-model="item.internalSkuName"
                       class="text-input"
                       maxlength="120"
@@ -1122,7 +1115,7 @@ onMounted(loadConfigs)
                   </label>
                   <label class="field-block">
                     <span>cloudSourceKey</span>
-                    <input
+                    <el-input
                       v-model="item.cloudSourceKey"
                       class="text-input"
                       maxlength="60"
@@ -1131,23 +1124,26 @@ onMounted(loadConfigs)
                   </label>
                   <label class="field-block">
                     <span>cloud SKU ID</span>
-                    <select
-                      v-model.number="item.cloudSkuId"
+                    <el-select
+                      v-model="item.cloudSkuId"
                       class="text-input"
                       @change="handleCloudSkuSelected(item, item.cloudSkuId)"
-                      @focus="handleCloudSkuDropdownVisible(item, true)"
+                      @visible-change="handleCloudSkuDropdownVisible(item, $event)"
                     >
-                      <option :value="0">请选择 cloud SKU</option>
-                      <option v-for="sku in getCloudSkuOptions(item)" :key="sku.id" :value="sku.id">
-                        {{ formatCloudSkuOptionLabel(sku) }}
-                      </option>
-                    </select>
+                      <el-option label="请选择 cloud SKU" :value="0" />
+                      <el-option
+                        v-for="sku in getCloudSkuOptions(item)"
+                        :key="sku.id"
+                        :label="formatCloudSkuOptionLabel(sku)"
+                        :value="sku.id"
+                      />
+                    </el-select>
                     <small class="field-help">先填内部 SKU / 商品名，再选择会更容易匹配。</small>
                   </label>
                   <label class="field-block field-wide">
                     <span>cloud SKU 名称</span>
-                    <input
-                      :value="item.cloudSkuName"
+                    <el-input
+                      :model-value="item.cloudSkuName"
                       class="text-input text-input--readonly"
                       placeholder="选择 cloud SKU 后自动带出"
                       readonly
@@ -1155,15 +1151,15 @@ onMounted(loadConfigs)
                   </label>
                   <label class="field-block">
                     <span>虚拟号 VN Key</span>
-                    <input class="text-input text-input--readonly" value="1" readonly />
+                    <el-input class="text-input text-input--readonly" model-value="1" readonly />
                   </label>
                   <label class="field-block">
                     <span>最低保留余额</span>
-                    <input
-                      v-model.number="item.minAssetReserve"
+                    <el-input-number
+                      v-model="item.minAssetReserve"
                       class="text-input"
-                      min="0"
-                      type="number"
+                      :min="0"
+                      controls-position="right"
                     />
                   </label>
                 </div>
@@ -1173,47 +1169,48 @@ onMounted(loadConfigs)
             <div v-if="!isCollapsed(item.localId)" class="mapping-extra">
               <label class="field-block field-wide">
                 <span>快手核销店铺</span>
-                <select
+                <el-select
                   v-model="item.kuaishouConsumeShopId"
                   class="text-input"
+                  placeholder="请选择已配置 Cookie 的快手小店"
                   @change="handleKuaishouConsumeShopSelected(item)"
                 >
-                  <option value="">请选择已配置 Cookie 的快手小店</option>
-                  <option
+                  <el-option label="请选择已配置 Cookie 的快手小店" value="" />
+                  <el-option
                     v-for="shop in getKuaishouConsumeShopOptions()"
                     :key="shop.shopId"
+                    :label="formatKuaishouConsumeShopOption(shop)"
                     :value="shop.shopId"
-                  >
-                    {{ formatKuaishouConsumeShopOption(shop) }}
-                  </option>
-                </select>
+                  />
+                </el-select>
                 <small class="field-help"
                   >来自“平台店铺 -> 快手小店核销”配置，保存时会自动带出店铺名。</small
                 >
               </label>
               <label class="field-block">
                 <span>核销店铺 ID</span>
-                <input
-                  :value="item.kuaishouConsumeShopId || '-'"
+                <el-input
+                  :model-value="item.kuaishouConsumeShopId || '-'"
                   class="text-input text-input--readonly"
                   readonly
                 />
               </label>
               <label class="field-block">
                 <span>核销店铺名</span>
-                <input
-                  :value="item.kuaishouConsumeShopName || '-'"
+                <el-input
+                  :model-value="item.kuaishouConsumeShopName || '-'"
                   class="text-input text-input--readonly"
                   readonly
                 />
               </label>
               <label class="field-block field-wide">
                 <span>备注</span>
-                <textarea
+                <el-input
                   v-model="item.notes"
                   class="text-input textarea-input"
                   maxlength="400"
                   placeholder="绑定场景、客服注意事项等"
+                  type="textarea"
                 />
               </label>
             </div>
@@ -1226,22 +1223,10 @@ onMounted(loadConfigs)
             </p>
 
             <div class="binding-actions">
-              <label class="checkbox-line">
-                <input v-model="item.enabled" type="checkbox" />
-                <span>启用规则</span>
-              </label>
-              <label class="checkbox-line">
-                <input v-model="item.autoBuyEnabled" type="checkbox" />
-                <span>自动购买</span>
-              </label>
-              <label class="checkbox-line">
-                <input v-model="item.autoReturnNumberAfterDispatch" type="checkbox" />
-                <span>发货后退号</span>
-              </label>
-              <label class="checkbox-line">
-                <input v-model="item.autoConsumeAfterDispatch" type="checkbox" />
-                <span>发货后核销</span>
-              </label>
+              <el-checkbox v-model="item.enabled">启用规则</el-checkbox>
+              <el-checkbox v-model="item.autoBuyEnabled">自动购买</el-checkbox>
+              <el-checkbox v-model="item.autoReturnNumberAfterDispatch">发货后退号</el-checkbox>
+              <el-checkbox v-model="item.autoConsumeAfterDispatch">发货后核销</el-checkbox>
               <el-button link type="danger" @click="removeItem(item.localId)">删除</el-button>
             </div>
           </div>