夺宝奇兵大模型滚动到顶部，历史记录默认图片

3 weeks ago · 86429684c4
4 changed files with 113 additions and 12 deletions
--- a/src/store/chat.js
+++ b/src/store/chat.js
@ -17,7 +17,7 @@ export const useChatStore = defineStore("chat", {
    chatInput:false,
    emotionInput:false,
    firstAPICall:false,
-
+    dbqbScrollToTop:true,
  }),
  actions: {
    async getUserCount() {
--- a/src/views/AIchat.vue
+++ b/src/views/AIchat.vue
@ -1202,7 +1202,6 @@ watch(

          if (result.code == 406) {
            AIcontent.value = `<p>尊敬的用户，目前您的token余额为0，系统将无法处理您的搜索请求，您可以补充token后再进行搜索。token兑换的入口在右上角“<span style="color:blue;cursor:pointer;border-bottom:1px solid blue" onclick="window.showCountHandler()">获取token次数</span>”，点击即可操作哦~</p>`;
-
          }

          const aiMsg = {
@ -4461,6 +4460,10 @@ watch(
  { immediate: true } // 添加immediate属性，确保初始化时执行一次
 );

+const scrollToTop = () => {
+  chatStore.dbqbScrollToTop = !chatStore.dbqbScrollToTop;
+};
+
 // 添加渲染所有K线图的方法
 function renderAllKlineCharts() {
  console.log("重新渲染所有K线图");
@ -4767,6 +4770,24 @@ onUnmounted(() => {
      </div>
    </div>
  </div>
+  <!-- 全局返回顶部按钮 -->
+  <div v-if="chatMsg.length > 0" class="back-to-top" @click="scrollToTop">
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 4L12 20M12 4L6 10M12 4L18 10"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </div>
 </template>

 <style scoped>
@ -4882,6 +4903,38 @@ p {
  animation-play-state: running;
 }

+/* 返回顶部按钮样式 */
+.back-to-top {
+  position: sticky !important;
+  bottom: 20px !important;
+  left: calc(100% - 70px) !important;
+  width: 50px !important;
+  height: 50px !important;
+  background: linear-gradient(135deg, #00d4ff 0%, #0066cc 100%) !important;
+  border-radius: 50% !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  cursor: pointer !important;
+  transition: all 0.3s ease !important;
+  z-index: 100 !important;
+  color: white !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+  margin-top: 20px !important;
+  margin-bottom: 20px !important;
+}
+
+.back-to-top:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 20px rgba(0, 212, 255, 0.5);
+  background: linear-gradient(135deg, #00e6ff 0%, #0077dd 100%);
+}
+
+.back-to-top:active {
+  transform: translateY(-1px);
+}
+
 /* 添加PC端专用速度 */
@media (min-width: 768px) {
  .top {
@ -5247,6 +5300,12 @@ p {
  .message-bubble.ai.mianze {
    font-size: 18px;
  }
+
+  .back-to-top {
+    left: calc(100% - 65px) !important;
+    width: 45px !important;
+    height: 45px !important;
+  }
 }

 .kline-container .chart-mount-point {
@ -5306,4 +5365,17 @@ p {
 .fourStep {
  white-space: nowrap;
 }
+
+@media only screen and (max-width: 480px) {
+  .back-to-top {
+    left: calc(100% - 60px) !important;
+    width: 40px !important;
+    height: 40px !important;
+  }
+
+  .back-to-top svg {
+    width: 20px;
+    height: 20px;
+  }
+}
 </style>
--- a/src/views/components/HistoryRecord.vue
+++ b/src/views/components/HistoryRecord.vue
@ -92,6 +92,7 @@
                <img
                  :src="marketList[record.stockMarket]"
                  :alt="record.stockMarket"
+                  @error="handleImageError"
                />
              </div>
              <div class="record-msg">
@ -463,15 +464,21 @@ const getHistoryList = async (params) => {
  try {
    const result = await getHistoryListAPI(params);
    historyRecords.value = result.data;
-    
+
    // 检查数据是否有变化，使用简单的哈希值比较
-    const currentDataHash = JSON.stringify(result.data.map(r => ({ id: r.id, isTop: r.isTop, createdTime: r.createdTime })));
+    const currentDataHash = JSON.stringify(
+      result.data.map((r) => ({
+        id: r.id,
+        isTop: r.isTop,
+        createdTime: r.createdTime,
+      }))
+    );
    if (cachedCategoryHistory && lastDataHash === currentDataHash) {
      // 使用缓存的分类结果
      categoryHistory.value = cachedCategoryHistory;
      return;
    }
-    
+
    let remainingRecords = result.data; // 复制原数组
    // console.log(
    //   "params",
@ -520,25 +527,28 @@ const getHistoryList = async (params) => {
    const yesterday = moment().subtract(1, "days").endOf("day");
    const sevenDaysAgo = moment().subtract(7, "days").startOf("day");
    const thirtyDaysAgo = moment().subtract(30, "days").startOf("day");
-    
+
    const topList = [];
    const todayList = [];
    const recent3DaysList = [];
    const recent7DaysList = [];
    const recent30DaysList = [];
-    
+
    remainingRecords.forEach((record) => {
      if (record.isTop === 1) {
        topList.push(record);
        return;
      }
-      
+
      const recordDate = moment(record.createdTime);
      const recordDateStr = recordDate.format("YYYY-MM-DD");
-      
+
      if (recordDateStr === today) {
        todayList.push(record);
-      } else if (recordDate.isAfter(threeDaysAgo) && recordDate.isBefore(yesterday)) {
+      } else if (
+        recordDate.isAfter(threeDaysAgo) &&
+        recordDate.isBefore(yesterday)
+      ) {
        recent3DaysList.push(record);
      } else if (recordDate.isAfter(sevenDaysAgo)) {
        recent7DaysList.push(record);
@ -571,11 +581,11 @@ const getHistoryList = async (params) => {
        list: recent30DaysList,
      },
    ];
-    
+
    // 更新缓存
    cachedCategoryHistory = categoryHistory.value;
    lastDataHash = currentDataHash;
-    
+
    // console.log("historyRecords", historyRecords.value);
    // console.log("categoryHistory", categoryHistory.value);
  } catch (e) {
@ -655,6 +665,14 @@ const closeHistory = () => {
  }
 };

+// 图片加载错误处理
+const handleImageError = (event) => {
+  console.error("图片加载失败:", event.target.src);
+  // 可以设置默认图片或重试逻辑
+  event.target.src =
+    "https://d31zlh4on95l9h.cloudfront.net/images/9a431843b182c64a05fa3c8f6772b8a4.png";
+};
+
 const historyData = ref({});
 const selectRecord = async (record) => {
  if (props.currentType == "AIchat" && chatStore.firstAPICall) {
--- a/src/views/homePage.vue
+++ b/src/views/homePage.vue
@ -619,6 +619,17 @@ watch(
 );

 watch(
+  () => chatStore.dbqbScrollToTop,
+  async (newValue, oldValue) => {
+    const container = getCurrentScrollContainer();
+    if (!container) return;
+
+    await nextTick(); // 确保在DOM更新后执行
+    container.scrollTop = 0;
+  }
+);
+
+watch(
  activeTab,
  async () => {
    console.log("activeTab变化了", activeTab.value);