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.
111 lines
2.6 KiB
Markdown
111 lines
2.6 KiB
Markdown
# D2 快速开始
|
||
|
||
D2 图表在 markstream-vue 中是渐进式渲染：只要语法可用就会先出预览，后续流式补全时持续更新。如果渲染失败，会保留上一次成功的预览，同时保留源码。
|
||
|
||
## 1. 安装与引入
|
||
|
||
```bash
|
||
pnpm add @terrastruct/d2
|
||
```
|
||
|
||
无需额外 CSS。保持 `markstream-vue/index.css` 在 reset 之后，并在使用 Tailwind/UnoCSS 时放入 `@layer components`：
|
||
|
||
```css
|
||
@import 'modern-css-reset';
|
||
|
||
@layer components {
|
||
@import 'markstream-vue/index.css';
|
||
}
|
||
```
|
||
|
||
## 2. 流式示例
|
||
|
||
```vue twoslash
|
||
<script setup lang="ts">
|
||
import MarkdownRender from 'markstream-vue'
|
||
import { ref } from 'vue'
|
||
|
||
const content = ref('')
|
||
const steps = [
|
||
'```d2\n',
|
||
'direction: right\n',
|
||
'Client -> API: request\n',
|
||
'API -> DB: query\n',
|
||
'DB -> API: rows\n',
|
||
'API -> Client: response\n',
|
||
'```\n',
|
||
]
|
||
|
||
let i = 0
|
||
const id = setInterval(() => {
|
||
content.value += steps[i] || ''
|
||
i++
|
||
if (i >= steps.length)
|
||
clearInterval(id)
|
||
}, 120)
|
||
</script>
|
||
|
||
<template>
|
||
<MarkdownRender :content="content" />
|
||
</template>
|
||
```
|
||
|
||
快速试一下：
|
||
|
||
```md
|
||
\`\`\`d2
|
||
direction: right
|
||
Client -> API: request
|
||
API -> DB: query
|
||
DB -> API: rows
|
||
API -> Client: response
|
||
\`\`\`
|
||
```
|
||
|
||
## 3. 高级组件：`D2BlockNode`
|
||
|
||
如果你需要工具栏（复制/导出/模式切换）或自定义主题、渐进节奏，可直接使用 `D2BlockNode`：
|
||
|
||
```vue twoslash
|
||
<script setup lang="ts">
|
||
import type { D2BlockNodeProps } from 'markstream-vue'
|
||
import { D2BlockNode } from 'markstream-vue'
|
||
|
||
const node = {
|
||
type: 'code_block',
|
||
language: 'd2',
|
||
code: 'direction: right\nClient -> API: request\nAPI -> DB: query',
|
||
raw: 'direction: right\nClient -> API: request\nAPI -> DB: query',
|
||
} satisfies D2BlockNodeProps['node']
|
||
</script>
|
||
|
||
<template>
|
||
<D2BlockNode :node="node" :progressive-interval-ms="500" />
|
||
</template>
|
||
```
|
||
|
||
常用 props：
|
||
- `progressiveRender`, `progressiveIntervalMs` 控制流式增量渲染节奏。
|
||
- `themeId`, `darkThemeId` 指定 D2 主题。
|
||
- `showHeader`, `showModeToggle`, `showCopyButton`, `showExportButton`, `showCollapseButton` 控制工具栏。
|
||
|
||
## 4. 深色模式
|
||
|
||
传入 `:is-dark="true"`（或在 `MarkdownRender` 外层添加 `.dark`）即可启用深色模式。组件会以应用主题为准，避免被系统偏好色打断。
|
||
|
||
## 5. 自定义 loader（可选）
|
||
|
||
如果你之前手动关闭了 loader，或需要从 CDN/全局变量加载：
|
||
|
||
```ts twoslash
|
||
import { enableD2, setD2Loader } from 'markstream-vue'
|
||
|
||
// 重新启用默认 loader
|
||
enableD2()
|
||
|
||
// 或设置自定义 loader
|
||
setD2Loader(() => (window as any).D2)
|
||
```
|
||
|
||
当 `@terrastruct/d2` 未安装时会回退成源码展示，安装后会自动切换为预览。
|