添加常用语

yangyin

2024-11-03 3ea139c2845f91c2a78885c5777947ca6f069a0e

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

@@ -5,18 +5,18 @@
         <span class="ywifont ywicon-guanbi text-[15px] cursor-pointer text-[#767a97]" @click="closeCommonPhrases"></span>
      </div>
      <div class="container_content">
         <div class="set_phrases" :style="{ height: commonPhrases.length * 40 + 'px' }">
         <div class="set_phrases" :style="{ height: commonPhrases.length * 46 + 'px' }">
            <div class="w-full h-full absolute top-0">
               <div class="py-0 mt-0 box-border h-full">
                  <div style="overflow-anchor: none" v-for="(item, index) in commonPhrases" :key="index">
                     <div class="phase_item">
                        <div class="flex flex-col">
                           <div class="title">
                           <div class="title" @click="titleClick(item)">
                              {{ item.title }}
                           </div>
                           <div class="content">
                           <!-- <div class="content">
                              {{ item.content }}
                           </div>
                           </div> -->
                        </div>
                        <div class="py-2">
                           <span
@@ -38,12 +38,20 @@
         <span class="ywifont ywicon-jia text-[15px] cursor-pointer text-[#767a97]"></span>
         <div class="grow">添加常用语</div>
      </div>
      <el-dialog v-model="state.useCommonPhrasesDialog" :title="`${showCommonPhrases}常用语`" width="500" :before-close="handleClose">
         <el-input v-model="state.inputCommonPhrases" :rows="10" type="textarea"></el-input>
      <el-dialog
         v-model="state.useCommonPhrasesDialog"
         :title="`${showCommonPhrases}常用语`"
         width="500"
         :before-close="handleClose"
         style="z-index: 999"
      >
         <el-input v-model="state.inputCommonPhrases" :rows="10" type="textarea" placeholder="自定义常用语"></el-input>
         <template #footer>
            <div class="dialog-footer">
               <el-button @click="handleClose">取消</el-button>
               <el-button type="primary" @click="submitCommonPhrases"> {{ showCommonPhrases }} </el-button>
               <el-button type="primary" @click="submitCommonPhrases" :disabled="is_input_title">
                  {{ showCommonPhrases }}
               </el-button>
            </div>
         </template>
      </el-dialog>
@@ -53,35 +61,32 @@
<script setup lang="ts">
import { ElMessageBox } from 'element-plus';
import { computed, reactive, ref } from 'vue';
import { addUserSample } from '/@/api/ai/chat';
import { activeGroupType } from '/@/stores/chatRoom';
const state = reactive({
   useCommonPhrasesDialog: false,
   show_sample_title: false,
   inputCommonPhrases: '',
   sample_title: null,
});
const commonPhrases = ref([
   {
      id: 1,
      title: '你好，请问有什么可以帮助您？',
      content: '您好，我想咨询一下关于您的订单。',
   },
   {
      id: 2,
      title: '测试1?',
      content: '我想咨询一下关于您的订单。',
   },
   {
      id: 3,
      title: '测试2?',
      content: '我想咨询一下关于您的订单。',
   },
]);
const commonPhrases = ref([]);
const props = defineProps(['isHome']);
const closeCommonPhrases = () => {};
const isShow = defineModel('isShow', {
   type: Boolean,
});
//#region ====================== 是否显示常用语 ======================
const showCommonPhrases = computed(() => {
   return state.show_sample_title == true ? (state.sample_title = '编辑') : (state.sample_title = '添加');
});
const is_input_title = computed(() => {
   return state.inputCommonPhrases == '' ? true : false;
});
const closeCommonPhrases = () => {
   isShow.value = false;
};
//#endregion

//#region ====================== 添加常用语 ======================
//关闭常用语弹窗
const handleClose = () => {
   state.useCommonPhrasesDialog = false;
@@ -108,13 +113,29 @@
   });
};
//提交常用语
const submitCommonPhrases = () => {};
const submitCommonPhrases = async () => {
   const res = await addUserSample({
      question: state.inputCommonPhrases,
      group_type: activeGroupType.value,
   });
   if (res.json_ok) {
      commonPhrases.value.push({
         id: res.sample_id,
         title: state.inputCommonPhrases,
      });
      state.useCommonPhrasesDialog = false;
   }
};
//#endregion
//#region ====================== 常用语到对话框 ======================
const titleClick = (item) => {};
//#endregion
</script>
<style scoped lang="scss">
.container {
   position: absolute;
   width: 100%;
   max-height: 45vh;
   max-height: 40vh;
   padding: 0 8px 8px;
   left: 0px;
   border-radius: 12px;
@@ -123,7 +144,7 @@
   box-shadow: 0px 8px 25px 0px #0000000d;
   display: flex;
   flex-direction: column;
   z-index: 100;
   z-index: 990;
   &_header {
      width: 100%;
      display: flex;
@@ -144,8 +165,9 @@
   }
   &_content {
      width: 100%;
      max-height: 40vh;
      max-height: 35vh;
      height: fit-content;
      overflow-y: auto;
      .set_phrases {
         outline: none;
         overflow-y: auto;
@@ -200,4 +222,3 @@
   }
}
</style>
import { ElMessageBox } from 'element-plus';