feat: refine market action bar and metrics sync
This commit is contained in:
@@ -0,0 +1,161 @@
|
||||
# Market Native Action Bar 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:** Move the plugin export actions into Xingtu's native market action row and remove the old top toolbar and unused filter/sort controls.
|
||||
|
||||
**Architecture:** Keep the existing export and batch-submit business logic, but replace the toolbar mount point and DOM shape. The new toolbar becomes a small inline action bar inserted into the native button row beside `自定义指标` and `导出`, while the controller only depends on export-range and action buttons.
|
||||
|
||||
**Tech Stack:** TypeScript, Chrome MV3 content script, jsdom/Vitest
|
||||
|
||||
---
|
||||
|
||||
## File Map
|
||||
|
||||
- Modify: `src/content/market/plugin-toolbar.ts`
|
||||
- Replace the top toolbar with an inline native-style action bar.
|
||||
- Modify: `src/content/market/index.ts`
|
||||
- Remove filter/sort toolbar dependencies.
|
||||
- Modify: `tests/market-content-entry.test.ts`
|
||||
- Update toolbar assertions to the new placement and reduced control set.
|
||||
|
||||
### Task 1: Lock The New Toolbar Shape In Tests
|
||||
|
||||
**Files:**
|
||||
- Modify: `tests/market-content-entry.test.ts`
|
||||
|
||||
- [ ] **Step 1: Write the failing toolbar placement tests**
|
||||
|
||||
Add tests that assert:
|
||||
- the plugin toolbar is inserted next to the native `自定义指标` / `导出` action row
|
||||
- the toolbar no longer renders filter/sort controls
|
||||
- the toolbar still renders export range, custom page input, export button, batch button, and status text
|
||||
|
||||
- [ ] **Step 2: Run the focused test to verify it fails**
|
||||
|
||||
Run: `npx vitest run tests/market-content-entry.test.ts -t "renders the plugin action bar inside the native market action row"`
|
||||
Expected: FAIL because the toolbar still prepends to `document.body` and still contains filter/sort controls.
|
||||
|
||||
- [ ] **Step 3: Add a failing busy-state regression test**
|
||||
|
||||
Assert that during export:
|
||||
- export button is disabled
|
||||
- batch button is disabled
|
||||
- export range select is disabled
|
||||
- custom page input is disabled when visible
|
||||
|
||||
- [ ] **Step 4: Run the focused busy-state test**
|
||||
|
||||
Run: `npx vitest run tests/market-content-entry.test.ts -t "exporting all pages disables the native action bar controls during the task"`
|
||||
Expected: FAIL only if the new toolbar structure breaks existing busy-state selectors.
|
||||
|
||||
### Task 2: Implement The Native Action Bar
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/content/market/plugin-toolbar.ts`
|
||||
|
||||
- [ ] **Step 1: Replace the toolbar mount strategy**
|
||||
|
||||
Implement a helper that finds the native action row containing `自定义指标` and `导出`, then inserts the plugin root into that row.
|
||||
|
||||
- [ ] **Step 2: Replace the toolbar DOM structure**
|
||||
|
||||
Create only:
|
||||
- export range select
|
||||
- custom pages input
|
||||
- export button
|
||||
- batch submit button
|
||||
- export status text
|
||||
|
||||
Remove creation and lookup of:
|
||||
- filter inputs
|
||||
- filter button
|
||||
- sort field select
|
||||
- sort direction select
|
||||
- sort button
|
||||
|
||||
- [ ] **Step 3: Apply native-style button and inline layout styling**
|
||||
|
||||
Use lightweight inline styles / class reuse so the plugin controls visually align with the native button row.
|
||||
|
||||
- [ ] **Step 4: Keep custom-range visibility logic working**
|
||||
|
||||
Preserve:
|
||||
- `current`
|
||||
- `first-5`
|
||||
- `first-10`
|
||||
- `all`
|
||||
- `custom`
|
||||
|
||||
When `custom` is selected, show the input; otherwise hide it.
|
||||
|
||||
- [ ] **Step 5: Run the focused tests to verify green**
|
||||
|
||||
Run:
|
||||
|
||||
```bash
|
||||
npx vitest run tests/market-content-entry.test.ts -t "renders the plugin action bar inside the native market action row|exporting all pages disables the native action bar controls during the task"
|
||||
```
|
||||
|
||||
Expected: PASS
|
||||
|
||||
### Task 3: Remove Toolbar Filter/Sort Dependencies
|
||||
|
||||
**Files:**
|
||||
- Modify: `src/content/market/index.ts`
|
||||
- Modify: `tests/market-content-entry.test.ts`
|
||||
|
||||
- [ ] **Step 1: Remove toolbar filter/sort read paths**
|
||||
|
||||
Delete the toolbar handlers and state reads that depend on removed controls.
|
||||
|
||||
- [ ] **Step 2: Keep export and batch submission behavior intact**
|
||||
|
||||
Ensure:
|
||||
- export still reads the selected range
|
||||
- batch submit still reads the selected range
|
||||
- status text still updates during progress and completion
|
||||
|
||||
- [ ] **Step 3: Update affected tests**
|
||||
|
||||
Adjust tests that previously asserted filter/sort button disabled state so they assert only the remaining controls.
|
||||
|
||||
- [ ] **Step 4: Run focused regression tests**
|
||||
|
||||
Run:
|
||||
|
||||
```bash
|
||||
npx vitest run tests/market-content-entry.test.ts -t "custom export range blocks invalid page counts|prompts for a batch name before submitting the current range|exporting all pages disables the native action bar controls during the task"
|
||||
```
|
||||
|
||||
Expected: PASS
|
||||
|
||||
### Task 4: Final Verification
|
||||
|
||||
**Files:**
|
||||
- Verify only: `src/content/market/plugin-toolbar.ts`
|
||||
- Verify only: `src/content/market/index.ts`
|
||||
- Verify only: `tests/market-content-entry.test.ts`
|
||||
|
||||
- [ ] **Step 1: Run the targeted market content tests**
|
||||
|
||||
Run:
|
||||
|
||||
```bash
|
||||
npx vitest run tests/market-content-entry.test.ts
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Run build**
|
||||
|
||||
Run:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
- [ ] **Step 3: Commit**
|
||||
|
||||
```bash
|
||||
git add src/content/market/plugin-toolbar.ts src/content/market/index.ts tests/market-content-entry.test.ts docs/superpowers/specs/2026-04-23-market-native-action-bar-design.md docs/superpowers/plans/2026-04-23-market-native-action-bar.md
|
||||
git commit -m "feat: move market actions into native action bar"
|
||||
```
|
||||
@@ -0,0 +1,94 @@
|
||||
# Market Native Action Bar Design
|
||||
|
||||
## Goal
|
||||
|
||||
把插件当前位于页面顶部的工具栏移除,并将真正保留的市场页动作迁移到星图原生操作区中,与 `自定义指标` 和原生 `导出` 处于同一行。
|
||||
|
||||
## Confirmed Decisions
|
||||
|
||||
- 删除页面顶部整块插件工具栏。
|
||||
- 只保留这几个插件能力:
|
||||
- 导出范围选择
|
||||
- 自定义页数输入
|
||||
- `导出 CSV`
|
||||
- `提交批次`
|
||||
- 状态文案
|
||||
- 排序和筛选控件从插件工具栏中删除。
|
||||
- 新的插件操作区放在 `自定义指标` 和原生 `导出` 左侧。
|
||||
- 主按钮风格尽量复用星图当前页的原生 `xt-button` / `el-button` 样式。
|
||||
- 不新增弹窗式复杂交互;导出范围继续直接显示在操作区内。
|
||||
|
||||
## Layout
|
||||
|
||||
### Placement
|
||||
|
||||
- 在市场页标题区按钮行内查找 `自定义指标` 和原生 `导出` 所在的横向容器。
|
||||
- 在该容器中插入一个插件 action bar。
|
||||
- 插件 action bar 放在这两个原生按钮的左边。
|
||||
|
||||
### Visual Structure
|
||||
|
||||
插件 action bar 包含:
|
||||
|
||||
- `导出范围` 下拉框
|
||||
- `自定义页数` 输入框,仅在 `自定义` 范围下显示
|
||||
- `导出 CSV` 按钮
|
||||
- `提交批次` 按钮
|
||||
- 状态文本
|
||||
|
||||
视觉目标:
|
||||
|
||||
- 两个主按钮与原生按钮高度、圆角、边框、字体风格一致
|
||||
- 范围选择器和页数输入框比按钮略窄,但整体高度对齐
|
||||
- 状态文案弱化显示,不抢占主要视觉注意力
|
||||
|
||||
## Behavior
|
||||
|
||||
- `导出 CSV` 和 `提交批次` 的业务逻辑保持不变。
|
||||
- 导出范围逻辑保持不变:
|
||||
- 当前页
|
||||
- 前 5 页
|
||||
- 前 10 页
|
||||
- 全部
|
||||
- 自定义
|
||||
- 选择 `自定义` 时显示页数输入框,否则隐藏。
|
||||
- 正在导出或提交时:
|
||||
- `导出 CSV` 按钮禁用
|
||||
- `提交批次` 按钮禁用
|
||||
- 范围下拉禁用
|
||||
- 自定义页数输入禁用
|
||||
- 顶部原工具栏不再出现。
|
||||
|
||||
## DOM Strategy
|
||||
|
||||
- `ensurePluginToolbar()` 不再固定 prepend 到 `document.body`。
|
||||
- 它改为:
|
||||
- 先查找市场页原生操作区
|
||||
- 在原生按钮组内创建或复用插件 action bar
|
||||
- 若页面局部重渲染导致节点丢失,内容脚本在后续同步中重新确保其存在
|
||||
- 工具栏 DOM 结构只保留本次需要的字段,删除筛选和排序输入控件。
|
||||
|
||||
## Controller Impact
|
||||
|
||||
- `src/content/market/index.ts` 不再从工具栏读取筛选和排序输入值。
|
||||
- 现有点击表头排序的能力本轮不主动扩展,但不以顶部工具栏为依赖。
|
||||
- 忙碌状态、状态文本、导出范围读取逻辑继续保留。
|
||||
|
||||
## Testing
|
||||
|
||||
需要增加或更新测试,覆盖:
|
||||
|
||||
- 顶部旧工具栏不再挂载到 `document.body` 顶部
|
||||
- 新 action bar 挂载到原生按钮组,并位于 `自定义指标` / `导出` 左侧
|
||||
- 工具栏只保留导出范围、自定义页数、导出、提交、状态文案
|
||||
- 自定义范围显示/隐藏页数输入框
|
||||
- 导出和提交忙碌状态仍能正确禁用相关控件
|
||||
- 自定义范围校验和批次提交路径不回归
|
||||
|
||||
## Out of Scope
|
||||
|
||||
- 不新增新的筛选 UI
|
||||
- 不新增新的排序 UI
|
||||
- 不重做表头排序交互
|
||||
- 不改动 CSV 内容结构
|
||||
- 不改动批次 payload 结构
|
||||
Reference in New Issue
Block a user