docs: plan JD-style status filter for mobile presign list
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zlwuandCursor committed
1 parent
1c53bcd226
commit
8dd816ee1d
1 file changed
+277
@@ -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`
|
||||
Reference in new issue
Block a user