From 5614a89478982b1b70afeab266b538d7692b65c3 Mon Sep 17 00:00:00 2001
From: yinbangzhong <zhongbangyin@126.com>
Date: 星期四, 08 八月 2024 20:18:25 +0800
Subject: [PATCH] 滚动显示问题
---
src/router/routes/modules/session.ts | 13 -
/dev/null | 421 ----------------------------------------------------
src/views/sessionManager/index.vue | 2
src/views/sessionManager/components/addSession.vue | 0
4 files changed, 3 insertions(+), 433 deletions(-)
diff --git a/src/router/routes/modules/session.ts b/src/router/routes/modules/session.ts
index 7404798..7728a62 100644
--- a/src/router/routes/modules/session.ts
+++ b/src/router/routes/modules/session.ts
@@ -20,18 +20,9 @@
requiresAuth: true,
roles: ['*'],
},
- component:()=>import('@/views/session/sessionManager/index.vue'),
+ component:()=>import('@/views/sessionManager/index.vue'),
},
- {
- path:'sessionRecordsManager',
- name:"sessionRecordsManager",
- meta:{
- locale: '浼氳瘽璁板綍',
- requiresAuth: true,
- roles: ['*'],
- },
- component:()=>import('@/views/session/sessionRecordsManager/index.vue'),
- }
+
]
};
export default session;
\ No newline at end of file
diff --git a/src/views/session/sessionManager/index.vue b/src/views/session/sessionManager/index.vue
deleted file mode 100644
index 1ab6516..0000000
--- a/src/views/session/sessionManager/index.vue
+++ /dev/null
@@ -1,421 +0,0 @@
-<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 AddSession from './components/addSession.vue';
- 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 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[0].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.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('娑堟伅涓嶈兘涓虹┖');
- }
- };
- 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);
- }
- },
- { deep: true }
- );
-</script>
-
-<template>
- <div class="container">
- <AddSession :modalObj="modalObj" @addSession="addSession"></AddSession>
- <a-row :gutter="[0, 0]">
- <a-col :span="5">
- <a-card class="left">
- <template #cover>
- <a-button
- type="outline"
- class="card-btn"
- @click="modalObj.add = true"
- >
- +鏂板缓浼氳瘽
- </a-button>
- </template>
- <a-scrollbar class="left-list" style="height: 60vh; overflow-y: auto">
- <div
- class="item"
- :class="{ isLeftActive: activeSessionId === session.id }"
- v-for="session in sessionList"
- :key="session.id"
- @click="querySessionDetail(session)"
- >
- <div class="item-left">
- <IconQuestionCircleFill />銆�
- {{ session.name }}
- </div>
- <div class="item-right">
- <a-popover position="bottom">
- <icon-more-vertical></icon-more-vertical>
- <template #content>
- <!--<div>
- <a-button type="text" size="mini">缂栬緫</a-button>
- </div>-->
- <div>
- <a-button
- type="text"
- size="mini"
- @click="deleteSession(session)"
- >鍒犻櫎</a-button
- >
- </div>
- </template>
- </a-popover>
- </div>
- </div>
- </a-scrollbar>
- <div class="left-bottom">
- <div class="item"><IconCommon />銆�<span>鍚戞湅鍙嬫帹鑽�</span></div>
- <div class="item"><IconCommon />銆�<span>鏈�鏂版秷鎭�</span></div>
- <div class="item"><IconCommon />銆�<span>闂鍙嶉</span></div>
- <div class="item"><IconCommon />銆�<span>甯歌闂</span></div>
- <div class="item"><IconPoweroff />銆�<span>閫�鍑�</span></div>
- </div>
- </a-card>
- </a-col>
- <a-col :span="19">
- <a-card class="right">
- <div v-if="sessionDetailList.length === 0">
- <div class="right-title">ChatAI</div>
- <a-row justify="center" class="right-middle">
- <a-col :span="5" class="item">
- <p><a-image :src="img1" width="50px"></a-image></p>
- <p>绀轰緥</p>
- </a-col>
- <a-col :span="5" class="item">
- <p><a-image :src="img2" width="50px"></a-image></p>
- <p>鏍稿績鍔熻兘</p>
- </a-col>
- <a-col :span="5" class="item">
- <p><a-image :src="img3" width="50px"></a-image></p>
- <p>灞�闄愭��</p>
- </a-col>
- </a-row>
- <a-row justify="center" class="right-middle-list">
- <a-col :span="6" class="item">鈥滆鐢ㄧ畝鍗曠殑鏈瑙ｉ噴閲忓瓙璁＄畻鈥�</a-col>
- <a-col :span="6" class="item">鍙互瀵瑰巻鍙插璇濊繘琛岃蹇�</a-col>
- <a-col :span="6" class="item">鍙兘浼氬嚭鐜伴敊璇殑鍐呭</a-col>
- </a-row>
- <a-row justify="center" class="right-middle-list">
- <a-col :span="6" class="item"
- >鈥滄彁渚涗竴浜涘簡绁�10宀佸瀛愮敓鏃ョ殑鍒涙剰锛熲��</a-col
- >
- <a-col :span="6" class="item">鍏佽鐢ㄦ埛瀵圭瓟妗堣繘琛屼慨姝�</a-col>
- <a-col :span="6" class="item">鍙兘浼氫骇鐢熸湁瀹虫垨铏氬亣鐨勫唴瀹�</a-col>
- </a-row>
- <a-row justify="center" class="right-middle-list">
- <a-col :span="6" class="item"
- >鈥滃浣曞湪Javascript涓彂鍑篽ttp璇锋眰锛熲��</a-col
- >
- <a-col :span="6" class="item">鍙互鎺ュ彈鎴栨嫆缁濅笉鎭板綋鐨勮缁�</a-col>
- <a-col :span="6" class="item"
- >瀵�2023骞翠互鍚庡緱涓栫晫鍜屼簨浠朵簡瑙ｆ湁闄�</a-col
- >
- </a-row>
- </div>
- <a-scrollbar
- ref="scrollbar"
- id="home"
- v-else
- class="chat-list"
- style="width: 90%; overflow: auto; height: 70vh; margin: 0px auto"
- >
- <div class="chat-item" v-for="sessionDetail in sessionDetailList">
- <a-comment
- v-if="sessionDetail.role === 'user'"
- avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
- >
- <template #content>
- <div :class="{ light: theme === 'light' }">{{
- sessionDetail.content
- }}</div>
- </template>
- </a-comment>
- <a-comment
- v-else-if="sessionDetail.role === 'assistant'"
- avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp"
- >
- <template #content>
- <a-card
- class="chat-item-answer"
- style="background-color: rgba(63, 64, 79, 1)"
- >
- <div :class="{ light: theme === 'light' }">{{
- sessionDetail.content
- }}</div>
- </a-card>
- </template>
- </a-comment>
- <a-comment
- v-else-if="sessionDetail.role === 'last'"
- avatar="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/9eeb1800d9b78349b24682c3518ac4a3.png~tplv-uwbnlip3yd-webp.webp"
- >
- <template #content>
- <a-textarea
- readonly
- auto-size
- v-model="displayedText"
- class="chat-item-answer"
- style="background-color: rgba(63, 64, 79, 1)"
- >
- </a-textarea>
- </template>
- </a-comment>
- </div>
- </a-scrollbar>
- <div class="bottom">
- <div class="input">
- <a-input
- v-model="inputMsg"
- @keydown.enter="sendMessage"
- placeholder="杈撳叆鎮ㄦ兂浜嗚В鐨勫唴瀹癸紝鎸塃nter鍙戦��"
- >
- <template #suffix>
- <icon-send style="cursor: pointer" @click="sendMessage" />
- </template> </a-input
- ></div>
- <div class="text"
- >鍐呭鐢盇I鐢熸垚锛屼粎渚涘弬鑰冿紝璇烽伒瀹堛�婄敤鎴峰崗璁�嬨�併�婁釜浜轰俊鎭繚鎶よ鍒欍�嬶紝鍩轰簬ChatGPT澶фā鍨嬶紝鐗堟湰锛歏3.3.0</div
- >
- </div>
- </a-card>
- </a-col>
- </a-row>
- </div>
-</template>
-
-<style scoped lang="scss">
- .isLeftActive {
- background-color: rgba(52, 53, 66, 1);
- }
- .light {
- color: white !important;
- }
- .container {
- background-color: #1d2129;
- .left,
- .right {
- color: white;
- height: calc(100vh - 60px);
- border: 0px;
- }
- .left {
- position: relative;
- background-color: rgba(30, 33, 34, 1);
- .card-btn {
- width: 90%;
- margin: 15px auto;
- border: 1px solid white;
- color: white;
- }
- .left-list {
- .item {
- display: flex;
- justify-content: space-between;
- padding-left: 30px;
- color: white;
- cursor: pointer;
- line-height: 40px;
- .item-right {
- margin-right: 10px;
- }
- &:hover {
- background-color: rgba(52, 53, 66, 1);
- }
- }
- }
- .left-bottom {
- position: absolute;
- bottom: 30px;
- left: 40px;
- .item {
- text-align: left;
- color: white;
- font-size: 12px;
- line-height: 30px;
- }
- }
- }
- .right {
- position: relative;
- background-color: rgba(52, 53, 66, 1);
- .right-title {
- font-size: 30px;
- color: white;
- text-align: center;
- margin-top: 100px;
- }
- .right-middle {
- margin-top: 40px;
- text-align: center;
- color: white;
- }
- .right-middle-list {
- color: white;
- .item {
- padding-top: 15px;
- text-align: center;
- height: 50px;
- background-color: rgba(63, 64, 79, 1);
- margin: 8px 20px;
- border-radius: 10px;
- }
- }
- .bottom {
- width: 100%;
- position: absolute;
- bottom: 40px;
- left: 20%;
- .input {
- width: 60%;
- }
- .text {
- 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>
diff --git a/src/views/session/sessionManager/components/addSession.vue b/src/views/sessionManager/components/addSession.vue
similarity index 100%
rename from src/views/session/sessionManager/components/addSession.vue
rename to src/views/sessionManager/components/addSession.vue
diff --git a/src/views/session/sessionRecordsManager/index.vue b/src/views/sessionManager/index.vue
similarity index 99%
rename from src/views/session/sessionRecordsManager/index.vue
rename to src/views/sessionManager/index.vue
index 15079e2..d0d32a3 100644
--- a/src/views/session/sessionRecordsManager/index.vue
+++ b/src/views/sessionManager/index.vue
@@ -323,7 +323,7 @@
import { Message } from '@arco-design/web-vue';
import { EventSourceParserStream } from 'eventsource-parser/stream';
import moment from 'moment';
- import AddSession from '@/views/session/sessionManager/components/addSession.vue';
+ import AddSession from '@/views/sessionManager/components/addSession.vue';
import {
chatApi,
getDialogListApi,
--
Gitblit v1.8.0