boos
e0a5f57793
Vendor the rebranded BoosAPI Desktop client (Tauri + Vue) into metapi as a monorepo subdirectory under desktop/. Source only — node_modules, dist, Cargo target and the upstream .git history are excluded. desktop/ keeps its own independent Cargo workspace (desktop/src-tauri with crates/*); it is not part of the backend boosapi crate, so a `cargo check` at the metapi root still compiles only the backend. Build the desktop app from desktop/src-tauri per desktop/README.md. Note: app icons are still placeholder assets pending the final BoosAPI logo. The updater signing keys live outside the repo and are not included.
47 lines
2.1 KiB
Markdown
47 lines
2.1 KiB
Markdown
# 在 MarkdownRender 中覆盖 MermaidBlockNode（示例）
|
|
|
|
如果你想在 `MarkdownRender` 中完全替换 `mermaid` 渲染器（例如在 `playground-demo`），可以使用 `setCustomComponents`，为 `mermaid` 提供一个 programmatic 的渲染函数，并传入自定义事件处理器来拦截组件的默认行为。
|
|
|
|
示例：
|
|
|
|
```ts twoslash
|
|
import type { MermaidBlockEvent } from 'markstream-vue'
|
|
import { MermaidBlockNode, setCustomComponents } from 'markstream-vue'
|
|
import { h } from 'vue'
|
|
|
|
declare function uploadSvgToServer(svg: string): void
|
|
|
|
setCustomComponents('playground-demo', {
|
|
mermaid: (props: any) => h(MermaidBlockNode, {
|
|
...props,
|
|
// 使用 `h()` 时，通过驼峰的 on<EventName> 传入事件监听器
|
|
onExport: (ev: MermaidBlockEvent) => {
|
|
// 组件在事件中同时暴露 `svgElement` 和 `svgString`，直接优先使用 ev.svgString
|
|
const svgEl = ev.svgElement as SVGElement | null
|
|
const svgStringFromEv = ev.svgString as string | null
|
|
const svgString = svgStringFromEv ?? (svgEl ? new XMLSerializer().serializeToString(svgEl) : null)
|
|
if (svgString) {
|
|
// 将 svgString 上传或保存到后端
|
|
uploadSvgToServer(svgString)
|
|
}
|
|
// 阻止组件默认的导出行为
|
|
ev.preventDefault()
|
|
},
|
|
onCopy: (ev: MermaidBlockEvent<{ type: 'copy', text: string }>) => {
|
|
ev.preventDefault()
|
|
// 复制文本在 ev.payload.text 中（你也可以在这里做埋点/自定义 toast）
|
|
const text = ev.payload?.text ?? ''
|
|
console.log('MermaidBlockNode copy text:', text)
|
|
},
|
|
}),
|
|
})
|
|
```
|
|
|
|
要点：
|
|
|
|
- 在使用 `h()` programmatic 渲染组件时，事件监听器应使用 `on<EventName>` 的驼峰形式（例如 `onExport`、`onCopy`）。
|
|
- 在监听器中调用 `ev.preventDefault()` 可以阻止 `MermaidBlockNode` 的默认处理，完全由你接管行为（如上传、存储或自定义下载）。
|
|
- `MermaidBlockEvent` 可能会在 `ev.svgElement` 中提供渲染后的 `svg` DOM 节点，便于你直接序列化或修改它。
|
|
|
|
如果你希望我把这个示例内联到组件 README 中或把该页面加入 docs 侧栏，我可以继续帮你完成。
|