feat: 完善历史对话

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

@@ -12,7 +12,12 @@ import {
   ajaxSetMessage
 } from '@/api/modules'
 import ProjectCell from '@/ui/project-cell/index.vue'
-import { dateFormatter, formatMoney, getRandomString, openAppOrWxPage } from '@/utils'
+import {
+  dateFormatter,
+  formatMoney,
+  getRandomString,
+  openAppOrWxPage
+} from '@/utils'
 import { LINKS } from '@/data'
 import qs from 'qs'
 
@@ -26,8 +31,7 @@ const rightAction = ref({
   ]
 })
 
-
-function doBack () {
+function doBack() {
   that.$router.back()
 }
 
@@ -42,17 +46,18 @@ function onSelectRightAction(action) {
 }
 
 const historyModel = ref({
-  show: false,
+  show: true,
   loading: false,
   list: []
 })
 
 const historyListLabel = computed(() => {
-  const periods = ['今天', '过去7天', '过去30天', '更早'];
-  return periods.filter(period => Array.isArray(historyModel.value.list[period]))
+  const periods = ['今天', '过去7天', '过去30天', '更早']
+  return periods.filter((period) =>
+    Array.isArray(historyModel.value.list[period])
+  )
 })
 
-
 const moreListModel = ref({
   show: false,
   loading: false,
@@ -70,31 +75,34 @@ function goHistory(item) {
   console.log('item', item)
   ajaxGetHistoryDetail({
     sid: item.id
-  }).then(res => {
-      clearAskState()
-      questionModel.value.nowId = item.id
-
-      if (Array.isArray(res.data)) {
-        res.data.forEach(v => {
-          // 回显问题
-          doSendMessageOfUser(v.question)
-          // 回显答复
-          v.answer.id = v.id
-
-          const askItem = Object.assign({
+  }).then((res) => {
+    clearAskState()
+    questionModel.value.nowId = item.id
+
+    if (Array.isArray(res.data)) {
+      res.data.forEach((v) => {
+        // 回显问题
+        doSendMessageOfUser(v.question)
+        // 回显答复
+        v.answer.id = v.id
+
+        const askItem = Object.assign(
+          {
             message: v.question,
             id: v.id,
             list: [],
             like: v.like || 0,
             state: 0
-          }, formatAskAnswer(v.answer))
+          },
+          formatAskAnswer(v.answer)
+        )
 
-          askModel.value.list.push({
-            ...askItem,
-            _data: v.answer
-          })
+        askModel.value.list.push({
+          ...askItem,
+          _data: v.answer
         })
-      }
+      })
+    }
   })
 }
 
@@ -152,7 +160,7 @@ const questionModel = ref({
 
 const questionInputEl = ref(null)
 
-function getQuestionInputHeight () {
+function getQuestionInputHeight() {
   console.log('cccc height')
   const result = {
     height: '100%'
@@ -174,7 +182,7 @@ function getQuestionInputHeight () {
   questionModel.value.iconShow = canShow
 }
 
-function changeInputHeight () {
+function changeInputHeight() {
   if (questionInputEl.value) {
     questionInputEl.value.$el.querySelector('textarea').style.height = '24px'
   }
@@ -199,8 +207,6 @@ const questionModelOptions = computed(() => {
   }
 })
 
-
-
 function formatTypeofItemKey(params, type, spare = '-') {
   let formatFn = () => spare
   switch (type) {
@@ -218,8 +224,7 @@ function formatTypeofItemKey(params, type, spare = '-') {
       break
     }
     case 'date-ms': {
-      formatFn = (params) =>
-        dateFormatter(Number(params) * 1000, 'yyyy-MM-dd')
+      formatFn = (params) => dateFormatter(Number(params) * 1000, 'yyyy-MM-dd')
       break
     }
   }
@@ -241,8 +246,7 @@ function preSortItem(item) {
   }
   // 是否有附件
   item.isFile = item?.fileExists || false
-  item.leftTopBadgeText =
-    item.site === '剑鱼信息发布平台' ? '业主委托项目' : ''
+  item.leftTopBadgeText = item.site === '剑鱼信息发布平台' ? '业主委托项目' : ''
   // 拟建项目独有参数
   if (projectInfo) {
     Object.assign(item, projectInfo)
@@ -281,9 +285,7 @@ function preSortItem(item) {
     {
       label: '采购单位',
       splitter: '：',
-      text: Array.isArray(item.buyer)
-        ? item.buyer.join(',')
-        : item.buyer || '',
+      text: Array.isArray(item.buyer) ? item.buyer.join(',') : item.buyer || '',
       highlightText: true,
       detailTextSlot: 'buyerText'
     },
@@ -334,11 +336,11 @@ function preSortItem(item) {
 
   return item
 }
-function formatCellItem (v) {
+function formatCellItem(v) {
   return preSortItem(v)
 }
 
-function formatAskAnswer (res) {
+function formatAskAnswer(res) {
   let resultState = 1
   const askItem = {
     list: [],
@@ -350,7 +352,7 @@ function formatAskAnswer (res) {
       resultState = 2
     } else {
       resultState = 3
-      askItem.list = (res.list || []).map(v => {
+      askItem.list = (res.list || []).map((v) => {
         return formatCellItem(v)
       })
       if (res.id) {
@@ -366,7 +368,7 @@ function formatAskAnswer (res) {
   return askItem
 }
 
-async function doAjaxSendMessage (question, type = '') {
+async function doAjaxSendMessage(question, type = '') {
   doSendMessageOfUser(question)
 
   let askItem = {
@@ -383,36 +385,39 @@ async function doAjaxSendMessage (question, type = '') {
     question: question,
     item: promptModel.value.type || '1',
     type
-  }).then(res => {
-    console.log('x', res)
-    askItem = Object.assign(askItem, formatAskAnswer(res))
-  }).catch(e => {
-    console.log('e', e)
-    askItem.state = 1
   })
+    .then((res) => {
+      console.log('x', res)
+      askItem = Object.assign(askItem, formatAskAnswer(res))
+    })
+    .catch((e) => {
+      console.log('e', e)
+      askItem.state = 1
+    })
 
   changeMessageItem(askItem.fId, askItem)
 }
 
-async function doSubmitMessage () {
+async function doSubmitMessage() {
   if (!questionModel.value.nowId) {
-    await ajaxNewTask().then(res => {
-      console.log('xxx', res)
-      if (res.data) {
-        questionModel.value.nowId = res.data
-      } else {
+    await ajaxNewTask()
+      .then((res) => {
+        console.log('xxx', res)
+        if (res.data) {
+          questionModel.value.nowId = res.data
+        } else {
+          that.$toast('会话创建失败，请稍后再试')
+        }
+      })
+      .catch(() => {
         that.$toast('会话创建失败，请稍后再试')
-      }
-    }).catch(() => {
-      that.$toast('会话创建失败，请稍后再试')
-    })
+      })
   }
   const question = questionModel.value.input
   doAjaxSendMessage(question)
 }
 
-
-function clearAskState () {
+function clearAskState() {
   // 清除会话
   askModel.value.list = []
   // 清除输入状态
@@ -428,7 +433,7 @@ function clearAskState () {
   })
 }
 
-function doSendMessageOfUser (message) {
+function doSendMessageOfUser(message) {
   askModel.value.list.push({
     user: true,
     message: message
@@ -441,7 +446,7 @@ function doSendMessageOfUser (message) {
     getQuestionInputHeight()
   })
 }
-function doSendMessageOfCustom (data) {
+function doSendMessageOfCustom(data) {
   const { message, state, list, count } = data
   const findId = `f_${Date.now()}_${Math.random()}`
   askModel.value.list.push({
@@ -463,12 +468,12 @@ function changeMessageItem(id, data) {
     const item = askModel.value.list[i]
     if (item.fId === id) {
       that.$set(askModel.value.list, i, { ...item, ...data })
-      console.log(`Item with id ${id} updated.`);
-      return;
+      console.log(`Item with id ${id} updated.`)
+      return
     }
   }
   // 如果没有找到匹配的项，输出提示信息
-  console.log(`No item found with id ${id}.`);
+  console.log(`No item found with id ${id}.`)
 }
 
 function doClickInputIcon(type) {
@@ -528,20 +533,19 @@ const askModel = ref({
   ]
 })
 
-function resetQuestion () {
+function resetQuestion() {
   doNewQuestion()
 }
 
-
-function init () {
-  ajaxGetPromptTypes().then(res => {
+function init() {
+  ajaxGetPromptTypes().then((res) => {
     console.log('x', res)
     if (res?.data) {
-      promptModel.value.typeList = res.data.map(v => {
+      promptModel.value.typeList = res.data.map((v) => {
         return {
           text: v.goodsName,
           key: v.goodsType,
-          options: (v.problem || []).map(s => ({ text: s })),
+          options: (v.problem || []).map((s) => ({ text: s })),
           icon: 'icon-wenjian',
           disabled: !v.isUsed,
           toast: '剑鱼正在冒着火星子搭建，敬请期待！'
@@ -552,8 +556,8 @@ function init () {
   doAjaxGetHistoryList()
 }
 
-function doAjaxGetHistoryList () {
-  ajaxGetHistoryList().then(res => {
+function doAjaxGetHistoryList() {
+  ajaxGetHistoryList().then((res) => {
     if (res?.data?.list) {
       historyModel.value.list = res.data.list
     }
@@ -562,20 +566,19 @@ function doAjaxGetHistoryList () {
 
 init()
 
-function goToDetail (item) {
+function goToDetail(item) {
   const query = {}
   if (item.keys) {
     query.keywords = item.keys.join(' ')
   }
   openAppOrWxPage({
     wx: LINKS.标讯详情页前缀.wx + item.id + '.html?' + qs.stringify(query),
-    app:
-      LINKS.标讯详情页前缀.app + item.id + '.html?' + qs.stringify(query),
+    app: LINKS.标讯详情页前缀.app + item.id + '.html?' + qs.stringify(query),
     h5: LINKS.标讯详情页前缀.h5 + item.id + '.html?' + qs.stringify(query)
   })
 }
 
-function doCollection (item, index) {
+function doCollection(item, index) {
   that.$keep.action({
     status: item.star,
     id: item.id,
@@ -588,25 +591,27 @@ function doCollection (item, index) {
   })
 }
 
-function doLookMoreList (item) {
+function doLookMoreList(item) {
   console.log('xx', item)
   moreListModel.value.show = true
   moreListModel.value.loading = true
   moreListModel.value.selectId = item.id
   ajaxGetMoreList({
     chatId: item.id
-  }).then(res => {
-    if (res.data) {
-      moreListModel.value.list = (res.data || []).map(v => {
-        return formatCellItem(v)
-      })
-    }
-    moreListModel.value.loading = false
-  }).catch(() => {
-    moreListModel.value.loading = false
   })
+    .then((res) => {
+      if (res.data) {
+        moreListModel.value.list = (res.data || []).map((v) => {
+          return formatCellItem(v)
+        })
+      }
+      moreListModel.value.loading = false
+    })
+    .catch(() => {
+      moreListModel.value.loading = false
+    })
 }
-function doCellAction (item, type) {
+function doCellAction(item, type) {
   console.log(item)
   if (type === 'reload') {
     doAjaxSendMessage(item.message, type)
@@ -615,29 +620,32 @@ function doCellAction (item, type) {
     ajaxActionLike({
       cid: item.id,
       val: item.like
-    }).then(res => {
+    }).then((res) => {
       // that.$toast('感谢')
     })
   }
 }
 
 const moreLike = computed(() => {
-  const item = askModel.value.list.find(v => v.id === moreListModel.value.selectId)
+  const item = askModel.value.list.find(
+    (v) => v.id === moreListModel.value.selectId
+  )
   console.log(item)
   return item || {}
 })
 
-function doMoreLike () {
+function doMoreLike() {
   doCellAction(moreLike.value, 'zan')
 }
-
 </script>
 
 <template>
   <div class="ai-search--page j-container">
-    <div class="j-header ai-search--header flex flex-(items-center justify-between)">
+    <div
+      class="j-header ai-search--header flex flex-(items-center justify-between)"
+    >
       <div class="flex flex-(items-center justify-between)">
-        <span class="back-icon" @click='doBack'>
+        <span class="back-icon" @click="doBack">
           <i class="iconfont icon-back"></i>
         </span>
         <div class="flex flex-(items-center justify-between) header-left">
@@ -666,48 +674,56 @@ function doMoreLike () {
     </div>
 
     <div class="ai-search--content j-main">
-      <div class="ai-search--empty" v-if='askModel.list.length === 0'>
+      <div class="ai-search--empty" v-if="askModel.list.length === 0">
         <app-empty state="ai">你想看看啥子？快告诉我吧~</app-empty>
       </div>
 
-      <div class='ask-container' v-else>
+      <div class="ask-container" v-else>
         <div
-          class='ask-item'
-          :class='{"is-user": item.user}'
-          v-for='(item, index) in askModel.list'
-          :key='index'
+          class="ask-item"
+          :class="{ 'is-user': item.user }"
+          v-for="(item, index) in askModel.list"
+          :key="index"
         >
-          <div class='ask-item--default' v-if='item.user'>
+          <div class="ask-item--default" v-if="item.user">
             {{ item.message }}
           </div>
-          <div class='ask-item--custom  flex flex-(col)' v-else>
-            <div class='flex flex-(items-center)'>
-              <div class='ask-logo'>
-                <img src='@/assets/image/ai-search/empty.png' alt='ai'>
+          <div class="ask-item--custom flex flex-(col)" v-else>
+            <div class="flex flex-(items-center)">
+              <div class="ask-logo">
+                <img src="@/assets/image/ai-search/empty.png" alt="ai" />
               </div>
 
-              <div v-if='item.state === 0' class='flex flex-(items-center)'>
-                {{askStateMap[item.state]}}
-                <loading style='margin-left: 8px;' color="#2abed1" size="14px"></loading>
+              <div v-if="item.state === 0" class="flex flex-(items-center)">
+                {{ askStateMap[item.state] }}
+                <loading
+                  style="margin-left: 8px"
+                  color="#2abed1"
+                  size="14px"
+                ></loading>
               </div>
-              <div v-if='item.state === 1'>
-                {{askStateMap[item.state]}}
+              <div v-if="item.state === 1">
+                {{ askStateMap[item.state] }}
               </div>
-              <div v-if='item.state === 2'>
-                <span>{{askStateMap[item.state]}}</span>
-                <span @click='resetQuestion' class='highlight-text'>重新提问</span>
+              <div v-if="item.state === 2">
+                <span>{{ askStateMap[item.state] }}</span>
+                <span @click="resetQuestion" class="highlight-text"
+                  >重新提问</span
+                >
               </div>
-              <div v-if='item.state === 3'>
-                {{askStateMap[item.state]}}
+              <div v-if="item.state === 3">
+                {{ askStateMap[item.state] }}
               </div>
             </div>
 
-            <div  v-if='item.state === 3'>
-              <div class='cell-list-container'>
-                <div class='cell-list-tip'>
-                  以下是我为您整理的数据样例
-                </div>
-                <div class="cell-list-item" v-for="(cell, index) in item.list" :key='index'>
+            <div v-if="item.state === 3">
+              <div class="cell-list-container">
+                <div class="cell-list-tip">以下是我为您整理的数据样例</div>
+                <div
+                  class="cell-list-item"
+                  v-for="(cell, index) in item.list"
+                  :key="index"
+                >
                   <ProjectCell
                     :key="cell.vKid"
                     v-visited:content="cell.id"
@@ -728,49 +744,69 @@ function doMoreLike () {
                   >
                     <template slot="icon">
                       <div @click.stop="doCollection(cell, index)">
-                      <span
-                        class="j-icon"
-                        :class="{
-                          'icon-star-fill': cell.star,
-                          'icon-star-streak': !cell.star
-                        }"
-                      />
+                        <span
+                          class="j-icon"
+                          :class="{
+                            'icon-star-fill': cell.star,
+                            'icon-star-streak': !cell.star
+                          }"
+                        />
                         <span>&nbsp;{{ cell.star ? '已收藏' : '收藏' }}</span>
                       </div>
                     </template>
                   </ProjectCell>
                 </div>
               </div>
-              <div class='cell-list-more' @click='doLookMoreList(item)'>
-                已为您搜索到 <span class='highlight-text'>{{item.count}}</span> 条，查看全部结果
-                <i class='iconfont icon-youbian'></i>
+              <div class="cell-list-more" @click="doLookMoreList(item)">
+                已为您搜索到
+                <span class="highlight-text">{{ item.count }}</span>
+                条，查看全部结果
+                <i class="iconfont icon-youbian"></i>
               </div>
-              <div class='cell-list-actions flex flex-(items-center)'>
-                <div class='cell-action-icon mini-tip-container' :class='{ "is-active": item.like === 1 }' @click='doCellAction(item, "zan")'>
-                  <img v-show='item.like === 0' src='@/assets/image/ai-search/like.png' alt='like'>
-                  <img v-show='item.like === 1' src='@/assets/image/ai-search/like-active.png' alt='like-active'>
-                  <div class='tip-popver'>感谢您的认可！</div>
+              <div class="cell-list-actions flex flex-(items-center)">
+                <div
+                  class="cell-action-icon mini-tip-container"
+                  :class="{ 'is-active': item.like === 1 }"
+                  @click="doCellAction(item, 'zan')"
+                >
+                  <img
+                    v-show="item.like === 0"
+                    src="@/assets/image/ai-search/like.png"
+                    alt="like"
+                  />
+                  <img
+                    v-show="item.like === 1"
+                    src="@/assets/image/ai-search/like-active.png"
+                    alt="like-active"
+                  />
+                  <div class="tip-popver">感谢您的认可！</div>
                 </div>
-                <div class='cell-action-icon' @click='doCellAction(item, "reload")'>
-                  <i class='iconfont icon-kecheng_shuaxin'></i>
+                <div
+                  class="cell-action-icon"
+                  @click="doCellAction(item, 'reload')"
+                >
+                  <i class="iconfont icon-kecheng_shuaxin"></i>
                 </div>
               </div>
             </div>
-
           </div>
         </div>
       </div>
 
       <overlay
         :z-index="2"
-        :duration='0'
+        :duration="0"
         :show="questionModel.inputTheme === 'full'"
         @click="doClickInputIcon('scale')"
       />
       <div class="question-input-container" :class="questionModel.inputTheme">
         <div
           class="question-prompt-container"
-          v-show="questionModel.inputTheme === 'scale' && promptModel.list.length > 0 && promptModel.show"
+          v-show="
+            questionModel.inputTheme === 'scale' &&
+            promptModel.list.length > 0 &&
+            promptModel.show
+          "
         >
           <swipe
             ref="promptEle"
@@ -813,7 +849,10 @@ function doMoreLike () {
           </swipe>
         </div>
 
-        <div class="question-type-container flex flex-(row items-center)" v-show="questionModel.inputTheme === 'scale'">
+        <div
+          class="question-type-container flex flex-(row items-center)"
+          v-show="questionModel.inputTheme === 'scale'"
+        >
           <div
             class="question-type-item"
             v-for="(item, index) in promptModel.typeList"
@@ -831,10 +870,10 @@ function doMoreLike () {
 
         <div class="question-input-item">
           <field
-            ref='questionInputEl'
+            ref="questionInputEl"
             v-model.trim="questionModel.input"
-            @input='getQuestionInputHeight'
-            @change='getQuestionInputHeight'
+            @input="getQuestionInputHeight"
+            @change="getQuestionInputHeight"
             center
             v-bind="questionModelOptions"
             type="textarea"
@@ -843,13 +882,20 @@ function doMoreLike () {
             <template #button>
               <div
                 class="input-icon-container flex flex-(col items-center justify-between)"
-                :style="questionModel.inputTheme === 'scale' ? questionModel.style : {}"
+                :style="
+                  questionModel.inputTheme === 'scale'
+                    ? questionModel.style
+                    : {}
+                "
               >
                 <div
                   class="input-icon"
-                  v-if="questionModel.inputTheme === 'scale' && questionModel.iconShow"
+                  v-if="
+                    questionModel.inputTheme === 'scale' &&
+                    questionModel.iconShow
+                  "
                   @click="doClickInputIcon('full')"
-                  :style='{"margin-bottom": "8px"}'
+                  :style="{ 'margin-bottom': '8px' }"
                 >
                   <img
                     class="full-icon"
@@ -868,7 +914,11 @@ function doMoreLike () {
                     alt="submit"
                   />
                 </div>
-                <div class="input-icon"  :class="{'is-disabled': questionModel.input === ''}" @click="doClickInputIcon('submit')">
+                <div
+                  class="input-icon"
+                  :class="{ 'is-disabled': questionModel.input === '' }"
+                  @click="doClickInputIcon('submit')"
+                >
                   <img
                     class="submit-icon"
                     src="@/assets/image/icon/icon-submit.png"
@@ -888,28 +938,44 @@ function doMoreLike () {
       v-model="moreListModel.show"
       position="right"
     >
-      <div class='j-container'>
-        <div class='j-header more-list-header flex flex-(item-center justify-between)'>
-
-          <div class='flex flex-(item-center)'>
-            <div class='more-header-icon' @click='moreListModel.show = false'>
-              <i class='iconfont icon-close_heidi' style='color: #C0C4CC'></i>
+      <div class="j-container">
+        <div
+          class="j-header more-list-header flex flex-(item-center justify-between)"
+        >
+          <div class="flex flex-(item-center)">
+            <div class="more-header-icon" @click="moreListModel.show = false">
+              <i class="iconfont icon-close_heidi" style="color: #c0c4cc"></i>
             </div>
-            <div class='flex flex-(items-center)'>
-              <img src='@/assets/image/ai-search/empty.png' alt='ai'>
-              <span class='tip-text'>为您搜索到的结果</span>
+            <div class="flex flex-(items-center)">
+              <img src="@/assets/image/ai-search/empty.png" alt="ai" />
+              <span class="tip-text">为您搜索到的结果</span>
             </div>
           </div>
-          <div class='more-header-icon mini-tip-container' :class='{ "is-active": moreLike.like === 1 }' @click='doMoreLike'>
-            <img v-show='moreLike.like === 0' src='@/assets/image/ai-search/like.png' alt='like'>
-            <img v-show='moreLike.like === 1' src='@/assets/image/ai-search/like-active.png' alt='like-active'>
-            <div class='tip-popver in-right'>感谢您的认可！</div>
+          <div
+            class="more-header-icon mini-tip-container"
+            :class="{ 'is-active': moreLike.like === 1 }"
+            @click="doMoreLike"
+          >
+            <img
+              v-show="moreLike.like === 0"
+              src="@/assets/image/ai-search/like.png"
+              alt="like"
+            />
+            <img
+              v-show="moreLike.like === 1"
+              src="@/assets/image/ai-search/like-active.png"
+              alt="like-active"
+            />
+            <div class="tip-popver in-right">感谢您的认可！</div>
           </div>
-
         </div>
-        <div class='j-main more-list-container'>
-          <div class='cell-list-container'>
-            <div class="cell-list-item" v-for="(cell, index) in moreListModel.list" :key='index'>
+        <div class="j-main more-list-container">
+          <div class="cell-list-container">
+            <div
+              class="cell-list-item"
+              v-for="(cell, index) in moreListModel.list"
+              :key="index"
+            >
               <ProjectCell
                 :key="cell.vKid"
                 v-visited:content="cell.id"
@@ -930,13 +996,13 @@ function doMoreLike () {
               >
                 <template slot="icon">
                   <div @click.stop="doCollection(cell, index)">
-                      <span
-                        class="j-icon"
-                        :class="{
-                          'icon-star-fill': cell.star,
-                          'icon-star-streak': !cell.star
-                        }"
-                      />
+                    <span
+                      class="j-icon"
+                      :class="{
+                        'icon-star-fill': cell.star,
+                        'icon-star-streak': !cell.star
+                      }"
+                    />
                     <span>&nbsp;{{ cell.star ? '已收藏' : '收藏' }}</span>
                   </div>
                 </template>
@@ -955,11 +1021,17 @@ function doMoreLike () {
       closeable
       close-icon="clear"
     >
-      <div class="history-list-container" v-if='historyListLabel.length > 0'>
-        <div v-for='(label, index) in historyListLabel' :key='index'>
-          <div class="history-list--time">{{label}}</div>
-          <div class="history-list--item" v-for='(item, iIndex) in historyModel.list[label]' :key='iIndex' @click="goHistory(item)">
-            {{item.question}}
+      <div class="history-list-header">历史对话</div>
+      <div class="history-list-container" v-if="historyListLabel.length > 0">
+        <div v-for="(label, index) in historyListLabel" :key="index">
+          <div class="history-list--time">{{ label }}</div>
+          <div
+            class="history-list--item"
+            v-for="(item, iIndex) in historyModel.list[label]"
+            :key="iIndex"
+            @click="goHistory(item)"
+          >
+            {{ item.question }}
           </div>
         </div>
       </div>
@@ -1001,7 +1073,7 @@ function doMoreLike () {
 
       @keyframes showAndHide {
         0% {
-          opacity: 1 ;
+          opacity: 1;
         }
         100% {
           opacity: 0;
@@ -1033,7 +1105,12 @@ function doMoreLike () {
         padding: 6px 12px;
         word-break: keep-all;
         border-radius: 8px;
-        background: linear-gradient(167.96deg, #FFFFFF 0%, #EDFEFF 45.31%, rgba(237, 254, 255, 0) 100%);
+        background: linear-gradient(
+          167.96deg,
+          #ffffff 0%,
+          #edfeff 45.31%,
+          rgba(237, 254, 255, 0) 100%
+        );
         &.in-right {
           left: -240%;
           top: 20px;
@@ -1074,7 +1151,7 @@ function doMoreLike () {
       padding: 12px 6px;
 
       .cell-list-tip {
-        color: #5F5E64;
+        color: #5f5e64;
         font-size: 12px;
         line-height: 24px;
         margin-bottom: 8px;
@@ -1105,7 +1182,7 @@ function doMoreLike () {
 
         &--default {
           color: #fff;
-          background-color: #2ABED1;
+          background-color: #2abed1;
           border-radius: 16px;
           border-bottom-right-radius: 0;
           margin: 0 16px;
@@ -1116,7 +1193,7 @@ function doMoreLike () {
           text-align: left;
           margin-left: 16px;
           padding-right: 16px;
-          color: #9B9CA3;
+          color: #9b9ca3;
         }
       }
       .ask-logo {
@@ -1344,7 +1421,17 @@ function doMoreLike () {
   &history-popup {
     height: 100%;
     width: 280px;
+    background: url('@/assets/image/ai-search/bg.png') right no-repeat;
+    background-size: 100% 100%;
     background-color: #fff;
+    .history-list-header {
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 24px;
+      color: rgba(23, 24, 38, 1);
+      margin: 24px;
+      margin-bottom: 8px;
+    }
     .history-empty-container {
       height: 100%;
     }
@@ -1354,6 +1441,7 @@ function doMoreLike () {
         color: rgba(155, 156, 163, 1);
         font-size: 14px;
         line-height: 24px;
+        margin-left: 12px;
       }
       .history-list--item {
         margin-top: 8px;