deepChartVueApp/components/deepExploration_header.vue

<template>
	<view class="titleContent">
		<view class="left">
			<uni-icons @click="handleBack" type="back" size="23" color="#111"></uni-icons>
		</view>
		<view class="title">深度探索</view>
		<view class="right">
			<image class="notice" src="/static/deepExploration-images/notice.png" mode="aspectFill"></image>
			<image @click="handleHistory" class="history" src="/static/deepExploration-images/history.png"
				mode="aspectFill"></image>
		</view>
	</view>

	

	<view class="drawer-overlay" v-show="showHistoryDrawer"></view>

	<view class="drawer-panel" v-show="showHistoryDrawer" @click.stop @touchmove.stop.prevent
		:style="{ transform: 'translateY(' + drawerOffsetY + 'px)' }">
		<view class="drawer-header">
			<text class="drawer-title">历史对话</text>
			<view class="drawer-actions">
				<view class="delete-all-container">
					<image class="delete-icon" src="/static/deepExploration-images/delete.png"></image>
					<text class="delete-all" @click="clearAllHistory">删除全部</text>
				</view>
				<view class="drawer-close" @click="closeHistoryDrawer">
					<image src="/static/deepExploration-images/close.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="drawer-content">
			<view class="drawer-inner">
				<view v-if="historyList.length === 0" class="empty-history">
					<text>暂无历史记录</text>
				</view>
				<view v-for="(section, sIdx) in historyList" :key="sIdx" class="history-section">
					<text class="section-title">{{ section.title }}</text>
					<view v-for="(item, idx) in section.items" :key="idx" class="history-item">
						<view class="history-left">
							<view class="flag-circle">
									<image :src="item.icon" mode="aspectFill"></image>
								</view>
						</view>
						<view class="history-main" @click="itemClick(item)">
							<text class="history-query">{{ item.stockName }}</text>
							<text class="history-query">（{{ item.stockCode }}）</text>
						</view>
						<text class="history-time">{{ item.createdTime }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	
	const props = defineProps({
		name: {
			type: String,
			default: ''
		}
	})
	const showHistoryDrawer = ref(false)
	const drawerOffsetY = ref(0); 
	const handleHistory = () => {
		showHistoryDrawer.value = true
	}

	const clearAllHistory = () => {
		uni.setStorageSync("search_history", []);
	};
	

	
	//返回上一页
	const handleBack = ()=>{
		uni.navigateBack()
	}

	const closeHistoryDrawer = () => {
		showHistoryDrawer.value = false;
	};
	// const onDrawerBackClick = () => {
	//   const hideDistance = uni.upx2px(900);
	//   drawerOffsetY.value = hideDistance;
	//   setTimeout(() => {
	//     closeHistoryDrawer();
	//     drawerOffsetY.value = 0;
	//   }, 180);
	// };

	// 历史记录详情
	async function itemClick(item) {
		//   const res = await postHistoryDetail({
		//     recordId: item.id,
		//     parentId: item.parentId,
		//     model: 5,
		//   });

		//   if (res.code == 200) {
		//     const message = res.data.wokeFlowData.One.markdown;
		//     messages.value = [];
		//     const botMsg = {
		//       content: message,
		//       isUser: false,
		//       isTyping: false,
		//       isThinking: false,
		//     };
		//     messages.value.push(botMsg);
		//   }
	}
	const historyList = ref([{
			title: "今天", // 分组标题（如“今天”“昨天”“更早”）
			items: [{

					icon: '/static/deepExploration-images/Americle.png',
					stockName: "TechCore", // 股票名称
					stockCode: "600001", // 6位数字股票代码
					createdTime: "14:35" // 时间格式（时:分）
				},
				{
					icon: '/static/deepExploration-images/Americle.png',
					stockName: "MediaLink",
					stockCode: "600002",
					createdTime: "10:12"
				}
			]
		},
		{
			title: "昨天",
			items: [{
				icon: '/static/deepExploration-images/Americle.png',
				stockName: "FinServ",
				stockCode: "600003",
				createdTime: "09:48"
			}]
		}
	]);
	
	onMounted(() => {

	})
</script>

<style scoped lang="scss">
	* {
		box-sizing: border-box;
	}

	.titleContent {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 60rpx 40rpx 35rpx;
		box-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.1);

		.left {
			display: flex;
			align-items: center;
			width: 36rpx;
			height: 36rpx;
		}

		.title {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			color: #000000;
			font-family: "PingFang SC";
			font-size: 19px;
			font-style: normal;
			font-weight: 400;
			line-height: 25px;

		}

		.right {
			display: flex;
			align-items: center;
			gap: 20rpx;

			.notice {
				width: 35rpx;
				height: 35rpx;
				gap: 20rpx;
			}

			.history {
				width: 32rpx;
				height: 32rpx;
				align-items: center;
			}
		}
	}

	

	/* 搜索历史侧拉框样式 */
	.drawer-overlay {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.35);
		z-index: 900;
	}

	.drawer-panel {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 75vh;
		max-height: 80vh;
		width: 100%;
		background: #ffffff;
		box-shadow: 0 -8rpx 20rpx rgba(0, 0, 0, 0.06);
		z-index: 1000;
		display: flex;
		flex-direction: column;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		transition: transform 0.22s ease;
	}

	.drawer-back {
		position: absolute;
		left: 50%;
		top: -14px;
		transform: translateX(-50%);
		width: 28px;
		height: 48px;
		border-radius: 12px;
		background: #fff;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.drawer-back-icon {
		font-size: 16px;
		color: #8a8a8a;
	}

	.drawer-actions {
		display: flex;
		align-items: center;
		gap: 40rpx;
	}

	.delete-all-container {
		display: flex;
		align-items: center;
		gap: 14rpx;
	}

	.delete-icon {
		width: 28rpx;
		height: 32rpx;
	}

	.delete-all {
		font-size: 28rpx;
	}

	.drawer-close {
		width: 48rpx;
		height: 48rpx;
		border-radius: 24rpx;
		/* background: #f5f5f5; */
		/* box-shadow: 0 2px 8px rgba(0,0,0,0.08); */
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 100%;
			height: 100%;
		}
	}


	.drawer-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 52rpx 28rpx 0rpx 28rpx;
		/* border-bottom: 2rpx solid #f0f0f0; */
	}

	.drawer-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333333;
	}

	.drawer-content {
		flex: 1;
		min-height: 0;
		/* 让 flex 子元素可在容器内收缩以启用滚动 */
		height: 100%;
		overscroll-behavior-y: contain;
		/* 防止滚动串联到页面 */
		-webkit-overflow-scrolling: touch;
		/* iOS 惯性滚动 */
		touch-action: pan-y;
		/* 优化触控滚动，仅垂直 */
	}

	.drawer-inner {
		padding: 20rpx 24rpx 20rpx 24rpx;
	}

	.history-section {
		margin-bottom: 20rpx;
		/* margin: 0 24rpx; */
	}

	.section-title {
		font-size: 26rpx;
		color: #888;
		margin: 10rpx 6rpx 16rpx;
	}

	.history-item {
		display: flex;
		align-items: center;
		padding: 19rpx 18rpx;
		background-color: #f6f7f9;
		border-radius: 12rpx;
		margin-bottom: 12rpx;
	}

	.history-left {
		margin-right: 20rpx;
		width: 50rpx;
		height: 50rpx;
	}

	.flag-circle {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background: #fff;
		border: 2rpx solid #eee;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			width: 50rpx;
			height: 50rpx;
			border-radius: 50%;
		}
	}


	.history-main {
		flex: 1;
	}

	.history-query {
		 color: #000000;
		 text-align: center;
		 font-size: 24rpx;
		 font-weight: 400;
		 line-height: 40rpx;
	}

	.history-time {
		font-size: 22rpx;
		color: #999;
	}

	.history-card {
		background-color: #fff;
		border: 2rpx solid #f2f2f2;
		border-left: 8rpx solid rgb(220, 31, 29);
		border-radius: 12rpx;
		padding: 18rpx 20rpx;
		margin-bottom: 16rpx;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.03);
	}

	.history-query {
		font-size: 28rpx;
		color: #333333;
		font-weight: 500;
	}

	.history-time {
		margin-top: 8rpx;
		font-size: 22rpx;
		color: #888888;
	}

	.empty-history {
		padding: 40rpx;
		color: #999999;
		text-align: center;
	}
</style>