AIxiaocaishen/src/components/deepNine/ThinkingGif.vue

<template>
  <div class="thinking-gif-container">
    <img
      v-if="gifSrc"
      :src="gifSrc"
      alt="思考过程"
      class="thinking-gif"
    />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
// 导入思考过程GIF
import thinkingGif from "@/assets/img/gif/思考.gif";
import analyzeGif from "@/assets/img/gif/解析.gif";
import generateGif from "@/assets/img/gif/生成.gif";

const props = defineProps({
  type: {
    type: String,
    default: 'thinking'
  }
});

const gifSrc = computed(() => {
  switch(props.type) {
    case 'thinking':
      return thinkingGif;
    case 'analyze':
      return analyzeGif;
    case 'generate':
      return generateGif;
    default:
      return thinkingGif;
  }
});
</script>

<style scoped>
.thinking-gif-container {
  display: flex;
  justify-content: center;
  margin: 10px 0;
}

.thinking-gif {
  max-width: 100%;
  height: auto;
}
</style>