From 6de5b976d19efff381381470e55fef8c469f87ab Mon Sep 17 00:00:00 2001 From: liudong <liudong> Date: 星期一, 26 八月 2024 21:46:14 +0800 Subject: [PATCH] fix: 修改bug --- src/views/sessionManager/components/smartAi.vue | 359 +++++++++++++++++++++++++++++++++-------------------------- 1 files changed, 201 insertions(+), 158 deletions(-) diff --git a/src/views/sessionManager/components/smartAi.vue b/src/views/sessionManager/components/smartAi.vue index 26b3555..4059e8f 100644 --- a/src/views/sessionManager/components/smartAi.vue +++ b/src/views/sessionManager/components/smartAi.vue @@ -1,158 +1,202 @@ <template> - <div class="layoutHisCenter"> - <a-scrollbar - class="left-list" - style=" - height: calc(100vh - 100px); - overflow-y: auto; - overflow-x: hidden; - " - > - <div class="historyCenter"> - <div - class="item historyCenter-box" - v-for="item in dialogs" - @click="querySessionDetail(item)" - > - <div class="text" > - <img - :style="{ width: '16px' }" - alt="dessert" - :src="item.avatar || imgSrc" - /> - {{ item.name }} - </div> - <div class="time" - > - </div> - </div> - </div> - </a-scrollbar> + <div class="layoutAgentCenter"> + <a-scrollbar + style="height: calc(100vh - 100px); overflow-y: auto; overflow-x: hidden" + > + <div class="search"> + <!-- 鏌ヨ妗�--> + <img src="@/assets/images/his.png" style="width: 100%" alt="" /> + </div> + <div class="agentMainCenter"> + <a-row class="agentCenter"> + <a-col :span="8" v-for="item in dialogs"> + <div class="item agentCenter-box" @click="createNewSession(item)"> + <div class="text"> + <a-avatar> + <img + :style="{ width: '100%' }" + alt="dessert" + :src="item.icon || imgSrc" + /> + </a-avatar> + <span + style=" + margin-left: 10px; + font-weight: 500; + color: var(--color-text-1); + " + > + {{ item.name }} + </span> + </div> + <div class="time"> </div> + </div> + </a-col> + <a-col :span="8" v-for="item in agentList"> + <div class="item agentCenter-box" @click="createNewSession(item)"> + <div class="text"> + <a-avatar> + <img + :style="{ width: '100%' }" + alt="dessert" + :src="item.avatar || imgSrc" + /> + </a-avatar> + <span + style=" + margin-left: 10px; + font-weight: 500; + color: var(--color-text-1); + " + > + {{ item.name }} + </span> + </div> + <div class="time"> </div> + </div> + </a-col> + </a-row> + </div> + </a-scrollbar> </div> </template> <script setup lang="ts"> -import { - IconClose, - IconSearch, - IconTiktokColor -} from "@arco-design/web-vue/es/icon"; -import { useAppStore, useUserStore } from "@/store"; -import { computed, nextTick, onMounted, watch, reactive, ref, onBeforeMount, onBeforeUnmount } from "vue"; + import { + IconClose, + IconSearch, + IconTiktokColor, + } from '@arco-design/web-vue/es/icon'; + import { useAppStore, useUserStore } from '@/store'; + import { + computed, + nextTick, + onMounted, + watch, + reactive, + ref, + onBeforeMount, + onBeforeUnmount, + } from 'vue'; -import { Message } from "@arco-design/web-vue"; -import EventBus from '@/utils/EventBus'; -import moment from "moment"; -import { - addSessionApi, - chatApi, - getDialogListApi, - getSessionDetailsApi, - sessionListApi -} from "@/api/session"; -import { queryCanvasList } from "@/api/Agent"; -const emit = defineEmits(["querySessionDetail","changeAgentType"]); -import logo from "@/assets/images/model.png"; -const sessionList = ref([]); //浼氳瘽鍒楄〃 -const activeSessionId = ref(""); -const fieldNames = { value: "id", label: "name" }; -const dialogs = ref([]); -const dialogObj = reactive({}); -const agentObj = reactive({}); -const agentList = ref([]); -const searchValue = ref(""); -const selectValue = ref(""); -const sectionList = ref({}); -const imgSrc = ref(logo); -const DialogList = async () => { - const { code, data } = await getDialogListApi(); - if (code === 200) { - if (data) { - selectValue.value = data[0].id; - dialogs.value = data.map((item) => { + import { Message } from '@arco-design/web-vue'; + import EventBus from '@/utils/EventBus'; + import moment from 'moment'; + import { + addSessionApi, + chatApi, + getDialogListApi, + getSessionDetailsApi, + sessionListApi, + } from '@/api/session'; + import { queryCanvasList } from '@/api/Agent'; + const emit = defineEmits([ + 'querySessionDetail', + 'changeAgentType', + 'createSession', + ]); + import logo from '@/assets/images/model.png'; + const sessionList = ref([]); //浼氳瘽鍒楄〃 + const activeSessionId = ref(''); + const fieldNames = { value: 'id', label: 'name' }; + const dialogs = ref([]); + const dialogObj = reactive({}); + const agentObj = reactive({}); + const agentList = ref([]); + const searchValue = ref(''); + const selectValue = ref(''); + const sectionList = ref({}); + const imgSrc = ref(logo); + const DialogList = async () => { + const { code, data } = await getDialogListApi(); + if (code === 200) { + if (data?.length > 0) { + selectValue.value = data[0].id; + dialogs.value = data.map((item) => { + return { + ...item, + type: 1, //鏅鸿兘浣� + }; + }); + // console.log(dialogs, 'dialogs'); + } + } + }; + + const queryCanvas = async (params = {}) => { + try { + const { data } = await queryCanvasList(params); + + agentList.value = data.map((item) => { return { ...item, - type: 1 //鏅鸿兘浣� + name: item.title, + type: 2, //agent }; }); - // console.log(data, "dialogs"); - queryCanvas(); + // console.log(agentList, 'agent'); + // 鍚堝苟鏁扮粍 + // dialogs.value = dialogs.value.concat(agentList.value); + } catch (err) { + // you can report use errorHandler or other + } finally { } - } -}; + }; -const queryCanvas = async (params = {}) => { - try { - const { data } = await queryCanvasList(params); - console.log(data, "agent"); - agentList.value = data.map((item) => { - return { - ...item, - name: item.title, - type: 2 //agent - }; - }); - // 鍚堝苟鏁扮粍 - dialogs.value = dialogs.value.concat(agentList.value); - - - } catch (err) { - // you can report use errorHandler or other - } finally { - } -}; - - -// 鏌ヨ浼氳瘽鍒楄〃 -const querySessionList = async (id) => { - const { code, data } = await sessionListApi(id); - if (code === 200) { - sessionList.value = data; - - - - } else { - Message.warning("鏌ヨ澶辫触"); - } -}; - - -const querySessionDetail = async (session) => { - console.log(session, 'session'); - emit('changeAgentType','1'); - emit('querySessionDetail',session); -} -onBeforeMount(()=>{ - DialogList() -}) - -onMounted(() => { - EventBus.on("smartAi", () => { - emit('changeAgentType','4'); - DialogList() + // 鏌ヨ浼氳瘽鍒楄〃 + const querySessionList = async (id) => { + const { code, data } = await sessionListApi(id); + if (code === 200) { + sessionList.value = data; + } else { + Message.warning('鏌ヨ澶辫触'); + } + }; + // 鐢熸垚鏅鸿兘浣撴柊寤轰細璇� + const createNewSession = async (session) => { + console.log(session, 'session'); + // emit('querySessionDetail',session); + if (session.type == '1') { + // 鐢熸垚鏅鸿兘浣撴柊鐨勫璇� + emit('createSession', session.id, `鍜�${session.name}鐨勪細璇漙); + emit('changeAgentType', '1'); + } else { + // 鐢熸垚agent鏂扮殑瀵硅瘽 + EventBus.emit('createAgent', session); + emit('changeAgentType', '2'); + } + }; + onBeforeMount(() => { + DialogList(); + queryCanvas(); }); -}) -onBeforeUnmount(() => { - EventBus.off("smartAi"); -}); - + onMounted(() => { + EventBus.on('smartAi', () => { + emit('changeAgentType', '4'); + DialogList(); + queryCanvas(); + }); + }); + onBeforeUnmount(() => { + EventBus.off('smartAi'); + }); </script> <style scoped lang="less"> - .layoutHisCenter{ + .layoutAgentCenter { width: 100%; //background: #999999; position: absolute; left: 0; top: 0; - .historyTitle___F_iam { + .agentTitle___F_iam { font-size: 36px; line-height: 50px; font-weight: 700; text-align: center; } - .search{ + .search { width: 100%; - .search-box{ + .search-box { width: 70%; margin-left: 15%; border: 1px solid var(--color-text-4); @@ -161,41 +205,40 @@ background: var(--color-bg-2); margin-top: 20px; margin-bottom: 20px; - :deep(.arco-input-wrapper){ + :deep(.arco-input-wrapper) { border: none; background: var(--color-bg-2); } } } - .historyCenter{ - width: 100%; - margin-top: 30px; - .historyCenter-box{ - display: flex; - width: 70%; - margin-left: 15%; - //border: 1px solid var(--color-text-4); - padding: 16px; - border-radius: 12px; - background: var(--color-bg-2); - margin-top: 10px; - cursor: pointer; - justify-content: space-between; - align-items: center; - } - .historyCenter-box:hover{ - color: #2a2a2b; - border: 1px solid var(--color-neutral-3); - //background: #e8e8ea; - box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09); + .agentMainCenter { + width: 70%; + margin: 0 auto; + .agentCenter { + width: 100%; + margin-top: 30px; + .agentCenter-box { + display: flex; + width: 90%; + margin: 0 auto; + //border: 1px solid var(--color-neutral-3); + padding: 16px; + border-radius: 12px; + background: var(--color-bg-1); + margin-top: 10px; + cursor: pointer; + justify-content: space-between; + align-items: center; + color: var(--color-text-2); + } + .agentCenter-box:hover { + color: var(--color-text-2); + //border: 1px solid var(--color-neutral-3); + background: var(--color-bg-3); + box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), + 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09); + } } } - - - - } - - - </style> -- Gitblit v1.8.0