3.1 KiB
3.1 KiB
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 结构