style: ERP商品管理页面布局优化，与ERP店铺页面风格统一

- 搜索区改为 el-form :inline 布局，带标签和重置按钮
- 标题+操作按钮改为 flex justify-between 布局
- 搜索表单用 reactive 替代独立 ref
- 表格列宽优化: goodsName/specs 改用 min-width

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

haha-admin-web/src/views/erp-goods/index.vue

@@ -21,7 +21,12 @@ defineOptions({
 
 const loading = ref(false);
 const syncing = ref(false);
-const keyword = ref("");
+const autoBinding = ref(false);
+
+const form = reactive({
+  keyword: ""
+});
+
 const dataList = ref<any[]>([]);
 const total = ref(0);
 const pagination = reactive({ currentPage: 1, pageSize: 10 });
@@ -30,30 +35,12 @@ const bindDialogVisible = ref(false);
 const currentErpGoods = ref<any>(null);
 const selectedProductId = ref<number | null>(null);
 const bindLoading = ref(false);
-const autoBinding = ref(false);
-
-async function handleAutoBind() {
-  autoBinding.value = true;
-  try {
-    const res = await autoBindErpGoods();
-    if (res.code === 200) {
-      ElMessage.success(res.message || "自动关联完成");
-      await fetchList();
-    } else {
-      ElMessage.error(res.message || "自动关联失败");
-    }
-  } catch (e) {
-    ElMessage.error("自动关联请求失败");
-  } finally {
-    autoBinding.value = false;
-  }
-}
 
 async function fetchList() {
   loading.value = true;
   try {
     const res = await getErpGoodsList({
-      keyword: keyword.value || undefined,
+      keyword: form.keyword || undefined,
       page: pagination.currentPage,
       pageSize: pagination.pageSize
     });
@@ -67,19 +54,25 @@ async function fetchList() {
   }
 }
 
-function handlePageChange(page: number) {
-  pagination.currentPage = page;
+function resetForm() {
+  form.keyword = "";
+  pagination.currentPage = 1;
   fetchList();
 }
 
-function handleSizeChange(size: number) {
+function handleSearch() {
   pagination.currentPage = 1;
-  pagination.pageSize = size;
   fetchList();
 }
 
-function handleSearch() {
+function handlePageChange(page: number) {
+  pagination.currentPage = page;
+  fetchList();
+}
+
+function handleSizeChange(size: number) {
   pagination.currentPage = 1;
+  pagination.pageSize = size;
   fetchList();
 }
 
@@ -93,7 +86,7 @@ async function fetchBoundStatus() {
         erp._boundProduct = bound || null;
       });
     }
-  } catch (e) {
+  } catch {
     // ignore
   }
 }
@@ -107,20 +100,37 @@ async function handleSync() {
     } else {
       ElMessage.error(res.message || "同步失败");
     }
-  } catch (e) {
+  } catch {
     ElMessage.error("同步请求失败，请稍后重试");
   } finally {
     syncing.value = false;
   }
 }
 
+async function handleAutoBind() {
+  autoBinding.value = true;
+  try {
+    const res = await autoBindErpGoods();
+    if (res.code === 200) {
+      ElMessage.success(res.message || "自动关联完成");
+      await fetchList();
+    } else {
+      ElMessage.error(res.message || "自动关联失败");
+    }
+  } catch {
+    ElMessage.error("自动关联请求失败");
+  } finally {
+    autoBinding.value = false;
+  }
+}
+
 async function loadProductOptions() {
   try {
     const res = await getProductList({ page: 1, pageSize: 1000 });
     if (res.code === 200) {
       productOptions.value = res.data?.list || [];
     }
-  } catch (e) {
+  } catch {
     // ignore
   }
 }
@@ -167,7 +177,7 @@ async function handleUnbind(row: any) {
     } else {
       ElMessage.error(res.message || "解除关联失败");
     }
-  } catch (e) {
+  } catch {
     // 取消操作
   }
 }
@@ -179,40 +189,59 @@ onMounted(() => {
 
 <template>
   <div class="main">
-    <div class="px-6 pt-4 flex items-center justify-between">
-      <h2 class="text-lg font-semibold">ERP 商品关联</h2>
-      <div class="flex items-center gap-3">
+    <!-- 搜索表单区域 -->
+    <el-form
+      :inline="true"
+      :model="form"
+      class="search-form bg-bg_color w-full pl-8 pt-[12px] overflow-auto"
+    >
+      <el-form-item label="商品名称：">
         <el-input
-          v-model="keyword"
+          v-model="form.keyword"
           placeholder="搜索商品名称或编码"
           clearable
           class="w-[240px]!"
           @keyup.enter="handleSearch"
-        >
-          <template #prefix>
-            <el-icon><component :is="useRenderIcon(Search)" /></el-icon>
-          </template>
-        </el-input>
-        <el-button @click="handleSearch">搜索</el-button>
+        />
+      </el-form-item>
+      <el-form-item>
         <el-button
           type="primary"
-          :icon="useRenderIcon(Refresh)"
-          :loading="syncing"
-          @click="handleSync"
+          :icon="useRenderIcon(Search)"
+          :loading="loading"
+          @click="handleSearch"
         >
-          从 ERP 同步
+          搜索
         </el-button>
-        <el-button
-          type="success"
-          :loading="autoBinding"
-          @click="handleAutoBind"
-        >
-          一键关联
+        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm">
+          重置
         </el-button>
-      </div>
-    </div>
+      </el-form-item>
+    </el-form>
 
+    <!-- 标题 + 操作按钮 + 表格 -->
     <div class="px-6 pt-4">
+      <div class="flex items-center justify-between mb-4">
+        <h2 class="text-lg font-semibold">ERP 商品关联</h2>
+        <div class="flex items-center gap-2">
+          <el-button
+            type="primary"
+            :icon="useRenderIcon(Refresh)"
+            :loading="syncing"
+            @click="handleSync"
+          >
+            从 ERP 同步
+          </el-button>
+          <el-button
+            type="success"
+            :loading="autoBinding"
+            @click="handleAutoBind"
+          >
+            一键关联
+          </el-button>
+        </div>
+      </div>
+
       <el-table
         v-loading="loading"
         :data="dataList"
@@ -222,10 +251,10 @@ onMounted(() => {
         empty-text="暂无数据，请先同步ERP商品"
         :row-style="{ height: '64px' }"
       >
-        <el-table-column prop="erpGoodsId" label="ERP商品ID" width="150" />
-        <el-table-column prop="goodsCode" label="商品编码" width="280" />
-        <el-table-column prop="goodsName" label="商品名称" width="140" show-overflow-tooltip />
-        <el-table-column label="图片" width="80">
+        <el-table-column prop="erpGoodsId" label="ERP商品ID" width="150" align="center" />
+        <el-table-column prop="goodsCode" label="商品编码" width="280" show-overflow-tooltip />
+        <el-table-column prop="goodsName" label="商品名称" min-width="140" show-overflow-tooltip />
+        <el-table-column label="图片" width="80" align="center">
           <template #default="{ row }">
             <el-image
               v-if="row.picPath"
@@ -243,10 +272,10 @@ onMounted(() => {
             </div>
           </template>
         </el-table-column>
-        <el-table-column prop="specs" label="规格名称" width="320" show-overflow-tooltip />
-        <el-table-column prop="skUnit" label="单位" width="80" />
-        <el-table-column prop="salePrice" label="售价" width="100" />
-        <el-table-column label="关联本地商品" min-width="160">
+        <el-table-column prop="specs" label="规格名称" min-width="200" show-overflow-tooltip />
+        <el-table-column prop="skUnit" label="单位" width="80" align="center" />
+        <el-table-column prop="salePrice" label="售价" width="100" align="center" />
+        <el-table-column label="关联本地商品" min-width="180">
           <template #default="{ row }">
             <el-popover
               v-if="row._boundProduct"
@@ -289,7 +318,7 @@ onMounted(() => {
             <span v-else class="text-gray-400">未关联</span>
           </template>
         </el-table-column>
-        <el-table-column label="操作" width="160" fixed="right">
+        <el-table-column label="操作" width="160" fixed="right" align="center">
           <template #default="{ row }">
             <el-button
               v-if="!row._boundProduct"
@@ -336,7 +365,6 @@ onMounted(() => {
       width="680px"
       :close-on-click-modal="false"
     >
-      <!-- ERP 商品信息卡片 -->
       <div class="flex items-center gap-4 mb-5 p-4 bg-gray-50 rounded-lg">
         <el-image
           v-if="currentErpGoods?.picPath"