From 817d2081d7b1b63114f53ffbcdf25aa809e7a204 Mon Sep 17 00:00:00 2001
From: jing <1683105490@qq.com>
Date: Fri, 9 Oct 2026 16:21:27 +0800
Subject: [PATCH] =?UTF-8?q?chore=EF=BC=9A=E8=BE=93=E5=85=A5=E6=A1=86?=
 =?UTF-8?q?=E8=AF=AD=E9=9F=B3=E8=BE=93=E5=85=A5=E6=97=B6=EF=BC=8C=E8=BE=93?=
 =?UTF-8?q?=E5=85=A5=E6=A1=86=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages_tool/ai-chat/ai-chat-message.vue | 86 +++++++++++++++++++-------
 1 file changed, 62 insertions(+), 24 deletions(-)

diff --git a/pages_tool/ai-chat/ai-chat-message.vue b/pages_tool/ai-chat/ai-chat-message.vue
index cdd1e62..456471a 100644
--- a/pages_tool/ai-chat/ai-chat-message.vue
+++ b/pages_tool/ai-chat/ai-chat-message.vue
@@ -529,17 +529,30 @@
              ① 默认(未输入/未聚焦): 单行胶囊 —— 语音图标 + 输入框 + 加号
              ② 语音模式(点语音图标进入): 「按住说话」按钮 + 底部工具栏(表情/模型/加号)
              ③ 文字输入(聚焦或有文字): 输入框独占一行 + 底部工具栏(语音/模型/加号/发送) -->
-        <!-- 语音模式: 按住说话 (PR-FRONTEND-VOICE-INPUT 2026-09-24) -->
+        <!-- 语音模式 (PR-VOICE-MODE-ONE-ROW-V2): 整行即白色胶囊(flex),
+             键盘图标在左、+ 在右、按住说话占中间 —— 不依赖绝对定位, 结构上保证单行 -->
         <view
           v-if="voiceMode"
-          class="voice-hold-btn"
-          :class="{ 'is-holding': voiceHolding, 'is-cancelling': voiceHoldCancelling }"
-          @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>
+          class="voice-mode-row"
+          :class="{ 'is-holding': voiceHolding, 'is-cancelling': voiceHoldCancelling }">
+          <!-- 左侧: 键盘图标 (点击回到文字输入) -->
+          <view class="voice-side-btn voice-side-left" @click="exitVoiceMode">
+            <view class="emoji-icon-bg"></view>
+          </view>
+          <!-- 中间: 按住说话 (按住录音, 松开发送) -->
+          <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>
         <!-- 按住时的「上滑取消」提示 (H5/MP 共用) -->
         <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 v-if="voiceMode || showTextMode" class="input-toolbar-row">
-          <!-- 语音模式: 键盘图标 (点击回到文字输入) -->
-          <view v-if="voiceMode" class="toolbar-round-btn" @click="exitVoiceMode">
-            <view class="emoji-icon-bg"></view>
-          </view>
+        <!-- 底部工具栏行: 仅文字输入时显示 (语音模式的键盘/加号已并入按住说话同一行) -->
+        <view v-if="showTextMode" class="input-toolbar-row">
           <!-- 文字输入: 语音图标 (切到按住说话) -->
-          <view v-else class="toolbar-round-btn" @click="enterVoiceMode">
+          <view class="toolbar-round-btn" @click="enterVoiceMode">
             <view class="voice-icon-bg"></view>
           </view>
 
@@ -5959,9 +5968,9 @@ _handleStreamError(msg) {
       background-size: contain;
     }
 
-    /* 展开态: 卡片变白底圆角容器, 内部输入行不再单独成胶囊 */
+    /* 展开态: 文字输入时卡片变白底圆角容器;
+       语音模式卡片保持透明, 白色胶囊由 .voice-mode-row 自身呈现 (避免双层白底) */
     .input-card {
-      &.is-voice-mode,
       &.is-text-mode {
         background: #ffffff;
         border-radius: 28rpx;
@@ -5970,7 +5979,13 @@ _handleStreamError(msg) {
         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 {
         background: transparent;
         border-radius: 0;
@@ -5980,17 +5995,18 @@ _handleStreamError(msg) {
       }
     }
 
-    /* 语音模式: 按住说话 (白底 + 快捷问题同款阴影, 与输入胶囊风格统一) */
-    .voice-hold-btn {
+    /* 语音模式单行 (PR-VOICE-MODE-ONE-ROW-V2): 整行即白色胶囊(flex布局,不依赖绝对定位)
+       键盘图标在左 / 按住说话占中间 / + 在右, 与参考稿一致 */
+    .voice-mode-row {
+      position: relative; /* 「上滑取消」提示 .voice-cancel-hint 锚定到这里 */
       display: flex;
       align-items: center;
-      justify-content: center;
       height: 96rpx;
       margin: 4rpx 0 8rpx;
-      border-radius: 28rpx;
+      padding: 0 10rpx 0 24rpx;
+      border-radius: 999rpx;
       background: #ffffff;
       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;
 
       &.is-holding {
@@ -6000,11 +6016,33 @@ _handleStreamError(msg) {
       // PR-FRONTEND-VOICE-INPUT (2026-09-24): 上滑到 80px+ 视为取消手势
       &.is-cancelling {
         background: #fdecec;
+
         .voice-hold-text {
           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 {
         font-size: 30rpx;
         color: #1f1f1f;