修改对话测试位置

gerson

2024-09-07 c74f151511e754dedcfab011f06078d654d17eaf

 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 ====================== 获取知识库sheet列表 ======================
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>