feat: 完善缓存逻辑

apps/mobile/src/views/ai-search/index.vue

@@ -79,10 +79,10 @@ function trickClick(name, opts = {}) {
   console.log(`ai-${name}`, opts)
 }
 
-function goHistory(item) {
+async function goHistory(item) {
   historyModel.value.show = false
   console.log('item', item)
-  ajaxGetHistoryDetail({
+  return ajaxGetHistoryDetail({
     sid: item.id
   }).then((res) => {
     clearAskState()
@@ -249,12 +249,14 @@ function formatTypeofItemKey(params, type, spare = '-') {
   return spare
 }
 
-function preSortItem(item) {
+function preSortItem(item, splitKeys) {
+  console.log('cee', item)
   if (!item)
     return {}
   const { area, city, collect, projectInfo } = item
   item.id = item.infoId
   item.star = !!collect
+  item.splitKeys = splitKeys
   // 参标参数
   item.isCB = {
     id: '',
@@ -352,8 +354,8 @@ function preSortItem(item) {
 
   return item
 }
-function formatCellItem(v) {
-  return preSortItem(v)
+function formatCellItem(v, splitKeys) {
+  return preSortItem(v, splitKeys)
 }
 
 function formatAskAnswer(res) {
@@ -370,7 +372,7 @@ function formatAskAnswer(res) {
     else {
       resultState = 3
       askItem.list = (res.list || []).map((v) => {
-        return formatCellItem(v)
+        return formatCellItem(v, res.highlight || [])
       })
       if (res.id) {
         askItem.id = res.id
@@ -578,25 +580,7 @@ function resetQuestion(item) {
   })
 }
 
-function init() {
-  ajaxGetPromptTypes().then((res) => {
-    console.log('x', res)
-    if (res?.data) {
-      promptModel.value.typeList = res.data.map((v) => {
-        return {
-          text: v.goodsName,
-          key: v.goodsType,
-          options: (v.problem || []).map(s => ({ text: s })),
-          icon: 'icon-wenjian',
-          disabled: !v.isUsed,
-          toast: '剑鱼正在冒着火星子搭建，敬请期待！'
-        }
-      })
-      doSelectQuestionType(promptModel.value.typeList[0])
-    }
-  })
-  doAjaxGetHistoryList()
-}
+
 
 function doAjaxGetHistoryList() {
   ajaxGetHistoryList().then((res) => {
@@ -606,9 +590,10 @@ function doAjaxGetHistoryList() {
   })
 }
 
-init()
+
 
 function goToDetail(item) {
+  savePageState()
   const query = {}
   if (item.keys) {
     query.keywords = item.keys.join(' ')
@@ -625,6 +610,7 @@ function goToDetail(item) {
 }
 
 function doCollection(item, index) {
+  savePageState()
   that.$keep.action({
     status: item.star,
     id: item.id,
@@ -652,7 +638,7 @@ function doLookMoreList(item) {
     .then((res) => {
       if (res.data) {
         moreListModel.value.list = (res.data || []).map((v) => {
-          return formatCellItem(v)
+          return formatCellItem(v, res.highlight || item._data?.highlight || [])
         })
       }
       moreListModel.value.loading = false
@@ -723,8 +709,6 @@ async function getUserInfo() {
     return {}
   }
 }
-
-getUserInfo()
 // 绑定手机号
 function checkBindPhone() {
   if (needLogin.value) {
@@ -761,13 +745,126 @@ function doDelTask(item) {
 
   })
 }
+
+const cacheToLocalStorage = (key, state) => {
+  localStorage.setItem(key, JSON.stringify(state.value));
+};
+
+// 函数：通用读取函数，支持自定义 key
+const loadFromLocalStorage = (key, state) => {
+  const cachedData = localStorage.getItem(key);
+  if (cachedData) {
+    Object.assign(state.value, JSON.parse(cachedData));
+  }
+};
+
+const contentEl = ref(null)
+const moreContentEl = ref(null)
+
+function getSetScrollTop (top) {
+  if (contentEl.value) {
+    if (top) {
+      contentEl.value.scrollTo(0, top)
+    } else {
+      return contentEl.value.scrollTop
+    }
+  }
+}
+
+function getSetMoreScrollTop (top) {
+  if (moreContentEl.value) {
+    if (top) {
+      moreContentEl.value.scrollTo(0, top)
+    } else {
+      return moreContentEl.value.scrollTop
+    }
+  }
+}
+
+function savePageState () {
+  localStorage.setItem('ai-search-cache', 'use')
+  localStorage.setItem('ai-search-height', getSetScrollTop())
+  localStorage.setItem('ai-search-more-height', getSetMoreScrollTop())
+  cacheToLocalStorage('ai-search-historyModel', historyModel)
+  cacheToLocalStorage('ai-search-moreListModel', moreListModel)
+  cacheToLocalStorage('ai-search-promptModel', promptModel)
+  cacheToLocalStorage('ai-search-questionModel', questionModel)
+  cacheToLocalStorage('ai-search-askModel', askModel)
+}
+function echoPageState () {
+  loadFromLocalStorage('ai-search-historyModel', historyModel)
+  loadFromLocalStorage('ai-search-moreListModel', moreListModel)
+  loadFromLocalStorage('ai-search-promptModel', promptModel)
+  loadFromLocalStorage('ai-search-questionModel', questionModel)
+  loadFromLocalStorage('ai-search-askModel', askModel)
+  // 重置
+  localStorage.removeItem('ai-search-historyModel')
+  localStorage.removeItem('ai-search-moreListModel')
+  localStorage.removeItem('ai-search-promptModel')
+  localStorage.removeItem('ai-search-questionModel')
+  localStorage.removeItem('ai-search-askModel')
+  localStorage.removeItem('ai-search-cache')
+
+  if (moreListModel.value.show) {
+    const top = localStorage.getItem('ai-search-more-height')
+    console.log('moretop', top)
+    if (top) {
+      that.$nextTick(() => {
+        getSetMoreScrollTop(top)
+      })
+    }
+    localStorage.removeItem('ai-search-more-height')
+  }
+
+  if (questionModel.value.nowId) {
+    goHistory({
+      id: questionModel.value.nowId
+    }).then(() => {
+      const top = localStorage.getItem('ai-search-height')
+      if (top) {
+        that.$nextTick(() => {
+          getSetScrollTop(top)
+        })
+      }
+      localStorage.removeItem('ai-search-height')
+    })
+  }
+}
+
+// 初始化事件
+function init() {
+  if (localStorage.getItem('ai-search-cache') === 'use') {
+    echoPageState()
+  } else {
+    ajaxGetPromptTypes().then((res) => {
+      console.log('x', res)
+      if (res?.data) {
+        promptModel.value.typeList = res.data.map((v) => {
+          return {
+            text: v.goodsName,
+            key: v.goodsType,
+            options: (v.problem || []).map(s => ({ text: s })),
+            icon: 'icon-wenjian',
+            disabled: !v.isUsed,
+            toast: '剑鱼正在冒着火星子搭建，敬请期待！'
+          }
+        })
+        doSelectQuestionType(promptModel.value.typeList[0])
+      }
+    })
+    doAjaxGetHistoryList()
+  }
+  getUserInfo()
+}
+
+init()
 </script>
 
 <template>
   <div class="ai-search--page j-container">
     <div
       class="j-header ai-search--header flex flex-(items-center justify-between)"
-      :class="{ &quot;app-header-fill&quot;: $envs.inApp }"
+      :class="{ 'app-header-fill': $envs.inApp }"
     >
       <div class="flex flex-(items-center justify-between)">
         <span class="back-icon" @click="doBack">
@@ -798,7 +895,7 @@ function doDelTask(item) {
       </Popover>
     </div>
 
-    <div class="ai-search--content j-main">
+    <div class="ai-search--content j-main" ref='contentEl'>
       <div v-if="needBindPhone || needLogin" class="bind-phone-popup" @click="checkBindPhone" />
       <div v-if="askModel.list.length === 0" class="ai-search--empty">
         <AppEmpty state="ai-logo">
@@ -1073,7 +1170,7 @@ function doDelTask(item) {
       v-model="moreListModel.show"
       overlay-class="ai-search--history-overlay"
       class="ai-search--more-popup"
-      :class="{ &quot;app-header-fill&quot;: $envs.inApp }"
+      :class="{ 'app-header-fill': $envs.inApp }"
       position="right"
     >
       <div class="j-container">
@@ -1109,7 +1206,7 @@ function doDelTask(item) {
             </div>
           </div>
         </div>
-        <div class="j-main more-list-container">
+        <div class="j-main more-list-container" ref='moreContentEl'>
           <div class="cell-list-container">
             <div
               v-for="(cell, index) in moreListModel.list"
@@ -1157,14 +1254,15 @@ function doDelTask(item) {
       v-model="historyModel.show"
       overlay-class="ai-search--history-overlay"
       class="ai-search--history-popup"
-      :class="{ &quot;app-header-fill&quot;: $envs.inApp }"
+      :class="{ 'app-header-fill': $envs.inApp }"
       position="right"
-      closeable
-      close-icon="clear"
     >
       <div class="j-container">
-        <div class="j-header history-list-header">
-          历史对话
+        <div class="j-header history-list-header flex flex-(items-center justify-between)">
+          <span>历史对话</span>
+          <div class="item-del-icon" @click="historyModel.show = false">
+            <i class="iconfont icon-delete_gray" />
+          </div>
         </div>
         <div class="j-main">
           <div v-if="historyListLabel.length > 0" class="history-list-container">
@@ -1625,8 +1723,22 @@ function doDelTask(item) {
       font-size: 20px;
       line-height: 24px;
       color: rgba(23, 24, 38, 1);
-      margin: 24px;
+      padding: 24px;
+      padding-bottom: 0;
       margin-bottom: 8px;
+
+      .item-del-icon i {
+        font-size: 22px;
+      }
+
+    }
+    .item-del-icon {
+      padding: 4px;
+      margin-left: 12px;
+      i {
+        font-size: 18px;
+        color: #c8c9cc;
+      }
     }
     .history-empty-container {
       height: 100%;
@@ -1645,15 +1757,6 @@ function doDelTask(item) {
         margin-left: 12px;
       }
 
-      .item-del-icon {
-        padding: 4px;
-        margin-left: 12px;
-        i {
-          font-size: 18px;
-          color: #c8c9cc;
-        }
-      }
-
       .history-list--item {
         margin-top: 8px;
         font-size: 14px;

apps/mobile/src/views/ai-search/model/index.js

@@ -0,0 +1,18 @@
+// 函数：通用缓存函数，支持自定义 key
+const cacheToLocalStorage = (key, state) => {
+  localStorage.setItem(key, JSON.stringify(state.value));
+};
+
+// 函数：通用读取函数，支持自定义 key
+const loadFromLocalStorage = (key, state) => {
+  const cachedData = localStorage.getItem(key);
+  if (cachedData) {
+    Object.assign(state.value, JSON.parse(cachedData));
+  }
+};
+
+
+
+// 使用示例：
+cacheToLocalStorage('historyModel', historyModel);
+loadFromLocalStorage('historyModel', historyModel);