refactor(utils): 提取系统信息工具函数到单独文件

将获取系统安全区域信息的逻辑从页面组件中提取到独立的工具文件,提高代码复用性
同时更新相关依赖版本
This commit is contained in:
feige996
2025-08-30 19:25:10 +08:00
parent bb3e458086
commit cf506da2aa
3 changed files with 83 additions and 42 deletions

64
pnpm-lock.yaml generated
View File

@@ -138,14 +138,14 @@ importers:
specifier: ^20.17.9
version: 20.19.9
'@uni-helper/eslint-config':
specifier: ^0.4.0
version: 0.4.0(@antfu/eslint-config@4.19.0(@unocss/eslint-plugin@66.4.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.8.3))(@vue/compiler-sfc@3.5.18)(eslint-plugin-format@1.0.1(eslint@9.32.0(jiti@2.5.1)))(eslint@9.32.0(jiti@2.5.1))(typescript@5.8.3))(eslint@9.32.0(jiti@2.5.1))
specifier: ^0.5.0
version: 0.5.0(@antfu/eslint-config@4.19.0(@unocss/eslint-plugin@66.4.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.8.3))(@vue/compiler-sfc@3.5.18)(eslint-plugin-format@1.0.1(eslint@9.32.0(jiti@2.5.1)))(eslint@9.32.0(jiti@2.5.1))(typescript@5.8.3))(eslint@9.32.0(jiti@2.5.1))
'@uni-helper/plugin-uni':
specifier: 0.1.0
version: 0.1.0(@dcloudio/vite-plugin-uni@3.0.0-4070520250711001(postcss@8.5.6)(rollup@4.46.2)(vite@5.2.8(@types/node@20.19.9)(sass@1.77.8)(terser@5.43.1))(vue@3.4.21(typescript@5.8.3)))
'@uni-helper/uni-env':
specifier: ^0.1.7
version: 0.1.7
specifier: ^0.1.8
version: 0.1.8
'@uni-helper/uni-types':
specifier: ^1.0.0-alpha.6
version: 1.0.0-alpha.6(@uni-helper/uni-app-types@1.0.0-alpha.3(typescript@5.8.3)(vue@3.4.21(typescript@5.8.3)))(@uni-helper/uni-cloud-types@1.0.0-alpha.3(typescript@5.8.3)(vue@3.4.21(typescript@5.8.3)))(@uni-helper/uni-ui-types@1.0.0-alpha.3(@uni-helper/uni-app-types@1.0.0-alpha.3(typescript@5.8.3)(vue@3.4.21(typescript@5.8.3)))(typescript@5.8.3)(vue@3.4.21(typescript@5.8.3)))(typescript@5.8.3)(vue@3.4.21(typescript@5.8.3))
@@ -2085,10 +2085,10 @@ packages:
resolution: {integrity: sha512-pWrTcoFNWuwHlA9CvlfSsGWs14JxfN1TH25zM5L7o0pRLhsoZkDnTsXfQRJBEWJoV5DL0jf+Z+sxiud+K0mq1g==}
engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
'@uni-helper/eslint-config@0.4.0':
resolution: {integrity: sha512-8Cbe4Ortvxs9A708LWN5gyZoUx4TpjPQwusL7tPmRLeSgKvwMppeRq3pDckhXiFXXT2RTdn3LKE8SH5gMPD8fg==}
'@uni-helper/eslint-config@0.5.0':
resolution: {integrity: sha512-jU/VT078aZQcwjC4ceuWWR5yh4mJ0PzW5MSrOgLi1MSbBKQe5YTAlvphXAUMYpSHqg7iwCmaWNamy3tv4ZZicw==}
peerDependencies:
'@antfu/eslint-config': ^4.0.1
'@antfu/eslint-config': ^5.0.0
eslint: ^9.10.0
'@uni-helper/plugin-uni@0.1.0':
@@ -2110,8 +2110,8 @@ packages:
typescript: ^5.5.4
vue: ^3.4.21
'@uni-helper/uni-env@0.1.7':
resolution: {integrity: sha512-vxWnscbm1VgmK4ZzqN721mY0mIIVCeJutA32fH9P29itaYewVfL9VAWZWZi7nHJEssTkzhfdTTfydcnJKxUQzg==}
'@uni-helper/uni-env@0.1.8':
resolution: {integrity: sha512-oZQisgM5sFarGrswKHJvS5S7xNMXLjcBcPTKp2gzLMon+chdHiKua1+Hlqe/NX79Re35W4A6/QHDrw9cZ5AVGQ==}
'@uni-helper/uni-types@1.0.0-alpha.6':
resolution: {integrity: sha512-lGSm3RUOQThyYIUuJI46b8ug3nGZMyRfMQ/ktOGNxOXBukGA1TF1TN2m4MjKUklIQ+kiIuIgZJoU3S7oIK5emw==}
@@ -4303,6 +4303,10 @@ packages:
resolution: {integrity: sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==}
engines: {node: '>=14'}
local-pkg@1.1.2:
resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
engines: {node: '>=14'}
localstorage-polyfill@1.0.1:
resolution: {integrity: sha512-m4iHVZxFH5734oQcPKU08025gIz2+4bjWR9lulP8ZYxEJR0BpA0w32oJmkzh8y3UI9ci7xCBehQDc3oA1X+VHw==}
engines: {node: '>=6'}
@@ -5007,6 +5011,9 @@ packages:
pkg-types@2.2.0:
resolution: {integrity: sha512-2SM/GZGAEkPp3KWORxQZns4M+WSeXbC2HEvmOIJe3Cmiv6ieAJvdVhDldtHqM5J1Y7MrR1XhkBT/rMlhh9FdqQ==}
pkg-types@2.3.0:
resolution: {integrity: sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==}
pluralize@8.0.0:
resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
engines: {node: '>=4'}
@@ -5152,6 +5159,9 @@ packages:
quansync@0.2.10:
resolution: {integrity: sha512-t41VRkMYbkHyCYmOvx/6URnN80H7k4X0lLdBMGsz+maAwrJQYB1djpV6vHrQIBE0WBSGqhtEHrK9U3DWWH8v7A==}
quansync@0.2.11:
resolution: {integrity: sha512-AifT7QEbW9Nri4tAwR5M/uzpBuqfZf+zwaEM/QkzEjj7NBuFD2rBuy0K3dE+8wltbezDV7JMA0WfnCPYRSYbXA==}
querystringify@2.2.0:
resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
@@ -8719,7 +8729,7 @@ snapshots:
'@types/babel__core@7.20.5':
dependencies:
'@babel/parser': 7.28.0
'@babel/parser': 7.28.3
'@babel/types': 7.28.2
'@types/babel__generator': 7.27.0
'@types/babel__template': 7.4.4
@@ -8731,7 +8741,7 @@ snapshots:
'@types/babel__template@7.4.4':
dependencies:
'@babel/parser': 7.28.0
'@babel/parser': 7.28.3
'@babel/types': 7.28.2
'@types/babel__traverse@7.28.0':
@@ -8896,13 +8906,13 @@ snapshots:
'@typescript-eslint/types': 8.38.0
eslint-visitor-keys: 4.2.1
'@uni-helper/eslint-config@0.4.0(@antfu/eslint-config@4.19.0(@unocss/eslint-plugin@66.4.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.8.3))(@vue/compiler-sfc@3.5.18)(eslint-plugin-format@1.0.1(eslint@9.32.0(jiti@2.5.1)))(eslint@9.32.0(jiti@2.5.1))(typescript@5.8.3))(eslint@9.32.0(jiti@2.5.1))':
'@uni-helper/eslint-config@0.5.0(@antfu/eslint-config@4.19.0(@unocss/eslint-plugin@66.4.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.8.3))(@vue/compiler-sfc@3.5.18)(eslint-plugin-format@1.0.1(eslint@9.32.0(jiti@2.5.1)))(eslint@9.32.0(jiti@2.5.1))(typescript@5.8.3))(eslint@9.32.0(jiti@2.5.1))':
dependencies:
'@antfu/eslint-config': 4.19.0(@unocss/eslint-plugin@66.4.0(eslint@9.32.0(jiti@2.5.1))(typescript@5.8.3))(@vue/compiler-sfc@3.5.18)(eslint-plugin-format@1.0.1(eslint@9.32.0(jiti@2.5.1)))(eslint@9.32.0(jiti@2.5.1))(typescript@5.8.3)
'@eslint/eslintrc': 3.3.1
eslint: 9.32.0(jiti@2.5.1)
eslint-flat-config-utils: 2.1.1
local-pkg: 1.1.1
local-pkg: 1.1.2
transitivePeerDependencies:
- supports-color
@@ -8920,7 +8930,7 @@ snapshots:
typescript: 5.8.3
vue: 3.4.21(typescript@5.8.3)
'@uni-helper/uni-env@0.1.7':
'@uni-helper/uni-env@0.1.8':
dependencies:
std-env: 3.9.0
@@ -8940,7 +8950,7 @@ snapshots:
'@uni-helper/unocss-preset-uni@0.2.11(@unocss/preset-legacy-compat@0.59.4)(@unocss/preset-mini@66.0.0)(@unocss/rule-utils@66.4.0)(@unocss/vite@66.0.0(vite@5.2.8(@types/node@20.19.9)(sass@1.77.8)(terser@5.43.1))(vue@3.4.21(typescript@5.8.3)))(unocss-applet@0.10.0(@unocss/core@66.4.0)(@unocss/preset-mini@66.0.0)(@unocss/preset-wind3@66.0.0)(unocss@66.0.0(postcss@8.5.6)(vite@5.2.8(@types/node@20.19.9)(sass@1.77.8)(terser@5.43.1))(vue@3.4.21(typescript@5.8.3))))(unocss@66.0.0(postcss@8.5.6)(vite@5.2.8(@types/node@20.19.9)(sass@1.77.8)(terser@5.43.1))(vue@3.4.21(typescript@5.8.3)))':
dependencies:
'@uni-helper/uni-env': 0.1.7
'@uni-helper/uni-env': 0.1.8
'@unocss/preset-legacy-compat': 0.59.4
'@unocss/rule-utils': 66.4.0
unocss: 66.0.0(postcss@8.5.6)(vite@5.2.8(@types/node@20.19.9)(sass@1.77.8)(terser@5.43.1))(vue@3.4.21(typescript@5.8.3))
@@ -8967,7 +8977,7 @@ snapshots:
'@uni-helper/vite-plugin-uni-layouts@0.1.11(rollup@4.46.2)':
dependencies:
'@babel/types': 7.28.2
'@uni-helper/uni-env': 0.1.7
'@uni-helper/uni-env': 0.1.8
'@vue/compiler-core': 3.4.21
'@vue/compiler-sfc': 3.4.21
ast-kit: 0.11.3(rollup@4.46.2)
@@ -8992,7 +9002,7 @@ snapshots:
dependencies:
'@babel/generator': 7.28.3
'@babel/types': 7.28.2
'@uni-helper/uni-env': 0.1.7
'@uni-helper/uni-env': 0.1.8
'@vue/compiler-sfc': 3.4.21
ast-kit: 2.1.2
chokidar: 3.6.0
@@ -9014,7 +9024,7 @@ snapshots:
'@uni-helper/vite-plugin-uni-platform@0.0.5':
dependencies:
'@uni-helper/uni-env': 0.1.7
'@uni-helper/uni-env': 0.1.8
'@uni-ku/bundle-optimizer@1.3.8(postcss@8.5.6)(rollup@4.46.2)(vite@5.2.8(@types/node@20.19.9)(sass@1.77.8)(terser@5.43.1))(vue@3.4.21(typescript@5.8.3))':
dependencies:
@@ -11084,7 +11094,7 @@ snapshots:
istanbul-lib-instrument@5.2.1:
dependencies:
'@babel/core': 7.28.0
'@babel/parser': 7.28.0
'@babel/parser': 7.28.3
'@istanbuljs/schema': 0.1.3
istanbul-lib-coverage: 3.2.2
semver: 6.3.1
@@ -11405,7 +11415,7 @@ snapshots:
jest-snapshot@27.5.1:
dependencies:
'@babel/core': 7.28.0
'@babel/generator': 7.28.0
'@babel/generator': 7.28.3
'@babel/plugin-syntax-typescript': 7.27.1(@babel/core@7.28.0)
'@babel/traverse': 7.28.0
'@babel/types': 7.28.2
@@ -11657,6 +11667,12 @@ snapshots:
pkg-types: 2.2.0
quansync: 0.2.10
local-pkg@1.1.2:
dependencies:
mlly: 1.7.4
pkg-types: 2.3.0
quansync: 0.2.11
localstorage-polyfill@1.0.1: {}
locate-path@5.0.0:
@@ -12503,6 +12519,12 @@ snapshots:
exsolve: 1.0.7
pathe: 2.0.3
pkg-types@2.3.0:
dependencies:
confbox: 0.2.2
exsolve: 1.0.7
pathe: 2.0.3
pluralize@8.0.0: {}
pngjs@3.4.0: {}
@@ -12640,6 +12662,8 @@ snapshots:
quansync@0.2.10: {}
quansync@0.2.11: {}
querystringify@2.2.0: {}
queue-microtask@1.2.3: {}

View File

@@ -1,6 +1,7 @@
<script lang="ts" setup>
import { LOGIN_PAGE } from '@/router/config'
import { useThemeStore } from '@/store'
import { safeAreaInsets } from '@/utils/systemInfo'
defineOptions({
name: 'Home',
@@ -17,28 +18,6 @@ definePage({
const themeStore = useThemeStore()
// 获取屏幕边界到安全区域距离
let safeAreaInsets
let systemInfo
// #ifdef MP-WEIXIN
// 微信小程序使用新的API
systemInfo = uni.getWindowInfo()
safeAreaInsets = systemInfo.safeArea
? {
top: systemInfo.safeArea.top,
right: systemInfo.windowWidth - systemInfo.safeArea.right,
bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
left: systemInfo.safeArea.left,
}
: null
// #endif
// #ifndef MP-WEIXIN
// 其他平台继续使用uni API
systemInfo = uni.getSystemInfoSync()
safeAreaInsets = systemInfo.safeAreaInsets
// #endif
const author = ref('菲鸽')
const description = ref(
'unibest 是一个集成了多种工具和技术的 uniapp 开发模板,由 uniapp + Vue3 + Ts + Vite5 + UnoCss + VSCode 构建,模板具有代码提示、自动格式化、统一配置、代码片段等功能,并内置了许多常用的基本组件和基本功能,让你编写 uniapp 拥有 best 体验。',

38
src/utils/systemInfo.ts Normal file
View File

@@ -0,0 +1,38 @@
/* eslint-disable import/no-mutable-exports */
// 获取屏幕边界到安全区域距离
let systemInfo
let safeAreaInsets
// #ifdef MP-WEIXIN
// 微信小程序使用新的API
systemInfo = uni.getWindowInfo()
safeAreaInsets = systemInfo.safeArea
? {
top: systemInfo.safeArea.top,
right: systemInfo.windowWidth - systemInfo.safeArea.right,
bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
left: systemInfo.safeArea.left,
}
: null
// #endif
// #ifndef MP-WEIXIN
// 其他平台继续使用uni API
systemInfo = uni.getSystemInfoSync()
safeAreaInsets = systemInfo.safeAreaInsets
// #endif
console.log('systemInfo', systemInfo)
// 微信里面打印
// pixelRatio: 3
// safeArea: {top: 47, left: 0, right: 390, bottom: 810, width: 390, …}
// safeAreaInsets: {top: 47, left: 0, right: 0, bottom: 34}
// screenHeight: 844
// screenTop: 91
// screenWidth: 390
// statusBarHeight: 47
// windowBottom: 0
// windowHeight: 753
// windowTop: 0
// windowWidth: 390
export { safeAreaInsets, systemInfo }