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
parent d9c78ecc73
commit e0a5f57793
2305 changed files with 449355 additions and 0 deletions
@@ -0,0 +1,127 @@
+# 代码块头部自定义
+
+可以通过 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` 控制是否渲染头部栏。