Skip to content

feat(theme): 新增可切换的视觉风格预设 - #279

Merged
363045841 merged 6 commits into
mainfrom
integration/pr-268
Sep 30, 2026
Merged

363045841 merged 6 commits into
mainfrom
integration/pr-268

Conversation

@363045841

Copy link
Copy Markdown
Owner

背景

图表此前只有 theme: light | dark | auto 一个维度,界面配色全部来自固定的深浅两套 Token;颜色编辑器只能逐项手改,没有成组的视觉风格可切换,很难快速得到一套完整配色。

变更

Core:视觉风格预设

  • settings.colorPresetSettings.preset 新增风格标识(pro / exchange / terminal / zen / quant),省略时为 pro;每种风格提供 light / dark 两个变体,互不干扰明暗偏好。
  • 解析链路统一为 基础明暗主题 → 风格变体 → 亚洲涨跌约定 → 用户颜色覆盖。resolveTheme 返回完整 Theme,resolveThemeColors 保留原渲染器接口;Vue 侧改用 resolveTheme + themeToCssVars,Tooltip 与颜色编辑器共享同一份最终颜色。
  • 风格色表集中在 foundation/tokens/presets/。涨跌、成交量与收益颜色继承基础主题,强调色不做涨跌色;十色分类色盘直接映射 MA/BOLL 等指标。
  • settings.theme 默认值由 auto 改为 dark,标签由「主题」改为「明暗模式」。
  • 预设只调整配色:间距、字号、字族与动效一律沿用基础主题(dfe6cad8)。此前 Terminal / Exchange / Zen / Quant 会改写 spacing 与 typography,同一套控件在不同风格下尺寸和字号不一致,Token 消费方还要按风格逐一验证。

Vue:设置入口

  • 设置弹窗「样式」分区新增 ThemePresetPanel,卡片色样与实际图表共用 Core Token;点击即写入草稿并立即提交持久化,弹窗保持打开(此前必须点「确定」才生效)。
  • 选中态只保留勾选标记与键盘焦点环,去掉与边框叠加的强调色描边。
  • 未知或已删除的风格标识在归一化阶段过滤,手动颜色覆盖不会被清空。

BaseTabs:窄窗口可横向滚动

  • tab 溢出时始终接管滚轮,并在边缘继续传递事件,避免窄窗口下设置弹窗无法切换标签;拖拽改由 document 接管,指针可在短 tab 条上移开。

验证

  • pnpm --filter @363045841yyt/klinechart-core test:247 文件 / 2682 用例通过
  • pnpm --filter @363045841yyt/klinechart test:32 文件 / 174 用例通过
  • pnpm type-check 通过
  • 新增用例:五风格 × 明暗 × 市场方向的序列化恢复、用户覆盖优先级、基底不被污染、spacing/typography/motion 不被预设改写、未知预设过滤

备注

  • 建议浏览器复核:设置弹窗「样式」分区的卡片色样、点击即生效、取消与刷新恢复,以及窄窗口下标签横向滚动。
  • 本分支包含此前 主题选择(测试版) #268(主题选择测试版)的合并提交。

beiweimd and others added 6 commits September 29, 2026 18:21
Selecting a preset only updated the dialog draft, so the chart kept the old style until the user pressed confirm. Emit the preset immediately, persist it, and re-render the chart while the dialog stays open; the button only drops the other unconfirmed edits.
The pressed outline and hover border override doubled the card border with the accent colour. The check mark already marks the selection, so keep only the neutral border and the keyboard focus ring.
Overflowing tab bars had a hidden scrollbar and only mapped the wheel to scrollLeft behind an opt-in draggable prop, so the settings dialogs could not be scrolled at all on a narrow window. Always map the wheel when the tabs overflow and pass it through at the edges so the page still scrolls; run the drag on document so the pointer can leave the short bar mid-drag.
@363045841
363045841 merged commit 1d76475 into main Sep 30, 2026
4 checks passed
@363045841
363045841 deleted the integration/pr-268 branch September 30, 2026 10:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

2 participants