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.
54 lines
2.5 KiB
Markdown
54 lines
2.5 KiB
Markdown
# ImageNode — 自定义图片预览
|
|
|
|
`ImageNode` 在内部渲染图片并在用户交互时发出事件。我们为图片点击暴露了一个事件，因此你可以接手点击行为（例如打开自定义图片预览/Lightbox），而无需替换整个渲染器。
|
|
|
|
- 事件：`click` — 当用户在成功加载的图片上触发点击时发出。负载形如 `[Event, string]`，其中第二项为最终用于渲染的图片 URL（可能是 fallback）。
|
|
- 事件：`load` / `error` — 图片加载成功或失败事件，负载为图片 `src`。
|
|
|
|
示例：创建一个包装组件来拦截 `click` 事件，并在 VitePress 中注册它作为自定义组件。
|
|
|
|
1) `CustomImageNode.vue`（包装原始 `ImageNode`，拦截点击并在新标签打开图片作为简易预览）：
|
|
|
|
```vue twoslash
|
|
<script setup lang="ts">
|
|
import { ImageNode } from 'markstream-vue'
|
|
|
|
const emit = defineEmits(['load', 'error', 'click'])
|
|
|
|
function onImageClick(payload: [Event, string]) {
|
|
const [, src] = payload
|
|
// 简单示例：在新标签页打开图片用于预览
|
|
// 在真实项目中可替换为 modal/lightbox 组件
|
|
window.open(src, '_blank')
|
|
// 仍然向外暴露 click 事件，供上层处理
|
|
emit('click', payload)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<ImageNode v-bind="$attrs" @load="emit('load', $event)" @error="emit('error', $event)" @click="onImageClick" />
|
|
</template>
|
|
```
|
|
|
|
2) 在 VitePress 主题增强（`docs/.vitepress/theme/index.ts` 的 `enhanceApp`）中注册自定义组件：
|
|
|
|
```ts twoslash
|
|
import type { App, Component } from 'vue'
|
|
import { setCustomComponents } from 'markstream-vue'
|
|
// docs/.vitepress/theme/index.ts
|
|
declare const CustomImageNode: Component
|
|
|
|
export default ({ app }: { app: App }) => {
|
|
// setCustomComponents 接受一个 id（任意字符串，用于区分不同注册）和组件映射
|
|
// 通过这种方式，库在渲染 ImageNode 时会使用你提供的组件
|
|
setCustomComponents('vitepress-image-preview', { image: CustomImageNode })
|
|
}
|
|
```
|
|
|
|
可选建议：
|
|
- 若希望更丰富的预览体验（缩放、手势、幻灯片），可在 `onImageClick` 中调用诸如 `photoswipe`、`fslightbox` 等库，或使用应用级 modal 管理预览状态。
|
|
|
|
说明小结：
|
|
- `ImageNode` 提供的 `click` 事件是接管自定义预览的入口；常见做法是用一个包装组件替换默认实现并通过 `setCustomComponents` 注册到 VitePress/客户端应用中。
|
|
- 包装组件也可以复用 `load` / `error` 事件，或在内部实现更多逻辑（统计、懒加载补偿、占位符策略等）。
|