smartai2dian0/src/modules/conversation-content/DialogCode.vue

<template>
  <div :class="container_klass">
    <p class="dialog-code-footer-title">{{ cd_title }}：</p>
    <div v-html="code" class="dialog-code-content"></div>
  </div>
</template>
<script setup>
import { onMounted, computed } from 'vue';

// import { applyHighLight } from '../conversation-dialog/format-code-string';

/**
 * 此组件展示对话中的代码
 * 例如python代码、SQL代码
 */
const props = defineProps({
  type: String, // 代码类型：python/sql
  code: String, // 代码内容
  index: Number // 对应了序号
});

/**
 * 容器class
 */
const container_klass = computed(() => {
  return `code-display-${props.type}-${props.index}`;
});

/**
 * 代码类型展示
 */
const cd_title = computed(() => {
  if (props.type === 'python') {
    return 'Python';
  }

  if (props.type === 'sql') {
    return 'SQL';
  }

  return '';
});

onMounted(() => {
  // applyHighLight(`.${container_klass.value}`);
});
</script>

<style scoped>
.dialog-code-footer {
  border-radius: 12px;
  font-size: 14px;
  background-color: #32333c;
  color: #bcbdc3;
  margin: 16px 0;
  margin-left: 50px;
}

.dialog-code-footer-title {
  font-size: 16px;
  font-weight: 500;

  width: 100%;
  color: #3d3f3f;
}

.dialog-code-content {
  margin-top: 5px;
  margin-bottom: 5px;
}
</style>