智能问答界面优化

src/views/comprehensiveSearch/chat/index.vue

@@ -20,12 +20,8 @@
 				<div class="left-main">
 					<div class="left-main-title">{{ "历史对话" }}</div>
 					<div class="left-list">
-						<div
-							class="left-list-item"
-							:class="{ itemActive: currentChatId === item.id }"
-							v-for="(item, index) in chatList"
-							:key="index"
-						>
+						<div class="left-list-item" :class="{ itemActive: currentChatId === item.id }"
+							v-for="(item, index) in chatList" :key="index">
 							{{ item.title }}
 						</div>
 					</div>
@@ -53,31 +49,34 @@
 											class="content think-content"
 											v-html="renderMarkdown(message.think)"
 										></div> -->
-										<div v-if="message.source" class="source-title">知识库检索结果:</div>
-										<div v-if="message.source" class="content source-content">
-											<div
-												class="source-item"
-												v-for="(item, index) in message.source"
-												:key="index"
-												v-html="renderMarkdown(item)"
-											></div>
+										<div v-if="message.source" class="source-title">
+											<div class="text">知识库检索结果:</div>
+											<div class="tool" @click="handleShowThinking">
+												<div class="tool-item" v-if="!isShowThinking">
+													<div class="text">展开</div>
+													<div class="img">
+														<img src="@/assets/icons/chat/down.png" alt="">
+													</div>
+												</div>
+												<div class="tool-item" v-else>
+													<div class="text">折叠</div>
+													<div class="img">
+														<img src="@/assets/icons/chat/up.png" alt="">
+													</div>
+												</div>
+											</div>
+										</div>
+										<div v-if="message.source" class="content source-content" :class="{hiddenThinkContent: !isShowThinking}">
+											<div class="source-item" v-for="(item, index) in message.source" :key="index"
+												v-html="renderMarkdown(item)"></div>
 										</div>
 										<div v-if="message.content" class="answer-title">正文内容</div>
-										<div
-											v-if="message.content"
-											class="content ai-content"
-											v-html="renderMarkdown(message.content)"
-										></div>
-										<div
-											v-if="message.raw_data?.length || message.raw_data?.rows?.length"
-											class="answer-title"
-										>
+										<div v-if="message.content" class="content ai-content" v-html="renderMarkdown(message.content)">
+										</div>
+										<div v-if="message.raw_data?.length || message.raw_data?.rows?.length" class="answer-title">
 											完整实体列表
 										</div>
-										<div
-											v-if="message.raw_data?.length || message.raw_data?.rows?.length"
-											class="content row-content"
-										>
+										<div v-if="message.raw_data?.length || message.raw_data?.rows?.length" class="content row-content">
 											<div class="row-header">
 												<div class="row-header-item1">{{ message.raw_data.columns?.name_zhs }}</div>
 												<div class="row-header-item">{{ message.raw_data.columns?.date }}</div>
@@ -88,17 +87,8 @@
 												</div>
 											</div>
 											<div class="row-main">
-												<div
-													class="row-main-item"
-													v-for="(item, index) in message.raw_data.rows"
-													:key="index"
-												>
-													<el-popover
-														effect="dark"
-														:width="500"
-														:content="item.name_zhs"
-														placement="top-start"
-													>
+												<div class="row-main-item" v-for="(item, index) in message.raw_data.rows" :key="index">
+													<el-popover effect="dark" :width="500" :content="item.name_zhs" placement="top-start">
 														<template #reference>
 															<div class="item-item1">{{ item.name_zhs }}</div>
 														</template>
@@ -107,12 +97,7 @@
 													<div class="item-item">{{ item.date }}</div>
 													<div class="item-item">{{ item.industry }}</div>
 													<div class="item-item">{{ item.category }}</div>
-													<el-popover
-														effect="dark"
-														:width="400"
-														:content="item.sanction_reason"
-														placement="top-start"
-													>
+													<el-popover effect="dark" :width="400" :content="item.sanction_reason" placement="top-start">
 														<template #reference>
 															<div class="item-item2">{{ item.sanction_reason }}</div>
 														</template>
@@ -148,13 +133,7 @@
 						</div>
 					</div>
 					<div class="right-main-footer">
-						<el-input
-							@keyup.enter="sendMessage"
-							type="textarea"
-							placeholder="发送消息"
-							:rows="4"
-							v-model="userInput"
-						/>
+						<el-input @keyup.enter="sendMessage" type="textarea" placeholder="发送消息" :rows="4" v-model="userInput" />
 						<div class="input-footer">
 							<div class="icon1">
 								<el-tooltip effect="dark" content="录音" placement="top">
@@ -198,6 +177,11 @@ import { getChat, getChecklistChat } from "@/api/chat";
 import router from "@/router/index";
 import json5 from "json5";
 
+const isShowThinking = ref(false)
+
+const handleShowThinking = () => {
+	isShowThinking.value = !isShowThinking.value
+}
 const curArea = ref("法案");
 
 const areaList = ref([
@@ -990,6 +974,7 @@ onUnmounted(() => {
 	box-shadow: none;
 	height: 44px;
 }
+
 :deep(.el-input__wrapper:hover) {
 	box-shadow: none !important;
 }
@@ -997,12 +982,14 @@ onUnmounted(() => {
 :deep(.el-input__wrapper.is-focus) {
 	box-shadow: none !important;
 }
+
 :deep(.el-input ::placeholder) {
 	color: var(--color-main-active);
 	font-family: Microsoft YaHei;
 	font-size: 16px;
 	font-weight: 400;
 }
+
 :deep(.el-input__inner) {
 	color: #333;
 	font-family: Microsoft YaHei;
@@ -1015,6 +1002,7 @@ onUnmounted(() => {
 	border-radius: 20px;
 	resize: none;
 }
+
 :deep(.el-textarea__inner:hover) {
 	box-shadow: none !important;
 }
@@ -1022,22 +1010,26 @@ onUnmounted(() => {
 :deep(.el-textarea__inner.is-focus) {
 	box-shadow: none !important;
 }
+
 :deep(.el-textarea ::placeholder) {
 	color: rgba(132, 136, 142, 1);
 	font-family: Microsoft YaHei;
 	font-size: 16px;
 	font-weight: 400;
 }
+
 :deep(.el-textarea__inner) {
 	color: #333;
 	font-family: Microsoft YaHei;
 	font-size: 16px;
 	font-weight: 400;
 }
+
 .wrapper {
 	width: 100%;
 	height: 100%;
 	overflow-y: auto;
+
 	.header {
 		position: sticky;
 		top: 0;
@@ -1056,29 +1048,35 @@ onUnmounted(() => {
 			width: 1600px;
 			margin: 0 auto;
 			display: flex;
+
 			.header-item {
 				margin: 0 3px;
 			}
+
 			.back-item {
 				cursor: pointer;
+
 				&:hover {
 					color: #ccc;
 				}
 			}
 		}
 	}
+
 	.main {
 		margin-top: 16px;
 		display: flex;
 		justify-content: center;
 		gap: 16px;
 		margin-bottom: 10px;
+
 		.left {
 			width: 300px;
 			height: 880px;
 			border-radius: 4px;
 			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
 			background: rgba(255, 255, 255, 1);
+
 			.left-header {
 				width: 268px;
 				height: 48px;
@@ -1089,19 +1087,23 @@ onUnmounted(() => {
 				box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
 				background: rgba(255, 255, 255, 1);
 				display: flex;
+
 				.icon {
 					width: 20px;
 					height: 13px;
 					margin-top: 13px;
 					margin-left: 16px;
+
 					img {
 						width: 100%;
 						height: 100%;
 					}
 				}
 			}
+
 			.left-main {
 				margin-top: 24px;
+
 				.left-main-title {
 					margin-left: 29px;
 					width: 64px;
@@ -1114,11 +1116,13 @@ onUnmounted(() => {
 					letter-spacing: 0px;
 					text-align: left;
 				}
+
 				.left-list {
 					margin-top: 12px;
 					margin-left: 16px;
 					width: 268px;
 					height: 720px;
+
 					.left-list-item {
 						width: 268px;
 						height: 48px;
@@ -1134,10 +1138,12 @@ onUnmounted(() => {
 						text-overflow: ellipsis;
 						white-space: nowrap;
 						cursor: pointer;
+
 						&:hover {
 							background: rgba(246, 250, 255, 1);
 						}
 					}
+
 					.itemActive {
 						background: rgba(246, 250, 255, 1);
 						color: var(--color-main-active);
@@ -1146,12 +1152,14 @@ onUnmounted(() => {
 				}
 			}
 		}
+
 		.right {
 			width: 1284px;
 			height: 880px;
 			border-radius: 4px;
 			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
 			background: rgba(255, 255, 255, 1);
+
 			.right-header {
 				height: 64px;
 				border-bottom: 1px solid rgba(234, 236, 238, 1);
@@ -1163,12 +1171,14 @@ onUnmounted(() => {
 				font-size: 18px;
 				font-weight: 700;
 			}
+
 			.right-main {
 				.right-main-content {
 					width: 926px;
 					margin-left: 166px;
 					height: 630px;
 				}
+
 				.right-main-footer {
 					margin: 10px auto;
 					width: 900px;
@@ -1177,40 +1187,48 @@ onUnmounted(() => {
 					border: 1px solid rgba(230, 231, 232, 1);
 					border-radius: 20px;
 					background: rgba(255, 255, 255, 1);
+
 					.input-footer {
 						display: flex;
 						justify-content: flex-end;
+
 						.icon1 {
 							margin-top: 15px;
 							width: 24px;
 							height: 24px;
 							margin-right: 20px;
 							cursor: pointer;
+
 							img {
 								width: 100%;
 								height: 100%;
 							}
 						}
+
 						.icon2 {
 							margin-top: 15px;
 							width: 24px;
 							height: 24px;
 							margin-right: 20px;
 							cursor: pointer;
+
 							img {
 								width: 100%;
 								height: 100%;
 							}
 						}
+
 						.select-box {
 							margin-top: 10px;
 							margin-right: 14px;
+
 							:deep(.el-select__wrapper) {
 								height: 36px;
 								border-radius: 18px;
 								border: 1px solid var(--color-main-active);
 								box-shadow: none;
 							}
+
 							:deep(.el-select__selected-item) {
 								color: var(--color-main-active);
 								font-family: Microsoft YaHei;
@@ -1222,6 +1240,7 @@ onUnmounted(() => {
 								color: var(--color-main-active);
 							}
 						}
+
 						.submit {
 							margin-top: 7px;
 							margin-right: 12px;
@@ -1230,9 +1249,11 @@ onUnmounted(() => {
 							border-radius: 20px;
 							background: #b4cfed;
 							cursor: pointer;
+
 							&:hover {
 								background: rgba(5, 95, 194, 1);
 							}
+
 							img {
 								width: 24px;
 								height: 24px;
@@ -1256,6 +1277,7 @@ onUnmounted(() => {
 	padding-right: 192px;
 	box-sizing: border-box;
 	height: 620px;
+
 	.chat-content::-webkit-scrollbar {
 		width: 30px;
 	}
@@ -1272,20 +1294,25 @@ onUnmounted(() => {
 	.message-list {
 		padding-bottom: 20px;
 	}
+
 	.ai-item {
 		width: 926px;
 		overflow: hidden;
+
 		.ai-header {
 			height: 22px;
 			display: flex;
+
 			.icon {
 				width: 10px;
 				height: 10px;
+
 				img {
 					width: 100%;
 					height: 100%;
 				}
 			}
+
 			.text {
 				margin-left: 16px;
 				height: 22px;
@@ -1298,6 +1325,7 @@ onUnmounted(() => {
 				text-align: left;
 			}
 		}
+
 		.think-title {
 			margin-left: 26px;
 			height: 22px;
@@ -1309,6 +1337,7 @@ onUnmounted(() => {
 			letter-spacing: 0px;
 			text-align: left;
 		}
+
 		.answer-title {
 			margin-top: 10px;
 			margin-left: 26px;
@@ -1321,6 +1350,7 @@ onUnmounted(() => {
 			letter-spacing: 0px;
 			text-align: left;
 		}
+
 		.think-content {
 			background: rgba(245, 245, 245, 0.5);
 			width: 900px;
@@ -1328,23 +1358,65 @@ onUnmounted(() => {
 			padding: 1px 10px;
 			border-radius: 5px;
 		}
+
 		.source-title {
 			margin-left: 26px;
-			height: 22px;
-			color: var(--color-main-active);
-			font-family: Microsoft YaHei;
-			font-size: 14px;
-			font-weight: 400;
-			line-height: 22px;
-			letter-spacing: 0px;
-			text-align: left;
+			height: 30px;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+
+			.text {
+				color: var(--color-main-active);
+				font-family: Microsoft YaHei;
+				font-size: 14px;
+				font-weight: 400;
+				line-height: 22px;
+				letter-spacing: 0px;
+				text-align: left;
+			}
+
+
+			.tool-item {
+				display: flex;
+				gap: 10px;
+				cursor: pointer;
+
+				.text {
+					color: var(--color-main-active);
+					font-family: Microsoft YaHei;
+					font-size: 14px;
+					font-weight: 400;
+					line-height: 22px;
+					letter-spacing: 0px;
+					text-align: left;
+				}
+
+				.img {
+					width: 17px;
+					height: 10px;
+
+					img {
+						width: 100%;
+						height: 100%;
+					}
+				}
+			}
+
 		}
+
+		.hiddenThinkContent {
+			height: 0px;
+			overflow: hidden;
+		}
+
 		.source-content {
 			background: rgba(245, 245, 245, 0.5);
 			width: 900px;
 			margin-left: 26px;
 			padding: 1px 10px;
 			border-radius: 5px;
+
 			// max-height: 300px;
 			// overflow-y: auto;
 			.source-item {
@@ -1353,6 +1425,7 @@ onUnmounted(() => {
 				color: #333;
 			}
 		}
+
 		.ai-content {
 			margin-top: 10px;
 			width: 900px;
@@ -1361,6 +1434,7 @@ onUnmounted(() => {
 			padding: 1px 10px;
 			border-radius: 5px;
 		}
+
 		.row-content {
 			margin-top: 10px;
 			width: 900px;
@@ -1368,6 +1442,7 @@ onUnmounted(() => {
 			background: rgba(246, 250, 255, 1);
 			padding: 1px 10px;
 			border-radius: 5px;
+
 			.row-header {
 				height: 40px;
 				line-height: 40px;
@@ -1377,23 +1452,28 @@ onUnmounted(() => {
 				font-weight: bold;
 				display: flex;
 				border-bottom: 1px solid #999;
+
 				.row-header-item {
 					text-align: center;
 					width: 150px;
 					border-right: 1px solid #999;
 				}
+
 				.row-header-item1 {
 					text-align: center;
 					width: 250px;
 					border-right: 1px solid #999;
 				}
+
 				.row-header-item2 {
 					text-align: center;
 					width: 200px;
 				}
 			}
+
 			.row-main {
 				padding-bottom: 10px;
+
 				.row-main-item {
 					height: 35px;
 					line-height: 35px;
@@ -1402,11 +1482,13 @@ onUnmounted(() => {
 					color: #555;
 					display: flex;
 					border-bottom: 1px solid #ccc;
+
 					.item-item {
 						width: 150px;
 						text-align: center;
 						border-right: 1px solid #ccc;
 					}
+
 					.item-item1 {
 						width: 250px;
 						text-align: center;
@@ -1415,10 +1497,12 @@ onUnmounted(() => {
 						text-overflow: ellipsis;
 						white-space: nowrap;
 						cursor: pointer;
+
 						&:hover {
 							background: var(--color-bg-hover);
 						}
 					}
+
 					.item-item2 {
 						width: 200px;
 						text-align: center;
@@ -1426,6 +1510,7 @@ onUnmounted(() => {
 						text-overflow: ellipsis;
 						white-space: nowrap;
 						cursor: pointer;
+
 						&:hover {
 							background: var(--color-bg-hover);
 						}
@@ -1434,11 +1519,13 @@ onUnmounted(() => {
 			}
 		}
 	}
+
 	.user-item {
 		margin-top: 32px;
 		height: 42px;
 		display: flex;
 		justify-content: flex-end;
+
 		.user-bubble {
 			line-height: 42px;
 			border-radius: 21px 0px 21px 21px;
@@ -1447,6 +1534,7 @@ onUnmounted(() => {
 			padding: 0 20px;
 			text-align: right;
 			word-wrap: break-word;
+
 			.user-content {
 				color: rgba(59, 65, 75, 1);
 				font-family: Microsoft YaHei;
@@ -1480,6 +1568,7 @@ onUnmounted(() => {
 .dot:nth-child(1) {
 	animation-delay: -0.32s;
 }
+
 .dot:nth-child(2) {
 	animation-delay: -0.16s;
 }