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.
This commit is contained in:
boos
@@ -0,0 +1,471 @@
|
||||
# Vue 2 快速开始
|
||||
|
||||
在你的 Vue 2 项目中开始使用 markstream-vue2。
|
||||
|
||||
## 基础设置
|
||||
|
||||
### 1. 安装
|
||||
|
||||
首先，安装包：
|
||||
|
||||
```bash
|
||||
pnpm add markstream-vue2
|
||||
```
|
||||
|
||||
### 2. 导入样式
|
||||
|
||||
在你的主入口文件（如 `main.js` 或 `main.ts`）中：
|
||||
|
||||
```js
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import 'markstream-vue2/index.css'
|
||||
|
||||
// 对于 Vue 2.6.x，还需要安装并配置 @vue/composition-api
|
||||
// import VueCompositionAPI from '@vue/composition-api'
|
||||
// Vue.use(VueCompositionAPI)
|
||||
|
||||
new Vue({
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
```
|
||||
|
||||
### 3. 使用组件
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import MarkdownRender from 'markstream-vue2'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
MarkdownRender
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
markdown: `# Hello Vue 2!
|
||||
|
||||
这是 **markstream-vue2** - 适用于 Vue 2 的流式 Markdown 渲染器。
|
||||
|
||||
## 功能
|
||||
|
||||
- 代码语法高亮
|
||||
- Mermaid 图表
|
||||
- 数学公式
|
||||
- 还有更多功能！
|
||||
|
||||
\`\`\`javascript
|
||||
console.log('Hello from Vue 2!')
|
||||
\`\`\`
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="app">
|
||||
<MarkdownRender :content="markdown" />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 使用 Vue 2.7+（Composition API）
|
||||
|
||||
Vue 2.7 内置了 Composition API 支持：
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import MarkdownRender from 'markstream-vue2'
|
||||
import { defineComponent, ref } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'App',
|
||||
components: {
|
||||
MarkdownRender
|
||||
},
|
||||
setup() {
|
||||
const markdown = ref(`# Hello Vue 2.7!
|
||||
|
||||
这使用了 Composition API。
|
||||
|
||||
\`\`\`javascript
|
||||
const message = 'Hello from Vue 2.7!'
|
||||
console.log(message)
|
||||
\`\`\`
|
||||
`)
|
||||
return { markdown }
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="app">
|
||||
<MarkdownRender :content="markdown" />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 使用 Vue 2.6.x（@vue/composition-api）
|
||||
|
||||
对于 Vue 2.6.x，安装 `@vue/composition-api`：
|
||||
|
||||
```bash
|
||||
pnpm add @vue/composition-api
|
||||
```
|
||||
|
||||
```js
|
||||
import VueCompositionAPI from '@vue/composition-api'
|
||||
// main.js
|
||||
import Vue from 'vue'
|
||||
import 'markstream-vue2/index.css'
|
||||
|
||||
Vue.use(VueCompositionAPI)
|
||||
```
|
||||
|
||||
然后使用方式与 Vue 2.7 相同：
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import { defineComponent, ref } from '@vue/composition-api'
|
||||
import MarkdownRender from 'markstream-vue2'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'App',
|
||||
components: {
|
||||
MarkdownRender
|
||||
},
|
||||
setup() {
|
||||
const markdown = ref(`# Hello Vue 2.6!
|
||||
|
||||
这使用了 @vue/composition-api。
|
||||
`)
|
||||
return { markdown }
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="app">
|
||||
<MarkdownRender :content="markdown" />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## 启用可选功能
|
||||
|
||||
### 代码语法高亮
|
||||
|
||||
安装依赖：
|
||||
|
||||
```bash
|
||||
pnpm add stream-markdown
|
||||
```
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import MarkdownRender, { MarkdownCodeBlockNode, setCustomComponents } from 'markstream-vue2'
|
||||
|
||||
// 在 MarkdownRender 中使用 Shiki 代码块
|
||||
setCustomComponents({ code_block: MarkdownCodeBlockNode })
|
||||
|
||||
export default {
|
||||
components: { MarkdownRender },
|
||||
data() {
|
||||
return {
|
||||
markdown: `\`\`\`javascript
|
||||
const hello = 'world'
|
||||
console.log(hello)
|
||||
\`\`\``
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MarkdownRender :content="markdown" />
|
||||
</template>
|
||||
```
|
||||
|
||||
### Mermaid 图表
|
||||
|
||||
安装 mermaid：
|
||||
|
||||
```bash
|
||||
pnpm add mermaid
|
||||
```
|
||||
|
||||
导入样式。默认 loader 已经启用，只有在你手动关闭或需要自定义 loader 时才需要调用 `enableMermaid()`：
|
||||
|
||||
```js
|
||||
import { enableMermaid } from 'markstream-vue2'
|
||||
// main.js
|
||||
import 'markstream-vue2/index.css'
|
||||
|
||||
// 可选：重新启用或覆盖 loader
|
||||
enableMermaid()
|
||||
```
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import MarkdownRender from 'markstream-vue2'
|
||||
|
||||
export default {
|
||||
components: { MarkdownRender },
|
||||
data() {
|
||||
return {
|
||||
markdown: `#### Mermaid 图表
|
||||
|
||||
\`\`\`mermaid
|
||||
graph TD
|
||||
A[开始] --> B{能用吗？}
|
||||
B -->|是| C[太好了！]
|
||||
B -->|否| D[继续尝试]
|
||||
\`\`\``
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MarkdownRender :content="markdown" />
|
||||
</template>
|
||||
```
|
||||
|
||||
### D2 图表
|
||||
|
||||
安装 D2：
|
||||
|
||||
```bash
|
||||
pnpm add @terrastruct/d2
|
||||
```
|
||||
|
||||
导入样式。默认 loader 已经启用，只有在你手动关闭或需要自定义 loader 时才需要调用 `enableD2()`：
|
||||
|
||||
```js
|
||||
import { enableD2 } from 'markstream-vue2'
|
||||
// main.js
|
||||
import 'markstream-vue2/index.css'
|
||||
|
||||
// 可选：重新启用或覆盖 loader
|
||||
enableD2()
|
||||
```
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import MarkdownRender from 'markstream-vue2'
|
||||
|
||||
export default {
|
||||
components: { MarkdownRender },
|
||||
data() {
|
||||
return {
|
||||
markdown: `#### D2 图表
|
||||
|
||||
\`\`\`d2
|
||||
direction: right
|
||||
Client -> API: request
|
||||
API -> DB: query
|
||||
DB -> API: rows
|
||||
API -> Client: response
|
||||
\`\`\``
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MarkdownRender :content="markdown" />
|
||||
</template>
|
||||
```
|
||||
|
||||
### 数学公式（KaTeX）
|
||||
|
||||
安装 katex：
|
||||
|
||||
```bash
|
||||
pnpm add katex
|
||||
```
|
||||
|
||||
导入样式。默认 loader 已经启用，只有在你手动关闭或需要自定义 loader 时才需要调用 `enableKatex()`：
|
||||
|
||||
```js
|
||||
import { enableKatex } from 'markstream-vue2'
|
||||
// main.js
|
||||
import 'markstream-vue2/index.css'
|
||||
|
||||
import 'katex/dist/katex.min.css'
|
||||
|
||||
// 可选：重新启用或覆盖 loader
|
||||
enableKatex()
|
||||
```
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import MarkdownRender from 'markstream-vue2'
|
||||
|
||||
export default {
|
||||
components: { MarkdownRender },
|
||||
data() {
|
||||
return {
|
||||
markdown: `#### 数学示例
|
||||
|
||||
行内数学公式：$E = mc^2$
|
||||
|
||||
块级数学公式：
|
||||
|
||||
$$
|
||||
\\int_0^\\infty e^{-x^2} dx = \\frac{\\sqrt{\\pi}}{2}
|
||||
$$`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<MarkdownRender :content="markdown" />
|
||||
</template>
|
||||
```
|
||||
|
||||
## 自定义组件
|
||||
|
||||
你可以使用 `setCustomComponents` 自定义特定节点的渲染方式：
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import MarkdownRender, { setCustomComponents } from 'markstream-vue2'
|
||||
|
||||
// 创建自定义标题组件
|
||||
const CustomHeading = {
|
||||
name: 'CustomHeading',
|
||||
props: ['node'],
|
||||
render(h) {
|
||||
const level = this.node.level || 1
|
||||
const Tag = `h${level}`
|
||||
return h(Tag, { class: 'custom-heading' }, this.node.children.map(c => c.content))
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
components: { MarkdownRender },
|
||||
data() {
|
||||
return {
|
||||
markdown: `# 自定义标题
|
||||
|
||||
此标题使用自定义组件渲染。
|
||||
`
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// 注册自定义组件
|
||||
setCustomComponents('my-app', {
|
||||
heading: CustomHeading
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<MarkdownRender
|
||||
custom-id="my-app"
|
||||
:content="markdown"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-heading {
|
||||
color: #e11d48;
|
||||
border-bottom: 2px solid #e11d48;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 流式内容
|
||||
|
||||
markstream-vue2 支持流式 markdown 内容，适用于 AI 生成的内容：
|
||||
|
||||
```vue
|
||||
<script>
|
||||
import MarkdownRender from 'markstream-vue2'
|
||||
|
||||
export default {
|
||||
components: { MarkdownRender },
|
||||
data() {
|
||||
return {
|
||||
markdown: '',
|
||||
fullText: `# 流式传输演示
|
||||
|
||||
此内容正在**逐步**流式传输。
|
||||
|
||||
## 功能
|
||||
|
||||
1. 渐进式渲染
|
||||
2. 无布局偏移
|
||||
3. 流畅动画
|
||||
|
||||
\`\`\`javascript
|
||||
const streaming = true
|
||||
console.log('流式传输已启用:', streaming)
|
||||
\`\`\`
|
||||
`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
startStreaming() {
|
||||
this.markdown = ''
|
||||
let i = 0
|
||||
const interval = setInterval(() => {
|
||||
if (i < this.fullText.length) {
|
||||
this.markdown += this.fullText[i]
|
||||
i++
|
||||
}
|
||||
else {
|
||||
clearInterval(interval)
|
||||
}
|
||||
}, 20)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<button @click="startStreaming">
|
||||
开始流式传输
|
||||
</button>
|
||||
<MarkdownRender :content="markdown" />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
## VitePress 集成（Vue 2）
|
||||
|
||||
对于使用 Vue 2 的 VitePress，你可以在自定义主题中使用 markstream-vue2：
|
||||
|
||||
```js
|
||||
import MarkdownRender, { setCustomComponents } from 'markstream-vue2'
|
||||
// docs/.vitepress/theme/index.js
|
||||
import DefaultTheme from 'vitepress/theme'
|
||||
import 'markstream-vue2/index.css'
|
||||
|
||||
export default {
|
||||
extends: DefaultTheme,
|
||||
enhanceApp({ app }) {
|
||||
// 全局注册组件
|
||||
app.component('MarkdownRender', MarkdownRender)
|
||||
|
||||
// 设置自定义组件（如果需要）
|
||||
setCustomComponents('vitepress', {
|
||||
// 你的自定义组件
|
||||
})
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 下一步
|
||||
|
||||
- 查看 [Vue 2 组件文档](/zh/guide/vue2-components) 了解所有可用组件
|
||||
- 查看 [API 参考](/zh/guide/api) 获取详细 API 文档
|
||||
- 查看 [示例](/zh/guide/examples) 获取更多使用示例
|
||||
Reference in New Issue
Block a user