北京百思可瑞教育：使用UniApp实现一个AI对话页面

html<template>  <view class="ai-container">    <!-- 状态提示区 -->    <view class="status-bar">      <view class="network-status" v-if="isOffline">离线模式</view>      <view class="typing-indicator" v-if="isTyping">        <view class="dot"></view>        <view class="dot"></view>        <view class="dot"></view>      </view>    </view>     <!-- 消息展示区 -->    <scroll-view       class="message-scroll"       scroll-y       :scroll-top="scrollTop"      @scrolltoupper="loadHistory"      scroll-with-animation>      <view class="message-list">        <!-- 日期分隔线 -->        <view class="date-separator" v-if="showDateLine">          {{ formattedDate }}        </view>                <!-- 消息节点 -->        <view           v-for="(msg, index) in messages"           :key="msg.id"          :class="['message-item', msg.role]"          :id="`msg-${msg.id}`">                    <!-- 用户消息 -->          <view class="user-message" v-if="msg.role === 'user'">            <image class="avatar" src="/static/user-avatar.png"></image>            <view class="bubble">              <text>{{ msg.content }}</text>              <view class="time">{{ formatTime(msg.time) }}</view>            </view>          </view>                    <!-- AI消息 -->          <view class="ai-message" v-else>            <image               class="avatar"               :src="isPlaying ? '/static/ai-active.gif' : '/static/ai-static.png'">            </image>            <view class="bubble">              <!-- 多媒体内容 -->              <rich-text :nodes="renderMedia(msg.content)"></rich-text>              <view class="time">{{ formatTime(msg.time) }}</view>            </view>          </view>        </view>      </view>    </scroll-view>     <!-- 输入控制区 -->    <view class="input-panel">      <!-- 语音输入模式 -->      <view class="voice-input" v-if="inputMode === 'voice'">        <view           class="record-btn"          @touchstart="startRecord"          @touchend="stopRecord"          @touchmove="handleTouchMove">          <text>{{ recordStatus }}</text>        </view>        <view class="cancel-hint" v-if="isCanceling">          松开手指 取消发送        </view>      </view>            <!-- 文字输入模式 -->      <view class="text-input" v-else>        <input          v-model="inputText"          @confirm="sendText"          placeholder="请输入问题..."          confirm-type="send"          :disabled="isSending" />        <button           class="send-btn"           :disabled="!inputText.trim() || isSending"          @click="sendText">          {{ isSending ? '发送中...' : '发送' }}        </button>      </view>            <!-- 模式切换 -->      <view class="mode-switch">        <image           :src="inputMode === 'text' ? '/static/voice.png' : '/static/keyboard.png'"          @click="toggleInputMode">        </image>      </view>    </view>  </view></template>

typescript// 语音识别服务class SpeechRecognizer {  private recognition: SpeechRecognition;  private interimTranscript: string = '';    constructor() {    this.recognition = new (window.SpeechRecognition ||       (window as any).webkitSpeechRecognition)();    this.initConfig();  }    private initConfig() {    this.recognition.continuous = false;    this.recognition.interimResults = true;    this.recognition.lang = 'zh-CN';        this.recognition.onresult = (event: SpeechRecognitionEvent) => {      let interimTranscript = '';      for (let i = event.resultIndex; i < event.results.length; i++) {        const transcript = event.results[i][0].transcript;        if (event.results[i].isFinal) {          this.finalTranscript += transcript;        } else {          interimTranscript += transcript;        }      }      this.interimTranscript = interimTranscript;      // 实时更新输入框      uni.$emit('speech-update', this.finalTranscript + interimTranscript);    };  }    public start() {    this.finalTranscript = '';    this.recognition.start();  }    public stop() {    this.recognition.stop();    return this.finalTranscript;  }}

typescript// 流式消息处理器class StreamMessageHandler {  private eventSource: EventSource | null = null;  private messageBuffer: string = '';  private isProcessing: boolean = false;    constructor(private callback: (msg: string) => void) {}    public connect(url: string, token: string) {    this.eventSource = new EventSource(url, {      headers: {        'Authorization': `Bearer ${token}`,        'Content-Type': 'application/json'      }    });        this.eventSource.onmessage = (event: MessageEvent) => {      const data = JSON.parse(event.data);      if (data.event === 'message') {        this.messageBuffer += data.answer;        if (!this.isProcessing) {          this.isProcessing = true;          this.simulateTyping();        }      }    };        this.eventSource.onerror = (error) => {      console.error('Stream error:', error);      this.disconnect();    };  }    private simulateTyping() {    const chars = this.messageBuffer.split('');    let displayed = '';        const typeChar = () => {      if (chars.length > 0) {        displayed += chars.shift();        this.callback(displayed);        setTimeout(typeChar, 30); // 30ms/字符的打字机效果      } else {        this.isProcessing = false;      }    };        typeChar();  }    public disconnect() {    this.eventSource?.close();    this.eventSource = null;  }}

css.ai-container {  display: flex;  flex-direction: column;  height: 100vh;    .message-scroll {    flex: 1;    overflow: hidden;    padding: 20rpx;        .message-list {      display: flex;      flex-direction: column;      min-height: 100%;      justify-content: flex-end;    }  }    .input-panel {    position: relative;    padding: 20rpx;    background: #f5f5f5;  }} /* 横屏适配 */@media screen and (orientation: landscape) {  .ai-container {    flex-direction: row;        .message-scroll {      width: 70%;    }        .input-panel {      width: 30%;      height: 100%;    }  }}

typescript// 媒体内容解析器function renderMedia(content: string) {  const imageRegex = /\!\[.*?\]\((.*?)\)/g;  const videoRegex = /<video.*?src="(.*?)".*?><\/video>/g;    // 图片渲染  let processed = content.replace(imageRegex, (match, url) => {    return `<img src="${url}" mode="widthFix" class="media-image" />`;  });    // 视频渲染（需配合rich-text组件）  processed = processed.replace(videoRegex, (match, url) => {    return `<video src="${url}" controls class="media-video"></video>`;  });    return processed;}

typescript// 消息管理器class MessageManager {  private historyOffset: number = 0;  private historyLimit: number = 10;    public async loadHistory(sessionID: string) {    try {      const response = await uni.request({        url: '/api/messages',        method: 'GET',        data: {          sessionID,          offset: this.historyOffset,          limit: this.historyLimit        }      });            const newMessages = response.data;      if (newMessages.length > 0) {        this.historyOffset += newMessages.length;        // 在消息列表头部插入历史记录        this.messages.unshift(...newMessages);      }      return newMessages.length > 0;    } catch (error) {      console.error('加载历史记录失败:', error);      return false;    }  }}