别再自己拼凑了！这款 Vue 3.5+ 严肃产品级组件库，把 AI 对话、工作流和复杂数据全包了！Vue 3.5+ 严肃

大家好，我是鱼樱！！！

关注公众号【鱼樱AI实验室】持续分享更多前端和AI辅助前端编码新知识~~

不定时写点笔记写点生活~写点前端经验。

在当前环境下，纯前端开发者可以通过技术深化、横向扩展、切入新兴领域（MCP TOOLS AI应用产品方向等）以及产品化思维找到突破口。（不管写多久的代码，技术深度广度如何一定要具备独立赚钱的能力呀！！老铁们，因为总有一天你不在职场总有一天会面对选择和职场的无情）

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

前端最卷的年代或许真该结束了AI Agent 工程师将是未来的主角，人类只决策和思考商业化模式，AI执行的年代正在如火如荼的进行着；

抱歉各位最近一年忙于生计兼职花费时以及带娃花费精力和电商店铺人也比较多技术文章这块实属拖堂了，快一年了才更新，但是技术文章还是会不定时更新一些核心的技术分享，和大家一起学习前端路程以及未来的AI视觉AI商业思维。

未来已来，AI时代 Agent工程师时代，不再严格区分前端后端有好模型tokens充足你就是资深程序员（但是不一定是资深AI工程师哦）~

AI时代的组件库必须要有AI组件+ AI易懂的skills

在 AI 爆发的今天，如果你的项目还在用传统的组件库拼凑界面，那你一定体会过这些痛苦：

开发 AI 助理：要手写 Markdown 解析、代码高亮、打字机流式 SSE 渲染、思维链折叠，还要做代码块复制甚至是在线运行……
开发可视化应用：需要引入复杂的拖拽连线库、甘特图（Gantt）库，光是调 D3 连线、连线状态的撤销重做（Undo/Redo）就让人抓狂。
底层基础建设：要配分片上传、下载进度、防抖节流请求、多语言，还要兼顾 Nuxt SSR 适配和暗黑模式切换。

每个功能都要满世界找不同的第三方包，结果导致包体积臃肿、版本冲突，维护成本爆炸。

今天，给大家安利一款为严肃产品团队量身打造的 Vue 3.5+ 全栈级组件系统 —— YH-UI。它不是简单地去 Clone 现有的 UI 库，而是将 UI、AI 交互、工作流、高级请求与主题引擎 完美融合的 Monorepo 级解决方案。

🚀 为什么是 YH-UI？

YH-UI 聚焦于产品级的深度与广度，提供了一整套能够直接支撑复杂商业级产品的矩阵：

领域	YH-UI 提供的核心能力
核心 UI 组件	深度适配 Vue 3.5+，支持完善的 TS 类型、SSR 服务端渲染适配
AI 原生套件	Chat 对话、Sender 输入框、Thought Chain 思维链、Code Block 高亮、Code Runner 在线运行、Artifacts、Prompts 等
数据与工作流	拖拽式 Flow 编辑器、Gantt 甘特图、大数据虚拟滚动、历史记录快照、协同 API
底座与网络	内置 `@yh-ui/request` 客户端，支持 SSE 流解析、请求队列、大文件分片上传/下载
主题与工程化	运行时 CSS 变量改写、暗黑模式、高矮密度、色盲友好模式；官方支持 Nuxt 模块与按需引入

🔥 五大硬核卖点深度解析

1. 天生为 AI 而生：全套 AI 交互组件（开箱即用）

开发 AI 原生应用（AI-Native）再也不需要手写复杂的打字机效果和 Markdown 解析了。YH-UI 提供了全套 AI 交互原件：

yh-ai-chat / yh-ai-bubble：专为对话流设计的聊天气泡，内置极致优雅的打字机流式输出与 SSE（Server-Sent Events）拆包解析缓冲。
yh-ai-thought-chain：优雅地展示大模型推理的“思维链”，支持一键展开/折叠。
yh-ai-code-runner / yh-ai-code-editor：不单单是代码高亮，它直接提供了沙箱级的代码编辑器和在线运行面板，让用户在网页上就能直接跑代码！

<!-- 极简配置，即可获得一个高完成度的 AI 对话界面 -->
<template>
  <yh-ai-chat 
    v-model:messages="messages" 
    :loading="loading" 
    @send="handleSend" 
  />
</template>

2. 拖拽工作流 & 甘特图：拯救复杂后台

工作流（Flow）和甘特图（Gantt）是现代 Admin 系统中最难啃的骨头。YH-UI 直接将它们做成了高内聚的组件：

yh-flow：高度定制化的节点画布编辑器。支持自定义连线、节点拉伸、拖拽吸附。最贴心的是，它内置了历史记录管理器，连线的新增和重连会自动写入 history 快照，撤销（Undo）/ 重做（Redo）一行代码即可搞定！
yh-gantt-chart：支持大数据渲染、任务依赖连线、时间轴平滑滚动的甘特图组件，专为项目管理与协同设计。

3. 超强的 `@yh-ui/request` 异步请求网络库

通常我们用 Axios 还要自己包一层 Hook。YH-UI 随包附带的 @yh-ui/request，简直是 Vue 研发的物理外挂：

自动/手动首跑：完美处理 Vue 挂载时的首次自动加载与手动触发。
接口级并发队列与缓存：避免同一个请求在短时间内重复发送，支持灵活的缓存过期策略。
SSE 自动重连与跨块缓冲：在网络抖动或流式传输被拆包时，自动拼接不完整行，避免 JSON.parse 报错。

4. 尊贵感与包容度兼具的暗黑/主题系统

作为一个“严肃”的产品级 UI，YH-UI 在视觉细节上非常讲究：

拒绝千篇一律的纯红纯蓝，使用 Harmonious HSL 精细调色。
支持运行时 CSS 变量改写，可在“紧凑”与“宽松”布局密度间一键切换。
贴心地内置了色盲友好模式，展现出极高的人文关怀与无障碍体验。

5. 极致的开发者体验：1 秒导出 CodeSandbox 调试

在官网看文档时，想在线折腾一下组件？ YH-UI 提供了极其强大的一键导出 StackBlitz / CodeSandbox 功能。它会在本地/云端实时将你的 Demo 代码进行依赖静态分析，把按需引用的核心组件、CSS 变量、甚至 mermaid / dayjs 依赖一并打包构建，让你可以立刻在云端沙箱中无缝跑起来。

🛠️ 快速上手

YH-UI 提供了极其友好的上手门槛。

1. 安装依赖

pnpm add @yh-ui/yh-ui

2. 完整引入

import { createApp } from 'vue'
import YhUI from '@yh-ui/yh-ui'
import '@yh-ui/yh-ui/css'
import App from './App.vue'

createApp(App).use(YhUI).mount('#app')

3. 按需引入（推荐）

搭配 unplugin-vue-components，即可享受自动按需加载组件和样式的丝滑体验：

// vite.config.ts
import Components from 'unplugin-vue-components/vite'
import { YhUIResolver } from '@yh-ui/yh-ui/resolver'

export default {
  plugins: [
    Components({
      resolvers: [YhUIResolver()]
    })
  ]
}

🌟 写在最后

YH-UI 不满足于只做一个简单的表单框架，而是希望成为严肃产品团队在 Vue 生态下的一站式研发底座。如果你正在做 AI 助手、复杂表单应用、数据看板、协作工作流，它绝对是能帮你省下 50% 研发精力的神器。

目前该项目正在活跃迭代中，并完美适配 Vue 3.5+。

💻 官方文档：1079161148.github.io/yh-ui/
📌 GitHub 仓库：github.com/1079161148/… (觉得好用的话，去给作者点个 ⭐ Star 吧！)
💬 欢迎在评论区分享：你在开发 AI 对话或工作流时，还遇到过哪些踩坑经历？

别再自己拼凑了！这款 Vue 3.5+ 严肃产品级组件库，把 AI 对话、工作流和复杂数据全包了！