wz-uniapp/pages/military/topic-map/topic-map.vue

<template>
	<view class="topic-page">
		<view class="page-content page-fade" :class="{ 'enter-active': enterActive }">
			<view class="safe-top"></view>
			<view class="page-body">
			<view class="top-row">
				<view class="back-home" @click="backHome">
					<uni-icons type="left" color="#ffffff" :size="18" />
					<text>返回首页</text>
				</view>
				<view class="search-box" @click="onTap('知识搜索')">
					<uni-icons type="search" color="#8ab29a" :size="14" />
					<text>搜索</text>
				</view>
			</view>
			<text class="meta-text">{{ pageTitle }} · 主题思维导图</text>

			<view class="map-panel">
				<mind-map-columns
					v-if="treeData"
					:tree-data="treeData"
					accent-color="#ff8a33"
					accent-soft="rgba(255, 138, 51, 0.12)"
					@open-detail="goDetail"
				/>
			</view>

				<view class="bottom-space"></view>
			</view>
		</view>
		<military-tab-bar active="plan" mask-color="#123a27" />
	</view>
</template>

<script>
import MilitaryTabBar from '../components/military-tab-bar.vue';
import MindMapColumns from '../components/mind-map-columns.vue';
import { topicMindMaps, topicMeta } from '../data/mindmap';

export default {
	components: {
		MilitaryTabBar,
		MindMapColumns
	},
	data() {
		return {
			enterActive: false,
			topic: 'long',
			pageTitle: '部队长期发展',
			treeData: null
		};
	},
	onLoad(options) {
		if (options && options.topic && topicMindMaps[options.topic]) {
			this.topic = options.topic;
		}
		this.pageTitle = topicMeta[this.topic] || '主题导图';
		this.treeData = this.buildTree(topicMindMaps[this.topic]);
	},
	onShow() {
		this.playEnter();
	},
	methods: {
		buildTree(tree) {
			return JSON.parse(JSON.stringify(tree));
		},
		playEnter() {
			this.enterActive = false;
			setTimeout(() => {
				this.enterActive = true;
			}, 20);
		},
		goDetail(node) {
			const title = encodeURIComponent(node.title || '详情介绍');
			const desc = encodeURIComponent(node.desc || '暂无详细说明');
			uni.navigateTo({
				url: `/pages/military/plan-detail/plan-detail?title=${title}&desc=${desc}`
			});
		},
		onTap(label) {
			uni.showToast({
				title: `${label} 可点击`,
				icon: 'none'
			});
		},
		backHome() {
			uni.switchTab({
				url: '/pages/military/home/home'
			});
		}
	}
};
</script>

<style scoped>
.topic-page {
	min-height: 100vh;
	background: radial-gradient(circle at 30% 0%, #2b7b4c 0%, #1a5635 45%, #123a27 100%);
}

.page-content {
	min-height: 100vh;
}

.page-fade {
	opacity: 0;
	transform: translateY(8rpx);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.page-fade.enter-active {
	opacity: 1;
	transform: translateY(0);
}

.safe-top {
	height: calc(var(--status-bar-height) + 8rpx);
}

.page-body {
	padding: 0 24rpx;
}

.top-row {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.back-home {
	height: 66rpx;
	padding: 0 14rpx;
	border-radius: 18rpx;
	background: rgba(255, 255, 255, 0.16);
	display: flex;
	align-items: center;
	gap: 6rpx;
	font-size: 22rpx;
	color: #ffffff;
}

.search-box {
	flex: 1;
	height: 66rpx;
	padding: 0 18rpx;
	border-radius: 18rpx;
	background: #edf8f1;
	display: flex;
	align-items: center;
	gap: 8rpx;
	font-size: 24rpx;
	color: #7b9f88;
}

.meta-text {
	display: block;
	margin-top: 16rpx;
	font-size: 24rpx;
	font-weight: 600;
	color: rgba(231, 247, 236, 0.95);
}

.map-panel {
	margin-top: 20rpx;
	padding: 18rpx 14rpx;
	border-radius: 20rpx;
	background: rgba(220, 245, 229, 0.9);
	height: 68vh;
	min-height: 560rpx;
	box-sizing: border-box;
}

.bottom-space {
	height: 190rpx;
}
</style>