From 532fea1fc92daa2765f2019ae379694fcdbe57e7 Mon Sep 17 00:00:00 2001
From: liudong <liudong>
Date: 星期五, 16 八月 2024 16:07:57 +0800
Subject: [PATCH] 新版UI对话页面开发
---
src/views/sessionManager/style/layout.css | 6
src/views/sessionManager/components/agentSession.vue | 31 +++++++
src/views/sessionManager/components/chatMenu.vue | 157 ++++++++++++++++++---------------------
src/views/sessionManager/index.vue | 4 +
src/views/sessionManager/components/historySession.vue | 39 +++++++--
5 files changed, 140 insertions(+), 97 deletions(-)
diff --git a/src/views/sessionManager/components/agentSession.vue b/src/views/sessionManager/components/agentSession.vue
index 54e2ddc..342d9a3 100644
--- a/src/views/sessionManager/components/agentSession.vue
+++ b/src/views/sessionManager/components/agentSession.vue
@@ -1,5 +1,12 @@
<template>
<!-- 鍐呭-->
+ <div class="header___lEPyH">
+ <div class="chatHeader">
+ <div class="chatHeaderBox">
+ <span class="title">{{agentTitle}}</span>
+ </div>
+ </div>
+ </div>
<a-scrollbar
ref="scrollbar"
id="agentHome"
@@ -118,6 +125,7 @@
const dialogId = ref('');
const chatDis = ref(false);
const loading = ref(false);
+const agentTitle = ref("鏈懡鍚嶄細璇�");
const currIndex = ref(0);
@@ -234,6 +242,7 @@
if (code == 0) {
console.log(data,'浼氳瘽璇︽儏');
sessionDetailList.value = data.dsl.messages;
+ agentTitle.value = data.name || '鏈懡鍚嶄細璇�';
refreshScroll(); //鍒锋柊婊氬姩鏉′綅缃�
}
};
@@ -514,4 +523,26 @@
}
}
}
+.header___lEPyH {
+ width: 100%;
+ height: 46px;
+ position: relative;
+ backdrop-filter: blur(15px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ -webkit-backdrop-filter: blur(15px);
+ .chatHeaderBox {
+ width: auto;
+ border-radius: 8px;
+ padding: 4px 20px;
+ transition: all var(--animation-duration) var(--animation-transition);
+ display: flex;
+ align-items: flex-end;
+ overflow: hidden; /* 闅愯棌瓒呭嚭鐨勫唴瀹� */
+ text-overflow: ellipsis; /* 浣跨敤鐪佺暐鍙锋潵浠ｆ浛琚殣钘忕殑鏂囧瓧 */
+ white-space: nowrap; /* 涓嶆崲琛岋紝浣垮唴瀹瑰湪涓�琛屽唴鏄剧ず */
+ max-width: 200px;
+ }
+}
</style>
diff --git a/src/views/sessionManager/components/chatMenu.vue b/src/views/sessionManager/components/chatMenu.vue
index 935db5a..5a15996 100644
--- a/src/views/sessionManager/components/chatMenu.vue
+++ b/src/views/sessionManager/components/chatMenu.vue
@@ -2,7 +2,7 @@
<div class="layoutNavMoveCenter">
<div class="layoutNavMove___j5ets">
<div class="myAgent___djnd_ myAgentAnim myAgentlight___yK7Gk">
-<!-- <div data-testid="msh-sidebar-main" class="myAgentHome___PG6IZ"></div>-->
+ <div data-testid="msh-sidebar-main" class="myAgentHome___PG6IZ"></div>
<div class="myAgentLine___Isl6E"></div>
<div class="myAgentTool___Y1_mC" data-testid="msh-sidebar-new" @click="()=>{
EventBus.emit('newChat')
@@ -32,91 +32,69 @@
alt=""></div>
</div>
<div class="myAgentLine___Isl6E" style="margin-top: 4px;"></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/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 id="myAgentBox">
+ <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">
+ <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>
</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>
- </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>
- </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>
- </div>
- </div>
- <div class="myAgentLine___Isl6E" style="margin-top: 4px;"></div>
+<!-- <div class="myAgentLine___Isl6E" style="margin-top: 4px;"></div>-->
</div>
</div>
</div>
@@ -133,6 +111,13 @@
import { Message } from "@arco-design/web-vue";
import EventBus from '@/utils/EventBus';
+
+
+
+
+
+
+
</script>
<style scoped lang="less">
@import "@/views/sessionManager/style/layout.css";
@@ -143,8 +128,10 @@
height: calc(100vh - 160px); /* 鎴栬�呮寚瀹氶珮搴� */
position: relative;
}
- .layoutNavMove___j5ets{
-
+ #myAgentBox{
+ //width: 100%;
+ //max-height: 220px;
+ //overflow: hidden;
}
diff --git a/src/views/sessionManager/components/historySession.vue b/src/views/sessionManager/components/historySession.vue
index 63ed439..1fc2d03 100644
--- a/src/views/sessionManager/components/historySession.vue
+++ b/src/views/sessionManager/components/historySession.vue
@@ -56,13 +56,22 @@
/>
{{ session.name }}
</div>
- <div class="time"
- >{{
- moment(new Date(session.create_time)).format(
- 'YYYY-MM-DD HH:mm:ss'
- )
- }}
- </div>
+ <a-popover position="rt">
+ <div class="time"
+ >{{
+ moment(new Date(session.create_time)).format(
+ 'YYYY-MM-DD HH:mm:ss'
+ )
+ }}
+ </div>
+ <template #content>
+ <span
+ style="cursor: pointer; color: #4977ba; font-size: 12px"
+ @click="deleteSession(session)"
+ ><icon-delete style="font-size: 14px" />鍒犻櫎</span
+ >
+ </template>
+ </a-popover>
</div>
</div>
</a-scrollbar>
@@ -85,8 +94,10 @@
chatApi,
getDialogListApi,
getSessionDetailsApi,
+ deleteSessionApi,
sessionListApi
} from "@/api/session";
+
import { queryCanvasList } from "@/api/Agent";
const emit = defineEmits(["querySessionDetail","changeAgentType"]);
import logo from "@/assets/images/model.png";
@@ -161,6 +172,14 @@
}
};
+//鏍规嵁浼氳瘽id鍒犻櫎浼氳瘽
+const deleteSession = async (session) => {
+ const { code } = await deleteSessionApi([session.id]);
+ if (code === 200) {
+ Message.success('鍒犻櫎鎴愬姛');
+ querySessionList('');
+ }
+};
const querySessionDetail = async (session) => {
console.log(session, 'session');
@@ -168,13 +187,15 @@
emit('querySessionDetail',session);
}
onBeforeMount(()=>{
- DialogList()
+ // DialogList()
+ querySessionList('');
})
onMounted(() => {
EventBus.on("history", () => {
emit('changeAgentType','3');
- DialogList()
+ // DialogList()
+ querySessionList('');
});
})
diff --git a/src/views/sessionManager/index.vue b/src/views/sessionManager/index.vue
index d09263d..c2af897 100644
--- a/src/views/sessionManager/index.vue
+++ b/src/views/sessionManager/index.vue
@@ -755,6 +755,10 @@
transition: all var(--animation-duration) var(--animation-transition);
display: flex;
align-items: flex-end;
+ overflow: hidden; /* 闅愯棌瓒呭嚭鐨勫唴瀹� */
+ text-overflow: ellipsis; /* 浣跨敤鐪佺暐鍙锋潵浠ｆ浛琚殣钘忕殑鏂囧瓧 */
+ white-space: nowrap; /* 涓嶆崲琛岋紝浣垮唴瀹瑰湪涓�琛屽唴鏄剧ず */
+ max-width: 200px;
}
}
</style>
diff --git a/src/views/sessionManager/style/layout.css b/src/views/sessionManager/style/layout.css
index 791e160..6371bfb 100644
--- a/src/views/sessionManager/style/layout.css
+++ b/src/views/sessionManager/style/layout.css
@@ -1362,7 +1362,7 @@
height: 28px;
line-height: 28px;
text-align: center;
- content: "\56de\5230\9996\9875";
+ /*content: "\56de\5230\9996\9875";*/
position: absolute;
left: 64px;
display: none;
@@ -1378,7 +1378,7 @@
.myAgent___djnd_ .myAgentHome___PG6IZ {
width: 32px;
height: 32px;
- background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABhCAYAAAApxKSdAAAACXBIWXMAACE4AAAhOAFFljFgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAUUSURBVHgB7Z29bhtHFIWPHQN2J7lKqnhYpYvpIukCbJEAKQJEegLReYFIT0DrCSI9QEDqCSIDaQIEIOukiJwyza5SJWlId3FFz+HuGmuSSw6p+dlZ3g84luhdUeI9M3fmziyXgBCUe/DHYY0Wj/tgWmjV42zFcWe4MIBBPNJ6qqW0uvAbXFvQgKzQK62bQhkaCIPc10q1Zi3XH1o/IG9cwUm0RogrgDY1KmLgHYX9DvyiBvDYI77XmiD+oLlQHw7hIDoCMBOt1U9w0BsU9mOAtaUUFk3oQoIfzAQFCf5dNMEdTFCQ4NtQih1NSIGgf3ibxOJt5UrAB1gNK72vIdjiI61HWr+YnNxDXK0rJiULsV65GJeiIescLSTTeobKSutiCuojX8kU3MBx4I3WeNVBBRl4fWiCyoB8v2JAAkk9PmDwT8sH1TEghRjgC27scCx41wO43KAg+ILxTvhNaUACwTc04Z0B30LwzTzm5Rjw3sgseIG1wGMawMBPIOQcqvzrNIMHOg9Q5KK953O90/rFC+BhJRH8PQZ+fu7SjC7HAIV95yu99vjlxfvBJx8nwHd6IfNJAkccOjHg6OgIs9lsra6vr2GTNE03/k7q8HAhyJ/2gM9O65/4kT7/mwEcoZwYsPQiV3BwcABb9Ho9KKU2njccDjGdLlxx+InBBPBAAR86ydRPaIC9SASi3+8bnXd+fr78nw8NJ39uDJjXAVFPP7dp/VmWLR9g6w6Huo/IOTk5MTpvZesn/93AiP/dXCwd9SyILT9Jko3n1bZ+8s8rGPGvoVHbEXcPMM39V1dX9Qd/19PPNxta959D4HUGF0RrAFs/8/8mxuPxXLUwtfx2WX+cxdivZ3DFA0SKldZPuPTAKrikbOlMOX+9zFu/Q2iAQoSY5H7mfeb/tXCT8MdneU9wNNCuQUXZA0ynnrUznyqOcrspUY4BJunHqPU3gOgMsNr6G0B0BpgUXrG0fhKVAaaF1/HxMWIhKgNMcj9Tz82Nk6rVGdav/tJ5eraJ0Wi01XPq1r/xOS8uLkJc6XYnRTMNXdf62eIvLy+jyftVghnQ7Xahe8FW59fBTRYOzosDNI1hJdz0lBQkBflkMBjMU5iL13pXRb8fYAJrB/a2db0oFHthAOEUliaYFHE+aaUBdZsvvFhApyM0idYZwOCvW4JmIWdSzPmidQaYrAGZ7iX4oFUGnJ2dGdUCTRqMozeANQCLsE6nA10JG/0Mx4KmDMbBCjEWR2yxu8LAM98vXelmCA2ovVLCI8EMYODWbpbvCXtTBzQVMSAwYkBgxIDAtNKAXWdGIRADAiMpKDA0IIMQikx6QGDEgMCIAYGRMSAsMgaEhgbcQgjFa+kBYZnIGBCWWzEgLPNBOJ6Fk/aR8Y5ZCvktKwX/PJZ7xoVjfs+4chYU11tK2sE85qUBLyH4Zh5z6QHhGPOf6r2j+TEbcgdFP2RaHX5TrYQlDflj5RXE5Q1cG/lWnhYpReUGKdUewGnRmhvnCJbgmxey8sHiZ8iwF3AsUBBckKHI/SWLq6HsBc8huML4DiK80D6WnBqLzN68UFCmopheYJOVYgcU5FOVbAVfYUcUZGoaLPglCtITdg2+tZUFBTFh2+ArWEYh/7z0WIIQSiM43lt5AWAmWhLHylN4QmkNEXfAbGqEQKsHSfHLYwiSq8AnaAAKeaW3D8VbijwNW5nh3IN9FPI/jnpaPKZi2/SfFuJu4W3x9RqWL+N5C+7ruKpBAgLkAAAAAElFTkSuQmCC) no-repeat;
+ background: url('../../../assets/images/icon-logo.png') no-repeat;
background-size: 100% 100%;
cursor: pointer;
margin-bottom: 16px
@@ -1508,7 +1508,7 @@
}
.myAgent___djnd_ .myAgentTool___Y1_mC .myAgentToolIconSquare___Rj1o_:after {
- width: 70px;
+ width: 80px;
height: 28px;
line-height: 28px;
text-align: center;
--
Gitblit v1.8.0