diff --git a/docs/superpowers/plans/2026-10-14-presign-list-jd-status-filter.md b/docs/superpowers/plans/2026-10-14-presign-list-jd-status-filter.md new file mode 100644 index 00000000..0f5f82a9 --- /dev/null +++ b/docs/superpowers/plans/2026-10-14-presign-list-jd-status-filter.md @@ -0,0 +1,277 @@ +# 预签约列表京东式状态筛选 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:** 去掉预签约订单列表的「重置」按钮，并将状态筛选改为搜索框下左侧京东式轻量下拉条。 + +**Architecture:** 继续使用 Vant `van-dropdown-menu`；删除重置按钮与 `resetFilters`；用 CSS 把下拉条改成左对齐文字+三角的轻量样式。筛选参数与列表加载逻辑不变。 + +**Tech Stack:** Vue 3、Vant 4、`mobile-oa-h5`、Node `node:test` 源码契约测试 + +**Spec:** `docs/superpowers/specs/2026-10-14-presign-list-jd-status-filter-design.md` + +--- + +## File map + +| File | Responsibility | +|------|----------------| +| `mobile-oa-h5/src/market/mobile-parity-ui.test.js` | 契约：有状态筛选、无重置 | +| `mobile-oa-h5/src/views/market/presign/PresignOrderList.vue` | 去掉重置 UI 与 `resetFilters` | +| `mobile-oa-h5/src/styles/market.css` | 京东式左侧轻量下拉样式 | + +无新文件；后端 / `mobile-h5` 不改。 + +--- + +### Task 1: 更新契约测试（先红） + +**Files:** +- Modify: `mobile-oa-h5/src/market/mobile-parity-ui.test.js:113-119` + +- [ ] **Step 1: 改写预签约筛选用例** + +将： + +```js +test('dedicated presign list wires orderStatus filtering and reset on mobile', () => { + const presignList = source('../views/market/presign/PresignOrderList.vue') + assert.match(presignList, /v-model="orderStatus"/) + assert.match(presignList, /buildPresignListParams/) + assert.match(presignList, /resetFilters/) + assert.match(presignList, /orderStatusOptions/) +}) +``` + +替换为： + +```js +test('dedicated presign list wires orderStatus dropdown without reset on mobile', () => { + const presignList = source('../views/market/presign/PresignOrderList.vue') + const styles = source('../styles/market.css') + + assert.match(presignList, /v-model="orderStatus"/) + assert.match(presignList, /buildPresignListParams/) + assert.match(presignList, /orderStatusOptions/) + assert.match(presignList, /van-dropdown-menu/) + assert.doesNotMatch(presignList, /resetFilters/) + assert.doesNotMatch(presignList, />重置重置<`，且样式尚未出现 `.van-dropdown-menu__bar` 规则（或仍有 `.van-button` 规则）。 + +- [ ] **Step 3: Commit（仅测试）** + +```bash +git add mobile-oa-h5/src/market/mobile-parity-ui.test.js +git commit -m "$(cat <<'EOF' +test(mobile-oa-h5): expect JD-style presign status filter without reset + +EOF +)" +``` + +--- + +### Task 2: 去掉重置按钮与 `resetFilters` + +**Files:** +- Modify: `mobile-oa-h5/src/views/market/presign/PresignOrderList.vue` + +- [ ] **Step 1: 更新模板筛选区** + +将搜索下方筛选行改为仅保留下拉（无重置按钮）： + +```vue +
+ + + +
+``` + +- [ ] **Step 2: 删除 `resetFilters` 函数** + +删除： + +```js +function resetFilters() { + keyword.value = '' + orderStatus.value = '' + return reload() +} +``` + +保留 `keyword`、`orderStatus`、`orderStatusOptions`、`reload`；搜索框 `@clear="reload"` 不变。 + +- [ ] **Step 3: Commit** + +```bash +git add mobile-oa-h5/src/views/market/presign/PresignOrderList.vue +git commit -m "$(cat <<'EOF' +fix(mobile-oa-h5): remove reset button from presign list filters + +EOF +)" +``` + +--- + +### Task 3: 京东式左侧轻量下拉样式 + +**Files:** +- Modify: `mobile-oa-h5/src/styles/market.css`（约 `.presign-order-page__filter-row` 一段） + +- [ ] **Step 1: 替换筛选行样式** + +将现有： + +```css +.presign-order-page__filter-row { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + gap: 8px; + margin-top: 8px; +} + +.presign-order-page__filter-row .van-dropdown-menu, +.presign-order-page__filter-row .van-button { + min-height: 44px; +} + +.presign-order-page__filter-row .van-button { + min-width: 84px; +} +``` + +替换为： + +```css +.presign-order-page__filter-row { + display: flex; + align-items: center; + margin-top: 2px; + margin-left: -4px; +} + +.presign-order-page__filter-row .van-dropdown-menu { + width: auto; + height: 40px; + background: transparent; +} + +.presign-order-page__filter-row .van-dropdown-menu__bar { + height: 40px; + box-shadow: none; + background: transparent; +} + +.presign-order-page__filter-row .van-dropdown-menu__item { + flex: none; + justify-content: flex-start; + padding: 0 10px; +} + +.presign-order-page__filter-row .van-dropdown-menu__title { + padding: 0; + font-size: 13px; + font-weight: 500; + color: var(--presign-text); +} + +.presign-order-page__filter-row .van-dropdown-menu__title::after { + margin-top: -2px; + border-color: transparent transparent currentColor currentColor; + opacity: 0.7; +} + +.presign-order-page__filter-row .van-dropdown-menu__title--active, +.presign-order-page__filter-row .van-dropdown-menu__title--down { + color: var(--presign-primary); + font-weight: 600; +} +``` + +说明：去掉描边盒与右侧按钮占位；标题左对齐、字号偏小，接近京东筛选条。 + +- [ ] **Step 2: 跑测试确认通过** + +Run: + +```bash +cd /Users/wuzilong/work/00code/zkxw/mobile-oa-h5 && node --test src/market/mobile-parity-ui.test.js +``` + +Expected: PASS（全部用例，尤其 `dedicated presign list wires orderStatus dropdown without reset on mobile`） + +- [ ] **Step 3: Commit** + +```bash +git add mobile-oa-h5/src/styles/market.css +git commit -m "$(cat <<'EOF' +style(mobile-oa-h5): JD-style left status dropdown on presign list + +EOF +)" +``` + +--- + +### Task 4: 手工验收 + +- [ ] **Step 1: 本地打开预签约列表** + +市场专员或地区经理进入【预签约订单】： + +1. 搜索框下仅有「全部状态 ▾」，无「重置」 +2. 点开可选草稿 / 进行中 / 已转正式 / 已作废 +3. 选中后列表刷新；选「全部状态」恢复全部 +4. 搜索 clear 仍可清空 keyword 并刷新 + +- [ ] **Step 2: 若验收通过，无需额外提交**（代码已在 Task 2–3 提交） + +若样式与 demo B 偏差较大，微调 `market.css` 后追加 commit： + +```bash +git add mobile-oa-h5/src/styles/market.css +git commit -m "$(cat <<'EOF' +style(mobile-oa-h5): tweak presign status dropdown spacing + +EOF +)" +``` + +--- + +## Spec coverage checklist + +| Spec 要求 | Task | +|-----------|------| +| 去掉重置按钮 | Task 2 | +| 京东式左侧轻量下拉 | Task 3 | +| 选项与筛选语义不变 | Task 2（保留 options / reload） | +| 更新契约测试 | Task 1 | +| 不改其他市场模块 / 后端 | 全计划未触碰 | + +## Self-review notes + +- 无 TBD / 占位步骤 +- 测试命令与期望失败/通过条件明确 +- Vant 类名以 Vant 4 为准：`van-dropdown-menu__bar` / `__title` / `__title--active`