From 6785ace3ff53fbf5a188f47496bbf13ed1bca8f4 Mon Sep 17 00:00:00 2001 From: liudong <liudong> Date: 星期五, 16 八月 2024 18:31:31 +0800 Subject: [PATCH] 新版UI对话页面开发 --- src/views/sessionManager/components/chatMenu.vue | 199 +++++++++++++++++++++++++++++++++++-------------- src/views/sessionManager/index.vue | 2 2 files changed, 143 insertions(+), 58 deletions(-) diff --git a/src/views/sessionManager/components/chatMenu.vue b/src/views/sessionManager/components/chatMenu.vue index 5a15996..c82f0ec 100644 --- a/src/views/sessionManager/components/chatMenu.vue +++ b/src/views/sessionManager/components/chatMenu.vue @@ -33,63 +33,67 @@ </div> <div class="myAgentLine___Isl6E" style="margin-top: 4px;"></div> <div id="myAgentBox"> - <div class="myAgentBox___zrCit"> - <div class="myAgentBoxImg___Mgu9e"> +<!-- <div class="myAgentBox___zrCit">--> +<!-- <div class="myAgentBoxImg___Mgu9e">--> +<!-- <div class="myAgentBoxImgLayout___u69B_">--> +<!-- <div class="MuiBox-root css-5nczy5"><img--> +<!-- src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/academic.png" alt=""--> +<!-- style="border-radius: 50%; width: 100%; height: 100%;"></div>--> +<!-- <span class="myAgentBoxImgLayoutTip___xHV4m">瀛︽湳鎼滅储</span></div>--> +<!-- <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq">--> +<!-- <div class="myAgentBoxImgDeleteInner____Hawc">浠庝晶杈规爮绉婚櫎</div>--> +<!-- </div>--> +<!-- </div>--> +<!-- </div>--> +<!-- <div class="myAgentBox___zrCit">--> +<!-- <div class="myAgentBoxImg___Mgu9e">--> +<!-- <div class="myAgentBoxImgLayout___u69B_">--> +<!-- <div class="MuiBox-root css-5nczy5"><img--> +<!-- src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/paper_rewrite.png" alt=""--> +<!-- style="border-radius: 50%; width: 100%; height: 100%;"></div>--> +<!-- <span class="myAgentBoxImgLayoutTip___xHV4m">璁烘枃鏀瑰啓</span></div>--> +<!-- <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq">--> +<!-- <div class="myAgentBoxImgDeleteInner____Hawc">浠庝晶杈规爮绉婚櫎</div>--> +<!-- </div>--> +<!-- </div>--> +<!-- </div>--> +<!-- <div class="myAgentBox___zrCit">--> +<!-- <div class="myAgentBoxImg___Mgu9e">--> +<!-- <div class="myAgentBoxImgLayout___u69B_">--> +<!-- <div class="MuiBox-root css-5nczy5"><img--> +<!-- src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/prompt.png" alt=""--> +<!-- style="border-radius: 50%; width: 100%; height: 100%;"></div>--> +<!-- <span class="myAgentBoxImgLayoutTip___xHV4m">鎻愮ず璇嶄笓瀹�</span></div>--> +<!-- <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq">--> +<!-- <div class="myAgentBoxImgDeleteInner____Hawc">浠庝晶杈规爮绉婚櫎</div>--> +<!-- </div>--> +<!-- </div>--> +<!-- </div>--> +<!-- <div class="myAgentBox___zrCit">--> +<!-- <div class="myAgentBoxImg___Mgu9e">--> +<!-- <div class="myAgentBoxImgLayout___u69B_">--> +<!-- <div class="MuiBox-root css-5nczy5"><img--> +<!-- src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/taro.png" alt=""--> +<!-- style="border-radius: 50%; width: 100%; height: 100%;"></div>--> +<!-- <span class="myAgentBoxImgLayoutTip___xHV4m">濉旂綏甯�</span></div>--> +<!-- <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq">--> +<!-- <div class="myAgentBoxImgDeleteInner____Hawc">浠庝晶杈规爮绉婚櫎</div>--> +<!-- </div>--> +<!-- </div>--> +<!-- </div>--> + <div class="myAgentBox___zrCit" v-for="item in sessionList"> + <div class="myAgentBoxImg___Mgu9e" @click="createNewSession(item)"> <div class="myAgentBoxImgLayout___u69B_"> - <div class="MuiBox-root css-5nczy5"><img - src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/academic.png" alt="" - style="border-radius: 50%; width: 100%; height: 100%;"></div> - <span class="myAgentBoxImgLayoutTip___xHV4m">瀛︽湳鎼滅储</span></div> - <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq"> - <div class="myAgentBoxImgDeleteInner____Hawc">浠庝晶杈规爮绉婚櫎</div> + <div class="MuiBox-root css-5nczy5"> + <img + src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/guess.png" + alt="" + style="border-radius: 50%; width: 100%; height: 100%;"> + </div> + <span class="myAgentBoxImgLayoutTip___xHV4m">{{item.name}}</span> </div> - </div> - </div> - <div class="myAgentBox___zrCit"> - <div class="myAgentBoxImg___Mgu9e"> - <div class="myAgentBoxImgLayout___u69B_"> - <div class="MuiBox-root css-5nczy5"><img - src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/paper_rewrite.png" alt="" - style="border-radius: 50%; width: 100%; height: 100%;"></div> - <span class="myAgentBoxImgLayoutTip___xHV4m">璁烘枃鏀瑰啓</span></div> - <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq"> - <div class="myAgentBoxImgDeleteInner____Hawc">浠庝晶杈规爮绉婚櫎</div> - </div> - </div> - </div> - <div class="myAgentBox___zrCit"> - <div class="myAgentBoxImg___Mgu9e"> - <div class="myAgentBoxImgLayout___u69B_"> - <div class="MuiBox-root css-5nczy5"><img - src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/prompt.png" alt="" - style="border-radius: 50%; width: 100%; height: 100%;"></div> - <span class="myAgentBoxImgLayoutTip___xHV4m">鎻愮ず璇嶄笓瀹�</span></div> - <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq"> - <div class="myAgentBoxImgDeleteInner____Hawc">浠庝晶杈规爮绉婚櫎</div> - </div> - </div> - </div> - <div class="myAgentBox___zrCit"> - <div class="myAgentBoxImg___Mgu9e"> - <div class="myAgentBoxImgLayout___u69B_"> - <div class="MuiBox-root css-5nczy5"><img - src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/taro.png" alt="" - style="border-radius: 50%; width: 100%; height: 100%;"></div> - <span class="myAgentBoxImgLayoutTip___xHV4m">濉旂綏甯�</span></div> - <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq"> - <div class="myAgentBoxImgDeleteInner____Hawc">浠庝晶杈规爮绉婚櫎</div> - </div> - </div> - </div> - <div class="myAgentBox___zrCit"> - <div class="myAgentBoxImg___Mgu9e"> - <div class="myAgentBoxImgLayout___u69B_"> - <div class="MuiBox-root css-5nczy5"><img - src="https://kimi-img.moonshot.cn/prod-chat-kimi/avatar/kimiplus/guess.png" alt="" - style="border-radius: 50%; width: 100%; height: 100%;"></div> - <span class="myAgentBoxImgLayoutTip___xHV4m">鐚滅寽鎴戝湪鎯宠皝</span></div> - <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq"> - <div class="myAgentBoxImgDeleteInner____Hawc">浠庝晶杈规爮绉婚櫎</div> + <div data-testid="msh-sidebar-bot-delete" class="myAgentBoxImgDelete___qXZuq" @click="deleteSession(item)"> + <div class="myAgentBoxImgDeleteInner____Hawc" >浠庝晶杈规爮绉婚櫎</div> </div> </div> </div> @@ -106,16 +110,97 @@ IconTiktokColor } from "@arco-design/web-vue/es/icon"; import { useAppStore, useUserStore } from "@/store"; -import { computed, nextTick, onMounted, watch, reactive, ref } from "vue"; - +import { computed, nextTick, onMounted, watch, reactive, ref, onBeforeMount, onBeforeUnmount } from "vue"; +import { + addSessionApi, + chatApi, + getDialogListApi, + getSessionDetailsApi, + deleteSessionApi, + sessionListApi +} from "@/api/session"; import { Message } from "@arco-design/web-vue"; import EventBus from '@/utils/EventBus'; +const emit = defineEmits(["querySessionDetail","changeAgentType","createSession"]); +import logo from "@/assets/images/model.png"; +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 sessionList = ref([]); //鐢ㄦ埛鎿嶄綔浼氳瘽鍒楄〃 + + + + +// 鏌ヨ鍘嗗彶鐢ㄦ埛涔犳儻浼氳瘽鍒楄〃 +const querySessionList = async (id) => { + const { code, data } = await sessionListApi(id); + if (code === 200) { + sessionList.value = data.map((item) => { + return { + ...item, + showtype: 1 + } + }); + sessionList.value.splice(0, 5); + console.log(sessionList.value); + } else { + Message.warning("鏌ヨ澶辫触"); + } +}; + + +// 鏂板浼氳瘽 +const createNewSession = async (session) => { + console.log(session, 'session'); + // 鏌ヨ鍘嗗彶璁板綍 + // if (session.type == '1') { + // // 鐢熸垚鏅鸿兘浣撴柊鐨勫璇� + // emit('createSession',session.id); + // emit('changeAgentType','1'); + // } else { + // // 鐢熸垚agent鏂扮殑瀵硅瘽 + // EventBus.emit("createAgent",session); + // emit('changeAgentType','2'); + // } + + + +} + + + + +//鏍规嵁浼氳瘽id鍒犻櫎浼氳瘽 +const deleteSession = async (session) => { + const { code } = await deleteSessionApi([session.id]); + if (code === 200) { + // Message.success('鍒犻櫎鎴愬姛'); + querySessionList(''); + } +}; +onBeforeMount(()=>{ + querySessionList(''); +}) + +onMounted(() => { + +}) +onBeforeUnmount(() => { + +}); + </script> diff --git a/src/views/sessionManager/index.vue b/src/views/sessionManager/index.vue index c2af897..c8459da 100644 --- a/src/views/sessionManager/index.vue +++ b/src/views/sessionManager/index.vue @@ -8,7 +8,7 @@ <!-- <a-card class="top-title">AI浼氳瘽璁板綍</a-card>--> <a-row :gutter="[5, 5]" style="margin-top: 3px;"> <a-col :span="1"> - <chatMenu></chatMenu> + <chatMenu @createSession="createSession" @querySessionDetail="querySessionDetail" @changeAgentType="changeAgentType"></chatMenu> </a-col> <!-- 鏅鸿兘浣撲細璇�--> <a-col :span="23" v-show="agentType == '1'"> -- Gitblit v1.8.0