OPC/goauto
2
0
Fork 0
Code Issues 196 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): preview PDD color images (#168)

Browse Source
This commit is contained in:
QiuSW
2026-08-31 15:55:06 +08:00
parent 40aea6a59f
commit 1d0b0ce086
4 changed files with 23 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/views/goauto/pdd-products/index.vue
+1 -1
View File
@@ -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>
web/src/views/goauto/shopee-products/index.vue
+1 -1
View File
@@ -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>
web/tests/e2e/pdd-product-module.spec.ts
+11 -3
View File
@@ -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();
web/tests/e2e/shopee-pdd-picker.spec.ts
+10
View File
@@ -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)