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

<template>
  <div class="dialog-chat-answer-content" :style="custom_style">
    <div v-if="is_loading">
      <a-spin></a-spin>
    </div>

    <div v-if="!is_loading" v-html="content" />

    <slot></slot>
  </div>
</template>

<script setup>
import { computed } from 'vue';

// 接收markdown数据，进行一些转换
const props = defineProps({
  /**
   * 内容类型
   */
  type: String,
  /**
   * 文本内容
   */
  content: String,

  /**
   * 状态值
   */
  is_loading: Boolean,

  /**
   * 内容区域最大宽度
   */
  max_width: Number
});

const custom_style = computed(() => {
  if (props.max_width) {
    return `max-width: ${props.max_width}px;`;
  } else {
    ('');
  }
});
</script>

<style lang="css" scoped>
.dialog-chat-answer-content {
  background-color: var(--color-bg-1);
  color: var(--color-text-1);
  border-radius: 10px;
  padding: 18px;
  /* box-shadow: 0 0 5px #dedede; */
  box-shadow: 0 0 5px var(--color-text-4);
}

.dialog-chat-answer-content code {
  overflow-x: auto;
}
</style>