deepChartVueApp/pages/deepMate/deepMate.vue

<template>
  <view class="deepMate-page">
    <!-- 顶部导航栏 - 固定定位 -->
    <view class="header" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
      <view class="header-left">
        <image
          src="https://d31zlh4on95l9h.cloudfront.net/images/f91e09b5987802185e7679055dafd272.svg"
          class="icon"
        ></image>
      </view>
      <view class="header-center">
        <text class="title">DeepMate</text>
      </view>
      <view class="header-right">
        <image
          src="https://d31zlh4on95l9h.cloudfront.net/images/d7c4e74201213a25dd9574e908233928.svg"
          class="icon"
        ></image>
        <image
          src="https://d31zlh4on95l9h.cloudfront.net/images/099903c4aabf5713488b5cb60815e3f7.svg"
          class="icon"
        ></image>
        <!-- 新增新会话按钮
        <button class="new-chat-button" @click="newChat">
          <text class="new-chat-text">新会话</text>
        </button> -->
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="main-content">
      <!-- 顶部固定区域占位符 -->
      <view class="banner-placeholder"></view>
      
      <view class="banner-panel" 
                :class="messages.length === 0 ? '' : 'panelShow'"
>
        <image
          src="https://d31zlh4on95l9h.cloudfront.net/images/42e18bd7fe97d4f4f37aa70439a0990b.svg"
          class="pray-banner"
          :class="messages.length === 0 ? '' : 'show'"
          mode="aspectFill"
        ></image>
        <view class="contain">
          <!-- 机器人头像和欢迎语 -->
          <view class="robot-container">
            <image
              src="https://d31zlh4on95l9h.cloudfront.net/images/61fa384381c88ad80be28f41827fe0e5.svg"
              class="robot-avatar"
            ></image>
            <view class="welcome-message">
              <text class="greeting">Hi, 我是您的股市随身顾问~</text>
              <text class="description"
                >个股诊断、市场情绪解读，都可以找我。</text
              >
            </view>
          </view>

          <!-- 功能标签栏 -->
          <view
            class="function-tabs"
            v-if="messages.length === 0"
            scroll-x="true"
            show-scrollbar="false"
          >
            <view class="tab-item">个股诊断</view>
            <view class="tab-item">市场情绪温度计</view>
            <view class="tab-item">买卖时机提示</view>
            <view class="tab-item">个股</view>
          </view>

          <!-- 特斯拉推荐卡片 -->
          <view class="recommend-card" v-if="messages.length === 0">
            <view class="arrow" v-if="messages.length === 0"></view>
            <view class="card-content">
              <image
                src="../../static/images/tesla-logo.png"
                class="logo"
              ></image>
              <view class="card-text">
                <text class="main-question">当前特斯拉该如何布局？</text>
                <text class="stock-code">TSLA</text>
              </view>
              <image
                src="https://d31zlh4on95l9h.cloudfront.net/images/40d94054644f6e3f1c366751f07f0010.svg"
                class="arrow-icon"
                @click="goBlank"
              ></image>
            </view>
          </view>
        </view>
      </view>
      <!-- 可能感兴趣的话题 -->
      <view v-if="messages.length === 0" class="interest-section">
        <text class="section-title">- 您可能感兴趣 -</text>
        <view class="topics-list">
          <view class="topic-item" v-for="topic in hotTopics" :key="topic.id">
            <image :src="topic.icon" class="tag-icon"></image>
            <text class="topic-text" @click="sendMessageList(topic.text)">{{
              topic.text
            }}</text>
          </view>
        </view>
      </view>

      <!-- 聊天区域 -->
      <view class="chat-container" v-if="messages.length > 0">
        <!-- 给聊天容器添加滚动引用 -->
        <scroll-view class="chat-scroll-view" scroll-y="true" :scroll-top="scrollTop">
          <view class="message-list" id="messageList">
            <view
              v-for="(message, index) in messages"
              :key="index"
              :class="
                message.isUser ? 'message user-message' : 'message bot-message'
              "
            >
              <!-- 会话图标 -->
              <text
                :class="
                  message.isUser
                    ? 'fa-solid fa-user message-icon'
                    : 'fa-solid fa-robot message-icon'
                "
              ></text>
              <!-- 会话内容 -->
              <view class="message-content">
                <text class="message-text">{{ message.content }}</text>
                <!-- loading -->
                <view
                  class="loading-dots"
                  v-if="message.isThinking "
                >
                  <text class="dot"></text>
                  <text class="dot"></text>
                  <text class="dot"></text>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>

    <!-- 输入框区域 -->
    <view class="input-area">
      <view class="input-wrapper">
        <input
          type="text"
          placeholder="请输入股票代码/名称，获取AI洞察"
          placeholder-style="color:#fff;opacity:1"
          class="input-field"
          v-model="inputMessage"
          @confirm="sendMessage"
        />
        <image class="send-button" @click="sendMessage" :disabled="isSending">
          <!-- <image
            src="https://d31zlh4on95l9h.cloudfront.net/images/95f1ea2262e9157db13c93c0dc1c5d96.svg"
            class="send-icon"
          ></image> -->
        </image>
      </view>
      <text class="disclaimer"
        >以上数据由AI生成，不作为最终投资建议，决策需独立！</text
      >
    </view>

    <image
      class="back-to-top"
      src="https://d31zlh4on95l9h.cloudfront.net/images/ba357635d2bb480241952bb1cabacd73.svg"
      @click="scrollToTop"
    ></image>
    <footerBar class="static-footer" :type="type"></footerBar>
  </view>
</template>

<script setup>
const { safeAreaInsets } = uni.getSystemInfoSync();

import { ref, onMounted, nextTick, watch } from "vue";
import footerBar from "../../components/footerBar-cn.vue";


const type = ref('member')
const inputMessage = ref("");
const isSending = ref(false);
const uuid = ref("");
const messages = ref([]);
const scrollTop = ref(0); // 用于控制scroll-view的滚动位置
const hotTopics = ref([
  {
    id: 1,
    text: "英伟达(NVDA)股票情绪温度？",
    icon: "https://d31zlh4on95l9h.cloudfront.net/images/7ed58be0f4b81aeb398d9ba2534a624b.svg",
  },
  {
    id: 2,
    text: "博通(AVGO)明天还能涨吗？",
    icon: "https://d31zlh4on95l9h.cloudfront.net/images/7ed58be0f4b81aeb398d9ba2534a624b.svg",
  },
  {
    id: 3,
    text: "为什么Fluence Energy(FLNC)会暴涨？",
    icon: "https://d31zlh4on95l9h.cloudfront.net/images/7ed58be0f4b81aeb398d9ba2534a624b.svg",
  },
  {
    id: 4,
    text: "为什么Fluence Energy(FLNC)会暴涨？",
    icon: "https://d31zlh4on95l9h.cloudfront.net/images/7ed58be0f4b81aeb398d9ba2534a624b.svg",
  },
]);

// 初始化
onMounted(() => {
  initUUID();
  // 如果有历史消息，滚动到底部
  if (messages.value.length > 0) {
    setTimeout(() => {
      scrollToBottom();
    }, 200);
  }
});

// 监听消息变化，当有新消息时自动滚动到最新消息
watch(messages, (newMessages) => {
  // 延迟执行滚动，确保DOM更新完成
  setTimeout(() => {
    scrollToBottom();
  }, 100);
}, { deep: true });

// 初始化 UUID
const initUUID = () => {
  let storedUUID = uni.getStorageSync("user_uuid");
  if (!storedUUID) {
    storedUUID = generateUUID();
    uni.setStorageSync("user_uuid", storedUUID);
  }
  uuid.value = storedUUID;
};

// 生成简单UUID
const generateUUID = () => {
  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
    var r = (Math.random() * 16) | 0,
      v = c == "x" ? r : (r & 0x3) | 0x8;
    return v.toString(16);
  });
};

// 新会话
const newChat = () => {
  messages.value = [];
  uni.removeStorageSync("user_uuid");
  initUUID();
};

// 跳转到空白页
const goBlank = () => {
  uni.navigateTo({
    url: "/pages/blank/blank",
  });
};

// 发送消息
const sendMessage = () => {
  if (inputMessage.value.trim() === "" || isSending.value) return;

  const userMessage = {
    content: inputMessage.value,
    isUser: true,
    isThinking: false,
    isTyping: false,
  };

  messages.value.push(userMessage);
  inputMessage.value = "";

  // 滚动到底部
  setTimeout(() => {
    scrollToBottom();
  }, 100);

  // 模拟机器人回复
  simulateBotResponse(userMessage.content);
};

// 发送消息
const sendMessageList = (listMessage) => {
  console.log(listMessage);

  const userMessage = {
    content: listMessage,
    isUser: true,
    isThinking: false,
    isTyping: false,
  };

  messages.value.push(userMessage);
  inputMessage.value = "";

  // 滚动到底部
  setTimeout(() => {
    scrollToBottom();
  }, 100);

  // 模拟机器人回复
  simulateBotResponse(userMessage.content);
};

// 模拟机器人回复
const simulateBotResponse = (userMessage) => {
  isSending.value = true;

  // 添加机器人加载消息
  const botMsg = {
    content: "",
    isUser: false,
    isTyping: true,
    isThinking: false,
  };

  messages.value.push(botMsg);

  // 滚动到底部
  setTimeout(() => {
    scrollToBottom();
  }, 100);

  // 模拟流式响应
  let responseText = `我已经收到您的消息: "${userMessage}"。作为您的股市顾问，我可以为您提供专业的投资建议。请问您想了解哪方面的信息？`;
  let index = 0;

  const typeWriter = () => {
    if (index < responseText.length) {
      // 使用 Vue 的响应式更新机制
      messages.value[messages.value.length - 1].content = responseText.substring(0, index + 1);
      index++;

      // 滚动到底部，更频繁地触发滚动以适应文本增长
      setTimeout(() => {
        scrollToBottom();
      }, 20);

      setTimeout(typeWriter, 30);
    } else {
      messages.value[messages.value.length - 1].isTyping = false;
      isSending.value = false;
      // 最后确保滚动到底部
      setTimeout(() => {
        scrollToBottom();
      }, 100);
    }
  };

  setTimeout(typeWriter, 500);
};

// 滚动到底部
const scrollToBottom = () => {
  // 使用scroll-view的scrollTop属性来控制滚动
  const query = uni.createSelectorQuery();
  query.select("#messageList").boundingClientRect();
  
  query.exec((res) => {
    if (res[0]) {
      // 设置scrollTop为消息列表的高度，实现滚动到底部
      scrollTop.value = res[0].height;
    }
  });
};

const scrollToTop = () => {
  // 滚动到顶部
  scrollTop.value = 0;
};
</script>

<style scoped>
.deepMate-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #ffffff;
  padding: 20rpx 0rpx;
  position: relative;
  overflow: hidden; /* 禁止页面整体滚动 */
}

/* 顶部导航栏 - 固定定位 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

/* 顶部固定区域占位符 */
.header-placeholder {
  height: 120rpx; /* 与header高度一致 */
}

/* 顶部固定区域占位符 */
.banner-placeholder {
  height: 80rpx; /* 与header高度一致，防止内容被固定头部遮挡 */
}

.header-left,
.header-right {
  display: flex;
  align-items: center;
}

.header-left .icon,
.header-right .icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.header-center .title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

.new-chat-button {
  background-color: #ff6600;
  border: none;
  border-radius: 8rpx;
  padding: 10rpx 20rpx;
}

.new-chat-text {
  color: white;
  font-size: 24rpx;
}

.main-content {
  flex: 1;
  padding: 20rpx;
  overflow-y: hidden; /* 禁止主内容区域滚动 */
  margin-top: 20rpx;
  margin-bottom: 250rpx;
}

.robot-container {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.robot-avatar {
  width: 130rpx;
  height: 130rpx;
  border-radius: 50%;
  margin-right: 10rpx;
}

.welcome-message {
  flex: 1;
}

.greeting {
  font-size: 32rpx;
  margin-left: 50rpx;
  top: 40rpx;
  font-weight: bold;
  color: #333333;
  line-height: 48rpx;
}

.description {
  display: block;
  font-size: 24rpx;
  color: #666666;
  line-height: 36rpx;
  margin-top: 10rpx;
  margin-left: 45rpx;
}

.function-tabs {
  display: flex;
  margin-bottom: 30rpx;
}

.tab-item {
  padding: 5rpx 20rpx;
  border-radius: 20rpx;
  font-size: 20rpx;
  font-weight: 700;
  color: #666666;
  background-color: #fffefe;
  margin-right: 20rpx;
  transition: all 0.3s;
}

.tab-item.active {
  color: #ff6600;
  background-color: #fff;
  border: 1rpx solid #ff6600;
}

.recommend-card {
  background: url("https://d31zlh4on95l9h.cloudfront.net/images/4da1d629a55c307c3605ca15bf15189a.svg");
  background-repeat: no-repeat;
  /* border-radius: 20rpx; */
  padding: 40rpx;
  margin-bottom: 30rpx;
  /* box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); */
}

.card-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  width: 80rpx;
  height: 80rpx;
  background-color: #ff0000;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.card-text {
  flex: 1;
  margin-left: 20rpx;
}

.main-question {
  font-size: 32rpx;
  color: #333333;
  line-height: 48rpx;
}

.stock-code {
  display: block;
  font-size: 24rpx;
  color: #ff3b30;
  background-color: #ffffff;
  padding: 2rpx 15rpx;
  border-radius: 12rpx;
  margin-top: 8rpx;
  width: fit-content;
  border: 1rpx solid #ff3b30;
}

.arrow-icon {
  background: url("https://d31zlh4on95l9h.cloudfront.net/images/40d94054644f6e3f1c366751f07f0010.svg");
  background-repeat: no-repeat;
  left: 0.5rem;
  top: 1.8rem;
  background-size: 100% 100%;
  width: 60rpx;
  height: 60rpx;
}

.interest-section {
  margin-bottom: 30rpx;
}

.section-title {
  display: block;
  text-align: center;
  font-size: 26rpx;
  color: #666666;
  margin-bottom: 20rpx;
}

.topics-list {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.topic-item {
  display: flex;
  align-items: center;
  padding: 15rpx 20rpx;
  background-color: #f0f0f0;
  border-radius: 15rpx;
  width: fit-content;
}

.tag-icon {
  width: 24rpx;
  height: 24rpx;
  margin-right: 10rpx;
}

.topic-text {
  font-size: 28rpx;
  color: #333333;
  flex: 1;
}

/* 聊天区域样式 */
.chat-container {
  margin-top: 30rpx;
  border-radius: 10rpx;
  height: fit-content;
  /* overflow-y: auto; */
}

.chat-scroll-view {
  height: calc(80vh - 250rpx); /* 根据需要调整高度 */
  margin-top: 180rpx;
}

.message-list {
  /* padding: 20rpx; */
  /* margin-top: 200rpx; */
}

.message {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30rpx;
}

.user-message {
  flex-direction: row-reverse;
}

.message-icon {
  font-size: 24rpx;
  margin: 0 10rpx;
  padding: 10rpx;
  border-radius: 50%;
  background-color: #ddd;
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-message .message-icon {
  background-color: #007aff;
  color: white;
}

.bot-message .message-icon {
  background-color: #34c759;
  color: white;
}

.message-content {
  max-width: 70%;
  position: relative;
}

.user-message .message-content {
  background-color: #007aff;
  border-radius: 10rpx;
  padding: 15rpx;
}

.bot-message .message-content {
  background-color: #f0f0f0;
  border-radius: 10rpx;
  padding: 15rpx;
}

.message-text {
  font-size: 28rpx;
  line-height: 40rpx;
}

.user-message .message-text {
  color: white;
}

.bot-message .message-text {
  color: #333;
}

.loading-dots {
  display: flex;
  align-items: center;
  padding-top: 10rpx;
}

.dot {
  width: 10rpx;
  height: 10rpx;
  background-color: #666;
  border-radius: 50%;
  margin: 0 4rpx;
  animation: loading 1.4s infinite ease-in-out both;
}

.user-message .dot {
  background-color: white;
}

.dot:nth-child(1) {
  animation-delay: -0.32s;
}

.dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes loading {
  0%,
  80%,
  100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.input-area {
  position: fixed;
  bottom: 70rpx;
  left: 0;
  right: 0;
  padding: 0 40rpx 80rpx 40rpx;
  background-color: #ffffff;
  z-index: 999;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  padding: 15rpx 20rpx;
  background-color: rgb(220, 31, 29);
  border-radius: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  height: 50rpx;
}

.mic-icon {
  width: 36rpx;
  height: 36rpx;
  margin-right: 20rpx;
}

.input-field {
  flex: 1;
  font-size: 28rpx;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 60rpx;
  background: none;
  border: none;
  outline: none;
}

.input-field::placeholder {
  color: #ffffff !important;
  opacity: 1;
}

.send-button {
  background: url("https://d31zlh4on95l9h.cloudfront.net/images/95f1ea2262e9157db13c93c0dc1c5d96.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 50rpx;
  width: 50rpx;
  padding: 0;
  border: 1rpx solid transparent;
  margin-left: 20rpx;
}

.send-icon {
  width: 36rpx;
  height: 36rpx;
}

.disclaimer {
  font-size: 15rpx;
  color: #4d4c4c;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 15rpx;
}
.banner-panel {
  position: relative;
  height: 480rpx; /* 拉长容器，灰色背景跟随变高 */
  overflow: hidden; /* 让圆角和内部层剪裁一致 */
  border-radius: 15rpx;
}
.panelShow{
  height: 12%;
  position: fixed;
  top: 70rpx;
  z-index: 999;
  width: 95%;
}

.pray-banner {
  position: absolute;
  /* background-size: 100% 100%; */
  inset: 0; /* 顶部、底部、左、右都贴合容器 */
  width: 100%;
  height: 88%;
  border-radius: 15rpx;
  z-index: 1; /* 在灰底之上、内容之下 */
}


.contain {
  margin: 0 20rpx;
  gap: 5rpx;
}
.banner-panel .robot-container,
.banner-panel .function-tabs,
.banner-panel .recommend-card {
  position: relative;
  z-index: 2;
}
.back-to-top {
  position: fixed;
  right: 30rpx;
  bottom: 35%;
  width: 100rpx;
  height: 100rpx;
  z-index: 1000;
}
.back-to-top:active {
  transform: scale(0.96);
}
.static-footer {
	position: fixed;
	bottom: 0;
  z-index: 999;
}
/* 顶部固定区域占位符 */
.banner-placeholder {
  height: 60rpx; /* 与header高度一致，防止内容被固定头部遮挡 */
}
</style>