From e6327ae9da5da7d6ac1bed214a50a44085ee8a9d Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sun, 28 Dec 2025 17:57:10 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90ele=E3=80=91spu=20todo=20?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/product/spu/components/sku-list.vue  | 52 +++++++++++++------
 .../spu/components/spu-and-sku-list.vue       |  3 +-
 .../src/views/mall/product/spu/form/index.vue |  1 -
 3 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/apps/web-ele/src/views/mall/product/spu/components/sku-list.vue b/apps/web-ele/src/views/mall/product/spu/components/sku-list.vue
index d92eeb16a..06dc595b9 100644
--- a/apps/web-ele/src/views/mall/product/spu/components/sku-list.vue
+++ b/apps/web-ele/src/views/mall/product/spu/components/sku-list.vue
@@ -490,16 +490,25 @@ defineExpose({
       @checkbox-all="handleSelectionChange"
     >
       <VxeColumn v-if="isComponent" type="checkbox" width="45" fixed="left" />
-      <!-- TODO @puhui999：这里的宽度貌似有点问题，图片会寄出来； -->
-      <VxeColumn align="center" title="图片" max-width="140" fixed="left">
+      <VxeColumn
+        align="center"
+        title="图片"
+        width="80"
+        min-width="80"
+        fixed="left"
+      >
         <template #default="{ row }">
-          <ElImage
-            v-if="row.picUrl"
-            :src="row.picUrl"
-            class="h-[50px] w-[50px] cursor-pointer"
-            :preview-src-list="[row.picUrl]"
-            fit="cover"
-          />
+          <div class="flex items-center justify-center overflow-hidden">
+            <ElImage
+              v-if="row.picUrl"
+              :src="row.picUrl"
+              class="h-[50px] w-[50px] cursor-pointer"
+              :preview-src-list="[row.picUrl]"
+              :preview-teleported="true"
+              :z-index="3000"
+              fit="cover"
+            />
+          </div>
         </template>
       </VxeColumn>
       <template v-if="formData?.specType && !isBatch">
@@ -583,15 +592,24 @@ defineExpose({
       }"
     >
       <VxeColumn v-if="isComponent" type="checkbox" width="45" fixed="left" />
-      <!-- TODO @puhui999：这里的宽度貌似有点问题，图片会寄出来； -->
-      <VxeColumn align="center" title="图片" max-width="140" fixed="left">
+      <VxeColumn
+        align="center"
+        title="图片"
+        width="80"
+        min-width="80"
+        fixed="left"
+      >
         <template #default="{ row }">
-          <ElImage
-            :src="row.picUrl"
-            class="h-[60px] w-[60px] cursor-pointer"
-            :preview-src-list="[row.picUrl]"
-            fit="cover"
-          />
+          <div class="flex items-center justify-center overflow-hidden">
+            <ElImage
+              :src="row.picUrl"
+              class="h-[60px] w-[60px] cursor-pointer"
+              :preview-src-list="[row.picUrl]"
+              :preview-teleported="true"
+              :z-index="3000"
+              fit="cover"
+            />
+          </div>
         </template>
       </VxeColumn>
       <template v-if="formData?.specType">
diff --git a/apps/web-ele/src/views/mall/product/spu/components/spu-and-sku-list.vue b/apps/web-ele/src/views/mall/product/spu/components/spu-and-sku-list.vue
index a46770be7..06cf9959e 100644
--- a/apps/web-ele/src/views/mall/product/spu/components/spu-and-sku-list.vue
+++ b/apps/web-ele/src/views/mall/product/spu/components/spu-and-sku-list.vue
@@ -130,12 +130,13 @@ watch(
     <VxeColumn field="id" align="center" title="商品编号" min-width="30" />
     <VxeColumn title="商品图" min-width="80">
       <template #default="{ row }">
-        <!-- TODO @puhui999：它的 preview 貌似展示有点奇怪，不像 antd 是全屏的。。。 -->
         <ElImage
           v-if="row.picUrl"
           :src="row.picUrl"
           class="h-[30px] w-[30px] cursor-pointer"
           :preview-src-list="[row.picUrl]"
+          :preview-teleported="true"
+          :z-index="3000"
           fit="cover"
         />
       </template>
diff --git a/apps/web-ele/src/views/mall/product/spu/form/index.vue b/apps/web-ele/src/views/mall/product/spu/form/index.vue
index 3b5bb6ea7..5f584c9a8 100644
--- a/apps/web-ele/src/views/mall/product/spu/form/index.vue
+++ b/apps/web-ele/src/views/mall/product/spu/form/index.vue
@@ -320,7 +320,6 @@ onMounted(async () => {
       <ElCard class="h-full w-full" v-loading="formLoading">
         <template #header>
           <div class="flex items-center justify-between">
-            <!-- TODO @puhui999：这里有告警，需要修复下。 -->
             <ElTabs v-model="activeTabName" @tab-change="handleTabChange">
               <ElTabPane label="基础设置" name="info" />
               <ElTabPane label="价格库存" name="sku" />