From 55e321f2660faea32ff50e15fc6dced1de1d45bc Mon Sep 17 00:00:00 2001 From: zlwu <704541015@qq.com> Date: Sun, 11 Oct 2026 16:22:20 +0800 Subject: [PATCH] docs: document the market card overflow fix. --- ...1-market-list-card-right-spacing-design.md | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 docs/superpowers/specs/2026-10-11-market-list-card-right-spacing-design.md diff --git a/docs/superpowers/specs/2026-10-11-market-list-card-right-spacing-design.md b/docs/superpowers/specs/2026-10-11-market-list-card-right-spacing-design.md new file mode 100644 index 00000000..d2e7315a --- /dev/null +++ b/docs/superpowers/specs/2026-10-11-market-list-card-right-spacing-design.md @@ -0,0 +1,37 @@ +# 市场部列表卡片右侧遮挡修复设计 + +## 问题与根因 + +市场部通用列表卡片 `.market-list-card` 同时设置了 `width: 100%`、`padding: 14px` 和 `border: 1px`,但未设置 `box-sizing: border-box`。在默认 `content-box` 盒模型下,卡片实际外宽比父容器多 30px,因此右侧超出视口并被遮挡。 + +## 影响范围 + +市场部共有 12 个列表入口,由“市场专员 / 地区经理”两个角色与 6 个业务模块组合生成。 + +| 模块 | 专员页 | 经理页 | 当前布局 | +| --- | --- | --- | --- | +| 预签约订单 | 不受影响 | 不受影响 | 独立 `PresignOrderCard` | +| 协议单 | 受影响 | 受影响 | 共用 `MarketListCard` | +| 催缴信息 | 受影响 | 受影响 | 共用 `MarketListCard` | +| 缴费信息 | 受影响 | 受影响 | 共用 `MarketListCard` | +| 样本信息 | 受影响 | 受影响 | 共用 `MarketListCard` | +| 运费信息 | 受影响 | 受影响 | 共用 `MarketListCard` | + +## 修复方案 + +仅在 `.market-list-card` 上增加 `box-sizing: border-box`。保留现有 `width: 100%`、内边距、边框和卡片内容布局,使内边距与边框计入容器宽度。 + +不修改预签约订单的独立卡片,不引入全局盒模型规则,不调整数据和业务交互。 + +## 验证方案 + +1. 先在 `mobile-parity-ui.test.js` 增加卡片宽度约束回归测试,并确认测试在修复前失败。 +2. 增加最小 CSS 修复后,确认相同测试通过。 +3. 运行市场移动端相关 Node 测试与 `mobile-oa-h5` 生产构建。 +4. 在窄屏视口下检查通用列表卡片左右留白对称,并确认预签约订单卡片未回归。 + +## 完成标准 + +- 受影响的 10 个通用市场列表页卡片不再超出父容器。 +- 12 个入口的卡片均保持左右间距,无水平遮挡。 +- 不改变卡片内容、按钮、状态标签和列表加载行为。