拉取里程碑的代码。

src/views/components/HistoryRecord.vue

@@ -1,52 +1,81 @@
 <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" 
+          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>
@@ -55,9 +84,22 @@
         <!-- 空状态 -->
         <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,171 @@
 </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 addRecord = (question, type = props.currentType) => {
-  const newRecord = {
-    id: Date.now() + Math.random(),
-    question: question.trim(),
-    type: type,
-    timestamp: new Date().toISOString(),
-    answer: '' // 可以后续添加回答内容
+const openHistory = () => {
+  isCollapsed.value = false;
 }
 
-  // 添加到列表开头
-  historyRecords.value.unshift(newRecord)
-  
-  // 限制历史记录数量（最多保存100条）
-  if (historyRecords.value.length > 100) {
-    historyRecords.value = historyRecords.value.slice(0, 100)
+const closeHistory = () => {
+  isCollapsed.value = true;
 }
 
-  // 保存到本地存储
-  saveToLocalStorage()
 
-  emit('recordAdded', newRecord)
-}
 
 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 addRecord = (question, type) => {
+  const newRecord = {
+    id: Date.now() + Math.random(), // 生成唯一ID
+    question: question,
+    type: type,
+    timestamp: Date.now()
+  };
+  
+  historyRecords.value.unshift(newRecord); // 添加到数组开头
+  saveToLocalStorage();
+  emit("recordAdded", newRecord);
+};
 
 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 +282,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 +392,6 @@ watch(historyRecords, () => {
   object-fit: contain;
 }
 
-
 .new-chat-btn {
   width: 100%;
   padding: 12px 16px;
@@ -490,8 +553,9 @@ watch(historyRecords, () => {
   opacity: 0.5;
 }
 
-.empty-icon svg {
+.documentDelete {
   color: white;
+  font-size: 5rem;
 }
 
 .empty-text {
@@ -502,13 +566,6 @@ watch(historyRecords, () => {
 
 /* 移动端适配 */
 @media (max-width: 768px) {
-  .history-record-container {
-    width: 280px;
-  }
-  
-  .history-record-container.collapsed {
-    transform: translateX(-240px);
-  }
 
   .history-content {
     padding: 15px;

src/views/components/StockTabs.vue

@@ -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 {

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,7 +103,6 @@ const tabs = computed(() => [
 const setActiveTab = (tab, index, forceAIchat = false) => {
   isScrolling.value = false; //回复滚动到底部方法
   isAnnouncementVisible.value = false;
-
   // 重置输入框禁用状态，防止页面切换时状态残留
   isInputDisabled.value = false;
 
@@ -242,16 +243,11 @@ const handleHistorySelect = (record) => {
 
   // 如果记录类型与当前激活的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 +423,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)
-  );
+// 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)
-};
+//   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 +537,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 +581,13 @@ onMounted(async () => {
 
   // 初始化视口高度变量
   // updateAppHeight();
+
+  // 添加原生事件监听器
+  window.addEventListener("resize", throttledJudgeDevice);
 });
 
 onUnmounted(() => {
+  window.removeEventListener("resize", throttledJudgeDevice);
   if (touchmoveHandlerRef) {
     console.log("卸载touchmoveHandlerRef组件");
     document.removeEventListener("touchmove", touchmoveHandlerRef);
@@ -584,16 +598,36 @@ onUnmounted(() => {
 <template>
   <div class="homepage" id="testId">
     <!-- 历史记录组件 -->
-    <HistoryRecord ref="historyRecordRef" :current-type="activeTab" @selectRecord="handleHistorySelect"
-      @recordAdded="handleHistoryAdded" />
-
-    <el-container v-if="!dataStore.isFeedback" class="main-container"
-      :class="{ 'collapsed': historyRecordRef?.isCollapsed }">
+    <HistoryRecord
+      ref="historyRecordRef"
+      :current-type="activeTab"
+      @selectRecord="handleHistorySelect"
+      :is-mobile="isMobile"
+    />
+
+    <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>
 
@@ -655,17 +689,41 @@ onUnmounted(() => {
         <!-- 第二行输入框 -->
         <div class="footer-second-line">
           <img :src="msgBtn" class="msg-icon" />
-          <el-input type="textarea" v-model="message" @focus="onFocus" @blur="onBlur"
-            :autosize="{ minRows: 1, maxRows: 4 }" placeholder="请输入股票名称或股票代码..." class="msg-input"
-            @keydown.enter.exact.prevent="(isLoading || isInputDisabled) ? null : sendMessage()"
-            :disabled="isInputDisabled" resize="none">
+          <el-input
+            type="textarea"
+            v-model="message"
+            @focus="onFocus"
+            @blur="onBlur"
+            :autosize="{ minRows: 1, maxRows: 4 }"
+            placeholder="请输入股票名称或股票代码..."
+            class="msg-input"
+            @keydown.enter.exact.prevent="
+              isLoading || isInputDisabled ? null : sendMessage()
+            "
+            :disabled="isInputDisabled"
+            resize="none"
+          >
           </el-input>
-          <img :src="sendBtn" @click="sendMessage" class="action-btn send-btn"
-            :style="{ opacity: isInputDisabled ? 0.5 : 1, cursor: isInputDisabled ? 'not-allowed' : 'pointer' }" />
+          <img
+            :src="sendBtn"
+            @click="sendMessage"
+            class="action-btn send-btn"
+            :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">
@@ -719,14 +777,15 @@ onUnmounted(() => {
 /* 标签栏 */
 .tab-container {
   display: flex;
-  gap: 30px;
+  gap: 13rem;
   margin-right: 40px;
   margin-left: 40px;
   margin-bottom: 10px;
   padding: 0 20px;
-  justify-content: space-between;
+  justify-content: center;
   height: 100%;
-  /* 新增右对齐 */
+  align-items: center;
+  justify-content: center;
 }
 
 .tab-item {
@@ -827,22 +886,33 @@ 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;
   }
 
@@ -986,6 +1056,12 @@ body {
   position: relative;
 }
 
+.expand {
+  font-size: 2.5rem;
+  cursor: pointer;
+  color: white;
+}
+
 @media (max-width: 768px) {
   .homepage-logo {
     margin-left: 10px;
@@ -1131,6 +1207,8 @@ body {
   }
 
   .msg-input {
+    /* min-height: 44px; */
+    /* height: 44px; */
     font-size: 16px;
   }
 }