剩余操作

wujingjing

2025-01-19 6d279e10194646139fb63bf8fddded84dfbc4777

 src/components/chat/smallChat/ChatInput.vue

@@ -1,7 +1,15 @@
<template>
   <div class="playInput !w-full hl_input rounded-[22px] input-border input-shadow">
      <div class="set-input">
         <!-- @input="inputText" -->
      <div class="set-input flex items-center">
         <!-- 添加历史记录按钮 -->
         <el-tooltip placement="top" content="历史记录">
            <div class="history-btn ml-2 mr-2 cursor-pointer text-gray-400 hover:text-gray-600" @click="toggleHistory">
               <el-icon :class="{ 'text-blue-500': showHistory }" class="text-[27px]">
                  <Clock />
               </el-icon>
            </div>
         </el-tooltip>

         <el-input
            ref="inputRef"
            class="question-input relative align-bottom set-inputAnswer"
@@ -12,9 +20,9 @@
            v-elInputFocus
            show-word-limit
            v-model="inputText"
            placeholder="在这里输入您的问题开始和AI对话"
            placeholder="请输入操作"
            clearable
            @keyup.enter="emits('sendClick')"
            @keydown.enter="handleEnterPress"
         >
         </el-input>
      </div>
@@ -53,32 +61,63 @@
</template>

<script setup lang="ts" name="ChatInput">
import { onMounted } from 'vue';
import { Logger } from '/@/model/logger/Logger';
import { agentStreamByPost } from '/@/api/ai/chat';
import { Clock } from '@element-plus/icons-vue';

const inputText = defineModel('modelValue', {
   type: String,
   default: '',
});

const props = defineProps({
   isTalking: {
      type: Boolean,
      default: false,
   },
   showHistory: {
      type: Boolean,
      default: false,
   },
});
const emits = defineEmits(['sendClick', 'stopGenClick']);

const emits = defineEmits(['sendClick', 'stopGenClick', 'toggleHistory']);

// 处理回车事件
const handleEnterPress = (e: KeyboardEvent) => {
   // 如果按住了 shift 键，则允许换行
   if (e.shiftKey) {
      return;
   }
   // 否则发送消息
   e.preventDefault(); // 阻止默认的换行行为
   if (inputText.value.trim()) {
      emits('sendClick');
   }
};

const clearTextarea = () => {
   inputText.value = '';
};


// 处理历史记录显示/隐藏
const toggleHistory = () => {
   emits('toggleHistory');
};
</script>

<style scoped lang="scss">
@use './chatInput.scss';
.playInput {
   --y-padding: 7px;
   --x-padding: 14px;
}

.history-btn {
   padding: 4px;
   border-radius: 4px;
   transition: all 0.3s;

   &:hover {
      background-color: rgba(0, 0, 0, 0.05);
   }
}
</style>