refactor: 将page-container重命名为root-page-layout

将page-container组件重命名为root-page-layout,并更新所有文档中的引用,以更好地反映其作为页面根布局的角色。已更新AGENTS.md、README.md中的引用,并相应重命名了组件使用指南。
This commit is contained in:
熊熊熊子路 committed 2026-07-31 11:59:34 +08:00
1 parent 3f75ab4ef6
commit 11c6fb21cd
11 files changed
+46 -46

No files matched your search

+2 -2
View File
@@ -51,7 +51,7 @@ miniprogram/
├── app.json # 页面注册、自定义 TabBar、navigationStyle: "custom" ├── app.json # 页面注册、自定义 TabBar、navigationStyle: "custom"
├── app.scss # 全局样式重置 ├── app.scss # 全局样式重置
├── api/ # API 接口层(每接口一个文件 + types.ts 定义 StandardResponse<T>) ├── api/ # API 接口层(每接口一个文件 + types.ts 定义 StandardResponse<T>)
├── components/ # 共享组件(目前仅有 page-container) ├── components/ # 共享组件(目前仅有 root-page-layout)
├── custom-tab-bar/ # 自定义 TabBar(基于 TDesign t-tab-bar) ├── custom-tab-bar/ # 自定义 TabBar(基于 TDesign t-tab-bar)
├── pages/ # 页面(index, login, date, one~four) ├── pages/ # 页面(index, login, date, one~four)
├── utils/ ├── utils/
@@ -67,7 +67,7 @@ typings/ # 全局类型声明(IAppOption、PlatformInfoType 等
### 自定义导航栏 ### 自定义导航栏
`app.json` 中 `window.navigationStyle: "custom"` 全局关闭了原生导航栏。所有需要导航栏的页面必须使用 `page-container` 组件(封装 TDesign `t-navbar`),该组件自动根据页面栈深度决定是否显示返回按钮。 `app.json` 中 `window.navigationStyle: "custom"` 全局关闭了原生导航栏。所有需要导航栏的页面必须使用 `root-page-layout` 组件(封装 TDesign `t-navbar`),该组件自动根据页面栈深度决定是否显示返回按钮。
### 网络请求模式 ### 网络请求模式
+3 -3
View File
@@ -230,9 +230,9 @@ const strDate = formatDateTime('2024-01-15', 'YYYY年MM月DD日')
- `A`: 上午/下午 - `A`: 上午/下午
- `a`: 上午/下午(小写) - `a`: 上午/下午(小写)
### PageContainer 页面容器组件 ### RootPageLayout 页面容器组件
项目提供了基于 TDesign Navbar 封装的页面容器组件,位于 `miniprogram/components/page-container/` 目录。 项目提供了基于 TDesign Navbar 封装的页面容器组件,位于 `miniprogram/components/root-page-layout/` 目录。
**主要特性:** **主要特性:**
@@ -242,7 +242,7 @@ const strDate = formatDateTime('2024-01-15', 'YYYY年MM月DD日')
- 支持自定义导航栏样式和插槽内容 - 支持自定义导航栏样式和插槽内容
- 完整的返回事件回调支持 - 完整的返回事件回调支持
详细使用说明请参考 [PageContainer 组件使用手册](docs/page-container.md)。 详细使用说明请参考 [RootPageLayout 组件使用手册](docs/root-page-layout.md)。
### 自定义 TabBar ### 自定义 TabBar
@@ -1,8 +1,8 @@
# PageContainer 组件使用手册 # RootPageLayout 组件使用手册
## 概述 ## 概述
PageContainer 是一个基于 TDesign `t-navbar` 封装的页面容器组件,提供统一的导航栏与内容区域布局。组件内部已引入 `t-navbar`,并通过样式变量透传导航栏与容器背景配置,适用于需要自定义导航栏的页面。 RootPageLayout 是一个基于 TDesign `t-navbar` 封装的页面容器组件,提供统一的导航栏与内容区域布局。组件内部已引入 `t-navbar`,并通过样式变量透传导航栏与容器背景配置,适用于需要自定义导航栏的页面。
## 功能特性 ## 功能特性
@@ -22,7 +22,7 @@ PageContainer 是一个基于 TDesign `t-navbar` 封装的页面容器组件,
```json ```json
{ {
"usingComponents": { "usingComponents": {
"page-container": "../../components/page-container/page-container" "root-page-layout": "../../components/root-page-layout/root-page-layout"
} }
} }
``` ```
@@ -32,48 +32,48 @@ PageContainer 是一个基于 TDesign `t-navbar` 封装的页面容器组件,
### 最简单的用法 ### 最简单的用法
```xml ```xml
<page-container nav-bar-title="页面标题"> <root-page-layout nav-bar-title="页面标题">
<view>页面内容</view> <view>页面内容</view>
</page-container> </root-page-layout>
``` ```
### 自定义导航栏样式 ### 自定义导航栏样式
```xml ```xml
<page-container <root-page-layout
nav-bar-title="页面标题" nav-bar-title="页面标题"
nav-bar-background-color="#123321" nav-bar-background-color="#123321"
nav-bar-text-color="#ffffff" nav-bar-text-color="#ffffff"
> >
<view>页面内容</view> <view>页面内容</view>
</page-container> </root-page-layout>
``` ```
### 隐藏返回按钮 ### 隐藏返回按钮
```xml ```xml
<page-container nav-bar-title="页面标题" nav-bar-left-arrow="{{false}}"> <root-page-layout nav-bar-title="页面标题" nav-bar-left-arrow="{{false}}">
<view>页面内容</view> <view>页面内容</view>
</page-container> </root-page-layout>
``` ```
### 隐藏导航栏 ### 隐藏导航栏
```xml ```xml
<page-container nav-bar-title="页面标题" nav-bar-visible="{{false}}"> <root-page-layout nav-bar-title="页面标题" nav-bar-visible="{{false}}">
<view>页面内容</view> <view>页面内容</view>
</page-container> </root-page-layout>
``` ```
### 关闭底部安全区适配 ### 关闭底部安全区适配
```xml ```xml
<page-container <root-page-layout
nav-bar-title="页面标题" nav-bar-title="页面标题"
container-safe-area-inset-bottom="{{false}}" container-safe-area-inset-bottom="{{false}}"
> >
<view>页面内容</view> <view>页面内容</view>
</page-container> </root-page-layout>
``` ```
## 样式与主题 ## 样式与主题
@@ -120,12 +120,12 @@ PageContainer 是一个基于 TDesign `t-navbar` 封装的页面容器组件,
### 默认插槽 ### 默认插槽
默认插槽用于渲染页面主体内容(位于内容区域 `page-container__content` 内): 默认插槽用于渲染页面主体内容(位于内容区域 `root-page-layout__content` 内):
```xml ```xml
<page-container nav-bar-title="页面标题"> <root-page-layout nav-bar-title="页面标题">
<view>页面内容</view> <view>页面内容</view>
</page-container> </root-page-layout>
``` ```
### left 插槽 ### left 插槽
@@ -133,10 +133,10 @@ PageContainer 是一个基于 TDesign `t-navbar` 封装的页面容器组件,
自定义左侧内容(返回按钮区域): 自定义左侧内容(返回按钮区域):
```xml ```xml
<page-container nav-bar-title="页面标题"> <root-page-layout nav-bar-title="页面标题">
<view slot="left">自定义左侧内容</view> <view slot="left">自定义左侧内容</view>
<view>页面内容</view> <view>页面内容</view>
</page-container> </root-page-layout>
``` ```
### capsule 插槽 ### capsule 插槽
@@ -144,10 +144,10 @@ PageContainer 是一个基于 TDesign `t-navbar` 封装的页面容器组件,
自定义胶囊区域内容: 自定义胶囊区域内容:
```xml ```xml
<page-container nav-bar-title="页面标题"> <root-page-layout nav-bar-title="页面标题">
<view slot="capsule">自定义胶囊内容</view> <view slot="capsule">自定义胶囊内容</view>
<view>页面内容</view> <view>页面内容</view>
</page-container> </root-page-layout>
``` ```
### title 插槽 ### title 插槽
@@ -155,10 +155,10 @@ PageContainer 是一个基于 TDesign `t-navbar` 封装的页面容器组件,
自定义标题区域内容: 自定义标题区域内容:
```xml ```xml
<page-container nav-bar-title="页面标题"> <root-page-layout nav-bar-title="页面标题">
<view slot="title">自定义标题内容</view> <view slot="title">自定义标题内容</view>
<view>页面内容</view> <view>页面内容</view>
</page-container> </root-page-layout>
``` ```
## 事件说明 ## 事件说明
@@ -172,14 +172,14 @@ PageContainer 是一个基于 TDesign `t-navbar` 封装的页面容器组件,
### 事件使用示例 ### 事件使用示例
```xml ```xml
<page-container <root-page-layout
nav-bar-title="页面标题" nav-bar-title="页面标题"
bind:success="onBackSuccess" bind:success="onBackSuccess"
bind:fail="onBackFail" bind:fail="onBackFail"
bind:complete="onBackComplete" bind:complete="onBackComplete"
> >
<view>页面内容</view> <view>页面内容</view>
</page-container> </root-page-layout>
``` ```
```typescript ```typescript
@@ -222,7 +222,7 @@ showLeftArrow = getCurrentPages().length > 1 && navBarLeftArrow && navBarVisible
```xml ```xml
<!-- pages/example/index.wxml --> <!-- pages/example/index.wxml -->
<page-container <root-page-layout
nav-bar-title="示例页面" nav-bar-title="示例页面"
nav-bar-background-color="#ffffff" nav-bar-background-color="#ffffff"
nav-bar-text-color="#000000" nav-bar-text-color="#000000"
@@ -239,7 +239,7 @@ showLeftArrow = getCurrentPages().length > 1 && navBarLeftArrow && navBarVisible
<view class="content"> <view class="content">
<view>这是页面内容区域</view> <view>这是页面内容区域</view>
</view> </view>
</page-container> </root-page-layout>
``` ```
```json ```json
@@ -247,7 +247,7 @@ showLeftArrow = getCurrentPages().length > 1 && navBarLeftArrow && navBarVisible
{ {
"navigationStyle": "custom", "navigationStyle": "custom",
"usingComponents": { "usingComponents": {
"page-container": "../../components/page-container/page-container" "root-page-layout": "../../components/root-page-layout/root-page-layout"
} }
} }
``` ```
@@ -1,6 +1,6 @@
/* components/page-container/page-container.wxss */ /* components/root-page-layout/root-page-layout.wxss */
.page-container { .root-page-layout {
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
@@ -16,7 +16,7 @@
} }
} }
.page-container__content { .root-page-layout__content {
flex: 1; flex: 1;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
@@ -1,4 +1,4 @@
// components/page-container/page-container.ts // components/root-page-layout/root-page-layout.ts
Component({ Component({
/** /**
@@ -65,7 +65,7 @@ Component({
type: Boolean, type: Boolean,
value: true, value: true,
}, },
// pageContainer背景色 // rootPageLayout 背景色
containerBackgroundColor: { containerBackgroundColor: {
type: String, type: String,
value: '#f5f5f5', value: '#f5f5f5',
@@ -1,6 +1,6 @@
<!--components/page-container/page-container.wxml--> <!--components/root-page-layout/root-page-layout.wxml-->
<view <view
class="page-container {{containerSafeAreaInsetBottom ? 'page-container--safe' : ''}}" class="root-page-layout {{containerSafeAreaInsetBottom ? 'root-page-layout--safe' : ''}}"
style="--pg-container-bg-color: {{containerBackgroundColor}};" style="--pg-container-bg-color: {{containerBackgroundColor}};"
> >
<!-- 导航栏 --> <!-- 导航栏 -->
@@ -27,7 +27,7 @@
<!-- 内容区域 --> <!-- 内容区域 -->
<view <view
class="page-container__content" class="root-page-layout__content"
> >
<slot></slot> <slot></slot>
</view> </view>
+1 -1
View File
@@ -1,5 +1,5 @@
{ {
"usingComponents": { "usingComponents": {
"page-container": "../../components/page-container/page-container" "root-page-layout": "../../components/root-page-layout/root-page-layout"
} }
} }
+2 -2
View File
@@ -1,5 +1,5 @@
<!--pages/date/date.wxml--> <!--pages/date/date.wxml-->
<page-container navBarTitle="日期时间格式化示例" navBarBackgroundColor="#123321" navBarTextColor="#ffffff"> <root-page-layout navBarTitle="日期时间格式化示例" navBarBackgroundColor="#123321" navBarTextColor="#ffffff">
<view class="container"> <view class="container">
<!-- formatTime 函数示例 --> <!-- formatTime 函数示例 -->
<view class="section"> <view class="section">
@@ -69,4 +69,4 @@
</view> </view>
</view> </view>
</view> </view>
</page-container> </root-page-layout>
+1 -1
View File
@@ -3,7 +3,7 @@
"navigationBarBackgroundColor": "#FFFFFF", "navigationBarBackgroundColor": "#FFFFFF",
"navigationBarTextStyle": "black", "navigationBarTextStyle": "black",
"usingComponents": { "usingComponents": {
"page-container": "../../components/page-container/page-container", "root-page-layout": "../../components/root-page-layout/root-page-layout",
"t-input": "/miniprogram_npm/tdesign-miniprogram/input/input", "t-input": "/miniprogram_npm/tdesign-miniprogram/input/input",
"t-button": "/miniprogram_npm/tdesign-miniprogram/button/button" "t-button": "/miniprogram_npm/tdesign-miniprogram/button/button"
} }
+2 -2
View File
@@ -1,5 +1,5 @@
<!--pages/login/login.wxml--> <!--pages/login/login.wxml-->
<page-container title="Request 使用示例"> <root-page-layout title="Request 使用示例">
<view class="login-container"> <view class="login-container">
<!-- 登录表单区域 --> <!-- 登录表单区域 -->
<view class="form-section"> <view class="form-section">
@@ -27,4 +27,4 @@
</view> </view>
</view> </view>
</view> </view>
</page-container> </root-page-layout>