slibra-module-web/src/components/Chat/ChatAnswer.vue

<script setup>
import { computed, ref } from 'vue';
import MarkdownIt from 'markdown-it';
import hljs from 'highlight.js';
import mila from 'markdown-it-link-attributes';
import mdKatex from '@traptitech/markdown-it-katex';
import { SvgIcon } from '@/components';

const props = defineProps({
  content: {
    type: String,
    default: ''
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const highlightBlock = (str, lang) => {
  return `<pre class="code-block-wrapper"><div class="code-block-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">${t('chat.copyCode')}</span></div><code class="hljs code-block-body ${lang}">${str}</code></pre>`
}

const mdi = new MarkdownIt({
  html: true,
  linkify: true,     // 将类似 URL 的文本自动转换为链接。
  // breaks: true,
  typographer: true,
  highlight(code, language) {
    const validLang = !!(language && hljs.getLanguage(language))
    if (validLang) {
      const lang = language ?? ''
      return highlightBlock(hljs.highlight(code, { language: lang }).value, lang)
    }
    return highlightBlock(hljs.highlightAuto(code).value, '')
  },
})

mdi.use(mila, { attrs: { target: '_blank', rel: 'noopener' } })
mdi.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' })

const text = computed(() => {
  const value = props.content ?? ""
  if (!props.asRawText)
    return mdi.render(value)
  return value
})

</script>

<template>
  <div class="answer-inner">
    <div class="answer-card">
      <div class="chat-answer_icon relative">
        <SvgIcon name="common-logo" class="chat-logo" size="30" :style="{ scale: loading ? 0 : 1 }"/>
        <div style="color: #2454FF" class="la-ball-circus la-dark la-sm" v-show="loading">
          <div v-for="item in 5" :key="item"></div>
        </div>
      </div>
      <div class="flex-1 pt-[4px] ml-[16px] text-[15px] leading-[24px]">
        <p class="font-bold text-[#1A2029]" v-if="loading">内容生成中...</p>
        <p class="flex-1 pt-[6px] ml-[16px] text-[15px] leading-[24px]" v-html="text" v-else></p>
      </div>
    </div>
    <ul class="answer-btn-group">
      <li class="btn">
        <SvgIcon name="chat-icon-copy" size="16" />
      </li>
      <li class="line"></li>
      <li class="btn">
        <SvgIcon name="chat-icon-yes" size="16" />
      </li>
      <li class="line"></li>
      <li class="btn">
        <SvgIcon name="chat-icon-no" size="16" />
      </li>
    </ul>
  </div>

</template>


<style lang="scss">
.chat-logo {
  position: absolute;
  transition: all 1s;
}
.answer-inner {
  margin-bottom: 20px;

  .answer-card {
    @include flex(x, start, start);
    padding: 20px;
    border-radius: 8px;
    background: #fff;
  }

  .answer-btn-group {
    @include flex(x, center, end);
    padding-top: 6px;

    .btn {
      @include flex(x, center, center);
      @include layout(28px, 28px, 4px);
      color: #89909B;
      cursor: pointer;

      &:hover {
        background: #DBEFFF;
        color: #2454FF;
      }
    }

    .line {
      @include layout(1px, 12px, 0);
      margin: 0 5px;
      background: #D3D0E1;
    }
  }
}
</style>