refactor: 调整目录结构 (#861)

* fix: 修复测试 * chore: 更新构建脚本 * feat: 更新 tsxml 构建脚本 * feat: 更新构建脚本 * chore: 更新代码 * feat: 更新 compile 脚本 * chore: 更新编译脚本 * fix: 添加缺失的文件 * fix: 删除 lint 命令 * feat: 更新构建脚本 * fix: 更新构建脚本 * fix: 更新 alipay 的编译脚本 * feat: 更新构建脚本 * feat: 更新输出的文件 * feat: 更新组件 * fix: 修复 dev doc 命令 * feat: 更新文档 * docs: update document * feat: 把 compiled 的文档拷贝到 * feat: 把未迁移到文件也放到 src * feat: 更新 tsxml 的构建脚本 * fix: 删除无用文件 * feat: 更新构建脚本 * fix: 修复构建脚本 --------- Co-authored-by: DiamondYuan <fandi.yfd@antgroup.com>
2024-10-23 08:44:21 +08:00 · 2023-10-16 16:43:13 +08:00 · 2023-10-16 16:43:13 +08:00 · fc424ed86e
commit fc424ed86e
parent baa7a0bc3e
1197 changed files with 40625 additions and 4863 deletions
--- a/compiled/alipay/demo/app.js
+++ b/compiled/alipay/demo/app.js
--- a/compiled/alipay/demo/app.json
+++ b/compiled/alipay/demo/app.json
--- a/compiled/alipay/demo/app.less
+++ b/compiled/alipay/demo/app.less
--- a/compiled/alipay/demo/mini.project.json
+++ b/compiled/alipay/demo/mini.project.json
--- a/compiled/alipay/demo/package.json
+++ b/compiled/alipay/demo/package.json
--- a/compiled/alipay/demo/pages/ActionSheet/index.acss
+++ b/compiled/alipay/demo/pages/ActionSheet/index.acss
--- a/compiled/alipay/demo/pages/ActionSheet/index.axml
+++ b/compiled/alipay/demo/pages/ActionSheet/index.axml
@ -0,0 +1,50 @@
+<container title="基础用法">
+  <button
+    onTap="handleOpenBasic"
+    inline="{{true}}"
+    inlineSize="large"
+    data-index="1">
+    基础用法
+  </button>
+</container>
+<container title="选项状态">
+  <button
+    onTap="handleOpenBasic"
+    inline="{{true}}"
+    inlineSize="large"
+    data-index="2">
+    危险状态&禁用状态
+  </button>
+</container>
+<container title="带注释及icon">
+  <button
+    onTap="handleOpenBasic"
+    inline="{{true}}"
+    inlineSize="large"
+    data-index="3">
+    带注释及icon
+  </button>
+</container>
+<action-sheet
+  title="请选择你要进行的操作"
+  visible="{{visible1}}"
+  actions="{{actions1}}"
+  data-index="1"
+  onAction="handleAction"
+  onClose="handleCloseBasic" />
+
+<action-sheet
+  title="请选择你要进行的操作"
+  visible="{{visible2}}"
+  actions="{{actions2}}"
+  data-index="2"
+  onAction="handleAction"
+  onClose="handleCloseBasic" />
+
+<action-sheet
+  title="请选择你要进行的操作"
+  visible="{{visible3}}"
+  actions="{{actions3}}"
+  data-index="3"
+  onAction="handleAction"
+  onClose="handleCloseBasic" />
--- a/compiled/alipay/demo/pages/ActionSheet/index.js
+++ b/compiled/alipay/demo/pages/ActionSheet/index.js
@ -0,0 +1,79 @@
+Page({
+  data: {
+    visible1: false,
+    visible2: false,
+    visible3: false,
+    actions1: [
+      {
+        text: '复制',
+        key: 'copy',
+      },
+      {
+        text: '修改',
+        key: 'modify',
+      }
+    ],
+    actions2: [
+      {
+        text: '复制',
+        key: 'copy',
+        description: "请选择复制内容"
+      },
+      {
+        text: '修改',
+        key: 'modify',
+        disabled: true
+      },
+      {
+        text: '删除',
+        key: 'delete',
+        danger: true,
+      }
+    ],
+
+    actions3: [
+      {
+        text: '备份',
+        key: 'backup',
+        description: '请选择要备份的内容',
+        icon: 'https://gw.alipayobjects.com/mdn/rms_e7937b/afts/img/A*I0oNS4RCQzUAAAAAAAAAAAAAARQnAQ'
+      },
+      {
+        text: '保存',
+        key: 'save',
+        icon: 'https://gw.alipayobjects.com/mdn/rms_e7937b/afts/img/A*BNczQ7hmp2gAAAAAAAAAAAAAARQnAQ'
+      },
+      {
+        text: '同步',
+        key: 'sync',
+        icon: 'https://gw.alipayobjects.com/mdn/rms_e7937b/afts/img/A*eRaVSrV56dIAAAAAAAAAAAAAARQnAQ'
+      }
+    ]
+  },
+
+  handleOpenBasic(e) {
+    const { index } = e.target.dataset;
+    this.setData({
+      [`visible${index}`]: true
+    })
+  },
+
+  handleCloseBasic(e) {
+    const { index } = e.target.dataset;
+    this.setData({
+      [`visible${index}`]: false
+    })
+  },
+
+  handleAction(item, index, e) {
+    if (item.key === 'delete') {
+      my.confirm({
+        content: '你确定要删除吗?'
+      })
+      return;
+    }
+    my.alert({
+      content: `你点击了${item.key}`
+    })
+  }
+})
--- a/compiled/alipay/demo/pages/ActionSheet/index.json
+++ b/compiled/alipay/demo/pages/ActionSheet/index.json
@ -0,0 +1,8 @@
+{
+  "defaultTitle": "ActionSheet",
+  "usingComponents": {
+    "button": "../../../src/Button/index",
+    "action-sheet": "../../../src/ActionSheet/index",
+    "container": "../../../src/Container/index"
+  }
+}
--- a/compiled/alipay/demo/pages/Avatar/index.acss
+++ b/compiled/alipay/demo/pages/Avatar/index.acss
@ -0,0 +1,12 @@
+.avatar {
+  margin: 8px;
+}
+
+.avatar-custom {
+  margin: 8px;
+}
+
+.avatar-custom image {
+  width: 40px;
+  height: 40px;
+}
--- a/compiled/alipay/demo/pages/Avatar/index.axml
+++ b/compiled/alipay/demo/pages/Avatar/index.axml
@ -0,0 +1,40 @@
+<container title="基础用法-四种尺寸">
+  <avatar
+    src="{{item}}"
+    a:for="{{images}}"
+    class="avatar" />
+</container>
+
+<container title="占位头像">
+  <avatar size="{{item}}" />
+</container>
+
+<container title="不同大小">
+  <avatar
+    size="{{item}}"
+    src="{{images[0]}}"
+    a:for="{{sizes}}"
+    class="avatar" />
+</container>
+
+<container
+  title="配合列表使用"
+  className="container">
+  <list-item
+    imageSize="large"
+    brief="Deserunt dolor ea eaque eos">
+    Novalee Spicer
+    <avatar
+      slot="image"
+      name="Novlee Spicer"
+      desc="Deserunt dolor ea eaque eos"
+      src="{{images[0]}}" />
+  </list-item>
+</container>
+
+<container title="自定义">
+  <avatar
+    size="{{item}}"
+    src="{{images[0]}}"
+    class="avatar-custom" />
+</container>
--- a/compiled/alipay/demo/pages/Avatar/index.js
+++ b/compiled/alipay/demo/pages/Avatar/index.js
@ -0,0 +1,11 @@
+Page({
+  data: {
+    sizes: ['x-small', 'small', 'medium', 'large'],
+    images: [
+      'https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
+      'https://images.unsplash.com/photo-1493666438817-866a91353ca9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&s=b616b2c5b373a80ffc9636ba24f7a4a9',
+      'https://images.unsplash.com/photo-1542624937-8d1e9f53c1b9?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
+      'https://images.unsplash.com/photo-1546967191-fdfb13ed6b1e?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ',
+    ],
+  },
+});
--- a/compiled/alipay/demo/pages/Avatar/index.json
+++ b/compiled/alipay/demo/pages/Avatar/index.json
@ -0,0 +1,8 @@
+{
+  "defaultTitle": "Avatar",
+  "usingComponents": {
+    "avatar": "../../../src/Avatar/index",
+    "list-item": "../../../src/List/ListItem/index",
+    "container": "../../../src/Container/index"
+  }
+}
--- a/compiled/alipay/demo/pages/Badge/index.acss
+++ b/compiled/alipay/demo/pages/Badge/index.acss
@ -0,0 +1,18 @@
+page {
+  padding: 24rpx;
+}
+
+.badge-list {
+  display: flex;
+}
+
+.ant-badge {
+  margin-right: 16px;
+}
+.box {
+  width: 40px;
+  height: 40px;
+  display: block;
+  border-radius: 8px;
+  background: #b3b3b3;
+}
--- a/compiled/alipay/demo/pages/Badge/index.axml
+++ b/compiled/alipay/demo/pages/Badge/index.axml
@ -0,0 +1,152 @@
+<container title="基本用法">
+  <view class="badge-list">
+    <badge
+      type="dot"
+      position="top-right">
+      <view class="box" />
+    </badge>
+    <badge
+      type="text"
+      text="新"
+      position="top-right">
+      <view class="box" />
+    </badge>
+    <badge
+      type="number"
+      text="{{2}}"
+      position="top-right">
+      <view class="box" />
+    </badge>
+    <badge
+      type="number"
+      text="{{100}}"
+      position="top-right">
+      <view class="box" />
+    </badge>
+    <badge
+      type="bubble"
+      text="new"
+      position="top-right">
+      <view class="box" />
+    </badge>
+  </view>
+</container>
+
+<container title="带边框">
+  <view class="badge-list">
+    <badge
+      type="dot"
+      stroke
+      position="top-right">
+      <view class="box" />
+    </badge>
+    <badge
+      type="text"
+      text="新"
+      stroke
+      position="top-right">
+      <view class="box" />
+    </badge>
+    <badge
+      type="number"
+      text="{{1}}"
+      stroke
+      position="top-right">
+      <view class="box" />
+    </badge>
+    <badge
+      type="number"
+      text="{{100}}"
+      stroke
+      position="top-right">
+      <view class="box" />
+    </badge>
+    <badge
+      type="bubble"
+      text="new"
+      stroke
+      position="top-right">
+      <view class="box" />
+    </badge>
+  </view>
+</container>
+
+<container title="自定义背景和位置">
+  <view class="badge-list">
+    <badge
+      type="number"
+      text="{{1}}"
+      position="top-left">
+      <view class="box" />
+    </badge>
+    <badge
+      type="bubble"
+      text="1"
+      position="bottom-right">
+      <view class="box" />
+    </badge>
+    <badge
+      type="number"
+      text="{{100}}"
+      stroke
+      bgColor="#1677FF">
+      <view class="box" />
+    </badge>
+    <badge
+      type="text"
+      text="new"
+      bgColor="#FF9F18"
+      position="top-center">
+      <view class="box" />
+    </badge>
+    <badge
+      type="bubble"
+      text="new"
+      stroke
+      bgColor="#34B368">
+      <view class="box" />
+    </badge>
+  </view>
+</container>
+
+<container title="设置偏移">
+  <view class="badge-list">
+    <badge
+      type="text"
+      text="1"
+      offsetX="-20px"
+      offsetY="0px">
+      <view class="box" />
+    </badge>
+    <badge
+      type="text"
+      text="1"
+      position="bottom-right"
+      offsetX="-20px"
+      offsetY="-14px">
+      <view class="box" />
+    </badge>
+    <badge
+      type="bubble"
+      text="new"
+      position="top-right"
+      offsetX="2px"
+      offsetY="-8px">
+      <view class="box" />
+    </badge>
+  </view>
+</container>
+
+<container title="自定义内容">
+  <view class="badge-list">
+    <badge
+      type="text"
+      iconType="GlobalOutline"
+      position="top-right">
+      <am-icon
+        type="GlobalOutline"
+        slot="text" />
+      <view class="box" />
+    </badge>
+  </view>
+</container>
--- a/compiled/alipay/demo/pages/Badge/index.js
+++ b/compiled/alipay/demo/pages/Badge/index.js
@ -0,0 +1,3 @@
+Page({
+  data: {},
+});
--- a/compiled/alipay/demo/pages/Badge/index.json
+++ b/compiled/alipay/demo/pages/Badge/index.json
@ -0,0 +1,8 @@
+{
+  "defaultTitle": "Badge",
+  "usingComponents": {
+    "badge": "../../../src/Badge/index",
+    "container": "../../../src/Container/index",
+    "am-icon": "../../../src/Icon/index"
+  }
+}
--- a/compiled/alipay/demo/pages/Button/index.axml
+++ b/compiled/alipay/demo/pages/Button/index.axml
--- a/compiled/alipay/demo/pages/Button/index.json
+++ b/compiled/alipay/demo/pages/Button/index.json
--- a/compiled/alipay/demo/pages/Button/index.less
+++ b/compiled/alipay/demo/pages/Button/index.less
--- a/compiled/alipay/demo/pages/Button/index.ts
+++ b/compiled/alipay/demo/pages/Button/index.ts
--- a/compiled/alipay/demo/pages/ButtonCustom/index.acss
+++ b/compiled/alipay/demo/pages/ButtonCustom/index.acss
@ -0,0 +1,19 @@
+.list button {
+  margin: 0 8px 8px 0;
+}
+
+.btn {
+  font-size: 22px;
+}
+
+.round {
+  border-radius: 50px;
+}
+
+.circle {
+  border-radius: 50px;
+  padding: 0;
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+}
--- a/compiled/alipay/demo/pages/ButtonCustom/index.axml
+++ b/compiled/alipay/demo/pages/ButtonCustom/index.axml
@ -0,0 +1,84 @@
+<container
+  title="自定义大小"
+  class="list">
+  <button
+    type="primary"
+    icon="SmileOutline"
+    onTap="handleTap"
+    className="btn">
+    主要按钮
+  </button>
+
+  <button
+    type="primary"
+    onTap="handleTap"
+    icon="SmileOutline"
+    className="btn"
+    inline>
+    主要按钮
+  </button>
+
+  <button
+    type="primary"
+    onTap="handleTap"
+    icon="ForbidFill"
+    className="btn"
+    inline
+    danger>
+    主要按钮
+  </button>
+</container>
+
+<container
+  title="round"
+  class="list">
+  <button
+    type="primary"
+    icon="SearchOutline"
+    onTap="handleTap"
+    inline
+    className="round">
+    主要按钮
+  </button>
+
+  <button
+    type="primary"
+    onTap="handleTap"
+    inline
+    danger
+    className="round">
+    主要按钮
+  </button>
+</container>
+
+<container
+  title="circle"
+  class="list">
+  <button
+    type="primary"
+    icon="SearchOutline"
+    onTap="handleTap"
+    inline
+    className="circle"></button>
+
+  <button
+    icon="SearchOutline"
+    onTap="handleTap"
+    inline
+    className="circle"></button>
+
+  <button
+    type="primary"
+    onTap="handleTap"
+    inline
+    className="circle">
+    A
+  </button>
+
+  <button
+    onTap="handleTap"
+    inline
+    className="circle">
+    A
+  </button>
+</container>
--- a/compiled/alipay/demo/pages/ButtonCustom/index.js
+++ b/compiled/alipay/demo/pages/ButtonCustom/index.js
--- a/compiled/alipay/demo/pages/ButtonCustom/index.json
+++ b/compiled/alipay/demo/pages/ButtonCustom/index.json
@ -0,0 +1,7 @@
+{
+  "defaultTitle": "Button",
+  "usingComponents": {
+    "button": "../../../src/Button/index",
+    "container": "../../../src/Container/index"
+  }
+}
--- a/compiled/alipay/demo/pages/ButtonIcon/index.axml
+++ b/compiled/alipay/demo/pages/ButtonIcon/index.axml
--- a/compiled/alipay/demo/pages/ButtonIcon/index.json
+++ b/compiled/alipay/demo/pages/ButtonIcon/index.json
--- a/compiled/alipay/demo/pages/ButtonIcon/index.less
+++ b/compiled/alipay/demo/pages/ButtonIcon/index.less
--- a/compiled/alipay/demo/pages/ButtonIcon/index.ts
+++ b/compiled/alipay/demo/pages/ButtonIcon/index.ts
--- a/compiled/alipay/demo/pages/ButtonInline/index.axml
+++ b/compiled/alipay/demo/pages/ButtonInline/index.axml
--- a/compiled/alipay/demo/pages/ButtonInline/index.json
+++ b/compiled/alipay/demo/pages/ButtonInline/index.json
--- a/compiled/alipay/demo/pages/ButtonInline/index.less
+++ b/compiled/alipay/demo/pages/ButtonInline/index.less
--- a/compiled/alipay/demo/pages/ButtonInline/index.ts
+++ b/compiled/alipay/demo/pages/ButtonInline/index.ts
--- a/compiled/alipay/demo/pages/Calendar/collapse-container/cn-day/cn-day.axml
+++ b/compiled/alipay/demo/pages/Calendar/collapse-container/cn-day/cn-day.axml
@ -0,0 +1,3 @@
+<view class="cn-day {{festival?'festival':''}} {{unset?'unset':''}}">
+  {{cnday}}
+</view>
--- a/compiled/alipay/demo/pages/Calendar/collapse-container/cn-day/cn-day.json
+++ b/compiled/alipay/demo/pages/Calendar/collapse-container/cn-day/cn-day.json
@ -0,0 +1,4 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared"
+}
--- a/compiled/alipay/demo/pages/Calendar/collapse-container/cn-day/cn-day.less
+++ b/compiled/alipay/demo/pages/Calendar/collapse-container/cn-day/cn-day.less
@ -0,0 +1,11 @@
+.cn-day {
+  color: #999999;
+}
+
+.festival {
+  color: red;
+}
+
+.unset {
+  color: unset;
+}
--- a/compiled/alipay/demo/pages/Calendar/collapse-container/cn-day/cn-day.ts
+++ b/compiled/alipay/demo/pages/Calendar/collapse-container/cn-day/cn-day.ts
@ -0,0 +1,29 @@
+import { alipayComponent } from 'functional-mini/component';
+import Converter from 'js-calendar-converter';
+import dayjs from 'dayjs';
+
+interface Props {
+  cell: any;
+}
+
+const CollapseContainer = (props: Props) => {
+  const time = dayjs(props.cell?.time);
+  const vs = Converter.solar2lunar(
+    time.get('year'),
+    time.get('month') + 1,
+    time.get('date')
+  );
+  if (vs === -1) {
+    return {
+      cnday: '',
+    };
+  }
+
+  return {
+    cnday: vs.lunarFestival ?? vs.festival ?? vs.IDayCn,
+    festival: !!vs.festival || !!vs.lunarFestival,
+    unset: props.cell?.isSelectedBegin || props.cell?.isSelectedEnd,
+  };
+};
+
+Component(alipayComponent(CollapseContainer));
--- a/compiled/alipay/demo/pages/Calendar/collapse-container/collapse-container.axml
+++ b/compiled/alipay/demo/pages/Calendar/collapse-container/collapse-container.axml
@ -0,0 +1,18 @@
+<container title="{{containerTitle}}">
+  <view
+    slot="headerRight"
+    onTap="handleToggle"
+    data-id="demo1">
+    <text a:if="{{ !collapse }}">收起</text>
+    <text a:else>展示</text>
+  </view>
+  <view a:if="{{ !collapse }}">
+    <slot name="content"></slot>
+  </view>
+  <view
+    a:else
+    onTap="handleToggle">
+    <slot name="description"></slot>
+    <view class="placeholder">展示</view>
+  </view>
+</container>
--- a/compiled/alipay/demo/pages/Calendar/collapse-container/collapse-container.json
+++ b/compiled/alipay/demo/pages/Calendar/collapse-container/collapse-container.json
@ -0,0 +1,8 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {
+    "container": "../../../../src/Container/index",
+    "calendar": "../../../../src/Calendar/index"
+  }
+}
--- a/compiled/alipay/demo/pages/Calendar/collapse-container/collapse-container.less
+++ b/compiled/alipay/demo/pages/Calendar/collapse-container/collapse-container.less
@ -0,0 +1,4 @@
+.placeholder {
+  text-align: center;
+  color: #999999;
+}
--- a/compiled/alipay/demo/pages/Calendar/collapse-container/collapse-container.ts
+++ b/compiled/alipay/demo/pages/Calendar/collapse-container/collapse-container.ts
@ -0,0 +1,28 @@
+import { alipayComponent, useEvent, useState } from 'functional-mini/component';
+
+interface Props {
+  hide: boolean;
+  defaultCollapse?: boolean;
+  title: string;
+  handleClick(id: string): void;
+}
+
+const CollapseContainer = (props: Props) => {
+  const [collapse, setCollapse] = useState(props.defaultCollapse ?? true);
+
+  useEvent(
+    'handleToggle',
+    () => {
+      setCollapse((v) => !v);
+    },
+    [setCollapse]
+  );
+
+  return {
+    collapse,
+    internalHide: props.hide,
+    containerTitle: props.title,
+  };
+};
+
+Component(alipayComponent(CollapseContainer));
--- a/compiled/alipay/demo/pages/Calendar/index.acss
+++ b/compiled/alipay/demo/pages/Calendar/index.acss
@ -0,0 +1,28 @@
+page {
+  padding: 8px;
+}
+
+.custom-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 60rpx;
+}
+
+.custom-header-left {
+  display: flex;
+  align-items: center;
+}
+
+.custom-header-right {
+  display: flex;
+  align-items: center;
+}
+
+.odd {
+  color: red;
+}
+
+.even{
+  color: blue;
+}
--- a/compiled/alipay/demo/pages/Calendar/index.axml
+++ b/compiled/alipay/demo/pages/Calendar/index.axml
@ -0,0 +1,123 @@
+<!-- 默认情况下显示最近 6 个月 -->
+<collapse-container
+  a:if="{{ demo1.visible }}"
+  title="默认多选，范围 3 个月">
+  <view
+    slot="content"
+    style="height: 1000rpx">
+    <calendar defaultValue="{{demo1.defaultValue}}" />
+  </view>
+</collapse-container>
+
+<!-- 单选 -->
+<collapse-container
+  a:if="{{ demo2.visible }}"
+  title="单选">
+  <view
+    slot="content"
+    style="height: 1000rpx">
+    <calendar selectionMode="single" defaultValue="{{demo2.defaultValue}}" ></calendar>
+  </view>
+</collapse-container>
+
+<!-- 自定义日历顶部 -->
+<collapse-container
+  a:if="{{ demo3.visible }}"
+  title="自定义日历顶部">
+  <view slot="content">
+    <view class="custom-header">
+      <view
+        onTap="demo3PreviousMonth"
+        class="custom-header-left">
+        <icon type="LeftOutline" />
+        上个月
+      </view>
+      <view>{{ demo3.title}}</view>
+      <view
+        onTap="demo3NextMonth"
+        class="custom-header-right">
+        下个月
+        <icon type="RightOutline" />
+      </view>
+    </view>
+    <calendar monthRange="{{demo3.monthRange}}">
+      <view slot="calendarTitle"></view>
+    </calendar>
+  </view>
+</collapse-container>
+
+<!-- 标记奇偶数 -->
+<collapse-container
+  a:if="{{ demo8.visible }}"
+  title="自定义日期单元格">
+  <view slot="content">
+    <calendar
+      monthRange="{{demo8.monthRange}}"
+      onFormatter="demo8Formatter"></calendar>
+  </view>
+</collapse-container>
+
+<!-- 最多选择三天 -->
+<collapse-container
+  a:if="{{ demo4.visible }}"
+  title="动态控制，只允许选择前后三天">
+  <view slot="content">
+    <calendar
+      monthRange="{{demo4.monthRange}}"
+      onFormatter="demoFormatter" />
+  </view>
+</collapse-container>
+
+<!-- 从周一开始 -->
+<collapse-container
+  a:if="{{ demo5.visible }}"
+  title="从周一开始">
+  <view
+    slot="content"
+    style="height: 1000rpx">
+    <calendar weekStartsOn="Monday" />
+  </view>
+</collapse-container>
+
+<!-- 通过 slot 实现农历 -->
+<collapse-container
+  a:if="{{ demo6.visible }}"
+  title="通过 slot 实现农历">
+  <view slot="content">
+    <calendar monthRange="{{demo6.monthRange}}">
+      <view
+        slot="cell-bottom"
+        slot-scope="prop">
+        <cn-day cell="{{prop.cell}}"></cn-day>
+      </view>
+    </calendar>
+  </view>
+</collapse-container>
+
+<!-- 国际化 -->
+<collapse-container
+  a:if="{{ demo7.visible }}"
+  title="国际化">
+  <view slot="content">
+    <calendar
+      monthRange="{{demo7.monthRange}}"
+      localeText="{{demo7.localeText}}"></calendar>
+  </view>
+</collapse-container>
+
+
+<!-- 受控模式 -->
+<collapse-container
+  a:if="{{ demo9.visible }}"
+  title="受控模式">
+  <view slot="content">
+    <calendar
+      value="{{demo9.value}}"
+      monthRange="{{demo9.monthRange}}"
+      onChange="demo9HandleChange"
+      selectionMode="single"
+      />
+      <button size="default" type="primary" onTap="demo9HandlePreviousDay">上一天</button>
+      <button size="default" style="margin-top:8rpx" type="primary" onTap="demo9HandleNextDay">下一天</button>
+  </view>
+</collapse-container>
--- a/compiled/alipay/demo/pages/Calendar/index.js
+++ b/compiled/alipay/demo/pages/Calendar/index.js
@ -0,0 +1,123 @@
+import dayjs from 'dayjs';
+
+Page({
+  data: () => {
+    const localeText = {
+      weekdayNames: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+      title: 'YYYY/MM',
+      today: 'Today',
+      start: 'Start',
+      end: 'End',
+      startAndEnd: 'Start/End',
+    };
+    return {
+      demo1: {
+        defaultValue: [Date.now(),Date.now()],
+        visible: true,
+      },
+      demo2: {
+        defaultValue: Date.now(),
+        visible: true,
+      },
+      demo3: {
+        title: dayjs(new Date().getTime()).format('YYYY年MM月'),
+        monthRange: [new Date().getTime(), new Date().getTime()],
+        visible: true,
+      },
+      demo4: {
+        visible: true,
+      },
+      demo5: {
+        visible: true,
+      },
+      demo6: {
+        monthRange: [new Date().getTime(), new Date().getTime()],
+        visible: true,
+      },
+      demo7: {
+        localeText,
+        visible: true,
+        monthRange: [new Date().getTime(), new Date().getTime()],
+      },
+      demo8: {
+        visible: true,
+        monthRange: [new Date().getTime(), new Date().getTime()],
+      },
+      demo9: {
+        visible: true,
+        value: Date.now(),
+        monthRange: [new Date().getTime(), new Date().getTime()],
+      },
+    };
+  },
+
+  demo3NextMonth() {
+    const current = this.data.demo3.monthRange[0];
+    const newMonth = dayjs(current).add(1, 'month').toDate().getTime();
+
+    this.setData({
+      'demo3.title': dayjs(newMonth).format('YYYY年MM月'),
+      'demo3.monthRange': [newMonth, newMonth],
+    });
+  },
+  demo3PreviousMonth() {
+    const current = this.data.demo3.monthRange[0];
+    const newMonth = dayjs(current).add(-1, 'month').toDate().getTime();
+
+    this.setData({
+      'demo3.title': dayjs(newMonth).format('YYYY年MM月'),
+      'demo3.monthRange': [newMonth, newMonth],
+    });
+  },
+  demoFormatter(cell, value) {
+    if (Array.isArray(value) && value.length == 1) {
+      const current = value[0];
+      return {
+        disabled: dayjs(cell.time).diff(dayjs(current), 'days') > 3,
+        bottom:
+          dayjs(cell.time).diff(dayjs(current), 'days') > 3
+            ? {
+                label: '不可选',
+              }
+            : undefined,
+      };
+    }
+    return {};
+  },
+  demo8Formatter(cell) {
+    const isOdd = dayjs(cell.time).date() % 2 === 1;
+    const isNotBeginEnd = !cell.isSelectedBegin && !cell.isSelectedEnd;
+
+    const isWeekend = dayjs(cell.time).day() > 4;
+
+    let topClassName;
+    if (isNotBeginEnd) {
+      topClassName = isOdd ? 'odd' : 'even';
+    }
+
+    return {
+      top: {
+        className: topClassName,
+        label: isOdd ? '奇数' : '偶数',
+      },
+      bottom: {
+        label: isWeekend ? '周末' : '',
+      },
+    };
+  },
+  demo9HandleChange(value){
+    this.setData({
+      'demo9.value':value
+    })
+  },
+  demo9HandlePreviousDay(){
+    this.setData({
+      'demo9.value': this.data.demo9.value - 1000 * 24 * 3600
+    })
+  },
+  demo9HandleNextDay(){
+    this.setData({
+      'demo9.value': this.data.demo9.value + 1000 * 24 * 3600
+    })
+  }
+});
--- a/compiled/alipay/demo/pages/Calendar/index.json
+++ b/compiled/alipay/demo/pages/Calendar/index.json
@ -0,0 +1,10 @@
+{
+  "defaultTitle": "Calendar",
+  "usingComponents": {
+    "icon": "../../../src/Icon/index",
+    "collapse-container":"./collapse-container/collapse-container",
+    "container": "../../../src/Container/index",
+    "calendar": "../../../src/Calendar/index",
+    "cn-day":"./collapse-container/cn-day/cn-day"
+  }
+}
--- a/compiled/alipay/demo/pages/CascaderPicker/city.js
+++ b/compiled/alipay/demo/pages/CascaderPicker/city.js
--- a/compiled/alipay/demo/pages/CascaderPicker/index.acss
+++ b/compiled/alipay/demo/pages/CascaderPicker/index.acss
@ -0,0 +1,4 @@
+.btn-wrapper {
+  text-align: center;
+  padding: 24rpx;
+}
--- a/compiled/alipay/demo/pages/CascaderPicker/index.axml
+++ b/compiled/alipay/demo/pages/CascaderPicker/index.axml
@ -0,0 +1,50 @@
+<list header="基础用法">
+  <list-item>
+    请选择省市
+    <cascader-picker
+      slot="extra"
+      placeholder="请选择归属地"
+      options="{{cityList}}"
+      onChange="handleCityPickerChange"
+      onOk="handleCityOnOk"
+      onCancel="handleDismiss" />
+  </list-item>
+</list>
+
+<list header="默认值">
+  <list-item>
+    请选择城市
+    <cascader-picker
+      slot="extra"
+      defaultValue="{{['34','330']}}"
+      placeholder="请选择城市"
+      options="{{cityList}}"
+      onChange="handleCityPickerChange"
+      onOk="handleCityOnOk" />
+  </list-item>
+</list>
+<list header="受控模式">
+  <list-item>
+    请选择城市
+    <cascader-picker
+      slot="extra"
+      value="{{value}}"
+      placeholder="请选择城市"
+      options="{{cityList}}"
+      onChange="handleCityPickerChange"
+      onOk="handleOk" />
+  </list-item>
+  <view class="btn-wrapper">
+    <button
+      inline
+      onTap="handleChangeControlled"
+      style="margin-right: 8px">
+      选择上海
+    </button>
+    <button
+      inline
+      onTap="handleClearControlled">
+      清空
+    </button>
+  </view>
+</list>
--- a/compiled/alipay/demo/pages/CascaderPicker/index.js
+++ b/compiled/alipay/demo/pages/CascaderPicker/index.js
@ -0,0 +1,28 @@
+import cityList from './city';
+Page({
+  data: {
+    cityList,
+    value: ['34', '330'],
+  },
+
+  handleCityPickerChange(value, selectedOption, e) {
+    console.log('cityChange', value, selectedOption, e);
+  },
+
+  handleCityOnOk(value, selectedOption, e) {
+    console.log('cityOk', value, selectedOption, e);
+  },
+  handleOk(value, selectedOption, e) {
+    this.setData({ value: value });
+    console.log('cityOk', value, selectedOption, e);
+  },
+  handleChangeControlled() {
+    this.setData({ value: ['31', '310'] });
+  },
+  handleClearControlled() {
+    this.setData({ value: [] });
+  },
+  handleDismiss(e) {
+    console.log('handleDismiss', e);
+  },
+});
--- a/compiled/alipay/demo/pages/CascaderPicker/index.json
+++ b/compiled/alipay/demo/pages/CascaderPicker/index.json
@ -0,0 +1,9 @@
+{
+  "defaultTitle": "CascaderPicker",
+  "usingComponents": {
+    "cascader-picker": "../../../src/Picker/CascaderPicker/index",
+    "list-item": "../../../src/List/ListItem/index",
+    "list": "../../../src/List/index",
+    "button": "../../../src/Button/index"
+  }
+}
--- a/compiled/alipay/demo/pages/Checkbox/index.acss
+++ b/compiled/alipay/demo/pages/Checkbox/index.acss
--- a/compiled/alipay/demo/pages/Checkbox/index.axml
+++ b/compiled/alipay/demo/pages/Checkbox/index.axml
@ -0,0 +1,32 @@
+<container title="基础用法">
+  <checkbox onChange="onChange">Checkbox</checkbox>
+</container>
+
+<container title="初始值">
+  <checkbox defaultChecked="{{true}}">Checkbox</checkbox>
+</container>
+
+<container title="禁用模式">
+  <checkbox disabled>Checkbox1</checkbox>
+  <checkbox
+    defaultChecked
+    disabled>
+    Checkbox2
+  </checkbox>
+</container>
+
+<container title="自定义颜色">
+  <checkbox
+    color="red"
+    defaultChecked>
+    Checkbox
+  </checkbox>
+</container>
+
+<container title="控制模式">
+  <checkbox
+    checked="{{checked}}"
+    onChange="handleChange">
+    Checkbox
+  </checkbox>
+</container>
--- a/compiled/alipay/demo/pages/Checkbox/index.js
+++ b/compiled/alipay/demo/pages/Checkbox/index.js
@ -0,0 +1,13 @@
+Page({
+  data: {
+    checked: false,
+  },
+  onChange(value, e) {
+    console.log(value, e);
+  },
+  handleChange(checked) {
+    this.setData({
+      checked,
+    });
+  },
+});
--- a/compiled/alipay/demo/pages/Checkbox/index.json
+++ b/compiled/alipay/demo/pages/Checkbox/index.json
@ -0,0 +1,7 @@
+{
+  "defaultTitle": "CheckBox",
+  "usingComponents": {
+    "checkbox": "../../../src/Checkbox/index",
+    "container": "../../../src/Container/index"
+  }
+}
--- a/compiled/alipay/demo/pages/CheckboxCustomGroup/index.acss
+++ b/compiled/alipay/demo/pages/CheckboxCustomGroup/index.acss
--- a/compiled/alipay/demo/pages/CheckboxCustomGroup/index.axml
+++ b/compiled/alipay/demo/pages/CheckboxCustomGroup/index.axml
@ -0,0 +1,15 @@
+<container title="自定义分组">
+  <list
+    header="{{ option.title }}"
+    a:for="{{ options }}"
+    a:for-item="option">
+    <list-item a:for="{{ option.list }}">
+      <checkbox
+        data-value="{{ item.value }}"
+        checked="{{ value.indexOf(item.value) > -1 }}"
+        onChange="onChange">
+        {{ item.title }}
+      </checkbox>
+    </list-item>
+  </list>
+</container>
--- a/compiled/alipay/demo/pages/CheckboxCustomGroup/index.js
+++ b/compiled/alipay/demo/pages/CheckboxCustomGroup/index.js
@ -0,0 +1,51 @@
+Page({
+  data: {
+    options: [
+      {
+        title: '分组一',
+        list: [
+          {
+            title: '选项一',
+            value: '1',
+          },
+          {
+            title: '选项二',
+            value: '2',
+          },
+          {
+            title: '选项三',
+            value: '3',
+          },
+        ],
+      },
+      {
+        title: '分组二',
+        list: [
+          {
+            title: '选项四',
+            value: '4',
+          },
+          {
+            title: '选项五',
+            value: '5',
+          },
+          {
+            title: '选项六',
+            value: '6',
+          },
+        ],
+      },
+    ],
+    value: [],
+  },
+  onChange(checked, e) {
+    let { value } = this.data;
+    if (checked) {
+      value = [...value, e.target.dataset.value];
+    } else {
+      value = value.filter((v) => v !== e.target.dataset.value);
+    }
+    this.setData({ value });
+    console.log(value);
+  },
+});
--- a/compiled/alipay/demo/pages/CheckboxCustomGroup/index.json
+++ b/compiled/alipay/demo/pages/CheckboxCustomGroup/index.json
@ -0,0 +1,9 @@
+{
+  "defaultTitle": "CheckboxCustomGroup",
+  "usingComponents": {
+    "container": "../../../src/Container/index",
+    "checkbox": "../../../src//Checkbox/index",
+    "list": "../../../src/List/index",
+    "list-item": "../../../src/List/ListItem/index"
+  }
+}
--- a/compiled/alipay/demo/pages/CheckboxGroup/index.acss
+++ b/compiled/alipay/demo/pages/CheckboxGroup/index.acss
--- a/compiled/alipay/demo/pages/CheckboxGroup/index.axml
+++ b/compiled/alipay/demo/pages/CheckboxGroup/index.axml
@ -0,0 +1,46 @@
+<container title="基础用法">
+  <checkbox-group
+    options="{{options}}"
+    onChange="onChange" />
+</container>
+
+<container title="初始值">
+  <checkbox-group
+    defaultValue="{{['banana']}}"
+    options="{{options}}"
+    onChange="onChange" />
+</container>
+
+<container title="横向布局">
+  <checkbox-group
+    options="{{options}}"
+    position="horizontal" />
+</container>
+
+<container title="禁用模式">
+  <checkbox-group
+    options="{{options}}"
+    disabled />
+</container>
+
+<container title="受控模式">
+  <checkbox-group
+    value="{{value}}"
+    options="{{options}}"
+    onChange="handleChange" />
+</container>
+<container title="自定义颜色">
+  <checkbox-group
+    options="{{options}}"
+    defaultValue="{{['apple','banana']}}"
+    color="red" />
+</container>
+<container title="自定义">
+  <checkbox-group options="{{options}}">
+    <view
+      slot="label"
+      slot-scope="item">
+      {{item.index +1}} {{item.value.label}}
+    </view>
+  </checkbox-group>
+</container>
--- a/compiled/alipay/demo/pages/CheckboxGroup/index.js
+++ b/compiled/alipay/demo/pages/CheckboxGroup/index.js
@ -0,0 +1,18 @@
+Page({
+  data: {
+    value: ['banana'],
+    options: [
+      { value: 'apple', label: '苹果' },
+      { value: 'orange', label: '橘子' },
+      { value: 'banana', label: '香蕉' },
+    ],
+  },
+  onChange(value, e) {
+    console.log(value, e);
+  },
+  handleChange(value) {
+    this.setData({
+      value,
+    });
+  },
+});
--- a/compiled/alipay/demo/pages/CheckboxGroup/index.json
+++ b/compiled/alipay/demo/pages/CheckboxGroup/index.json
@ -0,0 +1,7 @@
+{
+  "defaultTitle": "CheckboxGroup",
+  "usingComponents": {
+    "checkbox-group": "../../../src/Checkbox/CheckboxGroup/index",
+    "container": "../../../src/Container/index"
+  }
+}
--- a/compiled/alipay/demo/pages/Checklist/index.acss
+++ b/compiled/alipay/demo/pages/Checklist/index.acss
@ -0,0 +1,8 @@
+.demo-checklist-label {
+  font-size: 32rpx;
+  padding: 36rpx 0 16rpx 16rpx;
+}
+
+.demo-checklist-checked-icon {
+  font-size: 36rpx;
+}
--- a/compiled/alipay/demo/pages/Checklist/index.axml
+++ b/compiled/alipay/demo/pages/Checklist/index.axml
@ -0,0 +1,56 @@
+<container title="简单布局-单选">
+  <checklist
+    defaultValue="{{1}}"
+    options="{{options_1}}"
+    data-options="{{options_1}}"
+    onChange="onChange" />
+</container>
+
+<container title="复杂布局-多选">
+  <checklist
+    defaultValue="{{[1,2]}}"
+    options="{{options_2}}"
+    multiple
+    onChange="onChange" />
+</container>
+<container title="受控模式">
+  <checklist
+    value="{{value}}"
+    options="{{options_2}}"
+    multiple
+    onChange="onChangeControlled" />
+</container>
+<container title="禁用状态">
+  <checklist
+    defaultValue="{{[2]}}"
+    options="{{options_3}}"
+    multiple
+    onChange="onChange" />
+</container>
+
+<container title="只读状态">
+  <checklist
+    defaultValue="{{[2]}}"
+    options="{{options_4}}"
+    multiple
+    onChange="onChange" />
+</container>
+<container title="自定义勾选图标&&组件内容">
+  <checklist
+    defaultValue="{{[2]}}"
+    options="{{options_3}}"
+    multiple
+    onChange="onChange">
+    <view slot="icon">
+      <icon
+        style="color: red"
+        type="LikeOutline"
+        class="demo-checklist-checked-icon" />
+    </view>
+    <view
+      slot="content"
+      slot-scope="props">
+      title: {{props.item.title}}
+    </view>
+  </checklist>
+</container>
--- a/compiled/alipay/demo/pages/Checklist/index.js
+++ b/compiled/alipay/demo/pages/Checklist/index.js
@ -0,0 +1,78 @@
+Page({
+  data: {
+    value: [1, 2],
+    options_1: [
+      {
+        value: 1,
+        title: '可勾选列表项1',
+      },
+      {
+        value: 2,
+        title: '可勾选列表项2',
+      },
+      {
+        value: 3,
+        title: '可勾选列表项3',
+      },
+    ],
+    options_2: [
+      {
+        value: 1,
+        image:
+          'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
+        description: '这里是描述信息',
+        title: '可勾选列表项1',
+      },
+      {
+        value: 2,
+        image:
+          'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
+        description: '这里是描述信息',
+        title: '可勾选列表项2',
+      },
+      {
+        value: 3,
+        image:
+          'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*5m0ZQYhxhjEAAAAAAAAAAAAAARQnAQ',
+        description: '这里是描述信息',
+        title: '可勾选列表项3',
+      },
+    ],
+    options_3: [
+      {
+        value: 1,
+        title: '可勾选列表项1',
+      },
+      {
+        value: 2,
+        title: '禁用列表项2',
+        disabled: true,
+      },
+      {
+        value: 3,
+        title: '可勾选列表项3',
+      },
+    ],
+    options_4: [
+      {
+        value: 1,
+        title: '可勾选列表项1',
+      },
+      {
+        value: 2,
+        title: '只读列表项2',
+        readonly: true,
+      },
+      {
+        value: 3,
+        title: '可勾选列表项3',
+      },
+    ],
+  },
+  onChange(v, items, e) {
+    console.log('当前选中的值为：', v, items, e);
+  },
+  onChangeControlled(value) {
+    this.setData({ value });
+  },
+});
--- a/compiled/alipay/demo/pages/Checklist/index.json
+++ b/compiled/alipay/demo/pages/Checklist/index.json
@ -0,0 +1,8 @@
+{
+  "defaultTitle": "Checklist",
+  "usingComponents": {
+    "checklist": "../../../src/Checklist/index",
+    "icon": "../../../src/Icon/index",
+    "container": "../../../src/Container/index"
+  }
+}
--- a/compiled/alipay/demo/pages/Collapse/index.acss
+++ b/compiled/alipay/demo/pages/Collapse/index.acss
--- a/compiled/alipay/demo/pages/Collapse/index.axml
+++ b/compiled/alipay/demo/pages/Collapse/index.axml
@ -0,0 +1,4 @@
+<collapse
+  defaultCurrent="{{[0]}}"
+  items="{{items}}"
+  onChange="onChange" />
--- a/compiled/alipay/demo/pages/Collapse/index.js
+++ b/compiled/alipay/demo/pages/Collapse/index.js
@ -0,0 +1,25 @@
+Page({
+  data: {
+    items: [
+      {
+        title: '第一项',
+        content: 'Pariatur dolore commodo commodo elit adipisicing sunt adipisicing ex duis labore nisi sunt. Magna ut minim deserunt. Sunt velit occaecat incididunt aliqua. Dolore officia voluptate aute reprehenderit anim excepteur elit.'
+      },
+      {
+        title: '第二项',
+        content: 'Dolor reprehenderit cillum aliqua qui id Lorem elit anim do minim mollit. Commodo id cupidatat est tempor anim. Fugiat ipsum dolor nostrud officia mollit. Aliquip aliqua pariatur tempor excepteur commodo non et adipisicing magna ex nostrud dolore cillum exercitation enim. In sunt velit laboris ullamco et in reprehenderit sit excepteur aute in dolor. Sunt minim incididunt consectetur laborum sint fugiat voluptate sunt culpa fugiat duis. Ad consectetur ad aliquip aute labore magna commodo est cupidatat.'
+      },
+      {
+        title: '第三项',
+        content: 'Ad ut ullamco exercitation do excepteur ipsum ipsum consectetur nulla fugiat est et. Occaecat ullamco nulla mollit cupidatat dolore nulla minim cillum proident laboris mollit. Veniam consectetur esse consectetur. Fugiat in laborum anim.'
+      },
+      {
+        title:'禁止选项',
+        disabled: true,
+      }
+    ]
+  },
+  onChange(current) {
+    console.log(current);
+  }
+});
--- a/compiled/alipay/demo/pages/Collapse/index.json
+++ b/compiled/alipay/demo/pages/Collapse/index.json
@ -0,0 +1,6 @@
+{
+  "defaultTitle": "Collapse",
+  "usingComponents": {
+    "collapse": "../../../src/Collapse/index"
+  }
+}
--- a/compiled/alipay/demo/pages/CollapseAccordion/index.acss
+++ b/compiled/alipay/demo/pages/CollapseAccordion/index.acss
--- a/compiled/alipay/demo/pages/CollapseAccordion/index.axml
+++ b/compiled/alipay/demo/pages/CollapseAccordion/index.axml
@ -0,0 +1,4 @@
+<collapse
+  items="{{items}}"
+  onChange="onChange"
+  accordion />
--- a/compiled/alipay/demo/pages/CollapseAccordion/index.js
+++ b/compiled/alipay/demo/pages/CollapseAccordion/index.js
@ -0,0 +1,21 @@
+Page({
+  data: {
+    items: [
+      {
+        title: '第一项',
+        content: 'Pariatur dolore commodo commodo elit adipisicing sunt adipisicing ex duis labore nisi sunt. Magna ut minim deserunt. Sunt velit occaecat incididunt aliqua. Dolore officia voluptate aute reprehenderit anim excepteur elit.'
+      },
+      {
+        title: '第二项',
+        content: 'Dolor reprehenderit cillum aliqua qui id Lorem elit anim do minim mollit. Commodo id cupidatat est tempor anim. Fugiat ipsum dolor nostrud officia mollit. Aliquip aliqua pariatur tempor excepteur commodo non et adipisicing magna ex nostrud dolore cillum exercitation enim. In sunt velit laboris ullamco et in reprehenderit sit excepteur aute in dolor. Sunt minim incididunt consectetur laborum sint fugiat voluptate sunt culpa fugiat duis. Ad consectetur ad aliquip aute labore magna commodo est cupidatat.'
+      },
+      {
+        title: '第三项',
+        content: 'Ad ut ullamco exercitation do excepteur ipsum ipsum consectetur nulla fugiat est et. Occaecat ullamco nulla mollit cupidatat dolore nulla minim cillum proident laboris mollit. Veniam consectetur esse consectetur. Fugiat in laborum anim.'
+      },
+    ]
+  },
+  onChange(current) {
+    console.log(current);
+  }
+});
--- a/compiled/alipay/demo/pages/CollapseAccordion/index.json
+++ b/compiled/alipay/demo/pages/CollapseAccordion/index.json
@ -0,0 +1,6 @@
+{
+  "defaultTitle": "Collapse",
+  "usingComponents": {
+    "collapse": "../../../src/Collapse/index"
+  }
+}
--- a/compiled/alipay/demo/pages/CollapseControl/index.acss
+++ b/compiled/alipay/demo/pages/CollapseControl/index.acss
@ -0,0 +1,3 @@
+button {
+  margin: 8px;
+}
--- a/compiled/alipay/demo/pages/CollapseControl/index.axml
+++ b/compiled/alipay/demo/pages/CollapseControl/index.axml
@ -0,0 +1,21 @@
+<button
+  onTap="toggle"
+  inline>
+  切换
+</button>
+<button
+  onTap="changeContent"
+  inline>
+  修改content
+</button>
+<button
+  onTap="addItems"
+  inline>
+  添加items
+</button>
+{{current}}
+
+<collapse
+  items="{{items}}"
+  current="{{current}}"
+  onChange="onChange" />
--- a/compiled/alipay/demo/pages/CollapseControl/index.js
+++ b/compiled/alipay/demo/pages/CollapseControl/index.js
@ -0,0 +1,51 @@
+Page({
+  data: {
+    current: [0],
+    items: [
+      {
+        title: '第一项',
+        content: 'Pariatur dolore commodo commodo elit adipisicing sunt adipisicing ex duis labore nisi sunt. Magna ut minim deserunt. Sunt velit occaecat incididunt aliqua. Dolore officia voluptate aute reprehenderit anim excepteur elit.'
+      },
+      {
+        title: '第二项',
+        content: 'Dolor reprehenderit cillum aliqua qui id Lorem elit anim do minim mollit. Commodo id cupidatat est tempor anim. Fugiat ipsum dolor nostrud officia mollit. Aliquip aliqua pariatur tempor excepteur commodo non et adipisicing magna ex nostrud dolore cillum exercitation enim. In sunt velit laboris ullamco et in reprehenderit sit excepteur aute in dolor. Sunt minim incididunt consectetur laborum sint fugiat voluptate sunt culpa fugiat duis. Ad consectetur ad aliquip aute labore magna commodo est cupidatat.',
+      },
+      {
+        title: '第三项',
+        content: 'Ad ut ullamco exercitation do excepteur ipsum ipsum consectetur nulla fugiat est et. Occaecat ullamco nulla mollit cupidatat dolore nulla minim cillum proident laboris mollit. Veniam consectetur esse consectetur. Fugiat in laborum anim.'
+      },
+    ]
+  },
+  onChange(current) {
+    this.setData({
+      current,
+    });
+  },
+  changeContent() {
+    const items = [...this.data.items];
+    items[0].content = Math.random() + ' ' + items[0].content;
+    this.setData({
+      items,
+    })
+  },
+  addItems() {
+    const items = [
+      ...this.data.items,
+      {
+        title: this.data.items.length,
+        content: 'Pariatur dolore commodo commodo elit adipisicing sunt adipisicing ex duis labore nisi sunt. Magna ut minim deserunt. Sunt velit occaecat incididunt aliqua. Dolore officia voluptate aute reprehenderit anim excepteur elit.'
+      },
+    ];
+    this.setData({
+      items,
+      current: [this.data.items.length],
+    });
+  },
+  toggle() {
+    this.setData({
+      current: this.data.items.map((item, index) => index).filter(item => {
+        return this.data.current.indexOf(item) < 0 
+      })
+    });
+  }
+});
--- a/compiled/alipay/demo/pages/CollapseControl/index.json
+++ b/compiled/alipay/demo/pages/CollapseControl/index.json
@ -0,0 +1,7 @@
+{
+  "defaultTitle": "Collapse",
+  "usingComponents": {
+    "collapse": "../../../src/Collapse/index",
+    "button": "../../../src/Button/index"
+  }
+}
--- a/compiled/alipay/demo/pages/CollapseCustom/index.acss
+++ b/compiled/alipay/demo/pages/CollapseCustom/index.acss
--- a/compiled/alipay/demo/pages/CollapseCustom/index.axml
+++ b/compiled/alipay/demo/pages/CollapseCustom/index.axml
@ -0,0 +1,22 @@
+<collapse
+  items="{{items}}"
+  curr>
+  <view
+    slot="title"
+    slot-scope="item">
+    {{item.value.title}} {{item.current.indexOf(item.index) >= 0 ? '' :
+    item.value.content.slice(0, 20) + '...' }}
+  </view>
+
+  <view
+    slot="brief"
+    slot-scope="item">
+    {{item.value.brief}}
+  </view>
+
+  <view
+    slot="icon"
+    slot-scope="item">
+    {{item.current.indexOf(item.index) >= 0 ? '关闭' : '展开'}}
+  </view>
+</collapse>
--- a/compiled/alipay/demo/pages/CollapseCustom/index.js
+++ b/compiled/alipay/demo/pages/CollapseCustom/index.js
@ -0,0 +1,19 @@
+Page({
+  data: {
+    items: [
+      {
+        title: '第一项',
+        content: 'Pariatur dolore commodo commodo elit adipisicing sunt adipisicing ex duis labore nisi sunt. Magna ut minim deserunt. Sunt velit occaecat incididunt aliqua. Dolore officia voluptate aute reprehenderit anim excepteur elit.'
+      },
+      {
+        title: '第二项',
+        content: 'Dolor reprehenderit cillum aliqua qui id Lorem elit anim do minim mollit. Commodo id cupidatat est tempor anim. Fugiat ipsum dolor nostrud officia mollit. Aliquip aliqua pariatur tempor excepteur commodo non et adipisicing magna ex nostrud dolore cillum exercitation enim. In sunt velit laboris ullamco et in reprehenderit sit excepteur aute in dolor. Sunt minim incididunt consectetur laborum sint fugiat voluptate sunt culpa fugiat duis. Ad consectetur ad aliquip aute labore magna commodo est cupidatat.'
+      },
+      {
+        title: '第三项',
+        content: 'Ad ut ullamco exercitation do excepteur ipsum ipsum consectetur nulla fugiat est et. Occaecat ullamco nulla mollit cupidatat dolore nulla minim cillum proident laboris mollit. Veniam consectetur esse consectetur. Fugiat in laborum anim.',
+        brief: '辅助信息',
+      },
+    ]
+  },
+});
--- a/compiled/alipay/demo/pages/CollapseCustom/index.json
+++ b/compiled/alipay/demo/pages/CollapseCustom/index.json
@ -0,0 +1,6 @@
+{
+  "defaultTitle": "Collapse",
+  "usingComponents": {
+    "collapse": "../../../src/Collapse/index"
+  }
+}
--- a/compiled/alipay/demo/pages/CollapseWithCheckbox/index.acss
+++ b/compiled/alipay/demo/pages/CollapseWithCheckbox/index.acss
@ -0,0 +1,12 @@
+.title {
+  display: flex;
+  font-size: 14px;
+}
+
+.content {
+  font-size: 14px;
+}
+
+button {
+  margin: 8px;
+}
--- a/compiled/alipay/demo/pages/CollapseWithCheckbox/index.axml
+++ b/compiled/alipay/demo/pages/CollapseWithCheckbox/index.axml
@ -0,0 +1,26 @@
+<collapse items="{{items}}">
+  <view
+    slot="title"
+    slot-scope="item"
+    class="title">
+    <view catchTap="true">
+      <checkbox
+        data-index="{{item.index}}"
+        onChange="onChange" />
+    </view>
+    <view>{{item.value.title}}</view>
+  </view>
+
+  <view
+    slot="content"
+    slot-scope="item"
+    class="content">
+    {{item.value.content}}
+  </view>
+</collapse>
+
+<button
+  type="primary"
+  onTap="onTap">
+  提交
+</button>
--- a/compiled/alipay/demo/pages/CollapseWithCheckbox/index.js
+++ b/compiled/alipay/demo/pages/CollapseWithCheckbox/index.js
@ -0,0 +1,36 @@
+const items = [
+  {
+    title: '第一项',
+    content: 'Pariatur dolore commodo commodo elit adipisicing sunt adipisicing ex duis labore nisi sunt. Magna ut minim deserunt. Sunt velit occaecat incididunt aliqua. Dolore officia voluptate aute reprehenderit anim excepteur elit.'
+  },
+  {
+    title: '第二项',
+    content: 'Dolor reprehenderit cillum aliqua qui id Lorem elit anim do minim mollit. Commodo id cupidatat est tempor anim. Fugiat ipsum dolor nostrud officia mollit. Aliquip aliqua pariatur tempor excepteur commodo non et adipisicing magna ex nostrud dolore cillum exercitation enim. In sunt velit laboris ullamco et in reprehenderit sit excepteur aute in dolor. Sunt minim incididunt consectetur laborum sint fugiat voluptate sunt culpa fugiat duis. Ad consectetur ad aliquip aute labore magna commodo est cupidatat.'
+  },
+  {
+    title: '第三项',
+    content: 'Ad ut ullamco exercitation do excepteur ipsum ipsum consectetur nulla fugiat est et. Occaecat ullamco nulla mollit cupidatat dolore nulla minim cillum proident laboris mollit. Veniam consectetur esse consectetur. Fugiat in laborum anim.',
+    brief: '辅助信息',
+  },
+];
+
+
+Page({
+  data: {
+    checkboxList: items.map((item) => false),
+    items,
+  },
+  onChange(checked, e) {
+    const { index } = e.currentTarget.dataset;
+    const checkboxList = [...this.data.checkboxList];
+    checkboxList[index] = checked;
+    this.setData({
+      checkboxList,
+    });
+  },
+  onTap() {
+    my.alert({
+      content: this.data.checkboxList,
+    });
+  }
+});
--- a/compiled/alipay/demo/pages/CollapseWithCheckbox/index.json
+++ b/compiled/alipay/demo/pages/CollapseWithCheckbox/index.json
@ -0,0 +1,8 @@
+{
+  "defaultTitle": "Collapse",
+  "usingComponents": {
+    "collapse": "../../../src/Collapse/index",
+    "checkbox": "../../../src/Checkbox/index",
+    "button": "../../../src/Button/index"
+  }
+}
--- a/compiled/alipay/demo/pages/Container/index.axml
+++ b/compiled/alipay/demo/pages/Container/index.axml
@ -0,0 +1,40 @@
+<!-- 标题在容器内 -->
+<container title="标题">
+  <view class="content"></view>
+</container>
+
+<!-- 标题在容器外 -->
+
+<container headerInBox="{{false}}">
+  <view slot="title">
+    <view class="icon">
+      <icon
+        type="SmileOutline"
+        style="margin-right: 8px" />
+      标题
+    </view>
+  </view>
+  <view slot="headerRight">右侧内容</view>
+  <view class="content"></view>
+</container>
+
+<!-- 容器内多个盒子 -->
+<container title="标题">
+  <view slot="headerRight">右侧内容</view>
+  <view class="content">
+    <view class="box"></view>
+    <view class="box"></view>
+    <view class="box"></view>
+  </view>
+</container>
+
+<!-- 只有右侧 -->
+<container>
+  <view class="content"></view>
+  <view slot="headerRight">右侧内容</view>
+</container>
+
+<!-- 不含标题、右侧内容 -->
+<container>
+  <view class="content"></view>
+</container>
--- a/compiled/alipay/demo/pages/Container/index.js
+++ b/compiled/alipay/demo/pages/Container/index.js
@ -0,0 +1 @@
+Page();
--- a/compiled/alipay/demo/pages/Container/index.json
+++ b/compiled/alipay/demo/pages/Container/index.json
@ -0,0 +1,7 @@
+{
+  "defaultTitle": "Container",
+  "usingComponents": {
+    "icon": "../../../src/Icon/index",
+    "container": "../../../src/Container/index"
+  }
+}
--- a/compiled/alipay/demo/pages/Container/index.less
+++ b/compiled/alipay/demo/pages/Container/index.less
@ -0,0 +1,21 @@
+@import "../../../src/style/themes/color.less";
+
+page {
+  padding: 12px;
+  color: @COLOR_TEXT_PRIMARY;
+}
+
+.content {
+  height: 70px;
+  display: flex;
+
+  .box {
+    background-color: @COLOR_BORDER;
+    &:not(:first-of-type) {
+      margin-left: 8px;
+    }
+    flex: 1;
+    border-radius: 4px;
+  }
+}
+
--- a/compiled/alipay/demo/pages/DatePicker/index.acss
+++ b/compiled/alipay/demo/pages/DatePicker/index.acss
--- a/compiled/alipay/demo/pages/DatePicker/index.axml
+++ b/compiled/alipay/demo/pages/DatePicker/index.axml
@ -0,0 +1,107 @@
+<list header="基础用法">
+  <list-item>
+    请选择日期
+    <date-picker
+      min="{{min}}"
+      max="{{max}}"
+      slot="extra"
+      defaultValue="{{defaultDate}}"
+      placeholder="请选择"
+      onPickerChange="handlePickerChange"
+      onVisibleChange="handleTriggerPicker"
+      onCancel="handleDismiss"
+      onOk="handleOk"></date-picker>
+  </list-item>
+  <list-item>
+    请选择日期（点击蒙层关闭）
+    <date-picker
+      min="{{min}}"
+      max="{{max}}"
+      slot="extra"
+      defaultValue="{{defaultDate}}"
+      placeholder="请选择"
+      onPickerChange="handlePickerChange"
+      onVisibleChange="handleTriggerPicker"
+      maskClosable
+      onOk="handleOk"></date-picker>
+  </list-item>
+</list>
+<list header="选择精度">
+  <list-item>
+    请选择年度
+    <date-picker
+      slot="extra"
+      precision="year"
+      format="YYYY"
+      placeholder="选择"
+      onOk="handleOk" />
+  </list-item>
+  <list-item>
+    请选择月份
+    <date-picker
+      slot="extra"
+      precision="month"
+      format="YYYY-MM"
+      placeholder="选择"
+      onVisibleChange="handleTriggerPicker"
+      onOk="handleOk" />
+  </list-item>
+  <list-item>
+    请选择时间
+    <date-picker
+      slot="extra"
+      precision="minute"
+      format="YYYY-MM-DD HH:mm"
+      placeholder="选择"
+      onVisibleChange="handleTriggerPicker"
+      onOk="handleOk" />
+  </list-item>
+</list>
+<list header="禁用状态">
+  <list-item>
+    请选择日期
+    <date-picker
+      slot="extra"
+      defaultValue="{{defaultDate}}"
+      disabled></date-picker>
+  </list-item>
+</list>
+<list header="自定义每列的渲染内容">
+  <list-item>
+    每列不显示单位
+    <date-picker
+      min="{{min}}"
+      max="{{max}}"
+      slot="extra"
+      defaultValue="{{defaultDate}}"
+      placeholder="请选择"
+      onPickerChange="handlePickerChange"
+      onVisibleChange="handleTriggerPicker"
+      onCancel="handleDismiss"
+      onOk="handleOk"
+      onFormatLabel="handleFormatLabel"></date-picker>
+  </list-item>
+</list>
+<list header="时间范围选择">
+  <list-item>
+    日期范围
+    <range-picker
+      slot="extra"
+      placeholder="请选择"
+      defaultValue="{{defaultDateRange}}"
+      onPickerChange="handlePickerRangeChange"
+      onVisibleChange="handleTriggerPicker"
+      onOk="handleRangeOk"></range-picker>
+  </list-item>
+  <list-item>
+    每列不显示单位
+    <range-picker
+      slot="extra"
+      placeholder="请选择"
+      defaultValue="{{defaultDateRange}}"
+      onPickerChange="handlePickerRangeChange"
+      onVisibleChange="handleTriggerPicker"
+      onOk="handleRangeOk"
+      onFormatLabel="handleFormatLabel"></range-picker>
+  </list-item>
+</list>
--- a/compiled/alipay/demo/pages/DatePicker/index.js
+++ b/compiled/alipay/demo/pages/DatePicker/index.js
@ -0,0 +1,33 @@
+Page({
+  data: {
+    min: new Date('2019/01/15'),
+    max: new Date('2023/08/20'),
+    defaultDate: new Date('2019/02/02'),
+    defaultDateRange: [new Date('2022/03/21'), new Date('2022/05/20')],
+  },
+  handlePickerChange(date, dateStr, e) {
+    console.log('onPickerChange', date, dateStr, e);
+  },
+  handleOk(date, format, e) {
+    console.log('onOk', date, format, e);
+  },
+  handlePickerRangeChange(type, date, dateStr, e) {
+    console.log('onPickerRangeChange', type, date, dateStr, e);
+  },
+  handleRangeOk(date, format, e) {
+    console.log('onRangeOk', date, format, e);
+  },
+  handleChangeDate() {
+    this.setData({ defaultDate: new Date('2019/05/02') });
+  },
+  handleTriggerPicker(visible, e) {
+    console.log('onVisibleChange', visible, e);
+  },
+
+  handleDismiss(e) {
+    console.log('e', e);
+  },
+  handleFormatLabel(type, value) {
+    return String(value);
+  },
+});
--- a/compiled/alipay/demo/pages/DatePicker/index.json
+++ b/compiled/alipay/demo/pages/DatePicker/index.json
@ -0,0 +1,9 @@
+{
+  "defaultTitle": "DatePicker",
+  "usingComponents": {
+    "date-picker": "../../../src/DatePicker/index",
+    "range-picker": "../../../src/DatePicker/RangePicker/index",
+    "list-item": "../../../src/List/ListItem/index",
+    "list": "../../../src/List/index"
+  }
+}
--- a/compiled/alipay/demo/pages/Divider/index.axml
+++ b/compiled/alipay/demo/pages/Divider/index.axml
@ -0,0 +1,38 @@
+<container
+  title="水平分割线"
+  headerInBox="{{false}}">
+  <divider />
+</container>
+
+<container
+  title="水平分割线-带文字"
+  headerInBox="{{false}}">
+  <divider text="中间内容" />
+  <divider
+    text="左侧内容"
+    textPosition="left" />
+  <divider
+    text="右侧内容"
+    textPosition="right" />
+</container>
+
+<container
+  title="水平分割线-自定义"
+  headerInBox="{{false}}">
+  <divider
+    text="自定义样式"
+    textStyle="color:#1677ff; fontWeight:600"
+    lineHeight="2"
+    lineType="dashed"
+    lineColor="#1677ff" />
+</container>
+
+<container
+  title="垂直分割线"
+  headerInBox="{{false}}">
+  <view class="divider-vertical">
+    <view>100m</view>
+    <divider direction="vertical" />
+    <view>浙江省杭州市西湖区西溪路556号</view>
+  </view>
+</container>
--- a/compiled/alipay/demo/pages/Divider/index.js
+++ b/compiled/alipay/demo/pages/Divider/index.js
@ -0,0 +1,5 @@
+Page({
+  data: {
+   
+  },
+})
--- a/compiled/alipay/demo/pages/Divider/index.json
+++ b/compiled/alipay/demo/pages/Divider/index.json
@ -0,0 +1,7 @@
+{
+  "defaultTitle": "Divider",
+  "usingComponents": {
+    "divider": "../../../src/Divider/index",
+    "container": "../../../src/Container/index"
+  }
+}
--- a/compiled/alipay/demo/pages/Divider/index.less
+++ b/compiled/alipay/demo/pages/Divider/index.less
@ -0,0 +1,13 @@
+@import "../../../src/style/themes/color.less";
+
+page {
+  padding: 24px;
+}
+
+.divider-vertical {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  color: @COLOR_TEXT_WEAK;
+}
+
--- a/compiled/alipay/demo/pages/Empty/index.acss
+++ b/compiled/alipay/demo/pages/Empty/index.acss
@ -0,0 +1,3 @@
+page {
+  padding: 12px;
+}
--- a/compiled/alipay/demo/pages/Empty/index.axml
+++ b/compiled/alipay/demo/pages/Empty/index.axml
@ -0,0 +1,33 @@
+<container title="基础样式">
+  <empty
+    title="这里什么也没有"
+    message="看看其它吧" />
+</container>
+
+<container title="添加操作按钮组">
+  <empty
+    title="这里什么也没有"
+    message="看看其它吧">
+    <view slot="extra">
+      <button
+        size="small"
+        inline>
+        操作1
+      </button>
+      <button
+        type="primary"
+        size="small"
+        inline
+        style="margin-left: 12px">
+        操作2
+      </button>
+    </view>
+  </empty>
+</container>
+
+<container title="自定义图片">
+  <empty
+    title="这里什么也没有"
+    message="看看其它吧"
+    image="https://gw.alipayobjects.com/mdn/rms_7cc883/afts/img/A*PG7NQoXbN38AAAAAAAAAAAAAARQnAQ" />
+</container>
--- a/Show More
+++ b/Show More