增量提交

Claw/client/wechat_app/custom-tab-bar/index.wxml

@@ -0,0 +1,125 @@
+<!--
+  自定义底部导航栏 - 公众号客服交互模式
+
+  两种状态：
+    状态1（默认）： [首页] [设备] [任务] [⌨]
+    状态2（聊天模式）： [☰菜单] [🔊/⌨] [输入框........] [🎤] [😀] [↗/+]（自动根据当前页面判断）
+
+  交互：
+    点击⌨ → switchTab 跳到聊天页，tab-bar 自动进入状态2
+    点击☰ → switchTab 跳回首页，tab-bar 自动回到状态1
+-->
+<view class="tab-bar {{showChatPanel ? 'chat-mode' : ''}}" style="bottom: {{tabBarBottom}}px;">
+  
+  <!-- ====== 状态1：普通导航模式（默认）====== -->
+  <block wx:if="{{!showChatPanel}}">
+    <!-- 左侧3个Tab -->
+    <view
+      wx:for="{{tabList}}"
+      wx:key="index"
+      class="tab-item {{currentTab === index ? 'active' : ''}}"
+      data-index="{{index}}"
+      data-path="{{item.pagePath}}"
+      bindtap="onSwitchTab"
+    >
+      <text class="tab-text">{{item.text}}</text>
+    </view>
+
+    <!-- 右侧键盘按钮：跳转到聊天页 -->
+    <view class="keyboard-btn" bindtap="goToChat">
+      <view class="kb-circle">
+        <text class="kb-icon">⌨</text>
+      </view>
+    </view>
+  </block>
+
+  <!-- ====== 状态2：聊天输入模式（点击键盘后）====== -->
+  <block wx:else>
+    <!-- 左侧：菜单按钮（跳回首页） -->
+    <view class="chat-tool-btn" bindtap="goHome">
+      <text class="tool-icon">☰</text>
+    </view>
+
+    <!-- 左侧2：语音/文字切换按钮 -->
+    <view class="chat-tool-btn" wx:if="{{!voiceMode}}" bindtap="switchToVoiceMode">
+      <text class="tool-icon">🔊</text>
+    </view>
+    <view class="chat-tool-btn" wx:else bindtap="switchToTextMode">
+      <text class="tool-icon">⌨</text>
+    </view>
+
+    <!-- 中间：文本输入框 / 语音录制按钮 -->
+    <input
+      class="chat-input"
+      type="text"
+      value="{{inputText}}"
+      placeholder="请输入您的问题..."
+      placeholder-class="placeholder-style"
+      confirm-type="send"
+      bindinput="onInputChange"
+      bindconfirm="sendTextMessage"
+      bindfocus="onInputFocus"
+      bindblur="onInputBlur"
+      bindkeyboardheightchange="onKeyboardHeightChange"
+      focus="{{inputFocus}}"
+      adjust-position="{{false}}"
+      wx:if="{{!voiceMode}}"
+    />
+    
+    <!-- 语音模式：按住说话 -->
+    <view
+      class="voice-btn {{isRecording ? 'recording' : ''}}"
+      bindtouchstart="startRecordVoice"
+      bindtouchend="stopRecordVoice"
+      bindtouchcancel="cancelRecordVoice"
+      wx:if="{{voiceMode}}"
+    >
+      <text class="voice-text">{{isRecording ? '松开发送' : '按住 说话'}}</text>
+      <view class="record-wave" wx:if="{{isRecording}}">
+        <view class="wave wave1"></view>
+        <view class="wave wave2"></view>
+        <view class="wave wave3"></view>
+      </view>
+    </view>
+
+    <!-- 右侧1：语音转文字按钮（点击开始/停止识别） -->
+    <view
+      class="chat-tool-btn send-area {{isVoiceToText ? 'voice-active' : ''}}"
+      wx:if="{{!voiceMode}}"
+      bindtap="toggleVoiceToText"
+    >
+      <text class="tool-icon send-icon {{isVoiceToText ? 'send-icon-active' : 'send-icon'}}">🎤</text>
+    </view>
+    <view class="chat-tool-btn send-area disabled" wx:else>
+      <text class="tool-icon">🎤</text>
+    </view>
+
+    <!-- 右侧2：表情按钮 -->
+    <view class="chat-tool-btn" bindtap="onTapEmoji">
+      <text class="tool-icon">😀</text>
+    </view>
+
+    <!-- 右侧3：发送按钮（有内容时）或 更多按钮（无内容时） -->
+    <view 
+      wx:if="{{hasInput}}"
+      style="width:96rpx;height:80rpx;display:flex;align-items:center;justify-content:center;"
+      bindtap="sendTextMessage"
+    >
+      <view style="width:88rpx;height:72rpx;background:linear-gradient(135deg,#1677FF,#0958D9);border-radius:16rpx;display:flex;align-items:center;justify-content:center;box-shadow:0 4rpx 14rpx rgba(22,119,255,0.3);">
+        <text style="font-size:38rpx;color:#ffffff;font-weight:bold;line-height:1;">↗</text>
+      </view>
+    </view>
+    <view wx:else class="chat-tool-btn" bindtap="onTapMore">
+      <text class="tool-icon">+</text>
+    </view>
+  </block>
+</view>
+
+<!-- ====== 语音播放中提示 ====== -->
+<view class="voice-playing-toast" wx:if="{{isPlayingVoice}}">
+  <view class="playing-wave">
+    <view class="p-bar p1"></view><view class="p-bar p2"></view>
+    <view class="p-bar p3"></view><view class="p-bar p4"></view><view class="p-bar p5"></view>
+  </view>
+  <text class="playing-text">正在播放...</text>
+</view>