Infra Kit

一个支持跨框架的业务组件和SDK工具包，专为infra团队设计。提供基于Web Components的跨平台解决方案，支持Vue、React、Angular、原生JavaScript等任何现代前端框架。

📦 安装

npm install @yqg/infra-kit
# 或
yarn add @yqg/infra-kit
# 或
pnpm add @yqg/infra-kit

🏗 核心技术方案

整体架构

┌─────────────────────────────────────────────────────────┐
│                     使用层（任意框架）                    │
│         Vue / React / Angular / 原生 JavaScript          │
└─────────────────────────────────────────────────────────┘
                            ▲
                            │
┌─────────────────────────────────────────────────────────┐
│                   接入层（多种方式）                      │
│   Web Components | Vue Components | SDK (动态初始化)      │
└─────────────────────────────────────────────────────────┘
                            ▲
                            │
┌─────────────────────────────────────────────────────────┐
│                   组件层（Vue 3 实现）                    │
│   CellButton | CopyButton | ManualLink | AI Chat Widget  │
└─────────────────────────────────────────────────────────┘
                            ▲
                            │
┌─────────────────────────────────────────────────────────┐
│                   基础层（工具和依赖）                    │
│      Vue 3 | Ant Design Vue | Interact.js | Vite        │
└─────────────────────────────────────────────────────────┘

使用方式

一：Web Components

适用场景：跨框架、多技术栈项目

<!-- 在任何框架中使用 -->
<template>
  <cell-button color="#1677ff" locale="zh"></cell-button>
  <copy-button content="要复制的内容" type="primary"></copy-button>
</template>

<script setup>
import { registerComponents } from '@yqg/infra-kit'

// 注册组件
registerComponents(['cell-button', 'copy-button'])
</script>

优点：

• ✅ 真正的跨框架
• ✅ 标准化、未来可期
• ✅ 样式隔离（可选）

缺点：

• ❌ 属性只能传字符串（需要序列化）
• ❌ 某些老旧浏览器需要 polyfill

二：SDK 动态初始化

适用场景：浮动组件、全局功能（如 AI 助手）

import { init } from '@yqg/infra-kit/ai-chat-sdk'

// 一行代码初始化
init({
  botCode: 'YOUR_BOT_CODE',
  userId: 'USER_ID',
  themeColor: ['#667eea', '#764ba2'],
  position: { bottom: '20px', right: '20px' },
  enableDrag: true
})

优点：

• ✅ 使用极简单
• ✅ 自动管理生命周期
• ✅ 支持动态配置