mcpField
M
markstream-vue2

markstream-vue2

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

关于 markstream-vue2

为非 Vue CLI／Webpack 4 特定场景的 Vue 2.6 或 2.7 应用提供 Markstream 集成指导，涵盖流式输出、安全渲染和限定作用域的组件覆盖。

主要功能

  1. 01Vue 2.6 与 2.7 集成
  2. 02流式输出与历史内容显示
  3. 03HTML 与 Mermaid 安全默认设置
  4. 04限定作用域的组件映射

适用场景

  1. 01在 Vue 2 应用中接入 Markstream
  2. 02显示流式聊天回复和历史内容
  3. 03为指定标签覆盖组件

安装

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

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

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

附带文件agents/openai.yaml

详细介绍

Markstream Vue 2

当宿主应用使用 Vue 2，且并非特定的 Vue CLI / Webpack 4 边缘情况时，使用此技能。

工作流

  1. 确认仓库使用 Vue 2.6 或 2.7。
  2. 安装 markstream-vue2。
    • 仅当仓库使用 Vue 2.6 且采用 Composition API 模式时，才添加 @vue/composition-api。
  3. 在重置样式之后导入 markstream-vue2/index.css。
  4. 从 <MarkdownRender :content="markdown" /> 开始。
    • 对于 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 启用。
  5. 当任务需要覆盖项或受信任标签时，使用作用域限定的自定义组件映射。
  6. 使用能满足需求的最小开发或构建命令进行验证。

默认决策

  • Vue 2.7 可以使用内置的 Composition API 支持。
  • Vue 2.6 仅当代码库实际依赖 Composition API 时才需要 @vue/composition-api。
  • 如果仓库使用 Vue CLI / Webpack 4，优先选择 markstream-vue2-cli。
  • 如果仓库使用 Vue 2，并通过 Vite 导入 worker，优先选择 markstream-vue2-vite。
  • 除非任务需要保留受信任的旧版渲染行为，否则请保留 html-policy="safe" 和 Mermaid 严格模式。
  • 如果受信任的界面需要旧版行为，只在该界面使用 html-policy="trusted" 和 :mermaid-props="{ isStrict: false }"，并说明原因。

有用的文档目标

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

评论

支持 Markdown