Initial Commit

2024-11-11 14:16:29 +08:00 · 2024-11-11 14:16:29 +08:00 · d281aab5b3
commit d281aab5b3
2290 changed files with 52108 additions and 0 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,31 @@
+/*
+ * Eslint config file
+ * Documentation: https://eslint.org/docs/user-guide/configuring/
+ * Install the Eslint extension before using this feature.
+ */
+module.exports = {
+  env: {
+    es6: true,
+    browser: true,
+    node: true,
+  },
+  ecmaFeatures: {
+    modules: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  globals: {
+    wx: true,
+    App: true,
+    Page: true,
+    getCurrentPages: true,
+    getApp: true,
+    Component: true,
+    requirePlugin: true,
+    requireMiniProgram: true,
+  },
+  // extends: 'eslint:recommended',
+  rules: {},
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,14 @@
+# Windows
+[Dd]esktop.ini
+Thumbs.db
+$RECYCLE.BIN/
+
+# macOS
+.DS_Store
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+
+# Node.js
+node_modules/
--- a/app.d.ts
+++ b/app.d.ts
@ -0,0 +1 @@
+export {};
--- a/app.js
+++ b/app.js
@ -0,0 +1,10 @@
+import gulpError from './utils/gulpError';
+App({
+    onShow() {
+        if (gulpError !== 'gulpErrorPlaceHolder') {
+            wx.redirectTo({
+                url: `/pages/gulp-error/index?gulpError=${gulpError}`,
+            });
+        }
+    },
+});
--- a/app.json
+++ b/app.json
@ -0,0 +1,113 @@
+{
+  "pages": [
+    "pages/home/home",
+    "pages/button/button",
+    "pages/tabs/tabs",
+    "pages/icon/icon",
+    "pages/loading/loading",
+    "pages/progress/progress",
+    "pages/cascader/cascader",
+    "pages/cell/cell",
+    "pages/cell-group/cell-group",
+    "pages/collapse/collapse",
+    "pages/input/input",
+    "pages/badge/badge",
+    "pages/textarea/textarea",
+    "pages/message/message",
+    "pages/toast/toast",
+    "pages/stepper/stepper",
+    "pages/slider/slider",
+    "pages/radio/radio",
+    "pages/switch/switch",
+    "pages/sticky/sticky",
+    "pages/tag/tag",
+    "pages/checkbox/checkbox",
+    "pages/gulp-error/index",
+    "pages/fab/fab",
+    "pages/tab-bar/tab-bar",
+    "pages/transition/transition",
+    "pages/popup/popup",
+    "pages/steps/steps",
+    "pages/dropdown-menu/dropdown-menu",
+    "pages/drawer/drawer",
+    "pages/pull-down-refresh/pull-down-refresh",
+    "pages/skeleton/skeleton",
+    "pages/footer/footer",
+    "pages/divider/divider",
+    "pages/empty/empty",
+    "pages/back-top/back-top",
+    "pages/grid/grid",
+    "pages/upload/upload",
+    "pages/count-down/count-down",
+    "pages/overlay/overlay",
+    "pages/image/image",
+    "pages/search/search",
+    "pages/home/navigateFail/navigateFail",
+    "pages/navbar/navbar",
+    "pages/date-time-picker/date-time-picker",
+    "pages/notice-bar/notice-bar",
+    "pages/image-viewer/image-viewer",
+    "pages/result/result",
+    "pages/result/result-page",
+    "pages/link/link"
+  ],
+  "subpackages": [
+    {
+      "root": "pages/side-bar/",
+      "pages": ["side-bar", "base/index", "switch/index", "custom/index", "with-icon/index"]
+    },
+    {
+      "root": "pages/action-sheet/",
+      "pages": ["action-sheet"]
+    },
+    {
+      "root": "pages/avatar/",
+      "pages": ["avatar"]
+    },
+    {
+      "root": "pages/calendar/",
+      "pages": ["calendar"]
+    },
+    {
+      "root": "pages/dialog/",
+      "pages": ["dialog"]
+    },
+    {
+      "root": "pages/picker/",
+      "pages": ["picker"]
+    },
+    {
+      "root": "pages/rate/",
+      "pages": ["rate"]
+    },
+    {
+      "root": "pages/swiper/",
+      "pages": ["swiper"]
+    },
+    {
+      "root": "pages/swipe-cell/",
+      "pages": ["swipe-cell"]
+    },
+    {
+      "root": "pages/tree-select/",
+      "pages": ["tree-select"]
+    },
+    {
+      "root": "pages/indexes/",
+      "pages": ["indexes", "base/index", "custom/index"]
+    }
+  ],
+  "usingComponents": {
+    "t-demo": "./components/demo-block/index",
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-icon": "tdesign-miniprogram/icon/icon"
+  },
+  "window": {
+    "backgroundTextStyle": "light",
+    "navigationBarBackgroundColor": "#f6f6f6",
+    "backgroundColor": "#f6f6f6",
+    "navigationBarTitleText": "TDesign",
+    "navigationBarTextStyle": "black"
+  },
+  "sitemapLocation": "sitemap.json"
+}
--- a/app.wxss
+++ b/app.wxss
@ -0,0 +1,19 @@
+page {
+  background: #f6f6f6;
+}
+.demo {
+  padding-bottom: 56rpx;
+}
+.demo-title {
+  font-size: 48rpx;
+  font-weight: 700;
+  line-height: 64rpx;
+  margin: 48rpx 32rpx 0;
+  color: var(--td-font-gray-1, rgba(0, 0, 0, 0.9));
+}
+.demo-desc {
+  font-size: 28rpx;
+  color: var(--td-font-gray-2, rgba(0, 0, 0, 0.6));
+  margin: 16rpx 32rpx 0;
+  line-height: 44rpx;
+}
--- a/assets/TDesignLogo@2x.png
+++ b/assets/TDesignLogo@2x.png
--- a/components/demo-block/index.d.ts
+++ b/components/demo-block/index.d.ts
@ -0,0 +1 @@
+
--- a/components/demo-block/index.js
+++ b/components/demo-block/index.js
@ -0,0 +1,27 @@
+Component({
+    options: {
+        multipleSlots: true,
+        addGlobalClass: true,
+    },
+    properties: {
+        title: {
+            type: String,
+            default: '',
+        },
+        desc: {
+            type: String,
+            default: '',
+        },
+        operList: Array,
+        padding: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    methods: {
+        clickHandle(e) {
+            const { type } = e.currentTarget.dataset;
+            this.triggerEvent('clickoper', type);
+        },
+    },
+});
--- a/components/demo-block/index.json
+++ b/components/demo-block/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/components/demo-block/index.wxml
+++ b/components/demo-block/index.wxml
@ -0,0 +1,18 @@
+<view class="demo-block {{!title && 'demo-block_notitle'}}">
+  <view wx:if="{{ title || desc }}" class="demo-block__header">
+    <view wx:if="{{ title }}" class="demo-block__header-title">{{ title }}</view>
+    <view wx:if="{{ desc }}" class="demo-block__header-desc {{!title && 'demo-block_subtitle' }}">{{ desc }}</view>
+    <!-- <slot name="title-right" /> -->
+  </view>
+  <view wx:for="{{ operList }}" wx:for-item="operItem" wx:key="oper" class="demo-block__oper">
+    <view wx:if="{{ operItem.title }}" class="demo-block__oper-subtitle">{{ operItem.title }}</view>
+    <view wx:for="{{ operItem.btns }}" wx:for-item="btnItem" wx:key="btn">
+      <t-button t-class="demo-block__oper-btn" size="large" block data-type="{{ btnItem.type }}" bind:tap="clickHandle">
+        {{ btnItem.text }}
+      </t-button>
+    </view>
+  </view>
+  <view class="demo-block__slot {{padding ? 'with-padding' : ''}}">
+    <slot />
+  </view>
+</view>
--- a/components/demo-block/index.wxss
+++ b/components/demo-block/index.wxss
@ -0,0 +1,43 @@
+.demo-block {
+  margin: var(--td-spacer-4, 64rpx) 0 0;
+}
+.demo-block__header {
+  color: #000;
+  margin: 0 var(--td-spacer-2, 32rpx);
+}
+.demo-block__header-title {
+  font-weight: 700;
+  font-size: 36rpx;
+  line-height: 52rpx;
+}
+.demo-block__header-desc {
+  margin-top: var(--td-spacer, 16rpx);
+  font-size: var(--td-font-size-base, 28rpx);
+  white-space: pre-line;
+  color: var(--td-font-gray-2, rgba(0, 0, 0, 0.6));
+  line-height: 22px;
+}
+.demo-block__oper {
+  margin-top: var(--td-spacer, 16rpx);
+}
+.demo-block__oper-subtitle {
+  font-size: var(--td-font-size-s, 24rpx);
+  margin-bottom: var(--td-spacer-2, 32rpx);
+  opacity: 0.4;
+}
+.demo-block__oper-btn {
+  margin: 0 0 var(--td-spacer-2, 32rpx) 0;
+  height: 96rpx;
+}
+.demo-block__slot {
+  margin-top: var(--td-spacer-2, 32rpx);
+}
+.demo-block__slot.with-padding {
+  margin: var(--td-spacer-2, 32rpx) var(--td-spacer-2, 32rpx) 0;
+}
+.demo-block_notitle {
+  margin-top: 0px;
+}
+.demo-block_notitle .demo-block_subtitle {
+  margin-top: var(--td-spacer-3, 48rpx);
+}
--- a/components/pull-down-list/index.d.ts
+++ b/components/pull-down-list/index.d.ts
@ -0,0 +1 @@
+declare const itemHeight: number;
--- a/components/pull-down-list/index.js
+++ b/components/pull-down-list/index.js
@ -0,0 +1,41 @@
+const itemHeight = 56 * 2;
+Component({
+    data: {
+        childBoxHeight: 0,
+    },
+    externalClasses: ['t-class'],
+    properties: {
+        defaultOpen: {
+            type: Boolean,
+            value: false,
+        },
+        name: {
+            type: String,
+            value: '',
+        },
+        icon: {
+            type: String,
+            value: '',
+        },
+        childArr: {
+            type: Array,
+            value: [],
+            observer(childArr) {
+                this.setData({
+                    childBoxHeight: this.data.defaultOpen ? itemHeight * childArr.length : 0,
+                });
+            },
+        },
+    },
+    methods: {
+        switchHandle() {
+            const { childArr, childBoxHeight } = this.data;
+            this.setData({
+                childBoxHeight: childBoxHeight > 0 ? 0 : childArr.length * itemHeight,
+            });
+        },
+        tapChild(e) {
+            this.triggerEvent('click', e.target.dataset);
+        },
+    },
+});
--- a/components/pull-down-list/index.json
+++ b/components/pull-down-list/index.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/components/pull-down-list/index.wxml
+++ b/components/pull-down-list/index.wxml
@ -0,0 +1,12 @@
+<view class="pullDownList t-class {{ childBoxHeight > 0 ? 'actived' : '' }}">
+  <view class="switchBox" aria-role="button" aria-expanded="{{!!childBoxHeight}}" catch:tap="switchHandle">
+    <view class="name">{{ name }}</view>
+    <t-icon name="{{icon}}" size="48rpx" color="#A6A6A6" t-class="icon" aria-hidden />
+  </view>
+  <view class="childBox" style="height: {{ childBoxHeight }}rpx" aria-hidden="{{childBoxHeight ? '' : true}}">
+    <view class="child" wx:for="{{childArr}}" wx:key="name" data-item="{{item}}" aria-role="button" bind:tap="tapChild">
+      {{ item.name }} {{ item.label }}
+      <t-icon name="chevron-right" color="#bbb" aria-hidden />
+    </view>
+  </view>
+</view>
--- a/components/pull-down-list/index.wxss
+++ b/components/pull-down-list/index.wxss
@ -0,0 +1,49 @@
+.pullDownList {
+  width: 100%;
+  box-sizing: border-box;
+  background-color: #fff;
+  border-radius: 8rpx;
+  margin-bottom: 24rpx;
+  overflow: hidden;
+}
+.pullDownList .switchBox {
+  height: 120rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 32rpx;
+  font-size: 32rpx;
+  line-height: 48rpx;
+  color: #333;
+}
+.pullDownList .name,
+.pullDownList .icon {
+  transition: opacity 0.3s;
+}
+.pullDownList .name {
+  opacity: 0.9;
+}
+.pullDownList.actived .name {
+  opacity: 0.4;
+}
+.pullDownList.actived .icon {
+  opacity: 0.4;
+}
+.pullDownList .childBox {
+  transition: height 0.3s;
+}
+.pullDownList .childBox .child {
+  box-sizing: border-box;
+  border-bottom: 1rpx solid #e5e5e5;
+  height: 112rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-left: 32rpx;
+  margin-right: 32rpx;
+  font-size: 32rpx;
+  opacity: 0.9;
+}
+.pullDownList .childBox .child:last-of-type {
+  border-bottom-color: transparent;
+}
--- a/demos/radio/basic/basic.d.ts
+++ b/demos/radio/basic/basic.d.ts
@ -0,0 +1 @@
+
--- a/demos/radio/basic/basic.js
+++ b/demos/radio/basic/basic.js
@ -0,0 +1 @@
+Component({});
--- a/demos/radio/basic/basic.json
+++ b/demos/radio/basic/basic.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/demos/radio/basic/basic.wxml
+++ b/demos/radio/basic/basic.wxml
@ -0,0 +1,4 @@
+<view>
+  <t-radio class="basic-radio" title="单行标题" name="radio1"></t-radio>
+  <t-radio title="双行标题，长文本自动换行，该选项的描述是一段很长的内容" name="radio2"></t-radio>
+</view>
--- a/demos/radio/basic/basic.wxss
+++ b/demos/radio/basic/basic.wxss
--- a/demos/radio/group/group.d.ts
+++ b/demos/radio/group/group.d.ts
@ -0,0 +1 @@
+
--- a/demos/radio/group/group.js
+++ b/demos/radio/group/group.js
@ -0,0 +1,22 @@
+Component({
+    properties: {
+        items: {
+            type: Array,
+            value: [],
+        },
+        value: {
+            type: String,
+            value: '',
+        },
+    },
+    data: {
+        currentValue: '',
+    },
+    methods: {
+        onChange(event) {
+            this.setData({
+                currentValue: event.detail.name,
+            });
+        },
+    },
+});
--- a/demos/radio/group/group.json
+++ b/demos/radio/group/group.json
@ -0,0 +1,3 @@
+{
+  "component": true
+}
--- a/demos/radio/group/group.wxml
+++ b/demos/radio/group/group.wxml
@ -0,0 +1,12 @@
+<t-radio-group class="radio-group" bind:change="onChange" value="{{value}}">
+  <t-radio
+    wx:for="{{items}}"
+    class="{{item.disabled ? 'radio-disabled' : ''}}"
+    wx:key="index"
+    title="{{item.title}}"
+    name="{{item.name}}"
+    disabled="{{item.disabled}}"
+    data-bordered="{{item.bordered}}"
+    label="{{item.label}}"
+  ></t-radio>
+</t-radio-group>
--- a/demos/radio/group/group.wxss
+++ b/demos/radio/group/group.wxss
--- a/miniprogram_npm/tdesign-miniprogram/action-sheet/README.en-US.md
+++ b/miniprogram_npm/tdesign-miniprogram/action-sheet/README.en-US.md
@ -0,0 +1,24 @@
+:: BASE_DOC ::
+
+## API
+### ActionSheet Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+align | String | center | `0.29.0`。options：center/left | N
+cancel-text | String | - | \- | N
+count | Number | 8 | \- | N
+description | String | - | `0.29.0` | N
+items | Array | - | required。Typescript：`Array<string \| ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | Y
+show-cancel | Boolean | true | \- | N
+theme | String | list | options：list/grid | N
+visible | Boolean | false | required | Y
+default-visible | Boolean | undefined | required。uncontrolled property | Y
+
+### ActionSheet Events
+
+name | params | description
+-- | -- | --
+cancel | \- | \-
+close | `(trigger: TriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
+selected | `(selected: ActionSheetItem \| string, index: number)` | \-
--- a/miniprogram_npm/tdesign-miniprogram/action-sheet/README.md
+++ b/miniprogram_npm/tdesign-miniprogram/action-sheet/README.md
@ -0,0 +1,107 @@
+---
+title: ActionSheet 动作面板
+description: 由用户操作后触发的一种特定的模态弹出框 ，呈现一组与当前情境相关的两个或多个选项。
+spline: data
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-89%25-blue" /></span>
+
+<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
+    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
+  </svg>
+  该组件于 0.9.0 版本上线，请留意版本。
+</div>
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-action-sheet": "tdesign-miniprogram/action-sheet/action-sheet",
+}
+```
+
+## 代码演示
+
+### 组件类型
+
+列表型动作面板
+
+{{ list }}
+
+宫格型动作面板
+
+{{ grid }}
+
+### 组件状态
+
+宫格型动作面板
+
+{{ status }}
+
+### 组件样式
+
+列表型对齐方式
+
+{{ align }}
+
+### 支持指令调用
+
+```javascript
+import ActionSheet, { ActionSheetTheme } from 'tdesign-miniprogram/action-sheet/index';
+
+// 指令调用不同于组件引用不需要传入visible
+const basicListOption: ActionSheetShowOption = {
+  theme: ActionSheetTheme.List,
+  selector: '#t-action-sheet',
+  items: [
+    {
+      label: '默认选项',
+    },
+    {
+      label: '失效选项',
+      disabled: true,
+    },
+    {
+      label: '警告选项',
+      color: '#e34d59',
+    },
+  ],
+};
+
+const handler = ActionSheet.show(basicListOption);
+```
+
+指令调用的关闭如下
+
+```javascript
+handler.close();
+```
+
+
+## API
+### ActionSheet Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+align | String | center | `0.29.0`。水平对齐方式。可选项：center/left | N
+cancel-text | String | - | 设置取消按钮的文本 | N
+count | Number | 8 | 设置每页展示菜单的数量，仅当 type=grid 时有效 | N
+description | String | - | `0.29.0`。动作面板描述文字 | N
+items | Array | - | 必需。菜单项。TS 类型：`Array<string \| ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts) | Y
+show-cancel | Boolean | true | 是否显示取消按钮 | N
+theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N
+visible | Boolean | false | 必需。显示与隐藏 | Y
+default-visible | Boolean | undefined | 必需。显示与隐藏。非受控属性 | Y
+external-classes | Array | - | 组件类名，用于设置组件外层元素类名。`['t-class', 't-class-content', 't-class-cancel']` | N
+
+### ActionSheet Events
+
+名称 | 参数 | 描述
+-- | -- | --
+cancel | \- | 点击取消按钮时触发
+close | `(trigger: TriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
+selected | `(selected: ActionSheetItem \| string, index: number)` | 选择菜单项时触发
--- a/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.d.ts
+++ b/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.d.ts
@ -0,0 +1,66 @@
+import { SuperComponent } from '../common/src/index';
+export default class ActionSheet extends SuperComponent {
+    static show: (options: import("./show").ActionSheetShowOption) => WechatMiniprogram.Component.TrivialInstance;
+    externalClasses: string[];
+    properties: {
+        align?: {
+            type: StringConstructor;
+            value?: "center" | "left";
+        };
+        cancelText?: {
+            type: StringConstructor;
+            value?: string;
+        };
+        count?: {
+            type: NumberConstructor;
+            value?: number;
+        };
+        description?: {
+            type: StringConstructor;
+            value?: string;
+        };
+        items: {
+            type: ArrayConstructor;
+            value?: (string | import("./type").ActionSheetItem)[];
+        };
+        showCancel?: {
+            type: BooleanConstructor;
+            value?: boolean;
+        };
+        theme?: {
+            type: StringConstructor;
+            value?: "list" | "grid";
+        };
+        visible: {
+            type: BooleanConstructor;
+            value?: boolean;
+        };
+        defaultVisible: {
+            type: BooleanConstructor;
+            value?: boolean;
+        };
+    };
+    data: {
+        prefix: string;
+        classPrefix: string;
+        gridThemeItems: any[];
+        currentSwiperIndex: number;
+    };
+    controlledProps: {
+        key: string;
+        event: string;
+    }[];
+    ready(): void;
+    methods: {
+        onSwiperChange(e: WechatMiniprogram.TouchEvent): void;
+        splitGridThemeActions(): void;
+        show(options: any): void;
+        memoInitialData(): void;
+        close(): void;
+        onPopupVisibleChange({ detail }: {
+            detail: any;
+        }): void;
+        onSelect(event: WechatMiniprogram.TouchEvent): void;
+        onCancel(): void;
+    };
+}
--- a/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.js
+++ b/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.js
@ -0,0 +1,94 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { chunk } from '../common/utils';
+import { SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import { ActionSheetTheme, show } from './show';
+import props from './props';
+const { prefix } = config;
+const name = `${prefix}-action-sheet`;
+let ActionSheet = class ActionSheet extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-cancel`];
+        this.properties = Object.assign({}, props);
+        this.data = {
+            prefix,
+            classPrefix: name,
+            gridThemeItems: [],
+            currentSwiperIndex: 0,
+        };
+        this.controlledProps = [
+            {
+                key: 'visible',
+                event: 'visible-change',
+            },
+        ];
+        this.methods = {
+            onSwiperChange(e) {
+                const { detail: { current }, } = e;
+                this.setData({
+                    currentSwiperIndex: current,
+                });
+            },
+            splitGridThemeActions() {
+                if (this.data.theme !== ActionSheetTheme.Grid)
+                    return;
+                this.setData({
+                    gridThemeItems: chunk(this.data.items, this.data.count),
+                });
+            },
+            show(options) {
+                this.setData(Object.assign(Object.assign(Object.assign({}, this.initialData), options), { visible: true }));
+                this.splitGridThemeActions();
+                this.autoClose = true;
+                this._trigger('visible-change', { visible: true });
+            },
+            memoInitialData() {
+                this.initialData = Object.assign(Object.assign({}, this.properties), this.data);
+            },
+            close() {
+                this.triggerEvent('close', { trigger: 'command' });
+                this._trigger('visible-change', { visible: false });
+            },
+            onPopupVisibleChange({ detail }) {
+                if (!detail.visible) {
+                    this.triggerEvent('close', { trigger: 'overlay' });
+                    this._trigger('visible-change', { visible: false });
+                }
+                if (this.autoClose) {
+                    this.setData({ visible: false });
+                    this.autoClose = false;
+                }
+            },
+            onSelect(event) {
+                const { currentSwiperIndex, items, gridThemeItems, count, theme } = this.data;
+                const { index } = event.currentTarget.dataset;
+                const isSwiperMode = theme === ActionSheetTheme.Grid;
+                const item = isSwiperMode ? gridThemeItems[currentSwiperIndex][index] : items[index];
+                const realIndex = isSwiperMode ? index + currentSwiperIndex * count : index;
+                if (item) {
+                    this.triggerEvent('selected', { selected: item, index: realIndex });
+                    this.trigger('close', { trigger: 'select' });
+                    this._trigger('visible-change', { visible: false });
+                }
+            },
+            onCancel() {
+                this.triggerEvent('cancel');
+            },
+        };
+    }
+    ready() {
+        this.memoInitialData();
+        this.splitGridThemeActions();
+    }
+};
+ActionSheet.show = show;
+ActionSheet = __decorate([
+    wxComponent()
+], ActionSheet);
+export default ActionSheet;
--- a/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.json
+++ b/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.json
@ -0,0 +1,10 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "../icon/icon",
+    "t-popup": "../popup/popup",
+    "t-grid": "../grid/grid",
+    "t-grid-item": "../grid-item/grid-item",
+    "t-swiper-nav": "../swiper-nav/swiper-nav"
+  }
+}
--- a/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.wxml
+++ b/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.wxml
@ -0,0 +1,41 @@
+<wxs src="./action-sheet.wxs" module="this" />
+<wxs src="../common/utils.wxs" module="_" />
+<import src="./template/list.wxml" />
+<import src="./template/grid.wxml" />
+
+<view id="{{classPrefix}}" style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class {{prefix}}-class">
+  <t-popup visible="{{visible}}" placement="bottom" bind:visible-change="onPopupVisibleChange">
+    <view
+      class="{{_.cls(classPrefix + '__content', [['grid', gridThemeItems.length]])}} {{prefix}}-class-content"
+      tabindex="0"
+    >
+      <view wx:if="{{description}}" tabindex="0" class="{{_.cls(classPrefix + '__description', [align])}}"
+        >{{description}}</view
+      >
+      <block wx:if="{{gridThemeItems.length}}">
+        <template is="grid" data="{{classPrefix, prefix, gridThemeItems, count, currentSwiperIndex}}" />
+      </block>
+      <view wx:elif="{{items && items.length}}" class="{{classPrefix}}__list">
+        <block wx:for="{{ items }}" wx:key="index">
+          <template
+            is="list"
+            data="{{index, classPrefix, listThemeItemClass: _.cls(classPrefix + '__list-item', [align, [disabled, item.disabled]]), item}}"
+          />
+        </block>
+      </view>
+    </view>
+    <slot />
+    <view wx:if="{{showCancel}}" class="{{classPrefix}}__footer {{classPrefix}}__safe">
+      <view class="{{classPrefix}}__gap-{{theme}}" />
+      <view
+        class="{{classPrefix}}__cancel {{prefix}}-class-cancel"
+        hover-class="{{classPrefix}}__cancel--hover"
+        hover-stay-time="70"
+        bind:tap="onCancel"
+        aria-role="button"
+      >
+        {{ cancelText }}
+      </view>
+    </view>
+  </t-popup>
+</view>
--- a/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.wxs
+++ b/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.wxs
@ -0,0 +1,19 @@
+var getListThemeItemClass = function (props) {
+  var classPrefix = props.classPrefix;
+  var item = props.item;
+  var prefix = props.prefix;
+  var classList = [classPrefix + '__list-item'];
+  if (item.disabled) {
+    classList.push(prefix + '-is-disabled');
+  }
+  return classList.join(' ');
+};
+
+var isImage = function (name) {
+  return name.indexOf('/') !== -1;
+};
+
+module.exports = {
+  getListThemeItemClass: getListThemeItemClass,
+  isImage: isImage,
+};
--- a/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.wxss
+++ b/miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.wxss
@ -0,0 +1,169 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+.t-action-sheet__content {
+  color: var(--td-action-sheet-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+  border-top-left-radius: var(--td-action-sheet-border-radius, var(--td-radius-extra-large, 24rpx));
+  border-top-right-radius: var(--td-action-sheet-border-radius, var(--td-radius-extra-large, 24rpx));
+  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+  overflow: hidden;
+}
+.t-action-sheet__content--grid {
+  padding-top: 16rpx;
+}
+.t-action-sheet__content:focus {
+  outline: 0;
+}
+.t-action-sheet__grid {
+  padding-bottom: 16rpx;
+}
+.t-action-sheet__grid--swiper {
+  padding-bottom: 48rpx;
+}
+.t-action-sheet__description {
+  color: var(--td-action-sheet-description-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
+  line-height: 44rpx;
+  font-size: 28rpx;
+  text-align: var(--td-action-sheet-text-align, center);
+  padding: 24rpx 32rpx;
+  position: relative;
+}
+.t-action-sheet__description:focus {
+  outline: 0;
+}
+.t-action-sheet__description::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: unset;
+  bottom: 0;
+  left: unset;
+  right: unset;
+  background-color: var(--td-action-sheet-border-color, var(--td-gray-color-1, #f3f3f3));
+}
+.t-action-sheet__description::after {
+  height: 1px;
+  left: 0;
+  right: 0;
+  transform: scaleY(0.5);
+}
+.t-action-sheet__description--left {
+  text-align: left;
+}
+.t-action-sheet__description--left::after {
+  left: 32rpx;
+}
+.t-action-sheet__list-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  height: var(--td-action-sheet-list-item-height, 112rpx);
+  padding: 0 32rpx;
+}
+.t-action-sheet__list-item::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: unset;
+  bottom: 0;
+  left: unset;
+  right: unset;
+  background-color: var(--td-action-sheet-border-color, var(--td-gray-color-1, #f3f3f3));
+}
+.t-action-sheet__list-item::after {
+  height: 1px;
+  left: 0;
+  right: 0;
+  transform: scaleY(0.5);
+}
+.t-action-sheet__list-item:focus {
+  outline: 0;
+}
+.t-action-sheet__list-item--left {
+  justify-content: start;
+}
+.t-action-sheet__list-item--left::after {
+  left: 32rpx;
+}
+.t-action-sheet__list-item--disabled {
+  color: var(--td-action-sheet-list-item-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
+}
+.t-action-sheet__list-item-text {
+  font-size: var(--td-font-size-m, 32rpx);
+  word-wrap: normal;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.t-action-sheet__list-item-icon {
+  margin-right: 16rpx;
+}
+.t-action-sheet__swiper-wrap {
+  margin-top: 8rpx;
+  position: relative;
+}
+.t-action-sheet__footer {
+  background-color: var(--td-bg-color-container, var(--td-font-white-1, #ffffff));
+}
+.t-action-sheet__gap-list {
+  height: 16rpx;
+  background-color: var(--td-action-sheet-border-color, var(--td-gray-color-1, #f3f3f3));
+}
+.t-action-sheet__gap-grid {
+  height: 1rpx;
+  background-color: var(--td-action-sheet-border-color, var(--td-gray-color-1, #f3f3f3));
+}
+.t-action-sheet__cancel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--td-action-sheet-cancel-height, 96rpx);
+}
+.t-action-sheet__dots {
+  position: absolute;
+  left: 50%;
+  bottom: 32rpx;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: row;
+}
+.t-action-sheet__dots-item {
+  width: 16rpx;
+  height: 16rpx;
+  background-color: #dcdcdc;
+  border-radius: 50%;
+  margin: 0 16rpx;
+  transition: all 0.4s ease-in;
+}
+.t-action-sheet__dots-item.t-is-active {
+  background-color: #0052d9;
+}
+.t-action-sheet__safe {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
--- a/miniprogram_npm/tdesign-miniprogram/action-sheet/index.d.ts
+++ b/miniprogram_npm/tdesign-miniprogram/action-sheet/index.d.ts
@ -0,0 +1,3 @@
+import ActionSheet from './action-sheet';
+export * from './show';
+export default ActionSheet;
--- a/miniprogram_npm/tdesign-miniprogram/action-sheet/index.js
+++ b/miniprogram_npm/tdesign-miniprogram/action-sheet/index.js
@ -0,0 +1,3 @@
+import ActionSheet from './action-sheet';
+export * from './show';
+export default ActionSheet;
--- a/miniprogram_npm/tdesign-miniprogram/action-sheet/props.d.ts
+++ b/miniprogram_npm/tdesign-miniprogram/action-sheet/props.d.ts
@ -0,0 +1,3 @@
+import { TdActionSheetProps } from './type';
+declare const props: TdActionSheetProps;
+export default props;
--- a/miniprogram_npm/tdesign-miniprogram/action-sheet/props.js
+++ b/miniprogram_npm/tdesign-miniprogram/action-sheet/props.js
@ -0,0 +1,38 @@
+const props = {
+    align: {
+        type: String,
+        value: 'center',
+    },
+    cancelText: {
+        type: String,
+        value: '取消',
+    },
+    count: {
+        type: Number,
+        value: 8,
+    },
+    description: {
+        type: String,
+        value: '',
+    },
+    items: {
+        type: Array,
+    },
+    showCancel: {
+        type: Boolean,
+        value: true,
+    },
+    theme: {
+        type: String,
+        value: 'list',
+    },
+    visible: {
+        type: Boolean,
+        value: null,
+    },
+    defaultVisible: {
+        type: Boolean,
+        value: false,
+    },
+};
+export default props;
--- a/miniprogram_npm/tdesign-miniprogram/action-sheet/show.d.ts
+++ b/miniprogram_npm/tdesign-miniprogram/action-sheet/show.d.ts
@ -0,0 +1,29 @@
+/// <reference types="miniprogram-api-typings" />
+/// <reference types="miniprogram-api-typings" />
+export interface ActionSheetItem {
+    label: string;
+    color?: string;
+    disabled?: boolean;
+    icon?: string;
+}
+declare type Context = WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
+export declare enum ActionSheetTheme {
+    List = "list",
+    Grid = "grid"
+}
+interface ActionSheetProps {
+    visible: boolean;
+    items: Array<string | ActionSheetItem>;
+    defaultVisible?: boolean;
+    cancelText?: string;
+    count?: number;
+    showCancel?: boolean;
+    theme?: ActionSheetTheme;
+}
+export interface ActionSheetShowOption extends Omit<ActionSheetProps, 'visible'> {
+    context?: Context;
+    selector?: string;
+}
+export declare const show: (options: ActionSheetShowOption) => WechatMiniprogram.Component.TrivialInstance;
+export declare const close: (options: ActionSheetShowOption) => void;
+export {};
--- a/miniprogram_npm/tdesign-miniprogram/action-sheet/show.js
+++ b/miniprogram_npm/tdesign-miniprogram/action-sheet/show.js
@ -0,0 +1,33 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { getInstance } from '../common/utils';
+export var ActionSheetTheme;
+(function (ActionSheetTheme) {
+    ActionSheetTheme["List"] = "list";
+    ActionSheetTheme["Grid"] = "grid";
+})(ActionSheetTheme || (ActionSheetTheme = {}));
+export const show = function (options) {
+    const _a = Object.assign({}, options), { context, selector = '#t-action-sheet' } = _a, otherOptions = __rest(_a, ["context", "selector"]);
+    const instance = getInstance(context, selector);
+    if (instance) {
+        instance.show(Object.assign({}, otherOptions));
+        return instance;
+    }
+    console.error('未找到组件,请确认 selector && context 是否正确');
+};
+export const close = function (options) {
+    const { context, selector = '#t-action-sheet' } = Object.assign({}, options);
+    const instance = getInstance(context, selector);
+    if (instance) {
+        instance.close();
+    }
+};
--- a/miniprogram_npm/tdesign-miniprogram/action-sheet/template/grid.wxml
+++ 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>
--- a/miniprogram_npm/tdesign-miniprogram/action-sheet/template/list.wxml
+++ 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>
--- a/miniprogram_npm/tdesign-miniprogram/action-sheet/type.d.ts
+++ b/miniprogram_npm/tdesign-miniprogram/action-sheet/type.d.ts
@ -0,0 +1,43 @@
+export interface TdActionSheetProps {
+    align?: {
+        type: StringConstructor;
+        value?: 'center' | 'left';
+    };
+    cancelText?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    count?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    description?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    items: {
+        type: ArrayConstructor;
+        value?: Array<string | ActionSheetItem>;
+    };
+    showCancel?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    theme?: {
+        type: StringConstructor;
+        value?: 'list' | 'grid';
+    };
+    visible: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    defaultVisible: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+}
+export interface ActionSheetItem {
+    label: string;
+    color?: string;
+    disabled?: boolean;
+}
--- a/miniprogram_npm/tdesign-miniprogram/action-sheet/type.js
+++ b/miniprogram_npm/tdesign-miniprogram/action-sheet/type.js
@ -0,0 +1 @@
+export {};
--- a/miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.d.ts
+++ 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;
+    };
+}
--- a/miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.js
+++ 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;
--- a/miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.json
+++ b/miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.json
@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-avatar": "../avatar/avatar"
+  }
+}
--- a/miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.wxml
+++ b/miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.wxml
@ -0,0 +1,20 @@
+<wxs src="../common/utils.wxs" module="_" />
+
+<view style="{{_._style([style, customStyle])}}" class="{{className}} class">
+  <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}}-avatar--border {{prefix}}-avatar--border-{{size}} {{prefix}}-class-image"
+      t-class-content="{{prefix}}-class-content"
+      size="{{size}}"
+      icon="{{ collapseAvatar ? '' : 'user-add'}}"
+      aria-role="none"
+      >{{collapseAvatar}}</t-avatar
+    >
+  </view>
+</view>
--- a/miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.wxss
+++ b/miniprogram_npm/tdesign-miniprogram/avatar-group/avatar-group.wxss
@ -0,0 +1,137 @@
+.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 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  background-color: var(--td-avatar-bg-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
+  color: var(--td-avatar-content-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-avatar__wrapper {
+  display: inline-flex;
+  position: relative;
+  vertical-align: top;
+  margin-left: var(--td-avatar-margin-left, 0);
+}
+.t-avatar--large {
+  width: var(--td-avatar-large-width, 128rpx);
+  height: var(--td-avatar-large-width, 128rpx);
+  font-size: var(--td-avatar-text-large-font-size, 16px);
+}
+.t-avatar--large .t-avatar__icon {
+  font-size: var(--td-avatar-icon-large-font-size, 64rpx);
+}
+.t-avatar--medium {
+  width: var(--td-avatar-medium-width, 96rpx);
+  height: var(--td-avatar-medium-width, 96rpx);
+  font-size: var(--td-avatar-text-medium-font-size, var(--td-font-size-base, 28rpx));
+}
+.t-avatar--medium .t-avatar__icon {
+  font-size: var(--td-avatar-icon-medium-font-size, 48rpx);
+}
+.t-avatar--small {
+  width: var(--td-avatar-small-width, 80rpx);
+  height: var(--td-avatar-small-width, 80rpx);
+  font-size: var(--td-avatar-text-small-font-size, var(--td-font-size-s, 24rpx));
+}
+.t-avatar--small .t-avatar__icon {
+  font-size: var(--td-avatar-icon-small-font-size, 40rpx);
+}
+.t-avatar .t-image,
+.t-avatar__image {
+  width: 100%;
+  height: 100%;
+}
+.t-avatar--circle {
+  border-radius: var(--td-avatar-circle-border-radius, var(--td-radius-circle, 50%));
+  overflow: hidden;
+}
+.t-avatar--round {
+  border-radius: var(--td-avatar-round-border-radius, var(--td-radius-default, 12rpx));
+  overflow: hidden;
+}
+.t-avatar__text,
+.t-avatar__icon {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.t-avatar__text:empty,
+.t-avatar__icon:empty {
+  width: 0;
+  height: 0;
+}
+.t-avatar--border {
+  border-color: var(--td-avatar-border-color, #fff);
+  border-style: solid;
+}
+.t-avatar--border-small {
+  border-width: var(--td-avatar-border-width-small, 4rpx);
+}
+.t-avatar--border-medium {
+  border-width: var(--td-avatar-border-width-medium, 6rpx);
+}
+.t-avatar--border-large {
+  border-width: var(--td-avatar-border-width-large, 8rpx);
+}
+.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;
+}
--- a/miniprogram_npm/tdesign-miniprogram/avatar-group/props.d.ts
+++ 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;
--- a/miniprogram_npm/tdesign-miniprogram/avatar-group/props.js
+++ b/miniprogram_npm/tdesign-miniprogram/avatar-group/props.js
@ -0,0 +1,20 @@
+const props = {
+    cascading: {
+        type: String,
+        value: 'left-up',
+    },
+    collapseAvatar: {
+        type: String,
+    },
+    externalClasses: {
+        type: Array,
+    },
+    max: {
+        type: Number,
+    },
+    size: {
+        type: String,
+        value: 'medium',
+    },
+};
+export default props;
--- a/miniprogram_npm/tdesign-miniprogram/avatar-group/type.d.ts
+++ 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';
--- a/miniprogram_npm/tdesign-miniprogram/avatar-group/type.js
+++ b/miniprogram_npm/tdesign-miniprogram/avatar-group/type.js
@ -0,0 +1 @@
+export {};
--- a/miniprogram_npm/tdesign-miniprogram/avatar/README.en-US.md
+++ b/miniprogram_npm/tdesign-miniprogram/avatar/README.en-US.md
@ -0,0 +1,33 @@
+:: BASE_DOC ::
+
+## API
+### Avatar Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+alt | String | - | show it when url is not valid | N
+badge-props | Object | - | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
+bordered | Boolean | false | \- | N
+external-classes | Array | - | `['t-class', 't-class-image', 't-class-icon', 't-class-alt', 't-class-content']` | N
+hide-on-load-failed | Boolean | false | hide image when loading image failed | N
+icon | String / Object | - | \- | N
+image | String | - | images url | N
+image-props | Object | - | \- | N
+shape | String | circle | shape。options：circle/round。Typescript：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
+size | String | medium | size | N
+
+### Avatar Events
+
+name | params | description
+-- | -- | --
+error | \- | trigger on image load failed
+
+### AvatarGroup Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+cascading | String | 'right-up' | multiple images cascading。options：left-up/right-up。Typescript：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar-group/type.ts) | N
+collapse-avatar | String / Slot | - | \- | N
+external-classes | Array | - | `['t-class', 't-class-image', 't-class-content']` | N
+max | Number | - | \- | N
+size | String | medium | size | N
--- a/miniprogram_npm/tdesign-miniprogram/avatar/README.md
+++ b/miniprogram_npm/tdesign-miniprogram/avatar/README.md
@ -0,0 +1,87 @@
+---
+title: Avatar 头像
+description: 用于展示用户头像信息，除了纯展示也可点击进入个人详情等操作。
+spline: data
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-99%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-85%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-avatar": "tdesign-miniprogram/avatar/avatar",
+  "t-avatar-group": "tdesign-miniprogram/avatar-group/avatar-group"
+}
+```
+
+## 代码演示
+
+### 头像类型
+
+图片头像
+
+{{ image-avatar }}
+
+字符头像
+
+{{ character-avatar }}
+
+图标头像
+
+{{ icon-avatar }}
+
+徽标头像
+
+{{ badge-avatar }}
+
+
+### 组合头像
+
+纯展示
+
+{{ exhibition }}
+
+带操作
+
+{{ action }}
+
+### 头像尺寸
+
+头像 large/medium/small 尺寸
+
+{{ size }}
+
+## API
+### Avatar Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+alt | String | - | 头像替换文本，仅当图片加载失败时有效 | N
+badge-props | Object | - | 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
+bordered | Boolean | false | 已废弃。是否显示外边框 | N
+external-classes | Array | - | 组件类名，用于设置组件外层元素类名。`['t-class', 't-class-image', 't-class-icon', 't-class-alt', 't-class-content']` | N
+hide-on-load-failed | Boolean | false | 加载失败时隐藏图片 | N
+icon | String / Object | - | 图标。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N
+image | String | - | 图片地址 | N
+image-props | Object | - | 透传至 Image 组件 | N
+shape | String | circle | 形状。可选项：circle/round。TS 类型：`ShapeEnum ` `type ShapeEnum = 'circle' \| 'round'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar/type.ts) | N
+size | String | medium | 尺寸，示例值：small/medium/large/24px/38px 等 | N
+
+### Avatar Events
+
+名称 | 参数 | 描述
+-- | -- | --
+error | \- | 图片加载失败时触发
+
+### AvatarGroup Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+cascading | String | 'left-up' | 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上。可选项：left-up/right-up。TS 类型：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/avatar-group/type.ts) | N
+collapse-avatar | String / Slot | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多` | N
+external-classes | Array | - | 组件类名，用于设置组件外层元素类名。`['t-class', 't-class-image', 't-class-content']` | N
+max | Number | - | 能够同时显示的最多头像数量 | N
+size | String | medium | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | N
--- a/miniprogram_npm/tdesign-miniprogram/avatar/avatar.d.ts
+++ b/miniprogram_npm/tdesign-miniprogram/avatar/avatar.d.ts
@ -0,0 +1,23 @@
+/// <reference types="miniprogram-api-typings" />
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+export default class Avatar extends SuperComponent {
+    options: WechatMiniprogram.Component.ComponentOptions;
+    externalClasses: string[];
+    properties: import("./type").TdAvatarProps;
+    data: {
+        prefix: string;
+        classPrefix: string;
+        isShow: boolean;
+        zIndex: number;
+        bordered: boolean;
+    };
+    relations: RelationsOptions;
+    observers: {
+        icon(icon: any): void;
+    };
+    methods: {
+        hide(): void;
+        updateCascading(zIndex: any): void;
+        onLoadError(e: WechatMiniprogram.CustomEvent): void;
+    };
+}
--- a/miniprogram_npm/tdesign-miniprogram/avatar/avatar.js
+++ b/miniprogram_npm/tdesign-miniprogram/avatar/avatar.js
@ -0,0 +1,77 @@
+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 avatarProps from './props';
+import { setIcon } from '../common/utils';
+const { prefix } = config;
+const name = `${prefix}-avatar`;
+let Avatar = class Avatar extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.options = {
+            multipleSlots: true,
+            styleIsolation: 'apply-shared',
+        };
+        this.externalClasses = [
+            `${prefix}-class`,
+            `${prefix}-class-image`,
+            `${prefix}-class-icon`,
+            `${prefix}-class-alt`,
+            `${prefix}-class-content`,
+        ];
+        this.properties = avatarProps;
+        this.data = {
+            prefix,
+            classPrefix: name,
+            isShow: true,
+            zIndex: 0,
+            bordered: false,
+        };
+        this.relations = {
+            '../avatar-group/avatar-group': {
+                type: 'ancestor',
+                linked(parent) {
+                    var _a;
+                    this.parent = parent;
+                    this.setData({
+                        size: (_a = this.data.size) !== null && _a !== void 0 ? _a : parent.data.size,
+                        bordered: true,
+                    });
+                },
+            },
+        };
+        this.observers = {
+            icon(icon) {
+                const obj = setIcon('icon', icon, '');
+                this.setData(Object.assign({}, obj));
+            },
+        };
+        this.methods = {
+            hide() {
+                this.setData({
+                    isShow: false,
+                });
+            },
+            updateCascading(zIndex) {
+                this.setData({ zIndex });
+            },
+            onLoadError(e) {
+                if (this.properties.hideOnLoadFailed) {
+                    this.setData({
+                        isShow: false,
+                    });
+                }
+                this.triggerEvent('error', e.detail);
+            },
+        };
+    }
+};
+Avatar = __decorate([
+    wxComponent()
+], Avatar);
+export default Avatar;
--- a/miniprogram_npm/tdesign-miniprogram/avatar/avatar.json
+++ b/miniprogram_npm/tdesign-miniprogram/avatar/avatar.json
@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "../icon/icon",
+    "t-badge": "../badge/badge",
+    "t-image": "../image/image"
+  }
+}
--- a/miniprogram_npm/tdesign-miniprogram/avatar/avatar.wxml
+++ b/miniprogram_npm/tdesign-miniprogram/avatar/avatar.wxml
@ -0,0 +1,54 @@
+<import src="../common/template/icon.wxml" />
+<wxs src="../common/utils.wxs" module="_" />
+<wxs src="./avatar.wxs" module="this" />
+
+<view
+  class="{{classPrefix}}__wrapper class {{prefix}}-class"
+  style="{{_._style([this.getStyles(isShow, zIndex), style, customStyle])}}"
+>
+  <t-badge
+    color="{{badgeProps.color || ''}}"
+    content="{{badgeProps.content || ''}}"
+    count="{{badgeProps.count || 0}}"
+    dot="{{badgeProps.dot || false}}"
+    max-count="{{badgeProps.maxCount || 99}}"
+    offset="{{badgeProps.offset || []}}"
+    shape="{{badgeProps.shape || 'circle'}}"
+    show-zero="{{badgeProps.showZero || false}}"
+    size="{{badgeProps.size || 'medium'}}"
+    t-class="{{badgeProps.tClass}}"
+    t-class-content="{{badgeProps.tClassContent}}"
+    t-class-count="{{badgeProps.tClassCount}}"
+  >
+    <view
+      class="{{this.getClass(classPrefix, size, shape, bordered)}} {{prefix}}-class-image"
+      style="{{this.getSize(size)}}"
+      aria-label="{{ ariaLabel || alt ||'头像'}}"
+      aria-role="{{ ariaRole || 'img'}}"
+      aria-hidden="{{ ariaHidden }}"
+    >
+      <t-image
+        wx:if="{{image}}"
+        t-class="{{prefix}}-image {{classPrefix}}__image"
+        t-class-load="{{prefix}}-class-alt"
+        style="{{imageProps.style || ''}}"
+        src="{{image}}"
+        mode="{{imageProps.mode || 'aspectFill'}}"
+        lazy="{{imageProps.lazy || false}}"
+        loading="{{imageProps.loading || 'default'}}"
+        shape="{{imageProps.shape || 'round'}}"
+        webp="{{imageProps.webp || false}}"
+        error="{{alt || 'default'}}"
+        bind:error="onLoadError"
+      />
+      <template
+        wx:elif="{{iconName || _.isNoEmptyObj(iconData)}}"
+        is="icon"
+        data="{{class: classPrefix + '__icon', tClass: prefix + '-class-icon', name: iconName, ...iconData}}"
+      />
+      <view wx:else class="{{classPrefix}}__text {{prefix}}-class-content">
+        <slot />
+      </view>
+    </view>
+  </t-badge>
+</view>
--- a/miniprogram_npm/tdesign-miniprogram/avatar/avatar.wxs
+++ b/miniprogram_npm/tdesign-miniprogram/avatar/avatar.wxs
@ -0,0 +1,26 @@
+module.exports = {
+  getClass: function (classPrefix, size, shape, bordered) {
+    var hasPx = (size || '').indexOf('px') > -1;
+    var borderSize = hasPx ? 'medium' : size;
+    var classNames = [
+      classPrefix,
+      classPrefix + (shape === 'round' ? '--round' : '--circle'),
+      bordered ? classPrefix + '--border' + ' ' + classPrefix + '--border-' + borderSize : '',
+      hasPx ? '' : classPrefix + '--' + size,
+    ];
+    return classNames.join(' ');
+  },
+
+  getSize: function (size = 'medium') {
+    var pxIndex = size.indexOf('px');
+    if (pxIndex > -1) {
+      return 'width:' + size + ';height:' + size + ';font-size:' + ((size.slice(0, pxIndex) / 8) * 3 + 2) + 'px;';
+    }
+  },
+
+  getStyles: function (isShow, zIndex) {
+    var displayStyle = isShow ? '' : 'display: none;';
+    var zIndexStyle = zIndex ? 'z-index:' + zIndex + ';' : '';
+    return displayStyle + zIndexStyle;
+  },
+};
--- a/miniprogram_npm/tdesign-miniprogram/avatar/avatar.wxss
+++ b/miniprogram_npm/tdesign-miniprogram/avatar/avatar.wxss
@ -0,0 +1,104 @@
+.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 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  background-color: var(--td-avatar-bg-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
+  color: var(--td-avatar-content-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-avatar__wrapper {
+  display: inline-flex;
+  position: relative;
+  vertical-align: top;
+  margin-left: var(--td-avatar-margin-left, 0);
+}
+.t-avatar--large {
+  width: var(--td-avatar-large-width, 128rpx);
+  height: var(--td-avatar-large-width, 128rpx);
+  font-size: var(--td-avatar-text-large-font-size, 16px);
+}
+.t-avatar--large .t-avatar__icon {
+  font-size: var(--td-avatar-icon-large-font-size, 64rpx);
+}
+.t-avatar--medium {
+  width: var(--td-avatar-medium-width, 96rpx);
+  height: var(--td-avatar-medium-width, 96rpx);
+  font-size: var(--td-avatar-text-medium-font-size, var(--td-font-size-base, 28rpx));
+}
+.t-avatar--medium .t-avatar__icon {
+  font-size: var(--td-avatar-icon-medium-font-size, 48rpx);
+}
+.t-avatar--small {
+  width: var(--td-avatar-small-width, 80rpx);
+  height: var(--td-avatar-small-width, 80rpx);
+  font-size: var(--td-avatar-text-small-font-size, var(--td-font-size-s, 24rpx));
+}
+.t-avatar--small .t-avatar__icon {
+  font-size: var(--td-avatar-icon-small-font-size, 40rpx);
+}
+.t-avatar .t-image,
+.t-avatar__image {
+  width: 100%;
+  height: 100%;
+}
+.t-avatar--circle {
+  border-radius: var(--td-avatar-circle-border-radius, var(--td-radius-circle, 50%));
+  overflow: hidden;
+}
+.t-avatar--round {
+  border-radius: var(--td-avatar-round-border-radius, var(--td-radius-default, 12rpx));
+  overflow: hidden;
+}
+.t-avatar__text,
+.t-avatar__icon {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.t-avatar__text:empty,
+.t-avatar__icon:empty {
+  width: 0;
+  height: 0;
+}
+.t-avatar--border {
+  border-color: var(--td-avatar-border-color, #fff);
+  border-style: solid;
+}
+.t-avatar--border-small {
+  border-width: var(--td-avatar-border-width-small, 4rpx);
+}
+.t-avatar--border-medium {
+  border-width: var(--td-avatar-border-width-medium, 6rpx);
+}
+.t-avatar--border-large {
+  border-width: var(--td-avatar-border-width-large, 8rpx);
+}
--- a/miniprogram_npm/tdesign-miniprogram/avatar/props.d.ts
+++ b/miniprogram_npm/tdesign-miniprogram/avatar/props.d.ts
@ -0,0 +1,3 @@
+import { TdAvatarProps } from './type';
+declare const props: TdAvatarProps;
+export default props;
--- a/miniprogram_npm/tdesign-miniprogram/avatar/props.js
+++ b/miniprogram_npm/tdesign-miniprogram/avatar/props.js
@ -0,0 +1,39 @@
+const props = {
+    alt: {
+        type: String,
+        value: '',
+    },
+    badgeProps: {
+        type: Object,
+    },
+    bordered: {
+        type: Boolean,
+        value: false,
+    },
+    externalClasses: {
+        type: Array,
+    },
+    hideOnLoadFailed: {
+        type: Boolean,
+        value: false,
+    },
+    icon: {
+        type: null,
+    },
+    image: {
+        type: String,
+        value: '',
+    },
+    imageProps: {
+        type: Object,
+    },
+    shape: {
+        type: String,
+        value: 'circle',
+    },
+    size: {
+        type: String,
+        value: 'medium',
+    },
+};
+export default props;
--- a/miniprogram_npm/tdesign-miniprogram/avatar/type.d.ts
+++ b/miniprogram_npm/tdesign-miniprogram/avatar/type.d.ts
@ -0,0 +1,48 @@
+import { BadgeProps } from '../badge/index';
+export interface TdAvatarProps {
+    alt?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    badgeProps?: {
+        type: ObjectConstructor;
+        value?: BadgeProps;
+    };
+    bordered?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    style?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class', 't-class-image', 't-class-icon', 't-class-alt', 't-class-content'];
+    };
+    hideOnLoadFailed?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    icon?: {
+        type: null;
+        value?: string | object;
+    };
+    image?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    imageProps?: {
+        type: ObjectConstructor;
+        value?: object;
+    };
+    shape?: {
+        type: StringConstructor;
+        value?: ShapeEnum;
+    };
+    size?: {
+        type: StringConstructor;
+        value?: string;
+    };
+}
+export declare type ShapeEnum = 'circle' | 'round';
--- a/miniprogram_npm/tdesign-miniprogram/avatar/type.js
+++ b/miniprogram_npm/tdesign-miniprogram/avatar/type.js
@ -0,0 +1 @@
+export {};
--- a/miniprogram_npm/tdesign-miniprogram/back-top/README.en-US.md
+++ b/miniprogram_npm/tdesign-miniprogram/back-top/README.en-US.md
@ -0,0 +1,19 @@
+:: BASE_DOC ::
+
+## API
+
+### BackTop Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+external-classes | Array | - | `['t-class', 't-class-icon', 't-class-text']` | N
+fixed | Boolean | true | \- | N
+icon | String / Boolean / Object / Slot | - | \- | N
+text | String | '' | \- | N
+theme | String | round | options：round/half-round/round-dark/half-round-dark | N
+
+### BackTop Events
+
+name | params | description
+-- | -- | --
+to-top | \- | \-
--- a/miniprogram_npm/tdesign-miniprogram/back-top/README.md
+++ b/miniprogram_npm/tdesign-miniprogram/back-top/README.md
@ -0,0 +1,42 @@
+---
+title: BackTop 返回顶部
+description: 用于当页面过长往下滑动时，帮助用户快速回到页面顶部。
+spline: navigation
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+"t-back-top": "tdesign-miniprogram/back-top/back-top",
+}
+```
+
+## 代码演示
+
+<img src="https://tdesign.gtimg.com/miniprogram/readme/backtop-1.png" width="375px" height="50%">
+
+### 基础返回顶部
+
+{{ base }}
+
+## API
+### BackTop Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+external-classes | Array | - | 组件类名，分别用于设置外层元素、图标、文本内容等元素类名。`['t-class', 't-class-icon', 't-class-text']` | N
+fixed | Boolean | true | 是否绝对定位固定到屏幕右下方 | N
+icon | String / Boolean / Object / Slot | true | 图标。值为 `false` 表示不显示图标。不传表示使用默认图标 `'backtop'` | N
+text | String | '' | 文案 | N
+theme | String | round | 预设的样式类型。可选项：round/half-round/round-dark/half-round-dark | N
+
+### BackTop Events
+
+名称 | 参数 | 描述
+-- | -- | --
+to-top | \- | 点击触发
--- a/miniprogram_npm/tdesign-miniprogram/back-top/back-top.d.ts
+++ b/miniprogram_npm/tdesign-miniprogram/back-top/back-top.d.ts
@ -0,0 +1,24 @@
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+export default class BackTop extends SuperComponent {
+    externalClasses: string[];
+    options: {
+        multipleSlots: boolean;
+    };
+    properties: import("./type").TdBackTopProps;
+    relations: RelationsOptions;
+    data: {
+        prefix: string;
+        classPrefix: string;
+        _icon: any;
+    };
+    observers: {
+        icon(): void;
+    };
+    lifetimes: {
+        ready(): void;
+    };
+    methods: {
+        setIcon(v: any): void;
+        toTop(): void;
+    };
+}
--- a/miniprogram_npm/tdesign-miniprogram/back-top/back-top.js
+++ b/miniprogram_npm/tdesign-miniprogram/back-top/back-top.js
@ -0,0 +1,67 @@
+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 { calcIcon } from '../common/utils';
+const { prefix } = config;
+const name = `${prefix}-back-top`;
+let BackTop = class BackTop extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [`${prefix}-class`, `${prefix}-class-icon`, `${prefix}-class-text`];
+        this.options = {
+            multipleSlots: true,
+        };
+        this.properties = props;
+        this.relations = {
+            '../pull-down-refresh/pull-down-refresh': {
+                type: 'ancestor',
+            },
+        };
+        this.data = {
+            prefix,
+            classPrefix: name,
+            _icon: null,
+        };
+        this.observers = {
+            icon() {
+                this.setIcon();
+            },
+        };
+        this.lifetimes = {
+            ready() {
+                const { icon } = this.properties;
+                this.setIcon(icon);
+            },
+        };
+        this.methods = {
+            setIcon(v) {
+                this.setData({
+                    _icon: calcIcon(v, 'backtop'),
+                });
+            },
+            toTop() {
+                var _a;
+                this.triggerEvent('to-top');
+                if (this.$parent) {
+                    (_a = this.$parent) === null || _a === void 0 ? void 0 : _a.setScrollTop(0);
+                }
+                else {
+                    wx.pageScrollTo({
+                        scrollTop: 0,
+                        duration: 300,
+                    });
+                }
+            },
+        };
+    }
+};
+BackTop = __decorate([
+    wxComponent()
+], BackTop);
+export default BackTop;
--- a/miniprogram_npm/tdesign-miniprogram/back-top/back-top.json
+++ b/miniprogram_npm/tdesign-miniprogram/back-top/back-top.json
@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "../icon/icon"
+  }
+}
--- a/miniprogram_npm/tdesign-miniprogram/back-top/back-top.wxml
+++ b/miniprogram_npm/tdesign-miniprogram/back-top/back-top.wxml
@ -0,0 +1,16 @@
+<import src="../common/template/icon.wxml" />
+<wxs src="../common/utils.wxs" module="_" />
+
+<view
+  style="{{_._style([style, customStyle])}}"
+  class="class {{prefix}}-class {{_.cls(classPrefix, [['fixed', fixed], theme])}}"
+  bindtap="toTop"
+  aria-role="button"
+>
+  <view class="{{classPrefix}}__icon" aria-hidden>
+    <slot name="icon" />
+    <template wx:if="{{_icon}}" is="icon" data="{{tClass: prefix + '-class-icon', ..._icon }}" />
+  </view>
+  <view wx:if="{{!!text}}" class="{{classPrefix}}__text--{{theme}} {{prefix}}-class-text">{{text}}</view>
+  <slot />
+</view>
--- a/miniprogram_npm/tdesign-miniprogram/back-top/back-top.wxss
+++ b/miniprogram_npm/tdesign-miniprogram/back-top/back-top.wxss
@ -0,0 +1,89 @@
+.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-back-top {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  overflow: hidden;
+  box-sizing: border-box;
+  transition: height 0.2s;
+  height: auto;
+}
+.t-back-top--fixed {
+  position: fixed;
+  right: var(--td-spacer, 16rpx);
+  bottom: var(--td-spacer-2, 32rpx);
+}
+.t-back-top--round,
+.t-back-top--round-dark {
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: var(--td-back-top-round-border-radius, var(--td-radius-circle, 50%));
+}
+.t-back-top--round,
+.t-back-top--half-round {
+  color: var(--td-back-top-round-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+  border: 1rpx solid var(--td-back-top-round-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+  background-color: var(--td-back-top-round-bg-color, var(--td-font-white-1, #ffffff));
+}
+.t-back-top--round-dark,
+.t-back-top--half-round-dark {
+  color: var(--td-back-top-round-dark-color, var(--td-font-white-1, #ffffff));
+  background-color: var(--td-back-top-round-dark-bg-color, var(--td-gray-color-14, #181818));
+}
+.t-back-top--half-round,
+.t-back-top--half-round-dark {
+  width: 120rpx;
+  height: 80rpx;
+  border-radius: var(--td-back-top-half-round-border-radius, var(--td-radius-round, 999px)) 0 0 var(--td-back-top-half-round-border-radius, var(--td-radius-round, 999px));
+  flex-direction: row;
+  right: 0;
+}
+.t-back-top__text--round,
+.t-back-top__text--round-dark,
+.t-back-top__text--half-round,
+.t-back-top__text--half-round-dark {
+  font-size: var(--td-font-size, 20rpx);
+  line-height: 24rpx;
+}
+.t-back-top__text--half-round,
+.t-back-top__text--half-round-dark {
+  width: 2em;
+}
+.t-back-top__icon:not(:empty) + .t-back-top__text--half-round,
+.t-back-top__icon:not(:empty) + .t-back-top__text--half-round-dark {
+  margin-left: 8rpx;
+}
+.t-back-top__icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 44rpx;
+}
--- a/miniprogram_npm/tdesign-miniprogram/back-top/props.d.ts
+++ b/miniprogram_npm/tdesign-miniprogram/back-top/props.d.ts
@ -0,0 +1,3 @@
+import { TdBackTopProps } from './type';
+declare const props: TdBackTopProps;
+export default props;
--- a/miniprogram_npm/tdesign-miniprogram/back-top/props.js
+++ b/miniprogram_npm/tdesign-miniprogram/back-top/props.js
@ -0,0 +1,22 @@
+const props = {
+    externalClasses: {
+        type: Array,
+    },
+    fixed: {
+        type: Boolean,
+        value: true,
+    },
+    icon: {
+        type: null,
+        value: true,
+    },
+    text: {
+        type: String,
+        value: '',
+    },
+    theme: {
+        type: String,
+        value: 'round',
+    },
+};
+export default props;
--- a/miniprogram_npm/tdesign-miniprogram/back-top/type.d.ts
+++ b/miniprogram_npm/tdesign-miniprogram/back-top/type.d.ts
@ -0,0 +1,26 @@
+export interface TdBackTopProps {
+    style?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class', 't-class-icon', 't-class-text'];
+    };
+    fixed?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    icon?: {
+        type: null;
+        value?: boolean | string | object;
+    };
+    text?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    theme?: {
+        type: StringConstructor;
+        value?: 'round' | 'half-round' | 'round-dark' | 'half-round-dark';
+    };
+}
--- a/miniprogram_npm/tdesign-miniprogram/back-top/type.js
+++ b/miniprogram_npm/tdesign-miniprogram/back-top/type.js
@ -0,0 +1 @@
+export {};
--- a/miniprogram_npm/tdesign-miniprogram/badge/README.en-US.md
+++ b/miniprogram_npm/tdesign-miniprogram/badge/README.en-US.md
@ -0,0 +1,17 @@
+:: BASE_DOC ::
+
+## API
+### Badge Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+color | String | - | \- | N
+content | String | - | \- | N
+count | String / Number / Slot | 0 | \- | N
+dot | Boolean | false | \- | N
+external-classes | Array | - | `['t-class', 't-class-content', 't-class-count']` | N
+max-count | Number | 99 | \- | N
+offset | Array | - | Typescript：`Array<string \| number>` | N
+shape | String | circle | options：circle/round/ribbon/bubble | N
+show-zero | Boolean | false | \- | N
+size | String | medium | options：small/medium | N
--- a/miniprogram_npm/tdesign-miniprogram/badge/README.md
+++ b/miniprogram_npm/tdesign-miniprogram/badge/README.md
@ -0,0 +1,47 @@
+---
+title: Badge 徽标
+description: 用于告知用户，该区域的状态变化或者待处理任务的数量。
+spline: data
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-100%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-badge": "tdesign-miniprogram/badge/badge"
+}
+```
+
+## 代码演示
+
+### 组件类型
+
+{{ base }}
+
+### 组件样式
+
+{{ theme }}
+
+### 组件尺寸
+
+{{ size }}
+
+## API
+### Badge Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+color | String | - | 颜色 | N
+content | String | - | 徽标内容，示例：`content='自定义内容'`。也可以使用默认插槽定义 | N
+count | String / Number / Slot | 0 | 徽标右上角内容。可以是数字，也可以是文字。如：'new'/3/99+。特殊：值为空表示使用插槽渲染 | N
+dot | Boolean | false | 是否为红点 | N
+external-classes | Array | - | 组件类名，分别用于设置外层元素、默认内容、右上角内容等元素类名。`['t-class', 't-class-content', 't-class-count']` | N
+max-count | Number | 99 | 封顶的数字值 | N
+offset | Array | - | 设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem']。TS 类型：`Array<string \| number>` | N
+shape | String | circle | 形状。可选项：circle/round/ribbon/bubble | N
+show-zero | Boolean | false | 当数值为 0 时，是否展示徽标 | N
+size | String | medium | 尺寸。可选项：small/medium | N
--- a/miniprogram_npm/tdesign-miniprogram/badge/badge.d.ts
+++ b/miniprogram_npm/tdesign-miniprogram/badge/badge.d.ts
@ -0,0 +1,21 @@
+import { SuperComponent } from '../common/src/index';
+import type { TdBadgeProps } from './type';
+export interface BadgeProps extends TdBadgeProps {
+}
+export default class Badge extends SuperComponent {
+    options: {
+        multipleSlots: boolean;
+    };
+    externalClasses: string[];
+    properties: TdBadgeProps;
+    data: {
+        prefix: string;
+        classPrefix: string;
+        value: string;
+        labelID: string;
+        descriptionID: string;
+    };
+    lifetimes: {
+        ready(): void;
+    };
+}
--- a/miniprogram_npm/tdesign-miniprogram/badge/badge.js
+++ b/miniprogram_npm/tdesign-miniprogram/badge/badge.js
@ -0,0 +1,43 @@
+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 { uniqueFactory } from '../common/utils';
+const { prefix } = config;
+const name = `${prefix}-badge`;
+const getUniqueID = uniqueFactory('badge');
+let Badge = class Badge extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.options = {
+            multipleSlots: true,
+        };
+        this.externalClasses = [`${prefix}-class`, `${prefix}-class-count`, `${prefix}-class-content`];
+        this.properties = props;
+        this.data = {
+            prefix,
+            classPrefix: name,
+            value: '',
+            labelID: '',
+            descriptionID: '',
+        };
+        this.lifetimes = {
+            ready() {
+                const uniqueID = getUniqueID();
+                this.setData({
+                    labelID: `${uniqueID}_label`,
+                    descriptionID: `${uniqueID}_description`,
+                });
+            },
+        };
+    }
+};
+Badge = __decorate([
+    wxComponent()
+], Badge);
+export default Badge;
--- a/miniprogram_npm/tdesign-miniprogram/badge/badge.json
+++ b/miniprogram_npm/tdesign-miniprogram/badge/badge.json
@ -0,0 +1,5 @@
+{
+  "component": true,
+  "usingComponents": {}
+}
+
--- a/miniprogram_npm/tdesign-miniprogram/badge/badge.wxml
+++ b/miniprogram_npm/tdesign-miniprogram/badge/badge.wxml
@ -0,0 +1,25 @@
+<wxs src="./badge.wxs" module="this" />
+<wxs src="../common/utils.wxs" module="_" />
+
+<view
+  style="{{_._style([style, customStyle])}}"
+  class="{{this.getBadgeOuterClass({shape})}} class {{prefix}}-class"
+  aria-labelledby="{{labelID}}"
+  aria-describedby="{{descriptionID}}"
+  aria-role="{{ ariaRole || 'option'}}"
+>
+  <view id="{{labelID}}" class="{{classPrefix}}__content {{prefix}}-class-content" aria-hidden="true">
+    <slot wx:if="{{!content}}" class="{{classPrefix}}__content-slot" />
+    <text wx:else class="{{classPrefix}}__content-text">{{content}}</text>
+  </view>
+  <view
+    wx:if="{{this.isShowBadge({dot,count,showZero})}}"
+    id="{{descriptionID}}"
+    class="{{this.getBadgeInnerClass({dot, size, shape, count})}} {{prefix}}-has-count {{prefix}}-class-count"
+    style="{{this.getBadgeStyles({color, offset})}}"
+    aria-hidden="true"
+    aria-label="{{ ariaLabel || this.getBadgeAriaLabel({dot, count, maxCount}) }}"
+    >{{ this.getBadgeValue({dot, count, maxCount}) }}
+  </view>
+  <slot name="count" />
+</view>
--- a/miniprogram_npm/tdesign-miniprogram/badge/badge.wxs
+++ b/miniprogram_npm/tdesign-miniprogram/badge/badge.wxs
@ -0,0 +1,84 @@
+var getBadgeValue = function (props) {
+  if (props.dot) {
+    return '';
+  }
+  if (isNaN(props.count) || isNaN(props.maxCount)) {
+    return props.count;
+  }
+  return parseInt(props.count) > props.maxCount ? props.maxCount + '+' : props.count;
+};
+
+var hasUnit = function (unit) {
+  return (
+    unit.indexOf('px') > 0 ||
+    unit.indexOf('rpx') > 0 ||
+    unit.indexOf('em') > 0 ||
+    unit.indexOf('rem') > 0 ||
+    unit.indexOf('%') > 0 ||
+    unit.indexOf('vh') > 0 ||
+    unit.indexOf('vm') > 0
+  );
+};
+
+var getBadgeStyles = function (props) {
+  var styleStr = '';
+  if (props.color) {
+    styleStr += 'background:' + props.color + ';';
+  }
+  if (props.offset[0]) {
+    styleStr += 'right:' + (hasUnit(props.offset[0].toString()) ? props.offset[0] : props.offset[0] + 'px') + ';';
+  }
+  if (props.offset[1]) {
+    styleStr += 'top:' + (hasUnit(props.offset[1].toString()) ? props.offset[1] : props.offset[1] + 'px') + ';';
+  }
+  return styleStr;
+};
+
+var getBadgeOuterClass = function (props) {
+  var baseClass = 't-badge';
+  var classNames = [baseClass, props.shape === 'ribbon' ? baseClass + '__ribbon-outer' : ''];
+  return classNames.join(' ');
+};
+
+var getBadgeInnerClass = function (props) {
+  var baseClass = 't-badge';
+  var classNames = [
+    baseClass + '--basic',
+    props.dot ? baseClass + '--dot' : '',
+    baseClass + '--' + props.size,
+    baseClass + '--' + props.shape,
+    !props.dot && props.count ? baseClass + '--count' : '',
+  ];
+  return classNames.join(' ');
+};
+
+var isShowBadge = function (props) {
+  if (props.dot) {
+    return true;
+  }
+  if (!props.showZero && !isNaN(props.count) && parseInt(props.count) === 0) {
+    return false;
+  }
+  if (props.count == null) return false;
+  return true;
+};
+
+var getBadgeAriaLabel = function (props) {
+  if (props.dot) {
+    return '有新的消息';
+  }
+  if (isNaN(props.count) || isNaN(props.maxCount)) {
+    var str = '有' + props.count + '通知';
+    return str;
+  }
+  var str1 = '有' + props.maxCount + '+条消息';
+  var str2 = '有' + props.count + '条消息';
+  return parseInt(props.count) > props.maxCount ? str1 : str2;
+};
+
+module.exports.getBadgeValue = getBadgeValue;
+module.exports.getBadgeStyles = getBadgeStyles;
+module.exports.getBadgeOuterClass = getBadgeOuterClass;
+module.exports.getBadgeInnerClass = getBadgeInnerClass;
+module.exports.getBadgeAriaLabel = getBadgeAriaLabel;
+module.exports.isShowBadge = isShowBadge;
--- a/miniprogram_npm/tdesign-miniprogram/badge/badge.wxss
+++ b/miniprogram_npm/tdesign-miniprogram/badge/badge.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);
+}
+.t-badge {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+}
+.t-badge--basic {
+  z-index: 100;
+  padding: 0 var(--td-badge-basic-padding, 8rpx);
+  font-size: var(--td-badge-font-size, var(--td-font-size-xs, var(--td-font-size, 20rpx)));
+  color: var(--td-badge-text-color, var(--td-font-white-1, #ffffff));
+  background-color: var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+  text-align: center;
+  height: var(--td-badge-basic-height, 32rpx);
+  line-height: var(--td-badge-basic-height, 32rpx);
+  font-weight: var(--td-badge-font-weight, 600);
+  border-radius: var(--td-badge-border-radius, 4rpx);
+}
+.t-badge--dot {
+  height: var(--td-badge-dot-size, 16rpx);
+  border-radius: 50%;
+  min-width: var(--td-badge-dot-size, 16rpx);
+  padding: 0;
+}
+.t-badge--count {
+  min-width: var(--td-badge-basic-width, 32rpx);
+  white-space: nowrap;
+  box-sizing: border-box;
+}
+.t-badge--circle {
+  border-radius: calc(var(--td-badge-basic-height, 32rpx) / 2);
+}
+.t-badge__ribbon-outer {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.t-badge--ribbon {
+  display: inline-block;
+  transform: rotate(45deg);
+  border-radius: 0;
+}
+.t-badge--ribbon::before {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  bottom: 0;
+  left: calc(-1 * var(--td-badge-basic-height, 32rpx) + 1rpx);
+  border-bottom: var(--td-badge-basic-height, 32rpx) solid var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+  border-left: var(--td-badge-basic-height, 32rpx) solid transparent;
+}
+.t-badge--ribbon::after {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  bottom: 0;
+  right: calc(-1 * var(--td-badge-basic-height, 32rpx) + 1rpx);
+  border-bottom: var(--td-badge-basic-height, 32rpx) solid var(--td-badge-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+  border-right: var(--td-badge-basic-height, 32rpx) solid transparent;
+}
+.t-badge--bubble {
+  border-radius: var(--td-badge-bubble-border-radius, 20rpx 20rpx 20rpx 1px);
+}
+.t-badge--large {
+  font-size: var(--td-badge-large-font-size, var(--td-font-size-s, 24rpx));
+  height: var(--td-badge-large-height, 40rpx);
+  min-width: var(--td-badge-large-height, 40rpx);
+  line-height: var(--td-badge-large-height, 40rpx);
+  padding: 0 var(--td-badge-large-padding, 10rpx);
+}
+.t-badge--large.t-badge--circle {
+  border-radius: calc(var(--td-badge-large-height, 40rpx) / 2);
+}
+.t-badge__content:not(:empty) + .t-has-count {
+  transform: translate(50%, -50%);
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+.t-badge__content-text {
+  display: block;
+  line-height: 48rpx;
+}
--- a/miniprogram_npm/tdesign-miniprogram/badge/index.d.ts
+++ b/miniprogram_npm/tdesign-miniprogram/badge/index.d.ts
@ -0,0 +1,3 @@
+export * from './type';
+export * from './props';
+export * from './badge';
--- a/miniprogram_npm/tdesign-miniprogram/badge/index.js
+++ b/miniprogram_npm/tdesign-miniprogram/badge/index.js
@ -0,0 +1,3 @@
+export * from './type';
+export * from './props';
+export * from './badge';
--- a/miniprogram_npm/tdesign-miniprogram/badge/props.d.ts
+++ b/miniprogram_npm/tdesign-miniprogram/badge/props.d.ts
@ -0,0 +1,3 @@
+import { TdBadgeProps } from './type';
+declare const props: TdBadgeProps;
+export default props;
--- a/miniprogram_npm/tdesign-miniprogram/badge/props.js
+++ b/miniprogram_npm/tdesign-miniprogram/badge/props.js
@ -0,0 +1,41 @@
+const props = {
+    color: {
+        type: String,
+        value: '',
+    },
+    content: {
+        type: String,
+        value: '',
+    },
+    count: {
+        type: null,
+        value: 0,
+    },
+    dot: {
+        type: Boolean,
+        value: false,
+    },
+    externalClasses: {
+        type: Array,
+    },
+    maxCount: {
+        type: Number,
+        value: 99,
+    },
+    offset: {
+        type: Array,
+    },
+    shape: {
+        type: String,
+        value: 'circle',
+    },
+    showZero: {
+        type: Boolean,
+        value: false,
+    },
+    size: {
+        type: String,
+        value: 'medium',
+    },
+};
+export default props;
--- a/miniprogram_npm/tdesign-miniprogram/badge/type.d.ts
+++ b/miniprogram_npm/tdesign-miniprogram/badge/type.d.ts
@ -0,0 +1,46 @@
+export interface TdBadgeProps {
+    color?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    content?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    count?: {
+        type: null;
+        value?: string | number;
+    };
+    style?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    dot?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class', 't-class-content', 't-class-count'];
+    };
+    maxCount?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    offset?: {
+        type: ArrayConstructor;
+        value?: Array<string | number>;
+    };
+    shape?: {
+        type: StringConstructor;
+        value?: 'circle' | 'round' | 'ribbon' | 'bubble';
+    };
+    showZero?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    size?: {
+        type: StringConstructor;
+        value?: 'small' | 'medium';
+    };
+}
--- a/miniprogram_npm/tdesign-miniprogram/badge/type.js
+++ b/miniprogram_npm/tdesign-miniprogram/badge/type.js
@ -0,0 +1 @@
+export {};
--- a/miniprogram_npm/tdesign-miniprogram/button/README.en-US.md
+++ b/miniprogram_npm/tdesign-miniprogram/button/README.en-US.md
@ -0,0 +1,46 @@
+:: BASE_DOC ::
+
+## API
+### Button Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+block | Boolean | false | make button to be a block-level element | N
+content | String / Slot | - | button's children elements | N
+custom-dataset | Object | - | Typescript：`any` | N
+disabled | Boolean | false | disable the button, make it can not be clicked | N
+external-classes | Array | - | `['t-class', 't-class-icon', 't-class-loading']` | N
+ghost | Boolean | false | make background-color to be transparent | N
+icon | String / Object | - | icon name | N
+loading | Boolean | false | set button to be loading state | N
+loading-props | Object | - | Typescript：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/button/type.ts) | N
+shape | String | rectangle | button shape。options：rectangle/square/round/circle | N
+size | String | medium | a button has three size。options：small/medium/large。Typescript：`SizeEnum` | N
+suffix | Slot | - | \- | N
+theme | String | default | button theme。options：default/primary/danger | N
+type | String | - | type of button element, same as formType of Miniprogram。options：submit/reset | N
+variant | String | base | button variant。options：base/outline/text | N
+open-type | String | - | options：contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar | N
+hover-stop-propagation | Boolean | false | \- | N
+hover-start-time | Number | 20 | \- | N
+hover-stay-time | Number | 70 | \- | N
+lang | String | en | options：en/zh_CN/zh_TW | N
+session-from | String | - | \- | N
+send-message-title | String | 当前标题 | \- | N
+send-message-path | String | 当前分享路径 | \- | N
+send-message-img | String | 截图 | \- | N
+app-parameter | String | - | \- | N
+show-message-card | Boolean | false | \- | N
+bindgetuserinfo | Eventhandle | - | \- | N
+bindcontact | Eventhandle | - | \- | N
+bindgetphonenumber | Eventhandle | - | \- | N
+binderror | Eventhandle | - | \- | N
+bindopensetting | Eventhandle | - | \- | N
+bindlaunchapp | Eventhandle | - | \- | N
+bindchooseavatar | Eventhandle | - | \- | N
+
+### Button Events
+
+name | params | description
+-- | -- | --
+tap | `(e: MouseEvent)` | trigger on click
--- a/miniprogram_npm/tdesign-miniprogram/button/README.md
+++ b/miniprogram_npm/tdesign-miniprogram/button/README.md
@ -0,0 +1,106 @@
+---
+title: Button 按钮
+description: 用于开启一个闭环的操作任务，如“删除”对象、“购买”商品等。
+spline: base
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-83%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-button": "tdesign-miniprogram/button/button"
+}
+```
+
+## 代码演示
+
+### 01 组件类型
+
+基础按钮
+
+{{ base }}
+
+图标按钮
+
+{{ icon-btn }}
+
+幽灵按钮
+
+{{ ghost-btn }}
+
+组合按钮
+
+{{ group-btn }}
+
+通栏按钮
+
+{{ block-btn }}
+
+### 02 组件状态
+
+按钮禁用态
+
+{{ disabled }}
+
+### 03 组件样式
+
+按钮尺寸
+
+{{ size }}
+
+按钮形状
+
+{{ shape }}
+
+按钮主题
+
+{{ theme }}
+
+## API
+### Button Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+block | Boolean | false | 是否为块级元素 | N
+content | String / Slot | - | 按钮内容 | N
+custom-dataset | Object | - | 自定义 dataset，可通过 event.currentTarget.dataset.custom 获取。TS 类型：`any` | N
+disabled | Boolean | false | 禁用状态 | N
+external-classes | Array | - | 组件类名。`['t-class', 't-class-icon', 't-class-loading']` | N
+ghost | Boolean | false | 是否为幽灵按钮（镂空按钮） | N
+icon | String / Object | - | 图标名称。值为字符串表示图标名称，值为 `Object` 类型，表示透传至 `icon`。 | N
+loading | Boolean | false | 是否显示为加载状态 | N
+loading-props | Object | - | 透传至 Loading 组件。TS 类型：`LoadingProps`，[Loading API Documents](./loading?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/button/type.ts) | N
+shape | String | rectangle | 按钮形状，有 4 种：长方形、正方形、圆角长方形、圆形。可选项：rectangle/square/round/circle | N
+size | String | medium | 组件尺寸。可选项：extra-small/small/medium/large。TS 类型：`SizeEnum` | N
+suffix | Slot | - | 右侧内容，可用于定义右侧图标 | N
+theme | String | default | 组件风格，依次为品牌色、危险色。可选项：default/primary/danger/light | N
+type | String | - | 同小程序的 formType。可选项：submit/reset | N
+variant | String | base | 按钮形式，基础、线框、文字。可选项：base/outline/dashed/text | N
+open-type | String | - | 微信开放能力。<br />具体释义：<br />`contact` 打开客服会话，如果用户在会话中点击消息卡片后返回小程序，可以从 bindcontact 回调中获得具体信息，<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html">具体说明</a> （*小程序插件中不能使用*）；<br />`share` 触发用户转发，使用前建议先阅读<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#使用指引">使用指引</a>；<br />`getPhoneNumber` 获取用户手机号，可以从 bindgetphonenumber 回调中获取到用户信息，<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html">具体说明</a> （*小程序插件中不能使用*）；<br />`getUserInfo` 获取用户信息，可以从 bindgetuserinfo 回调中获取到用户信息 （*小程序插件中不能使用*）；<br />`launchApp` 打开APP，可以通过 app-parameter 属性设定向 APP 传的参数<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html">具体说明</a>；<br />`openSetting` 打开授权设置页；<br />`feedback` 打开“意见反馈”页面，用户可提交反馈内容并上传<a href="https://developers.weixin.qq.com/miniprogram/dev/api/base/debug/wx.getLogManager.html">日志</a>，开发者可以登录<a href="https://mp.weixin.qq.com/">小程序管理后台</a>后进入左侧菜单“客服反馈”页面获取到反馈内容；<br />`chooseAvatar` 获取用户头像，可以从 bindchooseavatar 回调中获取到头像信息。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。可选项：contact/share/getPhoneNumber/getUserInfo/launchApp/openSetting/feedback/chooseAvatar | N
+hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | N
+hover-start-time | Number | 20 | 按住后多久出现点击态，单位毫秒 | N
+hover-stay-time | Number | 70 | 手指松开后点击态保留时间，单位毫秒 | N
+lang | String | en | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文。。<br />具体释义：<br />`en` 英文；<br />`zh_CN` 简体中文；<br />`zh_TW` 繁体中文。<br />[小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html)。可选项：en/zh_CN/zh_TW | N
+session-from | String | - | 会话来源，open-type="contact"时有效 | N
+send-message-title | String | 当前标题 | 会话内消息卡片标题，open-type="contact"时有效 | N
+send-message-path | String | 当前分享路径 | 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效 | N
+send-message-img | String | 截图 | 会话内消息卡片图片，open-type="contact"时有效 | N
+app-parameter | String | - | 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效 | N
+show-message-card | Boolean | false | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效 | N
+bindgetuserinfo | Eventhandle | - | 用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与<a href="https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserInfo.html">wx.getUserInfo</a>返回的一致，open-type="getUserInfo"时有效 | N
+bindcontact | Eventhandle | - | 客服消息回调，open-type="contact"时有效 | N
+bindgetphonenumber | Eventhandle | - | 获取用户手机号回调，open-type=getPhoneNumber时有效 | N
+binderror | Eventhandle | - | 当使用开放能力时，发生错误的回调，open-type=launchApp时有效 | N
+bindopensetting | Eventhandle | - | 在打开授权设置页后回调，open-type=openSetting时有效 | N
+bindlaunchapp | Eventhandle | - | 打开 APP 成功的回调，open-type=launchApp时有效 | N
+bindchooseavatar | Eventhandle | - | 获取用户头像回调，open-type=chooseAvatar时有效 | N
+
+### Button Events
+
+名称 | 参数 | 描述
+-- | -- | --
+tap | `event` | 点击时触发
--- a/miniprogram_npm/tdesign-miniprogram/button/button.d.ts
+++ b/miniprogram_npm/tdesign-miniprogram/button/button.d.ts
@ -0,0 +1,32 @@
+import { SuperComponent } from '../common/src/index';
+import type { TdButtonProps } from './type';
+export interface ButtonProps extends TdButtonProps {
+}
+export default class Button extends SuperComponent {
+    externalClasses: string[];
+    behaviors: string[];
+    properties: TdButtonProps;
+    data: {
+        prefix: string;
+        className: string;
+        classPrefix: string;
+    };
+    observers: {
+        'theme, size, plain, block, shape, disabled, loading'(): void;
+        icon(icon: any): void;
+    };
+    lifetimes: {
+        attached(): void;
+    };
+    methods: {
+        setClass(): void;
+        getuserinfo(e: any): void;
+        contact(e: any): void;
+        getphonenumber(e: any): void;
+        error(e: any): void;
+        opensetting(e: any): void;
+        launchapp(e: any): void;
+        chooseavatar(e: any): void;
+        handleTap(e: any): void;
+    };
+}
--- a/miniprogram_npm/tdesign-miniprogram/button/button.js
+++ b/miniprogram_npm/tdesign-miniprogram/button/button.js
@ -0,0 +1,94 @@
+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 { canIUseFormFieldButton } from '../common/version';
+import { setIcon } from '../common/utils';
+const { prefix } = config;
+const name = `${prefix}-button`;
+let Button = class Button extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [`${prefix}-class`, `${prefix}-class-icon`, `${prefix}-class-loading`];
+        this.behaviors = canIUseFormFieldButton() ? ['wx://form-field-button'] : [];
+        this.properties = props;
+        this.data = {
+            prefix,
+            className: '',
+            classPrefix: name,
+        };
+        this.observers = {
+            'theme, size, plain, block, shape, disabled, loading'() {
+                this.setClass();
+            },
+            icon(icon) {
+                const obj = setIcon('icon', icon, '');
+                this.setData(Object.assign({}, obj));
+            },
+        };
+        this.lifetimes = {
+            attached() {
+                this.setClass();
+            },
+        };
+        this.methods = {
+            setClass() {
+                const classList = [
+                    name,
+                    `${prefix}-class`,
+                    `${name}--${this.data.variant || 'base'}`,
+                    `${name}--${this.data.theme || 'default'}`,
+                    `${name}--${this.data.shape || 'rectangle'}`,
+                    `${name}--size-${this.data.size || 'medium'}`,
+                ];
+                if (this.data.block) {
+                    classList.push(`${name}--block`);
+                }
+                if (this.data.disabled) {
+                    classList.push(`${name}--disabled`);
+                }
+                if (this.data.ghost) {
+                    classList.push(`${name}--ghost`);
+                }
+                this.setData({
+                    className: classList.join(' '),
+                });
+            },
+            getuserinfo(e) {
+                this.triggerEvent('getuserinfo', e.detail);
+            },
+            contact(e) {
+                this.triggerEvent('contact', e.detail);
+            },
+            getphonenumber(e) {
+                this.triggerEvent('getphonenumber', e.detail);
+            },
+            error(e) {
+                this.triggerEvent('error', e.detail);
+            },
+            opensetting(e) {
+                this.triggerEvent('opensetting', e.detail);
+            },
+            launchapp(e) {
+                this.triggerEvent('launchapp', e.detail);
+            },
+            chooseavatar(e) {
+                this.triggerEvent('chooseavatar', e.detail);
+            },
+            handleTap(e) {
+                if (this.data.disabled)
+                    return;
+                this.triggerEvent('tap', e);
+            },
+        };
+    }
+};
+Button = __decorate([
+    wxComponent()
+], Button);
+export default Button;
--- a/miniprogram_npm/tdesign-miniprogram/button/button.json
+++ b/miniprogram_npm/tdesign-miniprogram/button/button.json
@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "../icon/icon",
+    "t-loading": "../loading/loading"
+  }
+}
--- a/miniprogram_npm/tdesign-miniprogram/button/button.wxml
+++ b/miniprogram_npm/tdesign-miniprogram/button/button.wxml
@ -0,0 +1,59 @@
+<import src="../common/template/icon.wxml" />
+<wxs src="../common/utils.wxs" module="_" />
+
+<button
+  style="{{_._style([style, customStyle])}}"
+  data-custom="{{ customDataset }}"
+  class="class {{className}}"
+  form-type="{{type}}"
+  open-type="{{disabled ? '' : openType}}"
+  hover-stop-propagation="{{hoverStopPropagation}}"
+  hover-start-time="{{hoverStartTime}}"
+  hover-stay-time="{{hoverStayTime}}"
+  lang="{{lang}}"
+  session-from="{{sessionFrom}}"
+  hover-class="{{disabled ? '' : classPrefix + '--hover'}}"
+  send-message-title="{{sendMessageTitle}}"
+  send-message-path="{{sendMessagePath}}"
+  send-message-img="{{sendMessageImg}}"
+  app-parameter="{{appParameter}}"
+  show-message-card="{{showMessageCard}}"
+  catch:tap="handleTap"
+  bind:getuserinfo="getuserinfo"
+  bind:contact="contact"
+  bind:getphonenumber="getphonenumber"
+  bind:error="error"
+  bind:opensetting="opensetting"
+  bind:launchapp="launchapp"
+  bind:chooseavatar="chooseavatar"
+  aria-label="{{ariaLabel}}"
+>
+  <template
+    wx:if="{{iconName || _.isNoEmptyObj(iconData)}}"
+    is="icon"
+    data="{{class: classPrefix + '__icon', tClass: prefix + '-class-icon', ariaHidden: true, name: iconName, ...iconData}}"
+  />
+  <t-loading
+    wx:if="{{loading}}"
+    delay="{{loadingProps.delay || 0}}"
+    duration="{{loadingProps.duration || 800}}"
+    indicator="{{loadingProps.indicator || true}}"
+    inheritColor="{{loadingProps.indicator || false}}"
+    layout="{{loadingProps.layout || 'horizontal'}}"
+    pause="{{loadingProps.pause || false}}"
+    progress="{{loadingProps.progress || 0}}"
+    reverse="{{loadingProps.reverse || false}}"
+    size="{{loadingProps.size || '40rpx'}}"
+    text="{{loadingProps.text || '' }}"
+    theme="{{loadingProps.theme || 'circular'}}"
+    loading
+    t-class="{{classPrefix}}__loading {{classPrefix}}__loading--wrapper"
+    t-class-indicator="{{classPrefix}}__loading--indicator {{prefix}}-class-loading"
+  />
+  <view class="{{classPrefix}}__content">
+    <slot name="content" />
+    <block>{{content}}</block>
+    <slot />
+  </view>
+  <slot name="suffix" />
+</button>
--- a/miniprogram_npm/tdesign-miniprogram/button/button.wxss
+++ b/miniprogram_npm/tdesign-miniprogram/button/button.wxss
@ -0,0 +1,451 @@
+.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-button--size-extra-small {
+  font-size: var(--td-button-extra-small-font-size, var(--td-font-size-base, 28rpx));
+  padding-left: var(--td-button-extra-small-padding-horizontal, 16rpx);
+  padding-right: var(--td-button-extra-small-padding-horizontal, 16rpx);
+  height: var(--td-button-extra-small-height, 56rpx);
+  line-height: var(--td-button-extra-small-height, 56rpx);
+}
+.t-button--size-extra-small .t-button__icon {
+  font-size: var(--td-button-extra-small-icon-font-size, 36rpx);
+}
+.t-button--size-small {
+  font-size: var(--td-button-small-font-size, var(--td-font-size-base, 28rpx));
+  padding-left: var(--td-button-small-padding-horizontal, 24rpx);
+  padding-right: var(--td-button-small-padding-horizontal, 24rpx);
+  height: var(--td-button-small-height, 64rpx);
+  line-height: var(--td-button-small-height, 64rpx);
+}
+.t-button--size-small .t-button__icon {
+  font-size: var(--td-button-small-icon-font-size, 36rpx);
+}
+.t-button--size-medium {
+  font-size: var(--td-button-medium-font-size, var(--td-font-size-m, 32rpx));
+  padding-left: var(--td-button-medium-padding-horizontal, 32rpx);
+  padding-right: var(--td-button-medium-padding-horizontal, 32rpx);
+  height: var(--td-button-medium-height, 80rpx);
+  line-height: var(--td-button-medium-height, 80rpx);
+}
+.t-button--size-medium .t-button__icon {
+  font-size: var(--td-button-medium-icon-font-size, 40rpx);
+}
+.t-button--size-large {
+  font-size: var(--td-button-large-font-size, var(--td-font-size-m, 32rpx));
+  padding-left: var(--td-button-large-padding-horizontal, 40rpx);
+  padding-right: var(--td-button-large-padding-horizontal, 40rpx);
+  height: var(--td-button-large-height, 96rpx);
+  line-height: var(--td-button-large-height, 96rpx);
+}
+.t-button--size-large .t-button__icon {
+  font-size: var(--td-button-large-icon-font-size, 48rpx);
+}
+.t-button--default {
+  color: var(--td-button-default-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+  background-color: var(--td-button-default-bg-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
+}
+.t-button--default::after {
+  border-width: var(--td-button-border-width, 4rpx);
+  border-color: var(--td-button-default-border-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
+}
+.t-button--default.t-button--hover {
+  z-index: 0;
+}
+.t-button--default.t-button--hover::after {
+  background-color: var(--td-button-default-active-bg-color, var(--td-bg-color-component-active, var(--td-gray-color-6, #a6a6a6)));
+  border-color: var(--td-button-default-active-border-color, var(--td-bg-color-component-active, var(--td-gray-color-6, #a6a6a6)));
+}
+.t-button--default.t-button--disabled {
+  color: var(--td-button-default-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
+  background-color: var(--td-button-default-disabled-bg, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee)));
+}
+.t-button--default.t-button--disabled::after {
+  border-color: var(--td-button-default-disabled-border-color, var(--td-bg-color-component-disabled, var(--td-gray-color-2, #eeeeee)));
+}
+.t-button--primary {
+  color: var(--td-button-primary-color, var(--td-font-white-1, #ffffff));
+  background-color: var(--td-button-primary-bg-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-button--primary::after {
+  border-width: var(--td-button-border-width, 4rpx);
+  border-color: var(--td-button-primary-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-button--primary.t-button--hover {
+  z-index: 0;
+}
+.t-button--primary.t-button--hover::after {
+  background-color: var(--td-button-primary-active-bg-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
+  border-color: var(--td-button-primary-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
+}
+.t-button--primary.t-button--disabled {
+  color: var(--td-button-primary-disabled-color, var(--td-font-white-1, #ffffff));
+  background-color: var(--td-button-primary-disabled-bg, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
+}
+.t-button--primary.t-button--disabled::after {
+  border-color: var(--td-button-primary-disabled-border-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
+}
+.t-button--light {
+  color: var(--td-button-light-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  background-color: var(--td-button-light-bg-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
+}
+.t-button--light::after {
+  border-width: var(--td-button-border-width, 4rpx);
+  border-color: var(--td-button-light-border-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
+}
+.t-button--light.t-button--hover {
+  z-index: 0;
+}
+.t-button--light.t-button--hover::after {
+  background-color: var(--td-button-light-active-bg-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
+  border-color: var(--td-button-light-active-border-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
+}
+.t-button--light.t-button--disabled {
+  color: var(--td-button-light-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
+  background-color: var(--td-button-light-disabled-bg, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
+}
+.t-button--light.t-button--disabled::after {
+  border-color: var(--td-button-light-disabled-border-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
+}
+.t-button--danger {
+  color: var(--td-button-danger-color, var(--td-font-white-1, #ffffff));
+  background-color: var(--td-button-danger-bg-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+}
+.t-button--danger::after {
+  border-width: var(--td-button-border-width, 4rpx);
+  border-color: var(--td-button-danger-border-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+}
+.t-button--danger.t-button--hover {
+  z-index: 0;
+}
+.t-button--danger.t-button--hover::after {
+  background-color: var(--td-button-danger-active-bg-color, var(--td-error-color-7, #ad352f));
+  border-color: var(--td-button-danger-active-border-color, var(--td-error-color-7, #ad352f));
+}
+.t-button--danger.t-button--disabled {
+  color: var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff));
+  background-color: var(--td-button-danger-disabled-bg, var(--td-error-color-3, #ffb9b0));
+}
+.t-button--danger.t-button--disabled::after {
+  border-color: var(--td-button-danger-disabled-border-color, var(--td-error-color-3, #ffb9b0));
+}
+.t-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  white-space: nowrap;
+  text-align: center;
+  background-image: none;
+  transition: all 0.3s;
+  touch-action: manipulation;
+  border-radius: var(--td-button-border-radius, var(--td-radius-default, 12rpx));
+  outline: none;
+  font-family: PingFang SC, Microsoft YaHei, Arial Regular;
+  font-weight: var(--td-button-font-weight, 600);
+  vertical-align: top;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-user-select: none;
+  user-select: none;
+  /* stylelint-disable-next-line */
+  -webkit-appearance: none;
+}
+.t-button::after {
+  border-radius: calc(var(--td-button-border-radius, var(--td-radius-default, 12rpx)) * 2);
+}
+.t-button--text {
+  color: var(--td-button-default-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+  background: none;
+}
+.t-button--text::after {
+  border: 0;
+}
+.t-button--text.t-button--hover::after {
+  background-color: var(--td-button-default-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
+}
+.t-button--text.t-button--primary {
+  color: var(--td-button-primary-text-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  background: none;
+}
+.t-button--text.t-button--primary.t-button--hover::after {
+  background-color: var(--td-button-primary-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
+}
+.t-button--text.t-button--primary.t-button--disabled {
+  color: var(--td-button-primary-text-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
+  background: none;
+}
+.t-button--text.t-button--danger {
+  color: var(--td-button-danger-text-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+  background: none;
+}
+.t-button--text.t-button--danger.t-button--hover::after {
+  background-color: var(--td-button-danger-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
+}
+.t-button--text.t-button--danger.t-button--disabled {
+  color: var(--td-button-danger-text-disabled-color, var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff)));
+  background: none;
+}
+.t-button--text.t-button--light {
+  color: var(--td-button-light-text-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  background: none;
+}
+.t-button--text.t-button--light.t-button--hover::after {
+  background-color: var(--td-button-light-text-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
+}
+.t-button--text.t-button--disabled {
+  color: var(--td-button-default-disabled-color, var(--td-font-gray-4, rgba(0, 0, 0, 0.26)));
+}
+.t-button--ghost {
+  background-color: transparent;
+  color: var(--td-button-ghost-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
+}
+.t-button--ghost::after {
+  border-color: var(--td-button-ghost-border-color, var(--td-button-ghost-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff))));
+}
+.t-button--ghost.t-button--hover::after {
+  background: none;
+}
+.t-button--ghost.t-button--primary {
+  color: var(--td-button-ghost-primary-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-button--ghost.t-button--primary::after {
+  border-color: var(--td-button-ghost-primary-border-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-button--ghost.t-button--danger {
+  color: var(--td-button-ghost-danger-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+}
+.t-button--ghost.t-button--danger::after {
+  border-color: var(--td-button-ghost-danger-border-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+}
+.t-button--ghost.t-button--disabled {
+  background-color: transparent;
+  color: var(--td-button-ghost-disabled-color, rgba(255, 255, 255, 0.35));
+}
+.t-button--ghost.t-button--disabled::after {
+  border-color: var(--td-button-ghost-disabled-color, rgba(255, 255, 255, 0.35));
+}
+.t-button--outline {
+  color: var(--td-button-default-outline-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+  background-color: transparent;
+}
+.t-button--outline::after {
+  border-color: var(--td-button-default-outline-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+}
+.t-button--outline.t-button--hover::after {
+  background-color: var(--td-button-default-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
+  border-color: var(--td-button-default-outline-active-border-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+}
+.t-button--outline.t-button--disabled {
+  color: var(--td-button-default-outline-disabled-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+}
+.t-button--outline.t-button--disabled::after {
+  border-color: var(--td-button-default-outline-disabled-color, var(--td-component-border, var(--td-gray-color-4, #dcdcdc)));
+}
+.t-button--outline.t-button--primary {
+  color: var(--td-button-primary-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-button--outline.t-button--primary::after {
+  border-color: var(--td-button-primary-outline-border-color, var(--td-button-primary-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))));
+}
+.t-button--outline.t-button--primary.t-button--hover {
+  color: var(--td-button-primary-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
+}
+.t-button--outline.t-button--primary.t-button--hover::after {
+  background-color: var(--td-button-primary-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
+  border-color: var(--td-button-primary-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
+}
+.t-button--outline.t-button--primary.t-button--disabled {
+  background-color: transparent;
+  color: var(--td-button-primary-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
+}
+.t-button--outline.t-button--primary.t-button--disabled::after {
+  border-color: var(--td-button-primary-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
+}
+.t-button--outline.t-button--danger {
+  color: var(--td-button-danger-outline-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+}
+.t-button--outline.t-button--danger::after {
+  border-color: var(--td-button-danger-outline-border-color, var(--td-button-danger-outline-color, var(--td-error-color, var(--td-error-color-6, #d54941))));
+}
+.t-button--outline.t-button--danger.t-button--hover {
+  color: var(--td-button-danger-outline-active-border-color, var(--td-error-color-7, #ad352f));
+}
+.t-button--outline.t-button--danger.t-button--hover::after {
+  background-color: var(--td-button-danger-outline-active-bg-color, var(--td-bg-color-container-active, var(--td-gray-color-3, #e7e7e7)));
+  border-color: var(--td-button-danger-outline-active-border-color, var(--td-error-color-7, #ad352f));
+}
+.t-button--outline.t-button--danger.t-button--disabled {
+  background-color: transparent;
+  color: var(--td-button-danger-outline-disabled-color, var(--td-error-color-3, #ffb9b0));
+}
+.t-button--outline.t-button--danger.t-button--disabled::after {
+  border-color: var(--td-button-danger-outline-disabled-color, var(--td-error-color-3, #ffb9b0));
+}
+.t-button--outline.t-button--light {
+  color: var(--td-button-light-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+  background-color: var(--td-button-light-outline-bg-color, var(--td-brand-color-light, var(--td-primary-color-1, #f2f3ff)));
+}
+.t-button--outline.t-button--light::after {
+  border-color: var(--td-button-light-outline-border-color, var(--td-button-light-outline-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))));
+}
+.t-button--outline.t-button--light.t-button--hover {
+  color: var(--td-button-light-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
+}
+.t-button--outline.t-button--light.t-button--hover::after {
+  background-color: var(--td-button-light-outline-active-bg-color, var(--td-brand-color-light-active, var(--td-primary-color-2, #d9e1ff)));
+  border-color: var(--td-button-light-outline-active-border-color, var(--td-brand-color-active, var(--td-primary-color-8, #003cab)));
+}
+.t-button--outline.t-button--light.t-button--disabled {
+  background-color: transparent;
+  color: var(--td-button-light-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
+}
+.t-button--outline.t-button--light.t-button--disabled::after {
+  border-color: var(--td-button-light-outline-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
+}
+.t-button--dashed {
+  background-color: transparent;
+  border-style: dashed;
+}
+.t-button--dashed.t-button--primary {
+  color: var(--td-button-primary-dashed-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
+}
+.t-button--dashed.t-button--primary::after {
+  border-color: var(--td-button-primary-dashed-border-color, var(--td-button-primary-dashed-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9))));
+}
+.t-button--dashed.t-button--primary.t-button--disabled {
+  background-color: transparent;
+  color: var(--td-button-primary-dashed-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
+}
+.t-button--dashed.t-button--primary.t-button--disabled::after {
+  border-color: var(--td-button-primary-dashed-disabled-color, var(--td-brand-color-disabled, var(--td-primary-color-3, #b5c7ff)));
+}
+.t-button--dashed.t-button--danger {
+  color: var(--td-button-danger-dashed-color, var(--td-error-color, var(--td-error-color-6, #d54941)));
+}
+.t-button--dashed.t-button--danger::after {
+  border-color: var(--td-button-danger-dashed-border-color, var(--td-button-danger-dashed-color, var(--td-error-color, var(--td-error-color-6, #d54941))));
+}
+.t-button--dashed.t-button--danger.t-button--disabled {
+  background-color: transparent;
+  color: var(--td-button-danger-dashed-disabled-color, var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff)));
+}
+.t-button--dashed.t-button--danger.t-button--disabled::after {
+  border-color: var(--td-button-danger-dashed-disabled-color, var(--td-button-danger-disabled-color, var(--td-font-white-1, #ffffff)));
+}
+.t-button__loading + .t-button__content:not(:empty),
+.t-button__icon + .t-button__content:not(:empty) {
+  margin-left: 8rpx;
+}
+.t-button__icon {
+  border-radius: var(--td-button-icon-border-radius, 8rpx);
+}
+.t-button--round.t-button--size-large {
+  border-radius: calc(var(--td-button-large-height, 96rpx) / 2);
+}
+.t-button--round.t-button--size-large::after {
+  border-radius: var(--td-button-large-height, 96rpx);
+}
+.t-button--round.t-button--size-medium {
+  border-radius: calc(var(--td-button-medium-height, 80rpx) / 2);
+}
+.t-button--round.t-button--size-medium::after {
+  border-radius: var(--td-button-medium-height, 80rpx);
+}
+.t-button--round.t-button--size-small {
+  border-radius: calc(var(--td-button-small-height, 64rpx) / 2);
+}
+.t-button--round.t-button--size-small::after {
+  border-radius: var(--td-button-small-height, 64rpx);
+}
+.t-button--round.t-button--size-extra-small {
+  border-radius: calc(var(--td-button-extra-small-height, 56rpx) / 2);
+}
+.t-button--round.t-button--size-extra-small::after {
+  border-radius: var(--td-button-extra-small-height, 56rpx);
+}
+.t-button--square {
+  padding: 0;
+}
+.t-button--square.t-button--size-large {
+  width: var(--td-button-large-height, 96rpx);
+}
+.t-button--square.t-button--size-medium {
+  width: var(--td-button-medium-height, 80rpx);
+}
+.t-button--square.t-button--size-small {
+  width: var(--td-button-small-height, 64rpx);
+}
+.t-button--square.t-button--size-extra-small {
+  width: var(--td-button-extra-small-height, 56rpx);
+}
+.t-button--circle {
+  padding: 0;
+  border-radius: 50%;
+}
+.t-button--circle.t-button--size-large {
+  width: var(--td-button-large-height, 96rpx);
+}
+.t-button--circle.t-button--size-large::after {
+  border-radius: 50%;
+}
+.t-button--circle.t-button--size-medium {
+  width: var(--td-button-medium-height, 80rpx);
+}
+.t-button--circle.t-button--size-medium::after {
+  border-radius: 50%;
+}
+.t-button--circle.t-button--size-small {
+  width: var(--td-button-small-height, 64rpx);
+}
+.t-button--circle.t-button--size-small::after {
+  border-radius: 50%;
+}
+.t-button--circle.t-button--size-extra-small {
+  width: var(--td-button-extra-small-height, 56rpx);
+}
+.t-button--circle.t-button--size-extra-small::after {
+  border-radius: 50%;
+}
+.t-button--block {
+  display: flex;
+  width: 100%;
+}
+.t-button--disabled {
+  cursor: not-allowed;
+}
+.t-button__loading--wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.t-button__loading--indicator {
+  color: var(--td-font-white-1, #ffffff);
+}
+.t-button.t-button--hover::after {
+  z-index: -1;
+}
--- a/miniprogram_npm/tdesign-miniprogram/button/index.d.ts
+++ b/miniprogram_npm/tdesign-miniprogram/button/index.d.ts
@ -0,0 +1,3 @@
+export * from './props';
+export * from './type';
+export * from './button';
--- a/miniprogram_npm/tdesign-miniprogram/button/index.js
+++ b/miniprogram_npm/tdesign-miniprogram/button/index.js
@ -0,0 +1,3 @@
+export * from './props';
+export * from './type';
+export * from './button';
--- a/Show More
+++ b/Show More