From 832f9fcacb83155dff74baaa8cbe17b1d3913247 Mon Sep 17 00:00:00 2001 From: yangyin <1850366751@qq.com> Date: 星期三, 09 十月 2024 17:51:17 +0800 Subject: [PATCH] 修改聊天室 --- src/components/drawer/CustomDrawer.vue | 104 +++++++++++++++++++++++++++++++++------------------ 1 files changed, 67 insertions(+), 37 deletions(-) diff --git a/src/components/drawer/CustomDrawer.vue b/src/components/drawer/CustomDrawer.vue index 1b0aa65..0b7ea80 100644 --- a/src/components/drawer/CustomDrawer.vue +++ b/src/components/drawer/CustomDrawer.vue @@ -1,7 +1,7 @@ <template> - <div class="relative h100" :style="`width: ${rightBox}px;transition: 0.7s ease-in;`"> + <div class="relative h100" v-loading="loadingData" :style="`width: ${rightBox}px;transition: 0.7s ease-in;`"> <div class="retract_icon" @click="toggleShow"> - <i class="text-[#fff] transition-all" :class="isShow ? 'ywicon icon-zuoyoujiantou1' : 'ywicon icon-zuoyoujiantou'"></i> + <i class="text-[#fff] transition-all" :class="isShow ? 'ywifont ywicon-zuoyoujiantou1' : 'ywifont ywicon-zuoyoujiantou'"></i> </div> <div class="pc-mouldboard column exampleSlide"> <div class="header flex items-center justify-center"> @@ -19,7 +19,7 @@ </div> </div> <i - class="ywicon icon-guanbi text-[#999] text-[18px] absolute right-[14px] top-5 cursor-pointer" + class="ywifont ywicon-guanbi text-[#999] text-[18px] absolute right-[14px] top-5 cursor-pointer" @click="handleCloseTemplate" ></i> </div> @@ -37,8 +37,8 @@ > <div v-for="item in state.customTagList" - :key="item.section_id" - :class="{ 'set-label-active': state.activeLabelName === item.section_id }" + :key="item.group_id" + :class="{ 'set-label-active': state.activeLabelName === item.group_id }" @click="handleLabelClick(item)" class="cursor-pointer m-[5px] py-[5px] px-[10px] rounded-xl border border-solid border-[#b2b2b2] bg-[#e0e7f] text-[#4c4c4c] transition-[background-color .1s, color .1s, border-color .1s]" > @@ -46,8 +46,8 @@ </div> </div> <div class="bg-[#e0e7fb] absolute right-0 top-0 text-[#131313] w-[30px] h-[26px] cursor-pointer flex items-center"> - <i class="iconfont icon-bolangneng" title="灞曞紑" @click="handleExpandClick(1)" v-show="!state.isShowExpand"></i> - <i class="iconfont icon-zhongduancanshu" title="鏀剁缉" @click="handleExpandClick(2)" v-show="state.isShowExpand"></i> + <i class="myiconfont icon-bolangneng" title="灞曞紑" @click="handleExpandClick(1)" v-show="!state.isShowExpand"></i> + <i class="myiconfont icon-zhongduancanshu" title="鏀剁缉" @click="handleExpandClick(2)" v-show="state.isShowExpand"></i> </div> <div class="mt20 w100"> <div class="w100 pb-[20px]" v-for="item in finalSampleList" :key="item.sample_id"> @@ -56,7 +56,7 @@ @click="changeExample(item)" > <i - class="iconfont icon-chazhaobiaodanliebiao pl-[2px] w-[16px] h-[16px] font12 text-[#fff] transform-[scale(.85)] rounded-[50%]" + class="myiconfont icon-chazhaobiaodanliebiao pl-[2px] w-[16px] h-[16px] font12 text-[#fff] transform-[scale(.85)] rounded-[50%]" :style="`background-color:${item.BgColor}`" ></i> <div class="ml-6 flex-1 min-w-0"> @@ -84,8 +84,8 @@ > <div v-for="item in state.customOfficeList" - :key="item.section_id" - :class="{ 'set-label-active': state.activeInstructName === item.section_id }" + :key="item.template_id" + :class="{ 'set-label-active': state.activeInstructName === item.template_id }" @click="handleInstructClick(item)" class="cursor-pointer m-[5px] py-[5px] px-[10px] rounded-xl border border-solid border-[#b2b2b2] bg-[#e0e7f] text-[#4c4c4c] transition-[background-color .1s, color .1s, border-color .1s]" > @@ -93,8 +93,8 @@ </div> </div> <div class="bg-[#e0e7fb] absolute right-0 top-0 text-[#131313] w-[30px] h-[26px] cursor-pointer flex items-center"> - <i class="iconfont icon-bolangneng" title="灞曞紑" @click="handleExpandClick(1)" v-show="!state.isShowExpand"></i> - <i class="iconfont icon-zhongduancanshu" title="鏀剁缉" @click="handleExpandClick(2)" v-show="state.isShowExpand"></i> + <i class="myiconfont icon-bolangneng" title="灞曞紑" @click="handleExpandClick(1)" v-show="!state.isShowExpand"></i> + <i class="myiconfont icon-zhongduancanshu" title="鏀剁缉" @click="handleExpandClick(2)" v-show="state.isShowExpand"></i> </div> <div class="mt20 w100"> <div class="w100 pb-[20px] flex overflow-auto flex-col" v-for="item in showInstructList" :key="item.template_id"> @@ -129,12 +129,11 @@ <script setup lang="ts"> import { Search } from '@element-plus/icons-vue'; -import { computed, onMounted, reactive, ref, toRefs, watch } from 'vue'; -import { getSelectSample, getUserTemplateList } from '/@/api/ai/chat'; +import { computed, reactive, ref, watch } from 'vue'; +import { getSectionList, getSelectSample, getUserTemplateList } from '/@/api/ai/chat'; import { useSearch } from '/@/hooks/useSearch'; -import { activeRoomId, activeSampleId, sectionAList, setRoomConfig } from '/@/stores/chatRoom'; +import { activeRoomId, activeSampleId, activeSectionAId, sectionAList, setRoomConfig } from '/@/stores/chatRoom'; import { debounce } from '/@/utils/util'; -import emitter from '/@/utils/mitt'; let state = reactive({ tabNameList: [ { ID: 1, Name: '鎻愰棶绀轰緥' }, @@ -142,8 +141,8 @@ ], activeName: 1, - activeLabelName: 0, - activeInstructName: 0, + activeLabelName: 'knowledge_base', //榛樿閫夋嫨绗竴涓� + activeInstructName: 'office_assistant', //榛樿閫夋嫨绗竴涓� isShowExpand: false, useInstructDialog: false, instructInfo: {}, @@ -169,12 +168,10 @@ //鑾峰彇妯$増鍒楄〃 const getSelectListSample = async () => { state.listSampleLoading = true; - const res = await getSelectSample({ - section_b_id: '', - }).finally(() => { + const res = await getSelectSample({}).finally(() => { state.listSampleLoading = false; }); - // console.log(res, 63); + console.log(res, 63); state.exampleRandomContent = res.samples; const array = []; @@ -186,6 +183,7 @@ } }); exampleList.value = res.samples; + state.exampleContent = array; }; //闅忔満鐢熸垚棰滆壊 @@ -198,6 +196,7 @@ emit('updateChatInput', item.sample_question); setRoomConfig(activeRoomId.value, 'isAnswerByLLM', false); activeSampleId.value = item.sample_id; + activeSectionAId.value = item.section_a_id; }; //鑾峰彇鐢ㄦ埛妯℃澘 const getUserTemplate = async () => { @@ -214,11 +213,11 @@ }; //鏍囩鐐瑰嚮浜嬩欢(鎻愰棶绀轰緥) const handleLabelClick = (item) => { - state.activeLabelName = item.section_id; + state.activeLabelName = item.group_id; }; //鏍囩鐐瑰嚮浜嬩欢(鎸囦护妯℃澘) const handleInstructClick = (item) => { - state.activeInstructName = item.section_id; + state.activeInstructName = item.group_id; }; //灞曞紑鏀惰捣 @@ -229,22 +228,52 @@ state.isShowExpand = false; } }; -const toggleShow = () => { +const toggleShow = async () => { isShow.value = !isShow.value; if (!isShow.value) { + loadingData.value = true; + await getMainSectionList().finally(() => { + loadingData.value = false; + }); + getTableData(); } }; -const getTableData = () => { - if (state.activeName == 1) { - if (state.listSampleExpand) return; - getSelectListSample(); - state.listSampleExpand = true; - } - if (state.activeName == 2) { - if (state.listInstructExpand) return; - getUserTemplate(); - state.listInstructExpand = true; +const getMainSectionList = async () => { + const res = await getSectionList(); + const iconList = [ + 'biaodan', + 'putong', + 'zhongduancanshuchaxun', + 'shidu', + 'fuwenbenkuang', + 'fuwenben', + 'jiliandongxuanzeqi', + 'jinridaiban', + 'gongju', + ]; + res.sections.forEach((sectionItem, index) => { + sectionItem.Icon = iconList[index]; + }); + sectionAList.value = res.sections; +}; +const loadingData = ref(false); +const getTableData = async () => { + loadingData.value = true; + + try { + if (state.activeName == 1) { + if (state.listSampleExpand) return; + await getSelectListSample(); + state.listSampleExpand = true; + } + if (state.activeName == 2) { + if (state.listInstructExpand) return; + await getUserTemplate(); + state.listInstructExpand = true; + } + } finally { + loadingData.value = false; } }; //鍏抽棴楂樼骇绀轰緥 @@ -273,7 +302,8 @@ const { query: querySample, queryData: showSampleList } = useSearch(exampleList, queryParams); const debounceQuery = debounce(querySample); const finalSampleList = computed(() => { - return showSampleList.value.filter((item) => item.section_a_id == state.activeLabelName); + const result = showSampleList.value.filter((item) => item.section_a_id == state.activeLabelName); + return result; }); watch( @@ -305,7 +335,7 @@ const selectTagList = []; const officeList = []; val.forEach((item) => { - if (item.section_id != 'office_assistant') { + if (item.group_id != 'office_assistant') { selectTagList.push(item); } else { officeList.push(item); -- Gitblit v1.9.3