From eec0e5575f3504eb5a21eb877ff1b0363a92819a Mon Sep 17 00:00:00 2001
From: limqhz <lmq540344226@163.com>
Date: Thu, 17 Nov 2022 17:05:46 +0800
Subject: [PATCH] project init

---
 app.json                                      |   3 +-
 components/action-sheet/README.md             |  92 ++++++
 components/action-sheet/action-sheet.d.ts     |  58 ++++
 components/action-sheet/action-sheet.js       |  91 ++++++
 components/action-sheet/action-sheet.json     |  12 +
 components/action-sheet/action-sheet.wxml     |  32 ++
 components/action-sheet/action-sheet.wxs      |  19 ++
 components/action-sheet/action-sheet.wxss     | 134 +++++++++
 components/action-sheet/index.d.ts            |   3 +
 components/action-sheet/index.js              |   3 +
 components/action-sheet/props.d.ts            |   3 +
 components/action-sheet/props.js              |  30 ++
 components/action-sheet/show.d.ts             |  29 ++
 components/action-sheet/show.js               |  33 +++
 .../template/action-sheet-grid.wxml           |  46 +++
 .../template/action-sheet-item.wxml           |  17 ++
 .../template/action-sheet-list.wxml           |  11 +
 components/action-sheet/type.d.ts             |  35 +++
 components/action-sheet/type.js               |   1 +
 components/checkbox/README.md                 |  96 ++++++
 components/checkbox/checkbox-group-props.d.ts |   3 +
 components/checkbox/checkbox-group-props.js   |  27 ++
 components/checkbox/checkbox.d.ts             |  98 ++++++
 components/checkbox/checkbox.js               |  85 ++++++
 components/checkbox/checkbox.json             |   6 +
 components/checkbox/checkbox.wxml             |  47 +++
 components/checkbox/checkbox.wxss             | 131 ++++++++
 components/checkbox/props.d.ts                |   3 +
 components/checkbox/props.js                  |  66 +++++
 components/checkbox/type.d.ts                 | 105 +++++++
 components/checkbox/type.js                   |   1 +
 components/grid/README.md                     |  82 +++++
 components/grid/grid-item-props.d.ts          |   3 +
 components/grid/grid-item-props.js            |  27 ++
 components/grid/grid-item.d.ts                |  24 ++
 components/grid/grid-item.js                  | 111 +++++++
 components/grid/grid-item.json                |   6 +
 components/grid/grid-item.wxml                |  34 +++
 components/grid/grid-item.wxss                |  99 +++++++
 components/grid/grid.d.ts                     |  23 ++
 components/grid/grid.js                       |  73 +++++
 components/grid/grid.json                     |   4 +
 components/grid/grid.wxml                     |   5 +
 components/grid/grid.wxss                     |  38 +++
 components/grid/props.d.ts                    |   3 +
 components/grid/props.js                      |  25 ++
 components/grid/type.d.ts                     |  73 +++++
 components/grid/type.js                       |   1 +
 components/image/README.md                    |  73 +++++
 components/image/image-info.json              |  75 +++++
 components/image/image.d.ts                   |  27 ++
 components/image/image.js                     |  92 ++++++
 components/image/image.json                   |   6 +
 components/image/image.wxml                   |  45 +++
 components/image/image.wxss                   |  54 ++++
 components/image/index.d.ts                   |   4 +
 components/image/index.js                     |   2 +
 components/image/props.d.ts                   |   3 +
 components/image/props.js                     |  38 +++
 components/image/type.d.ts                    |  38 +++
 components/image/type.js                      |   1 +
 components/mixins/page-scroll.d.ts            |   7 +
 components/mixins/page-scroll.js              |  50 ++++
 components/mixins/transition.d.ts             |   1 +
 components/mixins/transition.js               | 123 ++++++++
 components/overlay/README.md                  |  42 +++
 components/overlay/overlay.d.ts               |  40 +++
 components/overlay/overlay.js                 |  69 +++++
 components/overlay/overlay.json               |   3 +
 components/overlay/overlay.wxml               |  19 ++
 components/overlay/overlay.wxss               |  42 +++
 components/popup/README.md                    |  47 +++
 components/popup/popup.d.ts                   |  24 ++
 components/popup/popup.js                     |  59 ++++
 components/popup/popup.json                   |   7 +
 components/popup/popup.wxml                   |  25 ++
 components/popup/popup.wxss                   |  99 +++++++
 components/popup/props.d.ts                   |   3 +
 components/popup/props.js                     |  47 +++
 components/popup/type.d.ts                    |  54 ++++
 components/popup/type.js                      |   1 +
 components/swiper/README.md                   |  92 ++++++
 components/swiper/common/constants.d.ts       |  11 +
 components/swiper/common/constants.js         |   5 +
 components/swiper/props.d.ts                  |   3 +
 components/swiper/props.js                    |  45 +++
 components/swiper/swiper-item.d.ts            |  10 +
 components/swiper/swiper-item.js              |  37 +++
 components/swiper/swiper-item.json            |   3 +
 components/swiper/swiper-item.wxml            |   3 +
 components/swiper/swiper-item.wxss            |  33 +++
 components/swiper/swiper-nav.d.ts             |  37 +++
 components/swiper/swiper-nav.js               |  63 ++++
 components/swiper/swiper-nav.json             |   3 +
 components/swiper/swiper-nav.wxml             |  18 ++
 components/swiper/swiper-nav.wxss             | 178 +++++++++++
 components/swiper/swiper.d.ts                 |  71 +++++
 components/swiper/swiper.js                   | 280 ++++++++++++++++++
 components/swiper/swiper.json                 |   7 +
 components/swiper/swiper.wxml                 |  43 +++
 components/swiper/swiper.wxs                  | 184 ++++++++++++
 components/swiper/swiper.wxss                 |  44 +++
 components/swiper/type.d.ts                   |  52 ++++
 components/swiper/type.js                     |   1 +
 pages/today/index.js                          |  83 ++++--
 pages/today/index.json                        |   3 +-
 pages/today/index.wxml                        |  15 +-
 pages/today/index.wxss                        |  24 +-
 108 files changed, 4483 insertions(+), 36 deletions(-)
 create mode 100644 components/action-sheet/README.md
 create mode 100644 components/action-sheet/action-sheet.d.ts
 create mode 100644 components/action-sheet/action-sheet.js
 create mode 100644 components/action-sheet/action-sheet.json
 create mode 100644 components/action-sheet/action-sheet.wxml
 create mode 100644 components/action-sheet/action-sheet.wxs
 create mode 100644 components/action-sheet/action-sheet.wxss
 create mode 100644 components/action-sheet/index.d.ts
 create mode 100644 components/action-sheet/index.js
 create mode 100644 components/action-sheet/props.d.ts
 create mode 100644 components/action-sheet/props.js
 create mode 100644 components/action-sheet/show.d.ts
 create mode 100644 components/action-sheet/show.js
 create mode 100644 components/action-sheet/template/action-sheet-grid.wxml
 create mode 100644 components/action-sheet/template/action-sheet-item.wxml
 create mode 100644 components/action-sheet/template/action-sheet-list.wxml
 create mode 100644 components/action-sheet/type.d.ts
 create mode 100644 components/action-sheet/type.js
 create mode 100644 components/checkbox/README.md
 create mode 100644 components/checkbox/checkbox-group-props.d.ts
 create mode 100644 components/checkbox/checkbox-group-props.js
 create mode 100644 components/checkbox/checkbox.d.ts
 create mode 100644 components/checkbox/checkbox.js
 create mode 100644 components/checkbox/checkbox.json
 create mode 100644 components/checkbox/checkbox.wxml
 create mode 100644 components/checkbox/checkbox.wxss
 create mode 100644 components/checkbox/props.d.ts
 create mode 100644 components/checkbox/props.js
 create mode 100644 components/checkbox/type.d.ts
 create mode 100644 components/checkbox/type.js
 create mode 100644 components/grid/README.md
 create mode 100644 components/grid/grid-item-props.d.ts
 create mode 100644 components/grid/grid-item-props.js
 create mode 100644 components/grid/grid-item.d.ts
 create mode 100644 components/grid/grid-item.js
 create mode 100644 components/grid/grid-item.json
 create mode 100644 components/grid/grid-item.wxml
 create mode 100644 components/grid/grid-item.wxss
 create mode 100644 components/grid/grid.d.ts
 create mode 100644 components/grid/grid.js
 create mode 100644 components/grid/grid.json
 create mode 100644 components/grid/grid.wxml
 create mode 100644 components/grid/grid.wxss
 create mode 100644 components/grid/props.d.ts
 create mode 100644 components/grid/props.js
 create mode 100644 components/grid/type.d.ts
 create mode 100644 components/grid/type.js
 create mode 100644 components/image/README.md
 create mode 100644 components/image/image-info.json
 create mode 100644 components/image/image.d.ts
 create mode 100644 components/image/image.js
 create mode 100644 components/image/image.json
 create mode 100644 components/image/image.wxml
 create mode 100644 components/image/image.wxss
 create mode 100644 components/image/index.d.ts
 create mode 100644 components/image/index.js
 create mode 100644 components/image/props.d.ts
 create mode 100644 components/image/props.js
 create mode 100644 components/image/type.d.ts
 create mode 100644 components/image/type.js
 create mode 100644 components/mixins/page-scroll.d.ts
 create mode 100644 components/mixins/page-scroll.js
 create mode 100644 components/mixins/transition.d.ts
 create mode 100644 components/mixins/transition.js
 create mode 100644 components/overlay/README.md
 create mode 100644 components/overlay/overlay.d.ts
 create mode 100644 components/overlay/overlay.js
 create mode 100644 components/overlay/overlay.json
 create mode 100644 components/overlay/overlay.wxml
 create mode 100644 components/overlay/overlay.wxss
 create mode 100644 components/popup/README.md
 create mode 100644 components/popup/popup.d.ts
 create mode 100644 components/popup/popup.js
 create mode 100644 components/popup/popup.json
 create mode 100644 components/popup/popup.wxml
 create mode 100644 components/popup/popup.wxss
 create mode 100644 components/popup/props.d.ts
 create mode 100644 components/popup/props.js
 create mode 100644 components/popup/type.d.ts
 create mode 100644 components/popup/type.js
 create mode 100644 components/swiper/README.md
 create mode 100644 components/swiper/common/constants.d.ts
 create mode 100644 components/swiper/common/constants.js
 create mode 100644 components/swiper/props.d.ts
 create mode 100644 components/swiper/props.js
 create mode 100644 components/swiper/swiper-item.d.ts
 create mode 100644 components/swiper/swiper-item.js
 create mode 100644 components/swiper/swiper-item.json
 create mode 100644 components/swiper/swiper-item.wxml
 create mode 100644 components/swiper/swiper-item.wxss
 create mode 100644 components/swiper/swiper-nav.d.ts
 create mode 100644 components/swiper/swiper-nav.js
 create mode 100644 components/swiper/swiper-nav.json
 create mode 100644 components/swiper/swiper-nav.wxml
 create mode 100644 components/swiper/swiper-nav.wxss
 create mode 100644 components/swiper/swiper.d.ts
 create mode 100644 components/swiper/swiper.js
 create mode 100644 components/swiper/swiper.json
 create mode 100644 components/swiper/swiper.wxml
 create mode 100644 components/swiper/swiper.wxs
 create mode 100644 components/swiper/swiper.wxss
 create mode 100644 components/swiper/type.d.ts
 create mode 100644 components/swiper/type.js

diff --git a/app.json b/app.json
index 44e5032..fecc057 100644
--- a/app.json
+++ b/app.json
@@ -7,7 +7,8 @@
         "pages/message/index"
     ],
     "usingComponents": {
-        "t-icon": "/components/icon/icon"
+        "t-icon": "/components/icon/icon",
+        "t-checkbox": "/components/checkbox/checkbox"
     },
     "window": {
         "backgroundTextStyle": "light",
diff --git a/components/action-sheet/README.md b/components/action-sheet/README.md
new file mode 100644
index 0000000..4483838
--- /dev/null
+++ b/components/action-sheet/README.md
@@ -0,0 +1,92 @@
+---
+title: ActionSheet 动作面板
+description: 由用户操作后触发的一种特定的模态弹出框 ，呈现一组与当前情境相关的两个或多个选项。
+spline: data
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-89%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-action-sheet": "tdesign-miniprogram/action-sheet/action-sheet",
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+{{ list }}
+
+### 图标列表型
+
+{{ icon-list }}
+
+### 宫格型
+
+{{ grid }}
+
+### 宫格型-多页
+
+{{ grid-multi }}
+
+### 支持指令调用
+
+```javascript
+import ActionSheet, { ActionSheetTheme } from 'tdesign-miniprogram/action-sheet/index';
+
+// 指令调用不同于组件引用不需要传入visible
+const basicListOption: ActionSheetShowOption = {
+  theme: ActionSheetTheme.List,
+  selector: '#t-action-sheet',
+  items: [
+    {
+      label: '默认选项',
+    },
+    {
+      label: '失效选项',
+      disabled: true,
+    },
+    {
+      label: '警告选项',
+      color: '#e34d59',
+    },
+  ],
+};
+
+const handler = ActionSheet.show(basicListOption);
+```
+
+指令调用的关闭如下
+
+```javascript
+handler.close();
+```
+
+
+## API
+### ActionSheet Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+cancel-text | String | 取消 | 设置取消按钮的文本 | N
+count | Number | 8 | 设置每页展示菜单的数量，仅当 type=grid 时有效 | N
+items | Array | - | 必需。菜单项。TS 类型：`Array<string | ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean; icon?: string; }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | Y
+show-cancel | Boolean | true | 是否显示取消按钮 | N
+theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N
+visible | Boolean | null | 必需。显示与隐藏 | Y
+default-visible | Boolean | false | 必需。显示与隐藏。非受控属性 | Y
+external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、组件内容部分、取消按钮 等元素类名。`['t-class', 't-class-content', 't-class-cancel']` | N
+
+### ActionSheet Events
+
+名称 | 参数 | 描述
+-- | -- | --
+visible-change | `(visible: Boolean)` | 当浮层隐藏或显示时触发。
+cancel | - | 点击取消按钮时触发
+selected | `(selected: ActionSheetItem | String, index: Number)` | 选择菜单项时触发
+
diff --git a/components/action-sheet/action-sheet.d.ts b/components/action-sheet/action-sheet.d.ts
new file mode 100644
index 0000000..6dc9f74
--- /dev/null
+++ b/components/action-sheet/action-sheet.d.ts
@@ -0,0 +1,58 @@
+import { SuperComponent } from '../common/src/index';
+export default class ActionSheet extends SuperComponent {
+    static show: (options: import("./show").ActionSheetShowOption) => WechatMiniprogram.Component.TrivialInstance;
+    externalClasses: string[];
+    properties: {
+        cancelText?: {
+            type: StringConstructor;
+            value?: string;
+        };
+        count?: {
+            type: NumberConstructor;
+            value?: number;
+        };
+        items: {
+            type: ArrayConstructor;
+            value?: (string | import("./type").ActionSheetItem)[];
+        };
+        showCancel?: {
+            type: BooleanConstructor;
+            value?: boolean;
+        };
+        theme?: {
+            type: StringConstructor;
+            value?: "list" | "grid";
+        };
+        visible: {
+            type: BooleanConstructor;
+            value?: boolean;
+        };
+        defaultVisible: {
+            type: BooleanConstructor;
+            value?: boolean;
+        };
+    };
+    data: {
+        prefix: string;
+        classPrefix: string;
+        gridThemeItems: any[];
+        currentSwiperIndex: number;
+    };
+    controlledProps: {
+        key: string;
+        event: string;
+    }[];
+    ready(): void;
+    methods: {
+        onSwiperChange(e: WechatMiniprogram.TouchEvent): void;
+        splitGridThemeActions(): void;
+        show(options: any): void;
+        memoInitialData(): void;
+        close(): void;
+        onPopupVisibleChange({ detail }: {
+            detail: any;
+        }): void;
+        onSelect(event: WechatMiniprogram.TouchEvent): void;
+        onCancel(): void;
+    };
+}
diff --git a/components/action-sheet/action-sheet.js b/components/action-sheet/action-sheet.js
new file mode 100644
index 0000000..06880cc
--- /dev/null
+++ b/components/action-sheet/action-sheet.js
@@ -0,0 +1,91 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { chunk } from '../common/utils';
+import { SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import { ActionSheetTheme, show } from './show';
+import props from './props';
+const { prefix } = config;
+const name = `${prefix}-action-sheet`;
+let ActionSheet = class ActionSheet extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-cancel`];
+        this.properties = Object.assign({}, props);
+        this.data = {
+            prefix,
+            classPrefix: name,
+            gridThemeItems: [],
+            currentSwiperIndex: 0,
+        };
+        this.controlledProps = [
+            {
+                key: 'visible',
+                event: 'visible-change',
+            },
+        ];
+        this.methods = {
+            onSwiperChange(e) {
+                const { detail: { current }, } = e;
+                this.setData({
+                    currentSwiperIndex: current,
+                });
+            },
+            splitGridThemeActions() {
+                if (this.data.theme !== ActionSheetTheme.Grid)
+                    return;
+                this.setData({
+                    gridThemeItems: chunk(this.data.items, this.data.count),
+                });
+            },
+            show(options) {
+                this.setData(Object.assign(Object.assign(Object.assign({}, this.initialData), options), { visible: true }));
+                this.splitGridThemeActions();
+                this.autoClose = true;
+                this._trigger('visible-change', { visible: true });
+            },
+            memoInitialData() {
+                this.initialData = Object.assign(Object.assign({}, this.properties), this.data);
+            },
+            close() {
+                this._trigger('visible-change', { visible: false });
+            },
+            onPopupVisibleChange({ detail }) {
+                if (!detail.visible) {
+                    this._trigger('visible-change', { visible: false });
+                }
+                if (this.autoClose) {
+                    this.setData({ visible: false });
+                    this.autoClose = false;
+                }
+            },
+            onSelect(event) {
+                const { currentSwiperIndex, items, gridThemeItems, count, theme } = this.data;
+                const { index } = event.currentTarget.dataset;
+                const isSwiperMode = theme === ActionSheetTheme.Grid;
+                const item = isSwiperMode ? gridThemeItems[currentSwiperIndex][index] : items[index];
+                const realIndex = isSwiperMode ? index + currentSwiperIndex * count : index;
+                if (item) {
+                    this.triggerEvent('selected', { selected: item, index: realIndex });
+                    this._trigger('visible-change', { visible: false });
+                }
+            },
+            onCancel() {
+                this.triggerEvent('cancel');
+            },
+        };
+    }
+    ready() {
+        this.memoInitialData();
+        this.splitGridThemeActions();
+    }
+};
+ActionSheet.show = show;
+ActionSheet = __decorate([
+    wxComponent()
+], ActionSheet);
+export default ActionSheet;
diff --git a/components/action-sheet/action-sheet.json b/components/action-sheet/action-sheet.json
new file mode 100644
index 0000000..a52f661
--- /dev/null
+++ b/components/action-sheet/action-sheet.json
@@ -0,0 +1,12 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "../icon/icon",
+    "t-popup": "../popup/popup",
+    "t-swiper": "../swiper/swiper",
+    "t-swiper-item": "../swiper/swiper-item",
+    "t-image": "../image/image",
+    "t-grid": "../grid/grid",
+    "t-grid-item": "../grid/grid-item"
+  }
+}
diff --git a/components/action-sheet/action-sheet.wxml b/components/action-sheet/action-sheet.wxml
new file mode 100644
index 0000000..59e3f7e
--- /dev/null
+++ b/components/action-sheet/action-sheet.wxml
@@ -0,0 +1,32 @@
+<wxs src="./action-sheet.wxs" module="this" />
+<import src="./template/action-sheet-list.wxml" />
+<import src="./template/action-sheet-grid.wxml" />
+<view id="{{classPrefix}}" class="{{classPrefix}} {{prefix}}-class">
+  <t-popup visible="{{visible}}" placement="bottom" bind:visible-change="onPopupVisibleChange">
+    <view class="{{classPrefix}}__content {{prefix}}-class-content">
+      <block wx:if="{{gridThemeItems.length}}">
+        <template is="grid" data="{{classPrefix, prefix, gridThemeItems, count, currentSwiperIndex}}" />
+      </block>
+      <block wx:elif="{{items && items.length}}">
+        <view class="{{classPrefix}}__list" wx:for="{{ items }}" wx:key="index">
+          <template
+            is="list"
+            data="{{index, classPrefix, listThemeItemClass: this.getListThemeItemClass({ item, prefix, classPrefix }), item}}"
+          />
+        </view>
+      </block>
+    </view>
+    <slot />
+    <view wx:if="{{showCancel}}" class="{{classPrefix}}__footer {{classPrefix}}__safe">
+      <view class="{{classPrefix}}__gap-{{theme}}" />
+      <view
+        class="{{classPrefix}}__cancel {{prefix}}-class-cancel"
+        hover-class="{{classPrefix}}__cancel--hover"
+        hover-stay-time="70"
+        bind:tap="onCancel"
+      >
+        {{ cancelText }}
+      </view>
+    </view>
+  </t-popup>
+</view>
diff --git a/components/action-sheet/action-sheet.wxs b/components/action-sheet/action-sheet.wxs
new file mode 100644
index 0000000..af7a695
--- /dev/null
+++ b/components/action-sheet/action-sheet.wxs
@@ -0,0 +1,19 @@
+var getListThemeItemClass = function (props) {
+  var classPrefix = props.classPrefix;
+  var item = props.item;
+  var prefix = props.prefix;
+  var classList = [classPrefix + '__list-item'];
+  if (item.disabled) {
+    classList.push(prefix + '-is-disabled');
+  }
+  return classList.join(' ');
+};
+
+var isImage = function (name) {
+  return name.indexOf('/') !== -1;
+};
+
+module.exports = {
+  getListThemeItemClass: getListThemeItemClass,
+  isImage: isImage,
+};
diff --git a/components/action-sheet/action-sheet.wxss b/components/action-sheet/action-sheet.wxss
new file mode 100644
index 0000000..8387b4d
--- /dev/null
+++ b/components/action-sheet/action-sheet.wxss
@@ -0,0 +1,134 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+.t-action-sheet .flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.t-action-sheet .ellipsis {
+  word-wrap: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.t-action-sheet__grid {
+  padding: 48rpx 0 16rpx 0;
+}
+.t-action-sheet__grid-item {
+  margin-bottom: 32rpx;
+}
+.t-action-sheet__list {
+  background-color: #fff;
+  border-bottom: 1rpx solid #f6f6f6;
+}
+.t-action-sheet__list:last-child {
+  border-bottom: none;
+}
+.t-action-sheet__list-item {
+  height: 96rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.t-action-sheet__list-item.t-is-disabled {
+  color: rgba(0, 0, 0, 0.26);
+}
+.t-action-sheet__list-item-text {
+  font-size: 32rpx;
+  word-wrap: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.t-action-sheet__list-item-icon {
+  margin-right: 16rpx;
+}
+.t-action-sheet__swiper-wrap {
+  position: relative;
+  background-color: #fff;
+}
+.t-action-sheet__square {
+  height: 148rpx;
+  margin-bottom: 32rpx;
+}
+.t-action-sheet__square-image {
+  width: 72rpx;
+  height: 72rpx;
+  padding: 10rpx;
+}
+.t-action-sheet__square-text {
+  width: 100%;
+  margin-top: 10rpx;
+  font-size: 28rpx;
+  color: rgba(0, 0, 0, 0.9);
+  text-align: center;
+  word-wrap: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.t-action-sheet__footer {
+  background-color: #fff;
+}
+.t-action-sheet__gap-list {
+  height: 16rpx;
+  background-color: #f3f3f3;
+}
+.t-action-sheet__gap-grid {
+  height: 1rpx;
+  background-color: #f3f3f3;
+}
+.t-action-sheet__cancel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 96rpx;
+}
+.t-action-sheet__dots {
+  position: absolute;
+  left: 50%;
+  bottom: 32rpx;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: row;
+}
+.t-action-sheet__dots-item {
+  width: 16rpx;
+  height: 16rpx;
+  background-color: #dcdcdc;
+  border-radius: 50%;
+  margin: 0 16rpx;
+  transition: all 0.4s ease-in;
+}
+.t-action-sheet__dots-item.t-is-active {
+  background-color: #0052d9;
+}
+.t-action-sheet__safe {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
diff --git a/components/action-sheet/index.d.ts b/components/action-sheet/index.d.ts
new file mode 100644
index 0000000..de46874
--- /dev/null
+++ b/components/action-sheet/index.d.ts
@@ -0,0 +1,3 @@
+import ActionSheet from './action-sheet';
+export * from './show';
+export default ActionSheet;
diff --git a/components/action-sheet/index.js b/components/action-sheet/index.js
new file mode 100644
index 0000000..de46874
--- /dev/null
+++ b/components/action-sheet/index.js
@@ -0,0 +1,3 @@
+import ActionSheet from './action-sheet';
+export * from './show';
+export default ActionSheet;
diff --git a/components/action-sheet/props.d.ts b/components/action-sheet/props.d.ts
new file mode 100644
index 0000000..0fff787
--- /dev/null
+++ b/components/action-sheet/props.d.ts
@@ -0,0 +1,3 @@
+import { TdActionSheetProps } from './type';
+declare const props: TdActionSheetProps;
+export default props;
diff --git a/components/action-sheet/props.js b/components/action-sheet/props.js
new file mode 100644
index 0000000..948f3a9
--- /dev/null
+++ b/components/action-sheet/props.js
@@ -0,0 +1,30 @@
+const props = {
+    cancelText: {
+        type: String,
+        value: '取消',
+    },
+    count: {
+        type: Number,
+        value: 8,
+    },
+    items: {
+        type: Array,
+    },
+    showCancel: {
+        type: Boolean,
+        value: true,
+    },
+    theme: {
+        type: String,
+        value: 'list',
+    },
+    visible: {
+        type: Boolean,
+        value: null,
+    },
+    defaultVisible: {
+        type: Boolean,
+        value: false,
+    },
+};
+export default props;
diff --git a/components/action-sheet/show.d.ts b/components/action-sheet/show.d.ts
new file mode 100644
index 0000000..e0d8eae
--- /dev/null
+++ b/components/action-sheet/show.d.ts
@@ -0,0 +1,29 @@
+/// <reference types="miniprogram-api-typings" />
+/// <reference types="miniprogram-api-typings" />
+export interface ActionSheetItem {
+    label: string;
+    color?: string;
+    disabled?: boolean;
+    icon?: string;
+}
+declare type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
+export declare enum ActionSheetTheme {
+    List = "list",
+    Grid = "grid"
+}
+interface ActionSheetProps {
+    visible: boolean;
+    items: Array<string | ActionSheetItem>;
+    defaultVisible?: boolean;
+    cancelText?: string;
+    count?: number;
+    showCancel?: boolean;
+    theme?: ActionSheetTheme;
+}
+export interface ActionSheetShowOption extends Omit<ActionSheetProps, 'visible'> {
+    context?: Context;
+    selector?: string;
+}
+export declare const show: (options: ActionSheetShowOption) => WechatMiniprogram.Component.TrivialInstance;
+export declare const close: (options: ActionSheetShowOption) => void;
+export {};
diff --git a/components/action-sheet/show.js b/components/action-sheet/show.js
new file mode 100644
index 0000000..44b0365
--- /dev/null
+++ b/components/action-sheet/show.js
@@ -0,0 +1,33 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { getInstance } from '../common/utils';
+export var ActionSheetTheme;
+(function (ActionSheetTheme) {
+    ActionSheetTheme["List"] = "list";
+    ActionSheetTheme["Grid"] = "grid";
+})(ActionSheetTheme || (ActionSheetTheme = {}));
+export const show = function (options) {
+    const _a = Object.assign({}, options), { context, selector = '#t-action-sheet' } = _a, otherOptions = __rest(_a, ["context", "selector"]);
+    const instance = getInstance(context, selector);
+    if (instance) {
+        instance.show(Object.assign({}, otherOptions));
+        return instance;
+    }
+    console.error('未找到组件,请确认 selector && context 是否正确');
+};
+export const close = function (options) {
+    const { context, selector = '#t-action-sheet' } = Object.assign({}, options);
+    const instance = getInstance(context, selector);
+    if (instance) {
+        instance.close();
+    }
+};
diff --git a/components/action-sheet/template/action-sheet-grid.wxml b/components/action-sheet/template/action-sheet-grid.wxml
new file mode 100644
index 0000000..7656640
--- /dev/null
+++ b/components/action-sheet/template/action-sheet-grid.wxml
@@ -0,0 +1,46 @@
+<import src="./action-sheet-item.wxml" />
+<template name="grid">
+  <block wx:if="{{gridThemeItems.length === 1}}">
+    <t-grid align="center" t-class="{{classPrefix}}__grid" column="{{count / 2}}" class="{{classPrefix}}__single-wrap">
+      <t-grid-item
+        t-class="{{classPrefix}}__grid-item"
+        class="{{classPrefix}}__square"
+        wx:for="{{gridThemeItems[0]}}"
+        wx:key="index"
+        bind:tap="onSelect"
+        data-index="{{index}}"
+      >
+        <template is="item" data="{{classPrefix, item}}" />
+      </t-grid-item>
+    </t-grid>
+  </block>
+  <block wx:elif="{{gridThemeItems.length > 1}}">
+    <view class="{{classPrefix}}__swiper-wrap">
+      <t-swiper height="{{456}}" autoplay="{{false}}" current="{{currentSwiperIndex}}" bindchange="onSwiperChange">
+        <t-swiper-item wx:for="{{gridThemeItems}}" wx:key="index">
+          <t-grid align="center" t-class="{{classPrefix}}__grid" column="{{count / 2}}">
+            <t-grid-item
+              t-class="{{classPrefix}}__grid-item"
+              class="{{classPrefix}}__square"
+              wx:for="{{item}}"
+              wx:key="index"
+              data-index="{{index}}"
+              bind:tap="onSelect"
+            >
+              <template is="item" data="{{classPrefix, item}}" />
+            </t-grid-item>
+          </t-grid>
+        </t-swiper-item>
+      </t-swiper>
+      <view class="{{classPrefix}}__nav">
+        <view class="{{classPrefix}}__dots">
+          <view
+            wx:for="{{gridThemeItems.length}}"
+            wx:key="index"
+            class="{{classPrefix}}__dots-item {{index === currentSwiperIndex ? prefix + '-is-active' : ''}}"
+          />
+        </view>
+      </view>
+    </view>
+  </block>
+</template>
diff --git a/components/action-sheet/template/action-sheet-item.wxml b/components/action-sheet/template/action-sheet-item.wxml
new file mode 100644
index 0000000..17cf9a6
--- /dev/null
+++ b/components/action-sheet/template/action-sheet-item.wxml
@@ -0,0 +1,17 @@
+<wxs src="../action-sheet.wxs" module="this" />
+<template name="item">
+  <block>
+    <t-image
+      slot="image"
+      wx:if="{{ this.isImage(item.icon) }}"
+      lazy
+      class="{{classPrefix}}__square-image"
+      src="{{item.icon}}"
+      mode="aspectFill"
+    />
+    <t-icon slot="image" wx:else name="{{item.icon}}" class="{{classPrefix}}__square-image" size="72rpx" />
+  </block>
+  <view slot="text" style="{{ item.color ? 'color: ' + item.color : '' }}" class="{{classPrefix}}__square-text">
+    {{item.label}}
+  </view>
+</template>
diff --git a/components/action-sheet/template/action-sheet-list.wxml b/components/action-sheet/template/action-sheet-list.wxml
new file mode 100644
index 0000000..f915812
--- /dev/null
+++ b/components/action-sheet/template/action-sheet-list.wxml
@@ -0,0 +1,11 @@
+<template name="list">
+  <view
+    data-index="{{index}}"
+    style="{{ item.color ? 'color: ' + item.color : '' }}"
+    class="{{listThemeItemClass}}"
+    bind:tap="onSelect"
+  >
+    <t-icon wx:if="{{item.icon}}" name="{{item.icon}}" class="{{classPrefix}}__list-item-icon" size="48rpx"></t-icon>
+    <view class="{{classPrefix}}__list-item-text">{{item.label || item}}</view>
+  </view>
+</template>
diff --git a/components/action-sheet/type.d.ts b/components/action-sheet/type.d.ts
new file mode 100644
index 0000000..75b400c
--- /dev/null
+++ b/components/action-sheet/type.d.ts
@@ -0,0 +1,35 @@
+export interface TdActionSheetProps {
+    cancelText?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    count?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    items: {
+        type: ArrayConstructor;
+        value?: Array<string | ActionSheetItem>;
+    };
+    showCancel?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    theme?: {
+        type: StringConstructor;
+        value?: 'list' | 'grid';
+    };
+    visible: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    defaultVisible: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+}
+export interface ActionSheetItem {
+    label: string;
+    color?: string;
+    disabled?: boolean;
+}
diff --git a/components/action-sheet/type.js b/components/action-sheet/type.js
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/components/action-sheet/type.js
@@ -0,0 +1 @@
+export {};
diff --git a/components/checkbox/README.md b/components/checkbox/README.md
new file mode 100644
index 0000000..5030168
--- /dev/null
+++ b/components/checkbox/README.md
@@ -0,0 +1,96 @@
+---
+title: Checkbox 复选框
+description: 用于预设的一组选项中执行多项选择，并呈现选择结果。
+spline: form
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-85%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-87%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-86%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-76%25-red" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-checkbox": "tdesign-miniprogram/checkbox/checkbox",
+  "t-checkbox-group": "tdesign-miniprogram/checkbox-group/checkbox-group"
+}
+```
+
+## 代码演示
+
+### 基础复选框
+
+<img src="https://tdesign.gtimg.com/miniprogram/readme/checkbox.png" width="375px" height="50%">
+
+{{ base }}
+
+### 右侧多选框
+
+{{ right }}
+
+### 带全选多选框
+
+{{ all }}
+
+### 限制最多可选数量
+
+{{ num }}
+
+### 状态
+
+{{ status }}
+
+### 特殊类型
+
+{{ type }}
+
+### 规格
+
+{{ size }}
+
+## API
+### Checkbox Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+align | String | left | 多选框和内容相对位置。可选项：left/right | N
+check-all | Boolean | false | 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 | N
+checked | Boolean | false | 是否选中 | N
+default-checked | Boolean | undefined | 是否选中。非受控属性 | N
+color | String | #0052d9 | 多选框颜色 | N
+content | String / Slot | - | 多选框内容 | N
+content-disabled | Boolean | - | 是否禁用组件内容（content）触发选中 | N
+disabled | Boolean | undefined | 是否禁用组件 | N
+external-classes | Array | - | 组件类名，分别用于设置 组件外层、多选框图标、主文案、内容 等元素类名。`['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border']` | N
+icon | Array | - | 自定义选中图标和非选中图标。示例：[选中态图标地址，非选中态图标地址]。TS 类型：`Array<string>` | N
+indeterminate | Boolean | false | 是否为半选 | N
+label | String / Slot | - | 主文案 | N
+max-content-row | Number | 5 | 内容最大行数限制 | N
+max-label-row | Number | 3 | 主文案最大行数限制 | N
+name | String | - | HTML 元素原生属性 | N
+readonly | Boolean | false | 只读状态 | N
+value | String / Number | - | 多选框的值。TS 类型：`string | number` | N
+
+### Checkbox Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(checked: boolean)` | 值变化时触发
+
+### CheckboxGroup Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+disabled | Boolean | false | 是否禁用组件 | N
+max | Number | undefined | 支持最多选中的数量 | N
+name | String | - | 统一设置内部复选框 HTML 属性 | N
+options | Array | [] | 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型：`Array<CheckboxOption>` `type CheckboxOption = string | number | CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string | number; disabled?: boolean; checkAll?: true }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox/type.ts) | N
+value | Array | [] | 选中值。TS 类型：`CheckboxGroupValue` `type CheckboxGroupValue = Array<string | number>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox/type.ts) | N
+default-value | Array | undefined | 选中值。非受控属性。TS 类型：`CheckboxGroupValue` `type CheckboxGroupValue = Array<string | number>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox/type.ts) | N
+
+### CheckboxGroup Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(value: CheckboxGroupValue, context: CheckboxGroupChangeContext)` | 值变化时触发。`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string | number; option: CheckboxOption | TdCheckboxProps; type: 'check' | 'uncheck' }`<br/>
diff --git a/components/checkbox/checkbox-group-props.d.ts b/components/checkbox/checkbox-group-props.d.ts
new file mode 100644
index 0000000..f6e5bf5
--- /dev/null
+++ b/components/checkbox/checkbox-group-props.d.ts
@@ -0,0 +1,3 @@
+import { TdCheckboxGroupProps } from './type';
+declare const props: TdCheckboxGroupProps;
+export default props;
diff --git a/components/checkbox/checkbox-group-props.js b/components/checkbox/checkbox-group-props.js
new file mode 100644
index 0000000..ddcf2dc
--- /dev/null
+++ b/components/checkbox/checkbox-group-props.js
@@ -0,0 +1,27 @@
+const props = {
+    disabled: {
+        type: Boolean,
+        value: false,
+    },
+    max: {
+        type: Number,
+        value: undefined,
+    },
+    name: {
+        type: String,
+        value: '',
+    },
+    options: {
+        type: Array,
+        value: [],
+    },
+    value: {
+        type: Array,
+        value: null,
+    },
+    defaultValue: {
+        type: Array,
+        value: [],
+    },
+};
+export default props;
diff --git a/components/checkbox/checkbox.d.ts b/components/checkbox/checkbox.d.ts
new file mode 100644
index 0000000..508b450
--- /dev/null
+++ b/components/checkbox/checkbox.d.ts
@@ -0,0 +1,98 @@
+import { SuperComponent, ComponentsOptionsType, RelationsOptions } from '../common/src/index';
+export default class CheckBox extends SuperComponent {
+    externalClasses: string[];
+    behaviors: string[];
+    relations: RelationsOptions;
+    options: ComponentsOptionsType;
+    properties: {
+        theme: {
+            type: StringConstructor;
+            value: string;
+        };
+        borderless: {
+            type: BooleanConstructor;
+            value: boolean;
+        };
+        align?: {
+            type: StringConstructor;
+            value?: "left" | "right";
+        };
+        checkAll?: {
+            type: BooleanConstructor;
+            value?: boolean;
+        };
+        checked?: {
+            type: BooleanConstructor;
+            value?: boolean;
+        };
+        defaultChecked?: {
+            type: BooleanConstructor;
+            value?: boolean;
+        };
+        color?: {
+            type: StringConstructor;
+            value?: string;
+        };
+        content?: {
+            type: StringConstructor;
+            value?: string;
+        };
+        contentDisabled?: {
+            type: BooleanConstructor;
+            value?: boolean;
+        };
+        disabled?: {
+            type: BooleanConstructor;
+            value?: boolean;
+        };
+        externalClasses?: {
+            type: ArrayConstructor;
+            value?: ["t-class", "t-class-icon", "t-class-label", "t-class-content", "t-class-border"];
+        };
+        icon?: {
+            type: ArrayConstructor;
+            value?: string[];
+        };
+        indeterminate?: {
+            type: BooleanConstructor;
+            value?: boolean;
+        };
+        label?: {
+            type: StringConstructor;
+            value?: string;
+        };
+        maxContentRow?: {
+            type: NumberConstructor;
+            value?: number;
+        };
+        maxLabelRow?: {
+            type: NumberConstructor;
+            value?: number;
+        };
+        name?: {
+            type: StringConstructor;
+            value?: string;
+        };
+        readonly?: {
+            type: BooleanConstructor;
+            value?: boolean;
+        };
+        value?: {
+            type: StringConstructor;
+            optionalTypes: NumberConstructor[];
+            value?: string | number;
+        };
+    };
+    data: {
+        prefix: string;
+        classPrefix: string;
+    };
+    controlledProps: {
+        key: string;
+        event: string;
+    }[];
+    methods: {
+        // @ts-ignore
+        onChange(e: WechatMiniprogram.TouchEvent): void;
+    };
+}
diff --git a/components/checkbox/checkbox.js b/components/checkbox/checkbox.js
new file mode 100644
index 0000000..d697ab5
--- /dev/null
+++ b/components/checkbox/checkbox.js
@@ -0,0 +1,85 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import Props from './props';
+const { prefix } = config;
+const classPrefix = `${prefix}-checkbox`;
+let CheckBox = class CheckBox extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [
+            `${prefix}-class`,
+            `${prefix}-class-label`,
+            `${prefix}-class-icon`,
+            `${prefix}-class-content`,
+            `${prefix}-class-border`,
+        ];
+        this.behaviors = ['wx://form-field'];
+        this.relations = {
+            '../checkbox-group/checkbox-group': {
+                type: 'ancestor',
+                linked(parent) {
+                    const { value, disabled } = parent.data;
+                    const valueSet = new Set(value);
+                    const data = {
+                        disabled: disabled || this.data.disabled,
+                    };
+                    data.checked = valueSet.has(this.data.value);
+                    if (this.data.checkAll) {
+                        data.checked = valueSet.size > 0;
+                    }
+                    this.setData(data);
+                },
+            },
+        };
+        this.options = {
+            multipleSlots: true,
+        };
+        this.properties = Object.assign(Object.assign({}, Props), { theme: {
+                type: String,
+                value: 'default',
+            }, borderless: {
+                type: Boolean,
+                value: false,
+            } });
+        this.data = {
+            prefix,
+            classPrefix,
+        };
+        this.controlledProps = [
+            {
+                key: 'checked',
+                event: 'change',
+            },
+        ];
+        this.methods = {
+            onChange(e) {
+                const { disabled, readonly } = this.data;
+                if (disabled || readonly)
+                    return;
+                const { target } = e.currentTarget.dataset;
+                const { contentDisabled } = this.data;
+                if (target === 'text' && contentDisabled) {
+                    return;
+                }
+                const checked = !this.data.checked;
+                const [parent] = this.getRelationNodes('../checkbox-group/checkbox-group');
+                if (parent) {
+                    parent.updateValue(Object.assign(Object.assign({}, this.data), { checked }));
+                }
+                else {
+                    this._trigger('change', { checked });
+                }
+            },
+        };
+    }
+};
+CheckBox = __decorate([
+    wxComponent()
+], CheckBox);
+export default CheckBox;
diff --git a/components/checkbox/checkbox.json b/components/checkbox/checkbox.json
new file mode 100644
index 0000000..049940c
--- /dev/null
+++ b/components/checkbox/checkbox.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "../icon/icon"
+  }
+}
diff --git a/components/checkbox/checkbox.wxml b/components/checkbox/checkbox.wxml
new file mode 100644
index 0000000..b176f3d
--- /dev/null
+++ b/components/checkbox/checkbox.wxml
@@ -0,0 +1,47 @@
+<view
+  class="{{classPrefix}} {{prefix}}-class {{classPrefix}}--{{align}} {{classPrefix}}--{{theme}} {{checked ? prefix + '-is-actived' : ''}}"
+>
+  <!-- icon -->
+  <view
+    wx:if="{{theme == 'default'}}"
+    class="{{classPrefix}}__icon-{{align}} {{prefix}}-class-icon"
+    data-target="icon"
+    bind:tap="onChange"
+  >
+    <block wx:if="{{icon.length > 0}}">
+      <view class="{{classPrefix}}__icon">
+        <image src="{{checked ? icon[0] : icon[1]}}" class="{{classPrefix}}__icon-image" webp />
+      </view>
+    </block>
+    <block wx:else>
+      <t-icon
+        color="{{checked && !disabled ? color : ''}}"
+        name="{{checked ? (indeterminate ? 'minus-circle-filled' : 'check-circle-filled') : 'circle'}}"
+        class="{{classPrefix}}__btn {{checked ? prefix + '-is-checked' : ''}} {{disabled ? prefix + '-is-disabled' : ''}}"
+      />
+    </block>
+  </view>
+  <!-- 文本内容 -->
+  <view
+    class="{{classPrefix}}__content {{disabled ? prefix + '-is-disabled' : ''}}"
+    data-target="text"
+    bind:tap="onChange"
+  >
+    <!-- title -->
+    <view class="{{classPrefix}}__title {{prefix}}-class-label" style="-webkit-line-clamp:{{maxLabelRow}}">
+      {{label}}
+      <slot />
+      <slot name="label" />
+    </view>
+    <!-- content -->
+    <view class="{{classPrefix}}__description {{prefix}}-class-content " style="-webkit-line-clamp:{{maxContentRow}}">
+      {{content}}
+      <slot name="content" />
+    </view>
+  </view>
+  <!-- 内置下边框 -->
+  <view
+    wx:if="{{theme == 'default' && !borderless}}"
+    class="{{classPrefix}}__border {{classPrefix}}__border--{{align}} {{prefix}}-class-border"
+  />
+</view>
diff --git a/components/checkbox/checkbox.wxss b/components/checkbox/checkbox.wxss
new file mode 100644
index 0000000..7537821
--- /dev/null
+++ b/components/checkbox/checkbox.wxss
@@ -0,0 +1,131 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+.t-checkbox {
+  display: flex;
+  flex-direction: row;
+  font-size: 32rpx;
+  position: relative;
+  background: white;
+}
+.t-checkbox--right {
+  flex-direction: row-reverse;
+}
+.t-checkbox .limit-title-row {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.t-checkbox .image-center {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.t-checkbox__icon-left {
+  margin-right: 20rpx;
+  width: 40rpx;
+}
+.t-checkbox__icon-right {
+  right: 0px;
+  display: contents;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.t-checkbox__icon-image {
+  width: 48rpx;
+  height: 48rpx;
+  vertical-align: sub;
+}
+.t-checkbox__icon {
+  line-height: 48rpx;
+}
+.t-checkbox__btn {
+  font-size: 48rpx;
+  display: block;
+  line-height: 40rpx;
+  color: #dcdcdc;
+  width: 48rpx;
+}
+.t-checkbox__content {
+  flex: 1;
+  line-height: 48rpx;
+  margin-right: 10px;
+}
+.t-checkbox__title {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.t-checkbox__description {
+  color: rgba(0, 0, 0, 0.4);
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-size: 28rpx;
+  line-height: 44rpx;
+}
+.t-checkbox__btn.t-is-checked {
+  color: #0052d9;
+}
+.t-checkbox__btn.t-is-disabled {
+  cursor: not-allowed;
+  color: #dcdcdc;
+}
+.t-checkbox__content.t-is-disabled {
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.26);
+}
+.t-checkbox__border {
+  position: absolute;
+  bottom: 0;
+  border-top: 1rpx solid #e7e7e7;
+  width: 100%;
+}
+.t-checkbox__border--left {
+  left: 80rpx;
+  width: calc(100% - 80rpx);
+}
+.t-checkbox__border--right {
+  right: 80rpx;
+  width: calc(100% - 80rpx);
+}
+.t-checkbox--tag {
+  font-size: 28rpx;
+  padding-top: 16rpx;
+  padding-bottom: 16rpx;
+  text-align: center;
+  background-color: #f3f3f3;
+  border-radius: 8rpx;
+}
+.t-checkbox--tag.t-is-actived {
+  color: #0052d9;
+  background-color: #ecf2fe;
+}
+.t-checkbox--tag .t-checkbox__content {
+  margin-right: 0;
+}
diff --git a/components/checkbox/props.d.ts b/components/checkbox/props.d.ts
new file mode 100644
index 0000000..81c619e
--- /dev/null
+++ b/components/checkbox/props.d.ts
@@ -0,0 +1,3 @@
+import { TdCheckboxProps } from './type';
+declare const props: TdCheckboxProps;
+export default props;
diff --git a/components/checkbox/props.js b/components/checkbox/props.js
new file mode 100644
index 0000000..21c1456
--- /dev/null
+++ b/components/checkbox/props.js
@@ -0,0 +1,66 @@
+const props = {
+    align: {
+        type: String,
+        value: 'left',
+    },
+    checkAll: {
+        type: Boolean,
+        value: false,
+    },
+    checked: {
+        type: Boolean,
+        value: null,
+    },
+    defaultChecked: {
+        type: Boolean,
+        value: false,
+    },
+    color: {
+        type: String,
+        value: '#0052d9',
+    },
+    content: {
+        type: String,
+    },
+    contentDisabled: {
+        type: Boolean,
+    },
+    disabled: {
+        type: Boolean,
+        value: undefined,
+    },
+    externalClasses: {
+        type: Array,
+    },
+    icon: {
+        type: Array,
+    },
+    indeterminate: {
+        type: Boolean,
+        value: false,
+    },
+    label: {
+        type: String,
+    },
+    maxContentRow: {
+        type: Number,
+        value: 5,
+    },
+    maxLabelRow: {
+        type: Number,
+        value: 3,
+    },
+    name: {
+        type: String,
+        value: '',
+    },
+    readonly: {
+        type: Boolean,
+        value: false,
+    },
+    value: {
+        type: String,
+        optionalTypes: [Number],
+    },
+};
+export default props;
diff --git a/components/checkbox/type.d.ts b/components/checkbox/type.d.ts
new file mode 100644
index 0000000..a165974
--- /dev/null
+++ b/components/checkbox/type.d.ts
@@ -0,0 +1,105 @@
+export interface TdCheckboxProps {
+    align?: {
+        type: StringConstructor;
+        value?: 'left' | 'right';
+    };
+    checkAll?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    checked?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    defaultChecked?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    color?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    content?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    contentDisabled?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    disabled?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border'];
+    };
+    icon?: {
+        type: ArrayConstructor;
+        value?: Array<string>;
+    };
+    indeterminate?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    label?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    maxContentRow?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    maxLabelRow?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    name?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    readonly?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    value?: {
+        type: StringConstructor;
+        optionalTypes: Array<NumberConstructor>;
+        value?: string | number;
+    };
+}
+export interface TdCheckboxGroupProps {
+    disabled?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    max?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    name?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    options?: {
+        type: ArrayConstructor;
+        value?: Array<CheckboxOption>;
+    };
+    value?: {
+        type: ArrayConstructor;
+        value?: CheckboxGroupValue;
+    };
+    defaultValue?: {
+        type: ArrayConstructor;
+        value?: CheckboxGroupValue;
+    };
+}
+export declare type CheckboxOption = string | number | CheckboxOptionObj;
+export interface CheckboxOptionObj {
+    label?: string;
+    value?: string | number;
+    disabled?: boolean;
+    checkAll?: true;
+}
+export declare type CheckboxGroupValue = Array<string | number>;
diff --git a/components/checkbox/type.js b/components/checkbox/type.js
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/components/checkbox/type.js
@@ -0,0 +1 @@
+export {};
diff --git a/components/grid/README.md b/components/grid/README.md
new file mode 100644
index 0000000..cdfbdb8
--- /dev/null
+++ b/components/grid/README.md
@@ -0,0 +1,82 @@
+---
+title: Grid 宫格
+description: 用于功能入口布局，将页面或特定区域切分成若干等大的区块，形成若干功能入口。
+spline: data
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-97%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-93%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-97%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-94%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-grid": "tdesign-miniprogram/grid/grid",
+  "t-grid-item": "tdesign-miniprogram/grid/grid-item"
+}
+```
+
+### 主题定制
+CSS 变量名|说明
+--|--
+--td-grid-bg-color | 宫格背景颜色
+--td-grid-item-text-color  | 宫格文本颜色
+--td-grid-item-description-color | 宫格描述信息文本颜色
+--td-grid-item-hover-bg-color | 开启点击反馈时宫格背景颜色
+
+## 代码演示
+
+### 一行三个带边框
+
+{{ border }}
+
+### 一行四个
+
+{{ four }}
+
+### 一行五个
+
+{{ five }}
+
+### 一行三个
+
+{{ three }}
+
+### 一行二个带说明
+
+{{ two-des }}
+
+### 一行三个带说明
+
+{{ three-des }}
+
+### 带徽标
+
+{{ badge }}
+
+
+## API
+
+### Grid Props
+
+| 名称             | 类型             | 默认值 | 说明                                                                                                | 必传                                              |
+| ---------------- | ---------------- | ------ | --------------------------------------------------------------------------------------------------- | ------------------------------------------------- |
+| align            | String           | center | 内容对齐方式。可选项：left/center                                                                   | N                                                 |
+| border           | Boolean / Object | false  | 边框，默认不显示。值为 true 则显示默认边框，值类型为 object 则表示自定义边框样式。TS 类型：`boolean | { color?: string; width?: string; style?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'inset' | 'outset' }` | N   |
+| column           | Number           | 4      | 每一行的列数量                                                                                      | N                                                 |
+| external-classes | Array            | -      | 组件类名，用于设置组件外层元素类名。`['t-class']`                                                   | N                                                 |
+| gutter           | Number           | -      | 间隔大小                                                                                            | N                                                 |
+| hover            | Boolean          | false  | 是否开启点击反馈                                                                                    | N                                                 |
+
+### GridItem Props
+
+| 名称             | 类型          | 默认值      | 说明                                                                                                                                  | 必传 |
+| ---------------- | ------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------- | ---- |
+| description      | String / Slot | -           | 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点                                                           | N    |
+| external-classes | Array         | -           | 组件类名，分别用于设置组件外层元素、图片、文本、描述等元素类名。`['t-class', 't-class-content', 't-class-image', 't-class-text', 't-class-description']` | N    |
+| image            | String / Slot | -           | 图片，可以是图片地址，也可以自定义图片节点                                                                                            | N    |
+| jump-type        | String        | navigate-to | 链接跳转类型。可选项：redirect-to/switch-tab/relaunch/navigate-to                                                                     | N    |
+| layout           | String        | vertical    | 内容布局方式。可选项：vertical/horizontal                                                                                             | N    |
+| text             | String / Slot | -           | 文本，可以通过 Props 传入文本，也可以自定义标题节点                                                                                   | N    |
+| url              | String        | -           | 点击后的跳转链接                                                                                                                      | N    |
diff --git a/components/grid/grid-item-props.d.ts b/components/grid/grid-item-props.d.ts
new file mode 100644
index 0000000..bd6c2fb
--- /dev/null
+++ b/components/grid/grid-item-props.d.ts
@@ -0,0 +1,3 @@
+import { TdGridItemProps } from './type';
+declare const props: TdGridItemProps;
+export default props;
diff --git a/components/grid/grid-item-props.js b/components/grid/grid-item-props.js
new file mode 100644
index 0000000..1cf1849
--- /dev/null
+++ b/components/grid/grid-item-props.js
@@ -0,0 +1,27 @@
+const props = {
+    description: {
+        type: String,
+    },
+    externalClasses: {
+        type: Array,
+    },
+    image: {
+        type: String,
+    },
+    jumpType: {
+        type: String,
+        value: 'navigate-to',
+    },
+    layout: {
+        type: String,
+        value: 'vertical',
+    },
+    text: {
+        type: String,
+    },
+    url: {
+        type: String,
+        value: '',
+    },
+};
+export default props;
diff --git a/components/grid/grid-item.d.ts b/components/grid/grid-item.d.ts
new file mode 100644
index 0000000..b22baf6
--- /dev/null
+++ b/components/grid/grid-item.d.ts
@@ -0,0 +1,24 @@
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+export default class GridItem extends SuperComponent {
+    externalClasses: string[];
+    options: {
+        multipleSlots: boolean;
+    };
+    relations: RelationsOptions;
+    properties: import("./type").TdGridItemProps;
+    data: {
+        prefix: string;
+        classPrefix: string;
+        gridItemStyle: string;
+        gridItemWrapperStyle: string;
+        gridItemContentStyle: string;
+        align: string;
+        layout: string;
+    };
+    updateStyle(): void;
+    getWidthStyle(): string;
+    getPaddingStyle(): string;
+    getBorderStyle(): string;
+    onClick(e: any): void;
+    jumpLink(): void;
+}
diff --git a/components/grid/grid-item.js b/components/grid/grid-item.js
new file mode 100644
index 0000000..0abeb68
--- /dev/null
+++ b/components/grid/grid-item.js
@@ -0,0 +1,111 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { SuperComponent, wxComponent, isObject } from '../common/src/index';
+import config from '../common/config';
+import props from './grid-item-props';
+const { prefix } = config;
+const name = `${prefix}-grid-item`;
+var LinkTypes;
+(function (LinkTypes) {
+    LinkTypes["redirect-to"] = "redirectTo";
+    LinkTypes["switch-tab"] = "switchTab";
+    LinkTypes["relaunch"] = "reLaunch";
+    LinkTypes["navigate-to"] = "navigateTo";
+})(LinkTypes || (LinkTypes = {}));
+let GridItem = class GridItem extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [
+            `${prefix}-class`,
+            `${prefix}-class-content`,
+            `${prefix}-class-image`,
+            `${prefix}-class-text`,
+            `${prefix}-class-description`,
+        ];
+        this.options = {
+            multipleSlots: true,
+        };
+        this.relations = {
+            './grid': {
+                type: 'ancestor',
+                linked(target) {
+                    this.parent = target;
+                    this.updateStyle();
+                },
+            },
+        };
+        this.properties = props;
+        this.data = {
+            prefix,
+            classPrefix: name,
+            gridItemStyle: '',
+            gridItemWrapperStyle: '',
+            gridItemContentStyle: '',
+            align: 'center',
+            layout: 'vertical',
+        };
+    }
+    updateStyle() {
+        const { hover, align } = this.parent.properties;
+        const gridItemStyles = [];
+        const gridItemWrapperStyles = [];
+        const gridItemContentStyles = [];
+        const widthStyle = this.getWidthStyle();
+        const paddingStyle = this.getPaddingStyle();
+        const borderStyle = this.getBorderStyle();
+        widthStyle && gridItemStyles.push(widthStyle);
+        paddingStyle && gridItemWrapperStyles.push(paddingStyle);
+        borderStyle && gridItemContentStyles.push(borderStyle);
+        this.setData({
+            gridItemStyle: gridItemStyles.join(';'),
+            gridItemWrapperStyle: gridItemWrapperStyles.join(';'),
+            gridItemContentStyle: gridItemContentStyles.join(';'),
+            hover,
+            layout: this.properties.layout,
+            align: align,
+        });
+    }
+    getWidthStyle() {
+        const { column } = this.parent.properties;
+        return `width:${(1 / column) * 100}%`;
+    }
+    getPaddingStyle() {
+        const { gutter } = this.parent.properties;
+        if (gutter)
+            return `padding-left:${gutter}rpx;padding-top:${gutter}rpx`;
+        return '';
+    }
+    getBorderStyle() {
+        const { gutter } = this.parent.properties;
+        let { border } = this.parent.properties;
+        if (!border)
+            return '';
+        if (!isObject(border))
+            border = {};
+        const { color = '#266FE8', width = 2, style = 'solid' } = border;
+        if (gutter)
+            return `border:${width}rpx ${style} ${color}`;
+        return `border-top:${width}rpx ${style} ${color};border-left:${width}rpx ${style} ${color}`;
+    }
+    onClick(e) {
+        const { item } = e.currentTarget.dataset;
+        this.triggerEvent('click', item);
+        this.jumpLink();
+    }
+    jumpLink() {
+        const { url, jumpType } = this.properties;
+        if (url && jumpType) {
+            if (LinkTypes[jumpType]) {
+                wx[LinkTypes[jumpType]]({ url });
+            }
+        }
+    }
+};
+GridItem = __decorate([
+    wxComponent()
+], GridItem);
+export default GridItem;
diff --git a/components/grid/grid-item.json b/components/grid/grid-item.json
new file mode 100644
index 0000000..f705aee
--- /dev/null
+++ b/components/grid/grid-item.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-image": "../image/image"
+  }
+}
diff --git a/components/grid/grid-item.wxml b/components/grid/grid-item.wxml
new file mode 100644
index 0000000..3a4db78
--- /dev/null
+++ b/components/grid/grid-item.wxml
@@ -0,0 +1,34 @@
+<view
+  class="{{classPrefix}} {{prefix}}-class"
+  style="{{ gridItemStyle }}"
+  hover-class="{{hover ? classPrefix + '--hover':''}}"
+  hover-stay-time="{{200}}"
+  bindtap="onClick"
+>
+  <view
+    class="{{classPrefix}}__wrapper {{layout==='horizontal' ? classPrefix + '--horizontal' : ''}}"
+    style="{{gridItemWrapperStyle}}"
+  >
+    <view
+      class="{{classPrefix}}__content {{classPrefix + '--' + (align === 'center' ? 'center' : 'left')}} {{prefix}}-class-content"
+      style="{{gridItemContentStyle}}"
+    >
+      <slot />
+      <view class="{{classPrefix}}__image {{prefix}}-class-image">
+        <t-image wx:if="{{image && image !== 'slot'}}" src="{{image}}" mode="widthFix" t-class="external-class" />
+        <slot wx:else name="image"></slot>
+      </view>
+      <view class="{{classPrefix}}__words">
+        <view wx:if="{{text && text !== 'slot'}}" class="{{classPrefix}}__text {{prefix}}-class-text"> {{text}} </view>
+        <slot wx:else name="text" class="{{prefix}}-class-text"></slot>
+        <view
+          wx:if="{{description && description!== 'slot'}}"
+          class="{{classPrefix}}__description {{prefix}}-class-description"
+        >
+          {{description}}
+        </view>
+        <slot wx:else name="description" class="{{prefix}}-class-description"></slot>
+      </view>
+    </view>
+  </view>
+</view>
diff --git a/components/grid/grid-item.wxss b/components/grid/grid-item.wxss
new file mode 100644
index 0000000..060268e
--- /dev/null
+++ b/components/grid/grid-item.wxss
@@ -0,0 +1,99 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+page {
+  --td-grid-item-bg-color: #ffffff;
+  --td-grid-item-text-color: rgba(0, 0, 0, 0.9);
+  --td-grid-item-description-color: rgba(0, 0, 0, 0.4);
+  --td-grid-item-hover-bg-color: #f2f3f5;
+}
+.t-grid-item {
+  box-sizing: border-box;
+  height: 100%;
+  float: left;
+}
+.t-grid-item--hover {
+  background-color: var(--td-grid-item-hover-bg-color);
+}
+.t-grid-item--horizontal .t-grid-item__content {
+  flex-direction: row;
+}
+.t-grid-item--horizontal .t-grid-item__text {
+  padding-top: 0;
+  padding-left: 24rpx;
+}
+.t-grid-item--horizontal .t-grid-item__description {
+  padding-top: 4rpx;
+  padding-left: 24rpx;
+}
+.t-grid-item__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+  position: relative;
+  padding: 24rpx 0;
+}
+.t-grid-item__words {
+  width: 100%;
+  text-align: center;
+  position: relative;
+  flex-direction: column;
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+}
+.t-grid-item__image:not(:empty) {
+  width: 96rpx;
+  height: 96rpx;
+}
+.t-grid-item__image:not(:empty) .external-class {
+  width: 100%;
+  height: 100%;
+}
+.t-grid-item--left {
+  justify-self: flex-start;
+  align-items: flex-start;
+}
+.t-grid-item--left .t-grid-item__words {
+  text-align: left;
+}
+.t-grid-item__text {
+  width: inherit;
+  color: var(--td-grid-item-text-color);
+  font-size: 28rpx;
+  line-height: 44rpx;
+  padding-top: 16rpx;
+}
+.t-grid-item__description {
+  width: inherit;
+  color: var(--td-grid-item-description-color);
+  font-size: 24rpx;
+  line-height: 40rpx;
+  padding-top: 8rpx;
+}
diff --git a/components/grid/grid.d.ts b/components/grid/grid.d.ts
new file mode 100644
index 0000000..086c695
--- /dev/null
+++ b/components/grid/grid.d.ts
@@ -0,0 +1,23 @@
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+export default class Grid extends SuperComponent {
+    externalClasses: string[];
+    relations: RelationsOptions;
+    properties: import("./type").TdGridProps;
+    data: {
+        classPrefix: string;
+        contentStyle: string;
+    };
+    observers: {
+        'column,hover,align'(): void;
+        'gutter,border'(): void;
+    };
+    lifetimes: {
+        attached(): void;
+        created(): void;
+    };
+    methods: {
+        doForChild(action: (item: WechatMiniprogram.Component.TrivialInstance) => void): void;
+        updateContentStyle(): void;
+        getContentMargin(): string;
+    };
+}
diff --git a/components/grid/grid.js b/components/grid/grid.js
new file mode 100644
index 0000000..131b3e7
--- /dev/null
+++ b/components/grid/grid.js
@@ -0,0 +1,73 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { isObject, SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+const { prefix } = config;
+const name = `${prefix}-grid`;
+let Grid = class Grid extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = ['t-class'];
+        this.relations = {
+            './grid-item': {
+                type: 'descendant',
+            },
+        };
+        this.properties = props;
+        this.data = {
+            classPrefix: name,
+            contentStyle: '',
+        };
+        this.observers = {
+            'column,hover,align'() {
+                this.updateContentStyle();
+            },
+            'gutter,border'() {
+                this.updateContentStyle();
+                this.doForChild((child) => child.updateStyle());
+            },
+        };
+        this.lifetimes = {
+            attached() {
+                this.updateContentStyle();
+            },
+            created() {
+                this.children = [];
+            },
+        };
+        this.methods = {
+            doForChild(action) {
+                var _a;
+                const children = (_a = this.getRelationNodes('./grid-item')) !== null && _a !== void 0 ? _a : [];
+                children.forEach(action);
+            },
+            updateContentStyle() {
+                const contentStyles = [];
+                const marginStyle = this.getContentMargin();
+                marginStyle && contentStyles.push(marginStyle);
+                this.setData({
+                    contentStyle: contentStyles.join(';'),
+                });
+            },
+            getContentMargin() {
+                const { gutter } = this.properties;
+                let { border } = this.properties;
+                if (!border)
+                    return `margin-left:-${gutter}rpx; margin-top:-${gutter}rpx`;
+                if (!isObject(border))
+                    border = {};
+                const { width = 2 } = border;
+                return `margin-left:-${width}rpx; margin-top:-${width}rpx`;
+            },
+        };
+    }
+};
+Grid = __decorate([
+    wxComponent()
+], Grid);
+export default Grid;
diff --git a/components/grid/grid.json b/components/grid/grid.json
new file mode 100644
index 0000000..a89ef4d
--- /dev/null
+++ b/components/grid/grid.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
diff --git a/components/grid/grid.wxml b/components/grid/grid.wxml
new file mode 100644
index 0000000..38923a1
--- /dev/null
+++ b/components/grid/grid.wxml
@@ -0,0 +1,5 @@
+<view class="{{classPrefix}} t-class">
+  <view class="{{classPrefix}}__content" style="{{ contentStyle }}">
+    <slot />
+  </view>
+</view>
diff --git a/components/grid/grid.wxss b/components/grid/grid.wxss
new file mode 100644
index 0000000..7484c76
--- /dev/null
+++ b/components/grid/grid.wxss
@@ -0,0 +1,38 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+page {
+  --td-grid-bg-color: #ffffff;
+}
+.t-grid {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--td-grid-bg-color);
+}
+.t-grid__content {
+  width: auto;
+}
diff --git a/components/grid/props.d.ts b/components/grid/props.d.ts
new file mode 100644
index 0000000..f8f2feb
--- /dev/null
+++ b/components/grid/props.d.ts
@@ -0,0 +1,3 @@
+import { TdGridProps } from './type';
+declare const props: TdGridProps;
+export default props;
diff --git a/components/grid/props.js b/components/grid/props.js
new file mode 100644
index 0000000..3f76964
--- /dev/null
+++ b/components/grid/props.js
@@ -0,0 +1,25 @@
+const props = {
+    align: {
+        type: String,
+        value: 'center',
+    },
+    border: {
+        type: null,
+        value: false,
+    },
+    column: {
+        type: Number,
+        value: 4,
+    },
+    externalClasses: {
+        type: Array,
+    },
+    gutter: {
+        type: Number,
+    },
+    hover: {
+        type: Boolean,
+        value: false,
+    },
+};
+export default props;
diff --git a/components/grid/type.d.ts b/components/grid/type.d.ts
new file mode 100644
index 0000000..bb4d250
--- /dev/null
+++ b/components/grid/type.d.ts
@@ -0,0 +1,73 @@
+export interface TdGridProps {
+    align?: {
+        type: StringConstructor;
+        value?: 'left' | 'center';
+        required?: boolean;
+    };
+    border?: {
+        type: null;
+        value?: boolean | {
+            color?: string;
+            width?: string;
+            style?: 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'inset' | 'outset';
+        };
+        required?: boolean;
+    };
+    column?: {
+        type: NumberConstructor;
+        value?: number;
+        required?: boolean;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class'];
+        required?: boolean;
+    };
+    gutter?: {
+        type: NumberConstructor;
+        value?: number;
+        required?: boolean;
+    };
+    hover?: {
+        type: BooleanConstructor;
+        value?: boolean;
+        required?: boolean;
+    };
+}
+export interface TdGridItemProps {
+    description?: {
+        type: StringConstructor;
+        value?: string;
+        required?: boolean;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class', 't-class-image', 't-class-text', 't-class-description'];
+        required?: boolean;
+    };
+    image?: {
+        type: StringConstructor;
+        value?: string;
+        required?: boolean;
+    };
+    jumpType?: {
+        type: StringConstructor;
+        value?: 'redirect-to' | 'switch-tab' | 'relaunch' | 'navigate-to';
+        required?: boolean;
+    };
+    layout?: {
+        type: StringConstructor;
+        value?: 'vertical' | 'horizontal';
+        required?: boolean;
+    };
+    text?: {
+        type: StringConstructor;
+        value?: string;
+        required?: boolean;
+    };
+    url?: {
+        type: StringConstructor;
+        value?: string;
+        required?: boolean;
+    };
+}
diff --git a/components/grid/type.js b/components/grid/type.js
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/components/grid/type.js
@@ -0,0 +1 @@
+export {};
diff --git a/components/image/README.md b/components/image/README.md
new file mode 100644
index 0000000..30c68e9
--- /dev/null
+++ b/components/image/README.md
@@ -0,0 +1,73 @@
+---
+title: Image 图片
+description: 用于展示效果，主要为上下左右居中裁切、拉伸、平铺等方式。
+spline: base
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+    "t-image": "tdesign-miniprogram/image/image"
+}
+```
+
+## 代码演示
+
+### 裁切样式
+{{ mode }}
+
+
+### 圆角样式
+
+{{ shape }}
+
+### 加载-默认提示
+
+{{ image-loading }}
+
+
+### 加载-自定义提示
+
+{{ custom-loading }}
+
+### 加载失败-默认提示
+
+{{ error-loading }}
+
+### 加载失败-自定义提示
+
+{{ custom-error-loading }}
+
+### 常用图片尺寸
+
+{{ size }}
+
+
+## API
+### Image Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+error | String / Slot | 'default' | 加载失败时显示的内容。值为 `default` 则表示使用默认加载失败风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `error`；值为其他则表示普通文本内容，如“加载失败” | N
+external-classes | Array | - | 组件类名，分别用于设置加载组件外层元素，中间内容等元素类名。`['t-class', 't-class-load']` | N
+lazy | Boolean | false | 是否开启图片懒加载 | N
+loading | String / Slot | 'default' | 加载态内容。值为 `default` 则表示使用默认加载中风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `loading`；值为其他则表示普通文本内容，如“加载中” | N
+shape | String | square | 图片圆角类型。可选项：circle/round/square | N
+src | String | - | 图片链接 | N
+mode | String | scaleToFill | 图片裁剪、缩放的模式。<br />具体释义：<br />`scaleToFill` 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素；<br />`aspectFit` 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。；<br />`aspectFill` 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。；<br />`widthFix` 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变；<br />`heightFix` 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变；<br />`top` 裁剪模式，不缩放图片，只显示图片的顶部区域；<br />`bottom` 裁剪模式，不缩放图片，只显示图片的底部区域；<br />`center` 裁剪模式，不缩放图片，只显示图片的中间区域；<br />`left` 裁剪模式，不缩放图片，只显示图片的左边区域；<br />`right` 裁剪模式，不缩放图片，只显示图片的右边区域；<br />`top left` 裁剪模式，不缩放图片，只显示图片的左上边区域；<br />`top right` 裁剪模式，不缩放图片，只显示图片的右上边区域；<br />`bottom left` 裁剪模式，不缩放图片，只显示图片的左下边区域；<br />`bottom right` 裁剪模式，不缩放图片，只显示图片的右下边区域。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/image.html)。可选项：scaleToFill/aspectFit/aspectFill/widthFix/heightFix/top/bottom/center/left/right/top left/top right/bottom left/bottom right | N
+webp | Boolean | false | 默认不解析 webP 格式，只支持网络资源 | N
+show-menu-by-longpress | Boolean | false | 长按图片显示发送给朋友、收藏、保存图片、搜一搜、打开名片/前往群聊/打开小程序（若图片中包含对应二维码或小程序码）的菜单。 | N
+binderror | Eventhandle | - | 当错误发生时触发，event.detail = {errMsg} | N
+bindload | Eventhandle | - | 当图片载入完毕时触发，event.detail = {height, width} | N
+
+### Image Events
+
+名称 | 参数 | 描述
+-- | -- | --
+error | - | 图片加载失败时触发
+load | - | 图片加载完成时触发
diff --git a/components/image/image-info.json b/components/image/image-info.json
new file mode 100644
index 0000000..7157c4c
--- /dev/null
+++ b/components/image/image-info.json
@@ -0,0 +1,75 @@
+{
+  "key": "Image",
+  "label": "图片",
+  "icon": "",
+  "properties": [
+    {
+      "key": "error",
+      "type": ["String", "TNode"],
+      "defaultValue": "'default'",
+      "desc": "加载失败时显示的内容。值为 `default` 则表示使用默认加载失败风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `error`；值为其他则表示普通文本内容，如“加载失败”",
+      "label": ""
+    },
+    {
+      "key": "externalClasses",
+      "type": ["Array"],
+      "defaultValue": "",
+      "desc": "组件类名，分别用于设置加载组件外层元素，中间内容等元素类名",
+      "label": ""
+    },
+    {
+      "key": "lazy",
+      "type": ["Boolean"],
+      "defaultValue": "false",
+      "desc": "是否开启图片懒加载",
+      "label": ""
+    },
+    {
+      "key": "loading",
+      "type": ["String", "TNode"],
+      "defaultValue": "'default'",
+      "desc": "加载态内容。值为 `default` 则表示使用默认加载中风格；值为空或者 `slot` 表示使用插槽渲染，插槽名称为 `loading`；值为其他则表示普通文本内容，如“加载中”",
+      "label": ""
+    },
+    {
+      "key": "MP_EXCLUDE_PROPS",
+      "type": ["String"],
+      "defaultValue": "",
+      "desc": "为避免重复或冲突，需要过滤掉的小程序原生属性",
+      "label": ""
+    },
+    {
+      "key": "MP_PROPS",
+      "type": ["String"],
+      "defaultValue": "",
+      "desc": "[小程序原生属性](https://developers.weixin.qq.com/miniprogram/dev/component/image.html)",
+      "label": ""
+    },
+    {
+      "key": "shape",
+      "type": ["String"],
+      "defaultValue": "square",
+      "desc": "图片圆角类型",
+      "label": ""
+    },
+    {
+      "key": "src",
+      "type": ["String"],
+      "defaultValue": "",
+      "desc": "图片链接",
+      "label": ""
+    }
+  ],
+  "events": [
+    {
+      "key": "error",
+      "desc": "图片加载失败时触发",
+      "label": ""
+    },
+    {
+      "key": "load",
+      "desc": "图片加载完成时触发",
+      "label": ""
+    }
+  ]
+}
diff --git a/components/image/image.d.ts b/components/image/image.d.ts
new file mode 100644
index 0000000..2f0e7c7
--- /dev/null
+++ b/components/image/image.d.ts
@@ -0,0 +1,27 @@
+import { SuperComponent } from '../common/src/index';
+export default class Image extends SuperComponent {
+    externalClasses: string[];
+    options: {
+        multipleSlots: boolean;
+    };
+    properties: import("./type").TdImageProps;
+    data: {
+        prefix: string;
+        isLoading: boolean;
+        isFailed: boolean;
+        widthStyle: string;
+        classPrefix: string;
+    };
+    preSrc: string;
+    lifetimes: {
+        attached(this: Image): void;
+    };
+    observers: {
+        src(): void;
+    };
+    methods: {
+        onLoaded(e: any): void;
+        onLoadError(e: any): void;
+        update(): void;
+    };
+}
diff --git a/components/image/image.js b/components/image/image.js
new file mode 100644
index 0000000..cbff261
--- /dev/null
+++ b/components/image/image.js
@@ -0,0 +1,92 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { SuperComponent, wxComponent } from '../common/src/index';
+import ImageProps from './props';
+import config from '../common/config';
+const { prefix } = config;
+const name = `${prefix}-image`;
+let Image = class Image extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = ['t-class', 't-class-load'];
+        this.options = {
+            multipleSlots: true,
+        };
+        this.properties = ImageProps;
+        this.data = {
+            prefix,
+            isLoading: true,
+            isFailed: false,
+            widthStyle: '',
+            classPrefix: name,
+        };
+        this.preSrc = '';
+        this.lifetimes = {
+            attached() {
+                this.update();
+            },
+        };
+        this.observers = {
+            src() {
+                if (this.preSrc === this.properties.src)
+                    return;
+                this.update();
+            },
+        };
+        this.methods = {
+            onLoaded(e) {
+                const sdkVersion = wx.getSystemInfoSync().SDKVersion;
+                const versionArray = sdkVersion.split('.').map((v) => parseInt(v, 10));
+                const { mode } = this.properties;
+                const isInCompatible = versionArray[0] < 2 ||
+                    (versionArray[0] === 2 && versionArray[1] < 10) ||
+                    (versionArray[0] === 2 && versionArray[1] === 10 && versionArray[2] < 3);
+                if (mode === 'heightFix' && isInCompatible) {
+                    const { height: picHeight, width: picWidth } = e.detail;
+                    const query = this.createSelectorQuery();
+                    query
+                        .select('#image')
+                        .boundingClientRect((res) => {
+                        const { height } = res;
+                        const resultWidth = ((height / picHeight) * picWidth).toFixed(2);
+                        this.setData({ widthStyle: `width: ${resultWidth}px;` });
+                    })
+                        .exec();
+                }
+                this.setData({
+                    isLoading: false,
+                    isFailed: false,
+                });
+                this.triggerEvent('load', e.detail);
+            },
+            onLoadError(e) {
+                this.setData({
+                    isLoading: false,
+                    isFailed: true,
+                });
+                this.triggerEvent('error', e.detail);
+            },
+            update() {
+                const { src } = this.properties;
+                this.preSrc = src;
+                if (!src) {
+                    this.onLoadError({ errMsg: '图片链接为空' });
+                }
+                else {
+                    this.setData({
+                        isLoading: true,
+                        isFailed: false,
+                    });
+                }
+            },
+        };
+    }
+};
+Image = __decorate([
+    wxComponent()
+], Image);
+export default Image;
diff --git a/components/image/image.json b/components/image/image.json
new file mode 100644
index 0000000..049940c
--- /dev/null
+++ b/components/image/image.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "../icon/icon"
+  }
+}
diff --git a/components/image/image.wxml b/components/image/image.wxml
new file mode 100644
index 0000000..075cc22
--- /dev/null
+++ b/components/image/image.wxml
@@ -0,0 +1,45 @@
+<!-- 加载中占位 -->
+<view
+  wx:if="{{isLoading}}"
+  class="{{prefix}}-class {{classPrefix}} {{classPrefix}}__mask {{classPrefix}}--loading {{classPrefix}}--shape-{{shape}}"
+>
+  <t-loading
+    wx:if="{{loading === 'default'}}"
+    theme="dots"
+    size="40rpx"
+    loading
+    class="t-class-load"
+    t-class-text="{{classPrefix}}--loading-text"
+  ></t-loading>
+  <view wx:elif="{{loading !== 'slot' && loading !== ''}}" class="{{classPrefix}}__common {{prefix}}-class-load">
+    {{loading}}
+  </view>
+  <slot wx:else name="loading" class="{{prefix}}-class-load" />
+</view>
+<!-- 加载失败占位 -->
+<view
+  wx:elif="{{isFailed}}"
+  class="{{prefix}}-class {{classPrefix}} {{classPrefix}}__mask {{classPrefix}}--faild {{classPrefix}}--shape-{{shape}}"
+>
+  <view wx:if="{{error === 'default'}}" style="font-size: 40rpx; color: #999" class="{{prefix}}-class-load">
+    <t-icon name="close" />
+  </view>
+  <view wx:elif="{{error !== 'slot' && error !== ''}}" class="{{classPrefix}}__common {{prefix}}-class-load">
+    {{error}}
+  </view>
+  <slot wx:else name="error" class="{{prefix}}-class-load"></slot>
+</view>
+<!-- 图片 -->
+<image
+  id="image"
+  hidden="{{isLoading || isFailed}}"
+  class="{{prefix}}-class {{classPrefix}} {{classPrefix}}--shape-{{shape}}"
+  src="{{src}}"
+  style="{{widthStyle}}"
+  mode="{{mode}}"
+  webp="{{webp}}"
+  lazy-load="{{lazy}}"
+  bind:load="onLoaded"
+  bind:error="onLoadError"
+  show-menu-by-longpress="{{showMenuByLongpress}}"
+/>
diff --git a/components/image/image.wxss b/components/image/image.wxss
new file mode 100644
index 0000000..83647d6
--- /dev/null
+++ b/components/image/image.wxss
@@ -0,0 +1,54 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+.t-image__mask {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f2f2f2;
+  color: #ccc;
+}
+.t-image--loading-text {
+  width: 0px;
+  height: 0px;
+}
+.t-image__common {
+  width: 100%;
+  height: 100%;
+}
+.t-image--shape-circle {
+  border-radius: 50%;
+  overflow: hidden;
+}
+.t-image--shape-round {
+  border-radius: 8rpx;
+  overflow: hidden;
+}
+.t-image--shape-square {
+  border-radius: 0;
+  overflow: hidden;
+}
diff --git a/components/image/index.d.ts b/components/image/index.d.ts
new file mode 100644
index 0000000..0f85c43
--- /dev/null
+++ b/components/image/index.d.ts
@@ -0,0 +1,4 @@
+import { TdImageProps } from './type';
+export declare type ImageProps = TdImageProps;
+export * from './props';
+export * from './image';
diff --git a/components/image/index.js b/components/image/index.js
new file mode 100644
index 0000000..4fd3953
--- /dev/null
+++ b/components/image/index.js
@@ -0,0 +1,2 @@
+export * from './props';
+export * from './image';
diff --git a/components/image/props.d.ts b/components/image/props.d.ts
new file mode 100644
index 0000000..0ab571b
--- /dev/null
+++ b/components/image/props.d.ts
@@ -0,0 +1,3 @@
+import { TdImageProps } from './type';
+declare const props: TdImageProps;
+export default props;
diff --git a/components/image/props.js b/components/image/props.js
new file mode 100644
index 0000000..9b6aecb
--- /dev/null
+++ b/components/image/props.js
@@ -0,0 +1,38 @@
+const props = {
+    error: {
+        type: String,
+        value: 'default',
+    },
+    externalClasses: {
+        type: Array,
+    },
+    lazy: {
+        type: Boolean,
+        value: false,
+    },
+    loading: {
+        type: String,
+        value: 'default',
+    },
+    shape: {
+        type: String,
+        value: 'square',
+    },
+    src: {
+        type: String,
+        value: '',
+    },
+    mode: {
+        type: String,
+        value: 'scaleToFill',
+    },
+    webp: {
+        type: Boolean,
+        value: false,
+    },
+    showMenuByLongpress: {
+        type: Boolean,
+        value: false,
+    },
+};
+export default props;
diff --git a/components/image/type.d.ts b/components/image/type.d.ts
new file mode 100644
index 0000000..4077208
--- /dev/null
+++ b/components/image/type.d.ts
@@ -0,0 +1,38 @@
+export interface TdImageProps {
+    error?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class', 't-class-load'];
+    };
+    lazy?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    loading?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    shape?: {
+        type: StringConstructor;
+        value?: 'circle' | 'round' | 'square';
+    };
+    src?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    mode?: {
+        type: StringConstructor;
+        value?: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom left' | 'bottom right';
+    };
+    webp?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    showMenuByLongpress?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+}
diff --git a/components/image/type.js b/components/image/type.js
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/components/image/type.js
@@ -0,0 +1 @@
+export {};
diff --git a/components/mixins/page-scroll.d.ts b/components/mixins/page-scroll.d.ts
new file mode 100644
index 0000000..efe4f63
--- /dev/null
+++ b/components/mixins/page-scroll.d.ts
@@ -0,0 +1,7 @@
+/// <reference types="miniprogram-api-typings" />
+/// <reference types="miniprogram-api-typings" />
+declare type IPageScrollOption = WechatMiniprogram.Page.IPageScrollOption;
+declare type Scroller = (this: WechatMiniprogram.Component.TrivialInstance, event?: IPageScrollOption) => void;
+export declare const pageScrollMixin: (scroller: Scroller) => string;
+export declare const getRect: (context: any, selector: string) => Promise<WechatMiniprogram.BoundingClientRectCallbackResult>;
+export {};
diff --git a/components/mixins/page-scroll.js b/components/mixins/page-scroll.js
new file mode 100644
index 0000000..2cf9fc4
--- /dev/null
+++ b/components/mixins/page-scroll.js
@@ -0,0 +1,50 @@
+const getCurrentPage = function () {
+    const pages = getCurrentPages();
+    return pages[pages.length - 1];
+};
+const onPageScroll = function (event) {
+    const page = getCurrentPage();
+    if (!page)
+        return;
+    const { pageScroller } = page;
+    pageScroller.forEach((scroller) => {
+        if (typeof scroller === 'function') {
+            scroller(event);
+        }
+    });
+};
+export const pageScrollMixin = (scroller) => {
+    let bindScroller = scroller;
+    return Behavior({
+        attached() {
+            const page = getCurrentPage();
+            if (!page)
+                return;
+            bindScroller = scroller.bind(this);
+            if (Array.isArray(page.pageScroller)) {
+                page.pageScroller.push(bindScroller);
+            }
+            else {
+                page.pageScroller =
+                    typeof page.onPageScroll === 'function' ? [page.onPageScroll.bind(page), bindScroller] : [bindScroller];
+            }
+            page.onPageScroll = onPageScroll;
+        },
+        detached() {
+            var _a;
+            const page = getCurrentPage();
+            if (!page)
+                return;
+            page.pageScroller = ((_a = page.pageScroller) === null || _a === void 0 ? void 0 : _a.filter((item) => item !== scroller)) || [];
+        },
+    });
+};
+export const getRect = function (context, selector) {
+    return new Promise((resolve) => {
+        wx.createSelectorQuery()
+            .in(context)
+            .select(selector)
+            .boundingClientRect()
+            .exec((rect = []) => resolve(rect[0]));
+    });
+};
diff --git a/components/mixins/transition.d.ts b/components/mixins/transition.d.ts
new file mode 100644
index 0000000..8c23e35
--- /dev/null
+++ b/components/mixins/transition.d.ts
@@ -0,0 +1 @@
+export default function transition(): string;
diff --git a/components/mixins/transition.js b/components/mixins/transition.js
new file mode 100644
index 0000000..ee5215a
--- /dev/null
+++ b/components/mixins/transition.js
@@ -0,0 +1,123 @@
+import config from '../common/config';
+const { prefix } = config;
+export default function transition() {
+    return Behavior({
+        properties: {
+            visible: {
+                type: Boolean,
+                value: null,
+                observer: 'watchVisible',
+            },
+            appear: Boolean,
+            name: {
+                type: String,
+                value: 'fade',
+            },
+            durations: {
+                type: Number,
+                optionalTypes: [Array],
+            },
+        },
+        data: {
+            transitionClass: '',
+            transitionDurations: 300,
+            className: '',
+            realVisible: false,
+        },
+        created() {
+            this.status = '';
+            this.transitionT = 0;
+        },
+        attached() {
+            this.durations = this.getDurations();
+            if (this.data.visible) {
+                this.enter();
+            }
+            this.inited = true;
+        },
+        detached() {
+            clearTimeout(this.transitionT);
+        },
+        methods: {
+            watchVisible(curr, prev) {
+                if (this.inited && curr !== prev) {
+                    curr ? this.enter() : this.leave();
+                }
+            },
+            getDurations() {
+                const { durations } = this.data;
+                if (Array.isArray(durations)) {
+                    return durations.map((item) => Number(item));
+                }
+                return [Number(durations), Number(durations)];
+            },
+            enter() {
+                const { name } = this.data;
+                const [duration] = this.durations;
+                this.status = 'entering';
+                this.setData({
+                    realVisible: true,
+                    transitionClass: `${prefix}-${name}-enter ${prefix}-${name}-enter-active`,
+                });
+                setTimeout(() => {
+                    this.setData({
+                        transitionClass: `${prefix}-${name}-enter-active ${prefix}-${name}-enter-to`,
+                    });
+                }, 30);
+                if (typeof duration === 'number' && duration > 0) {
+                    this.transitionT = setTimeout(this.entered.bind(this), duration + 30);
+                }
+            },
+            entered() {
+                this.customDuration = false;
+                clearTimeout(this.transitionT);
+                this.status = 'entered';
+                this.setData({
+                    transitionClass: '',
+                });
+            },
+            leave() {
+                const { name } = this.data;
+                const [, duration] = this.durations;
+                this.status = 'leaving';
+                this.setData({
+                    transitionClass: `${prefix}-${name}-leave  ${prefix}-${name}-leave-active`,
+                });
+                clearTimeout(this.transitionT);
+                setTimeout(() => {
+                    this.setData({
+                        transitionClass: `${prefix}-${name}-leave-active ${prefix}-${name}-leave-to`,
+                    });
+                }, 30);
+                if (typeof duration === 'number' && duration > 0) {
+                    this.customDuration = true;
+                    this.transitionT = setTimeout(this.leaved.bind(this), duration + 30);
+                }
+            },
+            leaved() {
+                this.customDuration = false;
+                this.triggerEvent('leaved');
+                clearTimeout(this.transitionT);
+                this.status = 'leaved';
+                this.setData({
+                    transitionClass: '',
+                });
+            },
+            onTransitionEnd() {
+                if (this.customDuration) {
+                    return;
+                }
+                clearTimeout(this.transitionT);
+                if (this.status === 'entering' && this.data.visible) {
+                    this.entered();
+                }
+                else if (this.status === 'leaving' && !this.data.visible) {
+                    this.leaved();
+                    this.setData({
+                        realVisible: false,
+                    });
+                }
+            },
+        },
+    });
+}
diff --git a/components/overlay/README.md b/components/overlay/README.md
new file mode 100644
index 0000000..f453f15
--- /dev/null
+++ b/components/overlay/README.md
@@ -0,0 +1,42 @@
+---
+title: Overlay 遮罩层
+description: 通过遮罩层，可以强调部分内容
+spline: message
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-overlay": "tdesign-miniprogram/overlay/overlay"
+}
+```
+
+## 代码演示
+
+### 基础使用
+
+{{ base }}
+
+## API
+
+### Overlay Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+visible | Boolean | false | 是否展示 | N
+zIndex | Number | 11000 | 遮罩层及 | N
+duration | Number | 300 | (暂不支持)背景色过渡时间，单位毫秒 | N
+backgroundColor | String | - | 遮罩层的背景色 | N
+preventScrollThrough | Boolean | true | 防止滚动穿透，即不允许点击和滚动 | N
+custom-style| String | '' | 自定义样式 | N
+
+### Overlay Events
+
+名称 | 参数 | 描述
+-- | -- | --
+click | `({ visible: boolean })` | 点击遮罩时触发
\ No newline at end of file
diff --git a/components/overlay/overlay.d.ts b/components/overlay/overlay.d.ts
new file mode 100644
index 0000000..6e55833
--- /dev/null
+++ b/components/overlay/overlay.d.ts
@@ -0,0 +1,40 @@
+import { SuperComponent } from '../common/src/index';
+export default class Overlay extends SuperComponent {
+    properties: {
+        zIndex: {
+            type: NumberConstructor;
+            value: number;
+        };
+        duration: {
+            type: NumberConstructor;
+            value: number;
+        };
+        backgroundColor: {
+            type: StringConstructor;
+            value: string;
+        };
+        preventScrollThrough: {
+            type: BooleanConstructor;
+            value: boolean;
+        };
+        customStyle: {
+            type: StringConstructor;
+            value: string;
+        };
+    };
+    behaviors: string[];
+    data: {
+        prefix: string;
+        classPrefix: string;
+        computedStyle: string;
+        _zIndex: number;
+    };
+    observers: {
+        backgroundColor(v: any): void;
+        zIndex(v: any): void;
+    };
+    methods: {
+        handleClick(): void;
+        noop(): void;
+    };
+}
diff --git a/components/overlay/overlay.js b/components/overlay/overlay.js
new file mode 100644
index 0000000..cdfb430
--- /dev/null
+++ b/components/overlay/overlay.js
@@ -0,0 +1,69 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import transition from '../mixins/transition';
+const { prefix } = config;
+const name = `${prefix}-overlay`;
+let Overlay = class Overlay extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.properties = {
+            zIndex: {
+                type: Number,
+                value: 11000,
+            },
+            duration: {
+                type: Number,
+                value: 300,
+            },
+            backgroundColor: {
+                type: String,
+                value: '',
+            },
+            preventScrollThrough: {
+                type: Boolean,
+                value: true,
+            },
+            customStyle: {
+                type: String,
+                value: '',
+            },
+        };
+        this.behaviors = [transition()];
+        this.data = {
+            prefix,
+            classPrefix: name,
+            computedStyle: '',
+            _zIndex: 11000,
+        };
+        this.observers = {
+            backgroundColor(v) {
+                this.setData({
+                    computedStyle: `background-color: ${v};`,
+                });
+            },
+            zIndex(v) {
+                if (v !== 0) {
+                    this.setData({
+                        _zIndex: v,
+                    });
+                }
+            },
+        };
+        this.methods = {
+            handleClick() {
+                this.triggerEvent('click', { visible: !this.properties.visible });
+            },
+            noop() { },
+        };
+    }
+};
+Overlay = __decorate([
+    wxComponent()
+], Overlay);
+export default Overlay;
diff --git a/components/overlay/overlay.json b/components/overlay/overlay.json
new file mode 100644
index 0000000..467ce29
--- /dev/null
+++ b/components/overlay/overlay.json
@@ -0,0 +1,3 @@
+{
+  "component": true
+}
diff --git a/components/overlay/overlay.wxml b/components/overlay/overlay.wxml
new file mode 100644
index 0000000..01ef58f
--- /dev/null
+++ b/components/overlay/overlay.wxml
@@ -0,0 +1,19 @@
+<view
+  wx:if="{{realVisible && preventScrollThrough}}"
+  class="{{prefix}}-overlay {{transitionClass}}"
+  style="z-index: {{_zIndex}}; {{computedStyle}} {{customStyle}}"
+  bind:tap="handleClick"
+  catchtouchmove="noop"
+  bind:transitionend="onTransitionEnd"
+>
+  <slot />
+</view>
+<view
+  wx:elif="{{realVisible}}"
+  class="{{prefix}}-overlay {{transitionClass}}"
+  style="z-index: {{_zIndex}}; {{computedStyle}} {{customStyle}}"
+  bind:tap="handleClick"
+  bind:transitionend="onTransitionEnd"
+>
+  <slot />
+</view>
diff --git a/components/overlay/overlay.wxss b/components/overlay/overlay.wxss
new file mode 100644
index 0000000..c21f139
--- /dev/null
+++ b/components/overlay/overlay.wxss
@@ -0,0 +1,42 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+.t-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  transition: opacity 300ms ease;
+}
+.t-fade-enter {
+  opacity: 0;
+}
+.t-fade-leave-to {
+  opacity: 0;
+}
diff --git a/components/popup/README.md b/components/popup/README.md
new file mode 100644
index 0000000..535233d
--- /dev/null
+++ b/components/popup/README.md
@@ -0,0 +1,47 @@
+---
+title: Popup 弹出层
+description: 由其他控件触发，屏幕滑出或弹出一块自定义内容区域。
+spline: message
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-popup": "tdesign-miniprogram/popup/popup"
+}
+```
+
+## 代码演示
+
+### 顶部弹出层
+
+{{ top }}
+
+## API
+### Popup Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+close-btn | Boolean / Slot | - | 关闭按钮，值类型为 Boolean 时表示是否显示关闭按钮。也可以自定义关闭按钮 | N
+close-on-overlay-click | Boolean | true | 点击遮罩层是否关闭 | N
+content | String / Slot | - | 浮层里面的内容 | N
+custom-style | String | '' | 弹出层的自定义样式 | N
+external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、遮罩层、浮层内容 等元素类名。`['t-class', 't-class-overlay', 't-class-content']` | N
+overlay-props | Object | {} | 遮罩层的属性，透传至 overlay | N
+placement | String | top | 浮层出现位置。可选项：top/left/right/bottom/center | N
+prevent-scroll-through | Boolean | true | 防止滚动穿透 | N
+show-overlay | Boolean | true | 是否显示遮罩层 | N
+visible | Boolean | false | 是否显示浮层。TS 类型：`boolean` | N
+z-index | Number | - | 组件层级，Web 侧样式默认为 5500，移动端和小程序样式默认为 11500 | N
+duration | Number | 240 | 动画过渡时间 | N
+
+### Popup Events
+
+名称 | 参数 | 描述
+-- | -- | --
+visible-change | `(visible: boolean, trigger: PopupSource) ` | 当浮层隐藏或显示时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/popup/type.ts)。<br/>`type PopupSource = 'close-btn' | 'overlay'`<br/>
diff --git a/components/popup/popup.d.ts b/components/popup/popup.d.ts
new file mode 100644
index 0000000..a1e77ee
--- /dev/null
+++ b/components/popup/popup.d.ts
@@ -0,0 +1,24 @@
+import { TdPopupProps } from './type';
+import { SuperComponent } from '../common/src/index';
+export declare type PopupProps = TdPopupProps;
+export default class Popup extends SuperComponent {
+    externalClasses: string[];
+    behaviors: string[];
+    options: {
+        multipleSlots: boolean;
+    };
+    properties: TdPopupProps;
+    data: {
+        prefix: string;
+        classPrefix: string;
+        className: string;
+    };
+    lifetimes: {
+        attached(): void;
+    };
+    methods: {
+        setClass(): void;
+        handleOverlayClick(): void;
+        handleClose(): void;
+    };
+}
diff --git a/components/popup/popup.js b/components/popup/popup.js
new file mode 100644
index 0000000..e911c36
--- /dev/null
+++ b/components/popup/popup.js
@@ -0,0 +1,59 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+import { classNames } from '../common/utils';
+import transition from '../mixins/transition';
+delete props.visible;
+const { prefix } = config;
+const name = `${prefix}-popup`;
+let Popup = class Popup extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = ['t-class', 't-class-content'];
+        this.behaviors = [transition()];
+        this.options = {
+            multipleSlots: true,
+        };
+        this.properties = props;
+        this.data = {
+            prefix,
+            classPrefix: name,
+            className: name,
+        };
+        this.lifetimes = {
+            attached() {
+                this.setClass();
+            },
+        };
+        this.methods = {
+            setClass() {
+                const { placement, showOverlay } = this.properties;
+                const className = classNames(name, `${name}--${placement}`, {
+                    [`${name}--overlay-transparent`]: !showOverlay,
+                });
+                this.setData({
+                    className,
+                });
+            },
+            handleOverlayClick() {
+                const { closeOnOverlayClick } = this.properties;
+                if (closeOnOverlayClick) {
+                    this.triggerEvent('visible-change', { visible: false });
+                }
+            },
+            handleClose() {
+                this.triggerEvent('visible-change', { visible: false });
+            },
+        };
+    }
+};
+Popup = __decorate([
+    wxComponent()
+], Popup);
+export default Popup;
diff --git a/components/popup/popup.json b/components/popup/popup.json
new file mode 100644
index 0000000..870a7b6
--- /dev/null
+++ b/components/popup/popup.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-overlay": "../overlay/overlay",
+    "t-icon": "../icon/icon"
+  }
+}
diff --git a/components/popup/popup.wxml b/components/popup/popup.wxml
new file mode 100644
index 0000000..e08db54
--- /dev/null
+++ b/components/popup/popup.wxml
@@ -0,0 +1,25 @@
+<view
+  wx:if="{{realVisible}}"
+  style="{{customStyle + ';z-index:' + zIndex + ';'}}"
+  class="{{className}} {{transitionClass}} {{prefix}}-class"
+  bind:transitionend="onTransitionEnd"
+>
+  <view class="{{classPrefix}}__content {{prefix}}-class-content">
+    <view class="{{classPrefix}}__close" bind:tap="handleClose">
+      <t-icon name="close" wx:if="{{closeBtn}}" size="64rpx" />
+      <slot name="closeBtn" class="{{classPrefix}}-slot" />
+    </view>
+    <slot name="content" />
+    <slot />
+  </view>
+</view>
+
+<t-overlay
+  id="popup-overlay"
+  wx:if="{{showOverlay}}"
+  visible="{{visible}}"
+  z-index="{{overlayProps.zIndex}}"
+  prevent-scroll-through="{{preventScrollThrough || overlayProps.preventScrollThrough}}"
+  bind:tap="handleOverlayClick"
+  custom-style="{{overlayProps.customStyle || ''}}"
+/>
diff --git a/components/popup/popup.wxss b/components/popup/popup.wxss
new file mode 100644
index 0000000..425dfe4
--- /dev/null
+++ b/components/popup/popup.wxss
@@ -0,0 +1,99 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+.t-popup {
+  position: fixed;
+  z-index: 11500;
+  max-height: 100vh;
+  transition: all 300ms ease;
+}
+.t-popup__content {
+  position: relative;
+  z-index: 1;
+}
+.t-popup__close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 20rpx;
+  line-height: 1;
+}
+.t-popup--overlay-transparent .t-popup__overlay {
+  background-color: rgba(0, 0, 0, 0);
+}
+.t-popup--top {
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.t-popup--bottom {
+  bottom: 0;
+  left: 0;
+  width: 100vw;
+}
+.t-popup--left {
+  top: 0;
+  left: 0;
+  height: 100vh;
+}
+.t-popup--right {
+  top: 0;
+  right: 0;
+  height: 100vh;
+}
+.t-popup--center {
+  top: 50%;
+  left: 50%;
+  transform: scale(1) translate3d(-50%, -50%, 0);
+  transform-origin: 0% 0%;
+}
+.t-popup.t-fade-enter.t-popup--top,
+.t-popup.t-fade-leave-to.t-popup--top {
+  transform: translateY(-100%);
+}
+.t-popup.t-fade-enter.t-popup--bottom,
+.t-popup.t-fade-leave-to.t-popup--bottom {
+  transform: translateY(100%);
+}
+.t-popup.t-fade-enter.t-popup--left,
+.t-popup.t-fade-leave-to.t-popup--left {
+  transform: translateX(-100%);
+}
+.t-popup.t-fade-enter.t-popup--right,
+.t-popup.t-fade-leave-to.t-popup--right {
+  transform: translateX(100%);
+}
+.t-popup.t-fade-enter.t-popup--center,
+.t-popup.t-fade-leave-to.t-popup--center {
+  transform: scale(0.6) translate3d(-50%, -50%, 0);
+  opacity: 0;
+}
+.t-popup.t-dialog-enter.t-popup--center,
+.t-popup.t-dialog-leave-to.t-popup--center {
+  transform: scale(0.6) translate3d(-50%, -50%, 0);
+  opacity: 0;
+}
diff --git a/components/popup/props.d.ts b/components/popup/props.d.ts
new file mode 100644
index 0000000..e23cd6c
--- /dev/null
+++ b/components/popup/props.d.ts
@@ -0,0 +1,3 @@
+import { TdPopupProps } from './type';
+declare const props: TdPopupProps;
+export default props;
diff --git a/components/popup/props.js b/components/popup/props.js
new file mode 100644
index 0000000..b04f0cc
--- /dev/null
+++ b/components/popup/props.js
@@ -0,0 +1,47 @@
+const props = {
+    closeBtn: {
+        type: Boolean,
+    },
+    closeOnOverlayClick: {
+        type: Boolean,
+        value: true,
+    },
+    content: {
+        type: String,
+    },
+    customStyle: {
+        type: String,
+        value: '',
+    },
+    externalClasses: {
+        type: Array,
+    },
+    overlayProps: {
+        type: Object,
+        value: {},
+    },
+    placement: {
+        type: String,
+        value: 'top',
+    },
+    preventScrollThrough: {
+        type: Boolean,
+        value: true,
+    },
+    showOverlay: {
+        type: Boolean,
+        value: true,
+    },
+    transitionProps: {
+        type: Object,
+    },
+    visible: {
+        type: Boolean,
+        value: null,
+    },
+    zIndex: {
+        type: Number,
+        value: 11500,
+    },
+};
+export default props;
diff --git a/components/popup/type.d.ts b/components/popup/type.d.ts
new file mode 100644
index 0000000..393e6ed
--- /dev/null
+++ b/components/popup/type.d.ts
@@ -0,0 +1,54 @@
+import { TdTransitionProps } from '../transition/index';
+export interface TdPopupProps {
+    closeBtn?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    closeOnOverlayClick?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    content?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    customStyle?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class', 't-class-overlay', 't-class-content'];
+    };
+    overlayProps?: {
+        type: ObjectConstructor;
+        value?: object;
+    };
+    placement?: {
+        type: StringConstructor;
+        value?: 'top' | 'left' | 'right' | 'bottom' | 'center';
+    };
+    preventScrollThrough?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    showOverlay?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    transitionProps?: {
+        type: ObjectConstructor;
+        value?: TdTransitionProps;
+    };
+    visible?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    zIndex?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+}
+export interface PopupVisibleChangeContext {
+    trigger: 'close-btn' | 'overlay';
+}
diff --git a/components/popup/type.js b/components/popup/type.js
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/components/popup/type.js
@@ -0,0 +1 @@
+export {};
diff --git a/components/swiper/README.md b/components/swiper/README.md
new file mode 100644
index 0000000..1a2d99d
--- /dev/null
+++ b/components/swiper/README.md
@@ -0,0 +1,92 @@
+---
+title: Swiper 轮播图
+description: 用于循环轮播一组图片或内容，也可以滑动进行切换，轮播动效时间可以设置。
+spline: message
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-95%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-94%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-95%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-90%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-swiper": "tdesign-miniprogram/swiper/swiper",
+  "t-swiper-item": "tdesign-miniprogram/swiper/swiper-item",
+  "t-swiper-nav": "tdesign-miniprogram/swiper/swiper-nav",
+}
+```
+
+### 组件说明
+
+swiper 必须配合 swiper-item 使用，swiper-item 作为轮播条目组件，宽高默认 100%。
+
+
+### 主题定制
+CSS 变量名|说明
+--|--
+--td-swiper-nav-dot-color | 点状导航器颜色
+--td-swiper-nav-dot-active-color | 点状导航器激活态颜色
+--td-swiper-nav-fraction-color | 分式导航器颜色
+--td-swiper-nav-fraction-bg-color | 分式导航器背景颜色
+--td-swiper-nav-btn-color | 按钮导航器颜色
+--td-swiper-nav-btn-bg-color | 按钮导航器背景颜色
+
+
+## 代码演示
+
+多种轮播样式，通过 `navigation` 设置导航样式，没有值则不显示，也可以自定义 `nav` 组件
+
+<img src="https://tdesign.gtimg.com/miniprogram/readme/swiper.gif" width="375px" height="50%">
+
+
+### 点状(dots)轮播图
+{{ base }}
+
+### 分式(fraction)导航器轮播图
+
+{{ fraction }}
+
+### 插槽自定义导航器轮播图
+
+{{ custom }}
+
+### 按钮导航器轮播图
+
+{{ nav-btn }}
+
+### 轮播图垂直样式
+
+{{ vertical }}
+
+## API
+### Swiper Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+animation | String | slide | 轮播切换动画效果类型。可选项：slide | N
+autoplay | Boolean | true | 是否自动播放 | N
+current | Number | 0 | 当前轮播在哪一项（下标） | N
+default-current | Number | undefined | 当前轮播在哪一项（下标）。非受控属性 | N
+direction | String | horizontal | 轮播滑动方向，包括横向滑动和纵向滑动两个方向。可选项：horizontal/vertical | N
+duration | Number | 300 | 滑动动画时长 | N
+height | Number | - | 当使用垂直方向滚动时的高度 | N
+interval | Number | 5000 | 轮播间隔时间 | N
+loop | Boolean | true | 【开发中】是否循环播放 | N
+navigation | Object / Slot | - | 导航器全部配置 | N
+pagination-position | String | bottom-right | 页码信息展示位置。可选项：top-left/top/top-right/bottom-left/bottom/bottom-right | N
+
+### Swiper Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(current: number, source: SwiperChangeSource)` | 轮播切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts)。<br/>`type SwiperChangeSource = 'autoplay' | 'touch' | ''`<br/>
+
+### SwiperNavigation
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+min-show-num | Number | - | 小于这个数字不会显示导航器 | N
+show-slide-btn | Boolean | - | 表示是否显示两侧的滑动控制按钮 | N
+type | String | - | 导航器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等。TS 类型：`SwiperNavigationType` `type SwiperNavigationType = 'dots' | 'dots-bar' | 'fraction'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swiper/type.ts) | N
diff --git a/components/swiper/common/constants.d.ts b/components/swiper/common/constants.d.ts
new file mode 100644
index 0000000..e46a4e4
--- /dev/null
+++ b/components/swiper/common/constants.d.ts
@@ -0,0 +1,11 @@
+declare const DIRECTION: {
+    HOR: string;
+    VER: string;
+};
+declare const enum NavTypes {
+    none = "",
+    dots = "dots",
+    dotsBar = "dots-bar",
+    fraction = "fraction"
+}
+export { DIRECTION, NavTypes };
diff --git a/components/swiper/common/constants.js b/components/swiper/common/constants.js
new file mode 100644
index 0000000..2fc73d7
--- /dev/null
+++ b/components/swiper/common/constants.js
@@ -0,0 +1,5 @@
+const DIRECTION = {
+    HOR: 'horizontal',
+    VER: 'vertical',
+};
+export { DIRECTION };
diff --git a/components/swiper/props.d.ts b/components/swiper/props.d.ts
new file mode 100644
index 0000000..399c9af
--- /dev/null
+++ b/components/swiper/props.d.ts
@@ -0,0 +1,3 @@
+import { TdSwiperProps } from './type';
+declare const props: TdSwiperProps;
+export default props;
diff --git a/components/swiper/props.js b/components/swiper/props.js
new file mode 100644
index 0000000..b050642
--- /dev/null
+++ b/components/swiper/props.js
@@ -0,0 +1,45 @@
+const props = {
+    animation: {
+        type: String,
+        value: 'slide',
+    },
+    autoplay: {
+        type: Boolean,
+        value: true,
+    },
+    current: {
+        type: Number,
+        value: null,
+    },
+    defaultCurrent: {
+        type: Number,
+        value: 0,
+    },
+    direction: {
+        type: String,
+        value: 'horizontal',
+    },
+    duration: {
+        type: Number,
+        value: 300,
+    },
+    height: {
+        type: Number,
+    },
+    interval: {
+        type: Number,
+        value: 5000,
+    },
+    loop: {
+        type: Boolean,
+        value: true,
+    },
+    navigation: {
+        type: Object,
+    },
+    paginationPosition: {
+        type: String,
+        value: 'bottom',
+    },
+};
+export default props;
diff --git a/components/swiper/swiper-item.d.ts b/components/swiper/swiper-item.d.ts
new file mode 100644
index 0000000..64a51f9
--- /dev/null
+++ b/components/swiper/swiper-item.d.ts
@@ -0,0 +1,10 @@
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+export default class SwiperItem extends SuperComponent {
+    relations: RelationsOptions;
+    data: {
+        index: number;
+        classPrefix: string;
+        translate: string;
+    };
+    setIndex(index: number, direction: string): void;
+}
diff --git a/components/swiper/swiper-item.js b/components/swiper/swiper-item.js
new file mode 100644
index 0000000..c82279a
--- /dev/null
+++ b/components/swiper/swiper-item.js
@@ -0,0 +1,37 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { SuperComponent, wxComponent } from '../common/src/index';
+import { DIRECTION } from './common/constants';
+import config from '../common/config';
+const { prefix } = config;
+let SwiperItem = class SwiperItem extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.relations = {
+            './swiper': {
+                type: 'parent',
+            },
+        };
+        this.data = {
+            index: 0,
+            classPrefix: `${prefix}-swiper-item`,
+            translate: '',
+        };
+    }
+    setIndex(index, direction) {
+        const translate = direction === DIRECTION.HOR ? `translate(${100 * index}%, 0px)` : `translate(0px, ${100 * index}%)`;
+        this.setData({
+            index,
+            direction,
+            translate,
+        });
+    }
+};
+SwiperItem = __decorate([
+    wxComponent()
+], SwiperItem);
+export default SwiperItem;
diff --git a/components/swiper/swiper-item.json b/components/swiper/swiper-item.json
new file mode 100644
index 0000000..467ce29
--- /dev/null
+++ b/components/swiper/swiper-item.json
@@ -0,0 +1,3 @@
+{
+  "component": true
+}
diff --git a/components/swiper/swiper-item.wxml b/components/swiper/swiper-item.wxml
new file mode 100644
index 0000000..8ed99f4
--- /dev/null
+++ b/components/swiper/swiper-item.wxml
@@ -0,0 +1,3 @@
+<view class="{{classPrefix}}" style="transform: {{translate}} translateZ(0px);">
+  <slot />
+</view>
diff --git a/components/swiper/swiper-item.wxss b/components/swiper/swiper-item.wxss
new file mode 100644
index 0000000..73d23d3
--- /dev/null
+++ b/components/swiper/swiper-item.wxss
@@ -0,0 +1,33 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+.t-swiper-item {
+  position: absolute;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
diff --git a/components/swiper/swiper-nav.d.ts b/components/swiper/swiper-nav.d.ts
new file mode 100644
index 0000000..2d42c3b
--- /dev/null
+++ b/components/swiper/swiper-nav.d.ts
@@ -0,0 +1,37 @@
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+import { NavTypes } from './common/constants';
+declare type NavOptions = {
+    index: number;
+    total: number;
+    direction: boolean;
+    paginationPosition: string;
+};
+export default class SwiperNav extends SuperComponent {
+    externalClasses: string[];
+    properties: {
+        type: {
+            type: StringConstructor;
+            value: NavTypes;
+        };
+        minShowNum: {
+            type: NumberConstructor;
+            value: number;
+        };
+        hasNavBtn: {
+            type: BooleanConstructor;
+            value: boolean;
+        };
+    };
+    relations: RelationsOptions;
+    data: {
+        index: number;
+        total: number;
+        direction: string;
+        prefix: string;
+        classPrefix: string;
+    };
+    ready(): void;
+    onChange(opt: NavOptions): void;
+    nav(e: any): void;
+}
+export {};
diff --git a/components/swiper/swiper-nav.js b/components/swiper/swiper-nav.js
new file mode 100644
index 0000000..e8d0aae
--- /dev/null
+++ b/components/swiper/swiper-nav.js
@@ -0,0 +1,63 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import { DIRECTION } from './common/constants';
+const { prefix } = config;
+let SwiperNav = class SwiperNav extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [`${prefix}-class`];
+        this.properties = {
+            type: {
+                type: String,
+                value: "dots",
+            },
+            minShowNum: {
+                type: Number,
+                value: 2,
+            },
+            hasNavBtn: {
+                type: Boolean,
+                value: false,
+            },
+        };
+        this.relations = {
+            './swiper': {
+                type: 'parent',
+            },
+        };
+        this.data = {
+            index: 0,
+            total: 0,
+            direction: DIRECTION.HOR,
+            prefix,
+            classPrefix: `${prefix}-swiper-nav`,
+        };
+    }
+    ready() {
+        var _a;
+        this.$swiper = (_a = this.getRelationNodes('./swiper')) === null || _a === void 0 ? void 0 : _a[0];
+    }
+    onChange(opt) {
+        this.setData(Object.assign({}, opt));
+    }
+    nav(e) {
+        var _a, _b;
+        const { dir } = e.target.dataset;
+        const opt = { source: 'nav', cycle: true };
+        this.triggerEvent('navBtnChange', Object.assign(Object.assign({}, opt), { dir }));
+        if (this.$swiper) {
+            (_a = this.$swiper) === null || _a === void 0 ? void 0 : _a.pause();
+            (_b = this.$swiper) === null || _b === void 0 ? void 0 : _b[dir](opt);
+        }
+    }
+};
+SwiperNav = __decorate([
+    wxComponent()
+], SwiperNav);
+export default SwiperNav;
diff --git a/components/swiper/swiper-nav.json b/components/swiper/swiper-nav.json
new file mode 100644
index 0000000..467ce29
--- /dev/null
+++ b/components/swiper/swiper-nav.json
@@ -0,0 +1,3 @@
+{
+  "component": true
+}
diff --git a/components/swiper/swiper-nav.wxml b/components/swiper/swiper-nav.wxml
new file mode 100644
index 0000000..810e34f
--- /dev/null
+++ b/components/swiper/swiper-nav.wxml
@@ -0,0 +1,18 @@
+<view
+  class="{{prefix}}-class {{classPrefix}} {{classPrefix}}--{{direction}} {{classPrefix}}--position-{{paginationPosition}}"
+  wx:if="{{total >= minShowNum}}"
+>
+  <view wx:if="{{ type === 'dots' || type === 'dots-bar'}}" class="{{classPrefix}}__{{type}}">
+    <view
+      wx:for="{{total}}"
+      wx:for-index="idx"
+      wx:key="idx"
+      class="{{classPrefix}}__{{type}}-item {{index === idx ? prefix + '-is-active' : ''}}"
+    />
+  </view>
+  <view wx:if="{{ type === 'fraction'}}" class="{{classPrefix}}__fraction"> {{index+1}}/{{total}} </view>
+  <view wx:if="{{hasNavBtn}}" class="{{classPrefix}}__btn">
+    <view class="{{classPrefix}}__btn--prev" bind:tap="nav" data-dir="prev" />
+    <view class="{{classPrefix}}__btn--next" bind:tap="nav" data-dir="next" />
+  </view>
+</view>
diff --git a/components/swiper/swiper-nav.wxss b/components/swiper/swiper-nav.wxss
new file mode 100644
index 0000000..514c677
--- /dev/null
+++ b/components/swiper/swiper-nav.wxss
@@ -0,0 +1,178 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+page {
+  --td-swiper-nav-dot-color: rgba(255, 255, 255, 0.55);
+  --td-swiper-nav-dot-active-color: #fff;
+  --td-swiper-nav-fraction-color: #fff;
+  --td-swiper-nav-fraction-bg-color: rgba(0, 0, 0, 0.4);
+  --td-swiper-nav-btn-color: #fff;
+  --td-swiper-nav-btn-bg-color: rgba(0, 0, 0, 0.4);
+}
+.t-swiper-nav__dots,
+.t-swiper-nav__dots-bar {
+  display: flex;
+  flex-direction: row;
+}
+.t-swiper-nav__dots-item,
+.t-swiper-nav__dots-bar-item {
+  width: 12rpx;
+  height: 12rpx;
+  background: var(--td-swiper-nav-dot-color, rgba(255, 255, 255, 0.55));
+  border-radius: 50%;
+  margin: 0 10rpx;
+  transition: all 0.4s ease-in;
+}
+.t-swiper-nav__dots-item.t-is-active,
+.t-swiper-nav__dots-bar-item.t-is-active {
+  background-color: var(--td-swiper-nav-dot-active-color, #fff);
+}
+.t-swiper-nav__dots-bar-item.t-is-active {
+  width: 40rpx;
+  border-radius: 6rpx;
+  background-color: var(--td-swiper-nav-dot-active-color, #fff);
+}
+.t-swiper-nav--position-left .t-swiper-nav__dots,
+.t-swiper-nav--position-left .t-swiper-nav__dots-bar,
+.t-swiper-nav--position-left .t-swiper-nav__fraction {
+  position: absolute;
+  left: 24rpx;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.t-swiper-nav--position-right .t-swiper-nav__dots,
+.t-swiper-nav--position-right .t-swiper-nav__dots-bar,
+.t-swiper-nav--position-right .t-swiper-nav__fraction {
+  position: absolute;
+  right: 24rpx;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.t-swiper-nav--position-top-left .t-swiper-nav__dots,
+.t-swiper-nav--position-top-left .t-swiper-nav__dots-bar,
+.t-swiper-nav--position-top-left .t-swiper-nav__fraction {
+  position: absolute;
+  top: 24rpx;
+  left: 24rpx;
+}
+.t-swiper-nav--position-top .t-swiper-nav__dots,
+.t-swiper-nav--position-top .t-swiper-nav__dots-bar,
+.t-swiper-nav--position-top .t-swiper-nav__fraction {
+  position: absolute;
+  left: 50%;
+  top: 24rpx;
+  transform: translateX(-50%);
+}
+.t-swiper-nav--position-top-right .t-swiper-nav__dots,
+.t-swiper-nav--position-top-right .t-swiper-nav__dots-bar,
+.t-swiper-nav--position-top-right .t-swiper-nav__fraction {
+  position: absolute;
+  top: 24rpx;
+  right: 24rpx;
+}
+.t-swiper-nav--position-bottom-left .t-swiper-nav__dots,
+.t-swiper-nav--position-bottom-left .t-swiper-nav__dots-bar,
+.t-swiper-nav--position-bottom-left .t-swiper-nav__fraction {
+  position: absolute;
+  left: 24rpx;
+  bottom: 24rpx;
+}
+.t-swiper-nav--position-bottom .t-swiper-nav__dots,
+.t-swiper-nav--position-bottom .t-swiper-nav__dots-bar,
+.t-swiper-nav--position-bottom .t-swiper-nav__fraction {
+  position: absolute;
+  left: 50%;
+  bottom: 24rpx;
+  transform: translateX(-50%);
+}
+.t-swiper-nav--position-bottom-right .t-swiper-nav__dots,
+.t-swiper-nav--position-bottom-right .t-swiper-nav__dots-bar,
+.t-swiper-nav--position-bottom-right .t-swiper-nav__fraction {
+  position: absolute;
+  right: 24rpx;
+  bottom: 24rpx;
+}
+.t-swiper-nav--vertical .t-swiper-nav__dots,
+.t-swiper-nav--vertical .t-swiper-nav__dots-bar {
+  flex-direction: column;
+}
+.t-swiper-nav--vertical .t-swiper-nav__dots-item,
+.t-swiper-nav--vertical .t-swiper-nav__dots-bar-item {
+  margin: 10rpx 0;
+}
+.t-swiper-nav--vertical .t-swiper-nav__dots-bar-item.t-is-active {
+  width: 12rpx;
+  height: 40rpx;
+}
+.t-swiper-nav__fraction {
+  width: 40rpx;
+  padding: 0 20rpx;
+  height: 40rpx;
+  line-height: 40rpx;
+  border-radius: 20rpx;
+  background: var(--td-swiper-nav-fraction-bg-color, rgba(0, 0, 0, 0.4));
+  color: var(--td-swiper-nav-fraction-color, #fff);
+  font-size: 24rpx;
+}
+.t-swiper-nav__btn--prev,
+.t-swiper-nav__btn--next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+  background: var(--td-swiper-nav-btn-bg-color, rgba(0, 0, 0, 0.4));
+}
+.t-swiper-nav__btn--prev::after,
+.t-swiper-nav__btn--next::after {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  display: block;
+  content: '';
+  width: 12rpx;
+  height: 12rpx;
+  border-color: var(--td-swiper-nav-btn-color, #fff);
+  border-style: solid;
+}
+.t-swiper-nav__btn--prev {
+  left: 30rpx;
+}
+.t-swiper-nav__btn--prev::after {
+  margin-left: 4rpx;
+  border-width: 2rpx 0 0 2rpx;
+  transform: translate(-50%, -50%) rotateZ(-45deg);
+}
+.t-swiper-nav__btn--next {
+  right: 30rpx;
+}
+.t-swiper-nav__btn--next::after {
+  margin-left: -4rpx;
+  border-width: 2rpx 2rpx 0 0;
+  transform: translate(-50%, -50%) rotateZ(45deg);
+}
diff --git a/components/swiper/swiper.d.ts b/components/swiper/swiper.d.ts
new file mode 100644
index 0000000..1849357
--- /dev/null
+++ b/components/swiper/swiper.d.ts
@@ -0,0 +1,71 @@
+import { SuperComponent, ControlInstance, RelationsOptions } from '../common/src/index';
+interface SwitchOpt {
+    cycle?: boolean;
+    source: 'autoplay' | 'touch' | 'nav';
+}
+export default class Swiper extends SuperComponent {
+    externalClasses: string[];
+    options: {
+        multipleSlots: boolean;
+    };
+    properties: import("./type").TdSwiperProps;
+    observers: {
+        navigation(val: any): void;
+        current(val: any): void;
+        autoplay(val: any): void;
+        interval(val: any): void;
+        direction(val: any): void;
+    };
+    children: any;
+    $nav: any;
+    timer: any;
+    updateTimer: any;
+    control: ControlInstance;
+    relations: RelationsOptions;
+    data: {
+        _current: number;
+        _navigation: any;
+        _width: number;
+        _height: number;
+        offsetX: number;
+        offsetY: number;
+        total: number;
+        easings: {
+            linear: string;
+            easeInCubic: string;
+            easeOutCubic: string;
+            easeInOutCubic: string;
+        };
+        inited: boolean;
+        currentInited: boolean;
+        prefix: string;
+        classPrefix: string;
+    };
+    attached(): void;
+    detached(): void;
+    ready(): void;
+    methods: {
+        init(): void;
+    };
+    initItem(): void;
+    initNav(): void;
+    inited(): void;
+    initCurrent(): void;
+    play(): void;
+    replay(): void;
+    pause(): void;
+    goto(index: number, source: string): void;
+    update(index: number, finish?: any): void;
+    updateNav(index: any): void;
+    calcOffset(index: number): {
+        offsetX: number;
+        offsetY?: undefined;
+    } | {
+        offsetY: number;
+        offsetX?: undefined;
+    };
+    next(opt: SwitchOpt): void;
+    prev(opt: SwitchOpt): void;
+    onSwiperNavBtnChange(e: any): void;
+}
+export {};
diff --git a/components/swiper/swiper.js b/components/swiper/swiper.js
new file mode 100644
index 0000000..38d63f2
--- /dev/null
+++ b/components/swiper/swiper.js
@@ -0,0 +1,280 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { SuperComponent, wxComponent, useControl } from '../common/src/index';
+import config from '../common/config';
+import { DIRECTION } from './common/constants';
+import props from './props';
+const { prefix } = config;
+const easings = {
+    linear: 'linear',
+    easeInCubic: 'cubic-bezier(0.32, 0, 0.67, 0)',
+    easeOutCubic: 'cubic-bezier(0.33, 1, 0.68, 1)',
+    easeInOutCubic: 'cubic-bezier(0.65, 0, 0.35, 1)',
+};
+const defaultNavigation = {
+    type: "dots",
+    minShowNum: 2,
+    hasNavBtn: false,
+};
+let Swiper = class Swiper extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [`${prefix}-class`];
+        this.options = {
+            multipleSlots: true,
+        };
+        this.properties = props;
+        this.observers = {
+            navigation(val) {
+                this.setData({
+                    _navigation: Object.assign(Object.assign({}, defaultNavigation), val),
+                });
+            },
+            current(val) {
+                this.update(+val);
+            },
+            autoplay(val) {
+                if (val) {
+                    this.play();
+                }
+                else {
+                    this.pause();
+                }
+            },
+            interval(val) {
+                if (this._old_interval && this._old_interval !== val) {
+                    this.replay();
+                }
+                this._old_interval = val;
+            },
+            direction(val) {
+                if (this._old_direction && this._old_direction !== val) {
+                    this.initItem();
+                }
+                this._old_direction = val;
+            },
+        };
+        this.children = null;
+        this.$nav = null;
+        this.timer = null;
+        this.updateTimer = null;
+        this.control = null;
+        this.relations = {
+            './swiper-item': {
+                type: 'child',
+                linked: function () {
+                    clearTimeout(this.updateTimer);
+                    this.updateTimer = setTimeout(() => {
+                        this.initItem();
+                        this.updateNav(this.control.get());
+                    });
+                },
+                unlinked: function () {
+                    this.initItem();
+                    this.update(0);
+                },
+            },
+            './swiper-nav': {
+                type: 'child',
+            },
+        };
+        this.data = {
+            _current: 0,
+            _navigation: null,
+            _width: 0,
+            _height: 0,
+            offsetX: 0,
+            offsetY: 0,
+            total: 0,
+            easings,
+            inited: false,
+            currentInited: false,
+            prefix,
+            classPrefix: `${prefix}-swiper`,
+        };
+        this.methods = {
+            init() {
+                if (this.hasInited)
+                    return;
+                wx.createSelectorQuery()
+                    .in(this)
+                    .select('#swiper')
+                    .boundingClientRect((rect) => {
+                    if (rect.width === 0)
+                        return;
+                    this.hasInited = true;
+                    this.setData({
+                        _width: rect.width,
+                        _height: rect.height,
+                    });
+                    this.initItem();
+                    this.initNav();
+                    this.initCurrent();
+                })
+                    .exec();
+            },
+        };
+    }
+    attached() {
+        this.control = useControl.call(this, {
+            valueKey: 'current',
+            strict: false,
+        });
+    }
+    detached() {
+        this.pause();
+    }
+    ready() {
+        this.init();
+    }
+    initItem() {
+        const { direction } = this.properties;
+        this.children = this.getRelationNodes('./swiper-item');
+        this.children.forEach((item, index) => {
+            item.setIndex(index, direction);
+        });
+        this.setData({
+            total: this.children.length,
+        });
+    }
+    initNav() {
+        var _a;
+        const { _navigation } = this.data;
+        if (_navigation) {
+            this.$nav = this.selectComponent('#swiperNav');
+        }
+        else {
+            this.$nav = (_a = this.getRelationNodes('./swiper-nav')) === null || _a === void 0 ? void 0 : _a[0];
+        }
+    }
+    inited() {
+        this.updateNav(this.control.get());
+        this.setData({
+            inited: true,
+        });
+    }
+    initCurrent() {
+        let index = +this.control.initValue;
+        index = Math.min(index, this.children.length - 1);
+        index = Math.max(index, 0);
+        this.control.set(index, Object.assign({ currentInited: true, inited: index === 0 }, this.calcOffset(index)));
+    }
+    play() {
+        this.pause();
+        const { interval } = this.properties;
+        this.timer = setInterval(() => {
+            const { inited } = this.data;
+            if (!inited)
+                return;
+            this.next({ cycle: true, source: 'autoplay' });
+        }, interval);
+    }
+    replay() {
+        const { autoplay } = this.properties;
+        autoplay && this.play();
+    }
+    pause() {
+        this.timer && clearInterval(this.timer);
+        this.timer = null;
+    }
+    goto(index, source) {
+        if (this.control.get() === index) {
+            this.update(index);
+            return;
+        }
+        this.control.change(index, {
+            current: index,
+            source,
+        }, () => {
+            this.update(index);
+        });
+    }
+    update(index, finish) {
+        if (!this.children)
+            return;
+        const len = this.children.length;
+        let fixIndex = +index;
+        if (Number.isNaN(fixIndex))
+            return;
+        if (fixIndex <= 0) {
+            fixIndex = 0;
+        }
+        else if (fixIndex > len - 1) {
+            fixIndex = len - 1;
+        }
+        this.updateNav(fixIndex);
+        this.control.set(fixIndex, this.calcOffset(fixIndex), finish);
+    }
+    updateNav(index) {
+        var _a;
+        if (!this.$nav)
+            return;
+        const { direction, paginationPosition } = this.properties;
+        (_a = this.$nav) === null || _a === void 0 ? void 0 : _a.onChange({
+            index,
+            total: this.children.length,
+            direction,
+            paginationPosition,
+        });
+    }
+    calcOffset(index) {
+        const { direction } = this.properties;
+        const { _width, _height } = this.data;
+        if (direction === DIRECTION.HOR) {
+            return {
+                offsetX: -index * _width,
+            };
+        }
+        return {
+            offsetY: -index * _height,
+        };
+    }
+    next(opt) {
+        const innerVal = this.control.get();
+        const len = this.children.length;
+        let nextIndex = innerVal;
+        if (opt.cycle && innerVal === len - 1) {
+            nextIndex = 0;
+        }
+        else if (len - 1 > innerVal) {
+            nextIndex += 1;
+        }
+        this.goto(nextIndex, opt.source);
+    }
+    prev(opt) {
+        const innerVal = this.control.get();
+        const len = this.children.length;
+        let nextIndex = innerVal;
+        if (opt.cycle && innerVal === 0) {
+            nextIndex = len - 1;
+        }
+        else if (nextIndex > 0) {
+            nextIndex -= 1;
+        }
+        this.goto(nextIndex, opt.source);
+    }
+    onSwiperNavBtnChange(e) {
+        const _a = e.detail, { dir } = _a, rest = __rest(_a, ["dir"]);
+        this.pause();
+        this === null || this === void 0 ? void 0 : this[dir](rest);
+    }
+};
+Swiper = __decorate([
+    wxComponent()
+], Swiper);
+export default Swiper;
diff --git a/components/swiper/swiper.json b/components/swiper/swiper.json
new file mode 100644
index 0000000..b409944
--- /dev/null
+++ b/components/swiper/swiper.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-swiper-item": "./swiper-item",
+    "t-swiper-nav": "./swiper-nav"
+  }
+}
diff --git a/components/swiper/swiper.wxml b/components/swiper/swiper.wxml
new file mode 100644
index 0000000..558403f
--- /dev/null
+++ b/components/swiper/swiper.wxml
@@ -0,0 +1,43 @@
+<wxs src="./swiper.wxs" module="swiper" />
+<!-- 支持传入height指定容器高度，单位rpx -->
+<view
+  id="swiper"
+  class="{{prefix}}-class {{classPrefix}}"
+  style="{{height?'height:'+height+'rpx':''}}"
+>
+  <view
+    id="swiperContainer"
+    class="{{classPrefix}}__container {{inited? '{{prefix}}-in-animation' : '{{prefix}}-is-hidden'}}"
+    style="transition-duration: {{duration/1000}}s;transition-timing-function:{{easings.linear}};"
+    bindtouchstart="{{swiper.startDrag}}"
+    capture-catch:touchmove="{{swiper.onDrag}}"
+    bindtouchend="{{swiper.endDrag}}"
+    bindtouchcancel="{{swiper.endDrag}}"
+    offsetX="{{offsetX}}"
+    offsetY="{{offsetY}}"
+    width="{{_width}}"
+    height="{{_height}}"
+    direction="{{direction}}"
+    total="{{total}}"
+    currentInited="{{currentInited}}"
+    change:offsetX="{{swiper.changeOffsetX}}"
+    change:offsetY="{{swiper.changeOffsetY}}"
+    change:width="{{swiper.changeWidth}}"
+    change:height="{{swiper.changeHeight}}"
+    change:direction="{{swiper.changeDirection}}"
+    change:total="{{swiper.changeTotal}}"
+    change:currentInited="{{swiper.changeCurrentInited}}"
+  >
+    <slot />
+  </view>
+  <t-swiper-nav
+    id="swiperNav"
+    wx:if="{{_navigation}}"
+    type="{{_navigation.type}}"
+    minShowNum="{{_navigation.minShowNum}}"
+    hasNavBtn="{{_navigation.hasNavBtn}}"
+    bind:navBtnChange="onSwiperNavBtnChange"
+  />
+  <!-- 同时支持插槽组合 -->
+  <slot name="nav" />
+</view>
diff --git a/components/swiper/swiper.wxs b/components/swiper/swiper.wxs
new file mode 100644
index 0000000..c54c8e4
--- /dev/null
+++ b/components/swiper/swiper.wxs
@@ -0,0 +1,184 @@
+/**
+ * 轮播触屏脚本
+ */
+// 轮播容器ID
+var containerId = '#swiperContainer';
+// 移动阈值
+var moveThreshold = 0.3;
+// 轮播方向
+var DIRECTION = {
+  // 水平
+  HOR: 'horizontal',
+  // 垂直
+  VER: 'vertical',
+};
+
+function updateMoveInfo(state, event) {
+  var touchPoint = event.touches[0];
+  state.moveX = touchPoint.clientX - state.startX;
+  state.moveY = touchPoint.clientY - state.startY;
+}
+
+function moveContainer(state, reset) {
+  if (state.direction === DIRECTION.HOR) {
+    var offset = reset ? state.offsetX : state.offsetX + state.moveX;
+    // console.log(DIRECTION.HOR, state.moveX);
+    if (offset > 0) {
+      offset = Math.min(state.width * moveThreshold, offset);
+    } else {
+      offset = Math.max(-state.width * (state.total - (1 - moveThreshold)), offset);
+    }
+    setOffset(state, offset, 0, !reset);
+  } else {
+    var offset = reset ? state.offsetY : state.offsetY + state.moveY;
+    // console.log(DIRECTION.VER, state.moveY);
+    if (offset > 0) {
+      offset = Math.min(state.height * moveThreshold, offset);
+    } else {
+      offset = Math.max(-state.height * (state.total - (1 - moveThreshold)), offset);
+    }
+    setOffset(state, 0, offset, !reset);
+  }
+}
+
+function setOffset(state, offsetX, offsetY, disAni) {
+  var transform = 'translate3d(' + (offsetX || 0) + 'px, ' + (offsetY || 0) + 'px, 0)';
+  var styles = {
+    // '-webkit-transform': transform,
+    transform: transform,
+  };
+  if (disAni) {
+    styles['transition'] = 'none';
+  }
+  state.container.setStyle(styles);
+}
+
+function initContainer(ownerInstance) {
+  var state = ownerInstance.getState();
+  state.container = state.container || ownerInstance.selectComponent(containerId);
+}
+
+function startDrag(event, ownerInstance) {
+  initContainer(ownerInstance);
+  var state = ownerInstance.getState();
+  var touchPoint = event.touches[0];
+  state.moveX = 0;
+  state.moveY = 0;
+  state.startX = touchPoint.clientX;
+  state.startY = touchPoint.clientY;
+  ownerInstance.callMethod('pause');
+}
+
+function onDrag(event, ownerInstance) {
+  var state = ownerInstance.getState();
+  state.dragging = true;
+  updateMoveInfo(state, event);
+  moveContainer(state);
+}
+
+function endDrag(event, ownerInstance) {
+  var state = ownerInstance.getState();
+  state.dragging = false;
+  ownerInstance.callMethod('replay');
+  var pageDir = '';
+  if (state.direction === DIRECTION.HOR) {
+    pageDir = getPageDir(state.moveX, state.width);
+  } else {
+    pageDir = getPageDir(state.moveY, state.height);
+  }
+  if (pageDir) {
+    ownerInstance.callMethod(pageDir, { source: 'touch' });
+    return;
+  }
+  // 重置
+  moveContainer(state, true);
+}
+/**
+ * 返回分页操作的方向
+ * @param move 移动距离
+ * @param size 容器尺寸
+ * @returns
+ */
+function getPageDir(move, size) {
+  if (move > 0) {
+    // 右滑超过阈值
+    if (move > size * moveThreshold) {
+      return 'prev';
+    }
+  } else {
+    // 左滑超过阈值
+    if (-move > size * moveThreshold) {
+      return 'next';
+    }
+  }
+}
+
+function changeOffsetByDirection(direction, newVal, ownerInstance) {
+  initContainer(ownerInstance);
+  var state = ownerInstance.getState();
+  if (state.direction !== direction) return;
+  var needInit = !state.inited && state.currentInited;
+  if (direction === DIRECTION.HOR) {
+    setOffset(state, state.offsetX, 0, needInit);
+  } else {
+    setOffset(state, 0, state.offsetY, needInit);
+  }
+
+  if (needInit) {
+    state.inited = true;
+    ownerInstance.callMethod('inited');
+  }
+}
+
+function changeOffsetX(newVal, oldVal, ownerInstance) {
+  var state = ownerInstance.getState();
+  state.offsetX = newVal;
+  changeOffsetByDirection(DIRECTION.HOR, newVal, ownerInstance);
+}
+
+function changeOffsetY(newVal, oldVal, ownerInstance) {
+  var state = ownerInstance.getState();
+  state.offsetY = newVal;
+  changeOffsetByDirection(DIRECTION.VER, newVal, ownerInstance);
+}
+function changeWidth(newVal, oldVal, ownerInstance) {
+  var state = ownerInstance.getState();
+  state.width = newVal;
+}
+
+function changeHeight(newVal, oldVal, ownerInstance) {
+  var state = ownerInstance.getState();
+  state.height = newVal;
+}
+
+function changeDirection(newVal, oldVal, ownerInstance) {
+  var state = ownerInstance.getState();
+  state.direction = newVal;
+  if (oldVal && newVal !== oldVal) {
+    state.inited = false;
+    changeOffsetByDirection(newVal, state.offsetY, ownerInstance);
+  }
+}
+
+function changeTotal(newVal, oldVal, ownerInstance) {
+  var state = ownerInstance.getState();
+  state.total = newVal;
+}
+
+function changeCurrentInited(newVal, oldVal, ownerInstance) {
+  var state = ownerInstance.getState();
+  state.currentInited = newVal;
+}
+
+module.exports = {
+  startDrag: startDrag,
+  onDrag: onDrag,
+  endDrag: endDrag,
+  changeOffsetX: changeOffsetX,
+  changeOffsetY: changeOffsetY,
+  changeWidth: changeWidth,
+  changeHeight: changeHeight,
+  changeDirection: changeDirection,
+  changeTotal: changeTotal,
+  changeCurrentInited: changeCurrentInited,
+};
diff --git a/components/swiper/swiper.wxss b/components/swiper/swiper.wxss
new file mode 100644
index 0000000..25d894e
--- /dev/null
+++ b/components/swiper/swiper.wxss
@@ -0,0 +1,44 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+.t-swiper {
+  position: relative;
+  overflow: hidden;
+  height: 300rpx;
+}
+.t-swiper__container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.t-swiper__container.t-in-animation {
+  transition-property: transform;
+}
+.t-swiper__container.t-is-hidden {
+  visibility: hidden;
+  transition-property: none;
+}
diff --git a/components/swiper/type.d.ts b/components/swiper/type.d.ts
new file mode 100644
index 0000000..87f7ac5
--- /dev/null
+++ b/components/swiper/type.d.ts
@@ -0,0 +1,52 @@
+export interface TdSwiperProps {
+    animation?: {
+        type: StringConstructor;
+        value?: 'slide';
+    };
+    autoplay?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    current?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    defaultCurrent?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    direction?: {
+        type: StringConstructor;
+        value?: 'horizontal' | 'vertical';
+    };
+    duration?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    height?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    interval?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    loop?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    navigation?: {
+        type: ObjectConstructor;
+        value?: SwiperNavigation;
+    };
+    paginationPosition?: {
+        type: StringConstructor;
+        value?: 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right';
+    };
+}
+export interface SwiperNavigation {
+    minShowNum?: number;
+    showSlideBtn?: boolean;
+    type?: SwiperNavigationType;
+}
+export declare type SwiperNavigationType = 'dots' | 'dots-bar' | 'fraction';
diff --git a/components/swiper/type.js b/components/swiper/type.js
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/components/swiper/type.js
@@ -0,0 +1 @@
+export {};
diff --git a/pages/today/index.js b/pages/today/index.js
index 5bcc527..96878c5 100644
--- a/pages/today/index.js
+++ b/pages/today/index.js
@@ -1,5 +1,6 @@
 // pages/today/index.js
 const app = getApp();
+import ActionSheet, { ActionSheetTheme } from '../../components/action-sheet/index';
 let pageStart = 1;
 Page({
 
@@ -10,20 +11,20 @@ Page({
         aIconList: ['check-rectangle', 'star-filled', 'notification', 'info-circle'],
         taskList: [{'taskId':'1','title':'标题德外旗舰店1','note':'2022-11-11'},{'taskId':'2','title':'标题德外旗舰店2','note':'2022-11-11'}],
         todayList: [{'taskId':'1','title':'标题德外旗舰店1','note':'2022-11-11'},{'taskId':'2','title':'标题德外旗舰店2','note':'2022-11-11'}],
-        delayList: [{'taskId':'1','title':'si哦大家艾吉奥是我','note':'2022-11-11'},
-            {'taskId':'2','title':'si哦大家艾吉奥是2321','note':'2022-11-11'},
-            {'taskId':'3','title':'打SD卡我怕','note':'2022-11-11'},
-            {'taskId':'4','title':'标无间道i文件舰店1','note':'2022-11-11'},
-            {'taskId':'5','title':'标题大家啊我i家1','note':'2022-11-11'},
-            {'taskId':'6','title':'标题德外而我却','note':'2022-11-11'},
-            {'taskId':'7','title':'标题德外旗额我去问1','note':'2022-11-11'},
-            {'taskId':'8','title':'千而万请问确定德外旗舰店1','note':'2022-11-11'},
-            {'taskId':'9','title':'标请问请问破千万1','note':'2022-11-11'},
-            {'taskId':'10','title':'标而且我请问请问1','note':'2022-11-11'},
-            {'taskId':'11','title':'代欧王大炮物品代码','note':'2022-11-11'},
-            {'taskId':'12','title':'到ID我们','note':'2022-11-11'},
-            {'taskId':'13','title':'我去哦额陪娃欧美大片请我们','note':'2022-11-11'},
-            {'taskId':'14','title':'请问哦气雾剂群殴','note':'2022-11-11'}
+        delayList: [{'taskId':'1','title':'si哦大家艾吉奥是我','note':'2022-11-11','complete':true},
+            {'taskId':'2','title':'si哦大家艾吉奥是2321','note':'2022-11-11','complete':true},
+            {'taskId':'3','title':'打SD卡我怕','note':'2022-11-11','complete':true},
+            {'taskId':'4','title':'标无间道i文件舰店1','note':'2022-11-11','complete':true},
+            {'taskId':'5','title':'标题大家啊我i家1','note':'2022-11-11','complete':false},
+            {'taskId':'6','title':'标题德外而我却','note':'2022-11-11','complete':true},
+            {'taskId':'7','title':'标题德外旗额我去问1','note':'2022-11-11','complete':false},
+            {'taskId':'8','title':'千而万请问确京东卡来接我i的骄傲问你，我就是准备看看最棒的是的多长定德外旗舰店1','note':'2022-11-11','complete':true},
+            {'taskId':'9','title':'标请问请问破千万1','note':'2022-11-11','complete':true},
+            {'taskId':'10','title':'标而且我请问请问1','note':'2022-11-11','complete':true},
+            {'taskId':'11','title':'代欧王大炮物品代码','note':'2022-11-11','complete':true},
+            {'taskId':'12','title':'到ID我们','note':'2022-11-11','complete':true},
+            {'taskId':'13','title':'我去哦额陪娃欧美大片请我们','note':'2022-11-11','complete':true},
+            {'taskId':'14','title':'请问哦气雾剂群殴','note':'2022-11-11','complete':true}
         ],
         duration: 300,  // swiper-item 切换过渡时间
         categoryCur: 0, // 当前数据列索引
@@ -108,17 +109,49 @@ Page({
     more() {
         this.getList('more', this.getCurrentData(this.data.categoryCur).page);
     },
-    showArticle(e) {
-        console.log(e.detail)
-        // wx.setClipboardData({
-        //     data: e.currentTarget.dataset.link,
-        //     success(res) {
-        //         wx.showToast({
-        //             icon: "none",
-        //             title: "链接已复制到剪切板"
-        //         })
-        //     }
-        // })
+    changeCheck(e){
+        let currentCur = this.data.categoryCur;
+        let categoryData = this.getCurrentData();
+        let currentCheck = categoryData.listData;
+        currentCheck.forEach(x => {
+            if (x.taskId == e.target.dataset.id){
+               x.complete = e.detail.checked;
+               //TODO 请求,将完成状态更新
+           }
+        });
+        this.setCurrentData(currentCur,categoryData);
+    },
+    handleAction(e) {
+        console.log('testade');
+        console.log(e.detail);
+        try{
+        ActionSheet.show({
+            theme: ActionSheetTheme.List,
+            selector: '#t-action-sheet',
+            context: this,
+            items: [
+                {
+                    label: '默认选项',
+                },
+                {
+                    label: '自定义选项',
+                    color: '#0052D9',
+                },
+                {
+                    label: '失效选项',
+                    disabled: true,
+                },
+                {
+                    label: '警告选项',
+                    color: '#e34d59',
+                },
+            ],
+        });}catch (e){
+            console.log(e);
+        }
+    },
+    handleSelected(e) {
+        console.log(e.detail);
     },
     onLoad() {
         let categoryData = [];
diff --git a/pages/today/index.json b/pages/today/index.json
index 8db9b34..9265f29 100644
--- a/pages/today/index.json
+++ b/pages/today/index.json
@@ -2,6 +2,7 @@
     "usingComponents": {
         "foot-tab": "../foot-tab/foot-tab",
         "tab": "../../components/tab/index",
-        "scroll": "../../components/scroll/index"
+        "scroll": "../../components/scroll/index",
+        "t-action-sheet": "../../components/action-sheet/action-sheet"
     }
 }
diff --git a/pages/today/index.wxml b/pages/today/index.wxml
index 9bc9645..ba5d778 100644
--- a/pages/today/index.wxml
+++ b/pages/today/index.wxml
@@ -23,17 +23,24 @@
                       wx:for="{{item.listData}}"
                       wx:key="index"
                       data-link="{{item.link}}"
-                      bind:longpress="showArticle">
+                      bind:longpress="handleAction">
                     <view class="name">
-                        <checkbox value="{{item.taskId}}" checked="{{item.complete}}"></checkbox>
-                        <rich-text nodes="{{item.title}}"></rich-text>
+                        <t-checkbox wx:if="{{item.complete}}" borderless data-id="{{item.taskId}}" class="checkedBox" label="{{item.title}}" checked bind:change="changeCheck"/>
+                        <t-checkbox wx:else borderless data-id="{{item.taskId}}" label="{{item.title}}" bind:change="changeCheck"/>
+                    </view>
+                    <view class="remark">
+                        <!--截止时间-->
+                        <!--提醒时间-->
+                        <!--重复-->
+                        <!--任务备注-->
+                        <t-icon name="app"></t-icon><text class="note">{{item.note}}</text>
                     </view>
-                    <view class="date">{{item.note}}</view>
                 </view>
             </view>
         </scroll>
     </swiper-item>
 </swiper>
+<t-action-sheet id="t-action-sheet" bind:selected="handleSelected" />
 <view>
     <foot-tab iconList="{{aIconList}}"/>
 </view>
diff --git a/pages/today/index.wxss b/pages/today/index.wxss
index 35cc4f4..290587c 100644
--- a/pages/today/index.wxss
+++ b/pages/today/index.wxss
@@ -27,13 +27,27 @@ swiper {
 }
 
 .cell .name {
-    display: flex;
+    overflow: hidden; /* 超出部分不显示 */
     height: 50rpx;
-    font-size: 35rpx;
     margin-bottom: 12rpx;
 }
 
-.cell .date {
-    color: #999999;
-    font-size: 24rpx;
+checkbox {
+    width: 50rpx;
+    height: 50rpx;
+    box-sizing: border-box;
 }
+
+.cell .remark {
+    display: flex;
+    color: #999999;
+}
+
+.checkedBox .t-checkbox__content {
+    text-decoration:line-through;
+}
+
+.note {
+    font-size: 28rpx;
+}
+