From 90675cb210f5a2afc4766e6fd091776a14397d48 Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期三, 23 四月 2025 17:34:01 +0800
Subject: [PATCH] 最新版
---
src/views/Start.vue | 1086 +++++++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 982 insertions(+), 104 deletions(-)
diff --git a/src/views/Start.vue b/src/views/Start.vue
index ec86788..498c399 100644
--- a/src/views/Start.vue
+++ b/src/views/Start.vue
@@ -1,183 +1,446 @@
<template>
<div class="chat-box">
+ <!-- 杩斿洖棣栭〉鏍囩 -->
+ <div class="chat-back-icon" >
+ <el-icon :size="25" color="#6e3d3c" @click="handleBackClick()" style="cursor: pointer;">
+ <Back />
+ </el-icon>
+ </div>
+ <!-- 鑱婂ぉ妗嗗唴瀹瑰鍣� -->
<div class="chat-box-content" ref="messagesContainer">
- <div class="chat-date">03/15 13:10:00</div>
+ <!-- 褰撳墠鏃堕棿鏄剧ず -->
+ <div class="chat-date">{{ currentTime }}</div>
+ <!-- 搴曢儴淇℃伅灞曠ず -->
<div class="chat-back-info">
+ <!-- 澶村儚 -->
<div class="back-avator">
<img src="../assets/images/image2.png" alt="" />
</div>
+ <!-- 鍩虹鍥句功淇℃伅 -->
<div class="base-book-box">
- Hi锛屾垜鏄�****鍥句功棣咥I鏅鸿兘鍥句功妫�绱㈠姪鎵嬶紝甯綘杞绘澗妫�绱功绫�!璇曡瘯闂垜:'鏈夋病鏈夊叧浜嶺X鐨勪功?"鎴栤�滄帹鑽愪竴鏈琗X棰嗗煙鐨勪功'鍚�!
+ Hi锛屾垜鏄檿瑗跨渷楂樻柊鍖哄浘涔﹂AI鏅鸿兘鍥句功妫�绱㈠姪鎵嬶紝甯綘杞绘澗妫�绱功绫�!璇曡瘯闂垜锛氣�滄湁娌℃湁鍏充簬XX鐨勪功锛熲�濇垨鈥滄帹鑽愪竴鏈琗X棰嗗煙鐨勪功鈥濆惂锛�
</div>
</div>
+ <!-- 鐑棬闂鍒楄〃 -->
<div class="back-item">
+ <!-- 鐑棬闂鏍囬 -->
<div class="back-item-title">
<img src="../assets/images/redian.png" alt="" />
<span>鐑棬闂</span>
</div>
+ <!-- 鐑棬闂椤� -->
<ul>
- <li>
+ <li class="hot-question" v-for="(item, index) in limitedQuestionList" :key="index"
+ @click="handleQuestionClick(item.question)">
<img src="../assets/images/wenti.png" alt="" />
- <span>鍥句功棣嗙殑寮�闂鏃堕棶鏄粈涔�?</span>
- </li>
- <li>
- <img src="../assets/images/wenti.png" alt="" />
- <span>瓒呮湡杩樹功濡備綍澶勭悊?</span>
- </li>
- <li>
- <img src="../assets/images/wenti.png" alt="" />
- <span>浠�涔堟槸鍥句功棣嗙綒娆�?</span>
- </li>
- <li>
- <img src="../assets/images/wenti.png" alt="" />
- <span>鍊熼構鍥句功閬楀け濡備綍澶勭悊?</span>
- </li>
- <li>
- <img src="../assets/images/wenti.png" alt="" />
- <span>濡備綍鍊熼槄棣嗚棌鍥句功鍜屾湡鍒�?</span>
- </li>
- <li>
- <img src="../assets/images/wenti.png" alt="" />
- <span>璇昏�呯殑鍊熼槄鏈熼檺鏄涔�?</span>
+ <span>{{ item.question }}</span>
</li>
</ul>
- <div class="chat-change">
+ <!-- 鎹竴鎹㈡寜閽� -->
+ <div class="chat-change" @click="shuffleQuestions()">
<img src="../assets/images/shuxin1.png" alt="" />
<span>鎹竴鎹�</span>
</div>
</div>
- <div
- v-for="(item, index) in message"
- :key="index"
- :class="['message', item.type === 'user' ? 'user-message' : 'assistant-message']"
- >
- <el-avatar
- style="min-width: 40px"
- :size="screenWidth > 375 ? 60 : 40"
- v-if="item.type != 'user'"
- :src="assistantAvatar"
- />
- <div :class="['message-content', item.type === 'user' ? 'user-message-content' : '']">
- <div class="message-text" v-html="item.content"></div>
- <div class="message-footer" v-if="item.type != 'user'">
- <span class="message-time">{{ item.time }}</span>
+ <!-- 娑堟伅鍒楄〃 -->
+ <div v-for="(item, index) in message" :key="index" class="chat-box-content-item">
+ <div v-if="item.type === 'user'" class="chat-date">{{ item.time }}</div>
+ <div :class="['message', item.type === 'user' ? 'user-message' : 'assistant-message']">
+ <!-- 鍔╂墜澶村儚 -->
+ <el-avatar class="assistant-avatar" :size="screenWidth > 375 ? 60 : 30"
+ :src="[item.type === 'user' ? userProfilePicture : assistantAvatar]" />
+ <!-- 娑堟伅鍐呭 -->
+ <div :class="['message-content', item.type === 'user' ? 'user-message-content' : '']">
+ <!-- 鐢ㄦ埛娑堟伅 -->
+ <div class="user-message-text" v-if="item.type === 'user'" v-html="item.content"></div>
+ <!-- AI List娑堟伅 -->
+ <div :class="['message-text', 'requestText' + index].join(' ')"
+ v-if="item.type != 'user' && item.txtType !== 'txt'">
+ <p class="message-text-title">AI鏅鸿兘鍥句功妫�绱㈠姪鎵嬩负鎮ㄦ壘鍒颁互涓媨{ pageData.inputValue }}鐨勪功锛岄钘忚祫婧愬涓�:</p>
+ <div v-for="(citem, cindex) in getDisplayedBooks(item)" :key="cindex">
+ <div class="message-text-header">
+ <div class="header-img">
+ <img src="../assets/images/book-mr.jpg" alt="" />
+ </div>
+ <ul class="header-main">
+ <li class="main-name">銆妠{ citem.name }}銆�</li>
+ <li class="header-main-flex">
+ <p>
+ <span class="main-title">璐ｄ换鑰�</span><span class="main-title-colon">:</span><span
+ class="main-content">{{
+ citem.author }}</span>
+ </p>
+ <p>
+ <span class="main-title">鍑虹増绀�</span><span class="main-title-colon">:</span><span
+ class="main-content">{{
+ citem.publisher
+ }}</span>
+ </p>
+ </li>
+ <li class="header-main-flex">
+ <p>
+ <span class="main-title">ISBN鍙�</span><span class="main-title-colon">:</span><span
+ class="main-content">{{ citem.isbn
+ }}</span>
+ </p>
+ <p>
+ <span class="main-title">涓婚璇�</span><span class="main-title-colon">:</span><span
+ class="main-content">{{ citem.subject
+ }}</span>
+ </p>
+ </li>
+ </ul>
+ </div>
+ <div class="message-text-main">
+ <p class="text-main-title">
+ 鍥句功绠�浠嬶細</p>
+ <p class="text-main-main">{{ citem.brief }}</p>
+ </div>
+ <div class="message-text-footer" v-if="
+ citem.books && citem.books.length > 0
+ " :class="{ 'no-border': cindex == getDisplayedBooks(item).length - 1 }">
+ <p class="text-footer-title">
+ <img src='../assets/images/table-title-bj.jpg' alt="">
+ <span>棣嗚棌淇℃伅锛�</span>
+ </p>
+ <div class="text-footer-table">
+ <table cellpadding="10">
+ <tr class="table-header">
+ <th>搴忓彿</th>
+ <th>绱功鍙�</th>
+ <th>鏉″舰鐮�</th>
+ <th>棣嗚棌鍦�</th>
+ <th>鍏ユ。鏃堕棿</th>
+ <th>涔﹀垔鐘舵��</th>
+ </tr>
+ <tr v-for="(ditem, dindex) in citem.books" :key="dindex">
+ <td>
+ {{ dindex + 1 }}
+ </td>
+ <td>
+ {{ ditem.indexNum }}
+ </td>
+ <td>{{ ditem.barcode }}</td>
+ <td>{{ ditem.libLoc }}</td>
+ <td>{{ ditem.filingDate }}</td>
+ <td>{{ ditem.collectionStatus }}</td>
+ </tr>
+ </table>
+ </div>
+ </div>
+ </div>
+ <p class="message-text-titleOne">浠ヤ笂鍐呭鐢盇I鐢熸垚锛屼粎渚涘弬鑰冦��</p>
+ <div class="message-text-change" @click="switchBooks(item)" v-if="!item.isEnd">
+ <img src="../assets/images/shuxin1.png" alt="" />
+ <span>鎹竴鎹�</span>
+ </div>
+ <div class="message-text-changeOne" v-else>
+ <span>鏁版嵁瀹岀粨</span>
+ </div>
+ </div>
+ <!-- AI 鏂囨湰娑堟伅 -->
+ <div :class="['Ai-message-text', 'requestText' + index].join(' ')"
+ v-if="item.type != 'user' && item.txtType == 'txt'">
+ <div v-html="item.content"></div>
+ </div>
+ <!-- 娑堟伅搴曢儴鏃堕棿 -->
+ <div class="message-footer" v-if="item.type != 'user'">
+ <span class="message-time">{{ item.time }}</span>
+ </div>
</div>
</div>
- <div v-if="loading" class="message assistant-message loading-message">
- <el-avatar :size="40" :src="assistantAvatar" />
+ <!-- 鍔犺浇涓姸鎬� -->
+ <div v-if="loading && index == message.length - 1" class="message assistant-message loading-message">
+ <el-avatar class="assistant-avatar" :size="screenWidth > 375 ? 60 : 30" :src="assistantAvatar" />
<div :class="['message-content', item.type === 'user' ? 'user-message-content' : '']">
- <div class="message-text">
- <span class="dot-loading">鎬濊�冧腑</span>
+ <div class="message-text-loading">
+ <span class="dot-loading">鎬濊�冧腑...</span>
</div>
</div>
</div>
</div>
</div>
+ <!-- 鑱婂ぉ搴曢儴杈撳叆鍖哄煙 -->
<div class="chat-footer">
- <div class="icon-list">
- <img src="../assets/images/liebiao1.png" alt="" />
- <img src="../assets/images/tianjia2.png" alt="" />
- </div>
+ <!-- 杈撳叆妗� -->
<div class="chat-text">
- <el-input
- type="textarea"
- :autosize="{ minRows: 2, maxRows: 10 }"
- placeholder="璇疯緭鍏ユ偍鐨勯棶棰�"
- v-model="inputValue"
- />
+ <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 3 }" placeholder="璇疯緭鍏ユ偍鐨勯棶棰�" v-model="inputValue"
+ @keyup.enter.native="handleEnter($event)" />
+ <!-- 鍙戦�佹寜閽� -->
+ <div class="select-item">
+ <img @click="sendMsg()" src="../assets/images/shangchuan2.png" alt="" />
+ </div>
</div>
+ <!-- 鍔熻兘閫夋嫨鍖哄煙 -->
<div class="select">
- <div class="select-left">
- <div class="select-item">
- <img src="../assets/images/sikao.png" alt="" />
- <span>娣卞害鎬濊�冿紙R1)</span>
- </div>
- <div class="select-item">
- <img src="../assets/images/lianwang.png" alt="" />
- <span>鑱旂綉鎼滅储</span>
- </div>
- </div>
- <div class="select-right">
- <div class="select-item">
- <img src="../assets/images/fujian1.png" alt="" />
- </div>
- <div class="select-item">
- <img @click="sendMsg()" src="../assets/images/shangchuan2.png" alt="" />
- </div>
- </div>
+ <div class="select-right"></div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
-import { nextTick, onMounted, ref, watch } from 'vue'
+import { reactive, nextTick, onMounted, ref, watch, computed } from 'vue'
+import type { Start } from '@/types/start'
+import router from '@/router/index'
+import request from '@/plugin/axios/index' // 寮曞叆axios
import defaultImg from '../assets/images/image2.png'
+import userIcon from '../assets/images/userIcon.jpg'
+import dayjs from 'dayjs'
const inputValue = ref('')
const message = ref<any>([])
const loading = ref(false)
const autoScroll = ref(true)
const messagesContainer = ref<HTMLElement | null>(null)
const assistantAvatar = defaultImg
+const userProfilePicture = userIcon
const screenWidth = ref(window.innerWidth)
+const pageData = reactive<Start>({
+ inputValue: "",
+ questionList: [
+ {
+ question: "绗竴娆℃潵鍥句功棣嗘�庝箞鍊熶功鍥炲鐪�",
+ },
+ {
+ question: "姣忔閮芥槸甯﹀瀛愮湅鐪嬪皯鍎夸功绫嶏紝鍏朵粬涔︾睄鍦ㄥ摢鐪嬪憿锛�",
+ },
+ {
+ question: "鎴戣鎬庝箞鎵炬垜鎯宠鐨勪功锛�",
+ },
+ {
+ question: "涔︾睄鎬庝箞妫�绱紵",
+ },
+ {
+ question: "涓夋ゼ鍜屽洓妤肩殑鍥句功鏈変粈涔堜笉涓�鏍凤紵",
+ },
+ ]
+})
+
+//杩斿洖棣栭〉
+const handleBackClick = () => {
+ router.push('/')
+}
const scrollToBottom = async () => {
if (!autoScroll.value) return
await nextTick()
if (messagesContainer.value) {
- messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
+ const dom1 = document.querySelector('.dot-loading')
+ const dom = document.querySelector('.requestText' + (message.value.length - 1))
+ dom1?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+ dom?.scrollIntoView({ behavior: 'smooth', block: 'start' })
}
-}
-const formatMessage = (content: string) => {
- return content.replace(/\n/g, '<br>')
}
interface ChatMessage {
content: string
type: 'user' | 'assistant'
time: string
+ txtType: 'txt' | 'List'
+ currentContentIndex: 0
+ isEnd: boolean
}
+
+// 鎹竴鎹�
+const shuffleQuestions = () => {
+ for (let i = pageData.questionList.length - 1; i > 0; i--) {
+ const j = Math.floor(Math.random() * (i + 1));
+ [pageData.questionList[i], pageData.questionList[j]] = [pageData.questionList[j], pageData.questionList[i]];
+ }
+};
+
+//鐑棬闂
+const handleQuestionClick = (question: string) => {
+ inputValue.value = question
+ sendMsg()
+}
+
+const handleEnter = (event: any) => {
+ event.preventDefault();
+ inputValue.value = inputValue.value.replace(/\n/g, "")
+ // 璋冪敤鍙戦�佹秷鎭殑鏂规硶
+ sendMsg();
+}
+
+
+// 鍙戦�佹秷鎭�
const sendMsg = async () => {
if (!inputValue.value.trim() || loading.value) return
-
const userMessage: ChatMessage = {
content: inputValue.value,
type: 'user',
time: new Date().toLocaleTimeString(),
+ txtType: 'txt',
+ currentContentIndex: 0,
+ isEnd: false,
}
- message.value.push(userMessage)
+ message.value.push(userMessage)
const messageToSend = inputValue.value
inputValue.value = ''
- loading.value = true
-
try {
- setTimeout(() => {
+ await getData(messageToSend) // 浣跨敤 await 绛夊緟 getData 瀹屾垚
+ } catch (error) {
+ console.error('鍙戦�佹秷鎭け璐�', error)
+ }
+}
+
+// 鑾峰彇鐑棬闂
+const getCommonQyestuion = async () => {
+ try {
+ const response = await request({
+ url: '/chat-messages',
+ method: 'post',
+ data: {
+ inputs: {},
+ query: "甯歌闂鍒楄〃",
+ parent_message_id: null,
+ response_mode: 'blocking',
+ conversation_id: '',
+ user: 'abc-123',
+ files: [],
+ },
+ })
+ const answerAgain = JSON.parse((response as any).answer)
+ const answerAgains = Object.keys(answerAgain.data);
+ pageData.questionList = answerAgains.map((item: any) => {
+ return {
+ question: item
+ }
+ })
+ // pageData.questionList = response.data
+ } catch (error) {
+ console.error('鑾峰彇鐑棬闂澶辫触', error)
+ }
+}
+
+// 鍐嶆鍥炵瓟
+// const answerAgain = async (index: number) => {
+// let messageToSend = ""
+// for (let i = index - 1; i >= 0; i--) {
+// if (message.value[i].type == 'user') {
+// messageToSend = message.value[i].content;
+// break;
+// }
+// }
+// // 濡傛灉鎵惧埌浜嗙敤鎴锋秷鎭唴瀹癸紝鍒欒皟鐢� getData 鏂规硶
+// if (messageToSend) {
+// try {
+// console.log(messageToSend, "messageToSend");
+
+// await getData(messageToSend); // 浣跨敤 await 绛夊緟 getData 瀹屾垚
+// } catch (error) {
+// console.error('鍙戦�佹秷鎭け璐�', error);
+// }
+// } else {
+// console.error('鏈壘鍒扮敤鎴锋秷鎭唴瀹�');
+// }
+// }
+
+
+// 鑾峰彇鏁版嵁
+const getData = async (messageToSend: any) => {
+ loading.value = true
+ try {
+ const response = await request({
+ url: '/chat-messages',
+ method: 'post',
+ data: {
+ inputs: {},
+ query: messageToSend,
+ parent_message_id: null,
+ response_mode: 'blocking',
+ conversation_id: '',
+ user: 'abc-123',
+ files: [],
+ },
+ })
+ // response.answer = response.answer.replace(/\n/g, "<br>")
+ const answerAgain = JSON.parse((response as any).answer)
+ answerAgain.msg = answerAgain.msg.replace(/\n/g, "<br>")
+ if (answerAgain.code == 1) {
const assistantMessage: ChatMessage = {
- content:
- '浣犲ソ,鍗佸ぇ鏉�涓ぇ鍌荤摐澶у帵鎻愰珮鍏氬憳婀垮湴鍏洯澶у垰鍒氭拻鍙嶅鍝堟寕鍙疯垂鍝�浼ょ殑姝岃繑鍥炵粰娉曟拻鏃︾瓑鍝堢殑鍦版柟鍙戠敓鑿插ぇ浣块鐨勬拻',
+ content: answerAgain.data,
type: 'assistant',
time: new Date().toLocaleTimeString(),
+ txtType: 'List',
+ currentContentIndex: 0,
+ isEnd: false,
}
message.value.push(assistantMessage)
- loading.value = false
- console.log(message, 'dasdas')
- }, 1000)
+ } else if (answerAgain.code == 2 || answerAgain.code == 3) {
+ const assistantMessage: ChatMessage = {
+ content: answerAgain.msg,
+ type: 'assistant',
+ time: new Date().toLocaleTimeString(),
+ txtType: 'txt',
+ currentContentIndex: 0,
+ isEnd: false,
+ }
+ message.value.push(assistantMessage)
+ }
+ loading.value = false
// 淇濆瓨娑堟伅鍒版湰鍦板瓨鍌�
localStorage.setItem('chatMessages', JSON.stringify(message.value))
} catch (error) {
+ const assistantMessage: ChatMessage = {
+ content: "褰撳墠鎿嶄綔閬囧埌涓�浜涢棶棰橈紝璇风◢鍚庡啀璇曘��",
+ type: 'assistant',
+ time: new Date().toLocaleTimeString(),
+ txtType: 'txt',
+ currentContentIndex: 0,
+ isEnd: false,
+ }
+ message.value.push(assistantMessage)
console.error('鍙戦�佹秷鎭け璐�', error)
} finally {
loading.value = false
}
}
+
// 鐩戝惉娑堟伅鍙樺寲锛岃嚜鍔ㄦ粴鍔�
watch(message.value, () => {
scrollToBottom()
})
+// 瀹氫箟涓�涓搷搴斿紡鐨勬椂闂村彉閲�
+const currentTime = ref(dayjs(new Date()).format('MM/DD HH:mm:ss'))
+
+
+// 鍙繑鍥炲墠浜斾釜鍏冪礌
+const limitedQuestionList = computed(() => {
+ return pageData.questionList.slice(0, 5);
+});
+
+const booksPerPage = 3;
+// 璁＄畻褰撳墠搴旇鏄剧ず鐨勪功绫嶉泦鍚�
+const getDisplayedBooks = (item: any) => {
+ const start = item.currentContentIndex;
+ return item.content.slice(start, start + booksPerPage);
+};
+
+// 鈥滄崲涓�鎹⑩�濇寜閽偣鍑讳簨浠跺鐞嗘柟娉�
+const switchBooks = (item: any) => {
+ const remainingItems = item.content.length - item.currentContentIndex - 3;
+ // 妫�鏌ュ墿浣欑殑鏁版嵁閲忔槸鍚﹁冻澶熸樉绀轰笅涓�椤�
+ if (remainingItems > booksPerPage) {
+ // 濡傛灉瓒冲锛岀Щ鍔ㄥ埌涓嬩竴缁勬暟鎹�
+ item.currentContentIndex += booksPerPage;
+ } else if (remainingItems > 0 && remainingItems <= booksPerPage) {
+ // 濡傛灉涓嶈冻涓�鏁撮〉浣嗚繕鏈夊墿浣欐暟鎹紝鏄剧ず鍓╀綑鐨勬墍鏈夋暟鎹�
+ item.currentContentIndex += remainingItems;
+ item.isEnd = true;
+ }
+};
+
+
+
+
// 浠庢湰鍦板瓨鍌ㄥ姞杞芥秷鎭�
onMounted(() => {
+ getCommonQyestuion()
+ // 鍒犻櫎鏈湴缂撳瓨
+ localStorage.removeItem('chatMessages');
const savedMessages = localStorage.getItem('chatMessages')
if (savedMessages) {
message.value = JSON.parse(savedMessages)
@@ -194,10 +457,25 @@
background-image: url('@/assets/images/beijing2.png');
background-position: center;
background-size: cover;
+ padding-top: 40px;
+ position: relative;
+
+ .chat-back-icon {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ text-align: left;
+ display: flex;
+
+ el-icon{
+ cursor: pointer;
+ }
+ }
+
.chat-box-content {
width: 100%;
- height: calc(100vh - 170px);
+ height: calc(100vh - 153px);
display: flex;
flex-direction: column;
overflow: auto;
@@ -205,9 +483,11 @@
align-items: flex-start;
.chat-date {
+ color: #999;
width: 100%;
text-align: center;
- margin-bottom: 30px;
+ margin-bottom: 10px;
+ margin-top: 10px;
}
.chat-send {
@@ -231,7 +511,7 @@
margin-bottom: 20px;
display: flex;
justify-content: flex-start;
-
+ min-height: 92px;
.back-avator {
margin-right: 10px;
@@ -241,6 +521,7 @@
}
.base-book-box {
+ display: inline-block;
width: 80%;
padding: 15px;
box-sizing: border-box;
@@ -268,6 +549,15 @@
border-bottom: 1px solid #e9d8bf;
}
+ .hot-question {
+ cursor: pointer;
+
+ &:hover {
+ color: #d2a25b;
+ }
+ }
+
+
img {
margin-right: 10px;
}
@@ -290,13 +580,21 @@
align-items: center;
padding: 10px 20px;
color: #d2a25b;
+ cursor: pointer;
img {
cursor: pointer;
}
}
}
+
+
+ .chat-box-content-item {
+ width: 100%;
+ }
+
}
+
.chat-footer {
width: 90%;
margin: auto;
@@ -313,6 +611,9 @@
::v-deep(.chat-text) {
margin-bottom: 10px;
+ height: 100%;
+ display: flex;
+ align-items: center;
.el-textarea__inner {
border: none !important;
@@ -349,6 +650,7 @@
color: #e1c49a;
img {
+ height: auto;
margin-right: 5px;
cursor: pointer;
}
@@ -375,29 +677,45 @@
}
}
}
+
.message {
+ width: 100%;
display: flex;
margin-bottom: 24px;
align-items: flex-start;
animation: slideIn 0.3s ease;
animation-fill-mode: forwards;
- max-width: 85%;
+ max-width: 90%;
border-radius: 12px;
// box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
padding: 16px;
padding-left: 3px;
}
+ .assistant-avatar {
+ min-width: 40px;
+ max-width: 40px;
+ height: auto;
+ }
+
.message-content {
+ display: inline-block;
+ max-width: 80%;
background: #fff;
margin-left: 10px;
border-radius: 20px;
- min-width: 200px;
- padding: 5px;
+ padding: 3px 10px;
+ margin-top: 5px;
+ margin-right: 10px;
+ }
+
+ .user-message-text {
+ color: #fff;
}
.message-text {
- padding: 12px 16px;
+ width: 100%;
+ padding: 6px 8px;
border-radius: 12px;
word-wrap: break-word;
line-height: 1.6;
@@ -405,6 +723,265 @@
transition: all 0.3s ease;
white-space: pre-wrap;
color: #333;
+
+ .message-text-title {
+ font-size: 14px;
+ color: #999;
+ line-height: 20px;
+ padding: 10px 0 20px 0;
+ }
+
+ .message-text-header {
+
+ ul {
+ list-style-type: none;
+ }
+
+ li {
+ list-style-type: none;
+ }
+
+ .header-img {
+ display: flex;
+ justify-content: center;
+
+ img {
+ width: 65%;
+ }
+ }
+
+ .header-main {
+ padding: 10px 0;
+
+ .main-name {
+ width: 100%;
+ font-size: 18px;
+ font-family: Microsoft YaHei, Microsoft YaHei-Bold;
+ font-weight: 700;
+ text-align: center;
+ color: #333333;
+ margin-bottom: 20px
+ }
+
+ .header-main-flex {
+
+ padding: 0 10px;
+
+ .main-title {
+ font-size: 14px;
+ display: inline-block;
+ width: 28.5%;
+ text-wrap: nowrap;
+ color: #000;
+ text-align: justify;
+ letter-spacing: 0.1em;
+ /* 璋冩暣瀛楁瘝闂磋窛 */
+ text-align-last: justify;
+ /* 纭繚鏈�鍚庝竴琛屾枃鏈篃鍧囧寑鍒嗗竷 */
+ display: inline-block;
+ /* 璁剧疆涓鸿鍐呭潡鍏冪礌 */
+ vertical-align: top;
+ /* 椤堕儴瀵归綈 */
+ }
+
+ .main-title-colon {
+ color: #000;
+ margin-right: 3px;
+ margin-left: 1px;
+ display: inline-block;
+ /* 璁剧疆涓鸿鍐呭潡鍏冪礌 */
+ vertical-align: top;
+ /* 椤堕儴瀵归綈 */
+ }
+
+ .main-content {
+ font-size: 14px;
+ display: inline-block;
+ /* 璁剧疆涓鸿鍐呭潡鍏冪礌 */
+ /* 椤堕儴瀵归綈 */
+ max-width: calc(72.5% - 15px);
+ /* 鍑忓幓.main-title瀹藉害鍜�.main-title-colon鐨刴argin-right */
+ word-wrap: break-word;
+ /* 鍏佽鍦ㄩ暱鍗曡瘝鎴栨棤绌烘牸瀛楃涓插唴閮ㄨ繘琛屾崲琛� */
+ }
+
+
+
+ p {
+ width: 100%;
+ overflow: hidden;
+ font-size: 14px;
+ margin: 2px 0;
+ color: #a5a5a5;
+ }
+
+ span {
+ font-size: 14px;
+ }
+ }
+ }
+
+
+ }
+
+ .message-text-main {
+ padding: 10px 0;
+
+ .text-main-title {
+ font-size: 15px;
+ font-weight: bold;
+ color: #a88868;
+ margin: 3px 0;
+ }
+
+ .text-main-main {
+ margin-top: 5px;
+ max-height: 150px;
+ min-height: 150px;
+ overflow: auto;
+ font-size: 14px;
+ line-height: 26px;
+ text-align: justify;
+ color: #6d6d6d;
+ }
+ }
+
+ .no-border {
+ border-bottom: none !important;
+ }
+
+ .message-text-footer {
+ width: 100%;
+ margin-top: 10px;
+ margin-bottom: 10px;
+ padding-bottom: 20px;
+ border-bottom: 1px solid #e9d8bf;
+
+ .text-main-footer {
+ width: 100%;
+ }
+
+ .text-footer-title {
+ position: relative;
+
+ img {
+ max-width: 50%;
+ margin-bottom: 10px;
+ }
+
+ span {
+ font-size: 15px;
+ font-weight: bold;
+ color: #fff;
+ position: absolute;
+ left: 2%;
+ top: 3.5%;
+ }
+ }
+
+ .text-footer-table {
+ width: 100%;
+ overflow-x: auto;
+ }
+
+ table {
+ width: 100%;
+
+ border-collapse: collapse;
+ }
+
+ th {
+ text-wrap: nowrap;
+ background-color: #f9ecd8;
+ color: #b3b3b3 !important;
+ }
+
+ tr {
+ width: 5%;
+ }
+
+ td {
+ text-wrap: nowrap;
+ text-align: center;
+ }
+
+ tr:nth-child(odd) {
+ background-color: #f9ecd8;
+ /* 濂囨暟琛岃儗鏅鑹� */
+ }
+
+ tr:nth-child(even) {
+ background-color: #fff7eb;
+ /* 鍋舵暟琛岃儗鏅鑹� */
+ }
+ }
+
+ .message-text-titleOne {
+ text-align: right;
+ color: #fe7313;
+ font-size: 10px;
+ padding-bottom: 5px;
+ border-bottom: 1px solid #e9d8bf;
+ }
+
+ .message-text-change {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ padding: 10px 0 0 0;
+ cursor: pointer;
+
+ img {
+ margin-right: 10px;
+ }
+
+ span {
+ font-size: 14px;
+ font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+ font-weight: 400;
+ text-align: left;
+ color: #d2a25b;
+ line-height: 35px;
+ }
+ }
+
+ .message-text-changeOne {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ padding: 10px 0 0 0;
+
+ span {
+ font-size: 14px;
+ font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+ font-weight: 400;
+ text-align: left;
+ color: #d2a25b;
+ line-height: 35px;
+ }
+ }
+
+
+ }
+
+
+ .message-text-loading {
+ padding: 0px 10px;
+ border-radius: 10px;
+ word-wrap: break-word;
+ line-height: 1.6;
+ font-size: 0.95rem;
+ transition: all 0.3s ease;
+ white-space: pre-wrap;
+ color: #333;
+ }
+
+ .Ai-message-text {
+
+ div {
+ font-size: 16px;
+ text-indent: 1em;
+ }
}
.user-message {
@@ -426,7 +1003,7 @@
}
.message-time {
- font-size: 0.85rem;
+ font-size: 0.70rem;
color: #999;
margin-left: 10px;
}
@@ -446,10 +1023,23 @@
justify-content: flex-start;
align-items: center;
padding-bottom: 10px;
+ position: relative;
+
+ .chat-back-icon {
+ position: absolute;
+ top: 30px;
+ width: 80%;
+ text-align: left;
+ display: flex;
+ el-icon{
+ cursor: pointer;
+ }
+ }
.chat-box-content {
width: 1200px;
- height: calc(100vh - 180px);
+ min-width: 1200px;
+ height: calc(100vh - 100px);
display: flex;
flex-direction: column;
justify-content: flex-start;
@@ -486,9 +1076,11 @@
}
.chat-date {
+ color: #999;
width: 100%;
text-align: center;
margin-bottom: 30px;
+ margin-top: 30px;
}
.chat-send {
@@ -512,6 +1104,7 @@
margin-bottom: 20px;
display: flex;
justify-content: flex-start;
+ min-height: 90px;
.back-avator {
margin-right: 37px;
@@ -522,6 +1115,7 @@
}
.base-book-box {
+ display: flex;
width: 800px;
padding: 20px 47px;
box-sizing: border-box;
@@ -532,7 +1126,7 @@
.back-item {
width: 349px;
- height: 391px;
+ height: auto;
background: #ffffff;
border-radius: 20px;
margin-left: 100px;
@@ -547,6 +1141,15 @@
margin: auto;
border-bottom: 1px solid #e9d8bf;
}
+
+ .hot-question {
+ cursor: pointer;
+
+ &:hover {
+ color: #d2a25b;
+ }
+ }
+
img {
margin-right: 10px;
@@ -566,11 +1169,17 @@
align-items: center;
padding: 0 20px;
color: #d2a25b;
+ margin-bottom: 10px;
+ cursor: pointer;
img {
cursor: pointer;
}
}
+ }
+
+ .chat-box-content-item {
+ width: 100%;
}
}
@@ -585,7 +1194,7 @@
.chat-footer {
width: 1200px;
- height: 170px;
+ height: 100px;
background-color: #fff;
border-radius: 20px;
padding: 20px;
@@ -597,14 +1206,24 @@
}
::v-deep(.chat-text) {
+ height: 100%;
+ display: flex;
+ align-items: center;
margin-bottom: 10px;
.el-textarea__inner {
+ overflow: auto;
+ height: 100% !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
background-color: transparent !important;
resize: none !important;
+ }
+
+ img {
+ cursor: pointer;
+ min-height: 25px;
}
}
@@ -661,23 +1280,273 @@
align-items: flex-start;
animation: slideIn 0.3s ease;
animation-fill-mode: forwards;
- max-width: 95%;
+ max-width: 85%;
border-radius: 12px;
// box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
padding: 16px;
}
+ .assistant-avatar {
+ min-width: 60px;
+ max-width: 60px;
+ height: auto;
+ }
+
.message-content {
+ display: inline-block;
+ margin-top: 10px;
+ max-width: 85%;
background: #fff;
margin-left: 20px;
+ margin-right: 20px;
border-radius: 20px;
- min-width: 200px;
- padding: 5px;
+ padding: 10px 10px;
+ }
+
+ .user-message-text {
+
+ // text-indent: 1em;
+ color: #fff;
}
.message-text {
- padding: 12px 16px;
+ min-width: 800px;
+ padding: 0px 40px;
border-radius: 12px;
+ word-wrap: break-word;
+ line-height: 1.6;
+ font-size: 0.95rem;
+ transition: all 0.3s ease;
+ white-space: pre-wrap;
+ color: #333;
+
+
+ .message-text-title {
+ font-size: 16px;
+ color: #999;
+ line-height: 35px;
+ padding: 20px 0 30px 0;
+ }
+
+ .message-text-header {
+ display: flex;
+
+ ul {
+ list-style-type: none;
+ }
+
+ li {
+ list-style-type: none;
+ }
+
+ .header-img {
+ width: 20%;
+ margin-right: 20px;
+ display: flex;
+ align-items: center;
+
+ img {
+ width: 100%;
+ }
+ }
+
+ .header-main {
+ width: 80%;
+ padding: 10px 0;
+
+ .header-main-flex {
+ display: flex;
+
+ p {
+ width: 50%;
+ overflow: hidden;
+ font-size: 16px;
+ margin: 2px 0;
+ color: #a5a5a5;
+ }
+ }
+ }
+
+ .main-name {
+ font-size: 18px;
+ margin-bottom: 10px;
+ }
+
+ .main-title {
+ display: inline-block;
+ width: 25%;
+ text-wrap: nowrap;
+ color: #000;
+ text-align: justify;
+ letter-spacing: 0.1em;
+ /* 璋冩暣瀛楁瘝闂磋窛 */
+ text-align-last: justify;
+ /* 纭繚鏈�鍚庝竴琛屾枃鏈篃鍧囧寑鍒嗗竷 */
+ display: inline-block;
+ /* 璁剧疆涓鸿鍐呭潡鍏冪礌 */
+ vertical-align: top;
+ /* 椤堕儴瀵归綈 */
+
+ }
+
+ .main-title-colon {
+ color: #000;
+ margin-right: 5px;
+ display: inline-block;
+ /* 璁剧疆涓鸿鍐呭潡鍏冪礌 */
+ vertical-align: top;
+ /* 椤堕儴瀵归綈 */
+ }
+
+ .main-content {
+ font-size: 14px;
+ display: inline-block;
+ /* 璁剧疆涓鸿鍐呭潡鍏冪礌 */
+ vertical-align: top;
+ /* 椤堕儴瀵归綈 */
+ max-width: calc(75% - 15px);
+ /* 鍑忓幓.main-title瀹藉害鍜�.main-title-colon鐨刴argin-right */
+ word-wrap: break-word;
+ /* 鍏佽鍦ㄩ暱鍗曡瘝鎴栨棤绌烘牸瀛楃涓插唴閮ㄨ繘琛屾崲琛� */
+ }
+
+
+ }
+
+ .message-text-main {
+ padding: 10px 10px;
+
+ .text-main-title {
+ font-size: 16px;
+ font-weight: bold;
+ color: #a88868;
+ margin: 5px 0;
+ }
+
+ .text-main-main {
+ margin-top: 10px;
+ max-height: 92px;
+ min-height: 92px;
+ overflow: auto;
+ font-size: 14px;
+ line-height: 26px;
+ text-align: justify;
+ color: #6d6d6d;
+ }
+ }
+
+ .no-border {
+ border-bottom: none !important;
+ }
+
+ .message-text-footer {
+ margin-top: 30px;
+ margin-bottom: 20px;
+ padding-bottom: 30px;
+ border-bottom: 1px solid #e9d8bf;
+
+
+ .text-main-footer {
+ width: 100%;
+ }
+
+ .text-footer-title {
+ position: relative;
+
+ img {
+ max-width: 18%;
+ margin-bottom: 20px;
+ }
+
+ span {
+ font-size: 19px;
+ font-weight: bold;
+ color: #fff;
+ position: absolute;
+ left: 2%;
+ }
+ }
+
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ }
+
+ th {
+ background-color: #f9ecd8;
+ color: #b3b3b3 !important;
+ }
+
+ tr {
+ width: 100%;
+ }
+
+ td {
+ text-align: center;
+ }
+
+ tr:nth-child(odd) {
+ background-color: #f9ecd8;
+ /* 濂囨暟琛岃儗鏅鑹� */
+ }
+
+ tr:nth-child(even) {
+ background-color: #fff7eb;
+ /* 鍋舵暟琛岃儗鏅鑹� */
+ }
+ }
+
+
+
+ .message-text-titleOne {
+ text-align: right;
+ color: #fe7313;
+ font-size: 10px;
+ padding-bottom: 5px;
+ border-bottom: 1px solid #e9d8bf;
+ }
+
+ .message-text-change {
+ display: flex;
+ align-items: center;
+ padding: 10px 0 0 0;
+ cursor: pointer;
+
+ img {
+ margin-right: 10px;
+ }
+
+ span {
+ font-size: 14px;
+ font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+ font-weight: 400;
+ text-align: left;
+ color: #d2a25b;
+ line-height: 35px;
+ }
+ }
+
+ .message-text-changeOne {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ padding: 10px 0 0 0;
+
+ span {
+ font-size: 14px;
+ font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+ font-weight: 400;
+ text-align: left;
+ color: #d2a25b;
+ line-height: 35px;
+ }
+ }
+
+ }
+
+ .message-text-loading {
+ padding: 0px 10px;
+ border-radius: 10px;
word-wrap: break-word;
line-height: 1.6;
font-size: 0.95rem;
@@ -686,12 +1555,20 @@
color: #333;
}
+ .Ai-message-text {
+
+ div {
+ font-size: 16px;
+ }
+ }
+
.user-message {
flex-direction: row-reverse;
margin-left: auto;
}
.user-message .message-text {
+ justify-content: center;
color: #8b6e47;
}
@@ -699,13 +1576,13 @@
display: flex;
justify-content: space-between;
align-items: center;
- margin-top: 8px;
+ margin-top: 5px;
padding: 0 4px;
color: #999;
}
.message-time {
- font-size: 0.85rem;
+ font-size: 0.75rem;
color: #999;
margin-left: 10px;
}
@@ -714,6 +1591,7 @@
.user-message-content {
background: #af8b56 !important;
+
.message-text {
color: #fff !important;
padding: 5px 10px;
--
Gitblit v1.9.1