diff --git a/web/src/views/goauto/pdd-products/index.vue b/web/src/views/goauto/pdd-products/index.vue
index 6540848..ff4ad35 100644
--- a/web/src/views/goauto/pdd-products/index.vue
+++ b/web/src/views/goauto/pdd-products/index.vue
@@ -16,7 +16,7 @@
           <el-table-column label="goods_id" prop="goodsId" min-width="150" />
           <el-table-column label="商品 / 店铺" min-width="240"><template #default="{ row }"><div class="primary">{{ row.title || '资料待完善' }}</div><div class="muted">{{ row.shopName || '尚未填写店铺' }}</div></template></el-table-column>
           <el-table-column label="状态 / 采集任务" min-width="190"><template #default="{ row }"><el-tag :type="statusMeta(row.status).type">{{ statusMeta(row.status).label }}</el-tag><div :class="row.collectionSelectable ? 'collection-ready' : 'muted'">{{ collectionStateText(row) }}</div></template></el-table-column>
-          <el-table-column label="颜色图" width="100" align="center"><template #default="{ row }"><el-image v-if="row.colorImages?.[0]?.imagePath" class="list-color-thumb" :src="row.colorImages[0].imagePath" :alt="`${row.colorImages[0].color || ''}颜色图`" fit="cover" lazy><template #error><span class="list-color-placeholder">暂无图片</span></template></el-image><span v-else class="list-color-placeholder">暂无图片</span></template></el-table-column>
+          <el-table-column label="颜色图" width="100" align="center"><template #default="{ row }"><el-image v-if="row.colorImages?.[0]?.imagePath" class="list-color-thumb" :src="row.colorImages[0].imagePath" :preview-src-list="[row.colorImages[0].imagePath]" :alt="`${row.colorImages[0].color || ''}颜色图，单击或双击查看大图`" fit="cover" lazy preview-teleported><template #error><span class="list-color-placeholder">暂无图片</span></template></el-image><span v-else class="list-color-placeholder">暂无图片</span></template></el-table-column>
           <el-table-column label="规格" min-width="180"><template #default="{ row }">{{ specsSummary(row.specs) }}</template></el-table-column>
           <el-table-column label="颜色价格" min-width="130"><template #default="{ row }">{{ priceSummary(row.specs) }}</template></el-table-column>
           <el-table-column label="更新时间" width="170"><template #default="{ row }">{{ parseTime(row.updatedAt) }}</template></el-table-column>
diff --git a/web/src/views/goauto/shopee-products/index.vue b/web/src/views/goauto/shopee-products/index.vue
index 2c5a15e..c047280 100644
--- a/web/src/views/goauto/shopee-products/index.vue
+++ b/web/src/views/goauto/shopee-products/index.vue
@@ -45,7 +45,7 @@
         <el-input v-model="pddPicker.keyword" placeholder="goods_id、标题或店铺" clearable @clear="searchPddPicker" @keyup.enter="searchPddPicker"><template #append><el-button @click="searchPddPicker">搜索</el-button></template></el-input>
         <p class="muted picker-help">最近更新的 PDD 商品；可输入 goods_id、标题或店铺搜索。</p>
         <el-table v-loading="pddPicker.loading" :data="pddPicker.items" border size="small" style="margin-top:12px" max-height="360" empty-text="最近更新的 PDD 商品，可输入 goods_id、标题或店铺搜索">
-          <el-table-column label="颜色图" width="86" align="center"><template #default="{ row }"><el-image v-if="row.colorImages?.[0]?.imagePath" class="picker-thumb" :src="row.colorImages[0].imagePath" :alt="`${row.colorImages[0].color || ''}颜色图`" fit="cover" lazy><template #error><span class="picker-image-placeholder">暂无图片</span></template></el-image><span v-else class="picker-image-placeholder">暂无图片</span></template></el-table-column>
+          <el-table-column label="颜色图" width="86" align="center"><template #default="{ row }"><el-image v-if="row.colorImages?.[0]?.imagePath" class="picker-thumb" :src="row.colorImages[0].imagePath" :preview-src-list="[row.colorImages[0].imagePath]" :alt="`${row.colorImages[0].color || ''}颜色图，单击或双击查看大图`" fit="cover" lazy preview-teleported><template #error><span class="picker-image-placeholder">暂无图片</span></template></el-image><span v-else class="picker-image-placeholder">暂无图片</span></template></el-table-column>
           <el-table-column label="goods_id" prop="goodsId" width="150" />
           <el-table-column label="标题 / 店铺" min-width="200"><template #default="{ row }"><div>{{ row.title || '资料待完善' }}</div><div class="muted">{{ row.shopName || '未填写店铺' }}</div></template></el-table-column>
           <el-table-column label="最近更新" width="150"><template #default="{ row }">{{ parseTime(row.updatedAt) }}</template></el-table-column>
diff --git a/web/tests/e2e/pdd-product-module.spec.ts b/web/tests/e2e/pdd-product-module.spec.ts
index db321cf..b957446 100644
--- a/web/tests/e2e/pdd-product-module.spec.ts
+++ b/web/tests/e2e/pdd-product-module.spec.ts
@@ -23,6 +23,7 @@ const product = {
 test('PDD 商品列表、详情和编辑流程符合已确认原型', async ({ page, context }) => {
   let updatePayload: any;
   await context.addCookies([{ name: 'Admin-Token', value: 'prototype-test-token', domain: 'localhost', path: '/' }]);
+  await page.route('**/static/**', route => route.fulfill({ status: 200, contentType: 'image/png', body: Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=', 'base64') }));
   await page.route('**/api/**', async route => {
     const url = new URL(route.request().url());
     if (url.pathname.endsWith('/api/v1/menurole')) return route.fulfill({ json: { code: 200, data: pddProductRoute } });
@@ -44,7 +45,7 @@ test('PDD 商品列表、详情和编辑流程符合已确认原型', async ({ p
       return;
     }
     if (url.pathname.endsWith('/api/admin/v1/pdd-products')) {
-      await route.fulfill({ json: { code: 200, data: { items: [product], total: 1, page: 1, pageSize: 20 } } });
+      await route.fulfill({ json: { code: 200, data: { items: [product, { ...product, id: 2, goodsId: '719834019024', title: '无图商品', colorImages: undefined }], total: 2, page: 1, pageSize: 20 } } });
       return;
     }
     await route.fulfill({ json: { code: 200, data: [] } });
@@ -53,12 +54,19 @@ test('PDD 商品列表、详情和编辑流程符合已确认原型', async ({ p
   await page.goto('/#/pdd-products');
   await expect(page.getByRole('button', { name: '添加', exact: true })).toBeVisible();
   await expect(page.getByText('夏季防晒冰丝袖套')).toBeVisible();
-  await expect(page.getByText('¥25.90')).toBeVisible();
+  await expect(page.getByText('¥25.90').first()).toBeVisible();
+  const listImage = page.getByRole('img', { name: '黑色颜色图，单击或双击查看大图' }).first()
+  await listImage.click();
+  await expect(page.locator('.el-image-viewer__wrapper')).toBeVisible();
+  await page.locator('.el-image-viewer__close').click();
+  await listImage.dblclick();
+  await expect(page.locator('.el-image-viewer__wrapper')).toBeVisible();
+  await page.locator('.el-image-viewer__close').click();
   await expect(page.getByRole('columnheader', { name: '颜色图' })).toBeVisible();
   await expect(page.getByRole('columnheader', { name: '销量 / 评价' })).toHaveCount(0);
   await expect(page.getByText('暂无图片', { exact: true })).toBeVisible();
 
-  await page.getByRole('button', { name: '查看' }).click();
+  await page.getByRole('button', { name: '查看' }).first().click();
   await expect(page.getByText('PDD 商品详情')).toBeVisible();
   await expect(page.locator('.spec-title').filter({ hasText: '颜色分类' })).toBeVisible();
   await expect(page.getByText('XL')).toBeVisible();
diff --git a/web/tests/e2e/shopee-pdd-picker.spec.ts b/web/tests/e2e/shopee-pdd-picker.spec.ts
index 2f860e3..3bcf96f 100644
--- a/web/tests/e2e/shopee-pdd-picker.spec.ts
+++ b/web/tests/e2e/shopee-pdd-picker.spec.ts
@@ -4,6 +4,7 @@ const routes = [{ path: '/goauto-order-workbench', component: 'Layout', menuName
 
 test('PDD 选择器默认最近五条并支持搜索与清空回退', async({ page, context }) => {
   await context.addCookies([{ name: 'Admin-Token', value: 'prototype-test-token', domain: 'localhost', path: '/' }])
+  await page.route('**/static/**', route => route.fulfill({ status: 200, contentType: 'image/png', body: Buffer.from('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=', 'base64') }))
   const listURLs: URL[] = []
   await page.route('**/api/**', async route => {
     const url = new URL(route.request().url())
@@ -24,6 +25,15 @@ test('PDD 选择器默认最近五条并支持搜索与清空回退', async({ pa
   await page.getByRole('button', { name: '搜索并选择', exact: true }).click()
   await expect(page.getByText('最近商品', { exact: true })).toBeVisible()
   await expect(page.getByText('暂无图片', { exact: true }).first()).toBeVisible()
+  const pickerImage = page.getByRole('img', { name: '黑色颜色图，单击或双击查看大图' })
+  await pickerImage.click()
+  await expect(page.locator('.el-image-viewer__wrapper')).toBeVisible()
+  await page.locator('.el-image-viewer__close').click()
+  await expect(page.getByText('最近商品', { exact: true })).toBeVisible()
+  await pickerImage.dblclick()
+  await expect(page.locator('.el-image-viewer__wrapper')).toBeVisible()
+  await page.locator('.el-image-viewer__close').click()
+  await expect(page.getByText('已选择 PDD-1', { exact: true })).toHaveCount(0)
   expect(listURLs[0].searchParams.get('pageSize')).toBe('5')
   expect(listURLs[0].searchParams.get('status')).toBe('active')
   expect(listURLs[0].searchParams.has('keyword')).toBe(false)