deepChartVueApp/pages/deepExploration/MainForceActions.vue

<template>
	<view class="main">
		<!-- 顶部状态栏占位 -->
		<view class="top" :style="{height:iSMT+'px'}"></view>
		<deepExploration_header></deepExploration_header>

		<view class="search">
			<input v-model="searchName" class="searchInput" type="text" placeholder="请输入股票名称、股票代码"
				placeholder-style="color: #A6A6A6; font-size: 22rpx;" />
			<image @click="searchStock" class="seachIcon" src="/static/deepExploration-images/search.png"
				mode="aspectFill"></image>
		</view>

		<view class="content">
			<view class="select">
				<image class="img" :src="navItems[currentIndex].icon" mode=""></image>
				<view v-for="(item, index) in navItems" :key="index" class="selectItem"
					:class="{ active: currentIndex === index }" @click="handleModel(index)">
					<button class="btn"></button>
				</view>
			</view>

			<view class="graphAndTxt">
				<view class="graph">
					<view class="graph_header">
						<view class="left">TESA</view>
						<view class="center">
							<image class="last" src="/static/deepExploration-images/last.png" mode="aspectFill"></image>
							<text>Taewlkj.sejssssssssf</text>
							<image class="next" src="/static/deepExploration-images/next.png" mode="aspectFill"></image>
						</view>
						<view class="right">2025/10/26</view>
					</view>
					<view class="graph_data">
						<text>435.900</text>
						<text>22.410</text>
						<text>5.120%</text>
					</view>
					<view class="graph_content">
						<view class="charts-box">
							<!-- uCharts 蜡烛图组件 -->
							<qiun-data-charts type="candle" :opts="opts" :chartData="chartData" :disableScroll="true"
								:ontouch="true" :onzoom="true" />
						</view>
					</view>
				</view>
				<view class="txt">
					<view class="txtHeader">
						<image src="/static/deepExploration-images/plus.png" mode="aspectFill"></image>
						<text>{{navItems[currentIndex].name}}</text>
					</view>
					<view class="txtContent">
						<view v-if="loading" class="loading">加载中...</view>
						<rich-text :nodes="htmlContent"></rich-text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部切换栏 -->
		<footerBar class="static-footer" :type="type"></footerBar>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import deepExploration_header from '@/components/deepExploration_header.vue'
	import footerBar from '@/components/footerBar.vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getModel1First,
		getModel1Second,
		getModel2First,
		getModel2Second,
		getModel3First,
		getModel3Second,
		getModel4First,
		getModel4Second,
	} from '/api/deepExploration/deepExploration.js'
	import marked from 'marked'; // 引入 marked 库
	import hljs from 'highlight.js';
	import 'highlight.js/styles/atom-one-dark.css'; // 可替换为其他主题

	// 响应式变量定义
	const type = ref('deepExploration')
	const iSMT = ref(0)
	const currentIndex = ref(0)
	const navItems = ref([{
			name: '主力追踪',
			icon: '/static/deepExploration-images/1.png'
		},
		{
			name: '主力雷达',
			icon: '/static/deepExploration-images/2.png'
		},
		{
			name: '主力解码',
			icon: '/static/deepExploration-images/3.png'
		},
		{
			name: '主力资金流',
			icon: '/static/deepExploration-images/4.png'
		},
	])

	//搜索股票
	const searchStock = () => {
		console.log('搜索参数：', stockName.value);
		if (currentIndex.value == 0) {
			handleModel(0)
		} else if (currentIndex.value == 1) {
			console.log(index);
			handleModel(1)
		} else if (currentIndex.value == 2) {
			console.log(index);
			handleModel(2)
		} else if (currentIndex.value == 3) {
			console.log(index);
			handleModel(3)
		} else {
			uni.showToast({
				title: '请选择模块',
				icon: 'none',
				duration: 2000
			})
		}

	}
	//点击四大模块
	const handleModel = (index) => {
		currentIndex.value = index
		if (currentIndex.value == 0) {
			console.log(index);
			handleTrack()
		} else if (currentIndex.value == 1) {
			console.log(index);
			handleRadar()
		} else if (currentIndex.value == 2) {
			console.log(index);
			handleDecode()
		} else if (currentIndex.value == 3) {
			console.log(index);
			handleCapitalFlow()
		}
	}

	const stockName = ref('')
	const searchName = ref('')
	const stockCode = ref('')
	const language = ref('')
	const recordId = ref('')
	const parentId = ref('')
	const stockId = ref('')

	const loading = ref(true);
	const error = ref('');
	const htmlContent = ref('');
	const markdownContent = ref('');

	// 初始化 marked 配置（支持代码高亮）
	marked.setOptions({
	  highlight: (code, lang) => {
	    if (lang && hljs.getLanguage(lang)) {
	      return hljs.highlight(code, { language: lang }).value;
	    }
	    return hljs.highlightAuto(code).value;
	  },
	  breaks: true,
	  gfm: true,
	  sanitize: true, // 过滤掉 Markdown 中的 inline style（可能导致横向溢出）
	  sanitizer: (html) => {
	    // 移除所有 style 属性，避免后端返回的 Markdown 带强制横向样式
	    return html.replace(/style="[^"]*"/g, '');
	  }
	});

	//点击主力追踪
	const handleTrack = async () => {
		try {
			markdownContent.value = '\n## 📊 主力解码分析：\n### 序列密码\n\tL2情绪解码。当前股票序列密码为53、0、17、158，市场情绪未出现确定性转折。\n\n### 股票温度\n\tL1情绪监控。当前股票温度为51，处于温热区，情绪积极向上，资金稳步进场。趋势健康，量价配合良好。此时应积极跟随趋势，顺势而为。\n\n### 市场温度\n\t当前市场温度为61，处于温热区，指数温和上行，技术面呈多头排列，资金有序进场，赚钱效应扩散。需警惕市场风险，以规避“甜蜜陷阱”。\n    '
			htmlContent.value = marked.parse(markdownContent.value);
			 loading.value = true;
			// const result = await getModel1First({
			// 	content: searchName.value,
			// 	language: "cn",
			// 	marketList: "hk,cn,usa,my,sg,vi,in,gb",
			// 	model: 1
			// })
			// console.log('result', result);
			// if (result.code == 200) {
			// 	stockCode.value = result.data.code
			// 	stockName.value = result.data.name
			// 	recordId.value = result.data.recordId
			// 	parentId.value = result.data.parentId
			// 	stockId.value = result.data.stockId
			// 	language.value = result.data.language
			// 	const res = await getModel1Second({
			// 		language: language.value,
			// 		recordId: recordId.value,
			// 		parentId: parentId.value,
			// 		stockId: stockId.value,
			// 		token: 'pCtw6AYK0EHAaIexoFHsbZjtsfEAIhcmwkCFm6uKko8VPfMvyDiODL9v9c0veic9fIpQbvT8zN4sH/Si6Q'
			// 	})
			// 	if (res.code == 200) {
			// 		markdownContent.value = res.data.markdown
			// 		htmlContent.value = marked.parse(markdownContent.value);
			// 	}
			// 	console.log('res', res);
			// }

		} catch {
			error.value = e.message || '加载失败，请重试';
		}finally{
			loading.value = false;
		}
	}

	//点击主力雷达
	const handleRadar = () => {

	}

	//点击主力解码
	const handleDecode = () => {

	}

	//点击主力资金流
	const handleCapitalFlow = () => {

	}


	// 1. K线图配置
	const opts = ref({
		rotate: false,
		rotateLock: false,
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [15, 15, 0, 15],
		dataLabel: false,
		enableScroll: true,
		enableMarkLine: false,
		legend: {},
		xAxis: {
			labelCount: 4,
			itemCount: 30,
			disableGrid: true,
			gridColor: "#CCCCCC",
			gridType: "solid",
			dashLength: 4,
			scrollShow: false,
			scrollAlign: "left",
			scrollColor: "#A6A6A6",
			scrollBackgroundColor: "#EFEBEF",
			labelColor: "#8C8C8C",
			fontSize: 9
		},
		yAxis: {
			labelColor: "#8C8C8C",
			fontSize: 9
		},
		extra: {
			candle: {
				color: {
					upLine: "#f04864",
					upFill: "#f04864",
					downLine: "#2fc25b",
					downFill: "#2fc25b"
				},
				average: {
					show: false,
					name: ["MA5", "MA10", "MA30"],
					day: [5, 10, 20],
					color: ["#1890ff", "#2fc25b", "#facc14"]
				}
			},
			markLine: {
				type: "dash",
				dashLength: 5,
				data: [{
						value: 2150,
						lineColor: "#f04864",
						showLabel: false
					},
					{
						value: 2350,
						lineColor: "#f04864",
						showLabel: false
					}
				]
			},
			tooltip: {
				showCategory: true
			}
		}
	})

	// 2. K线图数据（响应式定义）
	const chartData = ref({})

	// 获取K线数据函数（直接定义，无需methods）
	const getServerData = () => {
		// 模拟服务器请求延时
		setTimeout(() => {
			const res = {
				"categories": [
					"2025/08/25",
					"2025/08/26",
					"2025/08/27",
					"2025/08/28",
					"2025/08/29",
					"2025/09/01",
					"2025/09/02",
					"2025/09/03",
					"2025/09/04",
					"2025/09/05",
					"2025/09/08",
					"2025/09/09",
					"2025/09/10",
					"2025/09/11",
					"2025/09/12",
					"2025/09/15",
					"2025/09/16",
					"2025/09/17",
					"2025/09/18",
					"2025/09/19",
					"2025/09/22",
					"2025/09/23",
					"2025/09/24",
					"2025/09/25",
					"2025/09/26",
					"2025/09/29",
					"2025/09/30",
					"2025/10/09",
					"2025/10/10",
					"2025/10/13",
					"2025/10/14",
					"2025/10/15",
					"2025/10/16",
					"2025/10/17",
					"2025/10/20",
					"2025/10/21",
					"2025/10/22",
					"2025/10/23",
					"2025/10/24",
					"2025/10/27"
				],
				series: [{
					"name": "贵州茅台",
					"data": [
						[
							1470.01,
							1496.0,
							1466.0,
							1499.33
						],
						[
							1490.32,
							1474.23,
							1480.01,
							1481.61
						],
						[
							1481.88,
							1484.93,
							1448.0,
							1448.0
						],
						[
							1447.97,
							1456.1,
							1438.77,
							1446.1
						],
						[
							1453.0,
							1482.58,
							1452.0,
							1480.0
						],
						[
							1482.2,
							1488.0,
							1465.7,
							1476.1
						],
						[
							1478.66,
							1509.0,
							1478.0,
							1491.3
						],
						[
							1491.0,
							1503.5,
							1466.0,
							1480.55
						],
						[
							1472.0,
							1479.3,
							1460.47,
							1480.66
						],
						[
							1471.0,
							1486.97,
							1464.0,
							1483.0
						],
						[
							1483.0,
							1506.44,
							1477.5,
							1501.23
						],
						[
							1505.0,
							1509.95,
							1493.42,
							1505.0
						],
						[
							1506.66,
							1529.95,
							1496.0,
							1522.01
						],
						[
							1522.01,
							1526.02,
							1508.5,
							1523.5
						],
						[
							1526.0,
							1538.02,
							1510.53,
							1516.0
						],
						[
							1515.87,
							1517.48,
							1501.5,
							1515.1
						],
						[
							1515.1,
							1520.99,
							1496.21,
							1499.98
						],
						[
							1499.99,
							1510.28,
							1490.01,
							1493.0
						],
						[
							1492.0,
							1497.8,
							1463.5,
							1467.96
						],
						[
							1467.99,
							1475.5,
							1457.01,
							1467.97
						],
						[
							1465.09,
							1467.97,
							1450.01,
							1453.35
						],
						[
							1450.5,
							1457.5,
							1440.0,
							1447.42
						],
						[
							1434.07,
							1456.78,
							1434.07,
							1442.0
						],
						[
							1442.83,
							1445.21,
							1436.0,
							1439.0
						],
						[
							1441.18,
							1447.11,
							1428.01,
							1435.0
						],
						[
							1439.38,
							1469.99,
							1435.0,
							1460.86
						],
						[
							1460.0,
							1460.76,
							1440.0,
							1443.99
						],
						[
							1436.0,
							1439.38,
							1420.0,
							1436.78
						],
						[
							1437.6,
							1439.94,
							1427.5,
							1430.0
						],
						[
							1415.7,
							1422.85,
							1415.12,
							1419.2
						],
						[
							1429.99,
							1464.0,
							1429.99,
							1451.02
						],
						[
							1450.98,
							1463.0,
							1445.08,
							1462.0
						],
						[
							1461.92,
							1484.95,
							1458.88,
							1484.91
						],
						[
							1483.1,
							1488.0,
							1454.03,
							1455.0
						],
						[
							1455.0,
							1469.5,
							1454.88,
							1457.93
						],
						[
							1459.0,
							1469.94,
							1455.5,
							1462.26
						],
						[
							1462.08,
							1465.73,
							1456.0,
							1458.7
						],
						[
							1455.0,
							1468.8,
							1447.2,
							1467.98
						],
						[
							1467.95,
							1478.88,
							1449.34,
							1450.0
						],
						[
							1440.0,
							1452.49,
							1435.99,
							1440.41
						]
					],
				}]
			}
			// 给响应式变量赋值（需修改.value）
			chartData.value = JSON.parse(JSON.stringify(res))
		}, 500)
	}

	// 生命周期钩子：组件挂载后执行（替代onReady）
	onMounted(() => {
		iSMT.value = uni.getSystemInfoSync().statusBarHeight
		getServerData() // 调用数据获取函数
	})

	// 页面加载时执行
	onLoad((e) => {
		if (e.index) {
			currentIndex.value = e.index - 1
			console.log('模块：', currentIndex.value)
		}
		if (e.stockName) {
			stockName.value = e.stockName
			console.log('股票名称：', stockName.value)
		}
	})
</script>

<style scoped lang="scss">
	.main {
		width: 100%;
		min-height: 100vh;
		background-color: #fff;
		 padding-bottom: 120rpx;

		.search {
			position: relative;
			display: flex;
			align-items: center;
			background-color: #F3F3F3;
			width: calc(100% - 60rpx);
			height: 80rpx;
			border-radius: 50rpx;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
			padding: 0 40rpx;
			margin: 15rpx 30rpx 0 30rpx;

			.seachIcon {
				position: absolute;
				right: 50rpx;
				width: 32rpx;
				height: 32rpx;
			}

			.searchInput {
				color: #111;
			}
		}

		.content {
			margin-top: 30rpx;
			padding-top: 30rpx;
			background-color: rgb(248, 248, 248);

			.select {
				position: relative;
				margin-bottom: -5rpx;

				.img {
					width: 750rpx;
					height: 198rpx;
				}

				.selectItem {
					.btn {
						position: absolute;
						width: 120rpx;
						height: 150rpx;
						background-color: transparent;

						&::after {
							border: none;
						}
					}

					&:nth-of-type(1) .btn {
						top: 30rpx;
						left: 60rpx;
					}

					&:nth-of-type(2) .btn {
						top: 30rpx;
						left: 230rpx;
					}

					&:nth-of-type(3) .btn {
						top: 30rpx;
						left: 400rpx;
					}

					&:nth-of-type(4) .btn {
						top: 30rpx;
						left: 570rpx;
					}
				}
			}

			.graphAndTxt {
				background-color: #fff;
				border-radius: 50rpx 50rpx 0 0;
				padding: 68.6rpx 36.5rpx 0 36.5rpx;

				.graph {
					border: 1rpx solid #e2e2e2;
					border-radius: 30rpx 30rpx 0 0;

					.graph_header {
						padding: 32rpx 20.5rpx 0 24rpx;
						display: flex;
						align-items: center;

						.left {
							color: #333333;
							font-family: "PingFang SC";
							font-size: 15px;
							font-style: normal;
							font-weight: 400;
							line-height: 15px;
						}

						.center {
							margin-left: 105rpx;
							display: flex;
							align-items: center;

							text {
								width: 160rpx;
								height: 36rpx;
								padding-left: 10rpx;
								color: #000000;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
								text-align: center;
								font-family: "PingFang SC";
								font-size: 18px;
								font-style: normal;
								font-weight: 500;
								line-height: 18px;
							}

							.last {
								width: 15rpx;
								height: 20rpx;
								margin-right: 30rpx;
							}

							.next {
								width: 15rpx;
								height: 20rpx;
								margin-left: 30rpx;
							}
						}

						.right {
							margin-left: 50rpx;
							color: #6a6a6a;
							font-family: "PingFang SC";
							font-size: 13px;
							font-style: normal;
							font-weight: 400;
							line-height: 15px;
						}
					}

					.graph_data {
						display: flex;
						padding: 48rpx 24rpx;

						text {
							display: flex;
							color: #25ba5d;
							font-family: "PingFang SC";
							font-size: 17px;
							line-height: 17px;
						}

						text:nth-child(2) {
							margin-left: 120rpx;
						}

						text:nth-child(3) {
							margin-left: 150rpx;
						}
					}

					.graph_content {
						.charts-box {
							width: 100%;
							height: 100%;
						}
					}
				}

				.txt {
					background-color: #F3F3F3;
					margin-top: 48rpx;
					border-radius: 30rpx;

					.txtHeader {
						padding: 30rpx 24rpx;

						image {
							width: 20rpx;
							height: 20rpx;
						}

						text {
							background-color: #FFFFFF;
							color: #000000;
							padding: 0 22rpx;
							border-radius: 22rpx;
							font-size: 28rpx;
							font-weight: 400;
							line-height: 37rpx;
						}
					}

					.txtContent {
						min-height: 200rpx;
						padding: 20rpx 30rpx;
						margin-bottom: 100rpx;
						::v-deep * {
						    box-sizing: border-box;
						    width: 100% !important; // 强制所有解析后的标签占满容器宽度
						    white-space: normal !important; // 取消强制不换行
						    word-wrap: break-word !important; // 长词/长数字自动换行
						  }
						
						  // 标题样式（确保换行）
						  ::v-deep h2 {
						    font-size: 32rpx;
						    color: #333;
						    margin: 25rpx 0 15rpx;
						    line-height: 1.5;
						  }
						
						  // 段落样式（核心换行控制）
						  ::v-deep p {
						    font-size: 26rpx;
						    color: #666;
						    margin: 15rpx 0;
						    line-height: 1.8; // 增加行高，提升可读性
						    text-align: justify; // 两端对齐，避免单侧参差不齐
						  }
						
						  // 列表样式（纵向排列）
						  ::v-deep ul, ::v-deep ol {
						    margin: 15rpx 0 15rpx 30rpx;
						  }
						
						  ::v-deep li {
						    margin: 10rpx 0;
						    line-height: 1.6;
						  }
						
						  // 加载状态样式
						  .loading {
						    text-align: center;
						    padding: 50rpx 0;
						    color: #666;
						    font-size: 26rpx;
						  }
					}
				}
			}
		}

		.static-footer {
			position: fixed;
			bottom: 0;
			width: 100%;
		}
	}

	* {
		box-sizing: border-box;
	}
</style>