xiaokuaisong-xiaochengxu/uniapp04/pages/testAI/testAI.vue

<template>
  <view class="chat">
    <scroll-view 
      :style="{ height: `${windowHeight - 120}rpx` }" 
      scroll-y="true" 
      :scroll-top="scrollTop"
      class="scroll-view"
    >
      <view class="chat-body">
        <view v-for="(item, index) in msgList" :key="index">
          <!-- 用户消息 -->
          <view class="item self" v-if="item.role === 'user'">
            <view class="content right">
              {{ item.content }}
            </view>
            <view class="avatar"></view>
          </view>
          
          <!-- AI回复 -->
          <view class="item Ai" v-if="item.role === 'assistant'">
            <view class="avatarAI"></view>
            <view class="content left">
              {{ item.content }}
             
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <view class="chat-bottom">
      <view class="send-msg">
        <textarea 
          v-model="inputText" 
          placeholder="请输入您的问题"
          maxlength="300" 
          :show-confirm-bar="false" 
          auto-height
          @confirm="sendQuestion"
        ></textarea>
        <button @click="sendQuestion" class="send-btn">发送</button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputText: '',
      scrollTop: 0,
      msgList: [],
      windowHeight: uni.getSystemInfoSync().windowHeight
    }
  },
  methods: {
    async sendQuestion() {
      if (!this.inputText.trim()) {
        uni.showToast({ title: '请输入有效内容', icon: 'none' });
        return;
      }

      // 添加用户消息
      this.msgList.push({
        role: 'user',
        content: this.inputText,
        debug: ''
      });

      const userInput = this.inputText;
      this.inputText = '';
      this.scrollToBottom();

      try {
        // 添加加载状态
        this.msgList.push({
          role: 'assistant',
          content: '思考中...',
          debug: ''
        });
        this.scrollToBottom();

        const startTime = Date.now();
        const modelPath = 'ft:LoRA/Qwen/Qwen2.5-72B-Instruct:23atw8mola:text:xaeoufvgbimowspuxirx-ckpt_step_12';
        
        const res = await uni.request({
          url: "https://api.siliconflow.cn/v1/chat/completions",
          method: 'POST',
          header: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer sk-rbbgeretfnwjpnmqyzutorjfwvzysnuykeowudkhuaeuokdm'
          },
          data: {
            model: modelPath,
            messages: [{ 
              role: "user", 
              content: userInput 
            }],
            temperature: 0.7,
            response_format: { type: "text" }
          }
        });

        // 移除加载状态
        this.msgList.pop();
        
        const debugInfo = [
          `[请求耗时] ${Date.now() - startTime}ms`,
          `[响应状态码] ${res.statusCode}`,
          `[模型路径] ${modelPath}`
        ].join('\n');

        if (res.statusCode === 200) {
          const answer = res.data?.choices?.[0]?.message?.content || '接收到异常响应格式';
          this.msgList.push({
            role: 'assistant',
            content: answer,
            debug: debugInfo
          });
        } else {
          this.msgList.push({
            role: 'assistant',
            content: `请求失败：${res.data?.message || '未知错误'}`,
            debug: debugInfo
          });
        }
      } catch (error) {
        this.msgList.pop();
        this.msgList.push({
          role: 'assistant',
          content: `网络异常：${error.errMsg || error.message}`,
          debug: error.stack || error
        });
      }
      this.scrollToBottom();
    },
    
    scrollToBottom() {
      this.$nextTick(() => {
        this.scrollTop = Math.random() * 1000000;
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.chat {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .scroll-view {
    flex: 1;
    background-color: #F6F6F6;
    
    .chat-body {
      padding: 20rpx;

      .item {
        display: flex;
        margin: 20rpx 0;
        
        &.self {
          justify-content: flex-end;
          
          .content {
            background-color: #4095e5;
            color: white;
            &::after {
              border-left-color: #4095e5 !important;
            }
          }
        }

        .avatar {
          width: 80rpx;
          height: 80rpx;
          border-radius: 8rpx;
          background: #ddd url('https://pic2.zhimg.com/v2-45e3ca228438d1e4c3e98e38c8f8e4a4_r.jpg?source=1940ef5c') center/cover;
        }
		.avatarAI {
			width: 80rpx;
			  height: 80rpx;
			  border-radius: 8rpx;
			  background: #ddd url('https://www.weilanai.com/wp-content/uploads/2023/05/eee.png') center/cover;
			}

        .content {
          max-width: 70%;
          padding: 20rpx;
          border-radius: 10rpx;
          position: relative;
          margin: 0 20rpx;
          word-break: break-word;
          
          &::after {
            content: '';
            position: absolute;
            top: 20rpx;
            width: 0;
            height: 0;
            border: 12rpx solid transparent;
          }

          &.left {
            background: white;
            &::after {
              left: -24rpx;
              border-right-color: white;
            }
          }

          &.right {
            background: #4095e5;
            color: white;
            &::after {
              right: -24rpx;
              border-left-color: #4095e5;
            }
          }

          .debug-info {
            margin-top: 20rpx;
            padding: 10rpx;
            background: #f0f0f0;
            border-radius: 8rpx;
            font-size: 24rpx;
            color: #666;
            white-space: pre-wrap;
          }
        }
      }
    }
  }

  .chat-bottom {
    padding: 20rpx;
    background: #EDEDED;
    border-top: 1rpx solid #ddd;

    .send-msg {
      display: flex;
      align-items: center;
      gap: 20rpx;

      textarea {
        flex: 1;
        min-height: 80rpx;
        max-height: 200rpx;
        padding: 16rpx;
        background: white;
        border-radius: 8rpx;
        font-size: 28rpx;
      }

      .send-btn {
        width: 120rpx;
        height: 80rpx;
        line-height: 80rpx;
        background: #4095e5;
        color: white;
        border-radius: 8rpx;
      }
    }
  }
}
</style>