From 60bed0c9cc14217748d23be2ead23c47ca13ed5d Mon Sep 17 00:00:00 2001
From: no99 <17663930442@163.com>
Date: Thu, 7 Aug 2025 14:53:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8E=86=E5=8F=B2=E8=AE=B0=E5=BD=95=E6=89=8B?=
 =?UTF-8?q?=E6=9C=BA=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/components/HistoryRecord.vue | 281 +++++++++++++++++++--------------
 src/views/components/StockTabs.vue     |  76 ++++-----
 src/views/homePage.vue                 | 186 +++++++++++++++-------
 3 files changed, 321 insertions(+), 222 deletions(-)

diff --git a/src/views/components/HistoryRecord.vue b/src/views/components/HistoryRecord.vue
index 21520a5..b8654ac 100644
--- a/src/views/components/HistoryRecord.vue
+++ b/src/views/components/HistoryRecord.vue
@@ -1,63 +1,105 @@
 <template>
-  <div class="history-record-container" :class="{ 'collapsed': isCollapsed }">
+  <div
+    class="history-record-container"
+    :class="{
+      containerNoMobile: !isMobile && isCollapsed,
+
+      containerIsMobile: isMobile && isCollapsed,
+
+      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>
+      <img
+        class="collapsed-icon"
+        src="src/assets/img/Selectmodel/机器人手机.png"
+        alt="icon"
+      />
+      <div class="collapsed-toggle-btn" @click="openHistory">
+        <el-icon><ArrowRight /></el-icon>
       </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 class="toggle-btn" @click="closeHistory">
+        <el-icon><ArrowLeft /></el-icon>
       </div>
       <!-- 标题 -->
       <div class="history-header">
         <div class="history-actions">
-          <img src="/src/assets/img/homePage/logo.png" alt="Logo" class="logo-img" />
+          <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" 
+        <div
+          v-for="record in filteredHistory"
           :key="record.id"
           class="history-item"
           @click="selectRecord(record)"
-          :class="{ 'active': selectedRecordId === record.id }"
+          :class="{ active: selectedRecordId === record.id }"
         >
           <div class="record-content">
             <div class="record-type">
               <span class="type-badge" :class="record.type">
-                {{ record.type === 'AIchat' ? '夺宝奇兵' : 'AI情绪' }}
+                {{ 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"/>
+            <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>
+            <el-icon class="documentDelete"><DocumentDelete /></el-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>
@@ -67,157 +109,157 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, computed, onMounted, watch } from "vue";
 
 // Props
 const props = defineProps({
   currentType: {
     type: String,
-    default: 'AIchat' // 'AIchat' 或 'AiEmotion'
-  }
-})
+    default: "AIchat", // 'AIchat' 或 'AiEmotion'
+  },
+  isMobile: {
+    type: Boolean,
+    default: false,
+  },
+});
 
 // Emits
-const emit = defineEmits(['selectRecord', 'recordAdded', 'startNewChat'])
+const emit = defineEmits(["selectRecord", "recordAdded", "startNewChat"]);
 
 // 响应式数据
-const isCollapsed = ref(false)
-const selectedRecordId = ref(null)
-const historyRecords = ref([])
+const isCollapsed = ref(false);
+const selectedRecordId = ref(null);
+const historyRecords = ref([]);
 
 // 计算属性
 const filteredHistory = computed(() => {
-  return historyRecords.value
-})
+  return historyRecords.value;
+});
 
 // 方法
 const toggleCollapse = () => {
-  isCollapsed.value = !isCollapsed.value
+  isCollapsed.value = !isCollapsed.value;
   // 保存折叠状态到本地存储
-  localStorage.setItem('historyRecordCollapsed', isCollapsed.value)  
+  localStorage.setItem("historyRecordCollapsed", isCollapsed.value);
+};
+
+const openHistory = () => {
+  isCollapsed.value = false;
 }
 
-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 closeHistory = () => {
+  isCollapsed.value = true;
 }
 
+
+
 const selectRecord = (record) => {
-  selectedRecordId.value = record.id
-  emit('selectRecord', record)
-}
+  selectedRecordId.value = record.id;
+  emit("selectRecord", record);
+};
 
 const deleteRecord = (recordId) => {
-  const index = historyRecords.value.findIndex(record => record.id === recordId)
+  const index = historyRecords.value.findIndex(
+    (record) => record.id === recordId
+  );
   if (index > -1) {
-    historyRecords.value.splice(index, 1)
-    saveToLocalStorage()
-    
+    historyRecords.value.splice(index, 1);
+    saveToLocalStorage();
+
     // 如果删除的是当前选中的记录，清除选中状态
     if (selectedRecordId.value === recordId) {
-      selectedRecordId.value = null
+      selectedRecordId.value = null;
     }
   }
-}
+};
 
 const clearHistory = () => {
-  if (confirm('确定要清空所有历史记录吗？')) {
-    historyRecords.value = []
-    selectedRecordId.value = null
-    saveToLocalStorage()
+  if (confirm("确定要清空所有历史记录吗？")) {
+    historyRecords.value = [];
+    selectedRecordId.value = null;
+    saveToLocalStorage();
   }
-}
+};
 
 const formatTime = (timestamp) => {
-  const date = new Date(timestamp)
-  const now = new Date()
-  const diff = now - date
-  
+  const date = new Date(timestamp);
+  const now = new Date();
+  const diff = now - date;
+
   // 小于1分钟
   if (diff < 60000) {
-    return '刚刚'
+    return "刚刚";
   }
-  
+
   // 小于1小时
   if (diff < 3600000) {
-    return `${Math.floor(diff / 60000)}分钟前`
+    return `${Math.floor(diff / 60000)}分钟前`;
   }
-  
+
   // 小于1天
   if (diff < 86400000) {
-    return `${Math.floor(diff / 3600000)}小时前`
+    return `${Math.floor(diff / 3600000)}小时前`;
   }
-  
+
   // 大于1天
   if (diff < 604800000) {
-    return `${Math.floor(diff / 86400000)}天前`
+    return `${Math.floor(diff / 86400000)}天前`;
   }
-  
+
   // 超过一周，显示具体日期
-  return date.toLocaleDateString('zh-CN', {
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit'
-  })
-}
+  return date.toLocaleDateString("zh-CN", {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+};
 
 const saveToLocalStorage = () => {
-  localStorage.setItem('aiChatHistoryRecords', JSON.stringify(historyRecords.value))
-}
+  localStorage.setItem(
+    "aiChatHistoryRecords",
+    JSON.stringify(historyRecords.value)
+  );
+};
 
 const loadFromLocalStorage = () => {
   try {
-    const saved = localStorage.getItem('aiChatHistoryRecords')
+    const saved = localStorage.getItem("aiChatHistoryRecords");
     if (saved) {
-      historyRecords.value = JSON.parse(saved)
+      historyRecords.value = JSON.parse(saved);
     }
-    
+
     // 加载折叠状态
-    const collapsedState = localStorage.getItem('historyRecordCollapsed')
+    const collapsedState = localStorage.getItem("historyRecordCollapsed");
     if (collapsedState !== null) {
-      isCollapsed.value = collapsedState === 'true'
+      isCollapsed.value = collapsedState === "true";
     }
   } catch (error) {
-    console.error('加载历史记录失败:', error)
-    historyRecords.value = []
+    console.error("加载历史记录失败:", error);
+    historyRecords.value = [];
   }
-}
+};
 
 // 暴露方法和状态给父组件
 defineExpose({
-  addRecord,
   clearHistory,
-  isCollapsed
-})
+  isCollapsed,
+  toggleCollapse,
+});
 
 // 生命周期
 onMounted(() => {
-  loadFromLocalStorage()
-})
+  loadFromLocalStorage();
+});
 
 // 监听历史记录变化，自动保存
-watch(historyRecords, () => {
-  saveToLocalStorage()
-}, { deep: true })
+watch(
+  historyRecords,
+  () => {
+    saveToLocalStorage();
+  },
+  { deep: true }
+);
 </script>
 
 <style scoped>
@@ -226,18 +268,26 @@ watch(historyRecords, () => {
   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;
+  transition: width 0.3s ease;
   display: flex;
   flex-direction: column;
 }
 
+.containerNoMobile {
+  width: 40px;
+}
+
+.containerIsMobile {
+  width: 0px;
+}
+
 .history-record-container.collapsed {
-  transform: translateX(-260px);
+  width: 300px;
 }
 
 .toggle-btn {
@@ -328,7 +378,6 @@ watch(historyRecords, () => {
   object-fit: contain;
 }
 
-
 .new-chat-btn {
   width: 100%;
   padding: 12px 16px;
@@ -490,8 +539,9 @@ watch(historyRecords, () => {
   opacity: 0.5;
 }
 
-.empty-icon svg {
+.documentDelete {
   color: white;
+  font-size: 5rem;
 }
 
 .empty-text {
@@ -502,14 +552,7 @@ watch(historyRecords, () => {
 
 /* 移动端适配 */
 @media (max-width: 768px) {
-  .history-record-container {
-    width: 280px;
-  }
-  
-  .history-record-container.collapsed {
-    transform: translateX(-240px);
-  }
-  
+
   .history-content {
     padding: 15px;
   }
diff --git a/src/views/components/StockTabs.vue b/src/views/components/StockTabs.vue
index 8134075..5cd5f83 100644
--- a/src/views/components/StockTabs.vue
+++ b/src/views/components/StockTabs.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="stock-tabs" v-if="stockList.length > 0">
     <div class="tabs-container">
-      <div 
-        v-for="(stock, index) in stockList" 
+      <div
+        v-for="(stock, index) in stockList"
         :key="`${stock.stockInfo.code}-${stock.stockInfo.market}`"
         :class="['tab-item', { active: index === activeStockIndex }]"
         @click="switchStock(index)"
@@ -11,8 +11,8 @@
           <span class="stock-name">{{ stock.stockInfo.name }}</span>
           <span class="stock-code">{{ stock.stockInfo.code }}</span>
         </div>
-        <button 
-          class="close-btn" 
+        <button
+          class="close-btn"
           @click.stop="removeStock(index)"
           v-if="stockList.length > 1"
         >
@@ -22,8 +22,8 @@
     </div>
     <div class="tabs-actions">
       <span class="stock-count">{{ stockCount }}/{{ maxStocks }}</span>
-      <button 
-        class="clear-all-btn" 
+      <button
+        class="clear-all-btn"
         @click="clearAllStocks"
         v-if="stockList.length > 1"
       >
@@ -34,58 +34,50 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
-import { useEmotionStore } from '@/store/emotion'
-import { ElMessageBox } from 'element-plus'
+import { computed } from "vue";
+import { useEmotionStore } from "@/store/emotion";
+import { ElMessageBox } from "element-plus";
 
-const emotionStore = useEmotionStore()
+const emotionStore = useEmotionStore();
 
 // 计算属性
-const stockList = computed(() => emotionStore.stockList)
-const activeStockIndex = computed(() => emotionStore.activeStockIndex)
-const stockCount = computed(() => emotionStore.stockCount)
-const maxStocks = computed(() => emotionStore.maxStocks)
+const stockList = computed(() => emotionStore.stockList);
+const activeStockIndex = computed(() => emotionStore.activeStockIndex);
+const stockCount = computed(() => emotionStore.stockCount);
+const maxStocks = computed(() => emotionStore.maxStocks);
 
 // 切换股票
 const switchStock = (index) => {
-  emotionStore.switchStock(index)
-}
+  emotionStore.switchStock(index);
+};
 
 // 移除股票
 const removeStock = async (index) => {
   try {
-    await ElMessageBox.confirm(
-      '确定要移除这只股票吗？',
-      '提示',
-      {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      }
-    )
-    emotionStore.removeStock(index)
+    await ElMessageBox.confirm("确定要移除这只股票吗？", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    });
+    emotionStore.removeStock(index);
   } catch {
     // 用户取消操作
   }
-}
+};
 
 // 清空所有股票
 const clearAllStocks = async () => {
   try {
-    await ElMessageBox.confirm(
-      '确定要清空所有股票吗？',
-      '提示',
-      {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-      }
-    )
-    emotionStore.clearAllStocks()
+    await ElMessageBox.confirm("确定要清空所有股票吗？", "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    });
+    emotionStore.clearAllStocks();
   } catch {
     // 用户取消操作
   }
-}
+};
 </script>
 
 <style scoped>
@@ -183,7 +175,7 @@ const clearAllStocks = async () => {
 
 .stock-count {
   font-size: 12px;
-  color: #FFFFFF;
+  color: #ffffff;
 }
 
 .clear-all-btn {
@@ -206,16 +198,16 @@ const clearAllStocks = async () => {
   .tabs-container {
     gap: 6px;
   }
-  
+
   .tab-item {
     min-width: 100px;
     padding: 6px 8px;
   }
-  
+
   .stock-name {
     font-size: 13px;
   }
-  
+
   .stock-code {
     font-size: 11px;
   }
diff --git a/src/views/homePage.vue b/src/views/homePage.vue
index 75763e1..e0687f5 100644
--- a/src/views/homePage.vue
+++ b/src/views/homePage.vue
@@ -37,6 +37,8 @@ import HistoryRecord from "./components/HistoryRecord.vue";
 
 // const vConsole = new VConsole();
 
+const isMobile = ref(null);
+
 // 获取 AiEmotion 组件的 ref
 const aiEmotionRef = ref(null);
 // 获取历史记录组件的 ref
@@ -101,10 +103,10 @@ const tabs = computed(() => [
 const setActiveTab = (tab, index, forceAIchat = false) => {
   isScrolling.value = false; //回复滚动到底部方法
   isAnnouncementVisible.value = false;
-  
+
   // 重置输入框禁用状态，防止页面切换时状态残留
   isInputDisabled.value = false;
-  
+
   if (forceAIchat && activeTab.value !== "AIchat") {
     activeTab.value = "AIchat";
     activeIndex.value = 0;
@@ -239,19 +241,14 @@ const enableInput = () => {
 const handleHistorySelect = (record) => {
   // 设置输入框内容
   message.value = record.question;
-  
+
   // 如果记录类型与当前激活的tab不同，切换到对应的tab
   if (record.type !== activeTab.value) {
-    const tabIndex = record.type === 'AIchat' ? 0 : 1;
+    const tabIndex = record.type === "AIchat" ? 0 : 1;
     setActiveTab(record.type, tabIndex);
   }
 };
 
-// 处理历史记录添加
-const handleHistoryAdded = (record) => {
-  console.log('新增历史记录:', record);
-};
-
 // 公告
 // 引入公告组件
 import Announcement from "./Announcement.vue";
@@ -427,38 +424,38 @@ const throttledHeightListener = _.throttle(heightListener, 500, {
   trailing: false,
 });
 
-const goToRecharge = () => {
-  console.log("点击充值");
-  // http://39.101.133.168:8919/payment/recharge/index?
-  // url=http%3A%2F%2Flocalhost%3A8080%2FLiveActivity%2Fpck
-  // &platform=1
-  // &token=+S4h5QEE1hTIb4CxphrnbZi0+fEeMx8pywnIlrmTmo4QO6IolWnVWu5r+J4rKXMwK41UPfKqyIp+RvWmtM8
-
-  const userAgent = navigator.userAgent.toLowerCase();
-  const mobileKeywords = ["mobile", "android", "iphone", "ipad", "ipod"];
-  const isMobile = mobileKeywords.some((keyword) =>
-    userAgent.includes(keyword)
-  );
-
-  console.log(isMobile ? "手机" : "电脑");
-
-  const url = encodeURI("http://39.101.133.168:8857/aixiaocaishen/homePage");
-  console.log(url, "url");
-  const platform = isMobile ? 2 : 1;
-  const token = encodeURIComponent(localStorage.getItem("localToken"));
-  console.log(token, "token");
-  const rechargeUrl =
-    "http://39.101.133.168:8919/payment/recharge/index?" +
-    "url=" +
-    url +
-    "&platform=" +
-    platform +
-    "&token=" +
-    token;
-  console.log(rechargeUrl, "rechargeUrl");
-  window.location.href = rechargeUrl;
-  // window.open(rechargeUrl)
-};
+// const goToRecharge = () => {
+//   console.log("点击充值");
+//   // http://39.101.133.168:8919/payment/recharge/index?
+//   // url=http%3A%2F%2Flocalhost%3A8080%2FLiveActivity%2Fpck
+//   // &platform=1
+//   // &token=+S4h5QEE1hTIb4CxphrnbZi0+fEeMx8pywnIlrmTmo4QO6IolWnVWu5r+J4rKXMwK41UPfKqyIp+RvWmtM8
+
+//   const userAgent = navigator.userAgent.toLowerCase();
+//   const mobileKeywords = ["mobile", "android", "iphone", "ipad", "ipod"];
+//   const isMobile = mobileKeywords.some((keyword) =>
+//     userAgent.includes(keyword)
+//   );
+
+//   console.log(isMobile ? "手机" : "电脑");
+
+//   const url = encodeURI("http://39.101.133.168:8857/aixiaocaishen/homePage");
+//   console.log(url, "url");
+//   const platform = isMobile ? 2 : 1;
+//   const token = encodeURIComponent(localStorage.getItem("localToken"));
+//   console.log(token, "token");
+//   const rechargeUrl =
+//     "http://39.101.133.168:8919/payment/recharge/index?" +
+//     "url=" +
+//     url +
+//     "&platform=" +
+//     platform +
+//     "&token=" +
+//     token;
+//   console.log(rechargeUrl, "rechargeUrl");
+//   window.location.href = rechargeUrl;
+//   // window.open(rechargeUrl)
+// };
 
 const adjustFooterPosition = (height) => {
   const html = document.querySelector("html");
@@ -541,16 +538,30 @@ const touchmoveHandler = (e) => {
   }
 };
 
+const judgeDevice = async () => {
+  // 延时300ms
+  await new Promise((resolve) => setTimeout(resolve, 200));
+  const userAgent = navigator.userAgent;
+  isMobile.value =
+    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      userAgent
+    );
+  console.log("当前设备为：", isMobile.value ? "移动端" : "PC端");
+};
+
+const throttledJudgeDevice = _.throttle(judgeDevice, 300, {
+  trailing: false,
+});
+
+const expandHistory = () => {
+  if (historyRecordRef) {
+    console.log("存在");
+    historyRecordRef.value.isCollapsed = !historyRecordRef.value.isCollapsed;
+  }
+};
+
 onMounted(async () => {
-  // const isPhone =
-  //   /phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone/i.test(
-  //     navigator.userAgent
-  //   );
-  // !isPhone &&
-  //   localStorage.setItem(
-  //     "localToken",
-  //     decodeURIComponent(String(getQueryVariable("token")))
-  //   );
+  throttledJudgeDevice();
 
   // 禁用全局触摸滚动
   touchmoveHandlerRef = touchmoveHandler;
@@ -571,9 +582,13 @@ onMounted(async () => {
 
   // 初始化视口高度变量
   // updateAppHeight();
+
+  // 添加原生事件监听器
+  window.addEventListener("resize", throttledJudgeDevice);
 });
 
 onUnmounted(() => {
+  window.removeEventListener("resize", throttledJudgeDevice);
   if (touchmoveHandlerRef) {
     console.log("卸载touchmoveHandlerRef组件");
     document.removeEventListener("touchmove", touchmoveHandlerRef);
@@ -584,19 +599,36 @@ onUnmounted(() => {
 <template>
   <div class="homepage" id="testId">
     <!-- 历史记录组件 -->
-    <HistoryRecord 
+    <HistoryRecord
       ref="historyRecordRef"
       :current-type="activeTab"
       @selectRecord="handleHistorySelect"
-      @recordAdded="handleHistoryAdded"
+      :is-mobile="isMobile"
     />
-    
-    <el-container v-if="!dataStore.isFeedback" class="main-container" :class="{ 'collapsed': historyRecordRef?.isCollapsed }">
+
+    <div
+      v-if="isMobile && !historyRecordRef?.isCollapsed"
+      class="zhezhao"
+      @click="expandHistory"
+    ></div>
+
+    <el-container
+      v-if="!dataStore.isFeedback"
+      class="main-container"
+      :class="{
+        collapsed: historyRecordRef?.isCollapsed && !isMobile,
+        unCollapsed: !historyRecordRef?.isCollapsed && !isMobile,
+      }"
+    >
       <!-- AI小财神头部： logo  次数  公告 -->
       <el-header class="homepage-head">
         <!-- logo -->
         <div class="homepage-logo">
-          <img :src="logo" alt="图片加载失败" class="logo1" />
+          <el-icon v-if="isMobile" class="expand" @click="expandHistory"
+            ><Expand
+          /></el-icon>
+
+          <!-- <img :src="logo" alt="图片加载失败" class="logo1" /> -->
           <!-- <img :src="madeInHL" alt="图片加载失败" class="logo2" /> -->
         </div>
 
@@ -712,7 +744,9 @@ onUnmounted(() => {
             :autosize="{ minRows: 1, maxRows: 4 }"
             placeholder="请输入股票名称或股票代码..."
             class="msg-input"
-            @keydown.enter.exact.prevent="(isLoading || isInputDisabled) ? null : sendMessage()"
+            @keydown.enter.exact.prevent="
+              isLoading || isInputDisabled ? null : sendMessage()
+            "
             :disabled="isInputDisabled"
             resize="none"
           >
@@ -721,12 +755,22 @@ onUnmounted(() => {
             :src="sendBtn"
             @click="sendMessage"
             class="action-btn send-btn"
-            :style="{ opacity: isInputDisabled ? 0.5 : 1, cursor: isInputDisabled ? 'not-allowed' : 'pointer' }"
+            :style="{
+              opacity: isInputDisabled ? 0.5 : 1,
+              cursor: isInputDisabled ? 'not-allowed' : 'pointer',
+            }"
           />
         </div>
       </el-footer>
     </el-container>
-    <el-container v-else class="main-container" :class="{ 'collapsed': historyRecordRef?.isCollapsed }">
+    <el-container
+      v-else
+      class="main-container"
+      :class="{
+        collapsed: historyRecordRef?.isCollapsed && !isMobile,
+        unCollapsed: !historyRecordRef?.isCollapsed && !isMobile,
+      }"
+    >
       <el-header class="homepage-head">
         <!-- logo -->
         <div class="homepage-logo">
@@ -895,24 +939,36 @@ body {
 
 .main-container {
   flex: 1;
-  margin-left: 300px; /* 为历史记录组件留出空间 */
   transition: margin-left 0.3s ease;
   display: flex;
   flex-direction: column;
   overflow: hidden;
 }
-
+.main-container.unCollapsed {
+  margin-left: 300px; /* 为历史记录组件留出空间 */
+}
 /* 当历史记录组件折叠时调整主容器边距 */
 .main-container.collapsed {
   margin-left: 40px;
 }
 
+.zhezhao {
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 100;
+  position: fixed;
+}
+
 /* 移动端适配 */
 @media (max-width: 768px) {
   .main-container {
+    /* margin-left: 280px; */
+  }
+  .main-container.unCollapsed {
     margin-left: 280px;
   }
-  
+
   .main-container.collapsed {
     margin-left: 40px;
   }
@@ -1053,6 +1109,12 @@ body {
   position: relative;
 }
 
+.expand {
+  font-size: 2.5rem;
+  cursor: pointer;
+  color: white;
+}
+
 @media (max-width: 768px) {
   .homepage-logo {
     margin-left: 10px;
@@ -1196,6 +1258,8 @@ body {
   }
 
   .msg-input {
+    /* min-height: 44px; */
+    /* height: 44px; */
     font-size: 16px;
   }
 }