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

<script setup>
import { computed, unref } from 'vue';
import { useMessage } from 'naive-ui';
import { useClipboard } from '@vueuse/core'
import MarkdownIt from 'markdown-it';
import hljs from 'highlight.js';
import mila from 'markdown-it-link-attributes';
import mdKatex from 'markdown-it-katex';

import { SvgIcon } from '@/components';
import { chatApi } from "@/api/chat"


const props = defineProps({
  id: {
    type: [String, Number],
    default: ''
  },
  content: {
    type: String,
    default: ''
  },
  loading: {
    type: Boolean,
    default: false
  },
  delayLoading: {
    type: Boolean,
    default: false
  },
  isSatisfied: {
    type: Number,
    default: 2
  },
  toggleVisibleIcons: {
    type: Boolean,
    default: false
  },
  loadingText: {
    type: String,
    default: "内容生成中..."
  }
})

</script>

<template>
  <div class="answer-inner">
    <div :class="[ 'answer-card', 'px-[20px]', 'py-[20px]']">

      <div class="chat-answer_icon relative flex-shrink-0">
        <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 flex-shrink-0" v-show="loading">
          <div v-for="item in 5" :key="item"></div>
        </div>
      </div>

      <div class="flex-1 pt-[4px] ml-[16px] text-[15px]">

        <template v-if="loading && delayLoading">
          <p class="font-bold text-[#1A2029] leading-[24px]">{{ loadingText }}</p>
        </template>

        <slot></slot>

        <slot name="text"></slot>

      </div>
    </div>

    <slot name="button"/>
  </div>

</template>

<style lang="scss">
.chat-logo {
  position: absolute;
  transition: all 1s;
}

.answer-inner {
  margin-bottom: 20px;

  .answer-card {
    @include flex(x, start, start);
    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, &_active {
        background: #DBEFFF;
        color: #2454FF;
      }
    }

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