mcpField
M
markstream-vue2-vite

markstream-vue2-vite

github.com/simon-he95开发3.0k44 次安装2 天前更新
代码仓库

关于 markstream-vue2-vite

面向使用 Vite 构建的 Vue 2 应用，指导集成 Markstream，涵盖依赖配置、Worker 导入、流式显示与验证。

主要功能

  1. 01Vue 2 与 Vite 配置指引
  2. 02依赖和 CSS 配置
  3. 03Vite Worker 导入模式
  4. 04流式内容与历史记录显示指引
  5. 05安全 HTML 与 Mermaid 默认设置

适用场景

  1. 01在 Vue 2 与 Vite 应用中集成 Markstream
  2. 02配置流式 AI 聊天及已完成记录
  3. 03在 Vite 构建中打包 Worker

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/simon-he95/markstream-vue --skill markstream-vue2-vite

安装后在 Claude Code 中输入/markstream-vue2-vite确认已加载。

附带文件agents/openai.yaml

详细介绍

Markstream Vue 2 Vite

当宿主应用使用 Vue 2、打包工具使用 Vite 时，请使用此技能。

工作流

  1. 确认仓库使用 Vue 2 和基于 Vite 的工具链。
  2. 安装 markstream-vue2，以及仅限所需的可选对等依赖。
  3. 在重置样式之后导入 markstream-vue2/index.css。
  4. 如果仓库需要打包的 worker，请使用 Vite 的 worker 导入方式。
    • 此处允许使用 markstream-vue2/workers/... ?worker 或 ?worker&inline 模式。
  5. 明确处理 Vue 2.6 仓库中的 Composition API 决策。
    • 对于 AI 聊天或流式 UI，请保留 content，并优先使用内置的平滑流式渲染。
      • smooth-streaming="auto" 是默认值，并会在 typewriter=true 或 max-live-nodes <= 0 时启用。
      • typewriter 只控制闪烁光标，默认值为 false。
      • fade 控制节点进入和流式文本淡入动画，默认值为 true。
    • 流式渲染与历史记录恢复：在聊天 UI 中，同一个 MarkdownRender 先开始流式渲染，之后在 final=true 时切换为历史记录。
      • 流式渲染：smooth-streaming="auto"、:fade="false"、typewriter=true。这是一种稳妥的视觉和性能选择，并非 API 不兼容。此适配器尚未采用 Vue 3 的有界追加淡入效果，因此启用这两种效果前，请先验证其动画表现。
      • 恢复历史记录：:smooth-streaming="false"、:fade="true"、typewriter=false。内容已经完整——控制渲染节奏会拖慢显示速度，而淡入效果则能带来更精致的入场动画。
      • 动态切换：:smooth-streaming="isStreaming ? 'auto' : false"、:fade="!isStreaming"。
    • 仅当内容由 worker 预解析、使用共享 AST 存储或需要自定义 AST 控制时，才改用 nodes + final。
    • 请注意，html-policy 现在默认为 safe，而 Mermaid 严格模式默认通过 mermaid-props 启用。
  6. 使用最精简且实用的 Vite 开发或构建命令进行验证。

默认决策

  • 对于基于 Vite 的 Vue 2 仓库，优先选择打包的 worker，而不是 CDN worker。
  • 确保 UnoCSS 或 Tailwind 重置样式位于 Markstream CSS 之前。
  • 只有在打包工具的具体选择无关紧要时，才使用通用的 markstream-vue2 技能。
  • 除非任务需要保留受信任的旧版渲染行为，否则请使用 html-policy="safe" 和 Mermaid 严格模式。
  • 如果受信任的界面需要旧版行为，仅在该界面使用 html-policy="trusted" 和 :mermaid-props="{ isStrict: false }"，并说明原因。

实用文档

  • docs/guide/vue2-quick-start.md
  • docs/guide/vue2-installation.md
  • docs/guide/tailwind.md
  • docs/guide/troubleshooting.md

评论

支持 Markdown