pages/index/index.wxml

<!-- wechat-miniprogram-translator/index.wxml -->
<view class="container">
    <!-- IO Boxes -->
    <view class="io-container">
        <!-- Source Box -->
        <view class="io-box" id="source-box">
            <view class="language-panel">
                <view class="panel-label">您说的话 (选择语言)</view>
                <view class="language-buttons">
                    <block wx:for="{{sourceLanguages}}" wx:key="langCode">
                        <view class="lang-button {{sourceLang === item.langCode ? 'selected' : ''}}" data-lang-code="{{item.langCode}}" bindtap="selectSourceLanguage">
                            <image src="https://flagcdn.com/w40/{{item.flag}}.png" alt="{{item.name}}" class="flag-icon"></image>
                        </view>
                    </block>
                </view>
            </view>
            <scroll-view scroll-y class="text-content" id="transcript">{{transcript}}</scroll-view>
        </view>

        <!-- Swap Button -->
        <view class="swap-controls">
            <button id="swap-btn" title="交换语言" bindtap="swapLanguages">
                <text>🔄</text> <!-- Swap icon -->
            </button>
        </view>

        <!-- Target Box -->
        <view class="io-box" id="target-box">
            <view class="language-panel">
                <view class="panel-label">翻译成 (选择语言)</view>
                <view class="language-buttons">
                    <block wx:for="{{targetLanguages}}" wx:key="langCode">
                        <view class="lang-button {{targetLang === item.langCode ? 'selected' : ''}}" data-lang-code="{{item.langCode}}" bindtap="selectTargetLanguage">
                            <image src="https://flagcdn.com/w40/{{item.flag}}.png" alt="{{item.name}}" class="flag-icon"></image>
                        </view>
                    </block>
                </view>
            </view>
            <scroll-view scroll-y class="text-content" id="output-text">{{outputText}}</scroll-view>
        </view>
    </view>
</view>

<!-- Floating Mic Button -->
<view class="mic-container">
    <button id="mic-btn" title="按住说话" class="{{isRecording ? 'recording' : ''}}" bindtouchstart="handleRecordToggle" bindtouchend="stopRecording">
        <text>🎤</text> <!-- Microphone icon -->
    </button>
</view>