diff --git a/compiled/alipay/demo/app.json b/compiled/alipay/demo/app.json index 7e4f492d9..240413cf1 100644 --- 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/Page/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 index 63533ecb8..60743b316 100644 --- 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 + } } \ No newline at end of file diff --git a/compiled/alipay/demo/pages/Page/index.axml b/compiled/alipay/demo/pages/Page/index.axml new file mode 100644 index 000000000..375165ac0 --- /dev/null +++ b/compiled/alipay/demo/pages/Page/index.axml @@ -0,0 +1,21 @@ + + + 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. + + 自定义按钮 + + diff --git a/compiled/alipay/demo/pages/Page/index.js b/compiled/alipay/demo/pages/Page/index.js new file mode 100644 index 000000000..eba97c7c2 --- /dev/null +++ b/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: '次要按钮点击' + }); + } +}); diff --git a/compiled/alipay/demo/pages/Page/index.json b/compiled/alipay/demo/pages/Page/index.json new file mode 100644 index 000000000..7306115d2 --- /dev/null +++ b/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" + } +} \ No newline at end of file diff --git a/compiled/alipay/demo/pages/Page/index.less b/compiled/alipay/demo/pages/Page/index.less new file mode 100644 index 000000000..d676d2e39 --- /dev/null +++ b/compiled/alipay/demo/pages/Page/index.less @@ -0,0 +1,3 @@ +.content { + padding: 24rpx; +} diff --git a/compiled/alipay/src/Page/index.axml b/compiled/alipay/src/Page/index.axml new file mode 100644 index 000000000..ccfcb0371 --- /dev/null +++ b/compiled/alipay/src/Page/index.axml @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + {{actionText}} + + + {{secondaryActionText}} + + + + + + + + + diff --git a/compiled/alipay/src/Page/index.json b/compiled/alipay/src/Page/index.json new file mode 100644 index 000000000..0ea49bc59 --- /dev/null +++ b/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" + } +} diff --git a/compiled/alipay/src/Page/index.less b/compiled/alipay/src/Page/index.less new file mode 100644 index 000000000..90682cadc --- /dev/null +++ b/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; + } +} diff --git a/compiled/alipay/src/Page/index.md b/compiled/alipay/src/Page/index.md new file mode 100644 index 000000000..94f1b8ea4 --- /dev/null +++ b/compiled/alipay/src/Page/index.md @@ -0,0 +1,39 @@ +--- +nav: + path: /components +group: + title: 页面 + order: 12 +toc: 'content' +--- + +# Page 页面 + + + +页面级容器组件，提供加载状态、页面异常处理、顶部/底部安全边距等常用能力，开箱即用。 + +## 代码示例 + + + +## 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/Page/index.sjs b/compiled/alipay/src/Page/index.sjs new file mode 100644 index 000000000..e69de29bb diff --git a/compiled/alipay/src/Page/index.ts b/compiled/alipay/src/Page/index.ts new file mode 100644 index 000000000..9592ed6c7 --- /dev/null +++ b/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); + } + } +); diff --git a/compiled/alipay/src/Page/props.ts b/compiled/alipay/src/Page/props.ts new file mode 100644 index 000000000..abcb47638 --- /dev/null +++ b/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: '刷新试试' + } +}; diff --git a/compiled/alipay/src/Page/variable.less b/compiled/alipay/src/Page/variable.less new file mode 100644 index 000000000..fc8ef3edb --- /dev/null +++ b/compiled/alipay/src/Page/variable.less @@ -0,0 +1 @@ +@import (reference) '../style/themes/index.less'; diff --git a/demo/pages/Page/index.axml b/demo/pages/Page/index.axml new file mode 100644 index 000000000..375165ac0 --- /dev/null +++ b/demo/pages/Page/index.axml @@ -0,0 +1,21 @@ + + + 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. + + 自定义按钮 + + diff --git a/demo/pages/Page/index.json5 b/demo/pages/Page/index.json5 new file mode 100644 index 000000000..b8c122456 --- /dev/null +++ b/demo/pages/Page/index.json5 @@ -0,0 +1,17 @@ +{ + /// #if WECHAT + "navigationBarTitleText": "Result", + /// #endif + + /// #if ALIPAY + "defaultTitle": "Result", + /// #endif + + "titleBarColor": "#ffffff", + "transparentTitle": "auto", + "usingComponents": { + "ant-button": "../../../src/Button/index", + "ant-page": "../../../src/Page/index", + "ant-loading": "../../../src/Loading/index" + } +} diff --git a/demo/pages/Page/index.less b/demo/pages/Page/index.less new file mode 100644 index 000000000..d676d2e39 --- /dev/null +++ b/demo/pages/Page/index.less @@ -0,0 +1,3 @@ +.content { + padding: 24rpx; +} diff --git a/demo/pages/Page/index.ts b/demo/pages/Page/index.ts new file mode 100644 index 000000000..fa22e8fb9 --- /dev/null +++ b/demo/pages/Page/index.ts @@ -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: '次要按钮点击' + }); + } +}); diff --git a/demo/utils/constants.ts b/demo/utils/constants.ts index e8b544817..b4fff6f45 100644 --- a/demo/utils/constants.ts +++ b/demo/utils/constants.ts @@ -467,8 +467,13 @@ export const componentList = [ ], }, { - type: '实验性质的组件', + type: '实验性', list: [ + { + name: 'Page', + nameZN: '页面', + path: '/pages/Page/index', + }, { name: 'Typography', nameZN: '排版', diff --git a/src/Page/index.axml b/src/Page/index.axml new file mode 100644 index 000000000..ccfcb0371 --- /dev/null +++ b/src/Page/index.axml @@ -0,0 +1,54 @@ + + + + + + + + + + + + + + + + {{actionText}} + + + {{secondaryActionText}} + + + + + + + + + diff --git a/src/Page/index.json b/src/Page/index.json new file mode 100644 index 000000000..0ea49bc59 --- /dev/null +++ b/src/Page/index.json @@ -0,0 +1,8 @@ +{ + "component": true, + "usingComponents": { + "ant-button": "../Button/index", + "ant-loading": "../Loading/index", + "ant-empty": "../Empty/index" + } +} diff --git a/src/Page/index.less b/src/Page/index.less new file mode 100644 index 000000000..90682cadc --- /dev/null +++ b/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; + } +} diff --git a/src/Page/index.md b/src/Page/index.md new file mode 100644 index 000000000..1a3a76297 --- /dev/null +++ b/src/Page/index.md @@ -0,0 +1,39 @@ +--- +nav: + path: /components +group: + title: 页面 + order: 1 +toc: 'content' +--- + +# Page 页面 + + + +页面级容器组件，提供加载状态、页面异常处理、顶部/底部安全边距等常用能力，开箱即用。 + +## 代码示例 + + + +## 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/src/Page/index.sjs.ts b/src/Page/index.sjs.ts new file mode 100644 index 000000000..e69de29bb diff --git a/src/Page/index.ts b/src/Page/index.ts new file mode 100644 index 000000000..358ba28e7 --- /dev/null +++ b/src/Page/index.ts @@ -0,0 +1,45 @@ +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, + { + /// #if ALIPAY + didMount() { + const props = getValueFromProps(this); + this.updatePageStatus({}, props); + }, + deriveDataFromProps(nextProps) { + const props = getValueFromProps(this); + this.updatePageStatus(props, nextProps); + } + /// #endif + } +); diff --git a/src/Page/props.ts b/src/Page/props.ts new file mode 100644 index 000000000..abcb47638 --- /dev/null +++ b/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: '刷新试试' + } +}; diff --git a/src/Page/variable.less b/src/Page/variable.less new file mode 100644 index 000000000..fc8ef3edb --- /dev/null +++ b/src/Page/variable.less @@ -0,0 +1 @@ +@import (reference) '../style/themes/index.less'; diff --git a/tests/alipay/Page/index.test.ts b/tests/alipay/Page/index.test.ts new file mode 100644 index 000000000..4392d7ad3 --- /dev/null +++ b/tests/alipay/Page/index.test.ts @@ -0,0 +1,21 @@ +import { vi } from '_vitest@1.6.0@vitest'; +import { getInstance, sleep } from 'tests/utils'; +import { describe, it, expect } from 'vitest'; + +describe('Page', () => { + it('Page config', async () => { + const onActionTap = vi.fn(); + const instance = getInstance('Page', { + onActionTap + }); + const { props } = instance.getConfig(); + + expect({ props }).toMatchFileSnapshot( + 'snapshot/page_alipay_config.txt' + ); + + instance.callMethod('handleActionTap'); + await sleep(10); + expect(onActionTap).toBeCalled(); + }); +}); diff --git a/tests/alipay/Page/snapshot/page_alipay_config.txt b/tests/alipay/Page/snapshot/page_alipay_config.txt new file mode 100644 index 000000000..c850190d4 --- /dev/null +++ b/tests/alipay/Page/snapshot/page_alipay_config.txt @@ -0,0 +1,8 @@ + { + "props": { + "loadingColor": "#ccc", + "loadingSize": "medium", + "loadingType": "spin", + "safeArea": "both", + }, +}