feat: 增加 Page 组件

compiled/alipay/demo/app.json

@@ -82,6 +82,7 @@
     "pages/Checklist/index",
     "pages/Empty/index",
     "pages/Toast/index",
+    "pages/Page/index",
     "pages/ProgressLine/index",
     "pages/ProgressCircle/index",
     "pages/GuideTour/index",

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
+  }
 }

compiled/alipay/demo/pages/Page/index.axml

@@ -0,0 +1,21 @@
+<ant-page
+  loading="{{loading}}"
+  status="{{status}}"
+  title="{{title}}"
+  message="{{message}}"
+  image="{{image}}"
+  safeArea="both"
+  loadingColor="#ccc"
+  loadingSize="medium"
+  loadingType="spin"
+  actionText="刷新"
+  secondaryActionText="返回"
+  onActionTap="handleActionTap"
+  onSecondaryActionTap="handleSecondaryActionTap"
+>
+  <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>
+  <ant-button slot="extra" inline size="small" style="margin-left: 12px;">自定义按钮</ant-button>
+  <ant-loading slot="loading" color="#999" />
+</ant-page>

compiled/alipay/demo/pages/Page/index.js

@@ -0,0 +1,25 @@
+Page({
+    data: {
+        loading: true,
+    },
+    onLoad() {
+        setTimeout(() => {
+            this.setData({
+                loading: false,
+                title: '自定义标题',
+                message: '自定义详情',
+                image: 'https://mdn.alipayobjects.com/huamei_yqdpol/afts/img/A*avTGQIyeHk0AAAAAAAAAAAAADj16AQ/original',
+            });
+        }, 1000);
+    },
+    handleActionTap(e) {
+        my.alert({
+            content: '按钮点击'
+        });
+    },
+    handleSecondaryActionTap(e) {
+        my.alert({
+            content: '次要按钮点击'
+        });
+    }
+});

compiled/alipay/demo/pages/Page/index.json

@@ -0,0 +1,10 @@
+{
+  "defaultTitle": "Result",
+  "titleBarColor": "#ffffff",
+  "transparentTitle": "auto",
+  "usingComponents": {
+    "ant-button": "../../../src/Button/index",
+    "ant-page": "../../../src/Page/index",
+    "ant-loading": "../../../src/Loading/index"
+  }
+}

compiled/alipay/demo/pages/Page/index.less

@@ -0,0 +1,3 @@
+.content {
+  padding: 24rpx;
+}

compiled/alipay/src/Page/index.axml

@@ -0,0 +1,54 @@
+<view
+  class="ant-page {{className || ''}} {{safeArea === 'top' || safeArea === 'both' ? 'ant-page-safe-top' : ''}} {{safeArea === 'bottom' || safeArea === 'both' ? 'ant-page-safe-bottom' : ''}}"
+  style="{{style || ''}}"
+>
+  <!-- loading -->
+  <view
+    a:if="{{loading}}"
+    class="ant-page-loading-wrap"
+  >
+    <view class="ant-page-loading">
+      <slot name="loading">
+        <ant-loading
+          type="{{loadingType}}"
+          size="{{loadingSize}}"
+          color="{{loadingColor}}"
+        />
+      </slot>
+    </view>
+  </view>
+
+  <!-- 页面异常状态 -->
+  <view class="ant-page-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>

compiled/alipay/src/Page/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "ant-button": "../Button/index",
+    "ant-loading": "../Loading/index",
+    "ant-empty": "../Empty/index"
+  }
+}

compiled/alipay/src/Page/index.less

@@ -0,0 +1,40 @@
+@import (reference) './variable.less';
+@import '../style/mixins/hairline.less';
+
+@prefix: ant-page;
+
+.@{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);
+  }
+
+  .ant-page-loading-wrap {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100vh;
+    background: rgba(255, 255, 255, 0.4);
+    z-index: 3;
+  }
+
+  .ant-page-loading {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  &-status {
+    margin-top: 420rpx;
+    text-align: center;
+  }
+}

compiled/alipay/src/Page/index.md

@@ -0,0 +1,39 @@
+---
+nav:
+  path: /components
+group:
+  title: 页面
+  order: 12
+toc: 'content'
+---
+
+# Page 页面
+
+<code src="../../docs/components/compatibility.tsx" inline="true"></code>
+
+页面级容器组件，提供加载状态、页面异常处理、顶部/底部安全边距等常用能力，开箱即用。
+
+## 代码示例
+
+<code src='pages/Page/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  | -        |

compiled/alipay/src/Page/index.ts

@@ -0,0 +1,43 @@
+import equal from 'fast-deep-equal';
+import { Component, getValueFromProps, triggerEventOnly } from '../_util/simply';
+import { PageDefaultProps, BuiltinStatus } from './props';
+
+Component(
+  PageDefaultProps,
+  {
+    handleActionTap(e) {
+      triggerEventOnly(this, 'actionTap', e);
+    },
+    handleSecondaryActionTap(e) {
+      triggerEventOnly(this, 'secondaryActionTap', e);
+    },
+    updatePageStatus(prevProps: any, nextProps: any) {
+      if (!equal(prevProps, nextProps)) {
+        const { status, image, title, message } = nextProps;
+        const updateData = {
+          ...nextProps,
+          // 自定义内容优先 status
+          image: image || BuiltinStatus[status]?.image,
+          title: title || BuiltinStatus[status]?.title,
+          message: message || BuiltinStatus[status]?.message
+        };
+
+        this.setData(updateData);
+      }
+    }
+  },
+  {
+    BuiltinStatus
+  },
+  undefined,
+  {
+    didMount() {
+      const props = getValueFromProps(this);
+      this.updatePageStatus({}, props);
+    },
+    deriveDataFromProps(nextProps) {
+      const props = getValueFromProps(this);
+      this.updatePageStatus(props, nextProps);
+    }
+  }
+);

compiled/alipay/src/Page/props.ts

@@ -0,0 +1,98 @@
+import { IBaseProps } from '../_util/base';
+
+/**
+ * @description 页面，提供开箱即用的页面状态展示和基础能力。
+ */
+
+export interface IPageProps extends IBaseProps {
+  /**
+   * @description 安全区内边距位置 top=顶部 bottom=底部 both=顶部和底部
+   */
+  safeArea?: 'top' | 'bottom' | 'both';
+
+  /**
+   * @description 加载中
+   */
+  loading?: boolean;
+
+  /**
+   * @description 加载样式类型，参考 Loading 组件
+   */
+  loadingType?: string;
+
+  /**
+   * @description 加载样式大小，参考 Loading 组件
+   */
+  loadingSize?: string;
+
+  /**
+   * @description 加载样式颜色，参考 Loading 组件
+   */
+  loadingColor?: string;
+
+  /**
+   * @description 页面异常状态
+   */
+  status?: 'failed' | 'busy' | 'disconnected' | 'empty';
+
+  /**
+   * @description 页面异常状态-标题
+   */
+  title?: string;
+
+  /**
+   * @description 页面异常状态-描述
+   */
+  message?: string;
+
+  /**
+   * @description 页面异常状态-按钮文案
+   */
+  actionText?: string;
+
+  /**
+   * @description 页面异常状态-次要按钮文案
+   */
+  secondaryActionText?: string;
+
+  /**
+   * @description 页面异常状态-按钮点击事件
+   */
+  onActionTap?: (e: any) => void;
+
+  /**
+   * @description 页面异常状态-次要按钮点击事件
+   */
+  onSecondaryActionTap?: (e: any) => void;
+}
+
+export const PageDefaultProps: IPageProps = {
+  safeArea: 'both',
+  loadingColor: '#ccc',
+  loadingSize: 'medium',
+  loadingType: 'spin',
+};
+
+// 内置异常配置
+export const BuiltinStatus = {
+  'failed': {
+    image: 'https://gw.alipayobjects.com/mdn/rms_7cc883/afts/img/A*PG7NQoXbN38AAAAAAAAAAAAAARQnAQ',
+    title: '页面遇到一些小问题',
+    message: '待会来试试'
+  },
+  'disconnected': {
+    image: 'https://mdn.alipayobjects.com/huamei_yqdpol/afts/img/A*uqB5TY4urA4AAAAAAAAAAAAADj16AQ/original',
+    title: '网络有点忙',
+    message: '动动手指帮忙修复'
+  },
+  'empty': {
+    title: '这里什么也没有',
+    message: '看看其它吧',
+    image: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*0AaRRrYlVDkAAAAAAAAAAAAAARQnAQ'
+  },
+  'busy': {
+    image: 'https://mdn.alipayobjects.com/huamei_yqdpol/afts/img/A*avTGQIyeHk0AAAAAAAAAAAAADj16AQ/original',
+    title: '前方拥堵',
+    message: '刷新试试'
+  }
+};

compiled/alipay/src/Page/variable.less

@@ -0,0 +1 @@
+@import (reference) '../style/themes/index.less';