feat(vue): drawing template save/apply/delete on canvas toolbar - #269
Merged
Merged
Conversation
Save and apply drawing styles directly from the selection toolbar, which previously only offered these actions inside the settings dialog. The toolbar reuses the existing per-kind IndexedDB template contract instead of introducing a second store, so templates saved in either place are interchangeable. Applying a template writes only the color fields shared by the current selection and goes through updateBatch, keeping the core style guard intact. Saving is offered for a single selection only, since a template is captured from one drawing. DropMenu groups menu entries and is used here rather than Dropdown, which only renders a flat list of options. The template save form is extracted so the settings dialog and the toolbar share it, and the settings dialog now treats a falsy persistence result as a failure. Toolbar tooltips move to BaseTooltip so the whole bar behaves consistently.
模板领域此前散在 Vue 层：绘图设置自带一套 localStorage 模板读写，画布浮条 又加了另一套持久化与状态副本，两处各自维护列表和 busy/error，保存语义上 还多出一条只在浮条路径存在的 overwrite。 模板领域归入 core（types/impl/codec + IndexedDB store），Vue 只保留界面与 响应式门面。模板列表按“仓库实例 + 图元类型”共享为唯一状态源，两个入口 读到的是同一份数据；保存成功的勾只由“保存已有模板”触发。样式与文本位置 解析拆为 resolveTemplateStyle 与 resolveTemplateLabel，不再混进需要图元才能 算样式的组合函数；core 公开面收敛到跨模块真正用到的符号，模板字段集合只保留 一处定义。 模板菜单行操作抽到 DrawingTemplateMenu，画布浮条与设置弹窗共用；测试替身只 模拟 load/save，CRUD 走 core 真实仓库，不再复制业务逻辑。
保存图元模板弹窗此前自带宽高与圆角的一套输入样式（6px 内边距、4px 圆角、 字号继承），与其他弹窗的输入字段视觉不一致。改为沿用通用弹窗字段约定： 标签 11px 弱化色、输入框 34px 高 / 8px 圆角 / 12px 字号、统一的边框与 输入背景 token，并补上禁用态与过渡。
4 tasks done
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
1 participant
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.
feat(vue): drawing template save/apply/delete on canvas toolbar
Summary
在画布浮条（选中图元后出现的工具栏）与「图元设置」弹窗上补齐绘图模板的保存 / 应用 / 覆盖 / 删除，并把模板领域下沉到 core，两个入口共享同一份状态。全部基于仓库已有的模板基础设施实现，不引入第二套存储。
背景
main 上已有按图元类型的模板契约（
DrawingTemplateStore+ 设置弹窗内的模板读写），但画布浮条只能进设置弹窗才能操作模板。本分支把模板能力搬到浮条，并顺手把分散在 Vue 层的模板逻辑统一到 core：此前设置弹窗自带一套 localStorage 读写，浮条又加了一套持久化与状态副本，两处各自维护列表和 busy/error。改动
core
engine/drawing/template/：types.ts契约、impl/templateMapping.ts样式/文本映射、impl/codec.tsIndexedDB 编解码与脏数据校验、impl/indexedDbTemplateStore.ts仓库。createDrawingTemplateStore(createPersistence?)提供持久化 DI 缝，测试可在存储边界注入替身，不必复刻 store 逻辑。createDrawingTemplateStore、captureDrawingTemplate、resolveTemplateStyle、resolveTemplateLabel、templateStyleFields及相关类型）。TEMPLATE_STYLE_KEYS只保留一处定义；codec 校验用Record<TemplateStyleKey, (value: unknown) => boolean>，新增字段不补校验会编译失败。captureDrawingTemplate在无可写字段时返回null（不再产出空模板）；样式与文本位置解析拆成resolveTemplateStyle/resolveTemplateLabel。vue
useDrawingTemplates：按「仓库实例 + 图元类型」共享的响应式门面（单一状态源），暴露只读 computed 与保存/删除/重载；浮条与设置弹窗读到同一份列表。useCanvasDrawingTemplates：浮条门面，在共享 CRUD 之上叠加选区字段交集与样式/文本写入。DrawingTemplateMenu.vue：模板菜单（分组、行内保存/删除、保存成功勾选），浮条与设置弹窗共用，避免两处各写一套行操作。DrawingTemplateSaveDialog.vue：保存模板弹窗，字段样式沿用其他弹窗的通用输入约定。DropMenu.vue：通用分组菜单（trigger/item-action插槽）。DrawingStyleToolbar.vue/DrawingSettingsDialog.vue/KLineChart.vue/common/CanvasToolbar.vue：接线与图标尺寸。drawing-settings/templates.ts及其测试（重复的 localStorage store）。load/save，CRUD 走 core 真实仓库。行为
upsert（原地替换，保持列表位置），成功勾选由持久化结果直接驱动，无定时器与自恢复状态机。updateBatch，保留样式校验。测试
pnpm --filter @363045841yyt/klinechart-core buildpnpm type-checkClose #264
#264 另起了一套 localStorage 模板存储，与本分支已有的 per-kind 持久化重复。本分支在仓库既有基础设施上实现了同一目标（并在浮条与设置弹窗间共享状态），因此关闭 #264，改用本 PR。