sxc-frontend/miniprogram/components/ss_chat/child/SsChatReply.vue

<template>
	<view class="ss-chat-reply">
		<!-- 网络搜索结果 -->
		<view v-if="reply.source && reply.source.length" class="quota" :class="{unfold: unfold}">
			<view class="quota-intro">
				<view class="quota-small" @tap="toggleUnfold">
					<view class="quota-title">基于{{ reply.source.length }}个搜索来源</view>
					<view class="quota-brand">
						<template v-for="(item, index) in reply.source">
							<image v-if="index < 6" class="quota-brand-logo" mode="aspectFill" :src="getLogoUrl(item)" />
						</template>
					</view>
				</view>
				<view class="quota-detail">
					<view class="quota-line">
						<view class="line-left">✓</view>
						<view class="line-content">
							<view class="line-title">理解问题</view>
						</view>
						<view class="quota-close" @tap="toggleUnfold">▲</view>
					</view>
					<view class="quota-line">
						<view class="line-left">✓</view>
						<view class="line-content">
							<view class="line-title">搜索网页</view>
							<view class="line-box flex">
								<view class="search-text">{{ reply.title }}</view>
							</view>
						</view>
					</view>
					<view class="quota-line">
						<view class="line-left">✓</view>
						<view class="line-content">
							<view class="line-title">找到{{ reply.source.length }}个搜索来源</view>
						</view>
					</view>
					<scroll-view class="source-scroll" scroll-x :scroll-with-animation="true">
						<view class="source">
							<view v-for="(item, index) in reply.source" :key="index" class="source-item" @tap.stop="copyLink(item.url)">
								<view class="source-title">{{ item.title }}</view>
								<view class="source-footer">
									<view class="source-brand">
										<image class="source-icon" mode="aspectFill" :src="getLogoUrl(item)" />
										<view class="source-summary">{{ item.summary }}</view>
									</view>
									<view class="source-number">{{ index + 1 }}</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<!-- 回复内容 -->
		<view class="reply-content">
			<!-- Loading 动画：三个点交替跃动 -->
			<view v-if="last && showLoading" class="typing-indicator">
				<view class="dot"></view>
				<view class="dot"></view>
				<view class="dot"></view>
			</view>
			<!-- 内容区域 -->
			<view v-else class="replay-container">
				<ss-chat-reply-markdown v-if="reply.type == 'text'" :chat-id="reply.chatId" :content="reply.content"
					:title="reply.title" :last="last" />
				<ss-chat-reply-category v-else-if="reply.type == 'category'" :category-id="reply.content"
					@quick-send="quickSend" @change-chat="changeChat" />
			</view>
		</view>
	</view>
</template>

<script>
	import SsChatReplyMarkdown from '@/components/ss_chat/child/SsChatReplyMarkdown.vue';
	import SsChatReplyCategory from '@/components/ss_chat/child/SsChatReplyCategory.vue';

	import { useGlobalStore } from '@/stores/global';

	export default {
		name: 'SsChatReply',
		components: {
			SsChatReplyMarkdown,
			SsChatReplyCategory
		},
		props: {
			reply: {
				type: Object,
				default: {
					chatId: '',
					avatar: '/images/robot-avatar.png',
					type: 'text',
					title: '',
					content: null
				},
				require: true
			},
			last: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				unfold: false,
				globalStore: useGlobalStore()
			}
		},
		computed: {
			showLoading() {
				return this.globalStore.chatLoading && this.reply.type === 'text' && !this.reply.content
			}
		},
		methods: {
			getLogoUrl(item) {
				// 兼容 logo_url 和 icon 两种字段名
				let url = item.logo_url || item.icon || '';
				if (url == '') {
					url = '/static/images/unlink.png';
				}
				return url;
			},
			toggleUnfold() {
				this.unfold = !this.unfold;
			},
			copyLink(url) {
				if (url) {
					uni.setClipboardData({
						data: url,
						success: () => {
							uni.showToast({
								title: '链接已复制',
								icon: 'none'
							});
						}
					});
				}
			},
			quickSend(msg) {
				this.$emit('quickSend', msg)
			},
			changeChat() {
				this.$emit('changeChat');
			}
		}
	};
</script>

<style scoped lang="scss">
	.ss-chat-reply {
		.quota {
			margin-bottom: 32rpx;

			.quota-intro {
				border-radius: 32rpx;

				.quota-small {
					display: inline-flex;
					align-items: center;
					border-radius: 32rpx;
					padding: 16rpx 32rpx;
					border: 1px solid #d5d6d8;

					.quota-title {
						color: #545764;
						font-size: 28rpx;
						line-height: 28rpx;
						margin-right: 16rpx;
					}

					.quota-brand {
						display: flex;
						padding-left: 26rpx;

						.quota-brand-logo {
							background-color: #ffffff;
							width: 32rpx;
							height: 32rpx;
							overflow: hidden;
							border-radius: 16rpx;
							margin-left: -12rpx;
							box-shadow: 0 0 8rpx 0 rgba(0, 0, 0, 0.25);
						}
					}
				}

				.quota-detail {
					display: none;
				}
			}

			&.unfold {
				.quota-intro {
					padding: 24rpx;
					border-radius: 16rpx;
					background-color: #f6f7fb;

					.quota-small {
						display: none;
					}

					.quota-detail {
						display: block;

						.source-scroll {
							width: 100%;
							white-space: nowrap;

							.source {
								display: inline-block;
								white-space: nowrap;
								padding-bottom: 16rpx;

								.source-item {
									display: inline-block;
									vertical-align: top;
									width: 400rpx;
									border: 1px solid #d5d6d8;
									border-radius: 16rpx;
									background-color: #ffffff;
									padding: 20rpx;
									margin-right: 16rpx;

									.source-title {
										color: #101333;
										font-size: 28rpx;
										line-height: 36rpx;
										font-weight: bold;
										margin-bottom: 16rpx;
										overflow: hidden;
										display: -webkit-box;
										-webkit-box-orient: vertical;
										-webkit-line-clamp: 2;
										text-overflow: ellipsis;
										white-space: normal;
										height: 72rpx;
									}

									.source-footer {
										display: flex;
										align-items: center;

										.source-brand {
											flex: 1;
											display: flex;
											align-items: center;
											overflow: hidden;

											.source-icon {
												width: 32rpx;
												height: 32rpx;
												border-radius: 16rpx;
												margin-right: 8rpx;
												flex-shrink: 0;
											}

											.source-summary {
												flex: 1;
												color: #545764;
												font-size: 24rpx;
												line-height: 32rpx;
												height: 64rpx;
												overflow: hidden;
												display: -webkit-box;
												-webkit-box-orient: vertical;
												-webkit-line-clamp: 2;
												text-overflow: ellipsis;
												white-space: normal;
											}
										}

										.source-number {
											color: #ffffff;
											font-size: 22rpx;
											font-weight: bold;
											text-align: center;
											background-color: #2943d6;
											width: 32rpx;
											height: 32rpx;
											line-height: 32rpx;
											border-radius: 16rpx;
											margin-left: 8rpx;
											flex-shrink: 0;
										}
									}
								}
							}
						}

						.quota-line {
							display: flex;
							margin-bottom: 24rpx;

							.line-left {
								width: 40rpx;
								color: #2943d6;
								font-size: 28rpx;
							}

							.line-content {
								flex: 1;

								.line-title {
									color: #545764;
									font-size: 28rpx;
									line-height: 40rpx;
									margin-bottom: 16rpx;
								}

								.line-box.flex {
									display: flex;
									flex-wrap: wrap;

									.search-text {
										color: #545764;
										font-size: 26rpx;
										padding: 12rpx 24rpx;
										border-radius: 8rpx;
										background-color: #eaedfb;
									}
								}

							}

							.quota-close {
								width: 40rpx;
								color: #545764;
								font-size: 24rpx;
								text-align: center;
							}
						}
					}
				}
			}
		}

		.reply-content {
			width: 100%;

			.typing-indicator {
				display: inline-flex;
				align-items: center;
				gap: 8rpx;
				padding: 16rpx 24rpx;
				background-color: #f5f5f5;
				border-radius: 24rpx;

				.dot {
					width: 12rpx;
					height: 12rpx;
					background-color: #2942D4;
					border-radius: 50%;
					animation: bounce 1.4s infinite ease-in-out both;

					&:nth-child(1) {
						animation-delay: -0.32s;
					}

					&:nth-child(2) {
						animation-delay: -0.16s;
					}

					&:nth-child(3) {
						animation-delay: 0s;
					}
				}
			}
		}

		@keyframes bounce {

			0%,
			80%,
			100% {
				transform: translateY(0);
				opacity: 0.4;
			}

			40% {
				transform: translateY(-10rpx);
				opacity: 1;
			}
		}
	}
</style>