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

<!--
  自定义底部导航栏 - 公众号客服交互模式

  两种状态：
    状态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>