提交图片上传代码

liics

@@ -0,0 +1 @@
+Subproject commit e9d7f5bf799bf2d3d3df068f35290eba414237ad

src/components/chat-new.vue

@@ -1,22 +1,98 @@
 <script setup>
-import { ref, computed, inject, watch, nextTick, onMounted } from 'vue'
+import { ref, computed, inject, watch, nextTick } from 'vue'
-import { showToast } from 'vant';
+import { showImagePreview } from 'vant'
+import xss from 'xss'
 import footerBarInput from '@/components/footer-bar-input.vue'
 import hotQuestionNew from '@/components/hot-question-new.vue'
 import welcomes from '@/components/welcomes.vue'
 import abstract from '@/components/abstract.vue'
+import DynamicImage from '@/components/common/DynamicImage.vue'
+import imageService from '@/utils/imageService'
 import { messageSend } from '@/utils/api'
 defineOptions({
   name: 'chat-new',
 })
-import { Post } from '@/utils/https'
 const store = inject('appStore', null)
 const chatArr = inject('chatArr', ref([]))
 const isChatLoading = inject('isChatLoading', ref(false))
 const mainContainerRef = ref(null)
 
+function getMessageOptions(item) {
+  return item?.message?.[0]?.options || {}
+}
+
+function isImageMessage(item) {
+  const raw = item?.raw || item || {}
+  const options = getMessageOptions(item)
+  const reqAndResType = String(raw.reqAndResType || '')
+  const msgType = String(raw.msgType || '')
+  const fromFlag = String(raw.fromFlag || '')
+  const isProtocolImage =
+    (reqAndResType === '2' && (fromFlag === '1' || msgType === '02')) ||
+    (reqAndResType === '08' && msgType === '02')
+
+  return item?.message?.[0]?.type === 'image' ||
+    isProtocolImage ||
+    Boolean((item?.imageUrl || item?.imageKey || options.imageUrl || options.imageKey || raw.imgUrl || raw.imgKey || raw.fileKey) && !raw.msgText)
+}
+
+function getItemImage(item) {
+  const raw = item?.raw || item || {}
+  const options = getMessageOptions(item)
+  const reqAndResType = String(raw.reqAndResType || '')
+  const msgType = String(raw.msgType || '')
+  const fromFlag = String(raw.fromFlag || '')
+  const imageMessage =
+    (reqAndResType === '2' && (fromFlag === '1' || msgType === '02')) ||
+    (reqAndResType === '08' && msgType === '02')
+  const directImage = [item?.imageUrl, options.imageUrl, raw.imgUrl]
+    .map((value) => String(value || ''))
+    .find((value) => /^(data:|blob:|https?:\/\/)/i.test(value))
+
+  return String(
+    directImage ||
+    item?.imageKey ||
+    options.imageKey ||
+    raw.imgKey ||
+    raw.fileKey ||
+    item?.imageUrl ||
+    options.imageUrl ||
+    raw.imgUrl ||
+    (imageMessage ? raw.msgText : '') ||
+    '',
+  )
+}
+
 function getItemText(item) {
-  return item?.message?.[0]?.options?.label || ''
+  if (isImageMessage(item)) return ''
+  return String(getMessageOptions(item).label || '').replace(/\\n/g, '\n')
+}
+
+function isImageUploading(item) {
+  return isImageMessage(item) && item?.uploadStatus === 'uploading'
+}
+
+function isImageFailed(item) {
+  return isImageMessage(item) && item?.uploadStatus === 'failed'
+}
+
+function getItemHtml(item) {
+  const content = getItemText(item)
+  if (!content) return ''
+
+  // liics renders msgText as sanitized HTML and converts escaped newlines to
+  // line breaks. Keep the same behavior for msgType=01 and rich msgType=02.
+  return xss(content.replace(/\\"/g, '"').replace(/\n/g, '<br/>'))
+}
+
+async function previewImage(item) {
+  if (isImageUploading(item) || isImageFailed(item)) return
+
+  const imageKey = getItemImage(item)
+  if (!imageKey) return
+
+  const imageUrl = await imageService.getImageByKey(imageKey)
+  if (typeof imageUrl === 'string' && imageUrl) showImagePreview([imageUrl])
 }
 
 const showTyping = computed(
@@ -38,8 +114,17 @@ function sendText(text) {
 function handleAskClick(item) {
   sendText(item)
 }
-onMounted(async () => {
+
+watch(
+  chatArr,
+  () => {
+    nextTick(() => {
+      const container = mainContainerRef.value
+      if (container) container.scrollTop = container.scrollHeight
     })
+  },
+  { deep: true },
+)
 </script>
 
 <template>
@@ -51,7 +136,25 @@ onMounted(async () => {
       <div class="message-con" v-if="chatArr.length || showTyping">
         <div v-for="(item, index) in chatArr" :key="index"
           :class="['msg-item', item.type === 'user' ? 'from-user' : 'from-bot']">
-          <div class="bubble">{{ getItemText(item) }}</div>
+          <div class="bubble" :class="{ 'image-bubble': isImageMessage(item) }">
+            <template v-if="isImageMessage(item)">
+              <DynamicImage
+                class="message-image"
+                :image-key="getItemImage(item)"
+                alt="聊天图片"
+                :clickable="true"
+                image-style="display: block; width: 100%; height: 100%; object-fit: cover;"
+                @click="previewImage(item)"
+              />
+              <div v-if="isImageUploading(item)" class="upload-loading-icon">
+                <van-loading type="spinner" color="#ffffff" size="16px" />
+              </div>
+              <div v-else-if="isImageFailed(item)" class="upload-loading-icon upload-failed-icon">
+                <van-icon name="warning-o" size="22px" />
+              </div>
+            </template>
+            <span v-else class="message-text" v-html="getItemHtml(item)"></span>
+          </div>
         </div>
         <div class="msg-item from-bot" v-if="showTyping">
           <div class="bubble typing"><span></span><span></span><span></span></div>
@@ -108,6 +211,57 @@ onMounted(async () => {
           letter-spacing: 0rem;
           color: #17204d;
           word-break: break-all;
+
+          .message-text {
+            white-space: normal;
+
+            :deep(p) {
+              margin: 0;
+            }
+          }
+
+          &.image-bubble {
+            // width: 130rem;
+            // height: 130rem;
+            min-width: 30rem;
+            min-height: 30rem;
+            max-width: 130rem;
+            max-height: 130rem;
+            position: relative;
+            background: #f5f5f5;
+            padding: 0;
+            overflow: hidden;
+
+            .message-image {
+              display: block;
+              width: 100%;
+              height: 100%;
+              min-width: 30rem;
+              min-height: 30rem;
+              border-radius: inherit;
+            }
+
+            .upload-loading-icon {
+              position: absolute;
+              inset: 0;
+              z-index: 1;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              color: #ffffff;
+              background: rgba(50, 50, 51, 0.88);
+              border-radius: inherit;
+            }
+
+            .upload-failed-icon {
+              font-size: 22rem;
+            }
+          }
+
+          .message-image {
+            width: 100%;
+            height: 100%;
+          }
         }
       }
 
@@ -118,6 +272,10 @@ onMounted(async () => {
           background: linear-gradient(266deg, #025cea 0%, #3f8cf8 100%);
           color: #ffffff;
           border-radius: 12rem 12rem 4rem 12rem;
+
+          &.image-bubble {
+            border-radius: 16rem;
+          }
         }
       }
 
@@ -128,6 +286,10 @@ onMounted(async () => {
           background: #fcfdfd;
           box-shadow: 0rem 4rem 10rem 0rem #e7effd;
           border-radius: 12rem 12rem 12rem 4rem;
+
+          &.image-bubble {
+            border-radius: 16rem 16rem 16rem 2rem;
+          }
         }
       }
 

src/components/history-content.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref, inject, onMounted } from 'vue'
+import { showImagePreview } from 'vant'
 import faceJSON from '@/mock/face.json'
 import DynamicImage from '@/components/common/DynamicImage.vue'
 import TextContent from '@/components/text-content.vue'
@@ -14,6 +15,7 @@ import BusinessHandle from '@/components/business-handle.vue'
 import EditAddress from '@/components/edit-address.vue'
 import PolicyList from '@/components/policyList.vue'
 import XuqiPolicyList from '@/components/xuqiPolicyList.vue'
+import imageService from '@/utils/imageService'
 
 const props = defineProps({
   historylist: { type: Array, default: () => [] },
@@ -85,13 +87,42 @@ function replaceALabel(str) {
   return str.replace(/<a /g, '<a class="content-link" ')
 }
 
+function isImageMessage(item) {
+  const reqAndResType = String(item?.reqAndResType || '')
+  const msgType = String(item?.msgType || '')
+  const fromFlag = String(item?.fromFlag || '')
+  return (
+    (reqAndResType === '2' && (fromFlag === '1' || msgType === '02')) ||
+    (reqAndResType === '08' && msgType === '02') ||
+    Boolean(item?.imgUrl || item?.imgKey || item?.fileKey || item?.imageUrl)
+  )
+}
+
+function getImageKey(item) {
+  return String(
+    item?.imgUrl ||
+      item?.imgKey ||
+      item?.fileKey ||
+      item?.imageUrl ||
+      (isImageMessage(item) ? item?.msgText : '') ||
+      '',
+  )
+}
+
+async function previewImage(item) {
+  const key = getImageKey(item)
+  if (!key) return
+  const imageUrl = await imageService.getImageByKey(key)
+  if (typeof imageUrl === 'string' && imageUrl) showImagePreview([imageUrl])
+}
+
 onMounted(() => { processedEmoji() })
 </script>
 
 <template>
   <div class="history-content-box" :class="elder ? 'elder-wrapper' : ''" v-if="historylist && historylist.length > 0">
     <div class="chat-content-box-item" v-for="(item, index) in historylist" :key="index"
-      v-show="item.msgText && item.msgText != 'null' || item.cmd === 'ServiceSessionOpenedEvent'">
+      v-show="(item.msgText && item.msgText != 'null') || isImageMessage(item) || item.cmd === 'ServiceSessionOpenedEvent'">
       <div class="time-show" v-if="showTimeLabel(item)">
         <span class="session-tips">{{ item.timestamp | FormatDate('MM月dd日 hh:mm') }}</span>
       </div>
@@ -100,9 +131,13 @@ onMounted(() => { processedEmoji() })
       <!-- 右边用户消息 -->
       <div class="chat-content-list" v-if="item.fromFlag == '1'">
         <div class="chat-content-txt">
-          <div class="chat-txt-content" v-if="item.msgText.indexOf('xss') > -1 || item.msgText.indexOf('i0.a') > -1"
+          <DynamicImage v-if="isImageMessage(item)" class="history-message-image" :image-key="getImageKey(item)"
-            v-text="replaceBrEmoticon(item.msgText, item)"></div>
+            alt="聊天图片" :clickable="true" @click="previewImage(item)" />
+          <template v-else-if="item.msgText">
+            <div class="chat-txt-content" v-if="String(item.msgText).indexOf('xss') > -1 || String(item.msgText).indexOf('i0.a') > -1"
+              v-text="replaceBrEmoticon(String(item.msgText), item)"></div>
             <div class="chat-txt-content" v-else v-html="replaceBrEmoticon(item.msgText, item)"></div>
+          </template>
         </div>
       </div>
 
@@ -115,7 +150,9 @@ onMounted(() => { processedEmoji() })
           </div>
           <div class="chat-items">
             <div class="content-left-main">
-              <div v-if="item.msgText" v-html="replacementRagEmoticonWithLink(item.msgText, item.qaId)"></div>
+              <DynamicImage v-if="isImageMessage(item)" class="history-message-image history-message-image-left"
+                :image-key="getImageKey(item)" alt="聊天图片" :clickable="true" @click="previewImage(item)" />
+              <div v-else-if="item.msgText" v-html="replacementRagEmoticonWithLink(item.msgText, item.qaId)"></div>
             </div>
           </div>
         </div>
@@ -163,6 +200,17 @@ onMounted(() => { processedEmoji() })
   max-width: 75%;
 }
 
+.history-message-image {
+  display: block;
+  width: 130px;
+  min-width: 30px;
+  height: 130px;
+  min-height: 30px;
+  border-radius: 16px 16px 4px 16px;
+  overflow: hidden;
+  cursor: pointer;
+}
+
 .chat-room-cont {
   display: flex;
   margin-bottom: 12px;
@@ -202,4 +250,8 @@ onMounted(() => { processedEmoji() })
   border-radius: 4px 16px 16px 16px;
   padding: 14px;
 }
+
+.history-message-image-left {
+  border-radius: 4px 16px 16px 16px;
+}
 </style>

src/components/history-main.vue

@@ -50,7 +50,7 @@
 
 <script setup>
 import { ref, computed, inject, onMounted, onActivated, nextTick, watch } from 'vue'
-import { showToast, Popup, DatePicker } from 'vant'
+import { showToast } from 'vant'
 import _ from 'lodash'
 import MeScroll from 'mescroll.js'
 import 'mescroll.js/mescroll.min.css'
@@ -59,8 +59,14 @@ import GeriatricDiscourse from '@/components/geriatric-discourse.vue'
 import NavBar from '@/components/nav-bar.vue'
 import { getHiddenProp, getVisibilityState } from '@/utils'
 import Utils from '@/utils/utils.js'
-import { channel95500, SJHLCmdList } from '@/utils/constant'
+import { SJHLCmdList } from '@/utils/constant'
-import { Post } from '@/utils/https'
+import { getHistoryChatInfo } from '@/utils/conversationApi'
+
+const props = defineProps({
+  tokenExist: { type: Boolean, default: false },
+  isWX: { type: Boolean, default: false },
+  lostChatInfoNum: { type: [Number, String], default: null },
+})
 
 const store = inject('appStore', null)
 const userId = inject('userId', ref(''))
@@ -80,10 +86,10 @@ const minDate = computed(() => {
 
 const maxDate = computed(() => new Date())
 
-const isWX = ref(false)
+const isWX = ref(props.isWX)
-const lostChatInfoNum = ref(null)
+const lostChatInfoNum = ref(props.lostChatInfoNum)
-const tokenExist = ref(false)
+const tokenExist = computed(() => props.tokenExist || Boolean(store?.token))
-const startDate = ref(null)
+const startDate = ref(new Date(new Date().getFullYear(), new Date().getMonth(), 1))
 const pageNum = ref(1)
 const pageSize = ref(10)
 const nolist = ref(false)
@@ -97,16 +103,15 @@ const appContent = ref(null)
 
 onMounted(() => {
   const urlParams = Utils.getUrlParams()
-  isWX.value = urlParams.isWX == 'false' ? false : true
+  isWX.value = urlParams.isWX === undefined ? isWX.value : urlParams.isWX !== 'false'
-  tokenExist.value = urlParams.tokenExist == 'true' ? true : false
+  lostChatInfoNum.value = urlParams.lostChatInfoNum || lostChatInfoNum.value
-  lostChatInfoNum.value = urlParams.lostChatInfoNum
 
   nextTick(() => {
     initMescroll()
-    store?.commit?.(
+    store?.setMescrollContent?.(appContent.value?.querySelector?.('#mescroll') || appContent.value)
-      'set_mescrollContent',
+    if (tokenExist.value) {
-      appContent.value?.querySelector?.('#mescroll') || appContent.value
+      mescroll.value?.triggerDownScroll?.()
-    )
+    }
 
     var visProp = getHiddenProp()
     if (visProp) {
@@ -119,7 +124,7 @@ onMounted(() => {
             nolistTxt.value = ''
             pageNum.value = 1
             historylist.value = []
-            store?.commit?.('delall_chatList')
+            store?.delAllChatList?.()
             mescroll.value?.triggerDownScroll?.()
           }
         },
@@ -131,7 +136,7 @@ onMounted(() => {
 
 onActivated(() => {
   nextTick(() => {
-    window.scrollTo(0, store?.state?.mescrollContent || 0)
+    window.scrollTo(0, store?.mescrollContent || 0)
   })
 })
 
@@ -169,14 +174,14 @@ function upCallback(mescrollIns) {
   }
 
   setTimeout(() => {
-    Post('history/chatInfo', params)
+    getHistoryChatInfo(params)
       .then((response) => {
-        if (response.code && response.code != 0) {
+        if (response?.code && response.code != 0) {
-          showToast(response.msg)
+          showToast(response.msg || '历史记录加载失败')
           return
         }
-        if (response.data.list.length > 0) {
+        const dataList = Array.isArray(response?.data?.list) ? response.data.list : []
-          var dataList = response.data.list
+        if (dataList.length > 0) {
           pageNum.value++
           mescroll.value?.endSuccess?.()
 
@@ -202,7 +207,7 @@ function upCallback(mescrollIns) {
             if (SJHLCmdList.includes(item.cmd) && !_.isEmpty(item.VIEW_ID)) {
               item.msgText = ''
             }
-            if (item.fromFlag === 1 && item.msgText.indexOf('&') !== -1) {
+            if (item.fromFlag === 1 && typeof item.msgText === 'string' && item.msgText.indexOf('&') !== -1) {
               item.msgText = item.msgText.replace(/&/g, '')
             }
           })
@@ -214,10 +219,12 @@ function upCallback(mescrollIns) {
               }, 150)
             } else if (topMsg) {
               let view = document.querySelector('#' + topMsg.VIEW_ID)
+              if (view) {
                 setTimeout(() => {
                   mescroll.value?.scrollTo?.(view.offsetTop - 20, 0)
                 }, 350)
               }
+            }
           })
         } else {
           mescroll.value?.endErr?.()
@@ -227,7 +234,7 @@ function upCallback(mescrollIns) {
         }
       })
       .catch(() => {
-        pageNum.value--
+        pageNum.value = Math.max(1, pageNum.value - 1)
         mescroll.value?.endErr?.()
         nolist.value = true
       })
@@ -248,7 +255,7 @@ function onconfirm(picker) {
 </script>
 
 <style scoped>
-@import '~@/assets/style/chat.css';
+@import '@/assets/style/chat.css';
 
 .historylist-box {
   font-size: 16px;

src/components/upload-image.vue

@@ -115,7 +115,7 @@ async function handleFileChange(event) {
     formData.append('msgSource', String(unref(manualService) || '1'))
     formData.append('timestamp', String(Date.now()))
 
-    const response = await upLoadImgHttp('FileUpLoad/uploadImgAndVideo', formData)
+    const response = await upLoadImgHttp('upload/image', formData)
     if (isBusinessFailure(response)) {
       throw new Error(response?.msg || '图片发送失败')
     }

src/router/index.js

@@ -6,6 +6,12 @@ const router = createRouter({
   routes: [
     { path: '/', redirect: '/chat' },
     { path: '/chat', name: 'chat', component: () => import('../views/chat.vue') },
+    {
+      path: '/history',
+      name: 'history',
+      component: () => import('../views/history.vue'),
+      meta: { title: '洋洋客服-历史记录查询' },
+    },
     // { path: '/uploadPage', name: 'uploadPage', component: () => import('../views/uploadPage.vue') },
     // { path: '/claimPage', name: 'claimPage', component: () => import('../views/claimPage/index.vue'), },
     // { path: '/outView', name: 'outView', component: () => import('../views/outView.vue') },

src/store/app.js

@@ -371,6 +371,64 @@ export const useAppStore = defineStore('app', () => {
     )
   }
 
+  function getConversationImageSource(payload) {
+    if (!payload || typeof payload !== 'object') return ''
+
+    const options = payload.message?.[0]?.options || {}
+    const reqAndResType = String(payload.reqAndResType || '')
+    const msgType = String(payload.msgType || '')
+    const fromFlag = String(payload.fromFlag || '')
+    const hasExplicitImageField = Boolean(
+      payload.imgUrl || payload.imgKey || payload.fileKey ||
+      (payload.imageUrl && !payload.msgText),
+    )
+    const isProtocolImage =
+      (reqAndResType === '2' && (fromFlag === '1' || msgType === '02')) ||
+      (reqAndResType === '08' && msgType === '02')
+    const isImageMessage =
+      payload.message?.[0]?.type === 'image' ||
+      isProtocolImage ||
+      hasExplicitImageField
+
+    if (!isImageMessage) {
+      return payload.imageUrl || options.imageUrl || ''
+    }
+
+    // liics may return an image URL/key in any of these fields. For the
+    // legacy reqAndResType=2 response, msgText is the image key.
+    return (
+      payload.imageUrl ||
+      payload.imgUrl ||
+      payload.imgKey ||
+      payload.fileKey ||
+      options.imageUrl ||
+      options.imageKey ||
+      payload.msgText ||
+      ''
+    )
+  }
+
+  function isConversationImage(payload, imageUrl) {
+    if (!payload || typeof payload !== 'object') return false
+
+    const reqAndResType = String(payload.reqAndResType || '')
+    const msgType = String(payload.msgType || '')
+    const fromFlag = String(payload.fromFlag || '')
+    const isProtocolImage =
+      (reqAndResType === '2' && (fromFlag === '1' || msgType === '02')) ||
+      (reqAndResType === '08' && msgType === '02')
+    return Boolean(
+      imageUrl && (
+        payload.message?.[0]?.type === 'image' ||
+        isProtocolImage ||
+        payload.imgUrl ||
+        payload.imgKey ||
+        payload.fileKey ||
+        (payload.imageUrl && !payload.msgText)
+      ),
+    )
+  }
+
   // liics 的 qaChat 使用 msgText/fromFlag，chat-new 使用 message/type。
   // 在 store 边界统一转换，旧聊天组件继续读取 chatList，新页面读取 chatArr。
   function pushConversationMessage(payload, fallbackType = 'bot') {
@@ -381,9 +439,8 @@ export const useAppStore = defineStore('app', () => {
       if (item == null) return
 
       const content = getConversationMessageText(item)
-      const imageUrl = typeof item === 'object'
+      const imageUrl = getConversationImageSource(item)
-        ? item.imageUrl || item.imgUrl || item?.message?.[0]?.options?.imageUrl || ''
+      const isImage = isConversationImage(item, imageUrl)
-        : ''
       if (!content && !imageUrl) return
 
       const fromFlag = typeof item === 'object' ? String(item.fromFlag || '') : ''
@@ -392,16 +449,18 @@ export const useAppStore = defineStore('app', () => {
         type: messageType,
         system: item?.system || 'LIICS',
         isSendSuccess: item?.isSendSuccess !== false,
-        imageUrl,
+        imageUrl: isImage ? imageUrl : '',
+        imageKey: isImage ? imageUrl : '',
         raw: item,
         message: [
           {
             value: '',
             param: '',
-            type: imageUrl ? 'image' : 'text',
+            type: isImage ? 'image' : 'text',
             options: {
-              label: content || '[图片]',
+              label: isImage ? '[图片]' : content,
-              imageUrl,
+              imageUrl: isImage ? imageUrl : '',
+              imageKey: isImage ? imageUrl : '',
               readOnly: messageType !== 'user',
               placeholder: '',
             },
@@ -428,6 +487,7 @@ export const useAppStore = defineStore('app', () => {
       isSendSuccess: true,
       uploadStatus: 'uploading',
       imageUrl,
+      imageKey: '',
       fileName,
       message: [
         {
@@ -437,6 +497,7 @@ export const useAppStore = defineStore('app', () => {
           options: {
             label: '[图片]',
             imageUrl,
+            imageKey: '',
             readOnly: true,
             placeholder: '',
           },
@@ -458,6 +519,8 @@ export const useAppStore = defineStore('app', () => {
 
     const options = message.message?.[0]?.options
     if (options && payload.imageUrl) options.imageUrl = payload.imageUrl
+    if (options && payload.imageKey) options.imageKey = payload.imageKey
+    if (payload.imageKey) message.imageKey = payload.imageKey
   }
 
   // —— 消息发送状态 ——

src/utils/conversationApi.js

@@ -11,6 +11,8 @@ export const sendVoiceMessage = (payload) => postConversation('upload/hxVoice',
 
 export const uploadConversationImage = (formData) => upLoadImgHttp('upload/image', formData)
 
+export const getHistoryChatInfo = (params = {}) => postConversation('history/chatInfo', params)
+
 export const connectHumanService = (payload) => postConversation('user/connectToEasemob', payload)
 
 export const updateReadMessages = (payload) => postConversation('HumanChat/msgCallBack', payload)

src/utils/index.js

@@ -504,9 +504,9 @@ export function jumpOpenWeb(type, url, urlType) {
       query: {
         ht: useAppStore().source,
         openid: openid,
-        tokenExist: useAppStore().tokenExist,
+        tokenExist: Boolean(useAppStore().token),
-        isWX: useAppStore().isWX,
+        isWX: utils.isWeiXin(),
-        lostChatInfoNum: useAppStore().lostChatInfoNum,
+        lostChatInfoNum: useAppStore().isLostMessage || 0,
         param: utils.getUrlParams().param
       },
     });

src/views/history.vue

@@ -0,0 +1,31 @@
+<template>
+  <history-main
+    :tokenExist="tokenExist"
+    :isWX="isWX"
+    :lostChatInfoNum="lostChatInfoNum"
+  />
+</template>
+
+<script setup>
+import { computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import HistoryMain from '@/components/history-main.vue'
+import { useAppStore } from '@/store/app.js'
+import Utils from '@/utils/utils.js'
+
+const route = useRoute()
+const store = useAppStore()
+
+const tokenExist = computed(() => Boolean(store.token || route.query.tokenExist === 'true'))
+const isWX = computed(() =>
+  route.query.isWX === undefined ? Utils.isWeiXin() : route.query.isWX !== 'false',
+)
+const lostChatInfoNum = computed(() => route.query.lostChatInfoNum || 0)
+
+onMounted(() => {
+  if (tokenExist.value && !store.headerAvatar?.robotUrl) {
+    const request = store.getHeaderUrl?.()
+    request?.catch((error) => console.warn('获取历史记录头像失败:', error))
+  }
+})
+</script>