vue-chat-button-simple/README.md

Vue 3 chat button components with badge support, modal popup, fixed positioning, environment configuration, and customizable themes

# Vue Chat Button

Vue 3 聊天按钮组件，支持徽章、弹窗、固定定位、环境配置和自定义主题。

## 安装

```bash
npm i vue-chat-button-simple
# 或
yarn add vue-chat-button-simple
# 或
pnpm add vue-chat-button-simple
```

## 使用方法

### 全局注册

```javascript
import { createApp } from 'vue'
import VueChatButton from 'vue-chat-button'
import 'vue-chat-button/dist/vue-chat-button.css'

const app = createApp(App)
app.use(VueChatButton)
app.mount('#app')
```

### 组件单独使用

```vue
<template>
  <div>
    <div class="demo-section">
      <h3>1. 基础按钮测试</h3>
      <ChatButtonSimple :theme-color="#1890ff" @click="handleClick" />
    </div>

    <div class="demo-section">
      <h3>2. 是否开启定位</h3>
      <ChatButtonWithBadge :is-fixed="false" @click="handleClick" @open="handleOpen" @close="handleClose" />
    </div>

    <div class="demo-section">
      <h3>2. 是否显示角标</h3>
      <ChatButtonWithBadge :is-fixed="false" :show-badge="false" @click="handleClick" @open="handleOpen" @close="handleClose" />
    </div>

    <div class="demo-section">
      <ChatButtonWithBadge modal-url="http://localhost:5666/chatWindow" @click="handleClick" />
    </div>
  </div>
</template>

<script setup>
import { ChatButtonSimple, ChatButtonWithBadge } from 'vue-chat-button'
import 'vue-chat-button/dist/vue-chat-button.css'

const handleClick = () => {
  console.log('聊天按钮被点击')
}
</script>
```

## 组件 API

### ChatButtonSimple

简单聊天按钮组件。

#### Props

| 属性          | 类型                            | 默认值          | 说明          |
| ------------- | ------------------------------- | --------------- | ------------- |
| `iconUrl`     | `string`                        | `''`            | 自定义图标URL |
| `themeColor`  | `string`                        | `'#1890ff'`     | 主题颜色      |
| `environment` | `'development' \| 'production'` | `'development'` | 环境配置      |

#### Events

| 事件名  | 参数 | 说明         |
| ------- | ---- | ------------ |
| `click` | -    | 按钮点击事件 |

### ChatButtonWithBadge

带徽章的聊天按钮组件。

#### Props

| 属性              | 类型                                                           | 默认值             | 说明                 |
| ----------------- | -------------------------------------------------------------- | ------------------ | -------------------- |
| `badgeCount`      | `number`                                                       | `0`                | 徽章数量             |
| `showBadge`       | `boolean`                                                      | `true`             | 是否显示角标数量     |
| `badgeColor`      | `string`                                                       | `'#ff4d4f'`        | 徽章颜色             |
| `themeColor`      | `string`                                                       | `'#1890ff'`        | 主题颜色             |
| `iconUrl`         | `string`                                                       | `''`               | 自定义图标URL        |
| `isFixed`         | `boolean`                                                      | `false`            | 是否固定定位         |
| `fixedPosition`   | `'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'` | `'bottom-right'`   | 固定位置             |
| `fixedOffset`     | `{ x?: number; y?: number }`                                   | `{ x: 20, y: 60 }` | 固定位置偏移         |
| `autoFetch`       | `boolean`                                                      | `true`             | 是否自动获取徽章数量 |
| `fetchInterval`   | `number`                                                       | `30000`            | 获取间隔（毫秒）     |
| `enablePolling`   | `boolean`                                                      | `true`             | 是否启用轮询         |
| `pollingInterval` | `number`                                                       | `30000`            | 轮询间隔（毫秒）     |
| `environment`     | `'development' \| 'production'`                                | `'development'`    | 环境配置             |
| `params`          | `any`                                                          | `undefined`        | 请求参数             |

#### Events

| 事件名         | 参数            | 说明             |
| -------------- | --------------- | ---------------- |
| `click`        | -               | 按钮点击事件     |
| `badgeUpdate`  | `count: number` | 徽章数量更新事件 |
| `pollingStart` | -               | 轮询开始事件     |
| `pollingStop`  | -               | 轮询停止事件     |
| `error`        | `error: any`    | 错误事件         |

#### Methods

| 方法名                  | 参数               | 返回值          | 说明             |
| ----------------------- | ------------------ | --------------- | ---------------- |
| `fetchBadgeCount`       | -                  | `Promise<void>` | 手动获取徽章数量 |
| `setBadgeCount`         | `count: number`    | `void`          | 设置徽章数量     |
| `startPolling`          | -                  | `void`          | 开始轮询         |
| `stopPolling`           | -                  | `void`          | 停止轮询         |
| `updatePollingInterval` | `interval: number` | `void`          | 更新轮询间隔     |

### ChatModal

聊天弹窗组件。

#### Props

| 属性             | 类型                                  | 默认值       | 说明             |
| ---------------- | ------------------------------------- | ------------ | ---------------- |
| `visible`        | `boolean`                             | `false`      | 是否显示弹窗     |
| `iframeUrl`      | `string`                              | `''`         | iframe URL       |
| `modalTitle`     | `string`                              | `'在线客服'` | iframe 标题      |
| `modalPosition`  | `'right' \| 'center' \| 'fullscreen'` | `'right'`    | 弹窗位置         |
| `width`          | `string`                              | `'400px'`    | 弹窗宽度         |
| `height`         | `string`                              | `'600px'`    | 弹窗高度         |
| `closeOnOverlay` | `boolean`                             | `true`       | 点击遮罩是否关闭 |
| `closeOnEscape`  | `boolean`                             | `true`       | 按ESC是否关闭    |

#### Events

| 事件名           | 参数             | 说明           |
| ---------------- | ---------------- | -------------- |
| `update:visible` | `value: boolean` | 可见性更新事件 |
| `open`           | -                | 弹窗打开事件   |
| `close`          | -                | 弹窗关闭事件   |

#### Methods

| 方法名   | 参数 | 返回值 | 说明         |
| -------- | ---- | ------ | ------------ |
| `open`   | -    | `void` | 打开弹窗     |
| `close`  | -    | `void` | 关闭弹窗     |
| `toggle` | -    | `void` | 切换弹窗状态 |

## 环境配置

组件支持环境配置，可以自动切换API地址等配置：

```javascript
import { getEnvironmentConfig } from 'vue-chat-button'

const config = getEnvironmentConfig('production')
console.log(config.apiBaseUrl)
```

## 许可证

MIT