BoosAPI/desktop/libs/markstream-vue/docs/zh/guide/codeblock-header.md

代码块头部自定义

可以通过 props 控制代码块头部的显示，以及通过命名插槽替换头部左/右两侧内容。

常用 props：

• showHeader — 是否显示头部
• showCollapseButton — 头部折叠按钮
• showCopyButton — 复制按钮
• showExpandButton — 展开/收起按钮
• showPreviewButton — 预览按钮
• showFontSizeButtons — 字号控制按钮组

排查问题

如果遇到样式冲突（例如 Tailwind 的 reset 或 util 导致头部布局变化），请查看主排查页面以获取 Tailwind 导入顺序和解决方法：/zh/guide/troubleshooting。

示例

下面是常用的示例（README 中也包含同样的示例）；这些示例通常可以直接在项目中复用。

隐藏头部（简单用法）

<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 插槽替换默认头部

<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 时显示）

<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 控制是否渲染头部栏。