slibra-module-web/src/components/Chat/ChatText - last.vue

<script setup>
import { computed, onMounted , ref} from 'vue';
import MarkdownIt from 'markdown-it';
import hljs from 'highlight.js';
import mila from 'markdown-it-link-attributes';
import markdownItMath from 'markdown-it-math';
import mdKatex from 'markdown-it-katex';
const formulaContainer  = ref(null);
const props = defineProps({
  content: {
    type: String,
    default: ''
  }
})

const highlightBlock = (str, lang) => {
  return `
  <code class="hljs code-block-body ${lang}">${str}</code>
    `
}

const mdi = new MarkdownIt({
  html: true,
  linkify: true,
  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.renderer.rules.table_open = function (tokens, idx, options, env, self) { return '<div class="custom-table-wrapper"><table>'; };
mdi.renderer.rules.table_close = function () { return '</table></div>'; };

mdi.use(mila, { attrs: { target: '_blank', rel: 'noopener' } });

mdi.use(markdownItMath, {
  inlineOpen: '\\(',
  inlineClose: '\\)',
  blockOpen: '\\[',
  blockClose: '\\]'
});

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
})




const defaultImageRender = mdi.renderer.rules.image;





function modifyImageSrc(src) {
  if (src.startsWith('http')) {
    // 图片是绝对路径，不做修改
    return src;
  } else {
    // 假设所有相对路径图片都需要添加前缀
    return `https://your-cdn.com/images/${src}`;
  }
}

const md = new MarkdownIt();
// 自定义规则以匹配 AA 开头的内容
md.core.ruler.push('custom_aa_rule', function (state) {
  state.tokens.forEach(function (token, index) {
    // console.log( token, index );
    if (token.type === 'inline' && token.content.match(/^AA/)) {
      // 创建一个新的 token 来表示自定义的渲染
      let customToken = new state.Token('custom_aa_open', 'div', 1);
      customToken.block = true;
      customToken.attrs = [['class', 'aa-custom-class']];

      let textToken = new state.Token('text', '', 0);
      textToken.content = token.content;

      let closeToken = new state.Token('custom_aa_close', 'div', -1);
      closeToken.block = true;

      // 插入新 tokens 并移除原始 token
      state.tokens.splice(index, 1, customToken, textToken, closeToken);
    }
  });
});

md.renderer.rules['custom_aa_open'] = function () { return '<div class="aa-custom-class">'; };
md.renderer.rules['custom_aa_close'] = function () { return '</div>'; };
let result = md.render(`臭氧层的形成与耗损是一个涉及化学反应的关键过程，它对于地球生物的生存至关重要。臭氧（O3）主要通过以下两个化学反应来调控其在大气层中的浓度：

1. 形成过程（紫外线催化）：
   在紫外线（UV）的作用下，氧气分子（O2）接受能量（hν，表示光子能量），经历一个激发态的过程，发生以下反应：
   \[
   \mathcal{O}_2 + h\nu \rightarrow O^{\cdot} + O^{\cdot}
   \]
   紧接着，两个单个氧原子（O•）在存在中间物质M（通常为大气中的其他分子如氮气或氢）的情况下，结合生成臭氧分子：
   \[
   O^{\cdot} + O^{\cdot} + M \rightarrow O_3 + M
   \]

2. 耗损过程：
   臭氧在吸收更多紫外线后会发生分解，首先是单线程反应：
   \[
   O_3 + h\nu \rightarrow O_2 + O^{\cdot}
   \]
   而在大气条件下，进一步的反应会导致臭氧分子与一个单个氧原子结合，形成两个氧气分子：
   \[
   O_3 + O^{\cdot} \rightarrow 2O_2
   \]

这两个反应（反应2和3）在平流层中持续循环，它们吸收大量的紫外线辐射，起到了地球生物的天然遮阳伞作用。然而，这个动态平衡一旦被破坏，例如由于人类活动产生的化学物质（如氯氟碳化物CFCs）的排放，臭氧层的稳定性就会受到威胁。

总之，臭氧层的形成与耗损是一个复杂的光化学过程，它在平流层中维持着微妙的平衡，确保地球免受有害紫外线的直接照射。任何影响这个平衡的因素都可能对生态系统产生深远影响。`);

// md.renderer.rules['custom_aa_open'] = function () { return '<div class="aa-custom-class">'; };
// md.renderer.rules['custom_aa_close'] = function () { return '</div>'; };

const img = mdi.render('![](https://image.pollinations.ai/prompt/%E4%B8%80%E5%8F%AA%E7%8C%AB) 这是一只我为你画的猫。![](https://image.pollinations.ai/prompt/%E4%B8%80%E5%8F%AA%E7%8C%AB) 第二只第二只。')


const res123 = mdi.render(`$$P_{待估} = \\frac{1/a}{1/a+1/b+1/c}*P_A+\\frac{1/b}{1/a+1/b+1/c}*P_B+\\frac{1/c}{1/a+1/b+1/c}*P_C$$`)


</script>

<template>
  <div ref="formulaContainer" class="formula-container"></div>
  <div class="markdown-body text-[15px] break-all" v-if="content">
    <!-- <div v-html="result"></div> -->
    <div v-html="text"></div>
  </div>
</template>

<style>
.markdown-body p:last-child {
  margin-bottom: 0;
}

.markdown-body {

  .custom-table-wrapper {
    width: 710px;
    margin-bottom: 16px;
    overflow-x: scroll;

    &::-webkit-scrollbar {
      height: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: #ebf0f9;
    }

    &::-webkit-scrollbar-track {
      background: #f7f8fc;
    }
  }

  p:last-child {
    margin-bottom: 0;
  }

  /* img {
    margin-top: 20px;
  }

  table {

    thead {
      strong {
        font-size: 12px;
      }
    }
  } */
}
</style>