map-offline/src/App.vue

<script setup lang="ts">
	import { onBeforeMount, ref, watch } from 'vue';
	import ThemeSwitch from './components/ThemeSwitch.vue';
	import MarkMenu from './components/left/MarkMenu.vue';
	import CtrlMenu from './components/left/CtrlMenu.vue';
	import { useWindowSize } from '@vueuse/core';
	import { useRoute, useRouter } from 'vue-router';
import { useMarkStore } from './store/useMarkStore';

	const {marks} = useMarkStore();
	const tab = ref('mark');
	const sideStyle = ref('20em,logo');
	const { width } = useWindowSize();
	const route = useRoute();
	const router = useRouter();
	const nowRouter = ref(route.path);

	watch(nowRouter, (path) => router.push(path));

	onBeforeMount(() => {
		sideStyle.value = width.value > 600 ? '20em,logo' : '0em,bar';
	});

	function changeSide(data: string) {
		const _data = data.split(',');
		document.body.style.setProperty('--side', _data[0]);
		document.body.style.setProperty('--logoOrBar', _data[1]);
	}

	watch(sideStyle, changeSide);

	
</script>

<template>
	<h5 class="logo">离线地图</h5>
	<div class="main" ><router-view></router-view></div>
	<div class="bar">
		<q-toggle class="leftctl" v-model="sideStyle" true-value="20em,logo" false-value="0em,bar" />
		<ThemeSwitch></ThemeSwitch>
	</div>
	<div class="left">
		<q-btn-toggle
			v-model="nowRouter"
			spread
			class="my-custom-toggle"
			no-caps
			rounded
			unelevated
			toggle-color="primary"
			color="white"
			text-color="primary"
			:options="[
				{ label: '百度', value: '/baidu' },
				{ label: '高德', value: '/gaode' },
				{ label: '热力图', value: '/echart' },
			]" />
		<q-tabs v-model="tab" glossy>
			<q-tab name="mark" label="标点" />
			<q-tab name="ctrl" label="控制" />
		</q-tabs>
		<q-tab-panels v-model="tab" animated keep-alive>
			<!-- <q-tab-panel name="mark">
				<MarkMenu :marks="marks" @flyTo="flytoMark" @remove="removeMark"></MarkMenu>
			</q-tab-panel>
			<q-tab-panel name="ctrl">
				<CtrlMenu @change="ctrlMap"></CtrlMenu>
			</q-tab-panel> -->
		</q-tab-panels>
	</div>
</template>

<style scoped lang="scss">
	.logo {
		margin: unset;
		grid-area: var(--logoOrBar, logo);
		will-change: filter;
		transition: filter 300ms;
		align-self: center;
		text-align: center;
	}

	.logo:hover {
		filter: drop-shadow(0 0 2em #646cffaa);
	}

	.logo.vue:hover {
		filter: drop-shadow(0 0 2em #42b883aa);
	}

	.left {
		grid-area: left;
		overflow: auto;
		user-select: none;


		.leftctl {
			position: absolute;
			top: 0px;
			left: 10px;
		}
	}
	.main {
		grid-area: main;
		position: relative;
	}

	.bar {
		grid-area: bar;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-right: 20px;
	}
</style>