新增历史记录组件；探底雷达图表修改；

src/views/components/HistoryRecord.vue

@@ -0,0 +1,517 @@
+<template>
+  <div class="history-record-container" :class="{ 'collapsed': isCollapsed }">
+    <!-- 收起状态的展开按钮和图标 -->
+    <div v-if="isCollapsed" class="collapsed-container">
+      <img class="collapsed-icon" src="src/assets/img/Selectmodel/机器人手机.png" alt="icon" />
+      <div class="collapsed-toggle-btn" @click="toggleCollapse">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M9 18L15 12L9 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </div>
+    </div>
+
+    <!-- 历史记录内容 -->
+    <div class="history-content" v-show="!isCollapsed">
+      <!-- 折叠/展开按钮 -->
+      <div class="toggle-btn" @click="toggleCollapse">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M15 18L9 12L15 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </div>
+      <!-- 标题 -->
+      <div class="history-header">
+        <div class="history-actions">
+          <img src="/src/assets/img/homePage/logo.png" alt="Logo" class="logo-img" />
+        </div>
+      </div>
+
+      <!-- 历史记录列表 -->
+      <div class="history-list">
+        <div 
+          v-for="(record, index) in filteredHistory" 
+          :key="record.id"
+          class="history-item"
+          @click="selectRecord(record)"
+          :class="{ 'active': selectedRecordId === record.id }"
+        >
+          <div class="record-content">
+            <div class="record-type">
+              <span class="type-badge" :class="record.type">
+                {{ record.type === 'AIchat' ? '夺宝奇兵' : 'AI情绪' }}
+              </span>
+            </div>
+            <div class="record-text">{{ record.question }}</div>
+            <div class="record-time">{{ formatTime(record.timestamp) }}</div>
+          </div>
+          <div class="record-actions">
+            <button class="delete-btn" @click.stop="deleteRecord(record.id)" title="删除">
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+            </button>
+          </div>
+        </div>
+        
+        <!-- 空状态 -->
+        <div v-if="filteredHistory.length === 0" class="empty-state">
+          <div class="empty-icon">
+            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 1H5C3.89 1 3 1.89 3 3V21C3 22.1 3.89 23 5 23H19C20.1 23 21 22.1 21 21V9M19 9H14V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+            </svg>
+          </div>
+          <p class="empty-text">暂无历史记录</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+
+// Props
+const props = defineProps({
+  currentType: {
+    type: String,
+    default: 'AIchat' // 'AIchat' 或 'AiEmotion'
+  }
+})
+
+// Emits
+const emit = defineEmits(['selectRecord', 'recordAdded', 'startNewChat'])
+
+// 响应式数据
+const isCollapsed = ref(false)
+const selectedRecordId = ref(null)
+const historyRecords = ref([])
+
+// 计算属性
+const filteredHistory = computed(() => {
+  return historyRecords.value
+})
+
+// 方法
+const toggleCollapse = () => {
+  isCollapsed.value = !isCollapsed.value
+  // 保存折叠状态到本地存储
+  localStorage.setItem('historyRecordCollapsed', isCollapsed.value)  
+}
+
+const addRecord = (question, type = props.currentType) => {
+  const newRecord = {
+    id: Date.now() + Math.random(),
+    question: question.trim(),
+    type: type,
+    timestamp: new Date().toISOString(),
+    answer: '' // 可以后续添加回答内容
+  }
+  
+  // 添加到列表开头
+  historyRecords.value.unshift(newRecord)
+  
+  // 限制历史记录数量（最多保存100条）
+  if (historyRecords.value.length > 100) {
+    historyRecords.value = historyRecords.value.slice(0, 100)
+  }
+  
+  // 保存到本地存储
+  saveToLocalStorage()
+  
+  emit('recordAdded', newRecord)
+}
+
+const selectRecord = (record) => {
+  selectedRecordId.value = record.id
+  emit('selectRecord', record)
+}
+
+const deleteRecord = (recordId) => {
+  const index = historyRecords.value.findIndex(record => record.id === recordId)
+  if (index > -1) {
+    historyRecords.value.splice(index, 1)
+    saveToLocalStorage()
+    
+    // 如果删除的是当前选中的记录，清除选中状态
+    if (selectedRecordId.value === recordId) {
+      selectedRecordId.value = null
+    }
+  }
+}
+
+const clearHistory = () => {
+  if (confirm('确定要清空所有历史记录吗？')) {
+    historyRecords.value = []
+    selectedRecordId.value = null
+    saveToLocalStorage()
+  }
+}
+
+const formatTime = (timestamp) => {
+  const date = new Date(timestamp)
+  const now = new Date()
+  const diff = now - date
+  
+  // 小于1分钟
+  if (diff < 60000) {
+    return '刚刚'
+  }
+  
+  // 小于1小时
+  if (diff < 3600000) {
+    return `${Math.floor(diff / 60000)}分钟前`
+  }
+  
+  // 小于1天
+  if (diff < 86400000) {
+    return `${Math.floor(diff / 3600000)}小时前`
+  }
+  
+  // 大于1天
+  if (diff < 604800000) {
+    return `${Math.floor(diff / 86400000)}天前`
+  }
+  
+  // 超过一周，显示具体日期
+  return date.toLocaleDateString('zh-CN', {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit'
+  })
+}
+
+const saveToLocalStorage = () => {
+  localStorage.setItem('aiChatHistoryRecords', JSON.stringify(historyRecords.value))
+}
+
+const loadFromLocalStorage = () => {
+  try {
+    const saved = localStorage.getItem('aiChatHistoryRecords')
+    if (saved) {
+      historyRecords.value = JSON.parse(saved)
+    }
+    
+    // 加载折叠状态
+    const collapsedState = localStorage.getItem('historyRecordCollapsed')
+    if (collapsedState !== null) {
+      isCollapsed.value = collapsedState === 'true'
+    }
+  } catch (error) {
+    console.error('加载历史记录失败:', error)
+    historyRecords.value = []
+  }
+}
+
+// 暴露方法和状态给父组件
+defineExpose({
+  addRecord,
+  clearHistory,
+  isCollapsed
+})
+
+// 生命周期
+onMounted(() => {
+  loadFromLocalStorage()
+})
+
+// 监听历史记录变化，自动保存
+watch(historyRecords, () => {
+  saveToLocalStorage()
+}, { deep: true })
+</script>
+
+<style scoped>
+.history-record-container {
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 300px;
+  background: rgb(4, 47, 144);
+  border-right: 1px solid rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  z-index: 1000;
+  transition: transform 0.3s ease;
+  display: flex;
+  flex-direction: column;
+}
+
+.history-record-container.collapsed {
+  transform: translateX(-260px);
+}
+
+.toggle-btn {
+  position: absolute;
+  right: 15px;
+  top: 20px;
+  width: 32px;
+  height: 32px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 6px;
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  z-index: 10;
+}
+
+.toggle-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.collapsed-container {
+  position: fixed;
+  right: 4px;
+  top: 5%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  z-index: 1000;
+}
+
+.collapsed-icon {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+
+.collapsed-toggle-btn {
+  width: 32px;
+  height: 32px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  color: white;
+}
+
+.collapsed-toggle-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.history-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  overflow: hidden;
+}
+
+.history-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.history-actions {
+  display: flex;
+  align-items: center;
+}
+
+.logo-img {
+  height: auto;
+  width: 80%;
+  object-fit: contain;
+}
+
+
+.new-chat-btn {
+  width: 100%;
+  padding: 12px 16px;
+  border: none;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  color: white;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.new-chat-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  transform: translateY(-1px);
+}
+
+.new-chat-btn:active {
+  transform: translateY(0);
+}
+
+.history-list {
+  flex: 1;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
+}
+
+.history-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.history-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.history-list::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.3);
+  border-radius: 3px;
+}
+
+.history-list::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.history-item {
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  margin-bottom: 8px;
+  padding: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.history-item:hover {
+  background: rgba(255, 255, 255, 0.1);
+  transform: translateX(4px);
+}
+
+.history-item.active {
+  background: rgba(255, 255, 255, 0.15);
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.record-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.record-type {
+  margin-bottom: 6px;
+}
+
+.type-badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 12px;
+  font-size: 10px;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.type-badge.AIchat {
+  background: rgba(52, 152, 219, 0.2);
+  color: #3498db;
+  border: 1px solid rgba(52, 152, 219, 0.3);
+}
+
+.type-badge.AiEmotion {
+  background: rgba(155, 89, 182, 0.2);
+  color: #9b59b6;
+  border: 1px solid rgba(155, 89, 182, 0.3);
+}
+
+.record-text {
+  color: white;
+  font-size: 13px;
+  line-height: 1.4;
+  margin-bottom: 6px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.record-time {
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 11px;
+}
+
+.record-actions {
+  margin-left: 8px;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.history-item:hover .record-actions {
+  opacity: 1;
+}
+
+.delete-btn {
+  background: rgba(231, 76, 60, 0.2);
+  border: none;
+  border-radius: 4px;
+  color: #e74c3c;
+  padding: 4px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.delete-btn:hover {
+  background: rgba(231, 76, 60, 0.3);
+  transform: scale(1.1);
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 40px 20px;
+  text-align: center;
+}
+
+.empty-icon {
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
+.empty-icon svg {
+  color: white;
+}
+
+.empty-text {
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 14px;
+  margin: 0;
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+  .history-record-container {
+    width: 280px;
+  }
+  
+  .history-record-container.collapsed {
+    transform: translateX(-240px);
+  }
+  
+  .history-content {
+    padding: 15px;
+  }
+}
+</style>

src/views/components/emotionalBottomRadar.vue

@@ -129,6 +129,11 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
   // 配置图表选项，很多操作和展示已限制，如果需要需放开
   let option = {
     // backgroundColor: '#000046',  // 设置整个图表的背景色
+    axisPointer: {
+      link: {
+        xAxisIndex: 'all' // 全局设置所有x轴联动
+      }
+    },
     tooltip: {
       show: true, // 启用tooltip显示
       trigger: 'axis',
@@ -155,14 +160,13 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
       },
       // backgroundColor: 'rgba(0, 0, 0, 0.8)',
       backgroundColor: 'rgba(232, 232, 242, 0.87)',
-			borderColor: '#fff',
-			borderWidth: 1,
-			borderRadius: 8,
-			padding: 10,
-			textStyle: {
-				color: '#fff',
-				fontSize: 12
-			},
+      borderColor: '#fff',
+      borderWidth: 1,
+      padding: 10,
+      textStyle: {
+        color: '#fff',
+        fontSize: 12
+      },
       formatter: function (params) {
         if (!params || params.length === 0) return ''
 
@@ -178,9 +182,18 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
           return ''
         }
 
-        let result = `<div style="font-weight: bold; color: #fff; margin-bottom: 8px;">${params[0].name}</div>`
+        let result = `<div style="font-weight: bold; color: black; margin-bottom: 8px;">${params[0].name}</div>`
+
+        // 对params进行排序，确保K线数据优先显示
+        const sortedParams = params.sort((a, b) => {
+          if (a.seriesType === 'candlestick') return -1;
+          if (b.seriesType === 'candlestick') return 1;
+          if (a.seriesName === '红线') return -1;
+          if (b.seriesName === '红线') return 1;
+          return 0;
+        });
 
-        params.forEach(param => {
+        sortedParams.forEach(param => {
           let value = param.value
           let color = param.color
 
@@ -216,11 +229,11 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
             }
 
             result += `<div style="margin-bottom: 6px;">`
-            result += `<div style="color: #fff; font-weight: bold;">${param.seriesName}</div>`
-            result += `<div style="color: #fff;">开盘价: ${openPrice.toFixed(1)}</div>`
-            result += `<div style="color: #fff;">收盘价: ${closePrice.toFixed(1)}</div>`
-            result += `<div style="color: #fff;">最低价: ${lowPrice.toFixed(1)}</div>`
-            result += `<div style="color: #fff;">最高价: ${highPrice.toFixed(1)}</div>`
+            result += `<div style="color: black; font-weight: bold;">${param.seriesName}</div>`
+            result += `<div style="color: black;">开盘价: ${openPrice}</div>`
+            result += `<div style="color: black;">收盘价: ${closePrice}</div>`
+            result += `<div style="color: black;">最低价: ${lowPrice}</div>`
+            result += `<div style="color: black;">最高价: ${highPrice}</div>`
 
             // 只有当存在前一日收盘价时才显示涨跌幅
             if (previousClosePrice !== null && typeof previousClosePrice === 'number') {
@@ -293,7 +306,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
           }
         },
         axisTick: {
-          show: true,
+          show: false,
           alignWithLabel: true, // 刻度线与标签对齐
           lineStyle: {
             color: "#999", // 与十字线颜色保持一致
@@ -311,6 +324,9 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
           link: {
             xAxisIndex: 'all'
           },
+          label: {
+            show: false // 不显示标签
+          }
         }
       },
       {
@@ -337,6 +353,9 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
         axisPointer: {
           link: {
             xAxisIndex: 'all'
+          },
+          label: {
+            show: false // 不显示标签
           }
         }
       },
@@ -392,7 +411,7 @@ function initEmotionalBottomRadar(KlineData, barAndLineData) {
           width: 50, // 宽度限制
           color: 'white',
           formatter: function (value, index) {
-            return value.toFixed(2)
+            return Math.round(value)
           }
         },
         splitLine: {

src/views/homePage.vue

@@ -31,6 +31,7 @@ import sendBtn from "../assets/img/homePage/tail/send.png";
 import msgBtn from "../assets/img/homePage/tail/msg.png";
 import feedbackBtn from "../assets/img/Feedback/feedbackBtn.png";
 import AiEmotion from "./AiEmotion.vue";
+import HistoryRecord from "./components/HistoryRecord.vue";
 
 // import VConsole from "vconsole";
 
@@ -38,6 +39,8 @@ import AiEmotion from "./AiEmotion.vue";
 
 // 获取 AiEmotion 组件的 ref
 const aiEmotionRef = ref(null);
+// 获取历史记录组件的 ref
+const historyRecordRef = ref(null);
 // import { useUserStore } from "../store/userPessionCode.js";
 const { getQueryVariable, setActiveTabIndex } = useDataStore();
 const dataStore = useDataStore();
@@ -182,6 +185,11 @@ const sendMessage = async () => {
   }
   isScrolling.value = false;
 
+  // 添加到历史记录
+  if (historyRecordRef.value && message.value.trim()) {
+    historyRecordRef.value.addRecord(message.value.trim(), activeTab.value);
+  }
+
   // 判断当前是否为 AiEmotion 组件
   if (activeTab.value === "AiEmotion") {
     // 禁用输入框
@@ -227,6 +235,23 @@ const enableInput = () => {
   isInputDisabled.value = false;
 };
 
+// 处理历史记录选择
+const handleHistorySelect = (record) => {
+  // 设置输入框内容
+  message.value = record.question;
+  
+  // 如果记录类型与当前激活的tab不同，切换到对应的tab
+  if (record.type !== activeTab.value) {
+    const tabIndex = record.type === 'AIchat' ? 0 : 1;
+    setActiveTab(record.type, tabIndex);
+  }
+};
+
+// 处理历史记录添加
+const handleHistoryAdded = (record) => {
+  console.log('新增历史记录:', record);
+};
+
 // 公告
 // 引入公告组件
 import Announcement from "./Announcement.vue";
@@ -558,7 +583,15 @@ onUnmounted(() => {
 
 <template>
   <div class="homepage" id="testId">
-    <el-container v-if="!dataStore.isFeedback">
+    <!-- 历史记录组件 -->
+    <HistoryRecord 
+      ref="historyRecordRef"
+      :current-type="activeTab"
+      @selectRecord="handleHistorySelect"
+      @recordAdded="handleHistoryAdded"
+    />
+    
+    <el-container v-if="!dataStore.isFeedback" class="main-container" :class="{ 'collapsed': historyRecordRef?.isCollapsed }">
       <!-- AI小财神头部： logo  次数  公告 -->
       <el-header class="homepage-head">
         <!-- logo -->
@@ -693,7 +726,7 @@ onUnmounted(() => {
         </div>
       </el-footer>
     </el-container>
-    <el-container v-else>
+    <el-container v-else class="main-container" :class="{ 'collapsed': historyRecordRef?.isCollapsed }">
       <el-header class="homepage-head">
         <!-- logo -->
         <div class="homepage-logo">
@@ -849,6 +882,7 @@ body {
   background-repeat: no-repeat;
   background-position: center;
   display: flex;
+  flex-direction: row; /* 改为水平布局 */
   overflow: hidden;
   position: fixed;
   top: 0;
@@ -859,6 +893,31 @@ body {
   /* -webkit-overflow-scrolling: touch; */
 }
 
+.main-container {
+  flex: 1;
+  margin-left: 300px; /* 为历史记录组件留出空间 */
+  transition: margin-left 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* 当历史记录组件折叠时调整主容器边距 */
+.main-container.collapsed {
+  margin-left: 40px;
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+  .main-container {
+    margin-left: 280px;
+  }
+  
+  .main-container.collapsed {
+    margin-left: 40px;
+  }
+}
+
 .homepage .el-container {
   height: 100%;
   flex-direction: column;