Skip to content

docs: fix Export plugin docs and refresh demo#5076

Merged
hustcc merged 7 commits into
masterfrom
feat/site-docs-plugin-export
Jun 18, 2026
Merged

docs: fix Export plugin docs and refresh demo#5076
hustcc merged 7 commits into
masterfrom
feat/site-docs-plugin-export

Conversation

@louhaojie99

Copy link
Copy Markdown
Member

📝 Description

对照 src/plugin/export 源码,修正 Export 插件官方教程文档,并重写 examples 示例页

修改文件

路径 说明
site/docs/tutorial/plugins/export.zh.md 中文教程
site/docs/tutorial/plugins/export.en.md 英文教程
examples/src/pages/plugins/export/index.tsx 示例逻辑与交互
examples/src/pages/plugins/export/index.less 左画布 + 右操作面板布局

一、文档(site/docs/tutorial/plugins/

  1. 选项类型名(与 type.ts 一致)

    • Export.ToSVGOptionsExportToSVGOptions
    • Export.ToImageOptionsExportToImageOptions
    • 涉及 exportSVGexportPNGexportJPEGtoSVGtoPNGtoJPEG 的签名与正文
  2. Graph 方法签名(与 api.ts 一致)

    • toSVGtoPNGtoJPEG 的回调类型改为 ExportToSVGCallback(不再使用内联 (dataUri: string) => any 等写法)
    • 补充 toSVGAsynctoPNGAsynctoJPEGAsyncPromise<string> 签名
  3. 选项表

    • 「类型」列统一使用反引号(如 `RectangleLike``boolean``NumberExt.SideOptions`
    • backgroundColor 默认值改为 'white'(与 options.backgroundColor || 'white' 一致)

二、Examples(examples/src/pages/plugins/export/

  1. 布局:左侧 800×600 画布,右侧分组操作面板(index.less
  2. 交互:按三组 API 分列按钮——exportSVG / exportPNG / exportJPEGtoSVG / toPNG / toJPEGtoSVGAsync / toPNGAsync / toJPEGAsync
  3. 反馈message 提示改为中文;toSVG 保存 SVG 文件,toPNG / toJPEG 及其 Async 在新标签页预览 Data URI
  4. 代码:去掉泛型 Pick + graph[type] 写法,改为显式 handler;补充文件头与分组注释(方法名写全,不用通配符缩写)

🖼️ Screenshot

修改前
image
image

修改后

image image

💡 Motivation and Context

官方教程中 Export 插件的选项类型、方法签名与 src/plugin/export 不一致,开发者按文档编写 TypeScript 容易出错;同时 examples 示例完善的更易理解的交互示例。

🧩 Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Enhancement (changes that improvement of current feature or performance)
  • Refactoring (changes that neither fixes a bug nor adds a feature)
  • Test Case (changes that add missing tests or correct existing tests)
  • Code style optimization (changes that do not affect the meaning of the code)
  • Docs (changes that only update documentation)
  • Chore (changes that don't modify src or test files)

🔍 Self Check before Merge

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

@gemini-code-assist gemini-code-assist Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request refactors the Export plugin example by introducing specific handlers for downloading, callback-based exporting, and asynchronous exporting of SVG, PNG, and JPEG formats, alongside updated documentation and styling. Feedback on these changes highlights a potential XSS vulnerability in the image preview function due to the use of innerHTML, and a logic issue where success messages are displayed even if the graph reference is null.

Comment thread examples/src/pages/plugins/export/index.tsx
Comment thread examples/src/pages/plugins/export/index.tsx
@louhaojie99 louhaojie99 requested review from GaoFuhong and lxfu1 May 29, 2026 11:28
@louhaojie99 louhaojie99 force-pushed the feat/site-docs-plugin-export branch 2 times, most recently from b8f1b8f to c28e34b Compare May 29, 2026 11:45
@louhaojie99 louhaojie99 removed request for GaoFuhong and lxfu1 May 29, 2026 11:45
louhaojie99 and others added 6 commits June 1, 2026 15:11
Replace incorrect Export.ToSVGOptions and Export.ToImageOptions with names that match the source types.

Co-authored-by: Cursor <cursoragent@cursor.com>
Correct option type formatting, toSVG callback parameter, and backgroundColor default to match the export plugin source.

Co-authored-by: Cursor <cursoragent@cursor.com>
Use ExportToSVGCallback for toSVG/toPNG/toJPEG callbacks and document toSVGAsync, toPNGAsync, and toJPEGAsync per api.ts.

Co-authored-by: Cursor <cursoragent@cursor.com>
Refactor the export example with left canvas and right control panel, Chinese feedback messages, and clearer API grouping aligned with the plugin docs.

Co-authored-by: Cursor <cursoragent@cursor.com>
Use createElement for image preview instead of innerHTML, and guard graph ref before showing success messages.

Co-authored-by: Cursor <cursoragent@cursor.com>
pnpm@latest requires Node >= 22.13 (node:sqlite); CI install was failing on Node 20.

Co-authored-by: Cursor <cursoragent@cursor.com>
@louhaojie99 louhaojie99 force-pushed the feat/site-docs-plugin-export branch from c28e34b to 3f3b37b Compare June 1, 2026 07:11
@louhaojie99 louhaojie99 requested review from GaoFuhong, hustcc and lxfu1 June 1, 2026 07:15
@louhaojie99

Copy link
Copy Markdown
Member Author

@hustcc

@hustcc hustcc merged commit 3f3cd41 into master Jun 18, 2026
1 check passed
@hustcc hustcc deleted the feat/site-docs-plugin-export branch June 18, 2026 14:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants