快速开始

@flowporr/* 共享库发布在私有 Verdaccio（npm.flowporr.com）。任意项目按需安装，支持按包粒度引入。

安装

先在项目根 .npmrc 加 registry 映射：

@flowporr:registry=https://npm.flowporr.com/

然后按需安装：

# 前端：Vue3 Markdown 渲染
pnpm add @flowporr/x-markdown-vue

# 前端：Vue3 AI 聊天组件库
pnpm add @flowporr/ai-chat-vue

# 服务端：AI 客户端（DeepSeek / DashScope）
pnpm add @flowporr/ai-server

# 纯逻辑：AI 核心 / 聊天输入引擎
pnpm add @flowporr/ai-core @flowporr/x-sender

x-markdown-vue 最小示例

<script setup lang="ts">
import { ref } from 'vue'
import { MarkdownRenderer } from '@flowporr/x-markdown-vue'
import '@flowporr/x-markdown-vue/style'

const md = ref(`# Hello **World**

\`\`\`js
console.log('Hello')
\`\`\`

$$E = mc^2$$`)
</script>

<template>
  <MarkdownRenderer :markdown="md" />
</template>

可选能力

Shiki 代码高亮、Mermaid 图表、LaTeX 公式都是可选的（peerDependenciesMeta.optional），按需安装对应依赖即可，未安装时优雅降级。

ai-chat-vue 最小示例

<script setup lang="ts">
import { BubbleList } from '@flowporr/ai-chat-vue'
import '@flowporr/ai-chat-vue/style'
import 'element-plus/dist/index.css'  // ai-chat-vue 依赖 Element Plus

const messages = [
  { role: 'user', placement: 'end', content: '你好，帮我写一首诗' },
  { role: 'ai', placement: 'start', content: '好的，为你写一首……' },
]
</script>

<template>
  <BubbleList :list="messages" max-height="300px" />
</template>

ai-server 最小示例

import { createAiClient, getAiConfig } from '@flowporr/ai-server'

// 环境变量：DASHSCOPE_API_KEY / DEEPSEEK_API_KEY / DASHSCOPE_BASE_URL / AI_IMAGE_MODEL
const client = createAiClient('text-generation')
const config = getAiConfig('text-generation')

文档导航

• 命名约定 — 层后缀规则（通用 / -vue / -server）
• 版本 / 废弃 / 发布 — 0.x 版本策略、废弃方式、发布流程
• 组件 — 组件库 live demo 与 API
• 参考 — 纯逻辑包 API