mcpField
M
markstream-vue2-cli

markstream-vue2-cli

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

关于 markstream-vue2-cli

为使用 Vue CLI 或 Webpack 4 风格工具的 Vue 2 项目提供 Markstream 集成指导，涵盖渲染器选项、流式输出、Worker 和安全默认设置。

主要功能

  1. 01Vue 2 CLI 与 Webpack 配置
  2. 02流式输出与历史内容显示
  3. 03CDN Worker 使用建议
  4. 04HTML 与 Mermaid 安全默认设置

适用场景

  1. 01在 Vue 2 Webpack 应用中接入 Markstream
  2. 02配置流式聊天输出
  3. 03通过 CDN 使用 Mermaid 或 KaTeX Worker

安装

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

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

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

附带文件agents/openai.yaml

详细介绍

Markstream Vue 2 CLI

当宿主应用使用 Vue CLI 或其他 Webpack 4 风格技术栈上的 Vue 2 时，使用此技能。

工作流

  1. 确认代码仓库使用 Vue 2，以及 Vue CLI 或 Webpack 4 时代的工具。
  2. 安装 markstream-vue2，并且只安装请求功能所需的 peer 依赖。
  3. 在应用 shell 中导入 markstream-vue2/dist/index.css。
  4. 避免使用 Vite 风格的 ?worker 导入。
    • 需要使用 worker 时，使用 createKaTeXWorkerFromCDN(...) 和 createMermaidWorkerFromCDN(...)。
  5. 优先采用稳定的代码块默认配置，避免脆弱的接线方式。
    • 在 Webpack 4 时代的代码仓库中，stream-diffs（或纯 <pre>）是唯一的代码块运行时；没有 Monaco/stream-monaco 备用方案，也没有 MarkdownCodeBlockNode。
    • 使用顶层的 code-block-options 或直接设置 CodeBlockNode.code-block-options，以采用与渲染器无关的共享选项约定。将标题栏/工具栏属性保留在 code-block-props 中。
    • 对于 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. 使用能满足需求的最精简本地开发或构建命令进行验证。

默认决策

  • 代码块增强不再依赖 Monaco；繁重的 worker 配置仅适用于 Mermaid/KaTeX CDN worker。
  • 对 Mermaid 和 KaTeX，优先使用 CDN worker，而非打包器 worker。
  • 如果代码仓库使用 Vue 2.6，请明确保留 composition-api shim。
  • 除非任务需要保留可信的旧版渲染行为，否则保留 html-policy="safe" 和 Mermaid 严格模式。
  • 如果可信内容区域需要旧版行为，仅在该区域使用 html-policy="trusted" 和 :mermaid-props="{ isStrict: false }"，并说明原因。

实用文档链接

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

评论

支持 Markdown