chore:输入框语音输入时,输入框样式修改
This commit is contained in:
@@ -529,17 +529,30 @@
|
|||||||
① 默认(未输入/未聚焦): 单行胶囊 —— 语音图标 + 输入框 + 加号
|
① 默认(未输入/未聚焦): 单行胶囊 —— 语音图标 + 输入框 + 加号
|
||||||
② 语音模式(点语音图标进入): 「按住说话」按钮 + 底部工具栏(表情/模型/加号)
|
② 语音模式(点语音图标进入): 「按住说话」按钮 + 底部工具栏(表情/模型/加号)
|
||||||
③ 文字输入(聚焦或有文字): 输入框独占一行 + 底部工具栏(语音/模型/加号/发送) -->
|
③ 文字输入(聚焦或有文字): 输入框独占一行 + 底部工具栏(语音/模型/加号/发送) -->
|
||||||
<!-- 语音模式: 按住说话 (PR-FRONTEND-VOICE-INPUT 2026-09-24) -->
|
<!-- 语音模式 (PR-VOICE-MODE-ONE-ROW-V2): 整行即白色胶囊(flex),
|
||||||
|
键盘图标在左、+ 在右、按住说话占中间 —— 不依赖绝对定位, 结构上保证单行 -->
|
||||||
<view
|
<view
|
||||||
v-if="voiceMode"
|
v-if="voiceMode"
|
||||||
class="voice-hold-btn"
|
class="voice-mode-row"
|
||||||
:class="{ 'is-holding': voiceHolding, 'is-cancelling': voiceHoldCancelling }"
|
:class="{ 'is-holding': voiceHolding, 'is-cancelling': voiceHoldCancelling }">
|
||||||
@touchstart.stop.prevent="onVoiceHoldStart"
|
<!-- 左侧: 键盘图标 (点击回到文字输入) -->
|
||||||
@touchmove.stop.prevent="onVoiceHoldMove"
|
<view class="voice-side-btn voice-side-left" @click="exitVoiceMode">
|
||||||
@touchend.stop.prevent="onVoiceHoldEnd"
|
<view class="emoji-icon-bg"></view>
|
||||||
@touchcancel.stop.prevent="onVoiceHoldCancel"
|
</view>
|
||||||
@click.stop="onVoiceHoldEnd">
|
<!-- 中间: 按住说话 (按住录音, 松开发送) -->
|
||||||
<text class="voice-hold-text">{{ voiceHoldText }}</text>
|
<view
|
||||||
|
class="voice-hold-btn"
|
||||||
|
@touchstart.stop.prevent="onVoiceHoldStart"
|
||||||
|
@touchmove.stop.prevent="onVoiceHoldMove"
|
||||||
|
@touchend.stop.prevent="onVoiceHoldEnd"
|
||||||
|
@touchcancel.stop.prevent="onVoiceHoldCancel"
|
||||||
|
@click.stop="onVoiceHoldEnd">
|
||||||
|
<text class="voice-hold-text">{{ voiceHoldText }}</text>
|
||||||
|
</view>
|
||||||
|
<!-- 右侧: 加号 -->
|
||||||
|
<button class="top-plus-btn voice-side-right" @click="showMoreTools">
|
||||||
|
<text class="plus-icon">+</text>
|
||||||
|
</button>
|
||||||
</view>
|
</view>
|
||||||
<!-- 按住时的「上滑取消」提示 (H5/MP 共用) -->
|
<!-- 按住时的「上滑取消」提示 (H5/MP 共用) -->
|
||||||
<view v-if="voiceHolding" class="voice-cancel-hint">{{ voiceHoldCancelling ? $lang('ai-chat.index.slideUpToCancelHint') : $lang('ai-chat.index.slideUpToCancel') }}</view>
|
<view v-if="voiceHolding" class="voice-cancel-hint">{{ voiceHoldCancelling ? $lang('ai-chat.index.slideUpToCancelHint') : $lang('ai-chat.index.slideUpToCancel') }}</view>
|
||||||
@@ -587,14 +600,10 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 底部工具栏行: 语音模式 / 文字输入时显示 -->
|
<!-- 底部工具栏行: 仅文字输入时显示 (语音模式的键盘/加号已并入按住说话同一行) -->
|
||||||
<view v-if="voiceMode || showTextMode" class="input-toolbar-row">
|
<view v-if="showTextMode" class="input-toolbar-row">
|
||||||
<!-- 语音模式: 键盘图标 (点击回到文字输入) -->
|
|
||||||
<view v-if="voiceMode" class="toolbar-round-btn" @click="exitVoiceMode">
|
|
||||||
<view class="emoji-icon-bg"></view>
|
|
||||||
</view>
|
|
||||||
<!-- 文字输入: 语音图标 (切到按住说话) -->
|
<!-- 文字输入: 语音图标 (切到按住说话) -->
|
||||||
<view v-else class="toolbar-round-btn" @click="enterVoiceMode">
|
<view class="toolbar-round-btn" @click="enterVoiceMode">
|
||||||
<view class="voice-icon-bg"></view>
|
<view class="voice-icon-bg"></view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@@ -5959,9 +5968,9 @@ _handleStreamError(msg) {
|
|||||||
background-size: contain;
|
background-size: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 展开态: 卡片变白底圆角容器, 内部输入行不再单独成胶囊 */
|
/* 展开态: 文字输入时卡片变白底圆角容器;
|
||||||
|
语音模式卡片保持透明, 白色胶囊由 .voice-mode-row 自身呈现 (避免双层白底) */
|
||||||
.input-card {
|
.input-card {
|
||||||
&.is-voice-mode,
|
|
||||||
&.is-text-mode {
|
&.is-text-mode {
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border-radius: 28rpx;
|
border-radius: 28rpx;
|
||||||
@@ -5970,7 +5979,13 @@ _handleStreamError(msg) {
|
|||||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.14);
|
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.14);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-voice-mode .input-row-top,
|
&.is-voice-mode {
|
||||||
|
background: transparent;
|
||||||
|
border-radius: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
&.is-text-mode .input-row-top {
|
&.is-text-mode .input-row-top {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
@@ -5980,17 +5995,18 @@ _handleStreamError(msg) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 语音模式: 按住说话 (白底 + 快捷问题同款阴影, 与输入胶囊风格统一) */
|
/* 语音模式单行 (PR-VOICE-MODE-ONE-ROW-V2): 整行即白色胶囊(flex布局,不依赖绝对定位)
|
||||||
.voice-hold-btn {
|
键盘图标在左 / 按住说话占中间 / + 在右, 与参考稿一致 */
|
||||||
|
.voice-mode-row {
|
||||||
|
position: relative; /* 「上滑取消」提示 .voice-cancel-hint 锚定到这里 */
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
|
||||||
height: 96rpx;
|
height: 96rpx;
|
||||||
margin: 4rpx 0 8rpx;
|
margin: 4rpx 0 8rpx;
|
||||||
border-radius: 28rpx;
|
padding: 0 10rpx 0 24rpx;
|
||||||
|
border-radius: 999rpx;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.14);
|
box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.14);
|
||||||
position: relative; // PR-FRONTEND-VOICE-INPUT: 让 .voice-cancel-hint 锚定到这里
|
|
||||||
transition: background-color 0.15s ease-out;
|
transition: background-color 0.15s ease-out;
|
||||||
|
|
||||||
&.is-holding {
|
&.is-holding {
|
||||||
@@ -6000,11 +6016,33 @@ _handleStreamError(msg) {
|
|||||||
// PR-FRONTEND-VOICE-INPUT (2026-09-24): 上滑到 80px+ 视为取消手势
|
// PR-FRONTEND-VOICE-INPUT (2026-09-24): 上滑到 80px+ 视为取消手势
|
||||||
&.is-cancelling {
|
&.is-cancelling {
|
||||||
background: #fdecec;
|
background: #fdecec;
|
||||||
|
|
||||||
.voice-hold-text {
|
.voice-hold-text {
|
||||||
color: #d23f3f;
|
color: #d23f3f;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.voice-side-btn {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.voice-side-right {
|
||||||
|
margin-left: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 按住说话区域: 透明, 占据中间剩余全部空间 */
|
||||||
|
.voice-hold-btn {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
.voice-hold-text {
|
.voice-hold-text {
|
||||||
font-size: 30rpx;
|
font-size: 30rpx;
|
||||||
color: #1f1f1f;
|
color: #1f1f1f;
|
||||||
|
|||||||
Reference in New Issue
Block a user