qn-ai-pc/src/components/AppTextarea/index.vue

<!-- 公共输入框组件 -->
<script setup lang="ts">
import { computed, ref } from 'vue'
import { Button, Textarea, message } from 'ant-design-vue'
import { SvgIcon } from '@/components/SvgIcon'
import { useMessageStore } from '@/store/moules/messageStore/index'
import { MessageStatusEnum } from '@/enums/messageEnum'

const props = defineProps({
  placeholder: {
    type: String,
    default: '在此输入你想了解的内容（Shift + Enter = 换行）',
  },
  btnLoading: {
    type: Boolean,
    default: false,
  },
  isStop: {
    type: Boolean,
    default: false,
  },

})
const emit = defineEmits(['pressEnter', 'send', 'stopMessage'])
const messageStore = useMessageStore()
const value = ref('')

const stopShow = computed(() => {
  if (!props.isStop) {
    return false
  }
  if (
    messageStore.getMessageList.length
    && messageStore.getMessageList[messageStore.getMessageList.length - 1].messageStatus === MessageStatusEnum.ACTICON
  ) {
    return true
  }
  else {
    return false
  }
})

function pressEnter(event: KeyboardEvent) {
  if (event.shiftKey) {
    return false
  }

  if (value.value === '') {
    message.warning('请输入内容')
    setTimeout(() => {
      value.value = ''
    }, 0)
    return false
  }
  emit('pressEnter', value.value)
  handeleSend()
}

function handeleSend() {
  emit('send', value.value)
  setTimeout(() => {
    value.value = ''
  }, 0)
}

function stopMessage() {
  emit('stopMessage')
}
</script>

<template>
  <div class="app-textarea absolute right-0 bottom-5 w-full">
    <div class="relative">
      <div
        v-if="stopShow"
        class="stop flex justify-center items-center cursor-pointer"
        @click="stopMessage"
      >
        <SvgIcon class="mr-2" name="stop"></SvgIcon>
        停止回答
      </div>
      <Textarea
        v-model:value="value"
        class="pt-4 pr-34 pb-6 pl-4"
        :placeholder="placeholder"
        :auto-size="{ minRows: 3, maxRows: 8 }"
        @press-enter="pressEnter"
      >
      </Textarea>
      <Button
        class="w-28 absolute right-5 bottom-3"
        type="primary"
        :loading="btnLoading"
        @click="handeleSend"
      >
        发送
      </Button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@include app('textarea') {
  min-height: 108px;
  .stop {
    width: 100px;
    height: 30px;
    border-radius: 20px;
    background-color: #edf3ff;
    position: absolute;
    top: -38px;
    left: calc(50% - 40px);
    z-index: 1;
  }
}
</style>