整理 常用语组件

wujingjing

2024-12-31 5809dbeb20d83b30a9d4e5354016e5d56d9a7e6e

 src/components/chat/components/playBar/phrase/CommonPhrases.vue

@@ -1,5 +1,5 @@
<template>
   <div class="container" :class="isHome ? 'top-[100%] mt-[8px]' : 'bottom-[100%] mb-[8px]'">
   <div ref="commonPhrasesRef" class="container" :class="isHome ? 'top-[100%] mt-[8px]' : 'bottom-[100%] mb-[8px]'">
      <div class="container_header">
         <div class="question">常用语</div>
         <span class="ywifont ywicon-guanbi text-[15px] cursor-pointer text-[#767a97]" @click="closeCommonPhrases"></span>
@@ -63,6 +63,7 @@
import { computed, onMounted, reactive, ref } from 'vue';
import { addUserSample, deleteUserSample, listUserSample, updateUserSample } from '/@/api/ai/chat';
import { activeGroupType, activeRoomId, activeSampleId, setRoomConfig } from '/@/stores/chatRoom';
import { onClickOutside } from '@vueuse/core';
const state = reactive({
   useCommonPhrasesDialog: false,
   show_sample_title: false,
@@ -71,7 +72,9 @@
   sample_id: null,
});
const commonPhrases = ref([]);
const props = defineProps(['isHome']);
const props = defineProps({
   isHome: Boolean,
});
const isShow = defineModel('isShow', {
   type: Boolean,
});
@@ -87,7 +90,7 @@
};
//#endregion
//#region ====================== 获取常用语 ======================
const getCommonPhrases = async () => {
const updatePhrase = async () => {
   const res = await listUserSample({
      group_type: activeGroupType.value,
   });
@@ -161,10 +164,11 @@
//#endregion
//#region ====================== 常用语到对话框 ======================
const emits = defineEmits<{
   (event: 'updateCommonChatInput', val): void;
   (event: 'updateInput', val): void;
}>();
const titleClick = (item) => {
   emits('updateCommonChatInput', item.question);
   emits('updateInput', item.question);
   isShow.value = false;
   setRoomConfig(activeRoomId.value, 'isAnswerByLLM', false);
   activeSampleId.value = item.id;
};
@@ -179,102 +183,33 @@
   }
};
//#endregion

const commonPhrasesRef = ref<HTMLDivElement>(null);
onClickOutside(
   commonPhrasesRef,
   () => {
      isShow.value = false;
   },
   {
      ignore: ['.el-message-box'],
   }
);

const addPhrase = (val) =>{
    if (!props.isHome) {
      let obj = {
         id: val?.historyId,
         question: val?.content.values,
      };
      commonChatByUser(obj);
      isShow.value = true;
   }
}
onMounted(() => {
   getCommonPhrases();
   updatePhrase();
});
defineExpose({ commonChatByUser, getCommonPhrases });
defineExpose({ addPhrase, updatePhrase });
</script>
<style scoped lang="scss">
.container {
   position: absolute;
   width: 100%;
   max-height: 40vh;
   padding: 0 8px 8px;
   left: 0px;
   border-radius: 12px;
   background-color: #ffffff;
   border: 1px solid #e5e5e5;
   box-shadow: 0px 8px 25px 0px #0000000d;
   display: flex;
   flex-direction: column;
   z-index: 990;
   &_header {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 10px 6px;
      color: #060607;
      .question {
         font-size: 14px;
         color: #060607;
         font-weight: 600;
         line-height: 20px;
         letter-spacing: 0.25px;
         flex-grow: 1;
         display: flex;
      }
   }
   &_content {
      width: 100%;
      max-height: 35vh;
      height: fit-content;
      overflow-y: auto;
      .set_phrases {
         outline: none;
         overflow-y: auto;
         position: relative;
         transition: height 0.1s linear;
         .phase_item {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            padding: 6px 8px;
            flex-shrink: 0;
            background: #fff;
            border-radius: 8px;
            width: 100%;
            &:hover {
               background: #e5e7ed;
            }
            .question {
               font-size: 14px;
               color: #8d8e99;
               font-weight: 400;
               font-style: normal;
               white-space: nowrap;
               text-overflow: ellipsis;
               overflow: hidden;
               &:hover {
                  color: #060607;
               }
            }

            .content {
               font-size: 12px;
               color: #5e6772;
               font-family: PingFang SC;
               white-space: nowrap;
               text-overflow: ellipsis;
               overflow: hidden;
            }
         }
      }
   }
   &_add {
      display: flex;
      flex-direction: row;
      align-items: center;
      cursor: pointer;
      padding: 6px 8px;
      background: #fff;
      border-radius: 8px;
      &:hover {
         background: #e5e7ed;
      }
   }
}
@use './index.scss';
</style>