feat: ai页面新增埋点上报函数

apps/mobile/src/components/search/TopSearch.vue

@@ -11,7 +11,7 @@
       <van-field
         clearable
         class="input-group"
-        :class="{ 'fix-right': !showButton, border: inputFocus }"
+        :class="{ 'fix-right': !showButton, 'border': inputFocus }"
         type="search"
         :value="value"
         :maxlength="maxlength"
@@ -35,11 +35,11 @@
           </button>
         </template>
       </van-field>
-      <div class="search-form-suffix clickable">
+      <div class="search-form-suffix">
         <span
           v-if="showAiButton"
           class="j-icon j-base-icon icon-ai-by-search"
-          @click="toAskAi"
+          @click.stop.prevent="toAskAi"
         />
         <template v-else>
           <button
@@ -108,10 +108,11 @@ export default {
   },
   methods: {
     toAskAi() {
+      console.log(123123)
       this.$router.push({
         path: '/ai/search',
         query: {
-          from: 'home'
+          from: 'top-search'
         }
       })
     },

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

@@ -1,25 +1,28 @@
 <script setup>
 import { computed, getCurrentInstance, onMounted, ref } from 'vue'
-import { Popover, Popup, Overlay, Swipe, SwipeItem, Field, Loading } from 'vant'
+import { Field, Loading, Overlay, Popover, Popup, Swipe, SwipeItem } from 'vant'
+import qs from 'qs'
 import AppEmpty from '@/ui/empty/index.vue'
 import {
-  ajaxActionLike, ajaxDelTask,
+  ajaxActionLike,
+  ajaxDelTask,
   ajaxGetHistoryDetail,
   ajaxGetHistoryList,
   ajaxGetMoreList,
   ajaxGetPromptTypes,
   ajaxNewTask,
-  ajaxSetMessage, getAccountInfo
+  ajaxSetMessage,
+  getAccountInfo
 } from '@/api/modules'
 import ProjectCell from '@/ui/project-cell/index.vue'
 import {
   dateFormatter,
   formatMoney,
   getRandomString,
-  openAppOrWxPage, openLinkOfOther
+  openAppOrWxPage,
+  openLinkOfOther
 } from '@/utils'
 import { LINKS } from '@/data'
-import qs from 'qs'
 
 const that = getCurrentInstance().proxy
 
@@ -39,7 +42,8 @@ function onSelectRightAction(action) {
   console.log('action', action)
   if (action.text === '新对话') {
     doNewQuestion()
-  } else {
+  }
+  else {
     doAjaxGetHistoryList()
     historyModel.value.show = true
   }
@@ -53,7 +57,7 @@ const historyModel = ref({
 
 const historyListLabel = computed(() => {
   const periods = ['今天', '过去7天', '过去30天', '更早']
-  return periods.filter((period) =>
+  return periods.filter(period =>
     Array.isArray(historyModel.value.list[period])
   )
 })
@@ -71,6 +75,10 @@ function doNewQuestion() {
   doSelectQuestionType(promptModel.value.typeList[0])
 }
 
+function trickClick(name, opts = {}) {
+  console.log(`ai-${name}`, opts)
+}
+
 function goHistory(item) {
   historyModel.value.show = false
   console.log('item', item)
@@ -135,7 +143,8 @@ const promptEle = ref(null)
 function doChangePrompt(val) {
   if (val) {
     promptEle.value.next()
-  } else {
+  }
+  else {
     promptEle.value.prev()
   }
 }
@@ -150,6 +159,10 @@ function doSelectPrompt(item) {
   that.$nextTick(() => {
     getQuestionInputHeight()
   })
+
+  trickClick('选中提示词', {
+    text: item.text
+  })
 }
 
 const questionModel = ref({
@@ -178,7 +191,7 @@ function getQuestionInputHeight() {
   }
   const nowKey = `${Date.now()}_${questionModel.value.input.length}`
   questionModel.value.style = {
-    height: result.height,
+    'height': result.height,
     'data-up': nowKey
   }
   questionModel.value.iconShow = canShow
@@ -213,20 +226,20 @@ function formatTypeofItemKey(params, type, spare = '-') {
   let formatFn = () => spare
   switch (type) {
     case 'money': {
-      formatFn = (params) => formatMoney(Number(params))
+      formatFn = params => formatMoney(Number(params))
       break
     }
     case 'money-table': {
-      formatFn = (params) =>
+      formatFn = params =>
         formatMoney(Number(params), { type: 'number', level: 1 })
       break
     }
     case 'date': {
-      formatFn = (params) => dateFormatter(Number(params) * 1000)
+      formatFn = params => dateFormatter(Number(params) * 1000)
       break
     }
     case 'date-ms': {
-      formatFn = (params) => dateFormatter(Number(params) * 1000, 'yyyy-MM-dd')
+      formatFn = params => dateFormatter(Number(params) * 1000, 'yyyy-MM-dd')
       break
     }
   }
@@ -237,7 +250,8 @@ function formatTypeofItemKey(params, type, spare = '-') {
 }
 
 function preSortItem(item) {
-  if (!item) return {}
+  if (!item)
+    return {}
   const { area, city, collect, projectInfo } = item
   item.id = item.infoId
   item.star = !!collect
@@ -254,8 +268,8 @@ function preSortItem(item) {
     Object.assign(item, projectInfo)
   }
   const region = city || area
-  const buyerClass =
-    item?.buyerClass && item?.buyerClass !== '其它'
+  const buyerClass
+    = item?.buyerClass && item?.buyerClass !== '其它'
       ? item?.buyerClass
       : undefined
 
@@ -267,7 +281,7 @@ function preSortItem(item) {
     item?.type || item?.subtype,
     // 有中标金额取中标金额，没有取预算，预算没有置空
     formatTypeofItemKey(item?.bidamount || item?.budget, 'money', '')
-  ].filter((v) => v)
+  ].filter(v => v)
 
   item.dateTime = item.publishtime ? item.publishtime * 1000 : ''
 
@@ -305,7 +319,7 @@ function preSortItem(item) {
       label: '中标单位',
       splitter: '：',
       text: Array.isArray(item.winnerInfo)
-        ? item.winnerInfo.map((w) => w.winner).join(',')
+        ? item.winnerInfo.map(w => w.winner).join(',')
         : '',
       detailTextSlot: 'winnerText',
       children: winnerList
@@ -352,7 +366,8 @@ function formatAskAnswer(res) {
   if (res.status === 1) {
     if (res.count === 0) {
       resultState = 2
-    } else {
+    }
+    else {
       resultState = 3
       askItem.list = (res.list || []).map((v) => {
         return formatCellItem(v)
@@ -362,7 +377,8 @@ function formatAskAnswer(res) {
       }
       askItem.count = res.count
     }
-  } else {
+  }
+  else {
     resultState = 1
   }
 
@@ -409,7 +425,8 @@ async function doSubmitMessage() {
         console.log('xxx', res)
         if (res.data) {
           questionModel.value.nowId = res.data
-        } else {
+        }
+        else {
           that.$toast('会话创建失败，请稍后再试')
         }
       })
@@ -440,7 +457,7 @@ function clearAskState() {
 function doSendMessageOfUser(message) {
   askModel.value.list.push({
     user: true,
-    message: message
+    message
   })
   questionModel.value.input = ''
   questionModel.value.inputTheme = 'scale'
@@ -482,6 +499,9 @@ function changeMessageItem(id, data) {
 
 function doClickInputIcon(type) {
   console.log('t', type)
+  trickClick('发送', {
+    type
+  })
   switch (type) {
     case 'full': {
       questionModel.value.inputTheme = 'full'
@@ -513,11 +533,16 @@ function doSelectQuestionType(item) {
   }
   if (item.disabled) {
     that.$toast(item.toast)
-  } else {
+  }
+  else {
     promptModel.value.type = item.key
     promptModel.value.list = item.options
     promptModel.value.show = true
   }
+
+  trickClick('选择类型', {
+    text: item.text
+  })
 }
 
 const askStateMap = {
@@ -546,6 +571,11 @@ function resetQuestion(item) {
   that.$nextTick(() => {
     getQuestionInputHeight()
   })
+
+  trickClick('重新提问', {
+    id: item.id,
+    message: item.message
+  })
 }
 
 function init() {
@@ -556,7 +586,7 @@ function init() {
         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: '剑鱼正在冒着火星子搭建，敬请期待！'
@@ -583,10 +613,14 @@ function goToDetail(item) {
   if (item.keys) {
     query.keywords = item.keys.join(' ')
   }
+  trickClick('点击跳转详情页', {
+    title: item.title,
+    id: item.id
+  })
   openAppOrWxPage({
-    wx: LINKS.标讯详情页前缀.wx + item.id + '.html?' + qs.stringify(query),
-    app: LINKS.标讯详情页前缀.app + item.id + '.html?' + qs.stringify(query),
-    h5: LINKS.标讯详情页前缀.h5 + item.id + '.html?' + qs.stringify(query)
+    wx: `${LINKS.标讯详情页前缀.wx + item.id}.html?${qs.stringify(query)}`,
+    app: `${LINKS.标讯详情页前缀.app + item.id}.html?${qs.stringify(query)}`,
+    h5: `${LINKS.标讯详情页前缀.h5 + item.id}.html?${qs.stringify(query)}`
   })
 }
 
@@ -601,6 +635,10 @@ function doCollection(item, index) {
       }
     }
   })
+  trickClick('标讯收藏', {
+    title: item.title,
+    id: item.id
+  })
 }
 
 function doLookMoreList(item) {
@@ -622,12 +660,21 @@ function doLookMoreList(item) {
     .catch(() => {
       moreListModel.value.loading = false
     })
+  trickClick('查看更多', {
+    message: item.message,
+    id: item.id
+  })
 }
 function doCellAction(item, type) {
   console.log(item)
   if (type === 'reload') {
     doAjaxSendMessage(item.message, type)
-  } else {
+    trickClick('cell-action-刷新', {
+      message: item.message,
+      id: item.id
+    })
+  }
+  else {
     item.like = Number(!item.like)
     ajaxActionLike({
       cid: item.id,
@@ -635,12 +682,16 @@ function doCellAction(item, type) {
     }).then((res) => {
       // that.$toast('感谢')
     })
+    trickClick('cell-action-点赞', {
+      message: item.message,
+      id: item.id
+    })
   }
 }
 
 const moreLike = computed(() => {
   const item = askModel.value.list.find(
-    (v) => v.id === moreListModel.value.selectId
+    v => v.id === moreListModel.value.selectId
   )
   console.log(item)
   return item || {}
@@ -667,7 +718,8 @@ async function getUserInfo() {
       console.log('o', phone)
     }
     return data
-  } catch (error) {
+  }
+  catch (error) {
     return {}
   }
 }
@@ -690,13 +742,13 @@ function checkBindPhone() {
   }
 }
 
-function doDelTask (item) {
+function doDelTask(item) {
   console.log('item', item)
   that.$dialog.confirm({
     message: '是否要删除该对话记录？',
     confirmButtonColor: '#ee0a24'
   }).then(() => {
-    ajaxDelTask({ sid: item.id }).then(res =>  {
+    ajaxDelTask({ sid: item.id }).then((res) => {
       if (res.data) {
         that.$toast('删除成功')
         doAjaxGetHistoryList()
@@ -715,75 +767,75 @@ function doDelTask (item) {
   <div class="ai-search--page j-container">
     <div
       class="j-header ai-search--header flex flex-(items-center justify-between)"
-      :class='{"app-header-fill": $envs.inApp}'
+      :class="{ &quot;app-header-fill&quot;: $envs.inApp }"
     >
       <div class="flex flex-(items-center justify-between)">
         <span class="back-icon" @click="doBack">
-          <i class="iconfont icon-back"></i>
+          <i class="iconfont icon-back" />
         </span>
         <div class="flex flex-(items-center justify-between) header-left">
-          <img class="main-logo-img" src="@/assets/image/public/logo_new.png" />
+          <img class="main-logo-img" src="@/assets/image/public/logo_new.png">
           <div class="main-logo">
             <span class="main-text">剑鱼标讯</span>
-            <br />
+            <br>
             <span>jianyu360.cn</span>
           </div>
         </div>
       </div>
-      <popover
+      <Popover
+        v-model="rightAction.show"
         placement="bottom-end"
         :offset="[-16, 12]"
-        v-model="rightAction.show"
         trigger="click"
         :actions="rightAction.actions"
         @select="onSelectRightAction"
       >
         <template #reference>
           <span class="right-icon">
-            <i class="iconfont icon-gengduo-shuxiang"></i>
+            <i class="iconfont icon-gengduo-shuxiang" />
           </span>
         </template>
-      </popover>
+      </Popover>
     </div>
 
     <div class="ai-search--content j-main">
-      <div v-if='needBindPhone || needLogin' class='bind-phone-popup'  @click='checkBindPhone'></div>
-      <div class="ai-search--empty" v-if="askModel.list.length === 0">
-        <app-empty state="ai-logo">你想看看啥子？快告诉我吧~</app-empty>
+      <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">
+          你想看看啥子？快告诉我吧~
+        </AppEmpty>
       </div>
 
-      <div class="ask-container" v-else>
+      <div v-else class="ask-container">
         <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 }"
         >
-          <div class="ask-item--default" v-if="item.user">
+          <div v-if="item.user" class="ask-item--default">
             {{ item.message }}
           </div>
-          <div class="ask-item--custom flex flex-(col)" v-else>
+          <div v-else class="ask-item--custom flex flex-(col)">
             <div class="flex flex-(items-center)">
               <div class="ask-logo">
-                <img src="@/assets/image/ai-search/logo-head.png" alt="ai" />
+                <img src="@/assets/image/ai-search/logo-head.png" alt="ai">
               </div>
 
               <div v-if="item.state === 0" class="flex flex-(items-center)">
                 {{ askStateMap[item.state] }}
-                <loading
+                <Loading
                   style="margin-left: 8px"
                   color="#2abed1"
                   size="14px"
-                ></loading>
+                />
               </div>
               <div v-if="item.state === 1">
                 {{ askStateMap[item.state] }}
               </div>
               <div v-if="item.state === 2">
                 <span>{{ askStateMap[item.state] }}</span>
-                <span @click="resetQuestion(item)" class="highlight-text"
-                  >重新提问</span
-                >
+                <span class="highlight-text" @click="resetQuestion(item)">重新提问</span>
               </div>
               <div v-if="item.state === 3">
                 {{ askStateMap[item.state] }}
@@ -792,18 +844,20 @@ function doDelTask (item) {
 
             <div v-if="item.state === 3">
               <div class="cell-list-container">
-                <div class="cell-list-tip">以下是我为您整理的数据样例</div>
+                <div class="cell-list-tip">
+                  以下是我为您整理的数据样例
+                </div>
                 <div
-                  class="cell-list-item"
                   v-for="(cell, index) in item.list"
                   :key="index"
+                  class="cell-list-item"
                 >
                   <ProjectCell
                     :key="cell.vKid"
                     v-visited:content="cell.id"
                     :class="cell.className"
-                    :card-type="'detailed'"
-                    :time-fmt="'yyyy-MM-dd'"
+                    card-type="detailed"
+                    time-fmt="yyyy-MM-dd"
                     :detail-list="cell.detailList"
                     :title="cell.title"
                     :detail="cell.detail || null"
@@ -822,7 +876,7 @@ function doDelTask (item) {
                           class="j-icon"
                           :class="{
                             'icon-star-fill': cell.star,
-                            'icon-star-streak': !cell.star
+                            'icon-star-streak': !cell.star,
                           }"
                         />
                         <span>&nbsp;{{ cell.star ? '已收藏' : '收藏' }}</span>
@@ -835,7 +889,7 @@ function doDelTask (item) {
                 已为您搜索到
                 <span class="highlight-text">{{ item.count }}</span>
                 条，查看全部结果
-                <i class="iconfont icon-youbian"></i>
+                <i class="iconfont icon-youbian" />
               </div>
               <div class="cell-list-actions flex flex-(items-center)">
                 <div
@@ -847,19 +901,21 @@ function doDelTask (item) {
                     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="tip-popver">
+                    感谢您的认可！
+                  </div>
                 </div>
                 <div
                   class="cell-action-icon"
                   @click="doCellAction(item, 'reload')"
                 >
-                  <i class="iconfont icon-kecheng_shuaxin"></i>
+                  <i class="iconfont icon-kecheng_shuaxin" />
                 </div>
               </div>
             </div>
@@ -867,31 +923,33 @@ function doDelTask (item) {
         </div>
       </div>
 
-      <overlay
+      <Overlay
         :z-index="2"
         :duration="0"
         :show="questionModel.inputTheme === 'full'"
         @click="doClickInputIcon('scale')"
       />
-      <div class="question-input-container" :class="{
-        [questionModel.inputTheme]: true,
-        'in-ask': questionModel.nowId
-      }">
+      <div
+        class="question-input-container" :class="{
+          [questionModel.inputTheme]: true,
+          'in-ask': questionModel.nowId,
+        }"
+      >
         <div
-          class="question-prompt-container"
           v-show="
-            questionModel.inputTheme === 'scale' &&
-            promptModel.list.length > 0 &&
-            promptModel.show
+            questionModel.inputTheme === 'scale'
+              && promptModel.list.length > 0
+              && promptModel.show
           "
+          class="question-prompt-container"
         >
-          <swipe
+          <Swipe
             ref="promptEle"
-            @change="onChangePrompt"
             :show-indicators="false"
             :loop="false"
+            @change="onChangePrompt"
           >
-            <swipe-item v-for="(item, index) in promptModel.list" :key="index">
+            <SwipeItem v-for="(item, index) in promptModel.list" :key="index">
               <div class="question-prompt-item">
                 <div
                   class="custom-indicator flex flex-(items-center justify-between)"
@@ -901,60 +959,62 @@ function doDelTask (item) {
                     class="prompt-arrow flex flex-(items-center justify-between)"
                   >
                     <span
-                      @click="doChangePrompt(false)"
                       class="prompt-arrow-icon"
                       :class="{ active: index > 0 }"
+                      @click="doChangePrompt(false)"
                     >
-                      <i class="iconfont icon-up"></i>
+                      <i class="iconfont icon-up" />
                     </span>
                     <div>
                       {{ promptModel.current + 1 }} /
                       {{ promptModel.list.length }}
                     </div>
                     <span
-                      @click="doChangePrompt(true)"
                       class="prompt-arrow-icon"
                       :class="{ active: index < promptModel.list.length - 1 }"
+                      @click="doChangePrompt(true)"
                     >
-                      <i class="iconfont icon-down"></i>
+                      <i class="iconfont icon-down" />
                     </span>
                   </div>
                 </div>
-                <div @click="doSelectPrompt(item)">{{ item.text }}</div>
+                <div @click="doSelectPrompt(item)">
+                  {{ item.text }}
+                </div>
               </div>
-            </swipe-item>
-          </swipe>
+            </SwipeItem>
+          </Swipe>
         </div>
 
         <div
-          class="question-type-container flex flex-(row items-center)"
           v-show="questionModel.inputTheme === 'scale'"
+          class="question-type-container flex flex-(row items-center)"
         >
           <div
-            class="question-type-item"
             v-for="(item, index) in promptModel.typeList"
             :key="index"
-            @click="doSelectQuestionType(item)"
+            class="question-type-item"
             :class="{
               'is-disable': item.disabled,
-              'is-active': promptModel.type === item.key
+              'is-active': promptModel.type === item.key,
             }"
+            @click="doSelectQuestionType(item)"
           >
-            <i class="iconfont" :class="item.icon"></i>
+            <i class="iconfont" :class="item.icon" />
             <span>{{ item.text }}</span>
           </div>
         </div>
 
         <div class="question-input-item">
-          <field
+          <Field
             ref="questionInputEl"
             v-model="questionModel.input"
-            @input="getQuestionInputHeight"
-            @change="getQuestionInputHeight"
             center
             v-bind="questionModelOptions"
             type="textarea"
             placeholder="发消息..."
+            @input="getQuestionInputHeight"
+            @change="getQuestionInputHeight"
           >
             <template #button>
               <div
@@ -966,30 +1026,30 @@ function doDelTask (item) {
                 "
               >
                 <div
-                  class="input-icon"
                   v-if="
-                    questionModel.inputTheme === 'scale' &&
-                    questionModel.iconShow
+                    questionModel.inputTheme === 'scale'
+                      && questionModel.iconShow
                   "
-                  @click="doClickInputIcon('full')"
+                  class="input-icon"
                   :style="{ 'margin-bottom': '8px' }"
+                  @click="doClickInputIcon('full')"
                 >
                   <img
                     class="full-icon"
                     src="@/assets/image/ai-search/scale.png"
                     alt="submit"
-                  />
+                  >
                 </div>
                 <div
-                  class="input-icon"
                   v-if="questionModel.inputTheme === 'full'"
+                  class="input-icon"
                   @click="doClickInputIcon('scale')"
                 >
                   <img
                     class="scale-icon"
                     src="@/assets/image/ai-search/disscale.png"
                     alt="submit"
-                  />
+                  >
                 </div>
                 <div
                   class="input-icon"
@@ -1000,20 +1060,20 @@ function doDelTask (item) {
                     class="submit-icon"
                     src="@/assets/image/icon/icon-submit.png"
                     alt="submit"
-                  />
+                  >
                 </div>
               </div>
             </template>
-          </field>
+          </Field>
         </div>
       </div>
     </div>
 
-    <popup
+    <Popup
+      v-model="moreListModel.show"
       overlay-class="ai-search--history-overlay"
       class="ai-search--more-popup"
-      :class='{"app-header-fill": $envs.inApp}'
-      v-model="moreListModel.show"
+      :class="{ &quot;app-header-fill&quot;: $envs.inApp }"
       position="right"
     >
       <div class="j-container">
@@ -1022,10 +1082,10 @@ function doDelTask (item) {
         >
           <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>
+              <i class="iconfont icon-close_heidi" style="color: #c0c4cc" />
             </div>
             <div class="flex flex-(items-center)">
-              <img src="@/assets/image/ai-search/empty.png" alt="ai" />
+              <img src="@/assets/image/ai-search/empty.png" alt="ai">
               <span class="tip-text">为您搜索到的结果</span>
             </div>
           </div>
@@ -1038,28 +1098,30 @@ function doDelTask (item) {
               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="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"
+              class="cell-list-item"
             >
               <ProjectCell
                 :key="cell.vKid"
                 v-visited:content="cell.id"
                 :class="cell.className"
-                :card-type="'detailed'"
-                :time-fmt="'yyyy-MM-dd'"
+                card-type="detailed"
+                time-fmt="yyyy-MM-dd"
                 :detail-list="cell.detailList"
                 :title="cell.title"
                 :detail="cell.detail || null"
@@ -1078,7 +1140,7 @@ function doDelTask (item) {
                       class="j-icon"
                       :class="{
                         'icon-star-fill': cell.star,
-                        'icon-star-streak': !cell.star
+                        'icon-star-streak': !cell.star,
                       }"
                     />
                     <span>&nbsp;{{ cell.star ? '已收藏' : '收藏' }}</span>
@@ -1089,40 +1151,43 @@ function doDelTask (item) {
           </div>
         </div>
       </div>
-    </popup>
+    </Popup>
 
-    <popup
+    <Popup
+      v-model="historyModel.show"
       overlay-class="ai-search--history-overlay"
       class="ai-search--history-popup"
-      :class='{"app-header-fill": $envs.inApp}'
-      v-model="historyModel.show"
+      :class="{ &quot;app-header-fill&quot;: $envs.inApp }"
       position="right"
       closeable
       close-icon="clear"
     >
-      <div class='j-container'>
-        <div class="j-header history-list-header">历史对话</div>
-        <div class='j-main'>
-          <div class="history-list-container" v-if="historyListLabel.length > 0">
+      <div class="j-container">
+        <div class="j-header history-list-header">
+          历史对话
+        </div>
+        <div class="j-main">
+          <div v-if="historyListLabel.length > 0" class="history-list-container">
             <div
-              class="history-item-container"
               v-for="(label, index) in historyListLabel"
               :key="index"
+              class="history-item-container"
             >
-              <div class="history-list--time">{{ label }}</div>
+              <div class="history-list--time">
+                {{ label }}
+              </div>
               <div
-                class="history-list--item"
                 v-for="(item, iIndex) in historyModel.list[label]"
                 :key="iIndex"
+                class="history-list--item"
                 @click="goHistory(item)"
               >
-                <div class='flex flex-(items-center justify-between)'>
+                <div class="flex flex-(items-center justify-between)">
                   {{ item.question }}
-                  <div class='item-del-icon' @click='doDelTask(item)'>
-                    <i class='iconfont icon-delete_gray'></i>
+                  <div class="item-del-icon" @click="doDelTask(item)">
+                    <i class="iconfont icon-delete_gray" />
                   </div>
                 </div>
-
               </div>
             </div>
           </div>
@@ -1131,13 +1196,17 @@ function doDelTask (item) {
             class="history-empty-container flex flex-(col items-center justify-center)"
           >
             <div class="flex flex-(col items-center align-center)">
-              <app-empty state="back">您还没有和我聊天呢，现在开始吧</app-empty>
-              <div class="new-question-button" @click="doNewQuestion">开启对话</div>
+              <AppEmpty state="back">
+                您还没有和我聊天呢，现在开始吧
+              </AppEmpty>
+              <div class="new-question-button" @click="doNewQuestion">
+                开启对话
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </popup>
+    </Popup>
   </div>
 </template>