@@ -996,6 +999,8 @@ export default {
.quick-link-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0}
.thumb{width:44px;height:44px;border-radius:4px;object-fit:cover}.thumb.placeholder{display:flex;align-items:center;justify-content:center;background:#f1f5f9;color:#909399;font-size:11px}
.return-match-cell{display:flex;gap:8px;align-items:flex-start}
+.return-match-cell>.thumb{flex-shrink:0}.return-match-cell>div{min-width:0;overflow-wrap:anywhere}
+:deep(.syb-status-column .cell){padding:0 6px;white-space:nowrap}
.link{color:#1677ff;cursor:pointer}
.shopee-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notice{margin-bottom:16px}
diff --git a/web/tests/e2e/syb-cancel-status.spec.ts b/web/tests/e2e/syb-cancel-status.spec.ts
new file mode 100644
index 0000000..79a0932
--- /dev/null
+++ b/web/tests/e2e/syb-cancel-status.spec.ts
@@ -0,0 +1,60 @@
+import { expect, test } from '@playwright/test'
+
+const menus = [{ path: '/workbench', component: 'Layout', menuName: 'Workbench', title: '工作台', visible: '0', children: [{ path: '/syb-products', component: '/goauto/syb-products/index', menuName: 'GoAutoSybProducts', title: 'SYB 商品', visible: '0' }] }]
+
+for (const [width, role] of [[1920, 'admin'], [1440, 'after_sales'], [375, 'purchaser'], [812, 'purchaser']] as const) {
+ test(`status display and retained return controls ${width} ${role}`, async ({ page, context }, testInfo) => {
+ await page.setViewportSize({ width, height: width === 812 ? 375 : 1080 })
+ await page.emulateMedia({ reducedMotion: 'reduce' })
+ await context.addCookies([{ name: 'Admin-Token', value: 'mock-token', domain: 'localhost', path: '/' }])
+ const writes: string[] = []
+ await page.route('**/api/**', async route => {
+ const path = new URL(route.request().url()).pathname
+ if (path.startsWith('/src/api/')) return route.continue()
+ const reply = (data: unknown) => route.fulfill({ json: { code: 200, data } })
+ if (path.endsWith('/api/v1/menurole')) return reply(menus)
+ if (path.endsWith('/api/v1/getinfo')) return reply({ roles: [role], name: '模拟用户', avatar: '', permissions: [] })
+ if (path.endsWith('/syb-products')) return reply({ items: [true, false, null, undefined].map((sybIsCancelled, index) => ({ id: index + 1, orderCode: `MOCK-${index + 1}`, shopeeItemId: String(index + 101), shopeeProductId: index + 101, productTitle: '模拟商品', quantity: 1, parseStatus: 'success', targetColor: '黑色', targetSize: 'XL', sybIsCancelled })), total: 4 })
+ if (path.endsWith('/purchase-tasks/batch-preview')) return reply({ items: [1, 2, 3, 4].map(id => ({ sybProductId: id, processStage: id === 1 ? 'purchase_ready' : 'return_pending', processStageLabel: id === 1 ? '可创建采购' : '退货待确认', processStageReason: id === 1 ? '模拟：原采购资格不变' : '模拟：等待确认使用退货', eligible: id === 1, collectionEligible: false, aiMatchEligible: false })) })
+ if (path.endsWith('/return-matches')) return reply({ items: [2, 3].map(id => ({ id: id + 10, sybProductId: id, status: 'matched', image: 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="44" height="44"%3E%3Crect width="44" height="44" fill="%23dbeafe"/%3E%3C/svg%3E', orderSn: 'MOCK-RETURN-LONG-123456', variationName: '黑色长规格ABCDEFGHIJKLMNOPQRSTUVWXYZ', destroyDeadline: '2020-01-01T00:00:00Z', syncStatus: 'missing' })) })
+ if (route.request().method() !== 'GET') writes.push(path)
+ return reply({ items: [], total: 0 })
+ })
+ await page.goto('/#/syb-products')
+ const table = page.locator('.el-table').first()
+ const rows = table.locator('tbody tr')
+ await expect(rows).toHaveCount(4)
+ await expect(rows.nth(0).locator('.syb-status-column')).toHaveText('已取消')
+ await expect(rows.nth(0).locator('.syb-status-column .el-tag')).toHaveClass(/el-tag--danger/)
+ await expect(rows.nth(1).locator('.syb-status-column')).toHaveText('未取消')
+ await expect(rows.nth(2).locator('.syb-status-column')).toHaveText('未获取')
+ await expect(rows.nth(3).locator('.syb-status-column')).toHaveText('未获取')
+ await expect(page.getByRole('columnheader', { name: '匹配退货', exact: true })).toHaveCount(1)
+ await expect(page.getByRole('columnheader', { name: '匹配到的退货商品', exact: true })).toHaveCount(0)
+ // Display-only: a cancelled row retains the old purchase eligibility.
+ await expect(rows.first().getByRole('button', { name: '采购', exact: true })).toBeEnabled()
+ await expect(rows.nth(1).getByRole('button', { name: '查看对比' })).toHaveCount(1)
+ await expect(rows.nth(1).getByRole('button', { name: '取消匹配', exact: true })).toBeEnabled()
+ if (width >= 1440) {
+ await expect(rows.nth(1).locator('.return-match-cell .thumb')).toHaveCSS('width', '44px')
+ await rows.first().locator('.el-checkbox').click()
+ await expect(page.getByText('本页选择 1 条', { exact: true })).toBeVisible()
+ }
+ const metrics = await table.evaluate(el => {
+ const status = el.querySelector('th.syb-status-column')!
+ const cells = [...el.querySelectorAll('.syb-status-column .cell')]
+ const wrap = el.querySelector('.el-scrollbar__wrap')!
+ return { width: status.getBoundingClientRect().width, fits: cells.every(cell => cell.scrollWidth <= cell.clientWidth && cell.getBoundingClientRect().height <= 24), client: wrap.clientWidth, scroll: wrap.scrollWidth }
+ })
+ expect(metrics.width).toBe(72)
+ expect(metrics.fits).toBe(true)
+ expect(writes).toEqual([])
+ await testInfo.attach('layout-metrics', { body: JSON.stringify(metrics), contentType: 'application/json' })
+ if (width >= 1440) {
+ await page.screenshot({ path: testInfo.outputPath(`syb-status-${width}.png`), fullPage: true })
+ await table.locator('.el-scrollbar__wrap').first().evaluate(el => { el.scrollLeft = el.scrollWidth })
+ await expect(rows.nth(1).getByRole('button', { name: '取消匹配', exact: true })).toBeVisible()
+ await page.screenshot({ path: testInfo.outputPath(`syb-return-${width}.png`), fullPage: true })
+ }
+ })
+}
diff --git a/web/tests/e2e/syb-product-layout.spec.ts b/web/tests/e2e/syb-product-layout.spec.ts
index e15e620..eef579b 100644
--- a/web/tests/e2e/syb-product-layout.spec.ts
+++ b/web/tests/e2e/syb-product-layout.spec.ts
@@ -60,9 +60,10 @@ test('SYB 商品工具栏与列宽按紧凑布局显示', async({ page, context
await expect(page.getByRole('button', { name: /创建采集\s*1/ })).toBeEnabled()
const widths = await page.locator('.el-table__header-wrapper colgroup col').evaluateAll(cols => cols.map(col => Number(col.getAttribute('width'))))
- expect(widths[3]).toBe(260)
- expect(widths[9]).toBeGreaterThanOrEqual(210)
- expect(widths[11]).toBe(132)
+ expect(widths[3]).toBe(72)
+ expect(widths[4]).toBe(260)
+ expect(widths[10]).toBeGreaterThanOrEqual(210)
+ expect(widths[12]).toBe(132)
await page.locator('.shop-input').click()
await page.getByRole('option', { name: '大碼臻選' }).click()