From d392ed54c4735816add83f82accdb2559e4d9db8 Mon Sep 17 00:00:00 2001
From: QiuSW <105186638@qq.com>
Date: Thu, 20 Aug 2026 15:42:15 +0800
Subject: [PATCH] refactor(#51): compact SYB product list layout
---
web/src/views/goauto/syb-products/index.vue | 27 ++++++++----------
web/tests/e2e/syb-product-layout.spec.ts | 31 +++++++++++++++++++++
2 files changed, 42 insertions(+), 16 deletions(-)
create mode 100644 web/tests/e2e/syb-product-layout.spec.ts
diff --git a/web/src/views/goauto/syb-products/index.vue b/web/src/views/goauto/syb-products/index.vue
index a6c3630..ba0488b 100644
--- a/web/src/views/goauto/syb-products/index.vue
+++ b/web/src/views/goauto/syb-products/index.vue
@@ -5,10 +5,10 @@
本页不展示采购任务、PDD 订单号、快递单号和支付状态。
@@ -304,9 +299,9 @@ export default { .page-card { min-height: calc(100vh - 124px); } .page-heading { display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;h1{margin:0 0 6px;font-size:24px;color:#1f2937}p{margin:0;color:#606266;line-height:1.5} } .search-form{padding:16px 16px 0;margin-bottom:16px;border:1px solid #e5e7eb;border-radius:8px;background:#f8fafc} -.batch-toolbar{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 12px;margin-bottom:12px;border:1px solid #dbeafe;border-radius:8px;background:#f8fafc} +.selection-count{display:inline-flex;align-items:center;min-height:32px;white-space:nowrap;color:#606266} +.selection-count strong{margin:0 4px;font-variant-numeric:tabular-nums;color:#1e40af} .sync-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;margin-bottom:12px;border:1px solid #bfdbfe;border-radius:8px;background:#eff6ff}.sync-banner>div{display:flex;flex-wrap:wrap;gap:8px 16px}.sync-banner.is-failed,.sync-banner.is-interrupted{border-color:#fecaca;background:#fef2f2}.sync-banner.is-succeeded{border-color:#bbf7d0;background:#f0fdf4} -.batch-toolbar strong{font-variant-numeric:tabular-nums;color:#1e40af} .primary{font-weight:600;color:#1f2937}.muted{font-size:12px;color:#909399} .missing{color:#b91c1c} .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} diff --git a/web/tests/e2e/syb-product-layout.spec.ts b/web/tests/e2e/syb-product-layout.spec.ts new file mode 100644 index 0000000..c8f6610 --- /dev/null +++ b/web/tests/e2e/syb-product-layout.spec.ts @@ -0,0 +1,31 @@ +import { expect, test } from '@playwright/test' + +test('SYB 商品工具栏与列宽按紧凑布局显示', async({ page, context }) => { + await context.addCookies([{ name: 'Admin-Token', value: 'prototype-test-token', domain: 'localhost', path: '/' }]) + await page.route('**/api/**', async route => { + const url = new URL(route.request().url()) + if (url.pathname.startsWith('/src/api/')) return route.continue() + if (url.pathname.endsWith('/api/v1/getinfo')) return route.fulfill({ json: { code: 200, data: { roles: ['admin'], name: '管理员', avatar: '', introduction: '', permissions: [] }}}) + if (url.pathname.endsWith('/api/admin/v1/syb-products')) return route.fulfill({ json: { code: 200, data: { items: [{ id: 1, orderCode: 'SYB001', shopeeItemId: '26154802794', shopeeProductId: 9, productTitle: '用于验证加宽后的虾皮商品标题区域', shopName: '大碼臻選', targetColor: '黑色', targetSize: 'XL', quantity: 2, unitPriceCent: 1000, parseStatus: 'success', manuallyConfirmed: false }], total: 1, page: 1, pageSize: 20 }}}) + return route.fulfill({ json: { code: 200, data: [] }}) + }) + + await page.goto('http://localhost:9527/#/syb-products/index') + await expect(page.getByRole('button', { name: '店铺管理' })).toHaveCount(0) + await expect(page.getByText('已选择 0 条', { exact: true })).toBeVisible() + await expect(page.locator('.batch-toolbar')).toHaveCount(0) + + const reset = await page.getByRole('button', { name: '重置' }).boundingBox() + const reparse = await page.getByRole('button', { name: '重新解析' }).boundingBox() + expect(reset).not.toBeNull(); expect(reparse).not.toBeNull() + expect(Math.abs((reset?.y || 0) - (reparse?.y || 0))).toBeLessThan(2) + expect(reparse?.x || 0).toBeGreaterThan((reset?.x || 0) + (reset?.width || 0)) + await expect(page.getByRole('button', { name: '重新解析' })).toBeDisabled() + + await page.locator('.el-table__body-wrapper tbody tr').first().locator('.el-checkbox').click() + await expect(page.getByText('已选择 1 条', { exact: true })).toBeVisible() + await expect(page.getByRole('button', { name: '重新解析' })).toBeEnabled() + + const widths = await page.locator('.el-table__header-wrapper colgroup col').evaluateAll(cols => cols.map(col => Number(col.getAttribute('width')))) + expect(widths.slice(0, 11)).toEqual([48, 76, 120, 421, 100, 128, 56, 110, 80, 80, 45]) +})