feat: 增加 Page 组件 (#1220)

* feat: 增加 Page 组件 feat: 增加 Page 分类 * feat: 增加 Page 分类 * feat: 增加 Page 示例 * feat: Page 更名 * feat: rpx 用法 * feat: 移除无用页面 * feat: demo 更新 * feat: class 更新 --------- Co-authored-by: 龙禧 <[email protected]>
ant-design · Jun 27, 2024 · e4c050e · e4c050e
1 parent 47a767f
commit e4c050e
Show file tree

Hide file tree

Showing 33 changed files with 1,018 additions and 10 deletions.
diff --git a/compiled/alipay/demo/app.json b/compiled/alipay/demo/app.json
@@ -82,6 +82,7 @@
     "pages/Checklist/index",
     "pages/Empty/index",
     "pages/Toast/index",
+    "pages/PageContainer/index",
     "pages/ProgressLine/index",
     "pages/ProgressCircle/index",
     "pages/GuideTour/index",

diff --git a/compiled/alipay/demo/mini.project.json b/compiled/alipay/demo/mini.project.json
@@ -1,8 +1,12 @@
 {
-  "component2": true,
-  "axmlStrictCheck": false,
-  "enableAppxNg": true,
-  "exclude": [
+  "format": 2,
+  "compileOptions": {
+    "component2": true
+  },
+  "uploadExclude": [
     "miniapptools_dist/**/*"
-  ]
+  ],
+  "unknownConfig": {
+    "axmlStrictCheck": false
+  }
 }
diff --git a/compiled/alipay/demo/pages/PageContainer/index.axml b/compiled/alipay/demo/pages/PageContainer/index.axml
@@ -0,0 +1,112 @@
+<ant-page
+  loading="{{loading}}"
+  status="{{status}}"
+  title="{{title}}"
+  message="{{message}}"
+  image="{{image}}"
+  safeArea="{{safeArea}}"
+  loadingColor="#ccc"
+  loadingSize="medium"
+  loadingType="spin"
+  actionText="刷新"
+  secondaryActionText="网络异常"
+  onActionTap="handleRefresh"
+  onSecondaryActionTap="handleSwitchToDisconnected"
+>
+  <view class="content">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    <view style="margin-top: 12px; text-align: center;">
+      <ant-button
+        slot="extra"
+        inline
+        size="small"
+        type="primary"
+        onTap="handleSwitchToBusy"
+      >
+        后台繁忙
+      </ant-button>
+      <ant-button
+        slot="extra"
+        inline
+        size="small"
+        data-position="top"
+        onTap="handleToggleSafeArea"
+        style="margin-left: 12px;"
+      >
+        顶部安全区
+      </ant-button>
+      <ant-button
+        slot="extra"
+        inline
+        size="small"
+        data-position="bottom"
+        onTap="handleToggleSafeArea"
+        style="margin-left: 12px;"
+      >
+        底部安全区
+      </ant-button>
+      <ant-button
+        slot="extra"
+        inline
+        size="small"
+        data-position="both"
+        onTap="handleToggleSafeArea"
+        style="margin-left: 12px;"
+      >
+        全局安全区
+      </ant-button>
+    </view>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+  </view>
+  <ant-button
+    slot="extra"
+    inline
+    size="small"
+    style="margin-left: 12px;"
+    onTap="handleSwitchToEmpty"
+  >
+    空内容
+  </ant-button>
+  <ant-button
+    slot="extra"
+    inline
+    size="small"
+    style="margin-left: 12px;"
+    onTap="handleSwitchToBusy"
+  >
+    后台繁忙
+  </ant-button>
+  <ant-button
+    slot="extra"
+    inline
+    size="small"
+    style="margin-left: 12px;"
+    onTap="handleSwitchToCustom"
+  >
+    自定义
+  </ant-button>
+  <ant-button
+    slot="extra"
+    inline
+    size="small"
+    style="margin-left: 12px;"
+    onTap="handleSwitchToNormal"
+  >
+    正常
+  </ant-button>
+  <ant-loading slot="loading" color="#999" />
+</ant-page>
diff --git a/compiled/alipay/demo/pages/PageContainer/index.js b/compiled/alipay/demo/pages/PageContainer/index.js
@@ -0,0 +1,69 @@
+Page({
+    data: {
+        loading: true,
+        status: 'failed',
+        safeArea: 'both',
+    },
+    onLoad() {
+        setTimeout(() => {
+            this.setData({
+                loading: false
+            });
+        }, 1000);
+    },
+    handleRefresh() {
+        my.reLaunch({
+            url: 'index',
+            fail(e) {
+                console.log(e);
+            }
+        });
+    },
+    handleSwitchToDisconnected() {
+        this.setData({
+            status: 'disconnected',
+            title: '',
+            message: '',
+            image: ''
+        });
+    },
+    handleSwitchToEmpty() {
+        this.setData({
+            status: 'empty',
+            title: '',
+            message: '',
+            image: ''
+        });
+    },
+    handleSwitchToBusy() {
+        this.setData({
+            status: 'busy',
+            title: '',
+            message: '',
+            image: ''
+        });
+    },
+    handleSwitchToCustom() {
+        this.setData({
+            loading: false,
+            status: '',
+            title: '自定义标题',
+            message: '自定义详情',
+            image: 'https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg'
+        });
+    },
+    handleSwitchToNormal() {
+        this.setData({
+            status: '',
+            title: '',
+            message: '',
+            image: ''
+        });
+    },
+    handleToggleSafeArea(e) {
+        const { position = '' } = e.target.dataset;
+        this.setData({
+            safeArea: position
+        });
+    }
+});
diff --git a/compiled/alipay/demo/pages/PageContainer/index.json b/compiled/alipay/demo/pages/PageContainer/index.json
@@ -0,0 +1,10 @@
+{
+  "defaultTitle": "PageContainer",
+  "titleBarColor": "#ffffff",
+  "transparentTitle": "auto",
+  "usingComponents": {
+    "ant-button": "../../../src/Button/index",
+    "ant-page": "../../../src/PageContainer/index",
+    "ant-loading": "../../../src/Loading/index"
+  }
+}
diff --git a/compiled/alipay/demo/pages/PageContainer/index.less b/compiled/alipay/demo/pages/PageContainer/index.less
@@ -0,0 +1,3 @@
+.content {
+  padding: 24rpx;
+}
diff --git a/compiled/alipay/demo/utils/constants.js b/compiled/alipay/demo/utils/constants.js
@@ -465,8 +465,13 @@ export const componentList = [
         ],
     },
     {
-        type: '实验性质的组件',
+        type: '实验性',
         list: [
+            {
+                name: 'PageContainer',
+                nameZN: '页面容器',
+                path: '/pages/PageContainer/index',
+            },
             {
                 name: 'Typography',
                 nameZN: '排版',

diff --git a/compiled/alipay/src/PageContainer/index.axml b/compiled/alipay/src/PageContainer/index.axml
@@ -0,0 +1,54 @@
+<view
+  class="ant-page-container {{className || ''}} {{safeArea === 'top' || safeArea === 'both' ? 'ant-page-container-safe-top' : ''}} {{safeArea === 'bottom' || safeArea === 'both' ? 'ant-page-container-safe-bottom' : ''}}"
+  style="{{style || ''}}"
+>
+  <!-- loading -->
+  <view
+    a:if="{{loading}}"
+    class="ant-page-container-loading-wrap"
+  >
+    <view class="ant-page-container-loading">
+      <slot name="loading">
+        <ant-loading
+          type="{{loadingType}}"
+          size="{{loadingSize}}"
+          color="{{loadingColor}}"
+        />
+      </slot>
+    </view>
+  </view>
+
+  <!-- 页面异常状态 -->
+  <view class="ant-page-container-status" a:if="{{image && title && message}}">
+    <ant-empty
+      image="{{image}}"
+      title="{{title}}"
+      message="{{message}}"
+    >
+      <view slot="extra">
+        <ant-button
+          a:if="{{actionText}}"
+          onTap="handleActionTap"
+          type="primary"
+          size="small"
+          inline
+        >
+          {{actionText}}
+        </ant-button>
+        <ant-button
+          a:if="{{secondaryActionText}}"
+          onTap="handleSecondaryActionTap"
+          size="small"
+          inline
+          style="margin-left: 12px"
+        >
+          {{secondaryActionText}}
+        </ant-button>
+        <slot name="extra" />
+      </view>
+    </ant-empty>
+  </view>
+
+  <!-- 正常页面内容 -->
+  <slot a:else />
+</view>
diff --git a/compiled/alipay/src/PageContainer/index.json b/compiled/alipay/src/PageContainer/index.json
@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "ant-button": "../Button/index",
+    "ant-loading": "../Loading/index",
+    "ant-empty": "../Empty/index"
+  }
+}
diff --git a/compiled/alipay/src/PageContainer/index.less b/compiled/alipay/src/PageContainer/index.less
@@ -0,0 +1,40 @@
+@import (reference) './variable.less';
+@import '../style/mixins/hairline.less';
+
+@prefix: ant-page-container;
+
+.@{prefix} {
+  overflow: auto;
+
+  &-safe-top {
+    padding-top: constant(safe-area-inset-top);
+    padding-top: env(safe-area-inset-top);
+  }
+
+  &-safe-bottom {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  &-loading-wrap {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100vh;
+    background: rgba(255, 255, 255, 0.4);
+    z-index: 3;
+  }
+
+  &-loading {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &-status {
+    margin-top: 420 * @rpx;
+    text-align: center;
+  }
+}
diff --git a/compiled/alipay/src/PageContainer/index.md b/compiled/alipay/src/PageContainer/index.md
@@ -0,0 +1,39 @@
+---
+nav:
+  path: /components
+group:
+  title: 实验性
+  order: 15
+toc: 'content'
+---
+
+# PageContainer 页面容器
+
+<code src="../../docs/components/compatibility.tsx" inline="true"></code>
+
+页面级容器组件，提供加载状态、页面异常处理、顶部/底部安全边距等常用能力，开箱即用。
+
+## 代码示例
+
+<code src='pages/PageContainer/index'></code>
+
+## API
+
+| 属性                   | 说明                                            | 类型               | 默认值      |
+|----------------------|-----------------------------------------------|------------------|----------|
+| className            | 类名                                            | string           | -        |
+| style                | 样式                                            | string           | -        |
+| safeArea             | 安全区内边距位置，`top`、`bottom`、`both`                | string           | `both`   |
+| loading              | 加载中                                           | boolean \| slot  | false    |
+| loadingType          | 加载样式类型，`spin`、`mini`                          | string           | `spin`   |
+| loadingSize          | 加载样式大小，`small`、`medium`、`large`、`x-large`     | string           | `medium` |
+| loadingColor         | 加载样式颜色                                        | string           | '#ccc'   |
+| status               | 页面异常状态，`failed`、`busy`、`disconnected`、`empty` | string \| slot   | -        |
+| image                | 页面异常状态自定义图片                                   | string           | -        |
+| title                | 页面异常状态自定义标题                                   | string           | -        |
+| message              | 页面异常状态自定义描述                                   | string           | -        |
+| actionText           | 页面异常状态按钮文案                                    | string           | -        |
+| secondaryActionText  | 页面异常状态次要按钮文案                                  | string           | -        |
+| extra                | 页面异常状态自定义按钮                                   | slot             | -        |
+| onActionTap          | 页面异常状态按钮点击事件                                  | (e: any) => void | -        |
+| onSecondaryActionTap | 页面异常状态次要按钮点击事件                                | (e: any) => void | -        |
diff --git a/compiled/alipay/src/PageContainer/index.sjs b/compiled/alipay/src/PageContainer/index.sjs