geekai/web/src/views/mobile/ChatExport.vue

<template>
  <div class="chat-export-mobile">
    <div class="chat-box">
      <van-nav-bar left-arrow left-text="返回" @click-left="router.back()">
        <template #title>
          <van-dropdown-menu>
            <van-dropdown-item :title="title">
              <van-cell center title="角色"> {{ role }}</van-cell>
              <van-cell center title="模型">{{ model }}</van-cell>
            </van-dropdown-item>
          </van-dropdown-menu>
        </template>
      </van-nav-bar>

      <div class="chat-list-wrapper">
        <div id="message-list-box" class="message-list-box">
          <van-list
            v-model:error="error"
            :finished="finished"
            error-text="请求失败，点击重新加载"
            @load="onLoad"
          >
            <van-cell v-for="item in chatData" :key="item" :border="false" class="message-line">
              <chat-prompt
                v-if="item.type === 'prompt'"
                :content="item.content"
                :created-at="dateFormat(item['created_at'])"
                :icon="item.icon"
                :tokens="item['tokens']"
              />
              <chat-reply
                v-else-if="item.type === 'reply'"
                :content="item.content"
                :created-at="dateFormat(item['created_at'])"
                :icon="item.icon"
                :org-content="item.orgContent"
                :tokens="item['tokens']"
              />
            </van-cell>
          </van-list>
        </div>
      </div>
    </div>
    <!-- end chat box -->
  </div>
</template>
<script setup>
import ChatPrompt from '@/components/mobile/ChatPrompt.vue'
import ChatReply from '@/components/mobile/ChatReply.vue'
import { httpGet } from '@/utils/http'
import { dateFormat, processContent } from '@/utils/libs'
import hl from 'highlight.js'
import 'highlight.js/styles/a11y-dark.css'
import MarkdownIt from 'markdown-it'
import mathjaxPlugin from 'markdown-it-mathjax3'
import { showFailToast } from 'vant'
import { nextTick, ref } from 'vue'
import { useRouter } from 'vue-router'

const chatData = ref([])
const router = useRouter()
const chatId = router.currentRoute.value.query['chat_id']
const title = ref('')
const role = ref('')
const model = ref('')
const finished = ref(false)
const error = ref(false)

const md = new MarkdownIt({
  breaks: true,
  html: true,
  linkify: true,
  typographer: true,
  highlight: function (str, lang) {
    const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000)
    // 显示复制代码按钮
    const copyBtn = `<span class="copy-code-mobile" data-clipboard-action="copy" data-clipboard-target="#copy-target-${codeIndex}">复制</span>
<textarea style="position: absolute;top: -9999px;left: -9999px;z-index: -9999;" id="copy-target-${codeIndex}">${str.replace(
      /<\/textarea>/g,
      '&lt;/textarea>'
    )}</textarea>`
    if (lang && hl.getLanguage(lang)) {
      const langHtml = `<span class="lang-name">${lang}</span>`
      // 处理代码高亮
      const preCode = hl.highlight(str, { language: lang }).value
      // 将代码包裹在 pre 中
      return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code>${copyBtn} ${langHtml}</pre>`
    }

    // 处理代码高亮
    const preCode = md.utils.escapeHtml(str)
    // 将代码包裹在 pre 中
    return `<pre class="code-container">${code}${copyBtn}</pre>`
  },
})
md.use(mathjaxPlugin)

const onLoad = () => {
  httpGet('/api/chat/history?chat_id=' + chatId)
    .then((res) => {
      // 加载状态结束
      finished.value = true
      const data = res.data
      if (data && data.length > 0) {
        for (let i = 0; i < data.length; i++) {
          if (data[i].type === 'prompt') {
            chatData.value.push(data[i])
            continue
          }

          data[i].orgContent = data[i].content
          data[i].content = md.render(processContent(data[i].content))
          chatData.value.push(data[i])
        }

        nextTick(() => {
          hl.configure({ ignoreUnescapedHTML: true })
          const blocks = document.querySelector('#message-list-box').querySelectorAll('pre code')
          blocks.forEach((block) => {
            hl.highlightElement(block)
          })
        })
      }
    })
    .catch(() => {
      error.value = true
    })

  httpGet(`/api/chat/detail?chat_id=${chatId}`)
    .then((res) => {
      title.value = res.data.title
      model.value = res.data.model
      role.value = res.data.role_name
    })
    .catch((e) => {
      showFailToast('加载对话失败：' + e.message)
    })
}
</script>
<style scoped lang="stylus">
.chat-export-mobile {
  height 100vh

  .van-nav-bar {
    position static
  }

  .chat-box {
    font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
    background #F5F5F5;

    .chat-list-wrapper {
      padding 10px 0 10px 0

      .message-list-box {
        background #F5F5F5;
        padding-bottom: 50px

        .van-cell {
          background none
        }
      }
    }

    .van-nav-bar__title {
      .van-dropdown-menu__title {
        margin-right 10px
      }

      .van-cell__title {
        text-align left
      }
    }

    .van-nav-bar__right {
      .van-icon {
        font-size 20px
      }
    }
  }
}
</style>