smartai2dian0/src/modules/conversation-chat/DialogInput.vue

<template>
  <div class="dialog-input">
    <div>
      <a-textarea placeholder="输入文本内容" allow-clear />
    </div>
    <div>
      <div>
        <div>联网查询</div>
      </div>

      <div>
        <div v-if="enable_frequent_question">常用问题定义</div>
        <div v-if="enable_file_upload">文件上传</div>
        <div v-if="enable_voice_recognition">语音识别</div>
        <div @click="handleSubmit">发送</div>
      </div>
    </div>

    <div>文件上传预览区: 当点击文件上传，选择某个文件后，此处需要展示进行预览。</div>
  </div>
</template>

<script setup>
const props = defineProps({
  /**
   * 是否禁用操作
   * 默认 false
   * 当此值为 true 时，此组件的任何功能都不可用
   * 当对话正在进行时，此值应为 true，意味着不允许继续对话
   * 直到一轮对话结束，或者一轮对话终止，此值才应该变为 false
   */
  disabled: {
    type: Boolean,
    default: false,
    required: false
  },
  /**
   * 是否开启文件上传功能
   * 默认 true，即默认开启
   * 当此值为 false 时，该组件将没有文件上传按钮
   */
  enable_file_upload: {
    type: Boolean,
    default: true,
    required: false
  },
  /**
   * 是否开启 常用问题 功能
   * 如果此值为false，则 常用问题 定义功能不可用
   */
  enable_frequent_question: {
    type: Boolean,
    default: true,
    required: false
  },
  /**
   * 是否开启音频识别功能
   * 如果此值为 false，则语音识别功能不可用
   */
  enable_voice_recognition: {
    type: Boolean,
    default: false,
    required: false
  },
  /**
   * 在 enable_file_upload === true 的前提下
   * 文件上传的类型，默认是 *，不限类型
   * 对应html属性 accept
   * 对应 arco.design Upload accept 属性
   * @see https://arco.design/vue/component/upload#API
   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#htmlattrdefaccept
   */
  file_upload_type: {
    type: String,
    default: '*',
    required: false
  },
  /**
   * 在 enable_file_upload === true 的前提下
   * 文件上传的数量限制
   * 默认值为0，表示不限制
   * 对应 arco.design Upload limit 属性
   */
  file_upload_limit: {
    type: Number,
    default: 0,
    required: false
  },
  /**
   * 输入框文本占位提示
   */
  text_placeholder: {
    type: String
  },
  /**
   * 输入的文本长度限制
   * 默认值为0，表示不限制长度
   * 对应 arco.design textarea max-length 属性
   * @see https://arco.design/vue/component/textarea#API
   */
  text_limit: {
    type: Number,
    default: 0,
    required: false
  },
  /**
   * 是否显示字数统计
   * 对应 arco.design textarea show-word-limit
   * @see https://arco.design/vue/component/textarea#API
   */
  show_text_count: {
    type: Boolean,
    default: false,
    required: false
  }
});

const emit = defineEmits(['inputTextChange', 'inputFileChange', 'submit']);

const handleSubmit = () => {
  // 检查是否是禁用状态
  if (props.disabled) {
    return;
  }

  emit('submit');
};
</script>

<style lang="css" scoped>
.dialog-input {
  color: var(--color-text-1);
}
</style>