star-chart-search-enhancer/docs/superpowers/specs/2026-04-23-market-native-action-bar-design.md

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