feat(miniprogram): add safe-area CSS vars style builder

Co-authored-by: Cursor <cursoragent@cursor.com>

miniprogram/utils/__tests__/safeArea.style.test.mjs

@@ -0,0 +1,15 @@
+import assert from 'node:assert/strict'
+import { buildSafeAreaCssVarsStyle } from '../safeAreaCss.js'
+
+const style = buildSafeAreaCssVarsStyle({
+  topSafeHeight: 44,
+  navContentHeight: 40,
+  headerHeight: 84,
+  capsuleRightSafeWidth: 96,
+})
+
+assert.equal(style['--sq-safe-top'], '44px')
+assert.equal(style['--sq-nav-height'], '40px')
+assert.equal(style['--sq-header-height'], '84px')
+assert.equal(style['--sq-capsule-right-safe'], '96px')
+console.log('ok')

miniprogram/utils/safeArea.js

@@ -1,3 +1,7 @@
+import { buildSafeAreaCssVarsStyle } from './safeAreaCss.js'
+
+export { buildSafeAreaCssVarsStyle }
+
 const DEFAULT_NAV_CONTENT_HEIGHT = 44
 const DEFAULT_GAP = 8
 const DEFAULT_HORIZONTAL_PADDING = 8
@@ -79,3 +83,7 @@ export function getGlobalSafeArea() {
   const app = getApp?.()
   return app?.globalData?.safeArea || computeSafeAreaMetrics()
 }
+
+export function getSafeAreaStyle() {
+  return buildSafeAreaCssVarsStyle(getGlobalSafeArea())
+}

miniprogram/utils/safeAreaCss.js

@@ -0,0 +1,8 @@
+export function buildSafeAreaCssVarsStyle(metrics) {
+  return {
+    '--sq-safe-top': `${metrics.topSafeHeight}px`,
+    '--sq-nav-height': `${metrics.navContentHeight}px`,
+    '--sq-header-height': `${metrics.headerHeight}px`,
+    '--sq-capsule-right-safe': `${metrics.capsuleRightSafeWidth}px`,
+  }
+}