HZW-AI-UI

HZW-AI-UI 是一套面向 AI 应用场景的 Vue3 组件与样式框架（类似 antd 的设计系统思路），内置对话/流式输出/Markdown 渲染/代码高亮等高频能力，开箱即用。

特性

• 现代化的设计系统（SCSS 变量、统一间距/字体/阴影/圆角）
• 面向 AI 对话场景的组件集合（消息、输入、容器、Loading）
• 流式输出（打字机效果）与 useChat 流式请求 hook
• Markdown 渲染 + 代码高亮（markdown-it + highlight.js）
• 默认防 XSS（dompurify）
• 支持全量引入/按需引入

安装

npm i hzw-ai-ui

包名为 hzw-ai-ui，组件库名称为 HZW-AI-UI。

快速开始（全量引入）

// main.ts
import { createApp } from 'vue'
import App from './App.vue'

import HzwAiUi from 'hzw-ai-ui'
import 'hzw-ai-ui/style.css'

createApp(App).use(HzwAiUi, { prefix: 'Hzw' }).mount('#app')

全量注册后，你可以直接使用 HzwButton、HzwChatContainer 等组件（前缀默认 Hzw，可通过 prefix 修改）。

按需引入

// 组件按需 import
import { ChatContainer, ChatMessage, ChatInput } from 'hzw-ai-ui'

// 样式建议仍然全量引入（当前版本为全量 CSS）
import 'hzw-ai-ui/style.css'

组件列表

基础组件

• Button：按钮
• Input：输入框（单行/多行）
• Card：卡片容器
• Avatar：头像
• Loading：加载遮罩/全屏 Loading

AI 专用组件

• ChatMessage：对话消息（支持流式显示）
• ChatInput：对话输入框（Enter 发送、Shift+Enter 换行、自适应高度）
• ChatContainer：完整对话容器（消息列表 + 输入框 + 自动滚动）
• MarkdownRenderer：Markdown 渲染（安全 + 代码高亮）
• CodeBlock：代码块（高亮 + 复制）

兼容组件（不依赖 Tailwind）

为兼容历史命名，保留以下别名组件：

• AiMessage：等价于 ChatMessage
• AiMarkdown：等价于“带光标的 Markdown 渲染”（内部自带渲染器）
• AiPromptInput：等价于 ChatInput

组件用法

ChatContainer（推荐：对话容器）

<template>
  <div style="height: 80vh">
    <ChatContainer :messages="messages" :disabled="isStreaming" @send="onSend" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Message } from 'hzw-ai-ui'
import { ChatContainer } from 'hzw-ai-ui'

const messages = ref<any[]>([
  { id: '1', role: 'assistant', content: '你好，我是 AI。', timestamp: Date.now() }
])
const isStreaming = ref(false)

const onSend = async (text: string) => {
  messages.value.push({ id: Date.now().toString(), role: 'user', content: text, timestamp: Date.now() })

  // 这里演示“前端模拟流式输出”
  isStreaming.value = true
  const id = (Date.now() + 1).toString()
  messages.value.push({ id, role: 'assistant', content: '', streaming: true, timestamp: Date.now() })

  const full = '这是一段流式输出示例：逐字出现。'
  for (let i = 0; i < full.length; i++) {
    const m = messages.value.find((x) => x.id === id)
    if (m) m.content = full.slice(0, i + 1)
    await new Promise((r) => setTimeout(r, 30))
  }
  const m = messages.value.find((x) => x.id === id)
  if (m) m.streaming = false
  isStreaming.value = false
}
</script>

useChat（推荐：对接后端流式接口）

useChat 内部用 fetch + ReadableStream 读取文本流（若你的后端是 SSE，需要在 hook 中对 data: ...\n\n 做拆包）。

import { useChat } from 'hzw-ai-ui'

const { messages, isStreaming, sendMessage, stop, clear } = useChat({
  api: '/api/chat/stream'
})

ChatMessage（单条消息）

<template>
  <ChatMessage role="user" content="你好" :timestamp="Date.now()" />
  <ChatMessage role="assistant" content="你好！" :streaming="true" :stream-speed="30" />
</template>

MarkdownRenderer（Markdown 渲染）

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

<script setup lang="ts">
import { MarkdownRenderer } from 'hzw-ai-ui'
const md = `# 标题\n\n\`\`\`js\nconsole.log('hi')\n\`\`\``
</script>

CodeBlock（代码块）

<template>
  <CodeBlock language="ts" :code="code" title="demo.ts" />
</template>

<script setup lang="ts">
import { CodeBlock } from 'hzw-ai-ui'
const code = `export const a: number = 1`
</script>

Loading（加载）

<template>
  <Loading :visible="true" text="生成中..." :fullscreen="false" />
</template>

样式定制（主题变量）

当前版本使用 SCSS 变量系统，你可以在自己项目里通过覆盖变量来定制主题（例如在入口样式文件中覆盖同名变量）。

变量定义参考：src/styles/variables.scss。

发布到 npm（维护者）

npm run build
# npm publish

MIT