From c74f151511e754dedcfab011f06078d654d17eaf Mon Sep 17 00:00:00 2001 From: gerson <1405270578@qq.com> Date: 星期六, 07 九月 2024 18:15:46 +0800 Subject: [PATCH] 修改对话测试位置 --- src/views/project/yw/dataManage/knowledge/Knowledge.vue | 149 ++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 122 insertions(+), 27 deletions(-) diff --git a/src/views/project/yw/dataManage/knowledge/Knowledge.vue b/src/views/project/yw/dataManage/knowledge/Knowledge.vue index 9432e7a..2093eae 100644 --- a/src/views/project/yw/dataManage/knowledge/Knowledge.vue +++ b/src/views/project/yw/dataManage/knowledge/Knowledge.vue @@ -3,17 +3,20 @@ <div class="flex flex-col h100"> <div class="text-[16px] font-[500] h-[22px]">鐭ヨ瘑搴撶鐞�</div> <div class="mx-0 mt-[12px] mb-[16px] flex justify-between items-center"> - <el-input - v-model="state.knowledgeBaseForm.Name" - style="width: 230px; margin-right: 10px; background: #ffffff; border-radius: 6px; transition: all 0.2s" - placeholder="鎼滅储鐭ヨ瘑搴撳悕绉�" - clearable - :suffix-icon="Search" - ></el-input> + <div class="flex-col"> + <el-input + v-model="knowledgeBaseForm.title" + style="width: 230px; margin-right: 10px; background: #ffffff; border-radius: 6px; transition: all 0.2s" + placeholder="鎼滅储鐭ヨ瘑搴撳悕绉�" + clearable + ></el-input> + <el-button type="primary" icon="ele-Search" @click="handleQueryTable"> 鏌ヨ </el-button> + <el-button icon="ele-Refresh" @click="resetQuery">閲嶇疆 </el-button> + </div> <el-button icon="ele-Plus" @click="createKnowledgeBase()" type="primary"> 鍒涘缓鐭ヨ瘑搴� </el-button> </div> <div class="flex flex-wrap gap-[12px]"> - <div class="flex flex-wrap gap-3 overflow-x-auto set_item_jel" v-for="item in state.knowledgeBaseList" :key="item.id"> + <div class="flex flex-wrap gap-3 overflow-x-auto set_item_jel" v-for="item in displayTableData" :key="item.id"> <img :src="knowledgeLeft" class="set_item_img" /> <div class="set_item_content"> <div class="flex items-center"> @@ -23,41 +26,58 @@ 1涓煡璇� </span> <span class="set_desc_text"> - <span class="set_desc_icon ywifont ywicon-wendang"> </span> + <span class="set_desc_icon ywifont ywicon-cshy-shizhong"> </span> {{ item.create_time }}鏇存柊 </span> </div> </div> <div class="set_btn_group"> - <el-button link class="text-[12px] text-[#686682]">鏌ョ湅 </el-button> + <el-button link class="text-[12px] text-[#686682]" @click="viewKnowledgeBase(item)">鏌ョ湅 </el-button> <el-divider direction="vertical" /> - <el-button link class="text-[12px] text-[#686682]">鍛戒腑娴嬭瘯 </el-button> + <el-button link class="text-[12px] text-[#686682]" @click="openChatTest(item)">瀵硅瘽娴嬭瘯 </el-button> <el-divider direction="vertical" /> - <el-button link class="text-[12px] text-[#686682]">缂栬緫 </el-button> + <el-button link class="text-[12px] text-[#686682]" @click="editKnowledgeBase(item)">缂栬緫 </el-button> <el-divider direction="vertical" /> - <el-button link class="text-[12px] text-[#686682]" @click="deleteKnowledgeBase(item)">鍒犻櫎 </el-button> + <el-button link class="text-[12px]" @click="deleteKnowledgeBase(item)" style="color: #f00">鍒犻櫎 </el-button> </div> </div> </div> + </div> + <div + v-if="chatTestIsShow" + ref="draggableChatRef" + :style="style" + class="fixed z-50 w-[700px] h-[800px] flex flex-col bg-[rgb(239,244,253)] right-0 bottom-0 rounded-lg" + > + <div ref="chatDragHandlerRef" class="flex-0"> + <div class="flex items-center justify-between py-2 px-4"> + <div class="font-bold cursor-move"> + WI姘村姟鏅鸿兘绠″鈥斺�斻�恵{ chatTestMapRow?.title }}銆戞祴璇� + <!-- <img src="/static/images/logo/logo-mini.svg" width="10" height="10" /> --> + </div> + <i class="ywifont ywicon-guanbi font-[10px] font-bold cursor-pointer" @click="closeChatTest"></i> + </div> + </div> + <Chat ref="chatRef" class="flex-auto px-2" :questionApi="questionAi"> </Chat> </div> </div> </template> <script setup lang="ts"> -import { Search } from '@element-plus/icons-vue'; +import { useDraggable } from '@vueuse/core'; import { ElMessage, ElMessageBox } from 'element-plus'; -import { onMounted, reactive } from 'vue'; +import { nextTick, onMounted, ref } from 'vue'; import { useRouter } from 'vue-router'; -import { delete_docvector_name, get_docvector_list } from '/@/api/knowledge/docvector'; +import { check_docvector_validate, delete_docvector_name, get_docvector_list } from '/@/api/knowledge/docvector'; +import Chat from '/@/components/chat/Chat.vue'; +import { useQueryTable } from '/@/hooks/useQueryTable'; import mittBus from '/@/utils/mitt'; +import { useCompRef } from '/@/utils/types'; import knowledgeLeft from '/static/images/knowledge/data_type_1.png'; + const router = useRouter(); -const state = reactive({ - knowledgeBaseForm: { - Name: '', - }, - knowledgeBaseList: [], -}); +//#region ====================== 鑾峰彇鐭ヨ瘑搴搒heet鍒楄〃 ====================== +const knowledgeBaseList = ref([]); //鍒涘缓鐭ヨ瘑搴� const createKnowledgeBase = () => { router.push({ @@ -71,12 +91,11 @@ res.values.forEach((item) => { item.create_time = new Date(item.create_time).toLocaleString(); }); - state.knowledgeBaseList = res.values; + knowledgeBaseList.value = res.values; } else { return ElMessage.error('鑾峰彇鍒楄〃绱㈠紩澶辫触' + (res?.json_msg ? `锛�${JSON.stringify(res.json_msg)}` : '')); } }; -//鍒犻櫎鐭ヨ瘑搴� const deleteKnowledgeBase = async (row) => { ElMessageBox.confirm(`纭畾鍒犻櫎褰撳墠鐨勭煡璇嗗簱锛氥��${row.title}銆�?`, '鎻愮ず', { confirmButtonText: '纭畾', @@ -88,15 +107,91 @@ }); if (res.json_ok) { ElMessage.success('鍒犻櫎鐭ヨ瘑搴撴垚鍔�'); - const index = state.knowledgeBaseList.findIndex((d) => d.id === row.id); - state.knowledgeBaseList.splice(index, 1); + const index = knowledgeBaseList.value.findIndex((d) => d.id === row.id); + knowledgeBaseList.value.splice(index, 1); } }); +}; +//#endregion +//#region ====================== 瀵圭煡璇嗗簱杩涜缂栬緫鏌ョ湅鎿嶄綔 ====================== +const editKnowledgeBase = (row) => { + router.push({ + name: 'EditKnowledge', + query: { + knowledge_id: row.id, + knowledge_title: row.title, + knowledge_desc: row.desc, + knowledge_prompt: row.prompt, + }, + }); +}; +const viewKnowledgeBase = (row) => { + router.push({ + name: 'ViewKnowledge', + query: { + knowledge_id: row.id, + knowledge_title: row.title, + }, + }); +}; +//#endregion + +//#region ====================== 鎼滅储琛ㄦ牸锛屽琛ㄦ牸鎺掑簭 ====================== +const knowledgeBaseForm = ref({ + title: '', +}); +const { resetQuery, handleQueryTable, displayTableData } = useQueryTable(knowledgeBaseList, knowledgeBaseForm, () => { + displayTableData.value = knowledgeBaseList.value; +}); +//#endregion +//#region ====================== Chat 娴嬭瘯 ====================== + +const chatRef = useCompRef(Chat); +const chatTestMapRow = ref(null); +const chatTestIsShow = ref(false); +const openChatTest = (row) => { + chatTestMapRow.value = row; + chatTestIsShow.value = true; + nextTick(() => { + chatRef.value.clear(); + chatRef.value.autoSend(row.prompt); + }); +}; + +const closeChatTest = () => { + chatTestMapRow.value = null; + chatTestIsShow.value = false; +}; + +const draggableChatRef = ref<HTMLElement | null>(null); +const chatDragHandlerRef = ref<HTMLDivElement>(null); +const chatDragContainerRef = ref<HTMLDivElement>(null); + +// `style` will be a helper computed for `left: ?px; top: ?px;` +const { x, y, style } = useDraggable(draggableChatRef, { + handle: chatDragHandlerRef, + initialValue: { + x: document.body.clientWidth / 2 - 350, + y: document.body.clientHeight / 2 - 400, + }, +}); + +const questionAi = async (text) => { + const res = await check_docvector_validate( + { + knowlg_id: chatTestMapRow.value.id, + question: text, + }, + { + loading: false, + } + ); + return res; }; onMounted(() => { docvectorList(); mittBus.on('addKnowledgeBaseObj', (obj) => { - state.knowledgeBaseList.push(obj); + knowledgeBaseList.value.push(obj); }); }); </script> -- Gitblit v1.9.3