提交

miniprogram/components/app-safe-header.vue

@@ -0,0 +1,74 @@
+<template>
+  <view class="app-safe-header" :style="headerStyle">
+    <view class="app-safe-header__safe" />
+    <view class="app-safe-header__nav">
+      <view class="app-safe-header__left">
+        <slot name="left" />
+      </view>
+      <view class="app-safe-header__title-wrap">
+        <slot>
+          <text class="app-safe-header__title">{{ title }}</text>
+        </slot>
+      </view>
+      <view class="app-safe-header__right" />
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { getGlobalSafeArea } from '@/utils/safeArea'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
+  },
+  background: {
+    type: String,
+    default: 'transparent',
+  },
+})
+
+const safeArea = getGlobalSafeArea()
+
+const headerStyle = computed(() => ({
+  '--sq-safe-top': `${safeArea.topSafeHeight}px`,
+  '--sq-nav-height': `${safeArea.navContentHeight}px`,
+  '--sq-capsule-right-safe': `${safeArea.capsuleRightSafeWidth}px`,
+  '--sq-header-background': props.background,
+}))
+</script>
+
+<style scoped lang="scss">
+.app-safe-header {
+  background: var(--sq-header-background);
+}
+
+.app-safe-header__safe {
+  height: var(--sq-safe-top, 20px);
+}
+
+.app-safe-header__nav {
+  height: var(--sq-nav-height, 44px);
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) var(--sq-capsule-right-safe, 96px);
+  align-items: center;
+  box-sizing: border-box;
+}
+
+.app-safe-header__left {
+  min-width: 0;
+}
+
+.app-safe-header__title-wrap {
+  min-width: 0;
+}
+
+.app-safe-header__title {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>