Files
boos e0a5f57793 feat(desktop): embed BoosAPI Desktop client as a subproject
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.
2026-06-22 11:32:57 +08:00

2.2 KiB
Raw Permalink Blame History

description
description
用最小 Vue 示例快速跑起 markstream-vue,并理解默认 CSS 行为与下一步该看哪些页面。

快速开始

示例:

<script setup lang="ts">
import MarkdownRender from 'markstream-vue'

type MarkdownRenderProps = InstanceType<typeof MarkdownRender>['$props']

const md: MarkdownRenderProps['content'] = `# Hello World\n\n这是 **加粗** 的文本。`
const customId: MarkdownRenderProps['customId'] = 'quick-start'
const isDark: MarkdownRenderProps['isDark'] = false
</script>

<template>
  <MarkdownRender
    :content="md"
    :custom-id="customId"
    :is-dark="isDark"
  />
</template>

如果你是为了看 props hover,优先 hover MarkdownRenderProps['content']、MarkdownRenderProps['customId']、MarkdownRenderProps['isDark'],或者上面模板里的对应 attribute。直接 hover 组件名在 Vue 片段里通常信息会更少。

说明:本包的 CSS 会限定在内部 .markstream-vue 容器下,以尽量减少对宿主应用全局样式的影响;主入口已经默认引入样式,正常使用 MarkdownRender 无需再额外 import 'markstream-vue/index.css'。只有当你需要精确控制 CSS 顺序时,才建议手动单独引入。

暗色变量支持两种方式:给祖先节点加 .dark,或给 MarkdownRender 传入 :is-dark="true"(仅对渲染器生效)。

如果使用 Nuxt 或 SSR,请用 <client-only> 包裹。

如果是高频 SSE / token 级流式输出,推荐在外部完成解析后传 :nodes,而不是每个 chunk 都让 MarkdownRender 重新解析整篇内容。

快速试一下:

<script setup lang="ts">
import MarkdownRender from 'markstream-vue'

type MarkdownRenderProps = InstanceType<typeof MarkdownRender>['$props']

const md: MarkdownRenderProps['content'] = `# Hello world

试试 Mermaid:

\`\`\`mermaid
graph LR
A-->B
\`\`\`

试试 D2:

\`\`\`d2
direction: right
Client -> API: request
API -> DB: query
DB -> API: rows
API -> Client: response
\`\`\`
`
</script>

<template>
  <MarkdownRender :content="md" />
</template>

安装 mermaid 或 @terrastruct/d2 才能看到图表预览;未安装时会回退为源码展示。