gypsy-crm-frontend-vu/App.vue

<script setup>
import { ref, onMounted, nextTick, watch, onBeforeUnmount, getCurrentInstance } from 'vue';
import { useI18n } from "vue-i18n";
const { locale } = useI18n();

import {
	onLoad,
	onShow,
	onLaunch
} from '@dcloudio/uni-app'
import {
	updateRoute
} from "@/hooks/useRoute";
import useGlobalStore from "@/stores/use-global-store";
// import { useAppUpdate } from '@/hooks/useAppUpdate'
// const { checkUpdate } = useAppUpdate()
const globalStore = useGlobalStore()
onLoad((options) => {
	updateRoute();
	// checkUpdate()
})
onShow((options) => {
	updateRoute();
	// checkUpdate()
})

// App.vue 或你的初始化文件中
function initTheme() {
	// #ifdef H5
	// H5 端：使用 matchMedia 主动获取当前系统主题
	const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
	const theme = isDarkMode ? 'dark' : 'light'
	globalStore.setGlobalTheme(theme)

	// 监听变化（你的 onThemeChange 已经能工作，但可以再加一层保险）
	const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)')
	const handleChange = (e) => {
		const newTheme = e.matches ? 'dark' : 'light'
		globalStore.setGlobalTheme(newTheme)
	}
	// 兼容旧版浏览器
	if (darkModeQuery.addEventListener) {
		darkModeQuery.addEventListener('change', handleChange)
	} else {
		darkModeQuery.addListener(handleChange)
	}
	// 设置 data-bs-theme 属性到 html 标签
	document.documentElement.setAttribute('data-bs-theme', theme);
	document.documentElement.setAttribute('data-color-theme', 'blue');
	// 同时设置到 body 标签
	document.body.setAttribute('data-bs-theme', theme);
	document.body.setAttribute('data-color-theme', 'blue');
	// #endif

	// #ifdef APP-PLUS
	// App 端：使用原生 API
	uni.getSystemInfo({
		success: (res) => {
			let theme = res.osTheme || 'light'
			globalStore.setGlobalTheme(theme)
		}
	})
	uni.onThemeChange((res) => {
		globalStore.setGlobalTheme(res.theme)
	})
	// #endif
}


onLaunch((options) => {
	// updateRoute();
	// checkUpdate()
	// 调用初始化
	initTheme()
})

watch(locale, () => {
	const currentPath = route.path;
	menu.value.forEach((item, index) => {
		if (item.children) {
			const isActive = item.children.some(child => child.path.includes(currentPath));
			menu.value[index].isOpenMenu = isActive;
			if (isActive) {
				nextTick(() => {
					updateSubmenuHeight(index);
				});
			}
		}
	});
}, { immediate: true })

onMounted(() => {
	const sysInfo = uni.getSystemInfoSync();
	globalStore.setBarHeight(sysInfo.statusBarHeight || 60);

	// ---------- 新增 H5 端专属初始化 ----------
	// 仅在 H5 端执行（通过环境判断）
	// #ifdef H5
	if (typeof window !== 'undefined') {
		const instance = getCurrentInstance()
		if (instance) {
			window.vm = instance.proxy
		}
	}
	// #endif
});
</script>

<style>
/*每个页面公共css */
</style>

<style lang="scss">
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
@import "uview-plus/index.scss";
@import "@/static/scss/global/global.scss";
@import "@/static/scss/global/vu.css";
@import "/static/scss/style.scss";

@font-face {
	font-family: 'Google Sans';
	src: url('/static/Google_Sans/GoogleSans-VariableFont_GRAD,opsz,wght.ttf') format('truetype-variations');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* 全局字体，不破坏 uni-icons 图标 */
view,
text,
button,
input,
textarea,
label {
	font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-weight: 400;
}

/* 专门保护 uni-icons 不被覆盖 */
.uni-icon,
[class*="uni-icons-"],
.uni-icons {
	font-family: uniicons !important;
}

/* 让整个项目文字都能选中 */
* {
	-webkit-user-select: text !important;
	user-select: text !important;
}

/* 修复滚动层无法选中 */
view,
text,
div,
span {
	-webkit-user-select: text !important;
	user-select: text !important;
}

/* 强制修复 uni-datetime-picker 重复渲染双日历 */
// .uni-calendar+.uni-calendar {
// 	display: none !important;
// }

:deep(.u-toolbar__wrapper__confirm) {
	font-size: 20px !important;
}

:deep(.u-toolbar__wrapper__cancel) {
	font-size: 20px !important;
}

.page {
	/* padding: 31px 31px 110px 31px; */
	box-sizing: border-box;
	/* background: var(--main-bg); */
}

html {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
	font-size: 16px !important;
}

uni-page-body {
	height: 100%;
}

page {
	--bs-bg-opacity: 1;
	background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
}
</style>