From a0b72a542af27709de16d44f581f7bdbd1b1ebe9 Mon Sep 17 00:00:00 2001
From: limqhz <540344226@qq.com>
Date: Sun, 12 Feb 2023 19:05:37 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BD=E8=89=B2=E4=B8=BB=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../action-sheet/template/grid.wxml           |  49 ++++
 .../action-sheet/template/list.wxml           |  14 ++
 .../avatar-group/avatar-group.d.ts            |  28 +++
 .../avatar-group/avatar-group.js              |  86 +++++++
 .../avatar-group/avatar-group.json            |   6 +
 .../avatar-group/avatar-group.wxml            |  19 ++
 .../avatar-group/avatar-group.wxss            |  60 +++++
 .../avatar-group/props.d.ts                   |   3 +
 .../tdesign-miniprogram/avatar-group/props.js |  24 ++
 .../avatar-group/type.d.ts                    |  27 +++
 .../tdesign-miniprogram/avatar-group/type.js  |   1 +
 .../check-tag/check-tag.d.ts                  |  28 +++
 .../check-tag/check-tag.js                    |  78 ++++++
 .../check-tag/check-tag.json                  |   6 +
 .../check-tag/check-tag.wxml                  |  15 ++
 .../check-tag/check-tag.wxss                  | 224 ++++++++++++++++++
 .../tdesign-miniprogram/check-tag/props.d.ts  |   3 +
 .../tdesign-miniprogram/check-tag/props.js    |  44 ++++
 .../tdesign-miniprogram/check-tag/type.d.ts   |  47 ++++
 .../tdesign-miniprogram/check-tag/type.js     |   1 +
 .../checkbox-group/props.d.ts                 |   3 +
 .../checkbox-group/props.js                   |  31 +++
 .../checkbox-group/type.d.ts                  |  38 +++
 .../checkbox-group/type.js                    |   1 +
 .../collapse-panel/collapse-panel.d.ts        |  26 ++
 .../collapse-panel/collapse-panel.js          |  90 +++++++
 .../collapse-panel/collapse-panel.json        |   6 +
 .../collapse-panel/collapse-panel.wxml        |  34 +++
 .../collapse-panel/collapse-panel.wxss        | 171 +++++++++++++
 .../collapse-panel/props.d.ts                 |   3 +
 .../collapse-panel/props.js                   |  34 +++
 .../collapse-panel/type.d.ts                  |  38 +++
 .../collapse-panel/type.js                    |   1 +
 .../tdesign-miniprogram/common/bus.d.ts       |   6 +
 .../tdesign-miniprogram/common/bus.js         |  16 ++
 .../common/style/mixins/_cursor.wxss          |   0
 .../dropdown-item/dropdown-item.d.ts          |  89 +++++++
 .../dropdown-item/dropdown-item.js            | 146 ++++++++++++
 .../dropdown-item/dropdown-item.json          |  11 +
 .../dropdown-item/dropdown-item.wxml          |  86 +++++++
 .../dropdown-item/dropdown-item.wxss          | 111 +++++++++
 .../dropdown-item/index.wxs                   |   9 +
 .../dropdown-item/props.d.ts                  |   3 +
 .../dropdown-item/props.js                    |  45 ++++
 .../dropdown-item/type.d.ts                   |  60 +++++
 .../tdesign-miniprogram/dropdown-item/type.js |   1 +
 .../grid-item/grid-item.d.ts                  |  32 +++
 .../grid-item/grid-item.js                    | 132 +++++++++++
 .../grid-item/grid-item.json                  |   8 +
 .../grid-item/grid-item.wxml                  |  74 ++++++
 .../grid-item/grid-item.wxss                  | 124 ++++++++++
 .../tdesign-miniprogram/grid-item/props.d.ts  |   3 +
 .../tdesign-miniprogram/grid-item/props.js    |  41 ++++
 .../tdesign-miniprogram/grid-item/type.d.ts   |  47 ++++
 .../tdesign-miniprogram/grid-item/type.js     |   1 +
 .../picker-item/picker-item.d.ts              |  27 +++
 .../picker-item/picker-item.js                | 116 +++++++++
 .../picker-item/picker-item.json              |   4 +
 .../picker-item/picker-item.wxml              |  24 ++
 .../picker-item/picker-item.wxss              |  52 ++++
 .../picker-item/props.d.ts                    |   3 +
 .../tdesign-miniprogram/picker-item/props.js  |  14 ++
 .../tdesign-miniprogram/picker-item/type.d.ts |  18 ++
 .../tdesign-miniprogram/picker-item/type.js   |   1 +
 .../tdesign-miniprogram/step-item/props.d.ts  |   3 +
 .../tdesign-miniprogram/step-item/props.js    |  29 +++
 .../step-item/step-item.d.ts                  |  22 ++
 .../step-item/step-item.js                    |  69 ++++++
 .../step-item/step-item.json                  |   6 +
 .../step-item/step-item.wxml                  |  39 +++
 .../step-item/step-item.wxss                  | 211 +++++++++++++++++
 .../tdesign-miniprogram/step-item/type.d.ts   |  35 +++
 .../tdesign-miniprogram/step-item/type.js     |   1 +
 .../tdesign-miniprogram/swiper-nav/index.d.ts |   3 +
 .../tdesign-miniprogram/swiper-nav/index.js   |   3 +
 .../tdesign-miniprogram/swiper-nav/props.d.ts |   3 +
 .../tdesign-miniprogram/swiper-nav/props.js   |  35 +++
 .../swiper-nav/swiper-nav.d.ts                |  45 ++++
 .../swiper-nav/swiper-nav.js                  |  70 ++++++
 .../swiper-nav/swiper-nav.json                |   3 +
 .../swiper-nav/swiper-nav.wxml                |  21 ++
 .../swiper-nav/swiper-nav.wxss                | 152 ++++++++++++
 .../tdesign-miniprogram/swiper-nav/type.d.ts  |  35 +++
 .../tdesign-miniprogram/swiper-nav/type.js    |   1 +
 .../tab-bar-item/props.d.ts                   |   3 +
 .../tdesign-miniprogram/tab-bar-item/props.js |  19 ++
 .../tab-bar-item/tab-bar-item.d.ts            |  35 +++
 .../tab-bar-item/tab-bar-item.js              | 114 +++++++++
 .../tab-bar-item/tab-bar-item.json            |   7 +
 .../tab-bar-item/tab-bar-item.wxml            |  62 +++++
 .../tab-bar-item/tab-bar-item.wxss            | 141 +++++++++++
 .../tab-bar-item/type.d.ts                    |  27 +++
 .../tdesign-miniprogram/tab-bar-item/type.js  |   1 +
 .../tdesign-miniprogram/tab-panel/props.d.ts  |   3 +
 .../tdesign-miniprogram/tab-panel/props.js    |  32 +++
 .../tab-panel/tab-panel.d.ts                  |  19 ++
 .../tab-panel/tab-panel.js                    |  57 +++++
 .../tab-panel/tab-panel.json                  |   4 +
 .../tab-panel/tab-panel.wxml                  |  10 +
 .../tab-panel/tab-panel.wxss                  |  37 +++
 .../tdesign-miniprogram/tab-panel/type.d.ts   |  35 +++
 .../tdesign-miniprogram/tab-panel/type.js     |   1 +
 .../tdesign-miniprogram/tabs/index.d.ts       |   3 +
 .../tdesign-miniprogram/tabs/index.js         |   3 +
 104 files changed, 3942 insertions(+)
 create mode 100644 miniprogram_npm/tdesign-miniprogram/action-sheet/template/grid.wxml
 create mode 100644 miniprogram_npm/tdesign-miniprogram/action-sheet/template/list.wxml
 create mode 100644 miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.json
 create mode 100644 miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.wxml
 create mode 100644 miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.wxss
 create mode 100644 miniprogram_npm/tdesign-miniprogram/avatar-group/props.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/avatar-group/props.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/avatar-group/type.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/avatar-group/type.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/check-tag/check-tag.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/check-tag/check-tag.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/check-tag/check-tag.json
 create mode 100644 miniprogram_npm/tdesign-miniprogram/check-tag/check-tag.wxml
 create mode 100644 miniprogram_npm/tdesign-miniprogram/check-tag/check-tag.wxss
 create mode 100644 miniprogram_npm/tdesign-miniprogram/check-tag/props.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/check-tag/props.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/check-tag/type.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/check-tag/type.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/checkbox-group/props.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/checkbox-group/props.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/checkbox-group/type.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/checkbox-group/type.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/collapse-panel/collapse-panel.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/collapse-panel/collapse-panel.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/collapse-panel/collapse-panel.json
 create mode 100644 miniprogram_npm/tdesign-miniprogram/collapse-panel/collapse-panel.wxml
 create mode 100644 miniprogram_npm/tdesign-miniprogram/collapse-panel/collapse-panel.wxss
 create mode 100644 miniprogram_npm/tdesign-miniprogram/collapse-panel/props.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/collapse-panel/props.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/collapse-panel/type.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/collapse-panel/type.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/common/bus.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/common/bus.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/common/style/mixins/_cursor.wxss
 create mode 100644 miniprogram_npm/tdesign-miniprogram/dropdown-item/dropdown-item.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/dropdown-item/dropdown-item.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/dropdown-item/dropdown-item.json
 create mode 100644 miniprogram_npm/tdesign-miniprogram/dropdown-item/dropdown-item.wxml
 create mode 100644 miniprogram_npm/tdesign-miniprogram/dropdown-item/dropdown-item.wxss
 create mode 100644 miniprogram_npm/tdesign-miniprogram/dropdown-item/index.wxs
 create mode 100644 miniprogram_npm/tdesign-miniprogram/dropdown-item/props.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/dropdown-item/props.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/dropdown-item/type.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/dropdown-item/type.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/grid-item/grid-item.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/grid-item/grid-item.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/grid-item/grid-item.json
 create mode 100644 miniprogram_npm/tdesign-miniprogram/grid-item/grid-item.wxml
 create mode 100644 miniprogram_npm/tdesign-miniprogram/grid-item/grid-item.wxss
 create mode 100644 miniprogram_npm/tdesign-miniprogram/grid-item/props.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/grid-item/props.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/grid-item/type.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/grid-item/type.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/picker-item/picker-item.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/picker-item/picker-item.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/picker-item/picker-item.json
 create mode 100644 miniprogram_npm/tdesign-miniprogram/picker-item/picker-item.wxml
 create mode 100644 miniprogram_npm/tdesign-miniprogram/picker-item/picker-item.wxss
 create mode 100644 miniprogram_npm/tdesign-miniprogram/picker-item/props.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/picker-item/props.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/picker-item/type.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/picker-item/type.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/step-item/props.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/step-item/props.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/step-item/step-item.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/step-item/step-item.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/step-item/step-item.json
 create mode 100644 miniprogram_npm/tdesign-miniprogram/step-item/step-item.wxml
 create mode 100644 miniprogram_npm/tdesign-miniprogram/step-item/step-item.wxss
 create mode 100644 miniprogram_npm/tdesign-miniprogram/step-item/type.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/step-item/type.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/swiper-nav/index.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/swiper-nav/index.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/swiper-nav/props.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/swiper-nav/props.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/swiper-nav/swiper-nav.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/swiper-nav/swiper-nav.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/swiper-nav/swiper-nav.json
 create mode 100644 miniprogram_npm/tdesign-miniprogram/swiper-nav/swiper-nav.wxml
 create mode 100644 miniprogram_npm/tdesign-miniprogram/swiper-nav/swiper-nav.wxss
 create mode 100644 miniprogram_npm/tdesign-miniprogram/swiper-nav/type.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/swiper-nav/type.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/tab-bar-item/props.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/tab-bar-item/props.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/tab-bar-item/tab-bar-item.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/tab-bar-item/tab-bar-item.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/tab-bar-item/tab-bar-item.json
 create mode 100644 miniprogram_npm/tdesign-miniprogram/tab-bar-item/tab-bar-item.wxml
 create mode 100644 miniprogram_npm/tdesign-miniprogram/tab-bar-item/tab-bar-item.wxss
 create mode 100644 miniprogram_npm/tdesign-miniprogram/tab-bar-item/type.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/tab-bar-item/type.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/tab-panel/props.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/tab-panel/props.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/tab-panel/tab-panel.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/tab-panel/tab-panel.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/tab-panel/tab-panel.json
 create mode 100644 miniprogram_npm/tdesign-miniprogram/tab-panel/tab-panel.wxml
 create mode 100644 miniprogram_npm/tdesign-miniprogram/tab-panel/tab-panel.wxss
 create mode 100644 miniprogram_npm/tdesign-miniprogram/tab-panel/type.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/tab-panel/type.js
 create mode 100644 miniprogram_npm/tdesign-miniprogram/tabs/index.d.ts
 create mode 100644 miniprogram_npm/tdesign-miniprogram/tabs/index.js

diff --git a/miniprogram_npm/tdesign-miniprogram/action-sheet/template/grid.wxml b/miniprogram_npm/tdesign-miniprogram/action-sheet/template/grid.wxml
new file mode 100644
index 0000000..bdc595e
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/action-sheet/template/grid.wxml
@@ -0,0 +1,49 @@
+<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}}"
+        icon="{{item.icon}}"
+        text="{{item.label}}"
+        image="{{item.image}}"
+      >
+      </t-grid-item>
+    </t-grid>
+  </block>
+  <block wx:elif="{{gridThemeItems.length > 1}}">
+    <view class="{{classPrefix}}__swiper-wrap">
+      <swiper style="height: 456rpx" autoplay="{{false}}" current="{{currentSwiperIndex}}" bindchange="onSwiperChange">
+        <swiper-item wx:for="{{gridThemeItems}}" wx:key="index">
+          <t-grid align="center" t-class="{{classPrefix}}__grid {{classPrefix}}__grid--swiper" 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"
+              icon="{{item.icon}}"
+              text="{{item.label}}"
+              image="{{item.image}}"
+            >
+            </t-grid-item>
+          </t-grid>
+        </swiper-item>
+      </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/miniprogram_npm/tdesign-miniprogram/action-sheet/template/list.wxml b/miniprogram_npm/tdesign-miniprogram/action-sheet/template/list.wxml
new file mode 100644
index 0000000..37e5dcf
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/action-sheet/template/list.wxml
@@ -0,0 +1,14 @@
+<template name="list">
+  <view
+    data-index="{{index}}"
+    style="{{ item.color ? 'color: ' + item.color : '' }}"
+    class="{{listThemeItemClass}}"
+    bind:tap="onSelect"
+    aria-role="{{ariaRole || 'button'}}"
+    aria-label="{{item.label || item}}"
+    tabindex="0"
+  >
+    <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/miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.d.ts b/miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.d.ts
new file mode 100644
index 0000000..c9f9ba6
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.d.ts
@@ -0,0 +1,28 @@
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+export default class AvatarGroup extends SuperComponent {
+    externalClasses: string[];
+    properties: import("./type").TdAvatarGroupProps;
+    data: {
+        prefix: string;
+        classPrefix: string;
+        hasChild: boolean;
+        length: number;
+        className: string;
+    };
+    options: {
+        multipleSlots: boolean;
+    };
+    relations: RelationsOptions;
+    lifetimes: {
+        attached(): void;
+        ready(): void;
+    };
+    observers: {
+        'cascading, size'(): void;
+    };
+    methods: {
+        setClass(): void;
+        handleMax(): void;
+        handleChildCascading(): void;
+    };
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.js b/miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.js
new file mode 100644
index 0000000..b1d4563
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.js
@@ -0,0 +1,86 @@
+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 avatarGroupProps from './props';
+const { prefix } = config;
+const name = `${prefix}-avatar-group`;
+let AvatarGroup = class AvatarGroup extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-image`];
+        this.properties = avatarGroupProps;
+        this.data = {
+            prefix,
+            classPrefix: name,
+            hasChild: true,
+            length: 0,
+            className: '',
+        };
+        this.options = {
+            multipleSlots: true,
+        };
+        this.relations = {
+            '../avatar/avatar': {
+                type: 'descendant',
+            },
+        };
+        this.lifetimes = {
+            attached() {
+                this.setClass();
+            },
+            ready() {
+                this.setData({
+                    length: this.$children.length,
+                });
+                this.handleMax();
+                this.handleChildCascading();
+            },
+        };
+        this.observers = {
+            'cascading, size'() {
+                this.setClass();
+            },
+        };
+        this.methods = {
+            setClass() {
+                const { cascading, size } = this.properties;
+                const direction = cascading.split('-')[0];
+                const classList = [
+                    name,
+                    `${prefix}-class`,
+                    `${name}-offset-${direction}-${size.indexOf('px') > -1 ? 'medium' : size}`,
+                ];
+                this.setData({
+                    className: classList.join(' '),
+                });
+            },
+            handleMax() {
+                const { max } = this.data;
+                const len = this.$children.length;
+                if (!max || max > len)
+                    return;
+                const restAvatars = this.$children.splice(max, len - max);
+                restAvatars.forEach((child) => {
+                    child.hide();
+                });
+            },
+            handleChildCascading() {
+                if (this.properties.cascading === 'right-up')
+                    return;
+                const defaultZIndex = 100;
+                this.$children.forEach((child, index) => {
+                    child.updateCascading(defaultZIndex - index * 10);
+                });
+            },
+        };
+    }
+};
+AvatarGroup = __decorate([
+    wxComponent()
+], AvatarGroup);
+export default AvatarGroup;
diff --git a/miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.json b/miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.json
new file mode 100644
index 0000000..9f58d25
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-avatar": "../avatar/avatar"
+  }
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.wxml b/miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.wxml
new file mode 100644
index 0000000..95449d3
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.wxml
@@ -0,0 +1,19 @@
+<view style="{{ style }}" class="{{className}}">
+  <slot />
+  <!-- 自定义折叠元素 -->
+  <view class="{{classPrefix}}__collapse--slot">
+    <slot name="collapse-avatar" />
+  </view>
+  <!-- 默认折叠元素 -->
+  <view class="{{classPrefix}}__collapse--default" wx:if="{{max && (max < length)}}">
+    <t-avatar
+      t-class-image="{{prefix}}-class-image"
+      t-class-content="{{prefix}}-class-content"
+      bordered
+      size="{{size}}"
+      icon="{{ collapseAvatar ? '' : 'user-add'}}"
+      aria-role="none"
+      >{{collapseAvatar}}</t-avatar
+    >
+  </view>
+</view>
diff --git a/miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.wxss b/miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.wxss
new file mode 100644
index 0000000..cf3d6e6
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.wxss
@@ -0,0 +1,60 @@
+.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-avatar-group {
+  display: inline-flex;
+  align-items: center;
+}
+.t-avatar-group-offset-left-small {
+  --td-avatar-margin-left: var(--td-avatar-group-margin-left-small, -4px);
+}
+.t-avatar-group-offset-left-medium {
+  --td-avatar-margin-left: var(--td-avatar-group-margin-left-medium, -6px);
+}
+.t-avatar-group-offset-left-large {
+  --td-avatar-margin-left: var(--td-avatar-group-margin-left-large, -8px);
+}
+.t-avatar-group-offset-right-small {
+  --td-avatar-margin-left: var(--td-avatar-group-margin-left-small, -4px);
+}
+.t-avatar-group-offset-right-medium {
+  --td-avatar-margin-left: var(--td-avatar-group-margin-left-medium, -6px);
+}
+.t-avatar-group-offset-right-large {
+  --td-avatar-margin-left: var(--td-avatar-group-margin-left-large, -8px);
+}
+.t-avatar-group__collapse--slot {
+  float: left;
+}
+.t-avatar-group__collapse--slot:not(:empty) + .t-avatar-group__collapse--default {
+  display: none;
+  float: left;
+}
+.t-avatar-group__collapse--slot:empty + .t-avatar-group__collapse--default {
+  display: block;
+  float: left;
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/avatar-group/props.d.ts b/miniprogram_npm/tdesign-miniprogram/avatar-group/props.d.ts
new file mode 100644
index 0000000..892b866
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/avatar-group/props.d.ts
@@ -0,0 +1,3 @@
+import { TdAvatarGroupProps } from './type';
+declare const props: TdAvatarGroupProps;
+export default props;
diff --git a/miniprogram_npm/tdesign-miniprogram/avatar-group/props.js b/miniprogram_npm/tdesign-miniprogram/avatar-group/props.js
new file mode 100644
index 0000000..4820fe1
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/avatar-group/props.js
@@ -0,0 +1,24 @@
+const props = {
+    cascading: {
+        type: String,
+        value: 'right-up',
+    },
+    collapseAvatar: {
+        type: String,
+    },
+    style: {
+        type: String,
+        value: '',
+    },
+    externalClasses: {
+        type: Array,
+    },
+    max: {
+        type: Number,
+    },
+    size: {
+        type: String,
+        value: 'medium',
+    },
+};
+export default props;
diff --git a/miniprogram_npm/tdesign-miniprogram/avatar-group/type.d.ts b/miniprogram_npm/tdesign-miniprogram/avatar-group/type.d.ts
new file mode 100644
index 0000000..fccdffc
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/avatar-group/type.d.ts
@@ -0,0 +1,27 @@
+export interface TdAvatarGroupProps {
+    cascading?: {
+        type: StringConstructor;
+        value?: CascadingValue;
+    };
+    collapseAvatar?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    style?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class', 't-class-image', 't-class-content'];
+    };
+    max?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    size?: {
+        type: StringConstructor;
+        value?: string;
+    };
+}
+export declare type CascadingValue = 'left-up' | 'right-up';
diff --git a/miniprogram_npm/tdesign-miniprogram/avatar-group/type.js b/miniprogram_npm/tdesign-miniprogram/avatar-group/type.js
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/avatar-group/type.js
@@ -0,0 +1 @@
+export {};
diff --git a/miniprogram_npm/tdesign-miniprogram/check-tag/check-tag.d.ts b/miniprogram_npm/tdesign-miniprogram/check-tag/check-tag.d.ts
new file mode 100644
index 0000000..44ab827
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/check-tag/check-tag.d.ts
@@ -0,0 +1,28 @@
+import { SuperComponent } from '../common/src/index';
+export default class CheckTag extends SuperComponent {
+    data: {
+        prefix: string;
+        classPrefix: string;
+        className: string;
+    };
+    properties: import("./type").TdCheckTagProps;
+    externalClasses: string[];
+    controlledProps: {
+        key: string;
+        event: string;
+    }[];
+    options: {
+        multipleSlots: boolean;
+    };
+    lifetimes: {
+        attached(): void;
+    };
+    observers: {
+        'size, disabled, checked'(): void;
+        icon(v: any): void;
+    };
+    methods: {
+        setClass(): void;
+        onClick(): void;
+    };
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/check-tag/check-tag.js b/miniprogram_npm/tdesign-miniprogram/check-tag/check-tag.js
new file mode 100644
index 0000000..c79bc9f
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/check-tag/check-tag.js
@@ -0,0 +1,78 @@
+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 { wxComponent, SuperComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+import { classNames, calcIcon } from '../common/utils';
+const { prefix } = config;
+const name = `${prefix}-tag`;
+let CheckTag = class CheckTag extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.data = {
+            prefix,
+            classPrefix: name,
+            className: '',
+        };
+        this.properties = props;
+        this.externalClasses = [`${prefix}-class`];
+        this.controlledProps = [
+            {
+                key: 'checked',
+                event: 'change',
+            },
+        ];
+        this.options = {
+            multipleSlots: true,
+        };
+        this.lifetimes = {
+            attached() {
+                this.setClass();
+            },
+        };
+        this.observers = {
+            'size, disabled, checked'() {
+                this.setClass();
+            },
+            icon(v) {
+                this.setData({
+                    _icon: calcIcon(v),
+                });
+            },
+        };
+        this.methods = {
+            setClass() {
+                const { classPrefix } = this.data;
+                const { size, variant, disabled, checked } = this.properties;
+                const tagClass = [
+                    classPrefix,
+                    `${classPrefix}--checkable`,
+                    disabled ? `${classPrefix}--disabled` : '',
+                    checked ? `${classPrefix}--checked` : '',
+                    `${classPrefix}--${checked ? 'primary' : 'default'}`,
+                    `${classPrefix}--${size}`,
+                    `${classPrefix}--${variant}`,
+                ];
+                const className = classNames(tagClass);
+                this.setData({
+                    className,
+                });
+            },
+            onClick() {
+                if (this.data.disabled)
+                    return;
+                const { checked } = this.data;
+                this._trigger('click');
+                this._trigger('change', { checked: !checked });
+            },
+        };
+    }
+};
+CheckTag = __decorate([
+    wxComponent()
+], CheckTag);
+export default CheckTag;
diff --git a/miniprogram_npm/tdesign-miniprogram/check-tag/check-tag.json b/miniprogram_npm/tdesign-miniprogram/check-tag/check-tag.json
new file mode 100644
index 0000000..049940c
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/check-tag/check-tag.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "../icon/icon"
+  }
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/check-tag/check-tag.wxml b/miniprogram_npm/tdesign-miniprogram/check-tag/check-tag.wxml
new file mode 100644
index 0000000..1b65733
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/check-tag/check-tag.wxml
@@ -0,0 +1,15 @@
+<wxs src="../common/utils.wxs" module="_" />
+<import src="../common/template/icon.wxml" />
+
+<view style="{{ style }}" class="{{className}} {{prefix}}-class" bind:tap="onClick">
+  <view aria-hidden="{{true}}" class="{{classPrefix}}__icon">
+    <template wx:if="{{_icon}}" is="icon" data="{{ tClass: prefix + '-icon', ..._icon }}" />
+    <slot name="icon" />
+  </view>
+  <view class="{{classPrefix}}__text">
+    <slot />
+    <slot name="content" />
+    <block wx:if="{{_.isArray(content) && content.length == 2}}">{{checked ? content[0] : content[1]}}</block>
+    <block wx:else>{{content}}</block>
+  </view>
+</view>
diff --git a/miniprogram_npm/tdesign-miniprogram/check-tag/check-tag.wxss b/miniprogram_npm/tdesign-miniprogram/check-tag/check-tag.wxss
new file mode 100644
index 0000000..783bbcc
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/check-tag/check-tag.wxss
@@ -0,0 +1,224 @@
+.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-tag {
+  display: inline-flex;
+  align-items: center;
+  border: 2rpx solid transparent;
+  box-sizing: border-box;
+  border-radius: var(--td-tag-square-border-radius, 8rpx);
+  font-size: var(--td-tag-medium-font-size, var(--td-font-size-s, 24rpx));
+  user-select: none;
+  vertical-align: middle;
+}
+.t-tag__text {
+  word-wrap: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.t-tag__icon {
+  display: flex;
+  align-items: center;
+}
+.t-tag__icon:not(:empty) + .t-tag__text:not(:empty) {
+  margin-left: 8rpx;
+}
+.t-tag--small {
+  height: var(--td-tag-small-height, 40rpx);
+  line-height: var(--td-tag-small-height, 40rpx);
+  padding: 0 var(--td-tag-small-padding, 11rpx);
+  font-size: var(--td-tag-small-font-size, var(--td-font-size, 20rpx));
+}
+.t-tag--small .t-icon,
+.t-tag--small .t-icon-close {
+  font-size: var(--td-tag-small-icon-size, 24rpx);
+}
+.t-tag--medium {
+  height: var(--td-tag-medium-height, 48rpx);
+  line-height: var(--td-tag-medium-height, 48rpx);
+  padding: 0 var(--td-tag-medium-padding, 15rpx);
+  font-size: var(--td-tag-medium-font-size, var(--td-font-size-s, 24rpx));
+}
+.t-tag--medium .t-icon,
+.t-tag--medium .t-icon-close {
+  font-size: var(--td-tag-medium-icon-size, 28rpx);
+}
+.t-tag--large {
+  height: var(--td-tag-large-height, 56rpx);
+  line-height: var(--td-tag-large-height, 56rpx);
+  padding: 0 var(--td-tag-large-padding, 15rpx);
+  font-size: var(--td-tag-large-font-size, var(--td-font-size-base, 28rpx));
+}
+.t-tag--large .t-icon,
+.t-tag--large .t-icon-close {
+  font-size: var(--td-tag-large-icon-size, 32rpx);
+}
+.t-tag--extra-large {
+  height: var(--td-tag-extra-large-height, 80rpx);
+  line-height: var(--td-tag-extra-large-height, 80rpx);
+  padding: 0 var(--td-tag-extra-large-padding, 31rpx);
+  font-size: var(--td-tag-extra-large-font-size, var(--td-font-size-base, 28rpx));
+}
+.t-tag--extra-large .t-icon,
+.t-tag--extra-large .t-icon-close {
+  font-size: var(--td-tag-extra-large-icon-size, 32rpx);
+}
+.t-tag--dark.t-tag--default {
+  color: var(--td-white-color-1, #fff);
+  border-color: var(--td-tag-default-color, var(--td-gray-color-3, #e7e7e7));
+  background-color: var(--td-tag-default-color, var(--td-gray-color-3, #e7e7e7));
+}
+.t-tag--dark.t-tag--primary {
+  color: var(--td-white-color-1, #fff);
+  border-color: var(--td-tag-primary-color, var(--td-primary-color, #0052d9));
+  background-color: var(--td-tag-primary-color, var(--td-primary-color, #0052d9));
+}
+.t-tag--dark.t-tag--success {
+  color: var(--td-white-color-1, #fff);
+  border-color: var(--td-tag-success-color, var(--td-success-color, var(--td-success-color-5, #00a870)));
+  background-color: var(--td-tag-success-color, var(--td-success-color, var(--td-success-color-5, #00a870)));
+}
+.t-tag--dark.t-tag--warning {
+  color: var(--td-white-color-1, #fff);
+  border-color: var(--td-tag-warning-color, var(--td-warning-color, var(--td-warning-color-5, #ed7b2f)));
+  background-color: var(--td-tag-warning-color, var(--td-warning-color, var(--td-warning-color-5, #ed7b2f)));
+}
+.t-tag--dark.t-tag--danger {
+  color: var(--td-white-color-1, #fff);
+  border-color: var(--td-tag-danger-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
+  background-color: var(--td-tag-danger-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
+}
+.t-tag--dark.t-tag--default {
+  color: var(--td-tag-default-font-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+}
+.t-tag--outline.t-tag--default {
+  color: var(--td-tag-default-color, var(--td-gray-color-3, #e7e7e7));
+  border-color: var(--td-tag-default-color, var(--td-gray-color-3, #e7e7e7));
+  background-color: var(--td-tag-default-light-color, var(--td-gray-color-1, #f3f3f3));
+}
+.t-tag--outline.t-tag--primary {
+  color: var(--td-tag-primary-color, var(--td-primary-color, #0052d9));
+  border-color: var(--td-tag-primary-color, var(--td-primary-color, #0052d9));
+  background-color: var(--td-tag-primary-light-color, var(--td-primary-color-1, #ecf2fe));
+}
+.t-tag--outline.t-tag--success {
+  color: var(--td-tag-success-color, var(--td-success-color, var(--td-success-color-5, #00a870)));
+  border-color: var(--td-tag-success-color, var(--td-success-color, var(--td-success-color-5, #00a870)));
+  background-color: var(--td-tag-success-light-color, var(--td-success-color-1, #e8f8f2));
+}
+.t-tag--outline.t-tag--warning {
+  color: var(--td-tag-warning-color, var(--td-warning-color, var(--td-warning-color-5, #ed7b2f)));
+  border-color: var(--td-tag-warning-color, var(--td-warning-color, var(--td-warning-color-5, #ed7b2f)));
+  background-color: var(--td-tag-warning-light-color, var(--td-warning-color-1, #fef3e6));
+}
+.t-tag--outline.t-tag--danger {
+  color: var(--td-tag-danger-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
+  border-color: var(--td-tag-danger-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
+  background-color: var(--td-tag-danger-light-color, var(--td-error-color-1, #fdecee));
+}
+.t-tag--outline.t-tag--default {
+  color: var(--td-tag-default-font-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+}
+.t-tag--outline.t-tag--default {
+  background-color: var(--td-tag-outline-bg-color, var(--td-bg-color-block, #fff));
+}
+.t-tag--outline.t-tag--primary {
+  background-color: var(--td-tag-outline-bg-color, var(--td-bg-color-block, #fff));
+}
+.t-tag--outline.t-tag--success {
+  background-color: var(--td-tag-outline-bg-color, var(--td-bg-color-block, #fff));
+}
+.t-tag--outline.t-tag--warning {
+  background-color: var(--td-tag-outline-bg-color, var(--td-bg-color-block, #fff));
+}
+.t-tag--outline.t-tag--danger {
+  background-color: var(--td-tag-outline-bg-color, var(--td-bg-color-block, #fff));
+}
+.t-tag--light.t-tag--default {
+  color: var(--td-tag-default-color, var(--td-gray-color-3, #e7e7e7));
+  border-color: var(--td-tag-default-light-color, var(--td-gray-color-1, #f3f3f3));
+  background-color: var(--td-tag-default-light-color, var(--td-gray-color-1, #f3f3f3));
+}
+.t-tag--light.t-tag--primary {
+  color: var(--td-tag-primary-color, var(--td-primary-color, #0052d9));
+  border-color: var(--td-tag-primary-light-color, var(--td-primary-color-1, #ecf2fe));
+  background-color: var(--td-tag-primary-light-color, var(--td-primary-color-1, #ecf2fe));
+}
+.t-tag--light.t-tag--success {
+  color: var(--td-tag-success-color, var(--td-success-color, var(--td-success-color-5, #00a870)));
+  border-color: var(--td-tag-success-light-color, var(--td-success-color-1, #e8f8f2));
+  background-color: var(--td-tag-success-light-color, var(--td-success-color-1, #e8f8f2));
+}
+.t-tag--light.t-tag--warning {
+  color: var(--td-tag-warning-color, var(--td-warning-color, var(--td-warning-color-5, #ed7b2f)));
+  border-color: var(--td-tag-warning-light-color, var(--td-warning-color-1, #fef3e6));
+  background-color: var(--td-tag-warning-light-color, var(--td-warning-color-1, #fef3e6));
+}
+.t-tag--light.t-tag--danger {
+  color: var(--td-tag-danger-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
+  border-color: var(--td-tag-danger-light-color, var(--td-error-color-1, #fdecee));
+  background-color: var(--td-tag-danger-light-color, var(--td-error-color-1, #fdecee));
+}
+.t-tag--light.t-tag--default {
+  color: var(--td-tag-default-font-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+}
+.t-tag--light-outline.t-tag--default {
+  color: var(--td-tag-default-color, var(--td-gray-color-3, #e7e7e7));
+  border-color: var(--td-tag-default-color, var(--td-gray-color-3, #e7e7e7));
+  background-color: var(--td-tag-default-light-color, var(--td-gray-color-1, #f3f3f3));
+}
+.t-tag--light-outline.t-tag--primary {
+  color: var(--td-tag-primary-color, var(--td-primary-color, #0052d9));
+  border-color: var(--td-tag-primary-color, var(--td-primary-color, #0052d9));
+  background-color: var(--td-tag-primary-light-color, var(--td-primary-color-1, #ecf2fe));
+}
+.t-tag--light-outline.t-tag--success {
+  color: var(--td-tag-success-color, var(--td-success-color, var(--td-success-color-5, #00a870)));
+  border-color: var(--td-tag-success-color, var(--td-success-color, var(--td-success-color-5, #00a870)));
+  background-color: var(--td-tag-success-light-color, var(--td-success-color-1, #e8f8f2));
+}
+.t-tag--light-outline.t-tag--warning {
+  color: var(--td-tag-warning-color, var(--td-warning-color, var(--td-warning-color-5, #ed7b2f)));
+  border-color: var(--td-tag-warning-color, var(--td-warning-color, var(--td-warning-color-5, #ed7b2f)));
+  background-color: var(--td-tag-warning-light-color, var(--td-warning-color-1, #fef3e6));
+}
+.t-tag--light-outline.t-tag--danger {
+  color: var(--td-tag-danger-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
+  border-color: var(--td-tag-danger-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
+  background-color: var(--td-tag-danger-light-color, var(--td-error-color-1, #fdecee));
+}
+.t-tag--light-outline.t-tag--default {
+  color: var(--td-tag-default-font-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+  border-color: var(--td-gray-color-4, #dcdcdc);
+}
+.t-tag.t-tag--closable.t-tag--disabled {
+  cursor: not-allowed;
+  color: var(--td-tag-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
+  background-color: var(--td-tag-disabled-background-color, var(--td-gray-color-2, #eeeeee));
+  border-color: var(--td-tag-disabled-border-color, var(--td-gray-color-4, #dcdcdc));
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/check-tag/props.d.ts b/miniprogram_npm/tdesign-miniprogram/check-tag/props.d.ts
new file mode 100644
index 0000000..57c816f
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/check-tag/props.d.ts
@@ -0,0 +1,3 @@
+import { TdCheckTagProps } from './type';
+declare const props: TdCheckTagProps;
+export default props;
diff --git a/miniprogram_npm/tdesign-miniprogram/check-tag/props.js b/miniprogram_npm/tdesign-miniprogram/check-tag/props.js
new file mode 100644
index 0000000..e87cc38
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/check-tag/props.js
@@ -0,0 +1,44 @@
+const props = {
+    checked: {
+        type: null,
+        value: undefined,
+    },
+    defaultChecked: {
+        type: null,
+        value: undefined,
+    },
+    closable: {
+        type: Boolean,
+        value: false,
+    },
+    content: {
+        type: null,
+    },
+    style: {
+        type: String,
+        value: '',
+    },
+    disabled: {
+        type: Boolean,
+        value: false,
+    },
+    externalClasses: {
+        type: Array,
+    },
+    icon: {
+        type: null,
+    },
+    shape: {
+        type: String,
+        value: 'square',
+    },
+    size: {
+        type: String,
+        value: 'medium',
+    },
+    variant: {
+        type: String,
+        value: 'dark',
+    },
+};
+export default props;
diff --git a/miniprogram_npm/tdesign-miniprogram/check-tag/type.d.ts b/miniprogram_npm/tdesign-miniprogram/check-tag/type.d.ts
new file mode 100644
index 0000000..efc82b8
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/check-tag/type.d.ts
@@ -0,0 +1,47 @@
+import { SizeEnum } from '../common/common';
+export interface TdCheckTagProps {
+    checked?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    defaultChecked?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    closable?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    content?: {
+        type: null;
+        value?: string | number | string[];
+    };
+    style?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    disabled?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class'];
+    };
+    icon?: {
+        type: null;
+        value?: string | object;
+    };
+    shape?: {
+        type: StringConstructor;
+        value?: 'square' | 'round' | 'mark';
+    };
+    size?: {
+        type: StringConstructor;
+        value?: SizeEnum;
+    };
+    variant?: {
+        type: StringConstructor;
+        value?: 'dark' | 'light' | 'outline' | 'light-outline';
+    };
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/check-tag/type.js b/miniprogram_npm/tdesign-miniprogram/check-tag/type.js
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/check-tag/type.js
@@ -0,0 +1 @@
+export {};
diff --git a/miniprogram_npm/tdesign-miniprogram/checkbox-group/props.d.ts b/miniprogram_npm/tdesign-miniprogram/checkbox-group/props.d.ts
new file mode 100644
index 0000000..f6e5bf5
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/checkbox-group/props.d.ts
@@ -0,0 +1,3 @@
+import { TdCheckboxGroupProps } from './type';
+declare const props: TdCheckboxGroupProps;
+export default props;
diff --git a/miniprogram_npm/tdesign-miniprogram/checkbox-group/props.js b/miniprogram_npm/tdesign-miniprogram/checkbox-group/props.js
new file mode 100644
index 0000000..9092042
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/checkbox-group/props.js
@@ -0,0 +1,31 @@
+const props = {
+    style: {
+        type: String,
+        value: '',
+    },
+    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/miniprogram_npm/tdesign-miniprogram/checkbox-group/type.d.ts b/miniprogram_npm/tdesign-miniprogram/checkbox-group/type.d.ts
new file mode 100644
index 0000000..641deb5
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/checkbox-group/type.d.ts
@@ -0,0 +1,38 @@
+export interface TdCheckboxGroupProps {
+    style?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    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/miniprogram_npm/tdesign-miniprogram/checkbox-group/type.js b/miniprogram_npm/tdesign-miniprogram/checkbox-group/type.js
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/checkbox-group/type.js
@@ -0,0 +1 @@
+export {};
diff --git a/miniprogram_npm/tdesign-miniprogram/collapse-panel/collapse-panel.d.ts b/miniprogram_npm/tdesign-miniprogram/collapse-panel/collapse-panel.d.ts
new file mode 100644
index 0000000..5301e80
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/collapse-panel/collapse-panel.d.ts
@@ -0,0 +1,26 @@
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+import type { TdCollapsePanelProps } from './type';
+export interface CollapsePanelProps extends TdCollapsePanelProps {
+}
+export default class CollapsePanel extends SuperComponent {
+    externalClasses: string[];
+    options: {
+        multipleSlots: boolean;
+    };
+    relations: RelationsOptions;
+    properties: TdCollapsePanelProps;
+    data: {
+        prefix: string;
+        expanded: boolean;
+        classPrefix: string;
+        classBasePrefix: string;
+        ultimateExpandIcon: boolean;
+        ultimateDisabled: boolean;
+    };
+    methods: {
+        set(data: Record<string, object | any>): Promise<unknown>;
+        updateExpanded(activeValues: any): void;
+        updateStyle(expanded: boolean): Promise<void>;
+        onClick(): void;
+    };
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/collapse-panel/collapse-panel.js b/miniprogram_npm/tdesign-miniprogram/collapse-panel/collapse-panel.js
new file mode 100644
index 0000000..04d9611
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/collapse-panel/collapse-panel.js
@@ -0,0 +1,90 @@
+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 { getRect } from '../common/utils';
+const { prefix } = config;
+const name = `${prefix}-collapse-panel`;
+let CollapsePanel = class CollapsePanel extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-header`];
+        this.options = {
+            multipleSlots: true,
+        };
+        this.relations = {
+            '../collapse/collapse': {
+                type: 'ancestor',
+                linked(target) {
+                    this.parent = target;
+                    const { value, defaultExpandAll, expandMutex, expandIcon, disabled } = target.properties;
+                    const activeValues = defaultExpandAll && !expandMutex ? [this.properties.value] : value;
+                    this.setData({
+                        ultimateExpandIcon: expandIcon || this.properties.expandIcon,
+                        ultimateDisabled: this.properties.disabled == null ? disabled : this.properties.disabled,
+                    });
+                    this.updateExpanded(activeValues);
+                },
+            },
+        };
+        this.properties = props;
+        this.data = {
+            prefix,
+            expanded: false,
+            classPrefix: name,
+            classBasePrefix: prefix,
+            ultimateExpandIcon: false,
+            ultimateDisabled: false,
+        };
+        this.methods = {
+            set(data) {
+                this.setData(data);
+                return new Promise((resolve) => wx.nextTick(resolve));
+            },
+            updateExpanded(activeValues) {
+                if (!this.parent) {
+                    return;
+                }
+                const { value } = this.properties;
+                const expanded = activeValues.includes(value);
+                if (expanded === this.properties.expanded)
+                    return;
+                this.setData({ expanded });
+                this.updateStyle(expanded);
+            },
+            updateStyle(expanded) {
+                return getRect(this, `.${name}__content`)
+                    .then((rect) => rect.height)
+                    .then((height) => {
+                    const animation = wx.createAnimation({
+                        duration: 0,
+                        timingFunction: 'ease-in-out',
+                    });
+                    if (expanded) {
+                        animation.height(height).top(0).step({ duration: 300 }).height('auto').step();
+                    }
+                    else {
+                        animation.height(height).top(1).step({ duration: 1 }).height(0).step({ duration: 300 });
+                    }
+                    this.setData({ animation: animation.export() });
+                });
+            },
+            onClick() {
+                const { ultimateDisabled } = this.data;
+                const { value } = this.properties;
+                if (ultimateDisabled)
+                    return;
+                this.parent.switch(value);
+            },
+        };
+    }
+};
+CollapsePanel = __decorate([
+    wxComponent()
+], CollapsePanel);
+export default CollapsePanel;
diff --git a/miniprogram_npm/tdesign-miniprogram/collapse-panel/collapse-panel.json b/miniprogram_npm/tdesign-miniprogram/collapse-panel/collapse-panel.json
new file mode 100644
index 0000000..5160a95
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/collapse-panel/collapse-panel.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-cell": "../cell/cell"
+  }
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/collapse-panel/collapse-panel.wxml b/miniprogram_npm/tdesign-miniprogram/collapse-panel/collapse-panel.wxml
new file mode 100644
index 0000000..049f692
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/collapse-panel/collapse-panel.wxml
@@ -0,0 +1,34 @@
+<wxs src="../common/utils.wxs" module="_" />
+
+<view style="{{ style }}" class="{{classPrefix}} {{classPrefix}}--{{placement}} {{prefix}}-class">
+  <view
+    class="{{classPrefix}}__title"
+    aria-role="button"
+    aria-expanded="{{expanded}}"
+    aria-disabled="{{ultimateDisabled}}"
+    bind:tap="onClick"
+  >
+    <t-cell
+      title="{{header}}"
+      note="{{headerRightContent}}"
+      bordered
+      right-icon="{{ ultimateExpandIcon ? (expanded ? 'chevron-up' : 'chevron-down') : '' }}"
+      t-class="{{_.cls(classPrefix + '__header', [placement, ['expanded', expanded]])}} {{prefix}}-class-header"
+      t-class-title="class-title {{ultimateDisabled ? 'class-title--disabled' : ''}}"
+      t-class-note="class-note {{ultimateDisabled ? 'class-note--disabled' : ''}}"
+      t-class-right-icon="class-right-icon {{classPrefix}}__arrow--{{placement}} {{ultimateDisabled ? 'class-right-icon--disabled' : ''}}"
+      t-class-hover="class-header-hover"
+    >
+      <slot name="header" slot="title" />
+      <slot name="header-right-content" slot="note" />
+      <slot name="expand-icon" slot="right-icon" />
+    </t-cell>
+  </view>
+  <view class="{{classPrefix}}__wrapper" animation="{{animation}}" aria-hidden="{{expanded ? '' : true}}">
+    <view class="{{classPrefix}}__content {{prefix}}-class-content">
+      {{content}}
+      <slot />
+      <slot name="content" />
+    </view>
+  </view>
+</view>
diff --git a/miniprogram_npm/tdesign-miniprogram/collapse-panel/collapse-panel.wxss b/miniprogram_npm/tdesign-miniprogram/collapse-panel/collapse-panel.wxss
new file mode 100644
index 0000000..3bc0839
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/collapse-panel/collapse-panel.wxss
@@ -0,0 +1,171 @@
+.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-collapse-panel {
+  position: relative;
+  background-color: var(--td-collapse-panel-bg-color, var(--td-bg-color-block, #fff));
+}
+.t-collapse-panel::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: unset;
+  bottom: 0;
+  left: unset;
+  right: unset;
+  background-color: var(--td-collapse-border-color, var(--td-border-color, #e7e7e7));
+}
+.t-collapse-panel::after {
+  height: 1px;
+  left: 0;
+  right: 0;
+  transform: scaleY(0.5);
+}
+.t-collapse-panel--disabled {
+  pointer-events: none;
+}
+.t-collapse-panel--disabled .t-collapse-panel__content,
+.t-collapse-panel--disabled .t-collapse-panel__header {
+  opacity: 0.3;
+}
+.t-collapse-panel--top {
+  display: flex;
+  flex-direction: column-reverse;
+}
+.t-collapse-panel__header {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: var(--td-collapse-horizontal-padding, 32rpx);
+  height: var(--td-collapse-header-height, 96rpx);
+  color: var(--td-collapse-header-text-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+}
+.t-collapse-panel__header--top {
+  position: relative;
+}
+.t-collapse-panel__header--top::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: unset;
+  left: unset;
+  right: unset;
+  background-color: var(--td-collapse-border-color, var(--td-border-color, #e7e7e7));
+}
+.t-collapse-panel__header--top::after {
+  height: 1px;
+  left: 0;
+  right: 0;
+  transform: scaleY(0.5);
+}
+.t-collapse-panel__header--bottom {
+  position: relative;
+}
+.t-collapse-panel__header--bottom::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: unset;
+  bottom: 0;
+  left: unset;
+  right: unset;
+  background-color: var(--td-collapse-border-color, var(--td-border-color, #e7e7e7));
+}
+.t-collapse-panel__header--bottom::after {
+  height: 1px;
+  left: 0;
+  right: 0;
+  transform: scaleY(0.5);
+}
+.t-collapse-panel__header:after {
+  display: none;
+  left: 32rpx;
+}
+.t-collapse-panel__header--expanded:after {
+  display: block;
+}
+.t-collapse-panel__header-right {
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+}
+.t-collapse-panel__header-icon {
+  height: 100%;
+  padding-left: 8px;
+  width: 44px;
+  padding-right: 8px;
+  color: var(--td-collapse-icon-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
+}
+.t-collapse-panel__extra {
+  font-size: var(--td-collapse-extra-font-size, var(--td-font-size-m, 32rpx));
+}
+.t-collapse-panel__body {
+  position: relative;
+}
+.t-collapse-panel__body::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: unset;
+  bottom: 0;
+  left: unset;
+  right: unset;
+  background-color: var(--td-collapse-border-color, var(--td-border-color, #e7e7e7));
+}
+.t-collapse-panel__body::after {
+  height: 1px;
+  left: 0;
+  right: 0;
+  transform: scaleY(0.5);
+}
+.t-collapse-panel__wrapper {
+  height: 0;
+  overflow: hidden;
+}
+.t-collapse-panel__content {
+  color: var(--td-collapse-content-text-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+  font-size: var(--td-collapse-content-font-size, var(--td-font-size-base, 28rpx));
+  padding: var(--td-collapse-content-padding, 32rpx);
+  line-height: var(--td-collapse-content-line-height, 1.5);
+}
+.t-collapse-panel__arrow--top {
+  transform: rotate(180deg);
+}
+.class-title {
+  font-size: var(--td-collapse-title-font-size, var(--td-font-size-m, 32rpx));
+}
+.class-title--disabled {
+  color: var(--td-text-disabled-color, rgba(0, 0, 0, 0.26));
+}
+.class-note--disabled {
+  color: var(--td-text-disabled-color, rgba(0, 0, 0, 0.26)) !important;
+}
+.class-right-icon--disabled {
+  color: var(--td-text-disabled-color, rgba(0, 0, 0, 0.26)) !important;
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/collapse-panel/props.d.ts b/miniprogram_npm/tdesign-miniprogram/collapse-panel/props.d.ts
new file mode 100644
index 0000000..829dbea
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/collapse-panel/props.d.ts
@@ -0,0 +1,3 @@
+import { TdCollapsePanelProps } from './type';
+declare const props: TdCollapsePanelProps;
+export default props;
diff --git a/miniprogram_npm/tdesign-miniprogram/collapse-panel/props.js b/miniprogram_npm/tdesign-miniprogram/collapse-panel/props.js
new file mode 100644
index 0000000..ff0ad0c
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/collapse-panel/props.js
@@ -0,0 +1,34 @@
+const props = {
+    content: {
+        type: String,
+    },
+    style: {
+        type: String,
+        value: '',
+    },
+    disabled: {
+        type: Boolean,
+        value: undefined,
+    },
+    expandIcon: {
+        type: Boolean,
+        value: undefined,
+    },
+    externalClasses: {
+        type: Array,
+    },
+    header: {
+        type: String,
+    },
+    headerRightContent: {
+        type: String,
+    },
+    placement: {
+        type: String,
+        value: 'bottom',
+    },
+    value: {
+        type: null,
+    },
+};
+export default props;
diff --git a/miniprogram_npm/tdesign-miniprogram/collapse-panel/type.d.ts b/miniprogram_npm/tdesign-miniprogram/collapse-panel/type.d.ts
new file mode 100644
index 0000000..315131a
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/collapse-panel/type.d.ts
@@ -0,0 +1,38 @@
+export interface TdCollapsePanelProps {
+    content?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    style?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    disabled?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    expandIcon?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class', 't-class-header', 't-class-content'];
+    };
+    header?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    headerRightContent?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    placement?: {
+        type: StringConstructor;
+        value?: 'bottom' | 'top';
+    };
+    value?: {
+        type: null;
+        value?: string | number;
+    };
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/collapse-panel/type.js b/miniprogram_npm/tdesign-miniprogram/collapse-panel/type.js
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/collapse-panel/type.js
@@ -0,0 +1 @@
+export {};
diff --git a/miniprogram_npm/tdesign-miniprogram/common/bus.d.ts b/miniprogram_npm/tdesign-miniprogram/common/bus.d.ts
new file mode 100644
index 0000000..0ed92bb
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/common/bus.d.ts
@@ -0,0 +1,6 @@
+export default class Bus {
+    listeners: Map<string, any>;
+    constructor();
+    on(evtName: string, listener: any): void;
+    emit(evtName: string): void;
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/common/bus.js b/miniprogram_npm/tdesign-miniprogram/common/bus.js
new file mode 100644
index 0000000..5626d27
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/common/bus.js
@@ -0,0 +1,16 @@
+export default class Bus {
+    constructor() {
+        this.listeners = new Map();
+    }
+    on(evtName, listener) {
+        const target = this.listeners.get(evtName) || [];
+        target.push(listener);
+        this.listeners.set(evtName, target);
+    }
+    emit(evtName) {
+        const listeners = this.listeners.get(evtName);
+        if (listeners) {
+            listeners.forEach((func) => func());
+        }
+    }
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/common/style/mixins/_cursor.wxss b/miniprogram_npm/tdesign-miniprogram/common/style/mixins/_cursor.wxss
new file mode 100644
index 0000000..e69de29
diff --git a/miniprogram_npm/tdesign-miniprogram/dropdown-item/dropdown-item.d.ts b/miniprogram_npm/tdesign-miniprogram/dropdown-item/dropdown-item.d.ts
new file mode 100644
index 0000000..9601c62
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/dropdown-item/dropdown-item.d.ts
@@ -0,0 +1,89 @@
+import { RelationsOptions, SuperComponent } from '../common/src/index';
+import type { TdDropdownItemProps } from './type';
+export interface DropdownItemProps extends TdDropdownItemProps {
+}
+export default class DropdownMenuItem extends SuperComponent {
+    externalClasses: string[];
+    properties: {
+        style?: {
+            type: StringConstructor;
+            value?: string;
+        };
+        disabled?: {
+            type: BooleanConstructor;
+            value?: boolean;
+        };
+        externalClasses?: {
+            type: ArrayConstructor;
+            value?: ["t-class", "t-class-content", "t-class-column", "t-class-column-item", "t-class-column-item-label", "t-class-footer"];
+        };
+        keys?: {
+            type: ObjectConstructor;
+            value?: import("../common/common").KeysType;
+        };
+        label?: {
+            type: StringConstructor;
+            value?: string;
+        };
+        multiple?: {
+            type: BooleanConstructor;
+            value?: boolean;
+        };
+        options?: {
+            type: ArrayConstructor;
+            value?: import("./type").DropdownOption[];
+        };
+        optionsColumns?: {
+            type: null;
+            value?: string | number;
+        };
+        optionsLayout?: {
+            type: StringConstructor;
+            value?: string;
+        };
+        value?: {
+            type: null;
+            value?: import("./type").DropdownValue;
+        };
+        defaultValue?: {
+            type: null;
+            value?: import("./type").DropdownValue;
+        };
+    };
+    data: {
+        prefix: string;
+        classPrefix: string;
+        show: boolean;
+        top: number;
+        maskHeight: number;
+        initValue: any;
+        hasChanged: boolean;
+        duration: string | number;
+        zIndex: number;
+        overlay: boolean;
+        labelAlias: string;
+        valueAlias: string;
+    };
+    parent: any;
+    relations: RelationsOptions;
+    controlledProps: {
+        key: string;
+        event: string;
+    }[];
+    observers: {
+        keys(obj: any): void;
+        value(v: any): void;
+        label(): void;
+        show(visible: any): void;
+    };
+    methods: {
+        closeDropdown(): void;
+        getParentBottom(parent: any, cb: any): void;
+        handleTreeClick(e: any): void;
+        handleRadioChange(e: any): void;
+        handleMaskClick(): void;
+        handleReset(): void;
+        handleConfirm(): void;
+        onLeaved(): void;
+    };
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/dropdown-item/dropdown-item.js b/miniprogram_npm/tdesign-miniprogram/dropdown-item/dropdown-item.js
new file mode 100644
index 0000000..0d32e1b
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/dropdown-item/dropdown-item.js
@@ -0,0 +1,146 @@
+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 menuProps from '../dropdown-menu/props';
+import { getRect } from '../common/utils';
+const { prefix } = config;
+const name = `${prefix}-dropdown-item`;
+let DropdownMenuItem = class DropdownMenuItem extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [
+            `${prefix}-class`,
+            `${prefix}-class-content`,
+            `${prefix}-class-column`,
+            `${prefix}-class-column-item`,
+            `${prefix}-class-column-item-label`,
+            `${prefix}-class-footer`,
+        ];
+        this.properties = Object.assign({}, props);
+        this.data = {
+            prefix,
+            classPrefix: name,
+            show: false,
+            top: 0,
+            maskHeight: 0,
+            initValue: null,
+            hasChanged: false,
+            duration: menuProps.duration.value,
+            zIndex: menuProps.zIndex.value,
+            overlay: menuProps.showOverlay.value,
+            labelAlias: 'label',
+            valueAlias: 'value',
+        };
+        this.parent = null;
+        this.relations = {
+            '../dropdown-menu/dropdown-menu': {
+                type: 'parent',
+                linked(target) {
+                    const { zIndex, duration, showOverlay } = target.properties;
+                    this.parent = target;
+                    this.setData({
+                        zIndex,
+                        duration,
+                        showOverlay,
+                    });
+                },
+            },
+        };
+        this.controlledProps = [
+            {
+                key: 'value',
+                event: 'change',
+            },
+        ];
+        this.observers = {
+            keys(obj) {
+                this.setData({
+                    labelAlias: obj.label || 'label',
+                    valueAlias: obj.value || 'value',
+                });
+            },
+            value(v) {
+                const { options, labelAlias, valueAlias } = this.data;
+                if (this.data.multiple) {
+                    if (!Array.isArray(v))
+                        throw TypeError('应传入数组类型的 value');
+                }
+                const target = options.find((item) => item[valueAlias] === v);
+                if (target) {
+                    this.setData({
+                        label: target[labelAlias],
+                    });
+                }
+            },
+            label() {
+                var _a;
+                (_a = this.parent) === null || _a === void 0 ? void 0 : _a.getAllItems();
+            },
+            show(visible) {
+                if (visible) {
+                    this.getParentBottom(this.parent, () => {
+                        this.setData({ wrapperVisible: true });
+                    });
+                }
+            },
+        };
+        this.methods = {
+            closeDropdown() {
+                var _a;
+                (_a = this.parent) === null || _a === void 0 ? void 0 : _a.setData({
+                    activeIdx: -1,
+                });
+                this.setData({
+                    show: false,
+                });
+            },
+            getParentBottom(parent, cb) {
+                getRect(parent, `#${prefix}-bar`).then((rect) => {
+                    this.setData({
+                        top: rect.bottom,
+                        maskHeight: rect.top,
+                    }, cb);
+                });
+            },
+            handleTreeClick(e) {
+                const { level, value: itemValue } = e.currentTarget.dataset;
+                const { value } = this.data;
+                value[level] = itemValue;
+                this._trigger('change', { value });
+            },
+            handleRadioChange(e) {
+                const { value } = e.detail;
+                this._trigger('change', { value });
+                if (!this.data.multiple) {
+                    this.closeDropdown();
+                }
+            },
+            handleMaskClick() {
+                var _a;
+                if ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.properties.closeOnClickOverlay) {
+                    this.closeDropdown();
+                }
+            },
+            handleReset() {
+                this._trigger('change', { value: [] });
+            },
+            handleConfirm() {
+                this._trigger('confirm', { value: this.data.value });
+                this.closeDropdown();
+            },
+            onLeaved() {
+                this.setData({ wrapperVisible: false });
+            },
+        };
+    }
+};
+DropdownMenuItem = __decorate([
+    wxComponent()
+], DropdownMenuItem);
+export default DropdownMenuItem;
diff --git a/miniprogram_npm/tdesign-miniprogram/dropdown-item/dropdown-item.json b/miniprogram_npm/tdesign-miniprogram/dropdown-item/dropdown-item.json
new file mode 100644
index 0000000..a07137b
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/dropdown-item/dropdown-item.json
@@ -0,0 +1,11 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-button": "../button/button",
+    "t-radio": "../radio/radio",
+    "t-radio-group": "../radio-group/radio-group",
+    "t-checkbox": "../checkbox/checkbox",
+    "t-checkbox-group": "../checkbox-group/checkbox-group",
+    "t-popup": "../popup/popup"
+  }
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/dropdown-item/dropdown-item.wxml b/miniprogram_npm/tdesign-miniprogram/dropdown-item/dropdown-item.wxml
new file mode 100644
index 0000000..704e880
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/dropdown-item/dropdown-item.wxml
@@ -0,0 +1,86 @@
+<wxs module="this" src="./index.wxs" />
+<wxs module="_" src="../common/utils.wxs" />
+
+<view
+  wx:if="{{wrapperVisible}}"
+  class="{{classPrefix}} {{prefix}}-class"
+  style="{{this.getStyles(top, zIndex, style)}}"
+>
+  <t-popup
+    visible="{{show}}"
+    z-index="{{zIndex + 1}}"
+    duration="{{duration}}"
+    show-overlay="{{showOverlay}}"
+    style="position: absolute"
+    overlay-props="{{ { style: 'position: absolute' } }}"
+    bind:leaved="onLeaved"
+    bind:visible-change="handleMaskClick"
+    class="{{classPrefix}}__popup-host"
+    t-class-content="{{classPrefix}}__content {{prefix}}-class-content"
+  >
+    <view class="{{classPrefix}}__body">
+      <!-- 单选列表 -->
+      <t-radio-group
+        wx:if="{{!multiple}}"
+        class="{{classPrefix}}__radio {{prefix}}-class-column"
+        t-class="{{classPrefix}}__radio-group"
+        value="{{value}}"
+        bind:change="handleRadioChange"
+      >
+        <t-radio
+          wx:for="{{options}}"
+          wx:key="index"
+          tabindex="0"
+          icon="line"
+          align="right"
+          class="{{classPrefix}}__radio-item {{prefix}}-class-column-item"
+          t-class="radio"
+          t-class-label="{{prefix}}-class-column-item-label"
+          value="{{item[valueAlias]}}"
+          label="{{item[labelAlias]}}"
+          disabled="{{item.disabled}}"
+        ></t-radio>
+      </t-radio-group>
+      <!-- 多选列表 -->
+      <t-checkbox-group
+        wx:else
+        class="{{classPrefix}}__checkbox {{prefix}}-class-column"
+        t-class="{{classPrefix}}__checkbox-group"
+        style="grid-template-columns: repeat({{optionsColumns}}, 1fr)"
+        value="{{value}}"
+        bind:change="handleRadioChange"
+      >
+        <block wx:for="{{options}}" wx:key="index">
+          <t-checkbox
+            tabindex="0"
+            class="{{classPrefix}}__checkbox-item {{prefix}}-class-column-item"
+            theme="tag"
+            value="{{item[valueAlias]}}"
+            label="{{item[labelAlias]}}"
+            disabled="{{item.disabled}}"
+          ></t-checkbox>
+        </block>
+      </t-checkbox-group>
+
+      <slot />
+    </view>
+    <view class="{{classPrefix}}__footer {{prefix}}-class-footer" wx:if="{{multiple}}">
+      <t-button
+        block
+        class="{{classPrefix}}__footer-btn {{classPrefix}}__reset-btn"
+        theme="light"
+        disabled="{{value.length == 0}}"
+        bindtap="handleReset"
+        >重置</t-button
+      >
+      <t-button
+        block
+        class="{{classPrefix}}__footer-btn {{classPrefix}}__confirm-btn"
+        theme="primary"
+        disabled="{{value.length == 0}}"
+        bindtap="handleConfirm"
+        >确定</t-button
+      >
+    </view>
+  </t-popup>
+</view>
diff --git a/miniprogram_npm/tdesign-miniprogram/dropdown-item/dropdown-item.wxss b/miniprogram_npm/tdesign-miniprogram/dropdown-item/dropdown-item.wxss
new file mode 100644
index 0000000..bbd4dd6
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/dropdown-item/dropdown-item.wxss
@@ -0,0 +1,111 @@
+.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);
+}
+/** dropdown-item */
+.t-dropdown-item {
+  position: fixed;
+  right: 0;
+  left: 0;
+  top: 0;
+  overflow: hidden;
+  bottom: 0;
+  /** 树形结构 */
+}
+.t-dropdown-item__content {
+  display: flex;
+  flex-direction: column;
+  z-index: 11600;
+  overflow: hidden;
+}
+.t-dropdown-item__popup-host {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.t-dropdown-item__body {
+  flex: 1;
+  background: var(--td-dropdown-menu-bg-color, var(--td-bg-color-block, #fff));
+  overflow: auto;
+  max-height: var(--td-dropdown-body-max-height, 560rpx);
+}
+.t-dropdown-item__body--tree {
+  display: flex;
+  overflow: hidden;
+}
+.t-dropdown-item__body--multi {
+  padding-top: var(--td-spacer, 16rpx);
+  padding-bottom: var(--td-spacer, 16rpx);
+  overflow-y: auto;
+}
+.t-dropdown-item__footer {
+  display: flex;
+  background: var(--td-dropdown-menu-bg-color, var(--td-bg-color-block, #fff));
+  position: relative;
+  padding: 32rpx;
+}
+.t-dropdown-item__footer::before {
+  z-index: 1;
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  right: 0;
+  left: 0;
+  top: 0;
+  border-top: 1px solid var(--td-border-level-1-color, #e6e6e6);
+  transform: scaleY(0.5);
+}
+.t-dropdown-item__footer-btn {
+  flex: 1;
+}
+.t-dropdown-item__footer-btn + .t-dropdown-item__footer-btn {
+  margin-left: 32rpx;
+}
+.t-dropdown-item__radio,
+.t-dropdown-item__checkbox {
+  width: 100%;
+  overflow: scroll;
+  box-sizing: border-box;
+}
+.t-dropdown-item__checkbox-group {
+  display: grid;
+  padding: 32rpx;
+  grid-gap: 24rpx;
+}
+.t-dropdown-item__tree-item {
+  height: var(--td-tree-item-height, 96rpx);
+  line-height: var(--td-tree-item-height, 96rpx);
+  font-size: var(--td-tree-item-font-size, 32rpx);
+  padding-left: 32rpx;
+}
+.t-dropdown-item__tree-item--active {
+  color: var(--td-tree-item-active-color, var(--td-primary-color, #0052d9));
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/dropdown-item/index.wxs b/miniprogram_npm/tdesign-miniprogram/dropdown-item/index.wxs
new file mode 100644
index 0000000..8cbdf69
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/dropdown-item/index.wxs
@@ -0,0 +1,9 @@
+var getStyles = function (top, zIndex, style) {
+  var topStyle = top ? 'top:' + top + 'px;' : '';
+  var zIndexStyle = zIndex ? 'z-index:' + zIndex + ';' : '';
+  return topStyle + zIndexStyle + style;
+};
+
+module.exports = {
+  getStyles: getStyles,
+};
diff --git a/miniprogram_npm/tdesign-miniprogram/dropdown-item/props.d.ts b/miniprogram_npm/tdesign-miniprogram/dropdown-item/props.d.ts
new file mode 100644
index 0000000..aa95de6
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/dropdown-item/props.d.ts
@@ -0,0 +1,3 @@
+import { TdDropdownItemProps } from './type';
+declare const props: TdDropdownItemProps;
+export default props;
diff --git a/miniprogram_npm/tdesign-miniprogram/dropdown-item/props.js b/miniprogram_npm/tdesign-miniprogram/dropdown-item/props.js
new file mode 100644
index 0000000..eb8e77d
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/dropdown-item/props.js
@@ -0,0 +1,45 @@
+const props = {
+    style: {
+        type: String,
+        value: '',
+    },
+    disabled: {
+        type: Boolean,
+        value: false,
+    },
+    externalClasses: {
+        type: Array,
+    },
+    keys: {
+        type: Object,
+    },
+    label: {
+        type: String,
+        value: '',
+    },
+    multiple: {
+        type: Boolean,
+        value: false,
+    },
+    options: {
+        type: Array,
+        value: [],
+    },
+    optionsColumns: {
+        type: null,
+        value: 1,
+    },
+    optionsLayout: {
+        type: String,
+        value: 'columns',
+    },
+    value: {
+        type: null,
+        value: undefined,
+    },
+    defaultValue: {
+        type: null,
+        value: undefined,
+    },
+};
+export default props;
diff --git a/miniprogram_npm/tdesign-miniprogram/dropdown-item/type.d.ts b/miniprogram_npm/tdesign-miniprogram/dropdown-item/type.d.ts
new file mode 100644
index 0000000..3858490
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/dropdown-item/type.d.ts
@@ -0,0 +1,60 @@
+import { KeysType } from '../common/common';
+export interface TdDropdownItemProps {
+    style?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    disabled?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: [
+            't-class',
+            't-class-content',
+            't-class-column',
+            't-class-column-item',
+            't-class-column-item-label',
+            't-class-footer'
+        ];
+    };
+    keys?: {
+        type: ObjectConstructor;
+        value?: KeysType;
+    };
+    label?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    multiple?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    options?: {
+        type: ArrayConstructor;
+        value?: Array<DropdownOption>;
+    };
+    optionsColumns?: {
+        type: null;
+        value?: string | number;
+    };
+    optionsLayout?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    value?: {
+        type: null;
+        value?: DropdownValue;
+    };
+    defaultValue?: {
+        type: null;
+        value?: DropdownValue;
+    };
+}
+export interface DropdownOption {
+    label: string;
+    disabled: boolean;
+    value: DropdownValue;
+}
+export declare type DropdownValue = string | number | Array<DropdownValue>;
diff --git a/miniprogram_npm/tdesign-miniprogram/dropdown-item/type.js b/miniprogram_npm/tdesign-miniprogram/dropdown-item/type.js
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/dropdown-item/type.js
@@ -0,0 +1 @@
+export {};
diff --git a/miniprogram_npm/tdesign-miniprogram/grid-item/grid-item.d.ts b/miniprogram_npm/tdesign-miniprogram/grid-item/grid-item.d.ts
new file mode 100644
index 0000000..41f1796
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/grid-item/grid-item.d.ts
@@ -0,0 +1,32 @@
+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;
+        column: number;
+        labelID: string;
+    };
+    observers: {
+        icon(icon: any): void;
+    };
+    lifetimes: {
+        ready(): void;
+    };
+    updateStyle(): void;
+    getWidthStyle(): string;
+    getPaddingStyle(): string;
+    getBorderStyle(): string;
+    onClick(e: any): void;
+    jumpLink(): void;
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/grid-item/grid-item.js b/miniprogram_npm/tdesign-miniprogram/grid-item/grid-item.js
new file mode 100644
index 0000000..3f7d8a9
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/grid-item/grid-item.js
@@ -0,0 +1,132 @@
+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 './props';
+import { uniqueFactory, setIcon } from '../common/utils';
+const { prefix } = config;
+const name = `${prefix}-grid-item`;
+const getUniqueID = uniqueFactory('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/grid': {
+                type: 'ancestor',
+                linked(target) {
+                    this.parent = target;
+                    this.updateStyle();
+                    this.setData({
+                        column: target.data.column,
+                    });
+                },
+            },
+        };
+        this.properties = props;
+        this.data = {
+            prefix,
+            classPrefix: name,
+            gridItemStyle: '',
+            gridItemWrapperStyle: '',
+            gridItemContentStyle: '',
+            align: 'center',
+            layout: 'vertical',
+            column: 0,
+            labelID: '',
+        };
+        this.observers = {
+            icon(icon) {
+                const obj = setIcon('icon', icon, '');
+                this.setData(Object.assign({}, obj));
+            },
+        };
+        this.lifetimes = {
+            ready() {
+                this.setData({
+                    labelID: getUniqueID(),
+                });
+            },
+        };
+    }
+    updateStyle() {
+        const { hover, align } = this.parent.properties;
+        const { style } = this.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(';')}${style ? `;${style}` : ''}`,
+            gridItemWrapperStyle: gridItemWrapperStyles.join(';'),
+            gridItemContentStyle: gridItemContentStyles.join(';'),
+            hover,
+            layout: this.properties.layout,
+            align: align,
+        });
+    }
+    getWidthStyle() {
+        const { column } = this.parent.properties;
+        return column > 0 ? `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/miniprogram_npm/tdesign-miniprogram/grid-item/grid-item.json b/miniprogram_npm/tdesign-miniprogram/grid-item/grid-item.json
new file mode 100644
index 0000000..26991b4
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/grid-item/grid-item.json
@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-image": "../image/image",
+    "t-icon": "../icon/icon",
+    "t-badge": "../badge/badge"
+  }
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/grid-item/grid-item.wxml b/miniprogram_npm/tdesign-miniprogram/grid-item/grid-item.wxml
new file mode 100644
index 0000000..ac0f0ed
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/grid-item/grid-item.wxml
@@ -0,0 +1,74 @@
+<import src="../common/template/image.wxml" />
+<import src="../common/template/icon.wxml" />
+<wxs module="util">
+  module.exports.getImageSize = function(column) { if (column >= 5) return 'small'; if (column == 4) return 'middle';
+  return 'large'; }
+</wxs>
+<wxs module="_" src="../common/utils.wxs" />
+
+<view
+  class="{{_.cls(classPrefix, [['auto-size', column == 0]])}} {{prefix}}-class"
+  style="{{ gridItemStyle }}"
+  hover-class="{{hover ? classPrefix + '--hover':''}}"
+  hover-stay-time="{{200}}"
+  bindtap="onClick"
+  aria-role="{{ariaRole || 'button'}}"
+  aria-labelledby="{{labelID}}"
+>
+  <view class="{{_.cls(classPrefix + '__wrapper', [layout])}}" style="{{gridItemWrapperStyle}}">
+    <view
+      class="{{_.cls(classPrefix + '__content', [align, layout])}} {{prefix}}-class-content"
+      style="{{gridItemContentStyle}}"
+    >
+      <slot />
+      <t-badge
+        wx:if="{{image || icon}}"
+        color="{{badgeProps.color}}"
+        content="{{badgeProps.content}}"
+        count="{{badgeProps.count}}"
+        dot="{{badgeProps.dot}}"
+        max-count="{{badgeProps.maxCount || 99}}"
+        offset="{{badgeProps.offset}}"
+        shape="{{badgeProps.shape || 'circle'}}"
+        show-zero="{{badgeProps.showZero}}"
+        size="{{badgeProps.size || 'medium'}}"
+        t-class="{{badgeProps.tClass}}"
+        t-class-content="{{badgeProps.tClassContent}}"
+        t-class-count="{{badgeProps.tClassCount}}"
+      >
+        <view
+          class="{{_.cls(classPrefix + '__image', [util.getImageSize(column), ['icon', icon]])}} {{prefix}}-class-image"
+        >
+          <block wx:if="{{image && image !== 'slot'}}">
+            <template
+              is="image"
+              data="{{ src: image, shape: 'round', mode: 'widthFix', tClass: _.cls(classPrefix + '__image', [util.getImageSize(column)]), ...imageProps }}"
+            />
+          </block>
+          <slot wx:else name="image" />
+          <template
+            wx:if="{{iconName || _.isNoEmptyObj(iconData)}}"
+            is="icon"
+            data="{{class: classPrefix + '__icon', name: iconName, ...iconData}}"
+          />
+        </view>
+      </t-badge>
+      <view class="{{_.cls(classPrefix + '__words', [layout])}}" id="{{labelID}}">
+        <view
+          wx:if="{{text && text !== 'slot'}}"
+          class="{{_.cls(classPrefix + '__text', [util.getImageSize(column), layout])}} {{prefix}}-class-text"
+        >
+          {{text}}
+        </view>
+        <slot wx:else name="text" class="{{prefix}}-class-text" />
+        <view
+          wx:if="{{description && description!== 'slot'}}"
+          class="{{_.cls(classPrefix + '__description', [util.getImageSize(column), layout])}} {{prefix}}-class-description"
+        >
+          {{description}}
+        </view>
+        <slot wx:else name="description" class="{{prefix}}-class-description" />
+      </view>
+    </view>
+  </view>
+</view>
diff --git a/miniprogram_npm/tdesign-miniprogram/grid-item/grid-item.wxss b/miniprogram_npm/tdesign-miniprogram/grid-item/grid-item.wxss
new file mode 100644
index 0000000..6351f25
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/grid-item/grid-item.wxss
@@ -0,0 +1,124 @@
+.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-grid-item {
+  box-sizing: border-box;
+  height: 100%;
+  display: inline-block;
+  vertical-align: top;
+}
+.t-grid-item--hover {
+  background-color: var(--td-grid-item-hover-bg-color, var(--td-gray-color-1, #f3f3f3));
+}
+.t-grid-item--auto-size {
+  width: 168rpx;
+}
+.t-grid-item__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+  position: relative;
+  padding: var(--td-grid-item-padding, 32rpx) 0 24rpx;
+}
+.t-grid-item__content--horizontal {
+  flex-direction: row;
+  padding-left: var(--td-grid-item-padding, 32rpx);
+}
+.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__words--horizontal {
+  margin-left: 24rpx;
+}
+.t-grid-item__words:empty {
+  display: none;
+}
+.t-grid-item__image:not(:empty) {
+  width: var(--td-grid-item-image-width, 96rpx);
+  height: var(--td-grid-item-image-width, 96rpx);
+}
+.t-grid-item__image:not(:empty).t-grid-item__image--small {
+  width: 64rpx;
+  height: 64rpx;
+}
+.t-grid-item__image:not(:empty).t-grid-item__image--middle {
+  width: 80rpx;
+  height: 80rpx;
+}
+.t-grid-item__image:not(:empty) .t-grid__image {
+  width: 100%;
+  height: 100%;
+}
+.t-grid-item__image--icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--td-gray-color-2, #eeeeee);
+  border-radius: var(--td-radius-default, 12rpx);
+}
+.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, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+  font-size: var(--td-grid-item-text-font-size, 28rpx);
+  line-height: var(--td-grid-item-text-line-height, 44rpx);
+  padding-top: var(--td-grid-item-text-padding-top, 16rpx);
+}
+.t-grid-item__text--small,
+.t-grid-item__text--middle {
+  font-size: 24rpx;
+}
+.t-grid-item__text--horizontal {
+  padding-top: 0;
+  text-align: left;
+}
+.t-grid-item__description {
+  width: inherit;
+  color: var(--td-grid-item-description-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
+  font-size: var(--td-grid-item-description-font-size, 24rpx);
+  line-height: var(--td-grid-item-description-line-height, 40rpx);
+}
+.t-grid-item__description--horizontal {
+  text-align-last: left;
+}
+.t-grid-item__icon {
+  font-size: 48rpx;
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/grid-item/props.d.ts b/miniprogram_npm/tdesign-miniprogram/grid-item/props.d.ts
new file mode 100644
index 0000000..bd6c2fb
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/grid-item/props.d.ts
@@ -0,0 +1,3 @@
+import { TdGridItemProps } from './type';
+declare const props: TdGridItemProps;
+export default props;
diff --git a/miniprogram_npm/tdesign-miniprogram/grid-item/props.js b/miniprogram_npm/tdesign-miniprogram/grid-item/props.js
new file mode 100644
index 0000000..0a9d74f
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/grid-item/props.js
@@ -0,0 +1,41 @@
+const props = {
+    badgeProps: {
+        type: Object,
+        value: null,
+    },
+    style: {
+        type: String,
+        value: '',
+    },
+    description: {
+        type: String,
+    },
+    externalClasses: {
+        type: Array,
+    },
+    icon: {
+        type: null,
+    },
+    image: {
+        type: String,
+    },
+    imageProps: {
+        type: Object,
+    },
+    jumpType: {
+        type: String,
+        value: 'navigate-to',
+    },
+    layout: {
+        type: String,
+        value: 'vertical',
+    },
+    text: {
+        type: String,
+    },
+    url: {
+        type: String,
+        value: '',
+    },
+};
+export default props;
diff --git a/miniprogram_npm/tdesign-miniprogram/grid-item/type.d.ts b/miniprogram_npm/tdesign-miniprogram/grid-item/type.d.ts
new file mode 100644
index 0000000..c75363b
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/grid-item/type.d.ts
@@ -0,0 +1,47 @@
+import { BadgeProps } from '../badge/index';
+export interface TdGridItemProps {
+    badgeProps?: {
+        type: ObjectConstructor;
+        value?: BadgeProps;
+    };
+    style?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    description?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class', 't-class-image', 't-class-text', 't-class-description'];
+    };
+    icon?: {
+        type: null;
+        value?: string | object;
+    };
+    image?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    imageProps?: {
+        type: ObjectConstructor;
+        value?: object;
+    };
+    jumpType?: {
+        type: StringConstructor;
+        value?: 'redirect-to' | 'switch-tab' | 'relaunch' | 'navigate-to';
+    };
+    layout?: {
+        type: StringConstructor;
+        value?: 'vertical' | 'horizontal';
+    };
+    text?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    url?: {
+        type: StringConstructor;
+        value?: string;
+    };
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/grid-item/type.js b/miniprogram_npm/tdesign-miniprogram/grid-item/type.js
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/grid-item/type.js
@@ -0,0 +1 @@
+export {};
diff --git a/miniprogram_npm/tdesign-miniprogram/picker-item/picker-item.d.ts b/miniprogram_npm/tdesign-miniprogram/picker-item/picker-item.d.ts
new file mode 100644
index 0000000..a1ffe82
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/picker-item/picker-item.d.ts
@@ -0,0 +1,27 @@
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+export default class PickerItem extends SuperComponent {
+    relations: RelationsOptions;
+    externalClasses: string[];
+    properties: import("./type").TdPickerItemProps;
+    observers: {
+        options(this: PickerItem): void;
+    };
+    data: {
+        prefix: string;
+        classPrefix: string;
+        offset: number;
+        duration: number;
+        value: string;
+        curIndex: number;
+    };
+    methods: {
+        onTouchStart(event: any): void;
+        onTouchMove(event: any): void;
+        onTouchEnd(): void;
+        update(): void;
+        resetOrigin(): void;
+        getCount(): any;
+    };
+    calculateViewDeltaY(touchDeltaY: number): number;
+    created(): void;
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/picker-item/picker-item.js b/miniprogram_npm/tdesign-miniprogram/picker-item/picker-item.js
new file mode 100644
index 0000000..333deaf
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/picker-item/picker-item.js
@@ -0,0 +1,116 @@
+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 name = `${prefix}-picker-item`;
+const itemHeight = 80;
+const DefaultDuration = 240;
+const { windowWidth } = wx.getSystemInfoSync();
+const rpx2px = (rpx) => Math.floor((windowWidth * rpx) / 750);
+const range = function (num, min, max) {
+    return Math.min(Math.max(num, min), max);
+};
+let PickerItem = class PickerItem extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.relations = {
+            '../picker/picker': {
+                type: 'parent',
+            },
+        };
+        this.externalClasses = ['class', `${prefix}-class`];
+        this.properties = props;
+        this.observers = {
+            options() {
+                this.update();
+            },
+        };
+        this.data = {
+            prefix,
+            classPrefix: name,
+            offset: 0,
+            duration: 0,
+            value: '',
+            curIndex: 0,
+        };
+        this.methods = {
+            onTouchStart(event) {
+                this.StartY = event.touches[0].clientY;
+                this.StartOffset = this.data.offset;
+                this.setData({ duration: 0 });
+            },
+            onTouchMove(event) {
+                const { StartY, StartOffset, itemHeight } = this;
+                const touchDeltaY = event.touches[0].clientY - StartY;
+                const deltaY = this.calculateViewDeltaY(touchDeltaY);
+                this.setData({
+                    offset: range(StartOffset + deltaY, -(this.getCount() * itemHeight), 0),
+                    duration: DefaultDuration,
+                });
+            },
+            onTouchEnd() {
+                const { offset } = this.data;
+                const { options } = this.properties;
+                if (offset === this.StartOffset) {
+                    return;
+                }
+                const index = range(Math.round(-offset / this.itemHeight), 0, this.getCount() - 1);
+                this.setData({
+                    curIndex: index,
+                    offset: -index * this.itemHeight,
+                });
+                if (index === this._selectedIndex) {
+                    return;
+                }
+                wx.nextTick(() => {
+                    var _a, _b, _c;
+                    this._selectedIndex = index;
+                    this._selectedValue = (_a = options[index]) === null || _a === void 0 ? void 0 : _a.value;
+                    this._selectedLabel = (_b = options[index]) === null || _b === void 0 ? void 0 : _b.label;
+                    (_c = this.$parent) === null || _c === void 0 ? void 0 : _c.triggerColumnChange({
+                        index,
+                        column: this.columnIndex || 0,
+                    });
+                });
+            },
+            update() {
+                var _a, _b;
+                const { options, value } = this.data;
+                const index = options.findIndex((item) => item.value === value);
+                const selectedIndex = index > 0 ? index : 0;
+                this.setData({
+                    offset: -selectedIndex * this.itemHeight,
+                    curIndex: selectedIndex,
+                });
+                this._selectedIndex = selectedIndex;
+                this._selectedValue = (_a = options[selectedIndex]) === null || _a === void 0 ? void 0 : _a.value;
+                this._selectedLabel = (_b = options[selectedIndex]) === null || _b === void 0 ? void 0 : _b.label;
+            },
+            resetOrigin() {
+                this.update();
+            },
+            getCount() {
+                var _a, _b;
+                return (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length;
+            },
+        };
+    }
+    calculateViewDeltaY(touchDeltaY) {
+        return Math.abs(touchDeltaY) > itemHeight ? 1.2 * touchDeltaY : touchDeltaY;
+    }
+    created() {
+        this.StartY = 0;
+        this.StartOffset = 0;
+        this.itemHeight = rpx2px(itemHeight);
+    }
+};
+PickerItem = __decorate([
+    wxComponent()
+], PickerItem);
+export default PickerItem;
diff --git a/miniprogram_npm/tdesign-miniprogram/picker-item/picker-item.json b/miniprogram_npm/tdesign-miniprogram/picker-item/picker-item.json
new file mode 100644
index 0000000..a89ef4d
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/picker-item/picker-item.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/picker-item/picker-item.wxml b/miniprogram_npm/tdesign-miniprogram/picker-item/picker-item.wxml
new file mode 100644
index 0000000..214a08e
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/picker-item/picker-item.wxml
@@ -0,0 +1,24 @@
+<wxs src="../common/utils.wxs" module="_" />
+<view
+  style="{{ style }}"
+  class="{{_.cls(classPrefix + '__group', [])}} class {{prefix}}-class"
+  bind:touchstart="onTouchStart"
+  catch:touchmove="onTouchMove"
+  bind:touchend="onTouchEnd"
+  bind:touchcancel="onTouchEnd"
+>
+  <view
+    class="{{classPrefix}}__wrapper"
+    style="transition: transform {{ duration }}ms cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, {{ offset }}px, 0)"
+  >
+    <view
+      class="{{_.cls(classPrefix + '__item', [['active', curIndex == index]])}}"
+      wx:for="{{options}}"
+      wx:key="index"
+      wx:for-item="option"
+      data-index="{{ index }}"
+    >
+      {{option.label}}
+    </view>
+  </view>
+</view>
diff --git a/miniprogram_npm/tdesign-miniprogram/picker-item/picker-item.wxss b/miniprogram_npm/tdesign-miniprogram/picker-item/picker-item.wxss
new file mode 100644
index 0000000..daee0e8
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/picker-item/picker-item.wxss
@@ -0,0 +1,52 @@
+.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);
+}
+:host {
+  display: flex;
+}
+.t-picker-item__group {
+  height: var(--td-picker-group-height, 400rpx);
+  overflow: hidden;
+  flex: 1;
+  z-index: 1;
+}
+.t-picker-item__wrapper {
+  padding: 144rpx 0;
+}
+.t-picker-item__item {
+  text-align: center;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  height: var(--td-picker-item-height, 80rpx);
+  line-height: var(--td-picker-item-height, 80rpx);
+  color: var(--td-picker-item-color, var(--td-font-gray-2, rgba(0, 0, 0, 0.6)));
+}
+.t-picker-item__item--active {
+  color: var(--td-picker-item-active-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+  font-weight: 600;
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/picker-item/props.d.ts b/miniprogram_npm/tdesign-miniprogram/picker-item/props.d.ts
new file mode 100644
index 0000000..1140c78
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/picker-item/props.d.ts
@@ -0,0 +1,3 @@
+import { TdPickerItemProps } from './type';
+declare const props: TdPickerItemProps;
+export default props;
diff --git a/miniprogram_npm/tdesign-miniprogram/picker-item/props.js b/miniprogram_npm/tdesign-miniprogram/picker-item/props.js
new file mode 100644
index 0000000..bfc2dfa
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/picker-item/props.js
@@ -0,0 +1,14 @@
+const props = {
+    style: {
+        type: String,
+        value: '',
+    },
+    format: {
+        type: null,
+    },
+    options: {
+        type: Array,
+        value: [],
+    },
+};
+export default props;
diff --git a/miniprogram_npm/tdesign-miniprogram/picker-item/type.d.ts b/miniprogram_npm/tdesign-miniprogram/picker-item/type.d.ts
new file mode 100644
index 0000000..d33515b
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/picker-item/type.d.ts
@@ -0,0 +1,18 @@
+export interface TdPickerItemProps {
+    style?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    format?: {
+        type: undefined;
+        value?: (option: PickerItemOption) => string;
+    };
+    options?: {
+        type: ArrayConstructor;
+        value?: PickerItemOption[];
+    };
+}
+export interface PickerItemOption {
+    label: string;
+    value: string | number;
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/picker-item/type.js b/miniprogram_npm/tdesign-miniprogram/picker-item/type.js
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/picker-item/type.js
@@ -0,0 +1 @@
+export {};
diff --git a/miniprogram_npm/tdesign-miniprogram/step-item/props.d.ts b/miniprogram_npm/tdesign-miniprogram/step-item/props.d.ts
new file mode 100644
index 0000000..d941a41
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/step-item/props.d.ts
@@ -0,0 +1,3 @@
+import { TdStepItemProps } from './type';
+declare const props: TdStepItemProps;
+export default props;
diff --git a/miniprogram_npm/tdesign-miniprogram/step-item/props.js b/miniprogram_npm/tdesign-miniprogram/step-item/props.js
new file mode 100644
index 0000000..788a83a
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/step-item/props.js
@@ -0,0 +1,29 @@
+const props = {
+    content: {
+        type: String,
+        value: '',
+    },
+    externalClasses: {
+        type: Array,
+    },
+    icon: {
+        type: String,
+    },
+    status: {
+        type: String,
+        value: 'default',
+    },
+    style: {
+        type: String,
+        value: '',
+    },
+    subStepItems: {
+        type: Array,
+        value: [],
+    },
+    title: {
+        type: String,
+        value: '',
+    },
+};
+export default props;
diff --git a/miniprogram_npm/tdesign-miniprogram/step-item/step-item.d.ts b/miniprogram_npm/tdesign-miniprogram/step-item/step-item.d.ts
new file mode 100644
index 0000000..b1b81b7
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/step-item/step-item.d.ts
@@ -0,0 +1,22 @@
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+export default class StepItem extends SuperComponent {
+    options: {
+        multipleSlots: boolean;
+    };
+    relations: RelationsOptions;
+    externalClasses: string[];
+    properties: import("./type").TdStepItemProps;
+    data: {
+        classPrefix: string;
+        prefix: string;
+        index: number;
+        isDot: boolean;
+        curStatus: string;
+        layout: string;
+        isLastChild: boolean;
+    };
+    methods: {
+        updateStatus(current: any, currentStatus: any, index: any, theme: any, layout: any, steps: any): void;
+        onTap(): void;
+    };
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/step-item/step-item.js b/miniprogram_npm/tdesign-miniprogram/step-item/step-item.js
new file mode 100644
index 0000000..54b0744
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/step-item/step-item.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 { wxComponent, SuperComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+const { prefix } = config;
+const name = `${prefix}-steps-item`;
+let StepItem = class StepItem extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.options = {
+            multipleSlots: true,
+        };
+        this.relations = {
+            '../steps/steps': {
+                type: 'parent',
+            },
+        };
+        this.externalClasses = [
+            `${prefix}-class`,
+            `${prefix}-class-content`,
+            `${prefix}-class-title`,
+            `${prefix}-class-description`,
+            `${prefix}-class-extra`,
+        ];
+        this.properties = props;
+        this.data = {
+            classPrefix: name,
+            prefix,
+            index: 0,
+            isDot: false,
+            curStatus: '',
+            layout: 'vertical',
+            isLastChild: false,
+        };
+        this.methods = {
+            updateStatus(current, currentStatus, index, theme, layout, steps) {
+                let curStatus = this.data.status;
+                if (curStatus === 'default') {
+                    if (index < Number(current)) {
+                        curStatus = 'finish';
+                    }
+                    else if (index === Number(current)) {
+                        curStatus = currentStatus;
+                    }
+                }
+                this.setData({
+                    curStatus,
+                    index,
+                    isDot: theme === 'dot',
+                    layout,
+                    theme,
+                    isLastChild: steps.length - 1 === index,
+                });
+            },
+            onTap() {
+                this.$parent.handleClick(this.data.index);
+            },
+        };
+    }
+};
+StepItem = __decorate([
+    wxComponent()
+], StepItem);
+export default StepItem;
diff --git a/miniprogram_npm/tdesign-miniprogram/step-item/step-item.json b/miniprogram_npm/tdesign-miniprogram/step-item/step-item.json
new file mode 100644
index 0000000..049940c
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/step-item/step-item.json
@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "../icon/icon"
+  }
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/step-item/step-item.wxml b/miniprogram_npm/tdesign-miniprogram/step-item/step-item.wxml
new file mode 100644
index 0000000..0954b49
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/step-item/step-item.wxml
@@ -0,0 +1,39 @@
+<wxs src="../common/utils.wxs" module="_" />
+
+<view
+  style="{{style}}"
+  class="{{_.cls(classPrefix, [layout, ['readonly', readonly]])}} {{prefix}}-class"
+  bind:tap="onTap"
+>
+  <!-- icon  -->
+  <view class="{{_.cls(classPrefix + '__anchor', [layout])}}">
+    <view wx:if="{{isDot}}" class="{{_.cls(classPrefix + '__dot', [curStatus])}}" />
+    <view wx:elif="{{icon}}" class="{{_.cls(classPrefix + '__icon', [curStatus])}}">
+      <slot name="icon" />
+      <t-icon name="{{icon}}" size="22" />
+    </view>
+    <view wx:else class="{{_.cls(classPrefix + '__circle', [curStatus])}}">
+      <t-icon wx:if="{{curStatus == 'finish'}}" name="check" />
+      <t-icon wx:elif="{{curStatus == 'error'}}" name="close" />
+      <block wx:else>{{index + 1}}</block>
+    </view>
+  </view>
+
+  <!-- content -->
+  <view class="{{_.cls(classPrefix + '__content', [layout, ['last', isLastChild]])}} {{prefix}}-class-content">
+    <view class="{{_.cls(classPrefix + '__title', [curStatus, layout])}} {{prefix}}-class-title">
+      {{ title }}
+      <slot name="title" />
+      <slot wx:if="{{layout === 'vertical'}}" name="title-right" />
+    </view>
+    <view class="{{_.cls(classPrefix + '__description', [layout])}} {{prefix}}-class-description">
+      {{ content }}
+      <slot name="content" />
+    </view>
+    <view class="{{_.cls(classPrefix + '__extra', [layout])}} {{prefix}}-class-extra">
+      <slot name="extra" />
+    </view>
+  </view>
+
+  <view wx:if="{{!isLastChild}}" class="{{_.cls(classPrefix + '__line', [curStatus, layout, theme])}}" />
+</view>
diff --git a/miniprogram_npm/tdesign-miniprogram/step-item/step-item.wxss b/miniprogram_npm/tdesign-miniprogram/step-item/step-item.wxss
new file mode 100644
index 0000000..ddc299b
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/step-item/step-item.wxss
@@ -0,0 +1,211 @@
+.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-steps-item {
+  flex: 1;
+  vertical-align: top;
+  position: relative;
+  display: flex;
+}
+.t-steps-item__circle--default {
+  color: var(--td-step-item-default-circle-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
+  background-color: var(--td-step-item-default-circle-bg, var(--td-gray-color-1, #f3f3f3));
+}
+.t-steps-item__title--default {
+  color: var(--td-step-item-default-title-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
+}
+.t-steps-item__icon--default {
+  color: var(--td-step-item-default-icon-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
+}
+.t-steps-item__dot--default {
+  border-color: var(--td-step-item-default-dot-border-color, var(--td-gray-color-5, #c5c5c5));
+}
+.t-steps-item__circle--process {
+  color: var(--td-step-item-process-circle-color, var(--td-white-color-1, #fff));
+  background-color: var(--td-step-item-process-circle-bg, var(--td-primary-color, #0052d9));
+}
+.t-steps-item__title--process {
+  color: var(--td-step-item-process-title-color, var(--td-primary-color, #0052d9));
+}
+.t-steps-item__icon--process {
+  color: var(--td-step-item-process-icon-color, var(--td-primary-color, #0052d9));
+}
+.t-steps-item__dot--process {
+  border-color: var(--td-step-item-process-dot-border-color, var(--td-primary-color, #0052d9));
+}
+.t-steps-item__circle--finish {
+  color: var(--td-step-item-finish-circle-color, var(--td-primary-color, #0052d9));
+  background-color: var(--td-step-item-finish-circle-bg, var(--td-primary-color-1, #ecf2fe));
+}
+.t-steps-item__title--finish {
+  color: var(--td-step-item-finish-title-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+}
+.t-steps-item__icon--finish {
+  color: var(--td-step-item-finish-icon-color, var(--td-primary-color, #0052d9));
+}
+.t-steps-item__dot--finish {
+  border-color: var(--td-step-item-finish-dot-border-color, var(--td-primary-color, #0052d9));
+}
+.t-steps-item__circle--error {
+  color: var(--td-step-item-error-circle-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
+  background-color: var(--td-step-item-error-circle-bg, var(--td-error-color-1, #fdecee));
+}
+.t-steps-item__title--error {
+  color: var(--td-step-item-error-title-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
+}
+.t-steps-item__icon--error {
+  color: var(--td-step-item-error-icon-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
+}
+.t-steps-item__dot--error {
+  border-color: var(--td-step-item-error-dot-border-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
+}
+.t-steps-item--horizontal {
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.t-steps-item__anchor {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.t-steps-item__anchor--vertical {
+  width: var(--td-step-item-circle-size, 44rpx);
+  height: var(--td-step-item-circle-size, 44rpx);
+}
+.t-steps-item__circle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--td-step-item-circle-size, 44rpx);
+  height: var(--td-step-item-circle-size, 44rpx);
+  text-align: center;
+  border-radius: 50%;
+  font-size: var(--td-step-item-circle-font-size, 28rpx);
+}
+.t-steps-item__icon {
+  z-index: 1;
+  vertical-align: top;
+  font-size: var(--td-font-size-base, 28rpx);
+  position: relative;
+}
+.t-steps-item__icon--finsh,
+.t-steps-item__icon--process {
+  color: var(--td-primary-color, #0052d9);
+}
+.t-steps-item__dot {
+  width: var(--td-step-item-dot-size, 16rpx);
+  height: var(--td-step-item-dot-size, 16rpx);
+  border-radius: 50%;
+  border-width: 1px;
+  border-style: solid;
+  box-sizing: border-box;
+}
+.t-steps-item__dot--finish {
+  background-color: var(--td-step-item-process-dot-border-color, var(--td-primary-color, #0052d9));
+}
+.t-steps-item__dot--error {
+  background-color: var(--td-step-item-error-dot-border-color, var(--td-error-color, var(--td-error-color-6, #e34d59)));
+}
+.t-steps-item__content {
+  text-align: center;
+}
+.t-steps-item__content--horizontal {
+  max-width: 80px;
+  margin-top: 16rpx;
+}
+.t-steps-item__content--vertical {
+  margin-left: 16rpx;
+  flex: 1;
+  padding-bottom: 32rpx;
+}
+.t-steps-item__content--vertical.t-steps-item__content--last {
+  padding-bottom: 0;
+}
+.t-steps-item__title {
+  position: relative;
+  line-height: var(--td-step-item-circle-size, 44rpx);
+  font-size: var(--td-font-size-base, 28rpx);
+}
+.t-steps-item__title--process {
+  font-weight: 600;
+}
+.t-steps-item__title--vertical {
+  text-align: left;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8rpx;
+}
+.t-steps-item__description {
+  color: var(--td-step-item-descrition-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
+  line-height: 40rpx;
+  font-size: var(--td-font-size-s, 24rpx);
+}
+.t-steps-item__description--vertical {
+  text-align: left;
+}
+.t-steps-item__extra:not(:empty) {
+  margin-top: 16rpx;
+}
+.t-steps-item__line {
+  background-color: var(--td-step-item-line-color, var(--td-gray-color-4, #dcdcdc));
+  content: '';
+  display: block;
+  position: absolute;
+}
+.t-steps-item__line--horizontal {
+  height: 1px;
+  transform: translateY(-50%);
+  width: calc(100% - 32rpx - var(--td-step-item-circle-size, 44rpx));
+  top: calc(var(--td-step-item-circle-size, 44rpx) / 2 + 1px);
+  left: calc(50% + var(--td-step-item-circle-size, 44rpx) / 2 + 16rpx);
+}
+.t-steps-item__line--horizontal.t-steps-item__line--dot {
+  top: calc(var(--td-step-item-dot-size, 16rpx) / 2);
+}
+.t-steps-item__line--finish {
+  background-color: var(--td-step-item-finish-line-color, var(--td-primary-color, #0052d9));
+}
+.t-steps-item__line--vertical {
+  height: calc(100% - 32rpx - var(--td-step-item-circle-size, 44rpx));
+  width: 1px;
+  transform: translateX(-50%);
+  left: calc(var(--td-step-item-circle-size, 44rpx) / 2);
+  top: calc(var(--td-step-item-circle-size, 44rpx) + 16rpx);
+}
+.t-steps-item__line--vertical.t-steps-item__line--dot {
+  top: var(--td-step-item-circle-size, 44rpx);
+  height: calc(100% - var(--td-step-item-circle-size, 44rpx));
+}
+:host {
+  flex: 1;
+  vertical-align: top;
+  position: relative;
+  align-self: flex-start;
+  width: inherit;
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/step-item/type.d.ts b/miniprogram_npm/tdesign-miniprogram/step-item/type.d.ts
new file mode 100644
index 0000000..c9029fb
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/step-item/type.d.ts
@@ -0,0 +1,35 @@
+export interface TdStepItemProps {
+    content?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class', 't-class-content', 't-class-title', 't-class-description', 't-class-extra'];
+    };
+    icon?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    status?: {
+        type: StringConstructor;
+        value?: StepStatus;
+    };
+    style?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    subStepItems?: {
+        type: ArrayConstructor;
+        value?: SubStepItem[];
+    };
+    title?: {
+        type: StringConstructor;
+        value?: string;
+    };
+}
+export declare type StepStatus = 'default' | 'process' | 'finish' | 'error';
+export interface SubStepItem {
+    status: StepStatus;
+    title: string;
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/step-item/type.js b/miniprogram_npm/tdesign-miniprogram/step-item/type.js
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/step-item/type.js
@@ -0,0 +1 @@
+export {};
diff --git a/miniprogram_npm/tdesign-miniprogram/swiper-nav/index.d.ts b/miniprogram_npm/tdesign-miniprogram/swiper-nav/index.d.ts
new file mode 100644
index 0000000..5dcaf6b
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/swiper-nav/index.d.ts
@@ -0,0 +1,3 @@
+export * from './type';
+export * from './props';
+export * from './swiper-nav';
diff --git a/miniprogram_npm/tdesign-miniprogram/swiper-nav/index.js b/miniprogram_npm/tdesign-miniprogram/swiper-nav/index.js
new file mode 100644
index 0000000..5dcaf6b
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/swiper-nav/index.js
@@ -0,0 +1,3 @@
+export * from './type';
+export * from './props';
+export * from './swiper-nav';
diff --git a/miniprogram_npm/tdesign-miniprogram/swiper-nav/props.d.ts b/miniprogram_npm/tdesign-miniprogram/swiper-nav/props.d.ts
new file mode 100644
index 0000000..70971ea
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/swiper-nav/props.d.ts
@@ -0,0 +1,3 @@
+import { TdSwiperNavProps } from './type';
+declare const props: TdSwiperNavProps;
+export default props;
diff --git a/miniprogram_npm/tdesign-miniprogram/swiper-nav/props.js b/miniprogram_npm/tdesign-miniprogram/swiper-nav/props.js
new file mode 100644
index 0000000..38b308c
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/swiper-nav/props.js
@@ -0,0 +1,35 @@
+const props = {
+    current: {
+        type: Number,
+        value: 0,
+    },
+    style: {
+        type: String,
+        value: '',
+    },
+    direction: {
+        type: String,
+        value: 'horizontal',
+    },
+    minShowNum: {
+        type: Number,
+        value: 2,
+    },
+    paginationPosition: {
+        type: String,
+        value: 'bottom',
+    },
+    showControls: {
+        type: Boolean,
+        value: false,
+    },
+    total: {
+        type: Number,
+        value: 0,
+    },
+    type: {
+        type: String,
+        value: 'dots',
+    },
+};
+export default props;
diff --git a/miniprogram_npm/tdesign-miniprogram/swiper-nav/swiper-nav.d.ts b/miniprogram_npm/tdesign-miniprogram/swiper-nav/swiper-nav.d.ts
new file mode 100644
index 0000000..ce01166
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/swiper-nav/swiper-nav.d.ts
@@ -0,0 +1,45 @@
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+import { TdSwiperNavProps } from './type';
+export interface SwiperNavProps extends TdSwiperNavProps {
+}
+export default class SwiperNav extends SuperComponent {
+    externalClasses: string[];
+    properties: {
+        current: {
+            type: NumberConstructor;
+            value: number;
+        };
+        total: {
+            type: NumberConstructor;
+            value: number;
+        };
+        type: {
+            type: StringConstructor;
+            value: string;
+        };
+        minShowNum: {
+            type: NumberConstructor;
+            value: number;
+        };
+        showControls: {
+            type: BooleanConstructor;
+            value: boolean;
+        };
+        direction: {
+            type: StringConstructor;
+            value: string;
+        };
+        paginationPosition: {
+            type: StringConstructor;
+            value: string;
+        };
+    };
+    relations: RelationsOptions;
+    data: {
+        prefix: string;
+        classPrefix: string;
+    };
+    methods: {
+        nav(e: any): void;
+    };
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/swiper-nav/swiper-nav.js b/miniprogram_npm/tdesign-miniprogram/swiper-nav/swiper-nav.js
new file mode 100644
index 0000000..74d916b
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/swiper-nav/swiper-nav.js
@@ -0,0 +1,70 @@
+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';
+const { prefix } = config;
+const name = `${prefix}-swiper-nav`;
+let SwiperNav = class SwiperNav extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [`${prefix}-class`];
+        this.properties = {
+            current: {
+                type: Number,
+                value: 0,
+            },
+            total: {
+                type: Number,
+                value: 0,
+            },
+            type: {
+                type: String,
+                value: 'dots',
+            },
+            minShowNum: {
+                type: Number,
+                value: 2,
+            },
+            showControls: {
+                type: Boolean,
+                value: false,
+            },
+            direction: {
+                type: String,
+                value: 'horizontal',
+            },
+            paginationPosition: {
+                type: String,
+                value: 'bottom',
+            },
+        };
+        this.relations = {
+            '../swiper/swiper': {
+                type: 'parent',
+            },
+        };
+        this.data = {
+            prefix,
+            classPrefix: name,
+        };
+        this.methods = {
+            nav(e) {
+                var _a;
+                const { dir } = e.target.dataset;
+                const source = 'nav';
+                this.triggerEvent('navBtnChange', { dir, source });
+                if (this.$parent) {
+                    (_a = this.$parent) === null || _a === void 0 ? void 0 : _a.doNavBtnChange(dir, source);
+                }
+            },
+        };
+    }
+};
+SwiperNav = __decorate([
+    wxComponent()
+], SwiperNav);
+export default SwiperNav;
diff --git a/miniprogram_npm/tdesign-miniprogram/swiper-nav/swiper-nav.json b/miniprogram_npm/tdesign-miniprogram/swiper-nav/swiper-nav.json
new file mode 100644
index 0000000..467ce29
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/swiper-nav/swiper-nav.json
@@ -0,0 +1,3 @@
+{
+  "component": true
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/swiper-nav/swiper-nav.wxml b/miniprogram_npm/tdesign-miniprogram/swiper-nav/swiper-nav.wxml
new file mode 100644
index 0000000..2adf271
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/swiper-nav/swiper-nav.wxml
@@ -0,0 +1,21 @@
+<wxs src="../common/utils.wxs" module="_" />
+
+<view wx:if="{{showControls}}" class="{{classPrefix}}__btn" style="{{style}}">
+  <view class="{{classPrefix}}__btn--prev" bind:tap="nav" data-dir="prev" />
+  <view class="{{classPrefix}}__btn--next" bind:tap="nav" data-dir="next" />
+</view>
+<view
+  wx:if="{{total >= minShowNum}}"
+  style="{{style}}"
+  class="{{prefix}}-class {{classPrefix}} {{classPrefix}}--{{direction}} {{classPrefix}}__{{type}} {{classPrefix}}--{{paginationPosition}}"
+>
+  <block wx:if="{{ type === 'dots' || type === 'dots-bar'}}">
+    <view
+      wx:for="{{total}}"
+      wx:for-index="idx"
+      wx:key="idx"
+      class="{{_.cls(classPrefix + '__' + type + '-item', [['active', current === idx], direction])}}"
+    />
+  </block>
+  <block wx:if="{{ type === 'fraction'}}"> {{current + 1}}/{{total}} </block>
+</view>
diff --git a/miniprogram_npm/tdesign-miniprogram/swiper-nav/swiper-nav.wxss b/miniprogram_npm/tdesign-miniprogram/swiper-nav/swiper-nav.wxss
new file mode 100644
index 0000000..1463dba
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/swiper-nav/swiper-nav.wxss
@@ -0,0 +1,152 @@
+.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-nav__dots,
+.t-swiper-nav__dots-bar {
+  display: flex;
+  flex-direction: row;
+}
+.t-swiper-nav__dots-item,
+.t-swiper-nav__dots-bar-item {
+  width: var(--td-swiper-nav-dot-size, 12rpx);
+  height: var(--td-swiper-nav-dot-size, 12rpx);
+  background: var(--td-swiper-nav-dot-color, var(--td-font-white-2, rgba(255, 255, 255, 0.55)));
+  border-radius: 50%;
+  margin: 0 10rpx;
+  transition: all 0.4s ease-in;
+}
+.t-swiper-nav__dots-item--vertical,
+.t-swiper-nav__dots-bar-item--vertical {
+  margin: 10rpx 0;
+}
+.t-swiper-nav__dots-item--active,
+.t-swiper-nav__dots-bar-item--active {
+  background-color: var(--td-swiper-nav-dot-active-color, var(--td-font-white-1, #ffffff));
+}
+.t-swiper-nav__dots-bar-item--vertical.t-swiper-nav__dots-bar-item--active {
+  width: var(--td-swiper-nav-dot-size, 12rpx);
+  height: var(--td-swiper-nav-dots-bar-active-width, 40rpx);
+}
+.t-swiper-nav__dots-bar-item--active {
+  width: var(--td-swiper-nav-dots-bar-active-width, 40rpx);
+  border-radius: calc(var(--td-swiper-nav-dot-size, 12rpx) / 2);
+  background-color: var(--td-swiper-nav-dot-active-color, var(--td-font-white-1, #ffffff));
+}
+.t-swiper-nav--left {
+  position: absolute;
+  left: 24rpx;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.t-swiper-nav--right {
+  position: absolute;
+  right: 24rpx;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.t-swiper-nav--top-left {
+  position: absolute;
+  top: 24rpx;
+  left: 24rpx;
+}
+.t-swiper-nav--top {
+  position: absolute;
+  left: 50%;
+  top: 24rpx;
+  transform: translateX(-50%);
+}
+.t-swiper-nav--top-right {
+  position: absolute;
+  top: 24rpx;
+  right: 24rpx;
+}
+.t-swiper-nav--bottom-left {
+  position: absolute;
+  left: 24rpx;
+  bottom: 24rpx;
+}
+.t-swiper-nav--bottom {
+  position: absolute;
+  left: 50%;
+  bottom: 24rpx;
+  transform: translateX(-50%);
+}
+.t-swiper-nav--bottom-right {
+  position: absolute;
+  right: 24rpx;
+  bottom: 24rpx;
+}
+.t-swiper-nav--vertical {
+  flex-direction: column;
+}
+.t-swiper-nav__fraction {
+  padding: 0 16rpx;
+  height: var(--td-swiper-nav-fraction-height, 48rpx);
+  line-height: var(--td-swiper-nav-fraction-height, 48rpx);
+  border-radius: calc(var(--td-swiper-nav-fraction-height, 48rpx) / 2);
+  background: var(--td-swiper-nav-fraction-bg-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
+  color: var(--td-swiper-nav-fraction-color, var(--td-font-white-1, #ffffff));
+  font-size: var(--td-swiper-nav-fraction-font-size, 24rpx);
+}
+.t-swiper-nav__btn--prev,
+.t-swiper-nav__btn--next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: var(--td-swiper-nav-btn-size, 48rpx);
+  height: var(--td-swiper-nav-btn-size, 48rpx);
+  border-radius: 50%;
+  background: var(--td-swiper-nav-btn-bg-color, var(--td-font-gray-3, 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, var(--td-font-white-1, #ffffff));
+  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/miniprogram_npm/tdesign-miniprogram/swiper-nav/type.d.ts b/miniprogram_npm/tdesign-miniprogram/swiper-nav/type.d.ts
new file mode 100644
index 0000000..2cc2a19
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/swiper-nav/type.d.ts
@@ -0,0 +1,35 @@
+export interface TdSwiperNavProps {
+    current?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    style?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    direction?: {
+        type: StringConstructor;
+        value?: 'horizontal' | 'vertical';
+    };
+    minShowNum?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    paginationPosition?: {
+        type: StringConstructor;
+        value?: 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right';
+    };
+    showControls?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    total?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    type?: {
+        type: StringConstructor;
+        value?: SwiperNavigationType;
+    };
+}
+export declare type SwiperNavigationType = 'dots' | 'dots-bar' | 'fraction';
diff --git a/miniprogram_npm/tdesign-miniprogram/swiper-nav/type.js b/miniprogram_npm/tdesign-miniprogram/swiper-nav/type.js
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/swiper-nav/type.js
@@ -0,0 +1 @@
+export {};
diff --git a/miniprogram_npm/tdesign-miniprogram/tab-bar-item/props.d.ts b/miniprogram_npm/tdesign-miniprogram/tab-bar-item/props.d.ts
new file mode 100644
index 0000000..026ee8b
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/tab-bar-item/props.d.ts
@@ -0,0 +1,3 @@
+import { TdTabBarItemProps } from './type';
+declare const props: TdTabBarItemProps;
+export default props;
diff --git a/miniprogram_npm/tdesign-miniprogram/tab-bar-item/props.js b/miniprogram_npm/tdesign-miniprogram/tab-bar-item/props.js
new file mode 100644
index 0000000..71037a0
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/tab-bar-item/props.js
@@ -0,0 +1,19 @@
+const props = {
+    badgeProps: {
+        type: Object,
+    },
+    style: {
+        type: String,
+        value: '',
+    },
+    icon: {
+        type: String,
+    },
+    subTabBar: {
+        type: Array,
+    },
+    value: {
+        type: null,
+    },
+};
+export default props;
diff --git a/miniprogram_npm/tdesign-miniprogram/tab-bar-item/tab-bar-item.d.ts b/miniprogram_npm/tdesign-miniprogram/tab-bar-item/tab-bar-item.d.ts
new file mode 100644
index 0000000..031956c
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/tab-bar-item/tab-bar-item.d.ts
@@ -0,0 +1,35 @@
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+export default class TabBarItem extends SuperComponent {
+    parent: any;
+    relations: RelationsOptions;
+    options: {
+        multipleSlots: boolean;
+    };
+    data: {
+        prefix: string;
+        classPrefix: string;
+        isSpread: boolean;
+        isChecked: boolean;
+        hasChildren: boolean;
+        currentName: string;
+        split: boolean;
+        iconOnly: boolean;
+        theme: string;
+        crowded: boolean;
+        shape: string;
+    };
+    properties: import("./type").TdTabBarItemProps;
+    observers: {
+        subTabBar(value: Record<string, any>[]): void;
+    };
+    lifetimes: {
+        attached(): Promise<void>;
+    };
+    methods: {
+        showSpread(): void;
+        toggle(): void;
+        selectChild(event: any): void;
+        checkActive(value: any): void;
+        closeSpread(): void;
+    };
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/tab-bar-item/tab-bar-item.js b/miniprogram_npm/tdesign-miniprogram/tab-bar-item/tab-bar-item.js
new file mode 100644
index 0000000..8313852
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/tab-bar-item/tab-bar-item.js
@@ -0,0 +1,114 @@
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { wxComponent, SuperComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+import { getRect } from '../common/utils';
+const { prefix } = config;
+const classPrefix = `${prefix}-tab-bar-item`;
+let TabBarItem = class TabBarItem extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.parent = null;
+        this.relations = {
+            '../tab-bar/tab-bar': {
+                type: 'ancestor',
+                linked(parent) {
+                    const { theme, split, shape } = parent.data;
+                    this.setData({
+                        theme,
+                        split,
+                        shape,
+                        currentName: this.properties.value ? this.properties.value : parent.initName(),
+                    });
+                    parent.updateChildren();
+                },
+            },
+        };
+        this.options = {
+            multipleSlots: true,
+        };
+        this.data = {
+            prefix,
+            classPrefix,
+            isSpread: false,
+            isChecked: false,
+            hasChildren: false,
+            currentName: '',
+            split: true,
+            iconOnly: false,
+            theme: '',
+            crowded: false,
+            shape: 'normal',
+        };
+        this.properties = props;
+        this.observers = {
+            subTabBar(value) {
+                this.setData({
+                    hasChildren: value.length > 0,
+                });
+            },
+        };
+        this.lifetimes = {
+            attached() {
+                return __awaiter(this, void 0, void 0, function* () {
+                    const res = yield getRect(this, `.${classPrefix}__text`);
+                    this.setData({ iconOnly: res.height === 0 });
+                });
+            },
+        };
+        this.methods = {
+            showSpread() {
+                this.setData({
+                    isSpread: true,
+                });
+            },
+            toggle() {
+                const { currentName, hasChildren, isSpread } = this.data;
+                if (hasChildren) {
+                    this.setData({
+                        isSpread: !isSpread,
+                    });
+                }
+                this.$parent.updateValue(currentName);
+                this.$parent.changeOtherSpread(currentName);
+            },
+            selectChild(event) {
+                const { value } = event.target.dataset;
+                this.$parent.updateValue(value);
+                this.setData({
+                    isSpread: false,
+                });
+            },
+            checkActive(value) {
+                const { currentName, subTabBar } = this.data;
+                const isChecked = (subTabBar === null || subTabBar === void 0 ? void 0 : subTabBar.some((item) => item.value === value)) || currentName === value;
+                this.setData({
+                    isChecked,
+                });
+            },
+            closeSpread() {
+                this.setData({
+                    isSpread: false,
+                });
+            },
+        };
+    }
+};
+TabBarItem = __decorate([
+    wxComponent()
+], TabBarItem);
+export default TabBarItem;
diff --git a/miniprogram_npm/tdesign-miniprogram/tab-bar-item/tab-bar-item.json b/miniprogram_npm/tdesign-miniprogram/tab-bar-item/tab-bar-item.json
new file mode 100644
index 0000000..69017ce
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/tab-bar-item/tab-bar-item.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "../icon/icon",
+    "t-badge": "../badge/badge"
+  }
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/tab-bar-item/tab-bar-item.wxml b/miniprogram_npm/tdesign-miniprogram/tab-bar-item/tab-bar-item.wxml
new file mode 100644
index 0000000..274912d
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/tab-bar-item/tab-bar-item.wxml
@@ -0,0 +1,62 @@
+<wxs src="../common/utils.wxs" module="_" />
+
+<view
+  style="{{ style }}"
+  class="{{_.cls(classPrefix, [['split', split], ['text-only', !icon], ['crowded', crowded], shape])}}"
+>
+  <view
+    class="{{_.cls(classPrefix + '__content', [['checked', isChecked], theme])}}"
+    hover-class="{{classPrefix}}__content--active"
+    hover-stay-time="{{200}}"
+    bindtap="toggle"
+    aria-selected="{{(!hasChildren || !isSpread) && isChecked ? true : false}}"
+    aria-expanded="{{hasChildren && isSpread ? true : ''}}"
+    aria-role="{{hasChildren ? 'button' : 'tab'}}"
+  >
+    <view wx:if="{{icon}}" class="{{classPrefix}}__icon" style="height: {{iconOnly ? 24 : 20}}px">
+      <t-badge
+        wx:if="{{badgeProps.dot || badgeProps.count}}"
+        count="{{badgeProps.count}}"
+        max-count="{{badgeProps.maxCount || 99}}"
+        dot="{{badgeProps.dot}}"
+        content="{{badgeProps.content}}"
+        size="{{badgeProps.size}}"
+        visible="{{badgeProps.visible}}"
+        offset="{{badgeProps.offset || [0,0]}}"
+        t-class-count="{{prefix + '-badge-class'}}"
+      >
+        <t-icon name="{{icon}}" size="{{iconOnly ? 24 : 20}}" />
+      </t-badge>
+      <t-icon
+        wx:else
+        name="{{icon}}"
+        size="{{iconOnly ? 24 : 20}}"
+        aria-label="{{ariaLabel}}"
+        aria-hidden="{{iconOnly ? false : true}}"
+      />
+      <slot name="icon" />
+    </view>
+    <view class="{{_.cls(classPrefix + '__text', [['small', !!icon]])}}">
+      <t-icon wx:if="{{hasChildren}}" name="view-list" size="16" t-class="{{classPrefix}}__icon-menu" />
+      <slot />
+    </view>
+  </view>
+
+  <view class="{{classPrefix}}__spread" wx:if="{{hasChildren && isSpread}}">
+    <view
+      class="{{classPrefix}}__spread-item"
+      hover-class="{{classPrefix}}__spread-item--active"
+      hover-stay-time="{{200}}"
+      wx:for="{{subTabBar}}"
+      wx:for-item="child"
+      wx:for-index="index"
+      wx:key="index"
+      bind:tap="selectChild"
+      data-value="{{child.value || index}}"
+      aria-role="tab"
+    >
+      <view class="{{classPrefix}}__spread-item-split" wx:if="{{index !== 0}}" />
+      <view class="{{classPrefix}}__spread-item-text" data-value="{{child.value || index}}">{{ child.label }}</view>
+    </view>
+  </view>
+</view>
diff --git a/miniprogram_npm/tdesign-miniprogram/tab-bar-item/tab-bar-item.wxss b/miniprogram_npm/tdesign-miniprogram/tab-bar-item/tab-bar-item.wxss
new file mode 100644
index 0000000..35c9359
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/tab-bar-item/tab-bar-item.wxss
@@ -0,0 +1,141 @@
+.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-tab-bar-item {
+  flex: 1;
+  height: var(--td-tab-bar-height, 80rpx);
+  box-sizing: border-box;
+  user-select: none;
+  position: relative;
+  margin: 16rpx 0;
+  background-color: var(--td-tab-bar-bg-color, var(--td-bg-color-block, #fff));
+  padding: 0 24rpx;
+}
+.t-tab-bar-item--text-only {
+  font-size: 32rpx;
+}
+.t-tab-bar-item--split:before {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-left: 1px solid var(--td-tab-bar-border-color, var(--td-border-level-1-color, #e6e6e6));
+  transform: scaleX(0.5);
+  top: 16rpx;
+  bottom: 16rpx;
+}
+.t-tab-bar-item--crowded {
+  padding: 0 16rpx;
+}
+.t-tab-bar-item--round {
+  border-radius: 99px;
+}
+.t-tab-bar-item__content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 16rpx;
+  color: var(--td-tab-bar-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+}
+.t-tab-bar-item__content--checked {
+  color: var(--td-tab-bar-active-color, var(--td-primary-color, #0052d9));
+  font-weight: 600;
+}
+.t-tab-bar-item__content--tag {
+  border-radius: 99px;
+}
+.t-tab-bar-item__content--tag.t-tab-bar-item__content--checked {
+  background-color: var(--td-tab-bar-active-bg, var(--td-primary-color-1, #ecf2fe));
+}
+.t-tab-bar-item .t-badge-class {
+  transform: translate(50%, -10%) !important;
+}
+.t-tab-bar-item__text {
+  display: flex;
+  align-items: center;
+}
+.t-tab-bar-item__text--small {
+  font-size: 20rpx;
+  line-height: 32rpx;
+}
+.t-tab-bar-item__icon-menu {
+  margin-right: 8rpx;
+}
+.t-tab-bar-item__spread {
+  position: absolute;
+  top: 0;
+  left: 7%;
+  width: 86%;
+  background-color: var(--td-tab-bar-bg-color, var(--td-bg-color-block, #fff));
+  transform: translate3d(0, calc(-100% - 32rpx), 0);
+  z-index: 1;
+  border-radius: 12rpx;
+  color: var(--td-tab-bar-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+  box-shadow: var(--td-tab-bar-spread-shadow, var(--td-shadow-3, 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08)));
+}
+.t-tab-bar-item__spread::before {
+  display: block;
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border: 16rpx solid transparent;
+  border-top: 16rpx solid var(--td-tab-bar-bg-color, var(--td-bg-color-block, #fff));
+  transform: translate3d(-50%, 32rpx, 0);
+}
+.t-tab-bar-item__spread-item {
+  width: 100%;
+  height: 96rpx;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  flex-direction: column;
+}
+.t-tab-bar-item__spread-item--active {
+  background-color: var(--td-tab-bar-hover-bg-color, rgba(0, 0, 0, 0.05));
+}
+.t-tab-bar-item__spread-item-split {
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  background-color: var(--td-tab-bar-spread-border-color, var(--td-border-color, #e7e7e7));
+  width: 80%;
+  height: 1px;
+  transform: translateY(0.5);
+}
+.t-tab-bar-item__spread-item-text {
+  padding-top: 24rpx;
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/tab-bar-item/type.d.ts b/miniprogram_npm/tdesign-miniprogram/tab-bar-item/type.d.ts
new file mode 100644
index 0000000..aa63763
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/tab-bar-item/type.d.ts
@@ -0,0 +1,27 @@
+import { BadgeProps } from '../badge/index';
+export interface TdTabBarItemProps {
+    badgeProps?: {
+        type: ObjectConstructor;
+        value?: BadgeProps;
+    };
+    style?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    icon?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    subTabBar?: {
+        type: ArrayConstructor;
+        value?: SubTabBarItem[];
+    };
+    value?: {
+        type: null;
+        value?: string | number;
+    };
+}
+export interface SubTabBarItem {
+    value: string;
+    label: string;
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/tab-bar-item/type.js b/miniprogram_npm/tdesign-miniprogram/tab-bar-item/type.js
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/tab-bar-item/type.js
@@ -0,0 +1 @@
+export {};
diff --git a/miniprogram_npm/tdesign-miniprogram/tab-panel/props.d.ts b/miniprogram_npm/tdesign-miniprogram/tab-panel/props.d.ts
new file mode 100644
index 0000000..9329be0
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/tab-panel/props.d.ts
@@ -0,0 +1,3 @@
+import { TdTabPanelProps } from './type';
+declare const props: TdTabPanelProps;
+export default props;
diff --git a/miniprogram_npm/tdesign-miniprogram/tab-panel/props.js b/miniprogram_npm/tdesign-miniprogram/tab-panel/props.js
new file mode 100644
index 0000000..73a841b
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/tab-panel/props.js
@@ -0,0 +1,32 @@
+const props = {
+    badgeProps: {
+        type: Object,
+        value: null,
+    },
+    style: {
+        type: String,
+        value: '',
+    },
+    destroyOnHide: {
+        type: Boolean,
+        value: true,
+    },
+    disabled: {
+        type: Boolean,
+        value: false,
+    },
+    icon: {
+        type: null,
+    },
+    label: {
+        type: String,
+        value: '',
+    },
+    panel: {
+        type: String,
+    },
+    value: {
+        type: null,
+    },
+};
+export default props;
diff --git a/miniprogram_npm/tdesign-miniprogram/tab-panel/tab-panel.d.ts b/miniprogram_npm/tdesign-miniprogram/tab-panel/tab-panel.d.ts
new file mode 100644
index 0000000..fa488c1
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/tab-panel/tab-panel.d.ts
@@ -0,0 +1,19 @@
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+export default class TabPanel extends SuperComponent {
+    relations: RelationsOptions;
+    properties: import("./type").TdTabPanelProps;
+    data: {
+        prefix: string;
+        classPrefix: string;
+        active: boolean;
+        hide: boolean;
+        id: string;
+    };
+    setId(id: any): void;
+    observers: {
+        label(): void;
+    };
+    getComputedName(): string;
+    update(): void;
+    render(active: Boolean, parent: any): void;
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/tab-panel/tab-panel.js b/miniprogram_npm/tdesign-miniprogram/tab-panel/tab-panel.js
new file mode 100644
index 0000000..b648761
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/tab-panel/tab-panel.js
@@ -0,0 +1,57 @@
+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 props from './props';
+import config from '../common/config';
+const { prefix } = config;
+const name = `${prefix}-tab-panel`;
+let TabPanel = class TabPanel extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.relations = {
+            '../tabs/tabs': {
+                type: 'ancestor',
+            },
+        };
+        this.properties = props;
+        this.data = {
+            prefix,
+            classPrefix: name,
+            active: false,
+            hide: true,
+            id: '',
+        };
+        this.observers = {
+            label() {
+                this.update();
+            },
+        };
+    }
+    setId(id) {
+        this.setData({ id });
+    }
+    getComputedName() {
+        if (this.properties.value != null) {
+            return `${this.properties.value}`;
+        }
+        return `${this.index}`;
+    }
+    update() {
+        var _a;
+        (_a = this.$parent) === null || _a === void 0 ? void 0 : _a.updateTabs();
+    }
+    render(active, parent) {
+        this.setData({
+            active,
+            hide: !parent.animated && !active,
+        });
+    }
+};
+TabPanel = __decorate([
+    wxComponent()
+], TabPanel);
+export default TabPanel;
diff --git a/miniprogram_npm/tdesign-miniprogram/tab-panel/tab-panel.json b/miniprogram_npm/tdesign-miniprogram/tab-panel/tab-panel.json
new file mode 100644
index 0000000..a89ef4d
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/tab-panel/tab-panel.json
@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/tab-panel/tab-panel.wxml b/miniprogram_npm/tdesign-miniprogram/tab-panel/tab-panel.wxml
new file mode 100644
index 0000000..d85f9ca
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/tab-panel/tab-panel.wxml
@@ -0,0 +1,10 @@
+<wxs src="../common/utils.wxs" module="utils" />
+<view
+  class="{{classPrefix}} {{active ? prefix + '-is-active': ''}}"
+  style="{{ style }}; {{ hide ? 'display: none' : ''}}"
+  id="{{id}}"
+  aria-role="tabpanel"
+>
+  <view wx:if="{{panel}}">{{panel}}</view>
+  <slot />
+</view>
diff --git a/miniprogram_npm/tdesign-miniprogram/tab-panel/tab-panel.wxss b/miniprogram_npm/tdesign-miniprogram/tab-panel/tab-panel.wxss
new file mode 100644
index 0000000..2a5dd88
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/tab-panel/tab-panel.wxss
@@ -0,0 +1,37 @@
+.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);
+}
+:host {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+.t-tab-panel {
+  height: inherit;
+  width: inherit;
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/tab-panel/type.d.ts b/miniprogram_npm/tdesign-miniprogram/tab-panel/type.d.ts
new file mode 100644
index 0000000..cc98410
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/tab-panel/type.d.ts
@@ -0,0 +1,35 @@
+import { TabValue } from '../tabs/index';
+export interface TdTabPanelProps {
+    badgeProps?: {
+        type: ObjectConstructor;
+        value?: object;
+    };
+    style?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    destroyOnHide?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    disabled?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    icon?: {
+        type: null;
+        value?: string | object;
+    };
+    label?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    panel?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    value?: {
+        type: null;
+        value?: TabValue;
+    };
+}
diff --git a/miniprogram_npm/tdesign-miniprogram/tab-panel/type.js b/miniprogram_npm/tdesign-miniprogram/tab-panel/type.js
new file mode 100644
index 0000000..cb0ff5c
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/tab-panel/type.js
@@ -0,0 +1 @@
+export {};
diff --git a/miniprogram_npm/tdesign-miniprogram/tabs/index.d.ts b/miniprogram_npm/tdesign-miniprogram/tabs/index.d.ts
new file mode 100644
index 0000000..2f91d15
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/tabs/index.d.ts
@@ -0,0 +1,3 @@
+export * from './tabs';
+export * from './type';
+export * from './props';
diff --git a/miniprogram_npm/tdesign-miniprogram/tabs/index.js b/miniprogram_npm/tdesign-miniprogram/tabs/index.js
new file mode 100644
index 0000000..2f91d15
--- /dev/null
+++ b/miniprogram_npm/tdesign-miniprogram/tabs/index.js
@@ -0,0 +1,3 @@
+export * from './tabs';
+export * from './type';
+export * from './props';