Просмотр исходного кода

docs: plan JD-style status filter for mobile presign list

Co-authored-by: Cursor <cursoragent@cursor.com>
zlwu 2 недель назад
Родитель
Сommit
8dd816ee1d
1 измененных файлов с 277 добавлено и 0 удалено
  1. 277 0
      docs/superpowers/plans/2026-10-14-presign-list-jd-status-filter.md

+ 277 - 0
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, />重置</)
+  assert.match(styles, /\.presign-order-page__filter-row\s*\{/)
+  assert.match(styles, /\.presign-order-page__filter-row\s+\.van-dropdown-menu__bar/)
+  assert.doesNotMatch(styles, /\.presign-order-page__filter-row\s+\.van-button\s*\{/)
+})
+```
+
+- [ ] **Step 2: 跑测试确认失败**
+
+Run:
+
+```bash
+cd /Users/wuzilong/work/00code/zkxw/mobile-oa-h5 && node --test src/market/mobile-parity-ui.test.js
+```
+
+Expected: FAIL — 仍匹配到 `resetFilters` / `>重置<`,且样式尚未出现 `.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
+      <div class="presign-order-page__filter-row">
+        <van-dropdown-menu active-color="#0a9f6d">
+          <van-dropdown-item
+            v-model="orderStatus"
+            :options="orderStatusOptions"
+            @change="reload"
+          />
+        </van-dropdown-menu>
+      </div>
+```
+
+- [ ] **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`