diff --git a/miniprogram/app.json b/miniprogram/app.json
index a965b56..9080818 100644
--- a/miniprogram/app.json
+++ b/miniprogram/app.json
@@ -9,10 +9,7 @@
     "pages/four/index"
   ],
   "window": {
-    "navigationStyle": "default",
-    "navigationBarTextStyle": "black",
-    "navigationBarBackgroundColor": "#ffffff",
-    "navigationBarTitleText": "My Weapp Template"
+    "navigationStyle": "custom"
   },
   "tabBar": {
     "custom": true,
diff --git a/miniprogram/components/page-container/page-container.json b/miniprogram/components/page-container/page-container.json
new file mode 100644
index 0000000..2a83e79
--- /dev/null
+++ b/miniprogram/components/page-container/page-container.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "lazyCodeLoading": "requiredComponents",
+  "usingComponents": {
+    "t-navbar": "tdesign-miniprogram/navbar/navbar"
+  }
+}
diff --git a/miniprogram/components/page-container/page-container.scss b/miniprogram/components/page-container/page-container.scss
new file mode 100644
index 0000000..ccb1f4f
--- /dev/null
+++ b/miniprogram/components/page-container/page-container.scss
@@ -0,0 +1,18 @@
+/* components/page-container/page-container.wxss */
+
+.page-container {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.page-container__content {
+  flex: 1;
+  width: 100%;
+  box-sizing: border-box;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
diff --git a/miniprogram/components/page-container/page-container.ts b/miniprogram/components/page-container/page-container.ts
new file mode 100644
index 0000000..100c99a
--- /dev/null
+++ b/miniprogram/components/page-container/page-container.ts
@@ -0,0 +1,163 @@
+// components/page-container/page-container.ts
+
+Component({
+  /**
+   * 组件的属性列表
+   */
+  properties: {
+    // 导航栏标题
+    title: {
+      type: String,
+      value: '',
+    },
+    // 是否显示返回按钮
+    leftArrow: {
+      type: Boolean,
+      value: true,
+    },
+    // 导航栏是否固定
+    fixed: {
+      type: Boolean,
+      value: true,
+    },
+    // 导航栏占位
+    placeholder: {
+      type: Boolean,
+      value: true,
+    },
+    // 是否适配安全区域顶部
+    safeAreaInsetTop: {
+      type: Boolean,
+      value: true,
+    },
+    // 导航栏层级
+    zIndex: {
+      type: Number,
+      value: 10000,
+    },
+    // 是否带动画效果
+    animation: {
+      type: Boolean,
+      value: true,
+    },
+    // 后退的层数
+    delta: {
+      type: Number,
+      value: 1,
+    },
+    // 标题最大长度，超出用 "…" 表示
+    titleMaxLength: {
+      type: Number,
+      value: undefined,
+    },
+    // 是否显示导航栏
+    visible: {
+      type: Boolean,
+      value: true,
+    },
+    // 导航栏背景色
+    backgroundColor: {
+      type: String,
+      value: '#ffffff',
+    },
+    // 导航栏文本颜色（标题、返回按钮等）
+    textColor: {
+      type: String,
+      value: '#000000',
+    },
+  },
+
+  /**
+   * 组件的初始数据
+   */
+  data: {
+    // 是否显示返回按钮（根据页面栈判断）
+    showLeftArrow: true,
+  },
+
+  /**
+   * 组件生命周期函数
+   */
+  lifetimes: {
+    // 组件实例进入页面节点树时执行
+    attached() {
+      // 判断是否显示返回按钮
+      this.checkShowLeftArrow()
+    },
+  },
+
+  /**
+   * 属性观察器
+   */
+  observers: {
+    // 监听 visible 和 leftArrow 变化，重新判断是否显示返回按钮
+    'visible, leftArrow'() {
+      this.checkShowLeftArrow()
+    },
+  },
+
+  /**
+   * 组件的方法列表
+   */
+  methods: {
+    /**
+     * 检查是否显示返回按钮
+     * 如果页面栈中只有一个页面，或者 visible 为 false，则不显示返回按钮
+     */
+    checkShowLeftArrow() {
+      const pages = getCurrentPages()
+      const leftArrow = this.properties.leftArrow
+      const visible = this.properties.visible
+      const showLeftArrow = pages.length > 1 && leftArrow && visible
+      this.setData({
+        showLeftArrow,
+      })
+    },
+
+    /**
+     * 返回按钮点击事件
+     */
+    goBack() {
+      const pages = getCurrentPages()
+      const delta = this.properties.delta
+      if (pages.length > 1 && delta > 0) {
+        wx.navigateBack({
+          delta,
+          success: (res) => {
+            // 转发成功事件
+            this.triggerEvent('success', res)
+            // 转发完成事件
+            this.triggerEvent('complete', res)
+          },
+          fail: (err) => {
+            // 转发失败事件
+            this.triggerEvent('fail', err)
+            // 转发完成事件
+            this.triggerEvent('complete', err)
+          },
+        })
+      }
+    },
+
+    /**
+     * 处理返回成功事件（从 t-navbar 转发）
+     */
+    handleBackSuccess(e: WechatMiniprogram.CustomEvent) {
+      this.triggerEvent('success', e.detail)
+    },
+
+    /**
+     * 处理返回失败事件（从 t-navbar 转发）
+     */
+    handleBackFail(e: WechatMiniprogram.CustomEvent) {
+      this.triggerEvent('fail', e.detail)
+    },
+
+    /**
+     * 处理返回完成事件（从 t-navbar 转发）
+     */
+    handleBackComplete(e: WechatMiniprogram.CustomEvent) {
+      this.triggerEvent('complete', e.detail)
+    },
+  },
+})
diff --git a/miniprogram/components/page-container/page-container.wxml b/miniprogram/components/page-container/page-container.wxml
new file mode 100644
index 0000000..9cf748e
--- /dev/null
+++ b/miniprogram/components/page-container/page-container.wxml
@@ -0,0 +1,35 @@
+<!--components/page-container/page-container.wxml-->
+<view class="page-container">
+  <!-- 导航栏 -->
+  <t-navbar
+    title="{{title}}"
+    left-arrow="{{showLeftArrow}}"
+    fixed="{{fixed}}"
+    placeholder="{{placeholder}}"
+    safe-area-inset-top="{{safeAreaInsetTop}}"
+    z-index="{{zIndex}}"
+    animation="{{animation}}"
+    delta="{{delta}}"
+    title-max-length="{{titleMaxLength}}"
+    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}};"
+  >
+    <!-- 左侧自定义内容插槽 -->
+    <slot name="left" slot="left"></slot>
+    <!-- 胶囊区域自定义内容插槽 -->
+    <slot name="capsule" slot="capsule"></slot>
+    <!-- 标题自定义内容插槽 -->
+    <slot name="title" slot="title"></slot>
+  </t-navbar>
+
+  <!-- 内容区域 -->
+  <view
+    class="page-container__content"
+  >
+    <slot></slot>
+  </view>
+</view>
diff --git a/miniprogram/pages/date/date.json b/miniprogram/pages/date/date.json
index a97367d..4a145e0 100644
--- a/miniprogram/pages/date/date.json
+++ b/miniprogram/pages/date/date.json
@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "page-container": "../../components/page-container/page-container"
+  }
 }
diff --git a/miniprogram/pages/date/date.scss b/miniprogram/pages/date/date.scss
index e38e96b..a713a62 100644
--- a/miniprogram/pages/date/date.scss
+++ b/miniprogram/pages/date/date.scss
@@ -2,18 +2,6 @@
 .container {
   padding: 20rpx;
   background-color: #f5f5f5;
-  min-height: 100vh;
-}
-
-.header {
-  margin-bottom: 30rpx;
-  text-align: center;
-}
-
-.title {
-  font-size: 36rpx;
-  font-weight: bold;
-  color: #333;
 }
 
 .section {
diff --git a/miniprogram/pages/date/date.wxml b/miniprogram/pages/date/date.wxml
index 7e6580e..494a129 100644
--- a/miniprogram/pages/date/date.wxml
+++ b/miniprogram/pages/date/date.wxml
@@ -1,74 +1,72 @@
 <!--pages/date/date.wxml-->
-<view class="container">
-  <view class="header">
-    <text class="title">日期时间格式化示例</text>
-  </view>
+<page-container title="日期时间格式化示例" backgroundColor="#123321" textColor="#ffffff">
+  <view class="container">
+    <!-- formatTime 函数示例 -->
+    <view class="section">
+      <view class="section-title">formatTime 函数示例</view>
+      <view class="section-desc">固定格式：YYYY/MM/DD HH:mm:ss</view>
+      <view class="example-list">
+        <view class="example-item" wx:for="{{formatTimeExamples}}" wx:key="label">
+          <view class="example-label">{{item.label}}：</view>
+          <view class="example-value">
+            <text class="result-text" selectable="{{true}}">{{item.value}}</text>
+            <text
+              class="copy-btn"
+              data-text="{{item.value}}"
+              bindtap="copyText"
+              wx:if="{{item.value}}"
+            >
+              复制
+            </text>
+          </view>
+        </view>
+      </view>
+    </view>
 
-  <!-- formatTime 函数示例 -->
-  <view class="section">
-    <view class="section-title">formatTime 函数示例</view>
-    <view class="section-desc">固定格式：YYYY/MM/DD HH:mm:ss</view>
-    <view class="example-list">
-      <view class="example-item" wx:for="{{formatTimeExamples}}" wx:key="label">
-        <view class="example-label">{{item.label}}：</view>
-        <view class="example-value">
-          <text class="result-text" selectable="{{true}}">{{item.value}}</text>
-          <text
-            class="copy-btn"
-            data-text="{{item.value}}"
-            bindtap="copyText"
-            wx:if="{{item.value}}"
-          >
-            复制
-          </text>
+    <!-- formatDateTime 函数示例 - 不同格式模板 -->
+    <view class="section">
+      <view class="section-title">formatDateTime 函数示例 - 不同格式模板</view>
+      <view class="section-desc">支持自定义格式模板，灵活配置日期时间显示格式</view>
+      <view class="example-list">
+        <view class="example-item" wx:for="{{formatDateTimeExamples}}" wx:key="label">
+          <view class="example-label">{{item.label}}</view>
+          <view class="example-format">格式模板：{{item.format}}</view>
+          <view class="example-value">
+            <text class="result-text" selectable="{{true}}">{{item.value}}</text>
+            <text
+              class="copy-btn"
+              data-text="{{item.value}}"
+              bindtap="copyText"
+              wx:if="{{item.value}}"
+            >
+              复制
+            </text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- formatDateTime 函数示例 - 不同输入类型 -->
+    <view class="section">
+      <view class="section-title">formatDateTime 函数示例 - 不同输入类型</view>
+      <view class="section-desc">支持 Date 对象、时间戳、日期字符串等多种输入类型</view>
+      <view class="example-list">
+        <view class="example-item" wx:for="{{inputTypeExamples}}" wx:key="label">
+          <view class="example-label">{{item.label}}</view>
+          <view class="example-format">输入：{{item.input}}</view>
+          <view class="example-value">
+            <text class="result-text" selectable="{{true}}">{{item.value}}</text>
+            <text
+              class="copy-btn"
+              data-text="{{item.value}}"
+              bindtap="copyText"
+              wx:if="{{item.value}}"
+            >
+              复制
+            </text>
+          </view>
         </view>
       </view>
     </view>
   </view>
-
-  <!-- formatDateTime 函数示例 - 不同格式模板 -->
-  <view class="section">
-    <view class="section-title">formatDateTime 函数示例 - 不同格式模板</view>
-    <view class="section-desc">支持自定义格式模板，灵活配置日期时间显示格式</view>
-    <view class="example-list">
-      <view class="example-item" wx:for="{{formatDateTimeExamples}}" wx:key="label">
-        <view class="example-label">{{item.label}}</view>
-        <view class="example-format">格式模板：{{item.format}}</view>
-        <view class="example-value">
-          <text class="result-text" selectable="{{true}}">{{item.value}}</text>
-          <text
-            class="copy-btn"
-            data-text="{{item.value}}"
-            bindtap="copyText"
-            wx:if="{{item.value}}"
-          >
-            复制
-          </text>
-        </view>
-      </view>
-    </view>
-  </view>
-
-  <!-- formatDateTime 函数示例 - 不同输入类型 -->
-  <view class="section">
-    <view class="section-title">formatDateTime 函数示例 - 不同输入类型</view>
-    <view class="section-desc">支持 Date 对象、时间戳、日期字符串等多种输入类型</view>
-    <view class="example-list">
-      <view class="example-item" wx:for="{{inputTypeExamples}}" wx:key="label">
-        <view class="example-label">{{item.label}}</view>
-        <view class="example-format">输入：{{item.input}}</view>
-        <view class="example-value">
-          <text class="result-text" selectable="{{true}}">{{item.value}}</text>
-          <text
-            class="copy-btn"
-            data-text="{{item.value}}"
-            bindtap="copyText"
-            wx:if="{{item.value}}"
-          >
-            复制
-          </text>
-        </view>
-      </view>
-    </view>
-  </view>
-</view>
+</page-container>
diff --git a/miniprogram/pages/login/login.json b/miniprogram/pages/login/login.json
index a18abce..f0c887e 100644
--- a/miniprogram/pages/login/login.json
+++ b/miniprogram/pages/login/login.json
@@ -3,6 +3,7 @@
   "navigationBarBackgroundColor": "#FFFFFF",
   "navigationBarTextStyle": "black",
   "usingComponents": {
+    "page-container": "../../components/page-container/page-container",
     "t-input": "/miniprogram_npm/tdesign-miniprogram/input/input",
     "t-button": "/miniprogram_npm/tdesign-miniprogram/button/button"
   }
diff --git a/miniprogram/pages/login/login.scss b/miniprogram/pages/login/login.scss
index c9fd850..99def68 100644
--- a/miniprogram/pages/login/login.scss
+++ b/miniprogram/pages/login/login.scss
@@ -2,32 +2,11 @@
 
 // 容器样式
 .login-container {
-  min-height: 100vh;
-  background: white;
+  background: #aabbcc;
   padding: 40rpx 30rpx;
   box-sizing: border-box;
 }
 
-// 头部标题区域
-.header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-bottom: 60rpx;
-
-  .title {
-    font-size: 48rpx;
-    font-weight: bold;
-    color: #333333;
-    margin-bottom: 20rpx;
-  }
-
-  .subtitle {
-    font-size: 28rpx;
-    color: rgba(0, 0, 0, 0.8);
-  }
-}
-
 // 功能区块样式
 .form-section {
   background: #ffffff;
diff --git a/miniprogram/pages/login/login.wxml b/miniprogram/pages/login/login.wxml
index 1b55bea..c470c80 100644
--- a/miniprogram/pages/login/login.wxml
+++ b/miniprogram/pages/login/login.wxml
@@ -1,34 +1,30 @@
 <!--pages/login/login.wxml-->
-<view class="login-container">
-  <!-- 标题区域 -->
-  <view class="header">
-    <text class="title">Request.ts 使用示例</text>
-    <text class="subtitle">演示网络请求封装的各种用法</text>
-  </view>
+<page-container title="Request 使用示例">
+  <view class="login-container">
+    <!-- 登录表单区域 -->
+    <view class="form-section">
+      <view class="section-title">1. POST 请求示例 - 登录</view>
 
-  <!-- 登录表单区域 -->
-  <view class="form-section">
-    <view class="section-title">1. POST 请求示例 - 登录</view>
+      <t-input
+        placeholder="请输入用户名"
+        value="{{username}}"
+        bind:change="onUsernameChange"
+        class="input-item"
+        clearable
+      />
 
-    <t-input
-      placeholder="请输入用户名"
-      value="{{username}}"
-      bind:change="onUsernameChange"
-      class="input-item"
-      clearable
-    />
+      <t-input
+        placeholder="请输入密码"
+        value="{{password}}"
+        type="password"
+        bind:change="onPasswordChange"
+        class="input-item"
+        clearable
+      />
 
-    <t-input
-      placeholder="请输入密码"
-      value="{{password}}"
-      type="password"
-      bind:change="onPasswordChange"
-      class="input-item"
-      clearable
-    />
-
-    <view class="button-group">
-      <t-button theme="primary" size="large" bind:tap="handleLogin" block> 登录 </t-button>
+      <view class="button-group">
+        <t-button theme="primary" size="large" bind:tap="handleLogin" block> 登录 </t-button>
+      </view>
     </view>
   </view>
-</view>
+</page-container>