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.
128 lines
3.6 KiB
Markdown
128 lines
3.6 KiB
Markdown
# 代码块头部自定义
|
||
|
||
可以通过 props 控制代码块头部的显示，以及通过命名插槽替换头部左/右两侧内容。
|
||
|
||
常用 props：
|
||
- `showHeader` — 是否显示头部
|
||
- `showCollapseButton` — 头部折叠按钮
|
||
- `showCopyButton` — 复制按钮
|
||
- `showExpandButton` — 展开/收起按钮
|
||
- `showPreviewButton` — 预览按钮
|
||
- `showFontSizeButtons` — 字号控制按钮组
|
||
|
||
排查问题
|
||
|
||
如果遇到样式冲突（例如 Tailwind 的 reset 或 util 导致头部布局变化），请查看主排查页面以获取 Tailwind 导入顺序和解决方法：`/zh/guide/troubleshooting`。
|
||
|
||
示例
|
||
|
||
下面是常用的示例（README 中也包含同样的示例）；这些示例通常可以直接在项目中复用。
|
||
|
||
隐藏头部（简单用法）
|
||
|
||
```vue twoslash
|
||
<script setup lang="ts">
|
||
import type { CodeBlockNodeProps } from 'markstream-vue'
|
||
import { CodeBlockNode } from 'markstream-vue'
|
||
|
||
const node = {
|
||
type: 'code_block',
|
||
language: 'javascript',
|
||
code: 'console.log(1)',
|
||
raw: 'console.log(1)',
|
||
} satisfies CodeBlockNodeProps['node']
|
||
</script>
|
||
|
||
<template>
|
||
<CodeBlockNode
|
||
:node="node"
|
||
:show-header="false"
|
||
:loading="false"
|
||
/>
|
||
</template>
|
||
```
|
||
|
||
使用 `#header-left` / `#header-right` 插槽替换默认头部
|
||
|
||
```vue twoslash
|
||
<script setup lang="ts">
|
||
import type { CodeBlockNodeProps } from 'markstream-vue'
|
||
import { CodeBlockNode } from 'markstream-vue'
|
||
|
||
const node = {
|
||
type: 'code_block',
|
||
language: 'html',
|
||
code: '<div>Hello</div>',
|
||
raw: '<div>Hello</div>',
|
||
} satisfies CodeBlockNodeProps['node']
|
||
</script>
|
||
|
||
<template>
|
||
<CodeBlockNode
|
||
:node="node"
|
||
:loading="false"
|
||
:show-copy-button="false"
|
||
>
|
||
<template #header-left>
|
||
<div class="flex items-center space-x-2">
|
||
<span class="text-sm font-medium">My HTML</span>
|
||
</div>
|
||
</template>
|
||
|
||
<template #header-right>
|
||
<div class="flex items-center space-x-2">
|
||
<button class="px-2 py-1 bg-blue-600 text-white rounded">
|
||
Run
|
||
</button>
|
||
<button class="px-2 py-1 bg-gray-200 dark:bg-gray-700 rounded">
|
||
Inspect
|
||
</button>
|
||
</div>
|
||
</template>
|
||
</CodeBlockNode>
|
||
</template>
|
||
```
|
||
|
||
自定义加载占位符（当 `stream=false` 且 `loading=true` 时显示）
|
||
|
||
```vue twoslash
|
||
<script setup lang="ts">
|
||
import type { CodeBlockNodeProps } from 'markstream-vue'
|
||
import { CodeBlockNode } from 'markstream-vue'
|
||
|
||
const code = 'print("hello")'
|
||
const isLoading = true
|
||
const node = {
|
||
type: 'code_block',
|
||
language: 'python',
|
||
code,
|
||
raw: code,
|
||
} satisfies CodeBlockNodeProps['node']
|
||
</script>
|
||
|
||
<template>
|
||
<CodeBlockNode
|
||
:node="node"
|
||
:stream="false"
|
||
:loading="isLoading"
|
||
>
|
||
<template #loading="{ loading, stream }">
|
||
<div v-if="loading && !stream" class="p-4 text-center">
|
||
<div class="animate-spin inline-block w-6 h-6 border-2 border-current border-t-transparent rounded-full" />
|
||
<p class="mt-2 text-sm text-gray-500">
|
||
Initializing editor...
|
||
</p>
|
||
</div>
|
||
</template>
|
||
</CodeBlockNode>
|
||
</template>
|
||
```
|
||
|
||
事件与注意事项
|
||
|
||
- 组件在复制操作时会触发 `copy` 事件（事件回调接收复制的文本）；使用 `@copy="onCopy"` 监听。
|
||
- 组件仅在你监听 `@preview-code` 时才会触发 `previewCode` 事件；负载为 `{ node, artifactType, artifactTitle, id }`。（不监听时，内置预览弹窗仅支持 HTML。）
|
||
- 若要隐藏某类默认按钮，可使用布尔 props：`showCollapseButton`、`showCopyButton`、`showExpandButton`、`showPreviewButton`、`showFontSizeButtons`。
|
||
- 可通过 `showTooltips` 控制当前代码块头部按钮 tooltip 的显示。
|
||
- `showHeader` 控制是否渲染头部栏。
|