解决历史记录卡顿问题。

src/views/components/HistoryRecord.vue

@@ -458,10 +458,22 @@ const historyRecords = ref([]);
 const categoryHistory = ref([]);
 let chatFirstFlag = true;
 let emotionTirstFlag = true;
+// 添加缓存机制
+let cachedCategoryHistory = null;
+let lastDataHash = null;
 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 })));
+    if (cachedCategoryHistory && lastDataHash === currentDataHash) {
+      // 使用缓存的分类结果
+      categoryHistory.value = cachedCategoryHistory;
+      return;
+    }
+    
     let remainingRecords = result.data; // 复制原数组
     // console.log(
     //   "params",
@@ -505,60 +517,37 @@ const getHistoryList = async (params) => {
     }
     // 非首次调用时保持当前折叠状态不变
 
-    // 1. 筛选置顶记录
-    let topList = remainingRecords.filter((record) => record.isTop === 1);
-    remainingRecords = remainingRecords.filter((record) => record.isTop !== 1);
-
-    // 2. 筛选今日记录
-    let todayList = remainingRecords.filter((record) => {
+    // 优化：一次遍历完成所有分类，避免重复计算日期
     const today = moment().format("YYYY-MM-DD");
-      const recordDate = moment(record.createdTime).format("YYYY-MM-DD");
-      return recordDate === today;
-    });
-    remainingRecords = remainingRecords.filter((record) => {
-      const today = moment().format("YYYY-MM-DD");
-      const recordDate = moment(record.createdTime).format("YYYY-MM-DD");
-      return recordDate !== today;
-    });
-
-    // 3. 筛选近3日记录（不包括今日）
-    let recent3DaysList = remainingRecords.filter((record) => {
     const threeDaysAgo = moment().subtract(3, "days").startOf("day");
     const yesterday = moment().subtract(1, "days").endOf("day");
-      const recordDate = moment(record.createdTime);
-      return recordDate.isAfter(threeDaysAgo) && recordDate.isBefore(yesterday);
-    });
-    remainingRecords = remainingRecords.filter((record) => {
-      const threeDaysAgo = moment().subtract(3, "days").startOf("day");
-      const yesterday = moment().subtract(1, "days").endOf("day");
-      const recordDate = moment(record.createdTime);
-      return !(
-        recordDate.isAfter(threeDaysAgo) && recordDate.isBefore(yesterday)
-      );
-    });
-
-    // 4. 筛选近7日记录（不包括今日和近3日）
-    let recent7DaysList = remainingRecords.filter((record) => {
     const sevenDaysAgo = moment().subtract(7, "days").startOf("day");
-      const recordDate = moment(record.createdTime);
-      return recordDate.isAfter(sevenDaysAgo);
-    });
-    remainingRecords = remainingRecords.filter((record) => {
-      const sevenDaysAgo = moment().subtract(7, "days").startOf("day");
-      const recordDate = moment(record.createdTime);
-      return !recordDate.isAfter(sevenDaysAgo);
-    });
-
-    // 5. 筛选近30日记录（不包括前面已筛选的）
-    let recent30DaysList = remainingRecords.filter((record) => {
-      const thirtyDaysAgo = moment().subtract(30, "days").startOf("day");
-      const recordDate = moment(record.createdTime);
-      return recordDate.isAfter(thirtyDaysAgo);
-    });
-    remainingRecords = remainingRecords.filter((record) => {
     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);
-      return !recordDate.isAfter(thirtyDaysAgo);
+      const recordDateStr = recordDate.format("YYYY-MM-DD");
+      
+      if (recordDateStr === today) {
+        todayList.push(record);
+      } else if (recordDate.isAfter(threeDaysAgo) && recordDate.isBefore(yesterday)) {
+        recent3DaysList.push(record);
+      } else if (recordDate.isAfter(sevenDaysAgo)) {
+        recent7DaysList.push(record);
+      } else if (recordDate.isAfter(thirtyDaysAgo)) {
+        recent30DaysList.push(record);
+      }
     });
 
     historyRecords.value = result.data;
@@ -585,6 +574,11 @@ const getHistoryList = async (params) => {
         list: recent30DaysList,
       },
     ];
+    
+    // 更新缓存
+    cachedCategoryHistory = categoryHistory.value;
+    lastDataHash = currentDataHash;
+    
     // console.log("historyRecords", historyRecords.value);
     // console.log("categoryHistory", categoryHistory.value);
   } catch (e) {
@@ -807,7 +801,7 @@ onMounted(() => {
   border-right: 1px solid rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   z-index: 1000;
-  transition: width 0.3s ease;
+  transition: width 0.2s ease-out;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -824,7 +818,7 @@ onMounted(() => {
   border-right: 1px solid rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   z-index: 1000;
-  transition: width 0.3s ease;
+  transition: width 0.2s ease-out;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -849,7 +843,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.3s ease;
+  transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
   z-index: 10;
 }
 
@@ -862,7 +856,7 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.3s ease;
+  transition: background-color 0.2s ease-out, border-color 0.2s ease-out;
   z-index: 10;
 }