Skip to content

feat(vue): TV-style drawing template system in floating style toolbar - #264

Closed
EliteOtaku wants to merge 2 commits into
363045841:mainfrom
EliteOtaku:feat/drawing-template-toolbar
Closed

EliteOtaku wants to merge 2 commits into
363045841:mainfrom
EliteOtaku:feat/drawing-template-toolbar

Conversation

@EliteOtaku

Copy link
Copy Markdown
Contributor

feat(vue): TV-style drawing template system in floating style toolbar

Summary

Adds save/apply drawing templates to the floating style toolbar (the toolbar that appears when a drawing is selected): hosts can inject a template store, saved templates appear as a "模板" dropdown on the toolbar (per drawing kind), and applying one merges the stored style into the selected drawings. Includes a save dialog and a useDrawingTemplates composable with pluggable storage.

Complements the existing DrawingSettingsDialog per-kind template persistence (unchanged) with a quick-apply flow directly on the selection toolbar — matching the TV-style floating-toolbar UX.

Changes

  • DrawingStyleToolbar.vue: optional templates prop + applyTemplate/saveTemplate events + a template Dropdown (rendered only when templates exist for the current kind); includes an applyTemplateToSelected-compatible merge path and a save action routed to a new dialog
  • DrawingTemplateSaveDialog.vue: name-input dialog for saving the selected drawing's style as a template (busy/error states included)
  • useDrawingTemplates.ts: composable owning the template list per kind; storage is pluggable via a DrawingTemplateStore prop (list / load / save / remove), with a built-in localStorage implementation when the host doesn't inject one
  • KLineChart.vue: wires the toolbar, dialog and composable together; templates are filtered by the current drawing kind and applied via updateDrawing on each selected drawing

Test plan

  • pnpm --filter @363045841yyt/klinechart test — 29 files / 162 tests PASS
  • pnpm type-check — 0 errors
  • pnpm exec biome check packages/vue — 0 errors
  • Manual: select a drawing → save its style as a template → select another drawing of the same kind → apply the template from the toolbar dropdown → style merges; hosts that don't pass templates/drawingTemplateStore see the toolbar unchanged

Notes

Selected-drawing floating toolbar gains a template dropdown (filtered
by the current drawing kind) plus a 'save as template' dialog:

- KLineChart accepts an optional drawingTemplateStore prop; a
  localStorage-backed default store is used when not injected, so the
  mechanism stays host-agnostic (hosts can route to their own backend)
- apply merges the template style into the selected drawings (may add
  keys updateBatch would reject via its field-intersection guard)
- save captures the primary selected drawing's style under a name

Depends on the selection-timing fix so the toolbar actually appears
right after finishing a drawing.
@363045841

363045841 commented Sep 29, 2026 •

Copy link
Copy Markdown
Owner

因为之前其实已经实现了模板系统,因此我们改为在仓库已有的模板基础设施上实现绘图模板系统,因此关闭本 PR:

  • 复用既有的按图元类型持久化契约(DrawingTemplateStore),不再另起第二套 localStorage 存储;
  • 模板能力同时接入画布浮条与「图元设置」弹窗,两者共享同一份状态;
  • 样式应用只写选区共有字段,并走 core 的 updateBatch 样式守卫。

替代实现见 #269。

@363045841 363045841 closed this Sep 29, 2026
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