95 lines
3.1 KiB
Markdown
95 lines
3.1 KiB
Markdown
# 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 结构
|