App.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185
  1. <script setup>
  2. import { ref, onMounted, nextTick, watch, onBeforeUnmount, getCurrentInstance } from 'vue';
  3. import { useI18n } from "vue-i18n";
  4. const { locale } = useI18n();
  5. import {
  6. onLoad,
  7. onShow,
  8. onLaunch
  9. } from '@dcloudio/uni-app'
  10. import {
  11. updateRoute
  12. } from "@/hooks/useRoute";
  13. import useGlobalStore from "@/stores/use-global-store";
  14. // import { useAppUpdate } from '@/hooks/useAppUpdate'
  15. // const { checkUpdate } = useAppUpdate()
  16. const globalStore = useGlobalStore()
  17. onLoad((options) => {
  18. updateRoute();
  19. // checkUpdate()
  20. })
  21. onShow((options) => {
  22. updateRoute();
  23. // checkUpdate()
  24. })
  25. // App.vue 或你的初始化文件中
  26. function initTheme() {
  27. // #ifdef H5
  28. // H5 端:使用 matchMedia 主动获取当前系统主题
  29. const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches
  30. const theme = isDarkMode ? 'dark' : 'light'
  31. console.log('H5 初始主题:', theme)
  32. globalStore.setGlobalTheme(theme)
  33. // 监听变化(你的 onThemeChange 已经能工作,但可以再加一层保险)
  34. const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)')
  35. const handleChange = (e) => {
  36. const newTheme = e.matches ? 'dark' : 'light'
  37. console.log('matchMedia 监听到主题变化:', newTheme)
  38. globalStore.setGlobalTheme(newTheme)
  39. }
  40. // 兼容旧版浏览器
  41. if (darkModeQuery.addEventListener) {
  42. darkModeQuery.addEventListener('change', handleChange)
  43. } else {
  44. darkModeQuery.addListener(handleChange)
  45. }
  46. // #endif
  47. // #ifdef APP-PLUS
  48. // App 端:使用原生 API
  49. uni.getSystemInfo({
  50. success: (res) => {
  51. let theme = res.osTheme || 'light'
  52. console.log('App 系统主题:', theme)
  53. globalStore.setGlobalTheme(theme)
  54. }
  55. })
  56. uni.onThemeChange((res) => {
  57. console.log('App 主题变化:', res.theme)
  58. globalStore.setGlobalTheme(res.theme)
  59. })
  60. // #endif
  61. }
  62. onLaunch((options) => {
  63. // updateRoute();
  64. // checkUpdate()
  65. // 调用初始化
  66. // initTheme()
  67. })
  68. watch(locale, () => {
  69. const currentPath = route.path;
  70. menu.value.forEach((item, index) => {
  71. if (item.children) {
  72. const isActive = item.children.some(child => child.path.includes(currentPath));
  73. menu.value[index].isOpenMenu = isActive;
  74. if (isActive) {
  75. nextTick(() => {
  76. updateSubmenuHeight(index);
  77. });
  78. }
  79. }
  80. });
  81. }, { immediate: true })
  82. onMounted(() => {
  83. const sysInfo = uni.getSystemInfoSync();
  84. globalStore.setBarHeight(sysInfo.statusBarHeight || 60);
  85. // ---------- 新增 H5 端专属初始化 ----------
  86. // 仅在 H5 端执行(通过环境判断)
  87. // #ifdef H5
  88. if (typeof window !== 'undefined') {
  89. const instance = getCurrentInstance()
  90. if (instance) {
  91. window.vm = instance.proxy
  92. }
  93. }
  94. // #endif
  95. });
  96. </script>
  97. <style>
  98. /*每个页面公共css */
  99. </style>
  100. <style lang="scss">
  101. /* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
  102. @import "uview-plus/index.scss";
  103. @import "@/static/scss/global/global.scss";
  104. @import "@/static/scss/global/vu.css";
  105. @import "/static/scss/style.scss";
  106. @font-face {
  107. font-family: 'Google Sans';
  108. src: url('/static/Google_Sans/GoogleSans-VariableFont_GRAD,opsz,wght.ttf') format('truetype-variations');
  109. font-weight: 100 900;
  110. font-style: normal;
  111. font-display: swap;
  112. }
  113. /* 全局字体,不破坏 uni-icons 图标 */
  114. view,
  115. text,
  116. button,
  117. input,
  118. textarea,
  119. label {
  120. font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  121. font-weight: 400;
  122. }
  123. /* 专门保护 uni-icons 不被覆盖 */
  124. .uni-icon,
  125. [class*="uni-icons-"],
  126. .uni-icons {
  127. font-family: uniicons !important;
  128. }
  129. /* 让整个项目文字都能选中 */
  130. * {
  131. -webkit-user-select: text !important;
  132. user-select: text !important;
  133. }
  134. /* 修复滚动层无法选中 */
  135. view,
  136. text,
  137. div,
  138. span {
  139. -webkit-user-select: text !important;
  140. user-select: text !important;
  141. }
  142. /* 强制修复 uni-datetime-picker 重复渲染双日历 */
  143. // .uni-calendar+.uni-calendar {
  144. // display: none !important;
  145. // }
  146. :deep(.u-toolbar__wrapper__confirm) {
  147. font-size: 20px !important;
  148. }
  149. :deep(.u-toolbar__wrapper__cancel) {
  150. font-size: 20px !important;
  151. }
  152. .page {
  153. /* padding: 31px 31px 110px 31px; */
  154. box-sizing: border-box;
  155. /* background: var(--main-bg); */
  156. }
  157. html {
  158. font-size: 32px !important;
  159. }
  160. uni-page-body {
  161. height: 100%;
  162. }
  163. </style>