From cfe0f944676b9749e89f70c78a147bec9189cb77 Mon Sep 17 00:00:00 2001
From: wuzilong <704541015@qq.com>
Date: Sat, 12 Sep 2026 18:48:57 +0800
Subject: [PATCH] feat(miniprogram): add safe-area CSS vars style builder

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../utils/__tests__/safeArea.style.test.mjs       | 15 +++++++++++++++
 miniprogram/utils/safeArea.js                     |  8 ++++++++
 miniprogram/utils/safeAreaCss.js                  |  8 ++++++++
 3 files changed, 31 insertions(+)
 create mode 100644 miniprogram/utils/__tests__/safeArea.style.test.mjs
 create mode 100644 miniprogram/utils/safeAreaCss.js

diff --git a/miniprogram/utils/__tests__/safeArea.style.test.mjs b/miniprogram/utils/__tests__/safeArea.style.test.mjs
new file mode 100644
index 000000000..d21e306c0
--- /dev/null
+++ b/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')
diff --git a/miniprogram/utils/safeArea.js b/miniprogram/utils/safeArea.js
index d6e6aa500..bc3a3710f 100644
--- a/miniprogram/utils/safeArea.js
+++ b/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())
+}
diff --git a/miniprogram/utils/safeAreaCss.js b/miniprogram/utils/safeAreaCss.js
new file mode 100644
index 000000000..48a7fa4d6
--- /dev/null
+++ b/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`,
+  }
+}