miniprogramme/pages/chat-settings/chat-settings.wxml

<!-- 🎨 聊天设置页面 -->
<view class="chat-settings-container">
  <!-- 自定义导航栏 -->
  <view class="custom-navbar" style="padding-top: {{statusBarHeight}}px;">
    <view class="navbar-content" style="height: {{navBarHeight}}px;">
      <view class="navbar-left" bindtap="goBack">
        <text class="back-icon">‹</text>
      </view>
      
      <view class="navbar-title">
        <text class="title-text">聊天设置</text>
      </view>
      
      <view class="navbar-right"></view>
    </view>
  </view>

  <!-- 设置内容 -->
  <scroll-view class="settings-content" scroll-y="true">
    <!-- 聊天背景设置 -->
    <view class="settings-section">
      <view class="section-title">
        <text class="title-text">聊天背景</text>
      </view>
      
      <view class="background-options">
        <!-- 默认背景 -->
        <view class="background-item {{currentBackground === 'default' ? 'active' : ''}}"
              bindtap="selectBackground"
              data-type="default">
          <view class="background-preview default-bg">
            <text class="preview-text">默认</text>
          </view>
          <text class="background-name">默认背景</text>
        </view>
        
        <!-- 预设背景 -->
        <view class="background-item {{currentBackground === item.id ? 'active' : ''}}"
              wx:for="{{presetBackgrounds}}"
              wx:key="id"
              bindtap="selectBackground"
              data-type="preset"
              data-id="{{item.id}}">
          <view class="background-preview" style="background-image: url({{item.thumbnail}});">
          </view>
          <text class="background-name">{{item.name}}</text>
        </view>
        
        <!-- 自定义背景 -->
        <view class="background-item"
              bindtap="selectCustomBackground">
          <view class="background-preview custom-bg">
            <text class="custom-icon">📷</text>
          </view>
          <text class="background-name">自定义</text>
        </view>
      </view>
    </view>

    <!-- 字体大小设置 -->
    <view class="settings-section">
      <view class="section-title">
        <text class="title-text">字体大小</text>
      </view>
      
      <view class="font-size-setting">
        <view class="font-size-options">
          <view class="font-size-item {{fontSize === 'small' ? 'active' : ''}}"
                bindtap="selectFontSize"
                data-size="small">
            <text class="size-text small-text">小</text>
          </view>
          <view class="font-size-item {{fontSize === 'medium' ? 'active' : ''}}"
                bindtap="selectFontSize"
                data-size="medium">
            <text class="size-text medium-text">中</text>
          </view>
          <view class="font-size-item {{fontSize === 'large' ? 'active' : ''}}"
                bindtap="selectFontSize"
                data-size="large">
            <text class="size-text large-text">大</text>
          </view>
          <view class="font-size-item {{fontSize === 'xlarge' ? 'active' : ''}}"
                bindtap="selectFontSize"
                data-size="xlarge">
            <text class="size-text xlarge-text">特大</text>
          </view>
        </view>
        
        <!-- 字体预览 -->
        <view class="font-preview">
          <view class="preview-message">
            <text class="preview-text {{fontSize}}-font">这是字体大小预览效果</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 消息设置 -->
    <view class="settings-section">
      <view class="section-title">
        <text class="title-text">消息设置</text>
      </view>
      
      <view class="setting-items">
        <!-- 显示时间戳 -->
        <view class="setting-item">
          <view class="item-info">
            <text class="item-title">显示时间戳</text>
            <text class="item-desc">在消息旁显示发送时间</text>
          </view>
          <switch class="setting-switch"
                  checked="{{showTimestamp}}"
                  bindchange="onTimestampChange" />
        </view>
        
        <!-- 显示已读状态 -->
        <view class="setting-item">
          <view class="item-info">
            <text class="item-title">显示已读状态</text>
            <text class="item-desc">显示消息的已读/未读状态</text>
          </view>
          <switch class="setting-switch"
                  checked="{{showReadStatus}}"
                  bindchange="onReadStatusChange" />
        </view>
        
        <!-- 消息气泡样式 -->
        <view class="setting-item" bindtap="showBubbleStyleOptions">
          <view class="item-info">
            <text class="item-title">消息气泡样式</text>
            <text class="item-desc">{{bubbleStyleName}}</text>
          </view>
          <text class="item-arrow">›</text>
        </view>
        
        <!-- 表情回应 -->
        <view class="setting-item">
          <view class="item-info">
            <text class="item-title">表情回应</text>
            <text class="item-desc">允许对消息添加表情回应</text>
          </view>
          <switch class="setting-switch"
                  checked="{{enableReactions}}"
                  bindchange="onReactionsChange" />
        </view>
      </view>
    </view>

    <!-- 隐私设置 -->
    <view class="settings-section">
      <view class="section-title">
        <text class="title-text">隐私设置</text>
      </view>
      
      <view class="setting-items">
        <!-- 阅后即焚 -->
        <view class="setting-item">
          <view class="item-info">
            <text class="item-title">阅后即焚</text>
            <text class="item-desc">消息阅读后自动删除</text>
          </view>
          <switch class="setting-switch"
                  checked="{{burnAfterReading}}"
                  bindchange="onBurnAfterReadingChange" />
        </view>
        
        <!-- 消息加密 -->
        <view class="setting-item">
          <view class="item-info">
            <text class="item-title">端到端加密</text>
            <text class="item-desc">使用端到端加密保护消息</text>
          </view>
          <switch class="setting-switch"
                  checked="{{endToEndEncryption}}"
                  bindchange="onEncryptionChange" />
        </view>
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <view class="action-btn primary" bindtap="saveSettings">
        <text class="btn-text">保存设置</text>
      </view>
      
      <view class="action-btn secondary" bindtap="resetSettings">
        <text class="btn-text">恢复默认</text>
      </view>
    </view>
  </scroll-view>
</view>

<!-- 气泡样式选择弹窗 -->
<view class="bubble-style-modal" wx:if="{{showBubbleModal}}" bindtap="closeBubbleModal">
  <view class="modal-content" catchtap="stopPropagation">
    <view class="modal-header">
      <text class="modal-title">选择气泡样式</text>
      <view class="close-btn" bindtap="closeBubbleModal">
        <text class="close-icon">✕</text>
      </view>
    </view>
    
    <view class="bubble-options">
      <view class="bubble-option {{bubbleStyle === item.id ? 'active' : ''}}"
            wx:for="{{bubbleStyles}}"
            wx:key="id"
            bindtap="selectBubbleStyle"
            data-id="{{item.id}}">
        <view class="bubble-preview {{item.class}}">
          <text class="bubble-text">示例消息</text>
        </view>
        <text class="bubble-name">{{item.name}}</text>
      </view>
    </view>
  </view>
</view>