# Infra Kit
一个支持跨框架的业务组件和SDK工具包，专为infra团队设计。提供基于Web Components的跨平台解决方案，支持Vue、React、Angular、原生JavaScript等任何现代前端框架。
## ✨ 功能特性
### 🎨 UI组件（Web Components）
- **CellButton** - 可定制的申请按钮组件
- **ManualLink** - 用户手册链接组件，支持自定义图标和文本
- **CopyButton** - 智能复制按钮，支持多种复制方式和状态反馈
### 🤖 AI聊天SDK
- **框架无关版本** - 基于Web Components，支持任何框架
- **拖拽功能** - 支持自由拖拽聊天按钮到任意位置
- **响应式设计** - 完美适配桌面端和移动端
- **主题定制** - 支持自定义主题色彩和位置配置
### 🚀 技术特性
- **Web Components** - 基于现代Web标准，跨框架兼容
- **按需加载** - 支持动态加载组件，减少初始包体积
- **TypeScript** - 完整的类型定义支持
- **多格式构建** - 支持ES Module和UMD格式
## 📦 安装
```bash
npm install infra-kit
# 或
yarn add infra-kit
# 或
pnpm add infra-kit
```
## 🚀 跨平台使用方式
### 1. 原生HTML中使用
#### 直接引入UMD版本
```html
Infra Kit 演示
跨平台组件演示
```
#### 使用Web Components
```html
```
### 2. Vue项目中使用
#### 方式一：使用Web Components（推荐）
```vue
```
#### 方式二：使用Vue组件（需要Vue环境）
```vue
```
### 3. React项目中使用
```tsx
import React, { useEffect } from 'react';
import { registerComponents, init } from 'infra-kit';
const App: React.FC = () => {
useEffect(() => {
// 注册Web Components
registerComponents(['cell-button', 'manual-link', 'copy-button']);
// 初始化AI聊天SDK
init({
botCode: 'YOUR_BOT_CODE',
userId: 'YOUR_USER_ID',
themeColor: ['#1890ff', '#722ed1'],
position: {
bottom: '20px',
right: '20px'
},
draggable: true
});
}, []);
return (
React + Infra Kit
{/* 使用Web Components */}
console.log('按钮被点击')}
/>
console.log('链接被点击', e)}
/>
console.log('复制成功:', content)}
onError={(error) => console.error('复制失败:', error)}
/>
);
};
export default App;
```
### 4. Angular项目中使用
```typescript
// app.component.ts
import { Component, OnInit } from '@angular/core';
import { registerComponents, init } from 'infra-kit';
@Component({
selector: 'app-root',
template: `
Angular + Infra Kit
`
})
export class AppComponent implements OnInit {
buttonColor = '#1677ff';
locale = 'zh';
manualUrl = 'https://example.com/manual';
manualText = '用户手册';
themeColor = '#1677ff';
copyContent = '要复制的内容';
copyText = '复制';
successText = '已复制';
buttonType = 'primary';
async ngOnInit() {
// 注册Web Components
await registerComponents(['cell-button', 'manual-link', 'copy-button']);
// 初始化AI聊天SDK
init({
botCode: 'YOUR_BOT_CODE',
userId: 'YOUR_USER_ID',
themeColor: ['#667eea', '#764ba2']
});
}
handleButtonClick() {
console.log('按钮被点击');
}
handleLinkClick(event: Event) {
console.log('链接被点击', event);
}
handleCopySuccess(content: string) {
console.log('复制成功:', content);
}
handleCopyError(error: Error) {
console.error('复制失败:', error);
}
}
```
### 5. 其他框架中使用
#### Svelte
```svelte
Svelte + Infra Kit
```
## 📚 组件API文档
### CellButton - 申请按钮
#### 属性 (Properties)
- `color` (string): 主题色，默认 `#1677ff`
- `locale` (string): 语言设置，默认 `zh`
#### 事件 (Events)
- `click`: 点击事件
#### 使用示例
```html
```
### ManualLink - 用户手册链接
#### 属性 (Properties)
- `url` (string, required): 手册链接地址
- `text` (string): 显示文本，默认 `用户手册`
- `color` (string): 主题色，默认 `#1677ff`
- `locale` (string): 语言设置，默认 `zh`
#### 事件 (Events)
- `click`: 点击事件
#### 使用示例
```html
```
### CopyButton - 复制按钮
#### 属性 (Properties)
- `content` (string, required): 要复制的内容
- `text` (string): 按钮文本，默认 `复制`
- `success-text` (string): 成功提示文本，默认 `已复制`
- `type` (string): 按钮类型，可选 `primary` | `default` | `dashed` | `text` | `link`，默认 `default`
- `size` (string): 按钮尺寸，可选 `large` | `middle` | `small`，默认 `middle`
- `color` (string): 主题色，默认 `#1677ff`
- `show-message` (boolean): 是否显示消息提示，默认 `true`
- `locale` (string): 语言设置，默认 `zh`
#### 事件 (Events)
- `copy`: 开始复制时触发
- `success`: 复制成功时触发
- `error`: 复制失败时触发
#### 使用示例
```html
```
## 🤖 AI聊天SDK
### 初始化配置
```typescript
interface SDKConfig {
botCode: string; // 机器人代码（必需）
userId: string; // 用户ID（必需）
baseURL?: string; // API基础URL，默认 '/rag'
themeColor?: string | string[]; // 主题色，默认 ['#667eea', '#764ba2']
position?: { // 位置配置
top?: string;
right?: string;
bottom?: string;
left?: string;
};
draggable?: boolean; // 是否可拖拽，默认 true
}
```
### 基本使用
```javascript
import { init, destroy, isSDKInitialized } from 'infra-kit/ai-chat-sdk';
// 初始化SDK
init({
botCode: 'YOUR_BOT_CODE',
userId: 'YOUR_USER_ID',
themeColor: ['#667eea', '#764ba2'],
position: {
bottom: '20px',
right: '20px'
},
draggable: true
});
// 检查是否已初始化
if (isSDKInitialized()) {
console.log('SDK已初始化');
}
// 销毁SDK
destroy();
```
### 动态配置
```javascript
import { reconfigure } from 'infra-kit/ai-chat-sdk';
// 重新配置SDK
reconfigure({
botCode: 'YOUR_BOT_CODE',
userId: 'YOUR_USER_ID',
themeColor: ['#ff6b6b', '#4ecdc4'], // 切换主题
position: {
bottom: '20px',
left: '20px' // 切换到左下角
}
});
```
## 🔧 开发指南
### 环境要求
- Node.js >= 16
- 现代浏览器（支持Web Components）
### 本地开发
```bash
# 克隆项目
git clone
cd infra-kit
# 安装依赖
pnpm install
# 启动开发服务器
pnpm dev
# 构建项目
pnpm build
# 构建UMD版本
pnpm build:umd
# 构建所有版本
pnpm build:all
# 预览构建结果
pnpm preview
```
### 项目结构
```
src/
├── components/ # Vue组件源码
│ ├── cell.vue # 申请按钮组件
│ ├── manual-link.vue # 用户手册链接组件
│ ├── copy-button.vue # 复制按钮组件
│ └── ai-chat/ # AI聊天组件
├── sdk/ # SDK实现
│ ├── ai-chat-sdk-vue.ts # Vue版本SDK
│ └── ai-chat-sdk.ts # 框架无关版本SDK
├── web-components/ # Web Components实现
└── utils/ # 工具函数
```
## ❓ 常见问题
### Q: 如何在旧版浏览器中使用？
A: 项目基于Web Components，需要现代浏览器支持。对于旧版浏览器，建议使用polyfill：
```html
```
### Q: 如何自定义组件样式？
A: 可以通过CSS变量或直接覆盖样式：
```css
/* 自定义主题色 */
cell-button {
--primary-color: #your-color;
}
/* 直接覆盖样式 */
cell-button {
--ant-primary-color: #your-color;
}
```
### Q: 组件支持服务端渲染(SSR)吗？
A: Web Components需要在客户端初始化，建议在`mounted`或`useEffect`中注册组件。
### Q: 如何减少打包体积？
A: 使用按需加载和Tree Shaking：
```javascript
// 按需注册组件
import { registerCellButton } from 'infra-kit';
await registerCellButton(); // 只注册需要的组件
```
## 📄 许可证
MIT License
## 🤝 贡献
欢迎提交Issue和Pull Request来帮助改进项目。
## 📞 支持
如有问题，请联系infra团队或提交Issue。
---
Made with ❤️ by Infra Team
跨平台兼容，一次开发，到处使用