光标快速输入键盘上下箭头设置为快捷语

yangyin

2024-11-04 5e8b3e27c4a847be602e97bcd586ab6627108484

光标快速输入键盘上下箭头设置为快捷语

 src/components/chat/Chat.vue

@@ -151,6 +151,8 @@
                    :isHome="false"
                    v-model="messageContent.values"
                    @sendClick="sendClick"
                    @showUpChatClick="showUpChatClick"
                    @showDownChatClick="showDownChatClick"
                    :style="{ width: chatWidth }"
                ></PlayBar>
            </div>
@@ -468,7 +470,34 @@
    );
};
//#endregion

//#region ====================== 光标输入上下箭头显示历史消息 ======================
const currentIndex = ref(null);
const history_data = computed(() => {
    return computedMessageList.value.filter((item) => item.role === RoleEnum.user);
});
//显示上一条消息
const showUpChatClick = () => {
    if (computedMessageList.value.length === 0) return;
    if (currentIndex.value === null) {
        currentIndex.value = history_data.value.length - 1;
    } else {
        currentIndex.value = (currentIndex.value + history_data.value.length - 1) % history_data.value.length;
    }
    messageContent.value.values = history_data.value[currentIndex.value].content.values;
    scrollToBottom();
};
//显示下一条消息
const showDownChatClick = () => {
    if (computedMessageList.value.length === 0) return;
    if (currentIndex.value === null) {
        currentIndex.value = 0;
    } else {
        currentIndex.value = (currentIndex.value + 1) % history_data.value.length;
    }
    messageContent.value.values = history_data.value[currentIndex.value].content.values;
    scrollToBottom();
};
//#endregion
const {
    copyClick,
    likeClick,

 src/components/chat/components/playBar/PlayBar.vue

@@ -132,7 +132,7 @@
import VoicePage from './voicePage/VoicePage.vue';
import { getMetricsNames, querySimilarityHistory } from '/@/api/ai/chat';
import { activeGroupType, groupTypeList, groupTypeMapIcon } from '/@/stores/chatRoom';
const emits = defineEmits(['sendClick']);
const emits = defineEmits(['sendClick', 'showUpChatClick', 'showDownChatClick']);
const props = defineProps(['isTalking', 'isHome']);
const voicePageIsShow = defineModel('voicePageIsShow', {
    type: Boolean,
@@ -157,7 +157,9 @@
    if (props.isTalking) return;
    const isEnterInput = !e.shiftKey && e.key == 'Enter';
    const isDigitalInput = e.ctrlKey && e.code.startsWith('Digit') && tipIsShow.value;
    if (isEnterInput || isDigitalInput) {
    const arrowUp = e.key === 'ArrowUp';
    const arrowDown = e.key === 'ArrowDown';
    if (isEnterInput || isDigitalInput || arrowUp || arrowDown) {
        e.cancelBubble = true; //ie阻止冒泡行为
        e.stopPropagation(); //Firefox阻止冒泡行为
        e.preventDefault(); //取消事件的默认动作*换行
@@ -171,6 +173,10 @@
                inputValue.value = mapValue;
                triggerShow.value = false;
            }
        } else if (arrowUp) {
            emits('showUpChatClick');
        } else if (arrowDown) {
            emits('showDownChatClick');
        }
    }
};