From f848280fe3ed8841147fcc8f26a788580b82ae0c Mon Sep 17 00:00:00 2001
From: liudong <liudong>
Date: 星期六, 17 八月 2024 10:37:46 +0800
Subject: [PATCH] 首页页面bug修改
---
src/views/dmx/agent/components/sessionAction.vue | 373 +++++++++++++++++++++++++++-------------------------
1 files changed, 194 insertions(+), 179 deletions(-)
diff --git a/src/views/dmx/agent/components/sessionAction.vue b/src/views/dmx/agent/components/sessionAction.vue
index e084802..13ef5bf 100644
--- a/src/views/dmx/agent/components/sessionAction.vue
+++ b/src/views/dmx/agent/components/sessionAction.vue
@@ -15,7 +15,7 @@
ref="scrollbar"
id="home"
class="chat-list"
- style="width: 90%; overflow: auto; height: 70vh; margin: 0px auto;"
+ style="width: 90%; overflow: auto; height: 70vh; margin: 0px auto"
>
<div class="chat-item" v-for="sessionDetail in sessionDetailList">
<a-comment
@@ -23,9 +23,16 @@
avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
>
<template #content>
- <div :class="{ light: theme === 'light' }" style="background-color: var(--color-bg-2);color: var(--color-text-3);border: none;padding: 16px;">{{
- sessionDetail.content
- }}</div>
+ <div
+ :class="{ light: theme === 'light' }"
+ style="
+ background-color: var(--color-bg-2);
+ color: var(--color-text-3);
+ border: none;
+ padding: 16px;
+ "
+ >{{ sessionDetail.content }}</div
+ >
</template>
</a-comment>
<a-comment
@@ -35,11 +42,15 @@
<template #content>
<a-card
class="chat-item-answer"
- style="background-color: var(--color-bg-2);color: var(--color-text-3);border: none"
+ style="
+ background-color: var(--color-bg-2);
+ color: var(--color-text-3);
+ border: none;
+ "
>
<div :class="{ light: theme === 'light' }">{{
- sessionDetail.content
- }}</div>
+ sessionDetail.content
+ }}</div>
</a-card>
</template>
</a-comment>
@@ -53,7 +64,11 @@
auto-size
v-model="displayedText"
class="chat-item-answer"
- style="background-color: var(--color-bg-2);color: var(--color-text-3);border: none"
+ style="
+ background-color: var(--color-bg-2);
+ color: var(--color-text-3);
+ border: none;
+ "
>
</a-textarea>
</template>
@@ -70,196 +85,196 @@
<template #suffix>
<icon-send style="cursor: pointer" @click="sendMessage" />
</template> </a-input
- ></div>
+ ></div>
<div class="text">鍐呭鐢盇I鐢熸垚锛屼粎渚涘弬鑰�</div>
</div>
</div>
</template>
<script setup lang="ts">
-import {
- IconMoreVertical,
- IconQuestionCircleFill,
- IconPoweroff,
- IconCommon,
- IconSend,
-} from '@arco-design/web-vue/es/icon';
-import img1 from '@/assets/images/u64.png';
-import img2 from '@/assets/images/u69.png';
-import img3 from '@/assets/images/u74.png';
-import { ref, onMounted, computed, reactive, nextTick, watch } from 'vue';
-import { useUserStore, useAppStore } from '@/store';
-import {
- sessionListApi,
- deleteSessionApi,
- getSessionDetailsApi,
- chatApi,
-} from '@/api/session';
-import { Message } from '@arco-design/web-vue';
-const userStore = useUserStore();
-const appStore = useAppStore();
-const theme = computed(() => {
- return appStore.theme;
-});
-const heightrg = ref('calc(100vh - 100px)');
-const sessionList = ref([]); //浼氳瘽鍒楄〃
-const sessionDetailList = ref([]); //鏍规嵁浼氳瘽id鍑烘潵鐨勪細璇濊鎯�
-const activeSessionId = ref('');
-const inputMsg = ref('');
-const scrollbar = ref(null);
+ import {
+ IconMoreVertical,
+ IconQuestionCircleFill,
+ IconPoweroff,
+ IconCommon,
+ IconSend,
+ } from '@arco-design/web-vue/es/icon';
+ import img1 from '@/assets/images/u64.png';
+ import img2 from '@/assets/images/u69.png';
+ import img3 from '@/assets/images/u74.png';
+ import { ref, onMounted, computed, reactive, nextTick, watch } from 'vue';
+ import { useUserStore, useAppStore } from '@/store';
+ import {
+ sessionListApi,
+ deleteSessionApi,
+ getSessionDetailsApi,
+ chatApi,
+ } from '@/api/session';
+ import { Message } from '@arco-design/web-vue';
+ const userStore = useUserStore();
+ const appStore = useAppStore();
+ const theme = computed(() => {
+ return appStore.theme;
+ });
+ const heightrg = ref('calc(100vh - 100px)');
+ const sessionList = ref([]); //浼氳瘽鍒楄〃
+ const sessionDetailList = ref([]); //鏍规嵁浼氳瘽id鍑烘潵鐨勪細璇濊鎯�
+ const activeSessionId = ref('');
+ const inputMsg = ref('');
+ const scrollbar = ref(null);
-const currIndex = ref(0);
-const displayedText = ref(''); // 姝ｅ湪鏄剧ず鐨勬枃瀛�
-let timer: number | null = null;
-const streamStr = ref('');
-const modalObj = reactive({ add: false });
-//鏌ヨ浼氳瘽鍒楄〃
-const querySessionList = async () => {
- const { code, data } = await sessionListApi();
- if (code === 200) {
- sessionList.value = data;
- if (Array.isArray(data) && data.length > 0) {
- activeSessionId.value = data[1].id;
- const res = await getSessionDetailsApi(data[0].id);
+ const currIndex = ref(0);
+ const displayedText = ref(''); // 姝ｅ湪鏄剧ず鐨勬枃瀛�
+ let timer: number | null = null;
+ const streamStr = ref('');
+ const modalObj = reactive({ add: false });
+ //鏌ヨ浼氳瘽鍒楄〃
+ const querySessionList = async () => {
+ const { code, data } = await sessionListApi();
+ if (code === 200) {
+ sessionList.value = data;
+ if (Array.isArray(data) && data.length > 0) {
+ activeSessionId.value = data[1].id;
+ const res = await getSessionDetailsApi(data[0].id);
+ if (res.code === 200) {
+ sessionDetailList.value = res.data.message;
+ refreshScroll();
+ }
+ }
+ } else {
+ Message.warning('鏌ヨ澶辫触');
+ }
+ };
+ //鏍规嵁浼氳瘽id鍒犻櫎浼氳瘽
+ const deleteSession = async (session) => {
+ const { code } = await deleteSessionApi([session.id]);
+ if (code === 200) {
+ Message.success('鍒犻櫎鎴愬姛');
+ querySessionList();
+ }
+ };
+ // eslint-disable-next-line prettier/prettier
+ // 鏂板浼氳瘽涔嬪悗鍒锋柊浼氳瘽鍒楄〃
+ const addSession = () => {
+ querySessionList();
+ };
+ // 鍒濆鍖栨暟鎹�
+ const initData = () => {
+ querySessionList();
+ };
+ // 鑾峰彇鐧诲綍淇℃伅
+ const userName = computed(() => {
+ return userStore.name;
+ });
+ const avatar = computed(() => {
+ return userStore.avatar;
+ });
+ const refreshScroll = () => {
+ nextTick(() => {
+ const container = document.getElementById('home');
+ scrollbar.value.scrollTop(container.scrollHeight);
+ });
+ };
+ // 鏍规嵁浼氳瘽id 鏌ヨ浼氳瘽璇︽儏
+ const querySessionDetail = async (session) => {
+ activeSessionId.value = session.id;
+ const { code, data } = await getSessionDetailsApi(session.id);
+ if (code === 200) {
+ sessionDetailList.value = data.message;
+ refreshScroll(); //鍒锋柊婊氬姩鏉′綅缃�
+ }
+ };
+ const sendMessage = async () => {
+ if (inputMsg.value) {
+ const { code, data } = await chatApi({
+ conversation_id: activeSessionId.value,
+ messages: inputMsg.value,
+ });
+ const res = await getSessionDetailsApi(activeSessionId.value);
if (res.code === 200) {
- sessionDetailList.value = res.data.message;
+ sessionDetailList.value = res.data.message.map((item, index) => {
+ if (index === res.data.message.length - 1) {
+ item.role = 'last';
+ displayedText.value = '';
+ currIndex.value = 0;
+ streamStr.value = item.content;
+ startDisplayStr();
+ }
+ return item;
+ });
refreshScroll();
}
+ inputMsg.value = '';
+ } else {
+ Message.warning('娑堟伅涓嶈兘涓虹┖');
}
- } else {
- Message.warning('鏌ヨ澶辫触');
- }
-};
-//鏍规嵁浼氳瘽id鍒犻櫎浼氳瘽
-const deleteSession = async (session) => {
- const { code } = await deleteSessionApi([session.id]);
- if (code === 200) {
- Message.success('鍒犻櫎鎴愬姛');
- querySessionList();
- }
-};
-// eslint-disable-next-line prettier/prettier
-// 鏂板浼氳瘽涔嬪悗鍒锋柊浼氳瘽鍒楄〃
-const addSession = () => {
- querySessionList();
-};
-// 鍒濆鍖栨暟鎹�
-const initData = () => {
- querySessionList();
-};
-// 鑾峰彇鐧诲綍淇℃伅
-const userName = computed(() => {
- return userStore.name;
-});
-const avatar = computed(() => {
- return userStore.avatar;
-});
-const refreshScroll = () => {
- nextTick(() => {
- const container = document.getElementById('home');
- scrollbar.value.scrollTop(container.scrollHeight);
+ };
+ onMounted(() => {
+ initData();
});
-};
-// 鏍规嵁浼氳瘽id 鏌ヨ浼氳瘽璇︽儏
-const querySessionDetail = async (session) => {
- activeSessionId.value = session.id;
- const { code, data } = await getSessionDetailsApi(session.id);
- if (code === 200) {
- sessionDetailList.value = data.message;
- refreshScroll(); //鍒锋柊婊氬姩鏉′綅缃�
- }
-};
-const sendMessage = async () => {
- if (inputMsg.value) {
- const { code, data } = await chatApi({
- conversation_id: activeSessionId.value,
- messages: inputMsg.value,
- });
- const res = await getSessionDetailsApi(activeSessionId.value);
- if (res.code === 200) {
- sessionDetailList.value = res.data.message.map((item, index) => {
- if (index === res.data.message.length - 1) {
- item.role = 'last';
- displayedText.value = '';
- currIndex.value = 0;
- streamStr.value = item.content;
- startDisplayStr();
- }
- return item;
- });
- refreshScroll();
+ //鏂囧瓧鍔ㄦ�佽緭鍑�
+ const startDisplayStr = () => {
+ if (timer) {
+ clearTimeout(timer!);
}
- inputMsg.value = '';
- } else {
- Message.warning('娑堟伅涓嶈兘涓虹┖');
- }
-};
-onMounted(() => {
- initData();
-});
-//鏂囧瓧鍔ㄦ�佽緭鍑�
-const startDisplayStr = () => {
- if (timer) {
- clearTimeout(timer!);
- }
- const res = streamStr.value;
- // 灏嗘暟缁勪腑鐨勫瓧绗︿覆鎷兼帴璧锋潵
- if (currIndex.value < res.length) {
- displayedText.value += res[currIndex.value];
- currIndex.value++;
- setTimeout(startDisplayStr, 100);
- } else {
- clearTimeout(timer!);
- timer = null;
- }
-};
-watch(
- () => scrollbar.value,
- (newScroll, oldScroll) => {
- if (newScroll) {
- // 鑾峰彇a-scroll鐨勯珮搴�
- const height = newScroll.$el.offsetHeight;
- console.log('a-scroll height changed to:', height);
+ const res = streamStr.value;
+ // 灏嗘暟缁勪腑鐨勫瓧绗︿覆鎷兼帴璧锋潵
+ if (currIndex.value < res.length) {
+ displayedText.value += res[currIndex.value];
+ currIndex.value++;
+ setTimeout(startDisplayStr, 100);
+ } else {
+ clearTimeout(timer!);
+ timer = null;
}
- },
- { deep: true }
-);
+ };
+ watch(
+ () => scrollbar.value,
+ (newScroll, oldScroll) => {
+ if (newScroll) {
+ // 鑾峰彇a-scroll鐨勯珮搴�
+ const height = newScroll.$el.offsetHeight;
+ console.log('a-scroll height changed to:', height);
+ }
+ },
+ { deep: true }
+ );
</script>
<style scoped lang="less">
-.container {
- width: 100%;
- display: flex;
-}
-//.light {
-// color: white !important;
-//}
-.bottom {
- width: 100%;
- position: absolute;
- bottom: 40px;
- left: 0;
-
- .input {
- margin-left: 20%;
- width: 60%;
+ .container {
+ width: 100%;
+ display: flex;
}
+ //.light {
+ // color: white !important;
+ //}
+ .bottom {
+ width: 100%;
+ position: absolute;
+ bottom: 40px;
+ left: 0;
- .text {
- margin-left: 40%;
- font-size: 12px;
- color: lightgrey;
- line-height: 40px;
- }
-}
-.chat-list {
- width: 90%;
- margin: 0px auto;
- .chat-item {
- margin-top: 20px;
- .chat-item-answer {
- color: white;
+ .input {
+ margin-left: 20%;
+ width: 60%;
+ }
+
+ .text {
+ margin-left: 40%;
+ font-size: 12px;
+ color: lightgrey;
+ line-height: 40px;
}
}
-}
+ .chat-list {
+ width: 90%;
+ margin: 0px auto;
+ .chat-item {
+ margin-top: 20px;
+ .chat-item-answer {
+ color: white;
+ }
+ }
+ }
</style>
--
Gitblit v1.8.0