FrontTools/InputArea/Readme.md

Make By. RainyTears
基于 Vue移动端打造的「悬浮面板 + 输入框」
```sh
├── floatPanel.vue   # 横向滚动按钮组 / 插槽面板
└── InputArea.vue   # 语音/文字双模式输入容器
```

---

## 1. 特性总览

| 层级     | 可插拔                                    |     |
| ------ | -------------------------------------- | --- |
| **外层** | `InputArea.vue` 负责长录音、键盘切换、主题色、v-model |     |
| **面板** | `floatPanel.vue` 提供按钮渲染 + 两种插槽，零逻辑依赖   |     |

> ✅ 支持 uni-app、hbuilder、vue3＋setup

---

## 2. 安装与最简调用

```vue
<!-- 页面 -->
<!-- 关于showPanel - 即便你不想要主动操控 内部也内置了一部分的showPanel管理 -->
<template>
  <inputArea
    v-model="msg"
    v-model:showPanel="show"
    :buttons="btns" 
    themeColor="#a846e6"
    @Send="onSend"
    @LongPressStart="recordStart"
    @LongPressEnd="recordEnd"
    @LongPressCancel="recordCancel"
    @PanelClick="panelSelect"
  >
  
   <!-- 如果你想自定义悬浮面板里的内容，可以使用 slot -->
    <template #panel-content> 
    <view>自定义表情面板</view> 
    </template> 
    <!-- 如果自定义了悬浮面板 那将默认不会显示buttons -->
</inputArea>

</template>

<script setup>
import InputKit from '@/components/FloatingInputKit/index.vue'

const msg = ref('')
const show = ref(false)
const btns = [
  { label:'相册', icon:'/static/pic.png', value:'image' },
  { label:'拍摄', icon:'/static/cam.png', value:'video' },
  { label:'文件', icon:'/static/file.png', value:'file' }
] // 如果不定义btns直接移除的话可以使用Slot

function onSend(e) { console.log('文字',e.content) }
function panelSelect(e) { 
switch(e.value){
case image:
ChooseImage(); break;
case vide:
ChooseVideo(); break;
}

}
</script>
```

---

## 3. Props（index.Vue）

| 属性                | 类型      | 默认                     | 说明                          |
| ----------------- | ------- | ---------------------- | --------------------------- |
| modelValue        | String  | ''                     | 输入框内容，支持 v-model            |
| showPanel         | Boolean | false                  | 浮层面板显隐，支持 v-model:showPanel |
| placeholder       | String  | 点击输入或按住说话...           | 输入框占位                       |
| longPressTip      | String  | 正在录音，上滑取消              | 长按时提示                       |
| cancelTip         | String  | 松开手指，取消发送              | 上滑取消时提示                     |
| LeftIcon          | String  | /static/button.Png     | 左侧图标                        |
| sendIcon          | String  | /static/send.Png       | 发送态图标                       |
| attachmentIcon    | String  | /static/Attachment.Png | 附件图标                        |
| showLeftBtn       | Boolean | true                   | 是否显示左侧按钮                    |
| buttons           | Array   | 见代码                    | 面板的按钮数据                     |
| panelHeight       | String  | 100rpx                 | 面板高度                        |
| panelBottomOffset | String  | 10rpx                  | 面板与输入框距离                    |
| panelPadding      | String  | 15rpx                  | 面板左右留空                      |
| longPressDelay    | Number  | 200                    | 长按触发阈值 ms                   |
| cancelThreshold   | Number  | 100                    | 上滑取消的 px 阈值                 |
| adjustPosition    | Boolean | false                  | input adjust-position       |
| holdKeyboard      | Boolean | true                   | input hold-keyboard         |
| confirmType       | String  | send                   | input confirm-type          |
| themeColor<br>    | String  | #a846e6                | 主色，同--main-color            |
| BarHeight         | String  | 100rpx                 | 整个聊天条高度                     |
| PadBottom         | String  | 36rpx                  | 距离底部距离                      |

---

## 4. Events（index.Vue）

| 事件                | 参数                           | 说明             |
| ----------------- | ---------------------------- | -------------- |
| update:modelValue | text:String                  | 文本变化           |
| update:showPanel  | show:Boolean                 | 面板显隐变化         |
| LongPressStart    | -                            | 开始长按输入框（可用于录音） |
| LongPressEnd      | -                            | 正常松手结束         |
| LongPressCancel   | -                            | 上滑取消           |
| Send              | {type:'text',content:String} | 点击发送触发         |
| PanelClick        | {button,index}               | 面板按钮/插槽点击      |
| LeftButtonClick   | -                            | 左侧按钮触发         |

---

## 5. Slots — 高自由度

| 插槽                             | 作用域            | 用法                       |
| ------------------------------ | -------------- | ------------------------ |
| panel-content（index.Vue）       | -              | **外层整体替换面板**，常用于自定义复杂 ui |
| -（floatPanel.Vue 默认插槽）         | -              | **完全覆盖按钮区**，保留滚动和动效骨架    |
| button-content（floatPanel.Vue） | {button,index} | **仅定制按钮内部结构**，不破坏外层 item |
|                                |                |                          |

> 注意：一旦使用 floatPanel 默认插槽 (`<slot v-if="hasDefaultSlot">`)，预设按钮循环即不再渲染，仅展示你提供的内容，仍享有 hide/disabled 动效。

---

## 6. 内部状态（index.Vue）

- `focusLock:boolean` —— 防止长按后立即抖动聚焦
- `isLongPressing / isCancelling` —— 手势长按聊天条状态
- `innerShowPanel` —— 本地面板显隐，外部通过 v-model:showPanel 同步

> 面板显隐会自动受 focus/blur 影响，可在回调里 `setPanelVisible` 覆盖

---

## 7. 样式变量（index.Scss）

| CSS 变量       | 默认                               | 用途     |
| ------------ | -------------------------------- | ------ |
| --main-color | #a846e6                          | 主色     |
| $elastic     | transform 0.35s cubic-bezier(... | 全局弹性曲线 |
| $btn-height  | 100rpx                           | 输入条高度  |

---

## 8. 常见修补/扩展
1. 底部安全区 & 全面屏定位已内置：`env(safe-area-inset-bottom) + 60rpx`
2. 举例:想替换「长按录音」为「长按拍照」：
   - 监听 `LongPressStart` 调起相机，返回值自己构造
3. 面板支持无限长按钮，内部 `scroll-view` 已 `white-space:nowrap`
---