fix:输入框优化
This commit is contained in:
huxuejian
parent
9cbe454338
commit
027b6555dd
@ -401,11 +401,26 @@ $primary-color: #0877F1;
|
||||
|
||||
.input-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-end;
|
||||
position: relative;
|
||||
padding: 16rpx 20rpx;
|
||||
gap: 12rpx;
|
||||
}
|
||||
|
||||
.expand-input-btn {
|
||||
position: absolute;
|
||||
top: 16rpx;
|
||||
left: 20rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
z-index: 1;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.voice-toggle-btn {
|
||||
width: 56rpx;
|
||||
height: 56rpx;
|
||||
@ -414,6 +429,7 @@ $primary-color: #0877F1;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
padding: 0;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.voice-toggle-icon {
|
||||
@ -432,6 +448,7 @@ $primary-color: #0877F1;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
padding: 0;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
@ -451,6 +468,7 @@ $primary-color: #0877F1;
|
||||
transition: background 0.2s;
|
||||
flex-shrink: 0;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.send-btn:active {
|
||||
@ -509,6 +527,7 @@ $primary-color: #0877F1;
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
height: 80rpx;
|
||||
max-height: 500rpx;
|
||||
}
|
||||
|
||||
.voice-input-btn {
|
||||
@ -521,6 +540,46 @@ $primary-color: #0877F1;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
|
||||
.expanded-input-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
border-radius: 24rpx 24rpx 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.expanded-input-header {
|
||||
height: 96rpx;
|
||||
flex-shrink: 0;
|
||||
padding: 24rpx 24rpx 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.collapse-input-btn {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.expanded-text-input {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
padding: 0 32rpx 32rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 30rpx;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.more-panel {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
@ -6,6 +6,9 @@
|
||||
</view>
|
||||
|
||||
<view class="input-toolbar">
|
||||
<view v-if="showExpandButton" class="expand-input-btn" @click="expandInput">
|
||||
<image src="/static/expand.svg" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view @click="toggleVoiceInput" class="voice-toggle-btn">
|
||||
<image v-if="showVoiceInput" src="/static/jianpan.png" class="voice-toggle-icon" mode="aspectFit"></image>
|
||||
<uni-icons v-else type="mic" size="28" color="#666" />
|
||||
@ -14,7 +17,7 @@
|
||||
<!-- :hold-keyboard="true" -->
|
||||
<textarea v-if="!showVoiceInput" class="text-input" v-model="inputText" placeholder="我来说两句..."
|
||||
@confirm="sendTextMessage" @focus="handleInputFocus" @input="handleInput" :auto-height="true"
|
||||
:show-confirm-bar="false" :maxlength="-1" :cursor-spacing="40" ref="textareaRef" />
|
||||
:show-confirm-bar="false" :maxlength="-1" :cursor-spacing="40" :focus="normalTextareaFocus" ref="textareaRef" />
|
||||
<input v-else class="voice-input-btn" :class="{ recording: isRecording }" @touchstart="startRecord"
|
||||
@touchmove="onRecordTouchMove" @touchend="stopRecord" @touchcancel="cancelRecord"
|
||||
:placeholder="isRecording ? '松开发送' : '按住说话'" disabled />
|
||||
@ -29,6 +32,16 @@
|
||||
<text>生成中...</text>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="isInputExpanded" class="expanded-input-overlay">
|
||||
<view class="expanded-input-header">
|
||||
<view class="collapse-input-btn" @click="collapseInput">
|
||||
<image src="/static/mini.svg" mode="aspectFit"></image>
|
||||
</view>
|
||||
</view>
|
||||
<textarea class="expanded-text-input" v-model="inputText" placeholder="我来说两句..."
|
||||
@confirm="sendTextMessage" @focus="handleInputFocus" @input="handleInput" :auto-height="false"
|
||||
:show-confirm-bar="false" :maxlength="-1" :cursor-spacing="40" :focus="expandedTextareaFocus" />
|
||||
</view>
|
||||
<view class="more-panel" v-if="showMorePanel">
|
||||
<view v-for="btn in morePanelButtons" :key="btn.text" class="more-btn" @click="btn.action">
|
||||
<image :src="btn.icon" class="more-icon" mode="aspectFit"></image>
|
||||
@ -62,7 +75,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, ref, onMounted, onUnmounted, nextTick } from "vue";
|
||||
import { computed, getCurrentInstance, ref, onMounted, onUnmounted, nextTick, watch } from "vue";
|
||||
import {
|
||||
chooseImage,
|
||||
takePhoto as takePhotoUtil,
|
||||
@ -108,6 +121,13 @@ const showMorePanel = ref(false);
|
||||
const isRecording = ref(false);
|
||||
const recordingText = ref("录音中...");
|
||||
const textareaRef = ref(null);
|
||||
const isInputExpanded = ref(false);
|
||||
const isInputOverFourLines = ref(false);
|
||||
const singleLineInputHeight = ref(0);
|
||||
const normalTextareaFocus = ref(false);
|
||||
const expandedTextareaFocus = ref(false);
|
||||
const instanceProxy = getCurrentInstance()?.proxy;
|
||||
const showExpandButton = computed(() => !showVoiceInput.value && isInputOverFourLines.value && !isInputExpanded.value);
|
||||
const cloudCustomData = computed(() => {
|
||||
const arr = [
|
||||
props.chatRoomBusiness.businessType,
|
||||
@ -121,6 +141,55 @@ const appendStreamText = (char) => {
|
||||
inputText.value += char;
|
||||
};
|
||||
|
||||
const updateInputLines = async () => {
|
||||
await nextTick();
|
||||
if (showVoiceInput.value || isInputExpanded.value) return;
|
||||
|
||||
const hasExplicitLineBreak = /[\r\n]/.test(inputText.value);
|
||||
if (hasExplicitLineBreak) {
|
||||
const inputLineCount = inputText.value.split(/\r\n|\r|\n/).length;
|
||||
isInputOverFourLines.value = inputLineCount > 4;
|
||||
return;
|
||||
}
|
||||
|
||||
if (inputText.value.length <= 1 && singleLineInputHeight.value) {
|
||||
isInputOverFourLines.value = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const query = instanceProxy ? uni.createSelectorQuery().in(instanceProxy) : uni.createSelectorQuery();
|
||||
query.select(".text-input").boundingClientRect();
|
||||
query.exec((res) => {
|
||||
const inputRect = res && res[0];
|
||||
if (!inputRect) return;
|
||||
|
||||
if (!singleLineInputHeight.value) singleLineInputHeight.value = inputRect.height;
|
||||
|
||||
const lineHeight = (45 * uni.getSystemInfoSync().windowWidth) / 750;
|
||||
const fourLineHeight = singleLineInputHeight.value + lineHeight * 3;
|
||||
isInputOverFourLines.value = inputRect.height > fourLineHeight + 1;
|
||||
});
|
||||
};
|
||||
|
||||
const expandInput = () => {
|
||||
normalTextareaFocus.value = false;
|
||||
isInputExpanded.value = true;
|
||||
nextTick(() => {
|
||||
expandedTextareaFocus.value = true;
|
||||
});
|
||||
};
|
||||
|
||||
const collapseInput = () => {
|
||||
expandedTextareaFocus.value = false;
|
||||
isInputExpanded.value = false;
|
||||
nextTick(() => {
|
||||
normalTextareaFocus.value = true;
|
||||
updateInputLines();
|
||||
});
|
||||
};
|
||||
|
||||
watch(inputText, updateInputLines);
|
||||
|
||||
// 录音相关扩展状态（特效 + 取消逻辑）
|
||||
const recordingDuration = ref(0);
|
||||
let recordingTimer = null;
|
||||
@ -329,11 +398,14 @@ const sendCustomMessage = async (messageData) => {
|
||||
const toggleVoiceInput = () => {
|
||||
showVoiceInput.value = !showVoiceInput.value;
|
||||
showMorePanel.value = false;
|
||||
if (!showVoiceInput.value) updateInputLines();
|
||||
};
|
||||
|
||||
const toggleMorePanel = () => {
|
||||
showMorePanel.value = !showMorePanel.value;
|
||||
const wasVoiceInput = showVoiceInput.value;
|
||||
showVoiceInput.value = false;
|
||||
if (wasVoiceInput) updateInputLines();
|
||||
};
|
||||
|
||||
// 处理图片选择
|
||||
@ -590,7 +662,6 @@ function handleInputFocus() {
|
||||
}
|
||||
|
||||
function handleInput(e) {
|
||||
// textarea 输入时触发，可以在这里处理额外逻辑
|
||||
nextTick().then(() => {
|
||||
emit("scrollToBottom");
|
||||
});
|
||||
@ -599,6 +670,7 @@ function handleInput(e) {
|
||||
onMounted(() => {
|
||||
// 初始化录音管理器
|
||||
initRecorderManager();
|
||||
updateInputLines();
|
||||
|
||||
// 监听关闭功能栏事件
|
||||
uni.$on("closeMorePanel", () => {
|
||||
|
||||
1
static/expand.svg
Normal file
1
static/expand.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1792130980667" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1700" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M459.712 507.568L208 759.28V528H128v368h368v-80H264.56l251.728-251.792-56.576-56.64zM528 128v80h231.44L507.712 459.712l56.576 56.576L816 264.56V496h80V128H528z" fill="#565D64" p-id="1701"></path></svg>
|
||||
|
After Width: | Height: | Size: 534 B |
1
static/mini.svg
Normal file
1
static/mini.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1792131033804" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3515" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M104.704 338.752a64 64 0 0 1 90.496 0L512 655.552l316.8-316.8a64 64 0 0 1 90.496 90.496l-362.048 362.048a64 64 0 0 1-90.496 0L104.704 429.248a64 64 0 0 1 0-90.496z" p-id="3516"></path></svg>
|
||||
|
After Width: | Height: | Size: 523 B |
Loading…
x
Reference in New Issue
Block a user