zkxw/docs/superpowers/plans/2026-10-11-market-list-card-right-spacing.md

Market List Card Right Spacing Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: 修复市场部通用列表卡片右侧溢出遮挡，并确认 12 个市场入口的卡片布局均受到回归保护。

Architecture: 保留现有通用卡片的 width: 100% 和间距，通过 box-sizing: border-box 将 padding 与 border 纳入宽度计算。预签约页面使用独立卡片，不修改其布局；回归测试同时校验通用卡片盒模型、预签约卡片宽度约束和 12 个路由覆盖。

Tech Stack: Vue 3, Vant 4, CSS, Node.js node:test, Vite

---

Task 1: Add a failing card-width regression test

Files:

• Modify: mobile-oa-h5/src/market/mobile-parity-ui.test.js

• Test: mobile-oa-h5/src/market/mobile-parity-ui.test.js

• Step 1: Write the failing test

Add a test that reads styles/market.css and routes.js, then asserts:

test('all twelve market list entries keep cards inside the horizontal content area', () => {
  const styles = source('../styles/market.css')
  const routes = source('./routes.js')

  assert.match(styles, /\.market-list-card\s*\{[\s\S]*?box-sizing:\s*border-box;[\s\S]*?width:\s*100%;/)
  assert.match(styles, /\.presign-order-card\s*\{[\s\S]*?overflow:\s*hidden;/)
  assert.match(routes, /export const MARKET_ROLES = \['specialist', 'manager'\]/)
  assert.match(routes, /export const MARKET_MODULES = \[[\s\S]*?'presign'[\s\S]*?'protocol'[\s\S]*?'payment-chase'[\s\S]*?'payment'[\s\S]*?'sample'[\s\S]*?'freight'/)
})

• Step 2: Run the focused test and verify RED

Run:

cd mobile-oa-h5 && node --test --test-name-pattern="all twelve market list entries" src/market/mobile-parity-ui.test.js

Expected: one failed test because .market-list-card does not contain box-sizing: border-box before width: 100%.

Task 2: Apply the minimal CSS fix

Files:

• Modify: mobile-oa-h5/src/styles/market.css

• Test: mobile-oa-h5/src/market/mobile-parity-ui.test.js

• Step 1: Add the width-safe box model

Update the existing rule to begin with:

.market-list-card {
  box-sizing: border-box;
  width: 100%;

• Step 2: Run the focused test and verify GREEN

Run:

cd mobile-oa-h5 && node --test --test-name-pattern="all twelve market list entries" src/market/mobile-parity-ui.test.js

Expected: the focused test passes.

Task 3: Verify the market UI suite, build, and dependency graph

Files:

• Verify: mobile-oa-h5/src/market/*.test.js

• Verify: mobile-oa-h5/src/styles/market.css

• Update generated graph: web-admin/graphify-out/* only if the project graph script maps mobile-oa-h5 into the frontend graph

• Step 1: Run all market UI tests

Run:

cd mobile-oa-h5 && node --test src/market/*.test.js

Expected: zero failed tests.

• Step 2: Run the production build

Run:

cd mobile-oa-h5 && pnpm build

Expected: Vite exits with code 0.

• Step 3: Update the frontend knowledge graph

Run:

./scripts/update-graph.sh frontend

Expected: graph generation exits with code 0. Preserve generated changes only when the script includes the modified mobile frontend files.

• Step 4: Check the final diff

Run:

git diff --check -- mobile-oa-h5/src/styles/market.css mobile-oa-h5/src/market/mobile-parity-ui.test.js docs/superpowers/plans/2026-10-11-market-list-card-right-spacing.md
git status --short

Expected: no whitespace errors; only the intended incremental edits are attributed to this fix.