PunchSettle-MiniProgram/stores/safeArea.js

import { defineStore } from 'pinia';

/**
 * 安全区
 * statusBarHeight: 状态栏高度
 * capsuleBarHeight: 胶囊按钮高度
 * topHeight: 状态栏+胶囊按钮高度
 * bottomHeight: 底部安全区高度
 * capsuleBarHeight 胶囊按钮栏高度
 * capsuleBarLeft 胶囊按钮栏左边距离
 * capsuleBarMargin 胶囊按钮栏边距
 * capsuleBarMarginTop 胶囊按钮栏上边距
 * capsuleBarMarginBottom 胶囊按钮栏下边距
 * capsuleBarContentHeight 胶囊按钮内容高度
 */
export const useSafeAreaStore = defineStore('safeArea', {
	state: () => ({
		statusBarHeight: 0,
		capsuleBarHeight: 0,
		topHeight: 0,
		bottomHeight: 0,
		capsuleBarLeft: 0,
		capsuleBarMargin: 0,
		capsuleBarMarginTop: 0,
		capsuleBarMarginBottom: 0,
		capsuleBarContentHeight: 0
	}),
	getters: {
		/**
		 * 状态栏样式
		 */
		statusBarStyle: (state) => ({
			height: state.statusBarHeight+'px'
		}),
		/**
		 * 胶囊区样式
		 */
		capsuleBarStyle: (state) => ({
			height: state.capsuleBarHeight+'px',
			width: state.capsuleBarLeft+'px',
			'padding-top': state.capsuleBarMarginTop+'px', 
			'padding-bottom': state.capsuleBarMarginBottom+'px'
		}),
		/**
		 * 图标容器样式
		 */
		iconBoxStyle: (state) => ({
			width: state.capsuleBarContentHeight-5+'px',
			height: state.capsuleBarContentHeight-5+'px'
		}),
		/**
		 * 图标大小
		 */
		iconSize: (state) => state.capsuleBarContentHeight-10,
		/**
		 * 底部填充区样式
		 */
		bottomBoxStyle: (state) => ({
			height: state.bottomHeight+'px'
		})
	}
});