feat(theme): 新增可切换的视觉风格预设 - #279
Merged
Merged
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
背景
图表此前只有
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:窄窗口可横向滚动
验证
pnpm --filter @363045841yyt/klinechart-core test:247 文件 / 2682 用例通过pnpm --filter @363045841yyt/klinechart test:32 文件 / 174 用例通过pnpm type-check通过备注