feat: 更新 page-container 组件，重命名导航栏相关属性并添加背景色和底部安全区适配功能

miniprogram/components/page-container/page-container.scss

@@ -7,6 +7,13 @@
   flex-direction: column;
   position: relative;
   box-sizing: border-box;
+  background-color: var(--pg-container-bg-color);
+
+  // 预留安全区
+  &--safe {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
 }
 
 .page-container__content {

miniprogram/components/page-container/page-container.ts

@@ -6,60 +6,70 @@ Component({
    */
   properties: {
     // 导航栏标题
-    title: {
+    navBarTitle: {
       type: String,
       value: '',
     },
     // 是否显示返回按钮
-    leftArrow: {
+    navBarLeftArrow: {
       type: Boolean,
       value: true,
     },
     // 导航栏是否固定
-    fixed: {
+    navBarFixed: {
       type: Boolean,
       value: true,
     },
     // 导航栏占位
-    placeholder: {
+    navBarPlaceholder: {
       type: Boolean,
       value: true,
     },
     // 是否适配安全区域顶部
-    safeAreaInsetTop: {
+    navBarSafeAreaInsetTop: {
       type: Boolean,
       value: true,
     },
     // 导航栏层级
-    zIndex: {
+    navBarZIndex: {
       type: Number,
       value: 10000,
     },
     // 是否带动画效果
-    animation: {
+    navBarAnimation: {
       type: Boolean,
       value: true,
     },
     // 标题最大长度，超出用 "…" 表示
-    titleMaxLength: {
+    navBarTitleMaxLength: {
       type: Number,
       value: undefined,
     },
     // 是否显示导航栏
-    visible: {
+    navBarVisible: {
       type: Boolean,
       value: true,
     },
     // 导航栏背景色
-    backgroundColor: {
+    navBarBackgroundColor: {
       type: String,
       value: '#ffffff',
     },
     // 导航栏文本颜色（标题、返回按钮等）
-    textColor: {
+    navBarTextColor: {
       type: String,
       value: '#000000',
     },
+    // 是否开启底部安全区适配
+    containerSafeAreaInsetBottom: {
+      type: Boolean,
+      value: true,
+    },
+    // pageContainer背景色
+    containerBackgroundColor: {
+      type: String,
+      value: '#f5f5f5',
+    },
   },
 
   /**
@@ -101,8 +111,8 @@ Component({
      */
     checkShowLeftArrow() {
       const pages = getCurrentPages()
-      const leftArrow = this.properties.leftArrow
+      const leftArrow = this.properties.navBarLeftArrow
-      const visible = this.properties.visible
+      const visible = this.properties.navBarVisible
       const showLeftArrow = pages.length > 1 && leftArrow && visible
       this.setData({
         showLeftArrow,

miniprogram/components/page-container/page-container.wxml

@@ -1,22 +1,24 @@
 <!--components/page-container/page-container.wxml-->
-<view class="page-container">
+<view
+  class="page-container {{containerSafeAreaInsetBottom ? 'page-container--safe' : ''}}"
+  style="--pg-container-bg-color: {{containerBackgroundColor}};"
+>
   <!-- 导航栏 -->
   <t-navbar
-    title="{{title}}"
+    title="{{navBarTitle}}"
     left-arrow="{{showLeftArrow}}"
-    fixed="{{fixed}}"
+    fixed="{{navBarFixed}}"
-    placeholder="{{placeholder}}"
+    placeholder="{{navBarPlaceholder}}"
-    safe-area-inset-top="{{safeAreaInsetTop}}"
+    safe-area-inset-top="{{navBarSafeAreaInsetTop}}"
-    z-index="{{zIndex}}"
+    z-index="{{navBarZIndex}}"
-    animation="{{animation}}"
+    animation="{{navBarAnimation}}"
-    delta="{{delta}}"
+    title-max-length="{{navBarTitleMaxLength}}"
-    title-max-length="{{titleMaxLength}}"
+    visible="{{navBarVisible}}"
-    visible="{{visible}}"
     bind:go-back="goBack"
     bind:success="handleBackSuccess"
     bind:fail="handleBackFail"
     bind:complete="handleBackComplete"
-    style="--td-navbar-color: {{textColor}};--td-navbar-bg-color: {{backgroundColor}};"
+    style="--td-navbar-color: {{navBarTextColor}};--td-navbar-bg-color: {{navBarBackgroundColor}};"
   >
     <!-- 左侧自定义内容插槽 -->
     <slot name="left" slot="left"></slot>

miniprogram/pages/date/date.wxml

@@ -1,5 +1,5 @@
 <!--pages/date/date.wxml-->
-<page-container title="日期时间格式化示例" backgroundColor="#123321" textColor="#ffffff">
+<page-container navBarTitle="日期时间格式化示例" navBarBackgroundColor="#123321" navBarTextColor="#ffffff">
   <view class="container">
     <!-- formatTime 函数示例 -->
     <view class="section">