rt-chat-input 1.0.0

package/README.md

@@ -0,0 +1,140 @@
+# @rongxiaobao/chat-input
+
+一个基于 Vue 3 的多模态聊天输入框组件，集成了文本输入、语音录制（支持实时转写）、文件上传等功能。零外部 UI 框架依赖，轻量且易于集成。
+
+## 特性
+
+- 🎤 **高级语音录制**：支持波形可视化、音量检测、实时 WebSocket 转写。
+- 📱 **移动端优化**：专为移动端设计的手势交互（上滑取消、侧滑编辑）。
+- 📂 **文件预览**：内置图片和文件预览区域。
+- 🎨 **主题定制**：内置 Light/Dark 主题，支持 CSS 变量自定义。
+- 🔌 **零依赖**：完全移除 Element Plus 等重型 UI 库依赖，仅依赖 Vue 3。
+- 🔋 **H5Plus 支持**：兼容 UniApp/H5Plus 环境的原生麦克风权限调用。
+
+## 安装
+
+```bash
+npm install @rongxiaobao/chat-input
+# 或
+yarn add @rongxiaobao/chat-input
+```
+
+## 快速使用
+
+```vue
+<template>
+  <div class="chat-container">
+    <!-- 消息列表区域 (自定义) -->
+    <div class="message-list">...</div>
+
+    <!-- 输入框组件 -->
+    <ChatInput
+      placeholder="请输入消息..."
+      :ws-url="wsUrl"
+      @send="handleSend"
+      @voice="handleVoice"
+      @attach="handleAttach"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ChatInput } from "@rongxiaobao/chat-input";
+import "@rongxiaobao/chat-input/style.css"; // 引入样式
+
+const wsUrl = "wss://your-api.com/ws/transcription";
+
+const handleSend = (text, files) => {
+  console.log("发送消息:", text, files);
+};
+
+const handleVoice = (audioBlob, duration) => {
+  console.log("语音录制完成:", audioBlob, duration);
+};
+
+const handleAttach = (files) => {
+  console.log("文件列表更新:", files);
+};
+</script>
+```
+
+### 开箱即用（固定底部）
+
+只需添加 `fixed` 属性，组件会自动固定在页面底部，无需额外 CSS。
+
+```vue
+<template>
+  <div class="page-content">
+    <!-- 聊天记录... -->
+
+    <!-- 自动固定在底部 -->
+    <ChatInput fixed />
+  </div>
+</template>
+```
+
+## API 文档
+
+### ChatInput 组件
+
+#### Props
+
+| 属性名                 | 类型                          | 默认值                    | 说明                                                |
+| ---------------------- | ----------------------------- | ------------------------- | --------------------------------------------------- |
+| `placeholder`          | `string`                      | `'请输入，或按住说话...'` | 输入框占位符                                        |
+| `disabled`             | `boolean`                     | `false`                   | 是否禁用                                            |
+| `wsUrl`                | `string`                      | `undefined`               | 实时语音转写 WebSocket 地址                         |
+| `maxVoiceDuration`     | `number`                      | `60`                      | 最大录音时长（秒）                                  |
+| `theme`                | `'light' \| 'dark' \| 'auto'` | `'light'`                 | 主题模式                                            |
+| `fixed`                | `boolean`                     | `false`                   | 是否开启固定底部定位（开箱即用模式）                |
+| `bottomOffset`         | `number \| string`            | `36`                      | 底部距离偏移量（仅 fixed=true 时有效），数字单位 px |
+| `showVoiceButton`      | `boolean`                     | `true`                    | 是否显示语音按钮                                    |
+| `showAttachmentButton` | `boolean`                     | `true`                    | 是否显示附件按钮                                    |
+| `acceptFileTypes`      | `string`                      | `'image/*,.pdf...'`       | 允许上传的文件类型                                  |
+
+#### Events
+
+| 事件名   | 参数                              | 说明                                               |
+| -------- | --------------------------------- | -------------------------------------------------- |
+| `send`   | `(text: string, files: File[])`   | 点击发送按钮或回车时触发                           |
+| `voice`  | `(audio: Blob, duration: number)` | 语音录制完成时触发（仅非实时转写模式或纯语音模式） |
+| `change` | `(text: string)`                  | 输入框内容变化时触发                               |
+| `attach` | `(files: File[])`                 | 附件列表变化时触发                                 |
+| `error`  | `(message: string)`               | 发生错误时触发                                     |
+
+### VoiceRecorder 组件
+
+如果你只需要单独的语音录制按钮，可以使用此组件。
+
+```vue
+<script setup>
+import { VoiceRecorder } from "@rongxiaobao/chat-input";
+</script>
+
+<template>
+  <VoiceRecorder variant="block" @voiceRecorded="(blob, duration) => {}" />
+</template>
+```
+
+## 主题定制
+
+组件使用 CSS 变量进行样式定义，你可以通过覆盖这些变量来定制主题：
+
+```css
+:root {
+  --chat-primary: #409eff; /* 主色调 */
+  --chat-bg: #ffffff; /* 输入框背景色 */
+  --chat-text: #303133; /* 文字颜色 */
+  --chat-border-radius: 8px; /* 圆角 */
+
+  /* 页面背景匹配 (用于 fixed 模式底栏) */
+  --chat-page-bg: #f8fafc; /* 浅色模式页面背景 */
+  --chat-page-bg-dark: #0f172a; /* 深色模式页面背景 */
+}
+```
+
+更多变量请参考 `src/styles/variables.css`。
+
+## License
+
+MIT